refactor: #fe clue placement bounds

frontend/src/js/clue.ts

@@ -15,10 +15,11 @@ class Clue extends Phaser.GameObjects.Sprite {
   word: Types.Word;
   scene: FightScene;
   textureKey: string;
+  body: Phaser.Physics.Arcade.Body;
 
   constructor(scene: FightScene, word: Types.Word) {
     // TODO: set positions
-    super(scene, 400, 300, "__MISSING");
+    super(scene, 0, 0, "__MISSING");
     scene.add.existing(this);
 
     this.setAlpha(0);
@@ -63,13 +64,18 @@ class Clue extends Phaser.GameObjects.Sprite {
     this.body = new Phaser.Physics.Arcade.Body(this.scene.physics.world, this);
     this.scene.physics.world.add(this.body);
     this.scene.cluesGroup.add(this);
+    this.setPositionForDrop();
+    this.fadeIn();
+  }
 
+  setPositionForDrop() {
+    const bounds = this.body.customBoundsRectangle;
     const x =
-      (this.scene.cameras.main.width - this.width - 10) * Math.random() +
-      5 +
-      this.width / 2;
-    this.setPosition(x, 50);
-    this.fadeIn();
+      bounds.left +
+      this.displayWidth * 0.5 +
+      Math.random() * (bounds.width - this.displayWidth);
+    const y = bounds.top + this.displayHeight * 0.5;
+    this.setPosition(x, y);
   }
 
   delete() {

frontend/src/js/fight_scene.ts

@@ -265,9 +265,9 @@ export default class FightScene extends Phaser.Scene {
 
   initCluesGroup() {
     const bounds = new Phaser.Geom.Rectangle(
-      0,
-      0,
-      this.cameras.main.width,
+      4,
+      4,
+      this.cameras.main.width - 8,
       this.cameras.main.height / 2,
     );
     this.cluesGroup = this.physics.add.group({