xTr1m/HexTowerDefense3
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fixed timeline controls

Browse Source
This commit is contained in:
Frank Tovar
2025-06-02 20:57:29 +02:00
parent 102c1f59dc
commit 61b86b7a60
6 changed files with 298 additions and 286 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/app/components/game/game.component.html
View File

@@ -7,9 +7,9 @@
</div> </div>
<div class="bottom-panel"> <div class="bottom-panel">
<button (click)="rewind()">⏮ Rewind</button> <button (click)="rewind()">⏮ Rewind</button>
<button (click)="start()">▶ Play</button> <button (click)="start()" [disabled]="visMain?.active">▶ Play</button>
<button (click)="stop()">⏸ Pause</button> <button (click)="stop()" [disabled]="!visMain?.active">⏸ Pause</button>
<button (click)="step()">Step</button> <button (click)="step()" [disabled]="visMain?.active">Step</button>
<button (click)="fastForward()">⏭ Fast Forward</button> <button (click)="fastForward()">⏭ Fast Forward</button>
<div>Step: {{ simMain.currentStep }}</div> <div>Step: {{ simMain.currentStep }}</div>
<button (click)="startNextWave()">Start next wave</button> <button (click)="startNextWave()">Start next wave</button>

16
src/app/components/game/game.component.ts
View File

