feat: #fe correlate critter size to word length

frontend/src/js/critter.ts

 import "phaser";
 import FightScene from "./fight_scene";
 
-const SPECIES = ["Bear", "Boar", "Deer", "Fox", "Horse", "Rabbit", "Wolf"];
+const SPECIES = [
+  // NOTE: these are ordered by size (i.e. difficulty)
+  "Rabbit",
+  "Fox",
+  "Boar",
+  "Wolf",
+  "Horse",
+  "Bear",
+  "Deer",
+];
 const RELATIVE_SCALE_ADJUSTMENT: { [key: string]: number } = {
   Bear: 1.0,
   Boar: 0.6,
@@ -25,8 +34,12 @@ class Critter extends Phaser.Physics.Arcade.Sprite {
   species: string;
   body: Phaser.Physics.Arcade.Body;
 
-  constructor(scene: FightScene, baseVelocity = 100) {
-    const species = SPECIES[Math.floor(Math.random() * SPECIES.length)];
+  constructor(scene: FightScene, baseVelocity = 100, size = 1.0) {
+    const speciesIndex = Math.min(
+      SPECIES.length - 1,
+      Math.floor(size * SPECIES.length),
+    );
+    const species = SPECIES[speciesIndex];
     super(scene, 0, 0, `${species}Walk`);
     scene.add.existing(this);
 

frontend/src/js/foe.ts

@@ -42,7 +42,11 @@ class Foe {
     this.clue = new Clue(this.scene, this.beWord);
     // TODO: this is the time to reach a collision w/player, but maybe we should just use the transversal of the full screen.
     const critterSpeed = this.scene.player.getBounds().left / this.duration;
-    this.critter = new Critter(this.scene, critterSpeed);
+    this.critter = new Critter(
+      this.scene,
+      critterSpeed,
+      Math.min((length - 1) / 14, 1),
+    );
     this.scene.foes.push(this);
 
     this.collider = this.scene.physics.add.overlap(