feat: sketch v2 gameplay

frontend/src/js/clue.ts

@@ -21,18 +21,33 @@ class Clue {
   }
 
   spotlight() {
+    const freeze = () => {
+      const body = this.payload.body as Phaser.Physics.Arcade.Body;
+      if (body) {
+        body.allowGravity = false;
+        body.checkCollision.none = true;
+      }
+    };
+    freeze();
     const bounds = this.scene.uiDimensions.cluesBounds;
-    const x = bounds.centerX + this.payload.displayWidth * 0.5;
-    const y = bounds.centerY + this.payload.displayHeight * 0.5;
+    // FIXME: the very first word seems to always be too big
+    const scale = Math.min(
+      (bounds.width * 0.9) / this.payload.width,
+      (bounds.height * 0.9) / this.payload.height,
+      2 * this.payload.scale,
+    );
+    this.payload.depth = 1;
+    this.payload.setAlpha(1);
     this.scene.tweens.add({
-      scaleX: 2,
-      scaleY: 2,
-      x: x,
-      y: y,
+      alpha: 1,
+      scale: scale,
+      x: bounds.centerX,
+      y: bounds.centerY,
       targets: [this.payload],
       duration: 600,
       ease: "Elastic",
       easeParams: [1.2, 0.8],
+      onComplete: freeze.bind(this),
     });
   }
 
@@ -61,8 +76,7 @@ class Clue {
   }
 
   setPositionForDrop() {
-    const bounds = (this.payload.body as Phaser.Physics.Arcade.Body)
-      .customBoundsRectangle;
+    const bounds = this.scene.uiDimensions.cluesBounds;
     const children = this.scene.cluesGroup.children as Phaser.Structs.Set<
       Phaser.GameObjects.Text | Phaser.GameObjects.Sprite
     >;
@@ -130,7 +144,7 @@ class Clue {
   fadeIn(onComplete?: Phaser.Types.Tweens.TweenOnCompleteCallback) {
     this.scene.tweens.add({
       targets: this.payload,
-      alpha: 1,
+      alpha: 0.5,
       ease: "Linear",
       delay: 0,
       duration: 100,

frontend/src/js/fight_scene.ts

@@ -165,9 +165,11 @@ export default class FightScene extends MainScene {
       });
       this.updateScore(score);
       this.popFoe(match);
+      this.focusedFoe = undefined;
       match.handleSuccess();
       this.hud.showSubmitFeedback("green", inputStatus.final);
       new Spear(this, this.player, match.critter);
+      this.spotlight();
     }
   };
 
@@ -265,5 +267,13 @@ export default class FightScene extends MainScene {
     const foe = new Foe(this, timeout);
     foe.initialize(length, beWord, beClue, payload);
     payload.loadWord(beWord, texture);
+    this.spotlight();
+  }
+
+  spotlight() {
+    if (this.focusedFoe) return;
+    if (this.foes.length < 1) return;
+    this.focusedFoe = this.foes[0];
+    this.focusedFoe.clue.spotlight();
   }
 }

frontend/src/js/foe.ts

@@ -59,6 +59,8 @@ class Foe {
     this.critter.escape();
     this.scene.player.hitFlash();
     this.scene.updateHealth(-this.beWord.ocr_transcript.length);
+    if (this.scene.focusedFoe == this) this.scene.focusedFoe = undefined;
+    this.scene!.spotlight();
   }
 
   async handleSuccess() {

frontend/src/js/main_scene.ts

@@ -39,6 +39,8 @@ export default class MainScene extends Phaser.Scene {
   music!: Phaser.Sound.BaseSound;
   player!: Player;
 
+  focusedFoe: Foe | undefined;
+
   async create(data: { music: Phaser.Sound.BaseSound }) {
     this.music = data.music;
 
@@ -59,6 +61,8 @@ export default class MainScene extends Phaser.Scene {
     this.createPhysics();
     this.initCluesGroup();
 
+    this.focusedFoe = undefined;
+
     this.player = new Player(this);
 
     // this.scale.displaySize.setAspectRatio(
@@ -395,38 +399,42 @@ export default class MainScene extends Phaser.Scene {
       },
     };
 
-    // NOTE: we iterate in order, so older words are preferred
-    this.foes.forEach((foe) => {
-      // NOTE: case insensitive match is done by lowercasing because
-      // "ẞ".toLowerCase() == 'ß' (square and fair)
-      // "ß".toUpperCase() == 'SS' (weird)
-      const caselessLevenshtein = levenshtein(
-        transcription.toLowerCase(),
-        foe.beWord.ocr_transcript.toLowerCase(),
-      );
-
-      const casefullLevenshtein = levenshtein(
-        transcription,
-        foe.beWord.ocr_transcript,
-      );
-
-      // NOTE: bare minimum threshold for match
-      if (caselessLevenshtein.similarity < 0.5) return;
+    if (this.focusedFoe === undefined) return result;
+    const foe = this.focusedFoe;
 
-      // NOTE: caselessLevenshtein.similarity >= casefullLevenshtein.similarity
-      const caselessMatchImproved =
-        caselessLevenshtein.similarity > result.caselessLevenshtein.similarity;
-      const casefullMatchImproved =
-        casefullLevenshtein.similarity > result.casefullLevenshtein.similarity;
+    // NOTE: case insensitive match is done by lowercasing because
+    // "ẞ".toLowerCase() == 'ß' (square and fair)
+    // "ß".toUpperCase() == 'SS' (weird)
+    const caselessLevenshtein = levenshtein(
+      transcription.toLowerCase(),
+      foe.beWord.ocr_transcript.toLowerCase(),
+    );
 
-      //  CL/CF - = +
-      //      -     ?  -> CL-/CF+ should be impossible
-      //      =     Y  -> CL=/CF+ means improved casing
-      //      + Y Y Y  -> CL+ means more correct letters
-      if (!caselessMatchImproved && !casefullMatchImproved) return;
+    const casefullLevenshtein = levenshtein(
+      transcription,
+      foe.beWord.ocr_transcript,
+    );
 
-      result = { match: foe, casefullLevenshtein, caselessLevenshtein };
-    });
+    // NOTE: bare minimum threshold for match
+    // if (caselessLevenshtein.similarity < 0.5) return;
+
+    // NOTE: caselessLevenshtein.similarity >= casefullLevenshtein.similarity
+    // const caselessMatchImproved =
+    //   caselessLevenshtein.similarity > result.caselessLevenshtein.similarity;
+    // const casefullMatchImproved =
+    //   casefullLevenshtein.similarity > result.casefullLevenshtein.similarity;
+
+    //  CL/CF - = +
+    //      -     ?  -> CL-/CF+ should be impossible
+    //      =     Y  -> CL=/CF+ means improved casing
+    //      + Y Y Y  -> CL+ means more correct letters
+    // if (!caselessMatchImproved && !casefullMatchImproved) return;
+
+    result = {
+      match: foe,
+      casefullLevenshtein,
+      caselessLevenshtein,
+    };
     return result;
   }