@@ -44,19 +44,25 @@ export class GameComponent {
} }
rewind() { rewind() {
if (this.simMain.currentLevel) const wasActive = this.visMain.active;
this.simMain.currentLevel.currentStep = -1; if (wasActive)
this.visMain.stop();
this.simMain.currentStep = -1; this.simMain.rewind();
if (wasActive)
this.visMain.start();
} }
startNextWave() { startNextWave() {
this.simMain.addCommand(new SimCommandStartNextWave()); this.simMain.addCommand(new SimCommandStartNextWave());
this.simMain.currentLevel!.paused = false;
} }
fastForward() { fastForward() {
const wasActive = this.visMain.active;
if (wasActive)
this.visMain.stop();
this.simMain.executeToEnd(); this.simMain.executeToEnd();
if (wasActive)
this.visMain.start();
} }
async loadGdRoot(): Promise<GdRoot> { async loadGdRoot(): Promise<GdRoot> {

11
src/app/components/game/sim/SimMain.ts
View File

@@ -10,6 +10,7 @@ import { SimLevel } from './SimLevel';
export class SimMain { export class SimMain {
currentStep = -1; currentStep = -1;
maxStep = -1;
currentLevel: SimLevel | null = null; currentLevel: SimLevel | null = null;
commandHistory: SimCommand[] = []; commandHistory: SimCommand[] = [];
gdRoot: GdRoot = null!; gdRoot: GdRoot = null!;
@@ -30,9 +31,7 @@ export class SimMain {
} }
executeToEnd() { executeToEnd() {
this.executeUntilStep( this.executeUntilStep(this.maxStep);
this.commandHistory[this.commandHistory.length - 1].step
);
} }
executeUntilStep(target: number) { executeUntilStep(target: number) {
@@ -41,8 +40,14 @@ export class SimMain {
} }
} }
rewind() {
this.currentLevel = new SimLevel(this.gdRoot, this.currentLevel?.index ?? 0);
this.currentStep = -1;
}
step() { step() {
this.currentStep++; this.currentStep++;
this.maxStep = Math.max(this.maxStep, this.currentStep);
if (this.currentLevel && !this.currentLevel.paused) { if (this.currentLevel && !this.currentLevel.paused) {
this.currentLevel.currentStep++; this.currentLevel.currentStep++;
} }

1
src/app/components/game/sim/commands/SimCommandStartNextWave.ts
View File

@@ -17,6 +17,7 @@ export class SimCommandStartNextWave extends SimCommand {
level.nextWaveStep = level.currentStep + simMain.gdRoot.simulation.waveDuration * simMain.gdRoot.simulation.stepsPerSecond - 1; level.nextWaveStep = level.currentStep + simMain.gdRoot.simulation.waveDuration * simMain.gdRoot.simulation.stepsPerSecond - 1;
level.lastEnemySpawnStep = level.currentStep; level.lastEnemySpawnStep = level.currentStep;
level.enemiesLeftToSpawn = data.waves[level.currentWave].amount; level.enemiesLeftToSpawn = data.waves[level.currentWave].amount;
level.paused = false;
} }
public check(simMain: SimMain): boolean { public check(simMain: SimMain): boolean {

101
src/app/components/game/vis/VisLevel.ts
View File

@@ -1,16 +1,16 @@
import { AssetPreloaderService } from "../../../assetPreloaderService"; import { AssetPreloaderService } from '../../../assetPreloaderService';
import { GdRoot } from "../data/GdRoot"; import { GdRoot } from '../data/GdRoot';
import { ECellType } from "../sim/ECellType"; import { ECellType } from '../sim/ECellType';
import { SimCell } from "../sim/SimCell"; import { SimCell } from '../sim/SimCell';
import { SimEnemy } from "../sim/SimEnemy"; import { SimEnemy } from '../sim/SimEnemy';
import { SimLevel } from "../sim/SimLevel"; import { SimLevel } from '../sim/SimLevel';
import { SimMain } from "../sim/SimMain"; import { SimMain } from '../sim/SimMain';
import { SimProjectile } from "../sim/SimProjectile"; import { SimProjectile } from '../sim/SimProjectile';
import { Hex } from "../util/Hex"; import { Hex } from '../util/Hex';
import { Vector2 } from "../util/Vector2"; import { Vector2 } from '../util/Vector2';
import { VisEnemy } from "./VisEnemy"; import { VisEnemy } from './VisEnemy';
import { VisMain } from "./VisMain"; import { VisMain } from './VisMain';
import { VisProjectile } from "./VisProjectile"; import { VisProjectile } from './VisProjectile';
export class VisLevel { export class VisLevel {
private screenCellWidth: number = -1; private screenCellWidth: number = -1;
@@ -33,7 +33,7 @@ export class VisLevel {
this.assets = assets; this.assets = assets;
this.visMain = visMain; this.visMain = visMain;
this.simMain = simMain; this.simMain = simMain;
this.gdRoot = gdRoot this.gdRoot = gdRoot;
this.enemyMap = new Map<SimEnemy, VisEnemy>(); this.enemyMap = new Map<SimEnemy, VisEnemy>();
this.projectileMap = new Map<SimProjectile, VisProjectile>(); this.projectileMap = new Map<SimProjectile, VisProjectile>();
this.reset(); this.reset();
@@ -59,14 +59,14 @@ export class VisLevel {
} }
this.drawBackground(); this.drawBackground();
ctx.globalCompositeOperation = "source-over"; ctx.globalCompositeOperation = 'source-over';
// Highlight hovered cell first (under everything else) // Highlight hovered cell first (under everything else)
if (this.hoveredHex) { if (this.hoveredHex) {
const hoveredIdx = simLevel.getCellIndex(this.hoveredHex); const hoveredIdx = simLevel.getCellIndex(this.hoveredHex);
const hoveredCell = simLevel.cells[hoveredIdx]; const hoveredCell = simLevel.cells[hoveredIdx];
if (hoveredCell && hoveredCell.distance <= gdLevel.radius) { if (hoveredCell && hoveredCell.distance <= gdLevel.radius) {
this.drawCellImage(ctx, hoveredCell, "cell-highlighted.svg"); this.drawCellImage(ctx, hoveredCell, 'cell-highlighted.svg');
} }
} }
@@ -85,11 +85,11 @@ export class VisLevel {
this.drawProjectile(projectile); this.drawProjectile(projectile);
}); });
ctx.fillStyle = "white"; ctx.fillStyle = 'white';
ctx.fillText("Currency: " + simLevel.currency, 5, 15); ctx.fillText('Currency: ' + simLevel.currency, 5, 15);
ctx.fillText("Current wave: " + simLevel.currentWave, 5, 35); ctx.fillText('Current wave: ' + simLevel.currentWave, 5, 35);
ctx.fillText("Enemies left: " + simLevel.enemiesLeftToSpawn, 5, 55); ctx.fillText('Enemies left: ' + simLevel.enemiesLeftToSpawn, 5, 55);
ctx.fillText("Current step: " + simLevel.currentStep, 5, 75); ctx.fillText('Current step: ' + simLevel.currentStep, 5, 75);
} }
public updateSize() { public updateSize() {
@@ -99,11 +99,11 @@ export class VisLevel {
} }
const gdLevel = this.gdRoot.levels[simLevel.index]; const gdLevel = this.gdRoot.levels[simLevel.index];
const minSize = Math.min(this.visMain.canvas.height, this.visMain.canvas.width * Math.sqrt(3) / 2); const minSize = Math.min(this.visMain.canvas.height, (this.visMain.canvas.width * Math.sqrt(3)) / 2);
this.hexSize = Math.floor(minSize / (4 * (gdLevel.radius - 1) - 4)); this.hexSize = Math.floor(minSize / (4 * (gdLevel.radius - 1) - 4));
this.screenCellHeight = Math.ceil(2 * this.hexSize); this.screenCellHeight = Math.ceil(2 * this.hexSize);
this.screenCellHeight = Math.ceil(this.screenCellHeight * 0.5) * 2; this.screenCellHeight = Math.ceil(this.screenCellHeight * 0.5) * 2;
this.screenCellWidth = Math.ceil(Math.sqrt(3) / 2 * this.screenCellHeight); this.screenCellWidth = Math.ceil((Math.sqrt(3) / 2) * this.screenCellHeight);
this.screenCellWidth = Math.ceil(this.screenCellWidth * 0.5) * 2; this.screenCellWidth = Math.ceil(this.screenCellWidth * 0.5) * 2;
this.screenXOffset = this.screenCellWidth * (gdLevel.radius + 0.5); this.screenXOffset = this.screenCellWidth * (gdLevel.radius + 0.5);
this.screenYOffset = this.screenCellHeight * (gdLevel.radius + 0.5); this.screenYOffset = this.screenCellHeight * (gdLevel.radius + 0.5);
@@ -120,6 +120,11 @@ export class VisLevel {
} }
public updateEveryFrame(currentStep: number) { public updateEveryFrame(currentStep: number) {
if (currentStep < 0) {
this.lastStep = -1;
return;
}
const simLevel = this.simMain.currentLevel; const simLevel = this.simMain.currentLevel;
if (simLevel == null) { if (simLevel == null) {
return; return;
@@ -137,11 +142,9 @@ export class VisLevel {
const visEnemy = this.enemyMap.get(simEnemy); const visEnemy = this.enemyMap.get(simEnemy);
if (!visEnemy) { if (!visEnemy) {
this.enemyMap.set(simEnemy, new VisEnemy(this.gdRoot, this.assets, simEnemy, this.screenCellWidth, this.screenCellHeight)); this.enemyMap.set(simEnemy, new VisEnemy(this.gdRoot, this.assets, simEnemy, this.screenCellWidth, this.screenCellHeight));
} } else if (Math.floor(currentStep) != Math.floor(this.lastStep)) {
else if (Math.floor(currentStep) != Math.floor(this.lastStep)) {
visEnemy.advanceStep(); visEnemy.advanceStep();
} } else {
else {
visEnemy.update(t); visEnemy.update(t);
} }
}); });
@@ -159,8 +162,7 @@ export class VisLevel {
const visProjectile = this.projectileMap.get(simProjectile); const visProjectile = this.projectileMap.get(simProjectile);
if (!visProjectile) { if (!visProjectile) {
this.projectileMap.set(simProjectile, new VisProjectile(simProjectile)); this.projectileMap.set(simProjectile, new VisProjectile(simProjectile));
} } else if (Math.floor(currentStep) != Math.floor(this.lastStep)) {
else if (Math.floor(currentStep) != Math.floor(this.lastStep)) {
visProjectile.advanceStep(); visProjectile.advanceStep();
} }
}); });
@@ -196,34 +198,34 @@ export class VisLevel {
const gdLevel = this.gdRoot.levels[simLevel.index]; const gdLevel = this.gdRoot.levels[simLevel.index];
if (this.background == null) { if (this.background == null) {
const backgroundCanvas = this.visMain.canvas.cloneNode() as HTMLCanvasElement; const backgroundCanvas = this.visMain.canvas.cloneNode() as HTMLCanvasElement;
const backgroundContext = backgroundCanvas.getContext("2d")!; const backgroundContext = backgroundCanvas.getContext('2d')!;
this.background = backgroundCanvas; this.background = backgroundCanvas;
simLevel.cells.forEach((cell: SimCell) => { simLevel.cells.forEach((cell: SimCell) => {
if (cell.distance > gdLevel.radius) { if (cell.distance > gdLevel.radius) {
return; return;
} }
if (cell.blockedType != -1 && cell.type == ECellType.Blocked) { if (cell.blockedType != -1 && cell.type == ECellType.Blocked) {
this.drawCellImage(backgroundContext, cell, "cell-blocked-" + (cell.blockedType | 0) + ".svg"); this.drawCellImage(backgroundContext, cell, 'cell-blocked-' + (cell.blockedType | 0) + '.svg');
} }
}); });
backgroundContext.globalCompositeOperation = "source-atop"; backgroundContext.globalCompositeOperation = 'source-atop';
backgroundContext.fillStyle = this.visMain.wallPattern; backgroundContext.fillStyle = this.visMain.wallPattern;
backgroundContext.fillRect(0, 0, this.visMain.canvas.width, this.visMain.canvas.height); backgroundContext.fillRect(0, 0, this.visMain.canvas.width, this.visMain.canvas.height);
const cellCanvas = this.visMain.canvas.cloneNode() as HTMLCanvasElement; const cellCanvas = this.visMain.canvas.cloneNode() as HTMLCanvasElement;
const cellContext = cellCanvas.getContext("2d")!; const cellContext = cellCanvas.getContext('2d')!;
simLevel.cells.forEach((cell: SimCell) => { simLevel.cells.forEach((cell: SimCell) => {
if (cell.distance > gdLevel.radius) { if (cell.distance > gdLevel.radius) {
return; return;
} }
if (cell.type != ECellType.Entry) { if (cell.type != ECellType.Entry) {
this.drawCellImage(cellContext, cell, "cell.svg"); this.drawCellImage(cellContext, cell, 'cell.svg');
} }
}); });
backgroundContext.globalCompositeOperation = "destination-over"; backgroundContext.globalCompositeOperation = 'destination-over';
backgroundContext.drawImage(cellCanvas, 0, 0); backgroundContext.drawImage(cellCanvas, 0, 0);
backgroundContext.globalCompositeOperation = "source-over"; backgroundContext.globalCompositeOperation = 'source-over';
} }
ctx.drawImage(this.background, 0, 0); ctx.drawImage(this.background, 0, 0);
@@ -242,11 +244,7 @@ export class VisLevel {
const pos = Vector2.lerp(positions[0], positions[1], t); const pos = Vector2.lerp(positions[0], positions[1], t);
const width = this.screenCellWidth * simProjectile.size; const width = this.screenCellWidth * simProjectile.size;
const height = this.screenCellHeight * simProjectile.size; const height = this.screenCellHeight * simProjectile.size;
this.visMain.context.drawImage(this.assets.getImage("images/projectile.svg"), this.visMain.context.drawImage(this.assets.getImage('images/projectile.svg'), this.screenXOffset + pos.x * this.hexSize - width / 2, this.screenYOffset + pos.y * this.hexSize - height / 2, width, height);
this.screenXOffset + pos.x * this.hexSize - width / 2,
this.screenYOffset + pos.y * this.hexSize - height / 2,
width,
height);
} }
private drawEnemy(simEnemy: SimEnemy) { private drawEnemy(simEnemy: SimEnemy) {
@@ -260,12 +258,7 @@ export class VisLevel {
return; return;
} }
const pos = Vector2.lerp(positions[0], positions[1], t); const pos = Vector2.lerp(positions[0], positions[1], t);
this.visMain.context.drawImage( this.visMain.context.drawImage(visEnemy.image, this.screenXOffset + pos.x * this.hexSize - this.screenCellWidth / 2, this.screenYOffset + pos.y * this.hexSize - this.screenCellHeight / 2, this.screenCellWidth, this.screenCellHeight);
visEnemy.image,
this.screenXOffset + pos.x * this.hexSize - this.screenCellWidth / 2,
this.screenYOffset + pos.y * this.hexSize - this.screenCellHeight / 2,
this.screenCellWidth,
this.screenCellHeight);
} }
private drawCell(cell: SimCell) { private drawCell(cell: SimCell) {
@@ -274,9 +267,9 @@ export class VisLevel {
return; return;
} }
this.visMain.context.fillStyle = "rgba(192, 192, 192, 0.25)"; this.visMain.context.fillStyle = 'rgba(192, 192, 192, 0.25)';
if (cell.type == ECellType.Entry) { if (cell.type == ECellType.Entry) {
this.drawCellImage(this.visMain.context, cell, "cell-entry-" + (cell.blockedType | 0) + ".svg"); this.drawCellImage(this.visMain.context, cell, 'cell-entry-' + (cell.blockedType | 0) + '.svg');
} }
const highlightedCell = simLevel.cells[simLevel.highlightedIndex]; const highlightedCell = simLevel.cells[simLevel.highlightedIndex];
@@ -293,20 +286,20 @@ export class VisLevel {
} }
} }
if (draw) { if (draw) {
this.drawCellImage(this.visMain.context, highlightedCell, "cell-highlighted.svg"); this.drawCellImage(this.visMain.context, highlightedCell, 'cell-highlighted.svg');
this.visMain.context.fillStyle = "rgba(0, 0, 0, 1)"; this.visMain.context.fillStyle = 'rgba(0, 0, 0, 1)';
} }
} }
if (cell.tower != null) { if (cell.tower != null) {
this.drawCellImage(this.visMain.context, cell, "tower-" + (cell.tower.index | 0) + ".svg"); this.drawCellImage(this.visMain.context, cell, 'tower-' + (cell.tower.index | 0) + '.svg');
} }
const coords = this.getScreenCoords(cell.hex); const coords = this.getScreenCoords(cell.hex);
this.visMain.context.fillText("(" + cell.hex.col + ", " + cell.hex.row + ")", coords.x + 10, coords.y + this.screenCellHeight / 2 + 5); this.visMain.context.fillText('(' + cell.hex.col + ', ' + cell.hex.row + ')', coords.x + 10, coords.y + this.screenCellHeight / 2 + 5);
} }
private drawCellImage(context: CanvasRenderingContext2D, cell: SimCell, name: string) { private drawCellImage(context: CanvasRenderingContext2D, cell: SimCell, name: string) {
const coords = this.getScreenCoords(cell.hex); const coords = this.getScreenCoords(cell.hex);
context.drawImage(this.assets.getImage("images/" + name), coords.x, coords.y, this.screenCellWidth, this.screenCellHeight); context.drawImage(this.assets.getImage('images/' + name), coords.x, coords.y, this.screenCellWidth, this.screenCellHeight);
} }
} }

