refactor: streamline grid coords -> pixel coords

src/abilities/Abolished.js

@@ -3,6 +3,7 @@
 import { Creature } from '../creature';
 import { Effect } from '../effect';
 import * as arrayUtils from '../utility/arrayUtils';
+import { getPointFacade } from '../utility/pointfacade';
 
 /** Creates the abilities
  * @param {Object} G the game object
@@ -107,7 +108,7 @@
 			},
 
 			query() {
 				const ability = this;
 				const abolished = this.creature;
 
 				// TODO: Visually show reduced damage hexes for 4-6 range
@@ -128,21 +129,25 @@
 				});
 			},
 
-			activate(path, args) {
+			activate(path) {
 				const ability = this;
-				const target = arrayUtils.last(path).creature;
-
 				ability.end();
+
+				const targets = getPointFacade().getCreaturesAt(arrayUtils.last(path));
+				// TODO: Path sometimes contains no targets.
+				if (targets.length === 0) {
+					console.error('returning');
+					return;
+				}
+
+				const target = targets[0];
+
 				G.Phaser.camera.shake(0.01, 100, true, G.Phaser.camera.SHAKE_HORIZONTAL, true);
 
-				const startX = ability.creature.sprite.scale.x > 0 ? 232 : 52;
 				const projectileInstance = G.animations.projectile(
 					this,
 					target,
 					'effects_fiery-touch',
-					path,
-					args,
-					startX,
 					-20,
 				);
 				const tween = projectileInstance[0];
@@ -209,7 +214,7 @@
 				return this.testRequirements();
 			},
 			query() {
 				const ability = this;
 				const crea = this.creature;
 
 				// Relocates to any hex within range except for the current hex
@@ -229,7 +234,7 @@
 				});
 			},
 			activate(hex) {
 				const ability = this;
 				ability.end();
 
 				if (this.isUpgraded()) {
@@ -312,7 +317,7 @@
 				return this.testRequirements();
 			},
 			query() {
 				const ability = this;
 				const crea = this.creature;
 
 				// var inRangeCreatures = crea.hexagons[1].adjacentHex(1);
@@ -337,7 +342,7 @@
 				});
 			},
 			activate() {
 				const ability = this;
 				ability.end();
 
 				const crea = this.creature;

src/abilities/Dark-Priest.js

@@ -275,6 +275,7 @@ export default (G) => {
 					{ materializationSickness: creatureHasMaterializationSickness },
 				);
 				const fullCrea = new Creature(crea, G);
+
 				// Don't allow temporary Creature to take up space
 				fullCrea.cleanHex();
 				// Make temporary Creature invisible

src/abilities/Snow-Bunny.js

@@ -3,6 +3,7 @@ import { Damage } from '../damage';
 import { Team, isTeam } from '../utility/team';
 import * as matrices from '../utility/matrices';
 import * as arrayUtils from '../utility/arrayUtils';
+import { getPointFacade } from '../utility/pointfacade';
 
 const HopTriggerDirections = {
 	Above: 0,
@@ -452,19 +453,19 @@ export default (G) => {
 			},
 
 			//	activate() :
-			activate: function (path, args) {
+			activate: function (path) {
 				const ability = this;
 				ability.end();
 				G.Phaser.camera.shake(0.01, 90, true, G.Phaser.camera.SHAKE_HORIZONTAL, true);
-				const target = path.find((hex) => hex.creature).creature;
+
+				const targets = getPointFacade().getCreaturesAt(path);
+				if (targets.length === 0) return;
+				const target = targets[0];
 
 				const projectileInstance = G.animations.projectile(
 					this,
 					target,
 					'effects_freezing-spit',
-					path,
-					args,
-					52,
 					-20,
 				);
 				const tween = projectileInstance[0];

src/animations.ts

@@ -3,6 +3,7 @@ import Game from './game';
 import { Creature } from './creature';
 import { Hex } from './utility/hex';
 import { Ability } from './ability';
+import { offsetCoordsToPx } from './utility/const';
 
 // to fix @ts-expect-error 2554: properly type the arguments for the trigger functions in `game.ts`
 
@@ -62,11 +63,11 @@ export class Animations {
 				return;
 			}
 
-			const nextPos = game.grid.hexes[hex.y][hex.x - creature.size + 1];
+			const nextHex = game.grid.hexes[hex.y][hex.x];
 
 			const tween = game.Phaser.add
 				.tween(creature.grp)
-				.to(nextPos.displayPos, speed, Phaser.Easing.Linear.None)
+				.to(offsetCoordsToPx(nextHex), speed, Phaser.Easing.Linear.None)
 				.start();
 
 			// Ignore traps for hover creatures, unless this is the last hex
@@ -122,17 +123,16 @@ export class Animations {
 		creature.healthHide();
 
 		const hex = path[0];
-
-		const start = game.grid.hexes[creature.y][creature.x - creature.size + 1];
-		const currentHex = game.grid.hexes[hex.y][hex.x - creature.size + 1];
+		const start = game.grid.hexes[creature.y][creature.x];
+		const currentHex = game.grid.hexes[hex.y][hex.x];
 
 		this.leaveHex(creature, currentHex, opts);
 
 		const speed = !opts.overrideSpeed ? creature.animation.walk_speed : opts.overrideSpeed;
 
 		const tween = game.Phaser.add
 			.tween(creature.grp)
-			.to(currentHex.displayPos, speed, Phaser.Easing.Linear.None)
+			.to(offsetCoordsToPx(currentHex), speed, Phaser.Easing.Linear.None)
 			.start();
 
 		tween.onComplete.add(() => {
@@ -166,7 +166,7 @@ export class Animations {
 	teleport(creature: Creature, path: Hex[], opts: AnimationOptions) {
 		const game = this.game,
 			hex = path[0],
-			currentHex = game.grid.hexes[hex.y][hex.x - creature.size + 1];
+			currentHex = game.grid.hexes[hex.y][hex.x];
 
 		this.leaveHex(creature, currentHex, opts);
 
@@ -190,8 +190,9 @@ export class Animations {
 			game.soundsys.playSFX('sounds/step');
 
 			// position
-			creature.grp.x = currentHex.displayPos.x;
-			creature.grp.y = currentHex.displayPos.y;
+			const px = offsetCoordsToPx(hex);
+			creature.grp.x = px.x;
+			creature.grp.y = px.y;
 
 			// FadeIn
 			game.Phaser.add
@@ -289,54 +290,39 @@ export class Animations {
 
 	projectile(
 		this2: Ability,
-		target: { id: number },
+		target: Creature,
 		spriteId: string,
-		path: Hex[],
-		args: { direction: number },
-		startX: number,
-		startY: number,
+		projectileHeightFromGroundPx: number,
 	) {
-		// Get the target's position on the projectile's path that is closest
-		const emissionPointX = this2.creature.grp.x + startX;
-		let distance = Number.MAX_SAFE_INTEGER;
-		let targetX = path[0].displayPos.x;
-		for (const hex of path) {
-			if (typeof hex.creature != 'undefined' && hex.creature.id == target.id) {
-				if (distance > Math.abs(emissionPointX - hex.displayPos.x)) {
-					distance = Math.abs(emissionPointX - hex.displayPos.x);
-					targetX = hex.displayPos.x;
-				}
-			}
-		}
-		const game = this.game,
-			baseDist = arrayUtils.filterCreature(path.slice(0), false, false).length,
-			dist = baseDist == 0 ? 1 : baseDist,
-			emissionPoint = {
-				x: this2.creature.grp.x + startX,
-				y: this2.creature.grp.y + startY,
-			},
-			targetPoint = {
-				x: targetX + 45,
-				y: path[baseDist].displayPos.y - 20,
-			},
-			// Sprite id here
-			sprite = game.grid.creatureGroup.create(emissionPoint.x, emissionPoint.y, spriteId),
-			duration = dist * 75;
-
-		sprite.anchor.setTo(0.5);
-		sprite.rotation = -Math.PI / 3 + (args.direction * Math.PI) / 3;
+		const shooter = this2.creature;
+		const game = shooter.game;
+		// NOTE: Sometimes this is apparently not passed a valid target.
+		const victims = game.creatures.filter((c) => c.id === target.id);
+
+		const isTargetOnRight = shooter.centerPx < target.centerPx;
+		const startXPx = isTargetOnRight ? shooter.rightPx : shooter.leftPx;
+		const endXPx = isTargetOnRight ? target.leftPx : target.rightPx;
+		const startYPx = shooter.footPx + projectileHeightFromGroundPx;
+
+		const duration = Math.abs(startXPx - endXPx);
+
+		const sprite = shooter.game.grid.creatureGroup.create(startXPx, startYPx, spriteId);
+		sprite.anchor.setTo(0.5, 1);
+		sprite.scale.set(isTargetOnRight ? 1 : -1, 1);
+
 		const tween = game.Phaser.add
 			.tween(sprite)
 			.to(
 				{
-					x: targetPoint.x,
-					y: targetPoint.y,
+					x: endXPx,
+					y: target.footPx + projectileHeightFromGroundPx,
 				},
 				duration,
 				Phaser.Easing.Linear.None,
 			)
 			.start();
 
+		const dist = 1;
 		return [tween, sprite, dist];
 	}
 }

src/creature.ts

@@ -10,7 +10,7 @@ import { Effect } from './effect';
 import { Player, PlayerID } from './player';
 import { Damage } from './damage';
 import { AugmentedMatrix } from './utility/matrices';
-import { HEX_WIDTH_PX } from './utility/const';
+import { HEX_WIDTH_PX, offsetCoordsToPx } from './utility/const';
 
 // to fix @ts-expect-error 2554: properly type the arguments for the trigger functions in `game.ts`
 
@@ -338,45 +338,41 @@ export class Creature {
 		// Adding sprite
 		this.sprite = this.grp.create(0, 0, this.name + dp + '_cardboard');
 		this.sprite.anchor.setTo(0.5, 1);
-		// Placing sprite
-		this.sprite.x =
-			(!this.player.flipped
-				? this.display['offset-x']
-				: HEX_WIDTH_PX * this.size - this.sprite.texture.width - this.display['offset-x']) +
-			this.sprite.texture.width / 2;
-		this.sprite.y = this.display['offset-y'] + this.sprite.texture.height;
-		// Placing Group
-		this.grp.x = this.hexagons[this.size - 1].displayPos.x;
-		this.grp.y = this.hexagons[this.size - 1].displayPos.y;
+		// NOTE: The creature's sprite origin needs to be placed in the middle of
+		// the hexes it occupies. This allows it to be flipped left-to-right without
+		// needing to be repositioned.
+		this.sprite.x = (this.size - 1) * -HEX_WIDTH_PX * 0.5;
+		// NOTE: Position the sprite y so that the creature's "foot" is slightly below center.
+		this.sprite.y = 10;
+
+		const px = offsetCoordsToPx(this);
+		this.grp.x = px.x;
+		this.grp.y = px.y;
 
 		this.facePlayerDefault();
 
 		// Hint Group
 		this.hintGrp = game.Phaser.add.group(this.grp, 'creatureHintGrp_' + this.id);
-		this.hintGrp.x = 0.5 * HEX_WIDTH_PX * this.size;
+		this.hintGrp.x = this.sprite.x;
 		this.hintGrp.y = -this.sprite.texture.height + 5;
 
 		// Health indicator
 		this.healthIndicatorGroup = game.Phaser.add.group(this.grp, 'creatureHealthGrp_' + this.id);
 		// Adding background sprite
 		this.healthIndicatorSprite = this.healthIndicatorGroup.create(
-			this.player.flipped ? 19 : 19 + HEX_WIDTH_PX * (this.size - 1),
+			0,
 			49,
 			'p' + this.team + '_health',
 		);
+		this.healthIndicatorSprite.anchor.setTo(0.5, 0.5);
 		// Add text
-		this.healthIndicatorText = game.Phaser.add.text(
-			this.player.flipped ? HEX_WIDTH_PX * 0.5 : HEX_WIDTH_PX * (this.size - 0.5),
-			63,
-			this.health,
-			{
-				font: 'bold 15pt Play',
-				fill: '#fff',
-				align: 'center',
-				stroke: '#000',
-				strokeThickness: 6,
-			},
-		);
+		this.healthIndicatorText = game.Phaser.add.text(0, 52, this.health, {
+			font: 'bold 15pt Play',
+			fill: '#fff',
+			align: 'center',
+			stroke: '#000',
+			strokeThickness: 6,
+		});
 		this.healthIndicatorText.anchor.setTo(0.5, 0.5);
 		this.healthIndicatorGroup.add(this.healthIndicatorText);
 		// Hide it
@@ -585,6 +581,26 @@ export class Creature {
 		}
 	}
 
+	get topPx() {
+		return this.footPx - this.sprite.texture.height;
+	}
+
+	get footPx() {
+		return this.grp.y + this.sprite.y;
+	}
+
+	get centerPx() {
+		return this.grp.x;
+	}
+
+	get leftPx() {
+		return this.grp.x - this.sprite.texture.width * 0.5;
+	}
+
+	get rightPx() {
+		return this.grp.x + this.sprite.texture.width * 0.5;
+	}
+
 	get isInCurrentQueue() {
 		return !this.dead && !this.temp && this._nextGameTurnActive <= this.game.turn;
 	}
@@ -937,11 +953,6 @@ export class Creature {
 		} else {
 			this.sprite.scale.setTo(1, 1);
 		}
-		this.sprite.x =
-			(!flipped
-				? this.display['offset-x']
-				: HEX_WIDTH_PX * this.size - this.sprite.texture.width - this.display['offset-x']) +
-			this.sprite.texture.width / 2;
 	}
 
 	/* facePlayerDefault()
@@ -955,11 +966,6 @@ export class Creature {
 		} else {
 			this.sprite.scale.setTo(1, 1);
 		}
-		this.sprite.x =
-			(!this.player.flipped
-				? this.display['offset-x']
-				: HEX_WIDTH_PX * this.size - this.sprite.texture.width - this.display['offset-x']) +
-			this.sprite.texture.width / 2;
 	}
 
 	/* moveTo(hex,opts)

src/drop.ts

@@ -1,6 +1,6 @@
 import { Creature } from './creature';
 import Game from './game';
-import { HEX_HEIGHT_PX, HEX_WIDTH_PX, offsetCoordsToPx } from './utility/const';
+import { offsetCoordsToPx } from './utility/const';
 import { Point, getPointFacade } from './utility/pointfacade';
 
 /**
@@ -71,11 +71,8 @@ export class Drop {
 			.forEach((drop) => drop.destroy());
 		this.game.drops.push(this);
 
-		this.display = game.grid.dropGroup.create(
-			this.hex.displayPos.x + 54,
-			this.hex.displayPos.y + 15,
-			'drop_' + this.name,
-		);
+		const px = offsetCoordsToPx(this);
+		this.display = game.grid.dropGroup.create(px.x, px.y, 'drop_' + this.name);
 		this.display.alpha = 0;
 		this.display.anchor.setTo(0.5, 0.5);
 		this.display.scale.setTo(1.5, 1.5);

src/game.ts

@@ -637,6 +637,13 @@ export default class Game {
 		}
 
 		this.matchInit();
+
+		for (const hexes of this.grid.hexes) {
+			for (const hex of hexes) {
+				//new Trap(hex.x, hex.y, 'firewall', [], this.players[0], {}, this, 'woo');
+				//new Drop('apple', {}, hex.x, hex.y, this);
+			}
+		}
 	}
 
 	async matchInit() {