feat: split foe into clue+critter

frontend/src/js/clue.ts

+import "phaser";
+import FightScene from "./fight_scene";
+
+interface WordObject {
+  id: string;
+  image: string;
+  ocr_confidence: number;
+  ocr_transcript: string;
+}
+
+class Clue extends Phaser.GameObjects.Sprite {
+  word: WordObject;
+
+  constructor(scene: FightScene, word: WordObject) {
+    // TODO: set positions
+    super(scene, 400, 300, word.id);
+
+    this.setAlpha(0);
+    this.scene.add.existing(this);
+
+    this.scene = scene;
+    this.word = word;
+
+    this.loadTexture();
+  }
+
+  loadTexture() {
+    this.scene.textures.addBase64(this.word.id, this.word.image);
+    this.scene.textures.once(
+      "addtexture",
+      this.showTexture.bind(this),
+      this.scene,
+    );
+  }
+
+  showTexture() {
+    this.setTexture(this.word.id);
+    this.scene.tweens.add({
+      targets: this,
+      alpha: 1,
+      ease: "Linear",
+      delay: 0,
+      duration: 100,
+    });
+  }
+}
+
+export default Clue;

frontend/src/js/critter.ts

+import "phaser";
+import Clue from "./clue";
+import FightScene from "./fight_scene";
+
+const SPECIES = ["bear", "wolf", "deer", "boar"];
+
+class Critter extends Phaser.Physics.Arcade.Sprite {
+  clue: Clue;
+  scene: FightScene;
+  species: string;
+  body: Phaser.Physics.Arcade.Body;
+
+  constructor(scene: FightScene, clue: Clue) {
+    const species = SPECIES[Math.floor(Math.random() * SPECIES.length)];
+    super(scene, -100, scene.cameras.main.height - 100, species);
+    scene.add.existing(this);
+
+    this.scene = scene;
+    this.species = species;
+    this.clue = clue;
+
+    let scale = 2;
+    if (this.species === "deer") {
+      scale = 2.5;
+    } else if (this.species === "bear") {
+      scale = 3;
+    }
+
+    this.body = new Phaser.Physics.Arcade.Body(this.scene.physics.world, this);
+    this.scene.physics.world.add(this.body);
+    this.scene.physics.add.collider(this, this.scene.ground);
+
+    this.setScale(scale);
+    // this.setInteractive(true);
+    this.flipX = true;
+
+    this.play({ key: this.species + "_walk", repeat: -1 });
+    // TODO: bring animal below grass
+
+    this.body.setVelocity(100, 0);
+
+    // here to implement health
+    this.scene.physics.add.overlap(
+      this.scene.player,
+      this,
+      (_player, _enemy) => {
+        this.play(this.species + "_run");
+        this.body.setVelocity(300, 0);
+        setTimeout(() => this.destroy(), 2000);
+      },
+    );
+  }
+
+  flee() {
+    this.play(this.species + "_run");
+    this.flipX = false;
+    this.body.setVelocity(-200, 0);
+    setTimeout(() => this.destroy(), 2000); // TODO: disappear offscreen
+  }
+}
+
+export default Critter;

frontend/src/js/fight_scene.ts

 import "phaser";
 
-import Foe from "./foe";
+import Critter from "./critter";
 import Spear from "./spear";
 import backend from "./backend";
 
 // TODO: write interfaces
 import levenshtein from "damerau-levenshtein";
