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 class="bottom-panel">
<button (click)="rewind()">⏮ Rewind</button>
<button (click)="start()">▶ Play</button>
<button (click)="stop()">⏸ Pause</button>
<button (click)="step()">Step</button>
<button (click)="start()" [disabled]="visMain?.active">▶ Play</button>
<button (click)="stop()" [disabled]="!visMain?.active">⏸ Pause</button>
<button (click)="step()" [disabled]="visMain?.active">Step</button>
<button (click)="fastForward()">⏭ Fast Forward</button>
<div>Step: {{ simMain.currentStep }}</div>
<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() {
if (this.simMain.currentLevel)
this.simMain.currentLevel.currentStep = -1;
this.simMain.currentStep = -1;
const wasActive = this.visMain.active;
if (wasActive)
this.visMain.stop();
this.simMain.rewind();
if (wasActive)
this.visMain.start();
}
startNextWave() {
this.simMain.addCommand(new SimCommandStartNextWave());
this.simMain.currentLevel!.paused = false;
}
fastForward() {
const wasActive = this.visMain.active;
if (wasActive)
this.visMain.stop();
this.simMain.executeToEnd();
if (wasActive)
this.visMain.start();
}
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 {
currentStep = -1;
maxStep = -1;
currentLevel: SimLevel | null = null;
commandHistory: SimCommand[] = [];
gdRoot: GdRoot = null!;
@@ -30,9 +31,7 @@ export class SimMain {
}
executeToEnd() {
this.executeUntilStep(
this.commandHistory[this.commandHistory.length - 1].step
);
this.executeUntilStep(this.maxStep);
}
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() {
this.currentStep++;
this.maxStep = Math.max(this.maxStep, this.currentStep);
if (this.currentLevel && !this.currentLevel.paused) {
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.lastEnemySpawnStep = level.currentStep;
level.enemiesLeftToSpawn = data.waves[level.currentWave].amount;
level.paused = false;
}
public check(simMain: SimMain): boolean {

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

@@ -1,16 +1,16 @@
import { AssetPreloaderService } from "../../../assetPreloaderService";
import { GdRoot } from "../data/GdRoot";
import { ECellType } from "../sim/ECellType";
import { SimCell } from "../sim/SimCell";
import { SimEnemy } from "../sim/SimEnemy";
import { SimLevel } from "../sim/SimLevel";
import { SimMain } from "../sim/SimMain";
import { SimProjectile } from "../sim/SimProjectile";
import { Hex } from "../util/Hex";
import { Vector2 } from "../util/Vector2";
import { VisEnemy } from "./VisEnemy";
import { VisMain } from "./VisMain";
import { VisProjectile } from "./VisProjectile";
import { AssetPreloaderService } from '../../../assetPreloaderService';
import { GdRoot } from '../data/GdRoot';
import { ECellType } from '../sim/ECellType';
import { SimCell } from '../sim/SimCell';
import { SimEnemy } from '../sim/SimEnemy';
import { SimLevel } from '../sim/SimLevel';
import { SimMain } from '../sim/SimMain';
import { SimProjectile } from '../sim/SimProjectile';
import { Hex } from '../util/Hex';
import { Vector2 } from '../util/Vector2';
import { VisEnemy } from './VisEnemy';
import { VisMain } from './VisMain';
import { VisProjectile } from './VisProjectile';
export class VisLevel {
private screenCellWidth: number = -1;
@@ -33,7 +33,7 @@ export class VisLevel {
this.assets = assets;
this.visMain = visMain;
this.simMain = simMain;
this.gdRoot = gdRoot
this.gdRoot = gdRoot;
this.enemyMap = new Map<SimEnemy, VisEnemy>();
this.projectileMap = new Map<SimProjectile, VisProjectile>();
this.reset();
@@ -59,14 +59,14 @@ export class VisLevel {
}
this.drawBackground();
ctx.globalCompositeOperation = "source-over";
ctx.globalCompositeOperation = 'source-over';
// Highlight hovered cell first (under everything else)
if (this.hoveredHex) {
const hoveredIdx = simLevel.getCellIndex(this.hoveredHex);
const hoveredCell = simLevel.cells[hoveredIdx];
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);
});
ctx.fillStyle = "white";
ctx.fillText("Currency: " + simLevel.currency, 5, 15);
ctx.fillText("Current wave: " + simLevel.currentWave, 5, 35);
ctx.fillText("Enemies left: " + simLevel.enemiesLeftToSpawn, 5, 55);
ctx.fillText("Current step: " + simLevel.currentStep, 5, 75);
ctx.fillStyle = 'white';
ctx.fillText('Currency: ' + simLevel.currency, 5, 15);
ctx.fillText('Current wave: ' + simLevel.currentWave, 5, 35);
ctx.fillText('Enemies left: ' + simLevel.enemiesLeftToSpawn, 5, 55);
ctx.fillText('Current step: ' + simLevel.currentStep, 5, 75);
}
public updateSize() {
@@ -99,11 +99,11 @@ export class VisLevel {
}
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.screenCellHeight = Math.ceil(2 * this.hexSize);
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.screenXOffset = this.screenCellWidth * (gdLevel.radius + 0.5);
this.screenYOffset = this.screenCellHeight * (gdLevel.radius + 0.5);
@@ -120,6 +120,11 @@ export class VisLevel {
}
public updateEveryFrame(currentStep: number) {
if (currentStep < 0) {
this.lastStep = -1;
return;
}
const simLevel = this.simMain.currentLevel;
if (simLevel == null) {
return;
@@ -137,11 +142,9 @@ export class VisLevel {
const visEnemy = this.enemyMap.get(simEnemy);
if (!visEnemy) {
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();
}
else {
} else {
visEnemy.update(t);
}
});
@@ -159,8 +162,7 @@ export class VisLevel {
const visProjectile = this.projectileMap.get(simProjectile);
if (!visProjectile) {
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();
}
});
@@ -196,34 +198,34 @@ export class VisLevel {
const gdLevel = this.gdRoot.levels[simLevel.index];
if (this.background == null) {
const backgroundCanvas = this.visMain.canvas.cloneNode() as HTMLCanvasElement;
const backgroundContext = backgroundCanvas.getContext("2d")!;
const backgroundContext = backgroundCanvas.getContext('2d')!;
this.background = backgroundCanvas;
simLevel.cells.forEach((cell: SimCell) => {
if (cell.distance > gdLevel.radius) {
return;
}
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.fillRect(0, 0, this.visMain.canvas.width, this.visMain.canvas.height);
const cellCanvas = this.visMain.canvas.cloneNode() as HTMLCanvasElement;
const cellContext = cellCanvas.getContext("2d")!;
const cellContext = cellCanvas.getContext('2d')!;
simLevel.cells.forEach((cell: SimCell) => {
if (cell.distance > gdLevel.radius) {
return;
}
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.globalCompositeOperation = "source-over";
backgroundContext.globalCompositeOperation = 'source-over';
}
ctx.drawImage(this.background, 0, 0);
@@ -242,11 +244,7 @@ export class VisLevel {
const pos = Vector2.lerp(positions[0], positions[1], t);
const width = this.screenCellWidth * simProjectile.size;
const height = this.screenCellHeight * simProjectile.size;
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.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);
}
private drawEnemy(simEnemy: SimEnemy) {
@@ -260,12 +258,7 @@ export class VisLevel {
return;
}
const pos = Vector2.lerp(positions[0], positions[1], t);
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);
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);
}
private drawCell(cell: SimCell) {
@@ -274,9 +267,9 @@ export class VisLevel {
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) {
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];
@@ -293,20 +286,20 @@ export class VisLevel {
}
}
if (draw) {
this.drawCellImage(this.visMain.context, highlightedCell, "cell-highlighted.svg");
this.visMain.context.fillStyle = "rgba(0, 0, 0, 1)";
this.drawCellImage(this.visMain.context, highlightedCell, 'cell-highlighted.svg');
this.visMain.context.fillStyle = 'rgba(0, 0, 0, 1)';
}
}
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);
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) {
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 ready: boolean = false;
private gap: number = 0;
private animationFrameId: number | null = null;
constructor(simMain: SimMain, assets: AssetPreloaderService, wrapper: HTMLDivElement, canvas: HTMLCanvasElement) {
this.assets = assets;
@@ -50,7 +51,7 @@ export class VisMain {
return;
}
requestAnimationFrame((timestamp: number) => {
this.animationFrameId = requestAnimationFrame((timestamp: number) => {
this.step(timestamp);
});
@@ -105,11 +106,17 @@ export class VisMain {
stop() {
this.active = false;
this.startTimestamp = 0;
this.visLevel.updateEveryFrame(-1);
if (this.animationFrameId !== null) {
cancelAnimationFrame(this.animationFrameId);
this.animationFrameId = null;
}
}
start() {
this.active = true;
requestAnimationFrame((timestamp: number) => {
this.animationFrameId = requestAnimationFrame((timestamp: number) => {
this.startTimestamp = timestamp - (this.simMain.currentStep / this.simMain.gdRoot.simulation.stepsPerSecond) * 1000;
this.step(timestamp);
});