fixed switcherbars

frontend/code/components/switcherBar.ts

@@ -69,7 +69,7 @@ export class SwitcherBarComponent extends ComponentBase {
         });
 
         this.moveTween = new KineticTween({
-            acceleration: 50 * pixelsPerRem,
+            acceleration: 350 * pixelsPerRem,
         });
 
         // The marker needs updating when the element is resized
@@ -108,8 +108,6 @@ export class SwitcherBarComponent extends ComponentBase {
             this.markerCurrent[i] = start + delta * t;
         }
 
-        console.debug('MOVE', this.markerCurrent);
-
         // Account for the fade animation
         let fade = this.fadeTween.current;
         let markerCurWidth = this.markerCurrent[2] * fade;
@@ -127,6 +125,8 @@ export class SwitcherBarComponent extends ComponentBase {
         this.markerElement.style.width = `${markerCurWidth}px`;
         this.markerElement.style.height = `${markerCurHeight}px`;
 
+        let rect = this.markerElement.getBoundingClientRect();
+
         // The inner options are positioned relative to the marker. Move them in
         // the opposite direction so they stay put.
         this.markerOptionsElement.style.left = `-${markerCurLeft}px`;
@@ -172,7 +172,7 @@ export class SwitcherBarComponent extends ComponentBase {
     animateToCurrentTarget(): void {
         // Move the marker
         if (this.state.selectedName !== null) {
-            this.markerAtAnimationStart = this.markerCurrent;
+            this.markerAtAnimationStart = [...this.markerCurrent];
             this.markerAtAnimationEnd = this.getMarkerTarget()!;
 
             let animatedPosition =
@@ -371,11 +371,6 @@ export class SwitcherBarComponent extends ComponentBase {
 
                     this.moveTween.teleportTo(animatedPosition);
                     this.moveTween.update();
-                    console.debug(
-                        'INIT',
-                        animatedPosition,
-                        this.moveTween.progress
-                    );
                     this.updateCssToMatchState();
                 }, 100);
             }

frontend/code/tweens/kineticTween.ts

@@ -23,13 +23,11 @@ export class KineticTween extends BaseTween {
     }
 
     public transitionTo(target: number): void {
-        console.debug(`NEW TRANSITION. Velocity: ${this.velocity}`);
         this.lastTickAt = Date.now() / 1000;
         super.transitionTo(target);
     }
 
     public teleportTo(position: number): void {
-        console.debug(`NEW TELEPORT. Velocity: ${this.velocity}`);
         this.lastTickAt = Date.now() / 1000;
         super.teleportTo(position);
     }
@@ -53,10 +51,9 @@ export class KineticTween extends BaseTween {
             this.velocity != 0
         ) {
             accelerationFactor = 3;
-            console.log('Wrong direction.');
         }
         // Case: Brake
-        else if (Math.abs(signedRemainingDistance) < brakingDistance * 0.97) {
+        else if (Math.abs(signedRemainingDistance) < brakingDistance) {
             accelerationFactor = -1;
         }
         // Case: Accelerate towards the target
@@ -69,11 +66,6 @@ export class KineticTween extends BaseTween {
             accelerationFactor *
             Math.sign(signedRemainingDistance);
 
-        console.debug(
-            `Velocity: ${this.velocity}  Acc: ${currentAcceleration}`
-            // `Dist: ${signedRemainingDistance} Vel: ${this.velocity}  Fac: ${accelerationFactor} Acc: ${currentAcceleration}`
-        );
-
         // Update the velocity
         this.velocity += currentAcceleration * deltaTime;
         let deltaDistance = this.velocity * deltaTime;
@@ -82,7 +74,6 @@ export class KineticTween extends BaseTween {
         if (Math.abs(deltaDistance) >= Math.abs(signedRemainingDistance)) {
             this._current = this._end;
             this.velocity = 0;
-            console.debug('FINISHED. Killing Velocity');
         } else {
             this._current += deltaDistance;
         }