+import Clue from "./clue";
 
 export default class FightScene extends Phaser.Scene {
-  foes: Array<Foe>;
+  foes: Array<Critter>;
   ground: Phaser.Types.Physics.Arcade.ImageWithStaticBody;
   player: Phaser.Types.Physics.Arcade.SpriteWithDynamicBody;
 
@@ -282,25 +283,25 @@ function submitTranscription(transcription: string, scene: FightScene) {
   let similarity = 0;
   let match = null;
 
-  scene.foes.forEach((foe) => {
+  scene.foes.forEach((critter) => {
     const s = levenshtein(
       transcription.toLowerCase(),
-      foe.word.ocr_transcript.toLowerCase(),
+      critter.clue.word.ocr_transcript.toLowerCase(),
     ).similarity;
     if (s < similarity) return;
     similarity = s;
-    match = foe;
+    match = critter;
   });
 
   match ??= scene.foes[0]; // TODO: remove this
 
-  console.log(similarity, match.word.ocr_transcript);
+  console.log(similarity, match.clue.word.ocr_transcript);
 
   // TODO: we can have near misses depending on similarity!
   const hit = similarity >= 0.9;
   const enemy = match;
 
-  scene.shootSpear(enemy.animalSprite, hit);
+  scene.shootSpear(enemy, hit);
 }
 
 function gameStart(scene: any) {
@@ -309,7 +310,9 @@ function gameStart(scene: any) {
 
 function dispatchEnemy(scene: any) {
   backend.post("GetImage", {}).then(function (response) {
-    const foe = new Foe(scene, response.data);
-    scene.foes.push(foe);
+    const clue = new Clue(scene, response.data);
+    const critter = new Critter(scene, clue);
+    // TODO: clue
+    scene.foes.push(critter);
   });
 }

frontend/src/js/foe.ts

-import "phaser";
-
-const SPECIES = ["bear", "wolf", "deer", "boar"];
-
-interface wordObject {
-  id: string;
-  image: string;
-  ocr_confidence: number;
-  ocr_transcript: string;
-}
-
-class Foe {
-  scene: Phaser.Scene;
-  clueSprite: Phaser.GameObjects.Sprite;
-  animalSprite: Phaser.GameObjects.Sprite;
-  word: wordObject;
-  species: string;
-
-  constructor(scene: Phaser.Scene, word: wordObject) {
-    this.scene = scene;
-    this.word = word;
-    this.addClue();
-    this.addAnimal();
-  }
-
-  addClue() {
-    this.scene.textures.addBase64(this.word.id, this.word.image);
-    this.scene.textures.once(
-      "addtexture",
-      this.addClueSprite.bind(this),
-      this.scene,
-    );
-  }
-
-  addClueSprite() {
-    // TODO: position
-    this.clueSprite = this.scene.add.sprite(400, 300, this.word.id);
-  }
-
-  addAnimal() {
-    this.species = SPECIES[Math.floor(Math.random() * SPECIES.length)];
-
-    let scale = 2;
-    if (this.species === "deer") {
-      scale = 2.5;
-    } else if (this.species === "bear") {
-      scale = 3;
-    }
-
-    this.animalSprite = this.scene.physics.add
-      .sprite(-100, this.scene.cameras.main.height - 100, this.species)
-      .setScale(scale)
-      .setInteractive();
-    this.animalSprite.flipX = true;
-
-    this.animalSprite.flee = function () {
-      this.play(this.species + "_run");
-      this.flipX = false;
-      this.body.setVelocity(-200, 0);
-      setTimeout(() => this.destroy(), 2000); // TODO: disappear offscreen
-    };
-
-    this.scene.physics.add.collider(this.animalSprite, this.scene.ground);
-
-    setAnimation(this.animalSprite, this.species + "_walk");
-    // TODO: bring animal below grass
-
-    this.animalSprite.body.setVelocity(100, 0);
-
-    // here to implement health
-    this.scene.physics.add.overlap(
-      this.scene.player,
-      this.animalSprite,
-      (player, nemico) => {
-        nemico.play(this.species + "_run");
-        this.animalSprite.body.setVelocity(300, 0);
-        setTimeout(() => nemico.destroy(), 2000);
-      },
-    );
-  }
-}
-
-function setAnimation(obj, idleKey) {
-  obj.play({ key: idleKey, repeat: -1 });
-}
-
-export default Foe;

frontend/src/js/spear.ts

@@ -48,7 +48,7 @@ class Spear extends Phaser.Physics.Arcade.Sprite {
         this.hitTarget.bind(this),
       );
     } else {
-      console.error("Cannot hit foe. :(");
+      console.error("Cannot hit critter. :(");
     }
   }