// vim: set ts=2 sw=2:
"use strict";

class Section {
  constructor(el, physics) {
    this.el = el;
    this.physics = physics;
  }

  update(dt) {
    let phys_y = this.physics.y_mm;

    // But the physics' y doesn't correspond to where we want to be on-screen.
    // We want to stop in the middle of the screen.

    this.el.style.transform = `translateY(${this.physics.y_bg_mm}mm)`;
  }
}

class WallSection extends Section {
  constructor(el, physics) {
    super(el, physics);
    this.brightness = 0;
  }

  update(dt) {
    super.update(dt);

    // brightness
    this.brightness = this.physics.y_bg_mm / 1000;
    if (this.brightness < 1) {
      this.el.style.filter = `brightness(${this.brightness})`;
    }

  }
}

class EarthSection extends Section {
  constructor(el, physics) {
    super(el, physics);
    this.elGulli = this.el.querySelector('.section-earth__gulli');
    console.log(this.elGulli);
  }

  update(dt) {
    super.update(dt);

    // gulli
    const gullipos = 680;
    if (this.physics.y_bg_mm > gullipos) {
      const movement = this.physics.y_bg_mm - gullipos;
       this.elGulli.style.transform = `rotate(-${movement}deg)
                                       translate(${movement * 2}px, -${movement * 4}px)`;
    }

  }
}

@@ -986,58 +986,111 @@
 ulli
-pos = 680;%0A    if (this.physics.y_bg_mm %3E
+start = 0.78, gulliend = 1.00;%0A    if (gullistart %3C this.physics.score && this.physics.score %3C
  gulli
-pos
+end
 ) %7B%0A
@@ -1112,16 +1112,17 @@
 ement = 
+(
 this.phy
@@ -1130,23 +1130,21 @@
 ics.
-y_bg_mm
+score
  - gulli
 pos;
@@ -1143,14 +1143,21 @@
 ulli
-pos
+start)*1000
 ;%0A
- 
     
@@ -1213,16 +1213,18 @@
 ent%7Ddeg)
+ %60
 %0A       
@@ -1251,20 +1251,19 @@
         
-    
++ %60
 translat

Fix gulli to be more stable across screens.