Add small animation moving left and right.

Author: tesseralis

src/animations.ts

@@ -25,3 +25,15 @@ export async function slideIn(
     [obj, { alpha: 1 }, { at: 0, duration: 1 }],
   ]);
 }
+
+export async function bump(obj: Container, direction: Point, amount: number) {
+  await animate(obj.position, direction.multiplyScalar(amount), {
+    duration: 0.05,
+    ease: "easeIn",
+  });
+  await animate(
+    obj.position,
+    { x: 0, y: 0 },
+    { duration: 0.1, ease: "easeOut" }
+  );
+}

src/nodes/GatePiece.ts

@@ -11,6 +11,8 @@ const rotationSpeed = Math.PI / 16;
 export default class GatePiece extends GameNode {
   angle: number;
   axis: Axis;
+
+  container: Container;
   background: Graphics;
   angleMarker: Graphics;
   outline: Graphics;
@@ -19,7 +21,9 @@ export default class GatePiece extends GameNode {
     super();
     this.axis = axis;
     this.angle = angle;
-    this.view = new Container();
+    this.container = new Container();
+    this.view.addChild(this.container);
+
     this.angleMarker = new Graphics();
     this.background = new Graphics();
     this.outline = new Graphics()
@@ -32,7 +36,7 @@ export default class GatePiece extends GameNode {
       )
       .stroke({ color: "white", width: 2, alpha: 0.5 });
     this.outline.alpha = 0;
-    this.view.addChild(this.outline);
+    this.container.addChild(this.outline);
     const colorMap = octet(axis);
     for (let i = 0; i < 8; i++) {
       let angle = (i / 8) * 2 * Math.PI - Math.PI / 2;
@@ -48,8 +52,8 @@ export default class GatePiece extends GameNode {
         )
         .fill(getColor(getBlochCoords(colorMap[i])));
     }
-    this.view.addChild(this.background);
-    this.view.addChild(this.angleMarker);
+    this.container.addChild(this.background);
+    this.container.addChild(this.angleMarker);
     this.drawAngle();
   }
 

src/nodes/MeasurementPiece.ts

@@ -1,23 +1,28 @@
-import { Graphics } from "pixi.js";
+import { Container, Graphics } from "pixi.js";
 import { getBlochCoords, getOrtho, randomQubit, type Qubit } from "../quantum";
 import { getColor } from "../colors";
 import { PIECE_RADIUS } from "../constants";
 import GameNode from "./GameNode";
 
 // Represents a measurement along an axis
 export default class MeasurementPiece extends GameNode {
+  container: Container;
+
   sprite: Graphics;
   rod: Graphics;
   base: Qubit;
   ortho: Qubit;
   constructor(base: Qubit) {
     super();
+    this.container = new Container();
+    this.view.addChild(this.container);
+
     this.base = base;
     this.ortho = getOrtho(base);
     this.sprite = new Graphics();
     this.rod = new Graphics();
-    this.view.addChild(this.sprite);
-    this.view.addChild(this.rod);
+    this.container.addChild(this.sprite);
+    this.container.addChild(this.rod);
     this.draw();
   }
 

src/nodes/Player.ts

@@ -18,7 +18,7 @@ import { campaign, type Level } from "../levels";
 import GameNode from "./GameNode";
 import { animate } from "motion";
 import { inputs, type PlayerInput } from "../inputs";
-import { pulse } from "../animations";
+import { bump, pulse } from "../animations";
 import { delay } from "../util";
 import { playSound } from "../audio";
 import HoldArea from "./HoldArea";
@@ -323,6 +323,7 @@ export default class Player extends GameNode {
           break;
         this.board.setCurrentPosition(left);
         playSound("move");
+        bump(this.board.current!.container, LEFT, CELL_SIZE / 8);
         break;
       }
       case this.inputMap.right: {
@@ -344,6 +345,7 @@ export default class Player extends GameNode {
         }
         this.board.setCurrentPosition(right);
         playSound("move");
+        bump(this.board.current!.container, RIGHT, CELL_SIZE / 8);
         break;
       }
       // If the player presses down, speed up the steps

src/nodes/QubitPair.ts

@@ -2,20 +2,25 @@ import { CELL_SIZE } from "../constants";
 import { randomQubit, type Qubit } from "../quantum";
 import QubitPiece from "./QubitPiece";
 import GameNode from "./GameNode";
+import { Container } from "pixi.js";
 
 type Orientation = "vertical" | "horizontal";
 // A pair of qubits
 export default class QubitPair extends GameNode {
+  container: Container;
   first: QubitPiece;
   second: QubitPiece;
   orientation: Orientation = "vertical";
 
   constructor(first: Qubit, second: Qubit) {
     super();
+    this.container = new Container();
+    this.view.addChild(this.container);
+
     this.first = new QubitPiece(first);
     this.second = new QubitPiece(second);
-    this.view.addChild(this.first.view);
-    this.view.addChild(this.second.view);
+    this.container.addChild(this.first.view);
+    this.container.addChild(this.second.view);
     this.setPositions();
   }