11
src/app/components/game/vis/VisMain.ts
View File

@@ -19,6 +19,7 @@ export class VisMain {
private startTimestamp: number = 0; private startTimestamp: number = 0;
private ready: boolean = false; private ready: boolean = false;
private gap: number = 0; private gap: number = 0;
private animationFrameId: number | null = null;
constructor(simMain: SimMain, assets: AssetPreloaderService, wrapper: HTMLDivElement, canvas: HTMLCanvasElement) { constructor(simMain: SimMain, assets: AssetPreloaderService, wrapper: HTMLDivElement, canvas: HTMLCanvasElement) {
this.assets = assets; this.assets = assets;
@@ -50,7 +51,7 @@ export class VisMain {
return; return;
} }
requestAnimationFrame((timestamp: number) => { this.animationFrameId = requestAnimationFrame((timestamp: number) => {
this.step(timestamp); this.step(timestamp);
}); });
@@ -105,11 +106,17 @@ export class VisMain {
stop() { stop() {
this.active = false; this.active = false;
this.startTimestamp = 0;
this.visLevel.updateEveryFrame(-1);
if (this.animationFrameId !== null) {
cancelAnimationFrame(this.animationFrameId);
this.animationFrameId = null;
}
} }
start() { start() {
this.active = true; this.active = true;
requestAnimationFrame((timestamp: number) => { this.animationFrameId = requestAnimationFrame((timestamp: number) => {
this.startTimestamp = timestamp - (this.simMain.currentStep / this.simMain.gdRoot.simulation.stepsPerSecond) * 1000; this.startTimestamp = timestamp - (this.simMain.currentStep / this.simMain.gdRoot.simulation.stepsPerSecond) * 1000;
this.step(timestamp); this.step(timestamp);
}); });