[ISSUE-32]|<Keshav> Fix for rendering proper hitboxes in frontend (#33)

common/PacketType.ts

@@ -19,6 +19,7 @@ export enum ServerToClientPacketType {
   SOLDIER_CREATE_ACK = "sca",
   SOLDIER_SPAWN_SCHEDULED = "sspwnsch",
   SPAWN_POINT_ACK = "spnpntack",
+  SPAWN_POINT_RJCT = "spnpntreject",
   GAME_STATE_SYNC = "gss",
   PLAYER_LEFT = "pl",
   PLAYER_INIT = "pi",

gameserver/commands/OnSoldierMoveCommand.ts

@@ -33,7 +33,10 @@ export class OnSoldierMoveCommand extends Command<SessionRoom, CommandPayload> {
         new SAT.Box(new SAT.Vector(), sceneSize.x, sceneSize.y)
       );
       gridFormation.calculatePositions(
-        new SAT.Vector(message.expectedPositionX, message.expectedPositionY)
+        new SAT.Vector(
+          message.expectedPositionX - soldierObjects[0].radius,
+          message.expectedPositionY - soldierObjects[0].radius
+        )
       );
     } catch (error) {
       console.error(error);

gameserver/commands/OnSpawnPointSelectCommand.ts

@@ -4,16 +4,17 @@ import { SessionRoom } from "../SessionRoom";
 import { Client } from "colyseus";
 import { CommandPayload } from "./CommandPayloadType";
 import SAT from 'sat';
+import { PacketType } from "../../common/PacketType";
 export class OnSpawnPointSelectCommand extends Command<SessionRoom, CommandPayload> {
   execute({
     client,
     message,
     gameManager,
   }: CommandPayload<{ spawnX: number; spawnY: number }>) {
     const { spawnX, spawnY } = message;
-    const requestedPoint = new SAT.Vector(spawnX, spawnY);
-
     const castleSize = 64;
+    const requestedPoint = new SAT.Vector(spawnX - castleSize/2, spawnY - castleSize/2);
+
 
     const dimensions = gameManager?.scene.getDimension();
     if (!dimensions) return;
@@ -26,9 +27,13 @@ export class OnSpawnPointSelectCommand extends Command<SessionRoom, CommandPaylo
 
     const pointInPolygon = SAT.pointInPolygon(requestedPoint, sceneBoundingBox.toPolygon())
     if (!pointInPolygon) {
+      client.send(PacketType.ByServer.SPAWN_POINT_RJCT, {
+        spawnX,
+        spawnY,
+      });
       return;
     }
     const player = this.state.getPlayer(client.id);
-    player?.updatePosition(spawnX, spawnY);
+    player?.updatePosition(requestedPoint.x, requestedPoint.y);
   }
 }

gameserver/core/Scene.ts

@@ -56,19 +56,20 @@ export class Scene extends Quadtree<TypeQuadtreeItem> {
    * @returns
    */
   getNearbyUnits(
-    centerX: number,
-    centerY: number,
-    squareWidth: number,
+    topLeftX: number,
+    topLeftY: number,
+    squareSize: number,
     type?: SceneObjectType[]
   ) {
+    const radius = squareSize / 2;
     const query: TypeQuadtreeItem = {
-      x: centerX - squareWidth / 2,
-      y: centerY - squareWidth / 2,
-      w: squareWidth,
-      h: squareWidth,
-      width: squareWidth,
-      height: squareWidth,
-      r: squareWidth / 2,
+      x: topLeftX - radius,
+      y: topLeftY - radius,
+      w: squareSize,
+      h: squareSize,
+      width: squareSize,
+      height: squareSize,
+      r: radius,
       id: "query-object",
       type: "FIXED",
       collidable: false,

gameserver/core/types/SceneObject.ts

@@ -4,6 +4,7 @@ import SAT from "sat";
  * @classdesc Any object that is meant to be part of the Scene should extend this class.
  */
 export type SceneObjectType = "FIXED" | "MOVABLE";
+
 export class SceneObject extends SAT.Box {
   readonly id: string;
 
@@ -33,11 +34,25 @@ export class SceneObject extends SAT.Box {
     // top-left corner of square hitbox
     this.x = x;
     this.y = y;
+
     this.r = size / 2;
     this.type = type;
     this.collidable = collidable;
   }
+  getPosition() {
+    return new SAT.Vector(this.x, this.y);
+  }
+  setPosition(v: SAT.Vector) {
+    this.x = v.x;
+    this.y = v.y;
+    this.pos.copy(v);
+  }
   getCircleCenter(): SAT.Vector {
-    return new SAT.Vector(this.x + this.r, this.y + this.r);
+    // circle hitbox inscribed in square
+    const circleCenterOffsetFromTopLeft = this.r;
+    return new SAT.Vector(
+      this.x + circleCenterOffsetFromTopLeft,
+      this.y + circleCenterOffsetFromTopLeft
+    );
   }
 }

gameserver/schema/PlayerState.ts

@@ -60,14 +60,7 @@ export class PlayerState extends Schema implements ISceneItem {
   constructor(name: string, x: number, y: number, sessionId: string) {
     super();
     this.id = sessionId;
-    this.sceneItemRef = new SceneObject(
-      sessionId,
-      x,
-      y,
-      64,
-      "FIXED",
-      false
-    );
+    this.sceneItemRef = new SceneObject(sessionId, x, y, 64, "FIXED", false);
     this.name = name;
     this.resources = 100;
     this.readyStatus = false;
@@ -130,9 +123,7 @@ export class PlayerState extends Schema implements ISceneItem {
   public updatePosition(x: number, y: number) {
     this.posX = x;
     this.posY = y;
-    this.sceneItemRef.x = x;
-    this.sceneItemRef.y = y;
-    this.sceneItemRef.pos.copy(new SAT.Vector(x, y));
+    this.sceneItemRef.setPosition(new SAT.Vector(x, y));
   }
 
   //TODO:
@@ -141,7 +132,7 @@ export class PlayerState extends Schema implements ISceneItem {
   }
 
   public getSoldier(soldierId?: string | null) {
-    if(!soldierId) return undefined;
+    if (!soldierId) return;
     const soldierState = this.soldiers.get(soldierId);
     return soldierState;
   }

gameserver/schema/SoldierState.ts

@@ -40,7 +40,7 @@ export class SoldierState extends Schema implements ISceneItem, IBoidAgent {
 
   @type("string") type: SoldierType = "SPEARMAN";
 
-  @type("number") radius: number = 32;
+  @type("number") radius: number = 16;
 
   @type("number") health: number = 100;
   @type("number") speed: number;
@@ -99,7 +99,14 @@ export class SoldierState extends Schema implements ISceneItem, IBoidAgent {
     this.damage = SoldierTypeConfig[this.type].damage;
     this.cost = SoldierTypeConfig[this.type].cost;
 
-    this.sceneItemRef = new SceneObject(this.id, x, y, 32, "MOVABLE", true);
+    this.sceneItemRef = new SceneObject(
+      this.id,
+      x,
+      y,
+      this.radius * 2,
+      "MOVABLE",
+      true
+    );
   }
 
   getSceneItem() {
@@ -185,9 +192,10 @@ export class SoldierState extends Schema implements ISceneItem, IBoidAgent {
     excludeUnitPredicate?: (arg0: SoldierState, arg1: SoldierState) => boolean
   ) {
     const soldier = this.getSceneItem();
+    const centerPos = soldier.getCircleCenter();
     const nearbyUnits = stateManager.scene.getNearbyUnits(
-      soldier.getCircleCenter().x,
-      soldier.getCircleCenter().y,
+      centerPos.x,
+      centerPos.y,
       MOVABLE_UNIT_CONSTANTS.NEARBY_SEARCH_RADI,
       ["MOVABLE"]
     );
@@ -323,24 +331,30 @@ export class SoldierState extends Schema implements ISceneItem, IBoidAgent {
     const soldierCenterPosition = this.getSceneItem().getCircleCenter();
 
     const enemyTowers = stateManager.scene
-      .getNearbyUnits(
-        this.currentPositionX,
-        this.currentPositionY,
-        100,
-        ["FIXED"]
-      )
+      .getNearbyUnits(soldierCenterPosition.x, soldierCenterPosition.y, 100, [
+        "FIXED",
+      ])
       .filter(
         (quadtreeItem) =>
           stateManager.getPlayer(quadtreeItem.id) &&
           quadtreeItem.id !== this.playerId &&
-          stateManager.getPlayer(quadtreeItem.id)!.getSceneItem().getCircleCenter().clone().sub(soldierCenterPosition).len() < 100
+          stateManager
+            .getPlayer(quadtreeItem.id)!
+            .getSceneItem()
+            .getCircleCenter()
+            .clone()
+            .sub(soldierCenterPosition)
+            .len() < 100
       )
       .map((d) => stateManager.getPlayer(d.id));
 
     enemyTowers.forEach((playerBase) => {
       if (!playerBase) return;
       const enemyTowerCenter = playerBase.getSceneItem().getCircleCenter();
-      console.log('dist = ',enemyTowerCenter.clone().sub(soldierCenterPosition).len());
+      console.log(
+        "dist = ",
+        enemyTowerCenter.clone().sub(soldierCenterPosition).len()
+      );
       const flagHealth = playerBase.spawnFlagHealth - 0.45 * delta;
       playerBase.spawnFlagHealth = Math.max(0, flagHealth);
     });

gameserver/stateMachines/soldier-state-machine/SoldierStateBehaviour.ts

@@ -21,11 +21,12 @@ export default {
     }
 
     // if nearby unit getting attacked.
+    const centerPos = soldier.getSceneItem().getCircleCenter();
     const nearbyUnits = stateManager.scene.getNearbyUnits(
-      soldier.getSceneItem().getCircleCenter().x,
-      soldier.getSceneItem().getCircleCenter().y,
+      centerPos.x,
+      centerPos.y,
       MOVABLE_UNIT_CONSTANTS.NEARBY_SEARCH_RADI,
-      ['MOVABLE']
+      ["MOVABLE"]
     );
     if (nearbyUnits.length < 2) return;
 
@@ -77,9 +78,10 @@ export default {
       stateMachineTrigged = true;
     }
     soldier.move(delta, stateManager);
+    const centerPos = soldier.getSceneItem().getCircleCenter();
     const nearbyUnits = stateManager.scene.getNearbyUnits(
-      soldier.getSceneItem().getCircleCenter().x,
-      soldier.getSceneItem().getCircleCenter().y,
+      centerPos.x,
+      centerPos.y,
       MOVABLE_UNIT_CONSTANTS.NEARBY_SEARCH_RADI,
       ["MOVABLE"]
     );
@@ -162,9 +164,10 @@ export default {
   }) => {
     try {
       soldier.setAttackTarget(null);
+      const centerPos = soldier.getSceneItem().getCircleCenter();
       const nearbyUnits = stateManager.scene.getNearbyUnits(
-        soldier.getSceneItem().getCircleCenter().x,
-        soldier.getSceneItem().getCircleCenter().y,
+        centerPos.x,
+        centerPos.y,
         MOVABLE_UNIT_CONSTANTS.NEARBY_SEARCH_RADI,
         ["MOVABLE"]
       );
@@ -270,13 +273,14 @@ export default {
     } catch (err) {
       console.error(err);
       if (soldierAttackTarget) {
-        soldier.targetPositionX = soldierAttackTarget.getSceneItem().pos.x;
-        soldier.targetPositionY = soldierAttackTarget.getSceneItem().pos.y;
+        const targetPos = soldierAttackTarget.getSceneItem().getPosition();
+        soldier.targetPositionX = targetPos.x;
+        soldier.targetPositionY = targetPos.y;
 
-        soldier.expectedPositionX = soldierAttackTarget.getSceneItem().pos.x;
-        soldier.expectedPositionY = soldierAttackTarget.getSceneItem().pos.y;
+        soldier.expectedPositionX = targetPos.x;
+        soldier.expectedPositionY = targetPos.y;
       }
-      soldier.setAttackTarget(null);
+      else soldier.setAttackTarget(null);
     }
   },
 } as IStateActions;

public/NetworkManager.ts

@@ -47,7 +47,7 @@ export class NetworkManager {
       console.log("init state change", state);
     });
     this.room.onMessage("*", (type, message) => {
-      if (type === PacketType.ByServer.NEW_CHAT_MESSAGE) {
+      if (typeof type === "string") {
         this.game.scene.getScenes(true).forEach((scene) => {
           scene.events.emit(type, message);
         });

public/gameObjects/playerCastle.ts

@@ -57,7 +57,11 @@ export class PlayerCastle extends Phaser.GameObjects.Sprite {
   ) {
     this.circleOfInfluence = scene.add.graphics();
     this.circleOfInfluence.lineStyle(3, 0xffffff); // Thickness, color, alpha
-    this.circleOfInfluence.strokeCircle(x, y, radius);
+    this.circleOfInfluence.strokeCircle(
+      x + this.width / 2,
+      y + this.height / 2,
+      radius
+    );
 
     // Animate the circle
     this.circleAnimation = scene.tweens.add({
@@ -73,10 +77,10 @@ export class PlayerCastle extends Phaser.GameObjects.Sprite {
     if (this.circleOfInfluence) {
       this.circleOfInfluence.clear();
       this.circleOfInfluence.lineStyle(1, 0xffffff, 1);
-      this.circleOfInfluence.strokeCircle(x, y, this.height / 2); // Assuming a fixed radius
+      this.circleOfInfluence.strokeCircle(x + this.width/2, y + this.height/2, this.height / 2); // Assuming a fixed radius
       this.circleOfInfluence.lineStyle(1, 0x22ffff, 1);
       this.circleOfInfluence.strokeRectShape(
-        new Phaser.Geom.Rectangle(x, y, 64, 64)
+        new Phaser.Geom.Rectangle(x, y, this.width, this.height)
       );
     }
   }