mirror of
https://github.com/openfrontio/OpenFrontIO.git
synced 2026-06-21 15:40:43 +00:00
scamiv
1381 lines
37 KiB
TypeScript
1381 lines
37 KiB
TypeScript
import { colord, Colord } from "colord";
|
|
import { EventBus } from "../../../core/EventBus";
|
|
import { Theme } from "../../../core/configuration/Config";
|
|
import { UnitType } from "../../../core/game/Game";
|
|
import { TileRef } from "../../../core/game/GameMap";
|
|
import { GameView, UnitView } from "../../../core/game/GameView";
|
|
import { BezenhamLine } from "../../../core/utilities/Line";
|
|
import {
|
|
AlternateViewEvent,
|
|
ContextMenuEvent,
|
|
MouseUpEvent,
|
|
TouchEvent,
|
|
UnitSelectionEvent,
|
|
} from "../../InputHandler";
|
|
import { MoveWarshipIntentEvent } from "../../Transport";
|
|
import { TransformHandler } from "../TransformHandler";
|
|
import { Layer } from "./Layer";
|
|
import { sampleGridSegmentPlan } from "./SegmentMotionSample";
|
|
import { pruneInactiveTrails } from "./TrailLifecycle";
|
|
|
|
import { GameUpdateType } from "../../../core/game/GameUpdates";
|
|
import {
|
|
getColoredSprite,
|
|
isSpriteReady,
|
|
loadAllSprites,
|
|
} from "../SpriteLoader";
|
|
|
|
enum Relationship {
|
|
Self,
|
|
Ally,
|
|
Enemy,
|
|
}
|
|
|
|
const UNIT_DRAW_BUDGET_MS = 1;
|
|
const UNIT_DRAW_SOFT_OVERRUN_MS = 1;
|
|
const OFFSCREEN_REFRESH_EVERY_N_FRAMES = 6;
|
|
const ONSCREEN_HYSTERESIS_FRAMES = 2;
|
|
const OFFSCREEN_VERIFY_MAX_PER_FRAME = 12;
|
|
const VIEW_PADDING_PX = 12;
|
|
|
|
type TransportTrailState = {
|
|
xy: number[];
|
|
planId: number;
|
|
lastX: number;
|
|
lastY: number;
|
|
lastOnScreen: boolean;
|
|
};
|
|
|
|
type MoverSpriteRect = {
|
|
x: number;
|
|
y: number;
|
|
w: number;
|
|
h: number;
|
|
};
|
|
|
|
type MoverRenderState = {
|
|
planId: number;
|
|
lastSpriteRect: MoverSpriteRect | null;
|
|
lastOnScreen: boolean;
|
|
bucket: "on" | "off";
|
|
bucketIndex: number;
|
|
skipDebt: number;
|
|
lastSeenFrame: number;
|
|
};
|
|
|
|
export class UnitLayer implements Layer {
|
|
private canvas: HTMLCanvasElement;
|
|
private context: CanvasRenderingContext2D;
|
|
private dynamicMoverCanvas: HTMLCanvasElement;
|
|
private dynamicMoverContext: CanvasRenderingContext2D;
|
|
private trailCanvas: HTMLCanvasElement;
|
|
private trailContext: CanvasRenderingContext2D;
|
|
|
|
// Pixel trails (currently only used for nukes).
|
|
private unitToTrail = new Map<number, TileRef[]>();
|
|
|
|
private gridMoverUnitIds = new Set<number>();
|
|
|
|
private transportShipTrails = new Map<number, TransportTrailState>();
|
|
private trailDirty = false;
|
|
|
|
private moverState = new Map<number, MoverRenderState>();
|
|
private onScreenMoverIds: number[] = [];
|
|
private offScreenMoverIds: number[] = [];
|
|
private onScreenCursor = 0;
|
|
private offScreenCursor = 0;
|
|
private renderFrame = 0;
|
|
private lastPerfCounters: Record<string, number> = {
|
|
moversTrackedTotal: 0,
|
|
moversSampled: 0,
|
|
moversDrawn: 0,
|
|
moversSkipped: 0,
|
|
drawTimeMs: 0,
|
|
budgetTargetMs: UNIT_DRAW_BUDGET_MS,
|
|
budgetSoftOverrunMs: UNIT_DRAW_SOFT_OVERRUN_MS,
|
|
avgOnScreenDebt: 0,
|
|
maxOnScreenDebt: 0,
|
|
};
|
|
|
|
private theme: Theme;
|
|
|
|
private alternateView = false;
|
|
|
|
private oldShellTile = new Map<UnitView, TileRef>();
|
|
|
|
private transformHandler: TransformHandler;
|
|
|
|
// Selected unit property as suggested in the review comment
|
|
private selectedUnit: UnitView | null = null;
|
|
|
|
// Configuration for unit selection
|
|
private readonly WARSHIP_SELECTION_RADIUS = 10; // Radius in game cells for warship selection hit zone
|
|
|
|
constructor(
|
|
private game: GameView,
|
|
private eventBus: EventBus,
|
|
transformHandler: TransformHandler,
|
|
) {
|
|
this.theme = game.config().theme();
|
|
this.transformHandler = transformHandler;
|
|
}
|
|
|
|
shouldTransform(): boolean {
|
|
return true;
|
|
}
|
|
|
|
tick() {
|
|
const trailPrune = pruneInactiveTrails(
|
|
this.unitToTrail,
|
|
this.transportShipTrails,
|
|
(unitId) => {
|
|
const current = this.game.unit(unitId);
|
|
return !!current && current.isActive();
|
|
},
|
|
);
|
|
if (trailPrune.removedNukes > 0 || trailPrune.removedTransport > 0) {
|
|
this.trailDirty = true;
|
|
}
|
|
|
|
const gridMoverUnitIds = new Set<number>();
|
|
for (const id of this.game.motionPlans().keys()) {
|
|
gridMoverUnitIds.add(id);
|
|
}
|
|
|
|
const moverSetChanged = !this.setsEqual(
|
|
gridMoverUnitIds,
|
|
this.gridMoverUnitIds,
|
|
);
|
|
if (moverSetChanged) {
|
|
this.gridMoverUnitIds = gridMoverUnitIds;
|
|
this.pruneMoverStates(gridMoverUnitIds);
|
|
this.redrawStaticSprites();
|
|
}
|
|
|
|
const updatedUnitIds =
|
|
this.game
|
|
.updatesSinceLastTick()
|
|
?.[GameUpdateType.Unit]?.map((unit) => unit.id) ?? [];
|
|
|
|
const motionPlanUnitIds = this.game.motionPlannedUnitIds();
|
|
|
|
const unitIds = new Set<number>();
|
|
for (const id of updatedUnitIds) {
|
|
if (!gridMoverUnitIds.has(id)) {
|
|
unitIds.add(id);
|
|
}
|
|
}
|
|
for (const id of motionPlanUnitIds) {
|
|
// Train plans still rely on discrete tick updates; grid movers are rendered smoothly in renderLayer().
|
|
if (!gridMoverUnitIds.has(id)) {
|
|
unitIds.add(id);
|
|
}
|
|
}
|
|
|
|
if (unitIds.size > 0) {
|
|
this.updateUnitsSprites(Array.from(unitIds));
|
|
}
|
|
}
|
|
|
|
init() {
|
|
this.eventBus.on(AlternateViewEvent, (e) => this.onAlternativeViewEvent(e));
|
|
this.eventBus.on(MouseUpEvent, (e) => this.onMouseUp(e));
|
|
this.eventBus.on(TouchEvent, (e) => this.onTouch(e));
|
|
this.eventBus.on(UnitSelectionEvent, (e) => this.onUnitSelectionChange(e));
|
|
this.redraw();
|
|
|
|
loadAllSprites();
|
|
}
|
|
|
|
/**
|
|
* Find player-owned warships near the given cell within a configurable radius
|
|
* @param clickRef The tile to check
|
|
* @returns Array of player's warships in range, sorted by distance (closest first)
|
|
*/
|
|
private findWarshipsNearCell(clickRef: TileRef): UnitView[] {
|
|
// Only select warships owned by the player
|
|
return this.game
|
|
.units(UnitType.Warship)
|
|
.filter(
|
|
(unit) =>
|
|
unit.isActive() &&
|
|
unit.owner() === this.game.myPlayer() && // Only allow selecting own warships
|
|
this.game.manhattanDist(unit.tile(), clickRef) <=
|
|
this.WARSHIP_SELECTION_RADIUS,
|
|
)
|
|
.sort((a, b) => {
|
|
// Sort by distance (closest first)
|
|
const distA = this.game.manhattanDist(a.tile(), clickRef);
|
|
const distB = this.game.manhattanDist(b.tile(), clickRef);
|
|
return distA - distB;
|
|
});
|
|
}
|
|
|
|
private onMouseUp(
|
|
event: MouseUpEvent,
|
|
clickRef?: TileRef,
|
|
nearbyWarships?: UnitView[],
|
|
) {
|
|
if (clickRef === undefined) {
|
|
// Convert screen coordinates to world coordinates
|
|
const cell = this.transformHandler.screenToWorldCoordinates(
|
|
event.x,
|
|
event.y,
|
|
);
|
|
if (!this.game.isValidCoord(cell.x, cell.y)) return;
|
|
|
|
clickRef = this.game.ref(cell.x, cell.y);
|
|
}
|
|
if (!this.game.isOcean(clickRef)) return;
|
|
|
|
if (this.selectedUnit) {
|
|
this.eventBus.emit(
|
|
new MoveWarshipIntentEvent(this.selectedUnit.id(), clickRef),
|
|
);
|
|
// Deselect
|
|
this.eventBus.emit(new UnitSelectionEvent(this.selectedUnit, false));
|
|
return;
|
|
}
|
|
|
|
// Find warships near this tile, sorted by distance
|
|
nearbyWarships ??= this.findWarshipsNearCell(clickRef);
|
|
if (nearbyWarships.length > 0) {
|
|
// Toggle selection of the closest warship
|
|
this.eventBus.emit(new UnitSelectionEvent(nearbyWarships[0], true));
|
|
}
|
|
}
|
|
|
|
private onTouch(event: TouchEvent) {
|
|
const cell = this.transformHandler.screenToWorldCoordinates(
|
|
event.x,
|
|
event.y,
|
|
);
|
|
|
|
if (!this.game.isValidCoord(cell.x, cell.y)) {
|
|
return;
|
|
}
|
|
|
|
const clickRef = this.game.ref(cell.x, cell.y);
|
|
if (!this.game.isOcean(clickRef)) {
|
|
// No isValidCoord/Ref check yet, that is done for ContextMenuEvent later
|
|
// No warship to find because no Ocean tile, open Radial Menu
|
|
this.eventBus.emit(new ContextMenuEvent(event.x, event.y));
|
|
return;
|
|
}
|
|
|
|
if (!this.game.isValidRef(clickRef)) {
|
|
return;
|
|
}
|
|
|
|
if (this.selectedUnit) {
|
|
// Reuse the mouse logic, send clickRef to avoid fetching it again
|
|
this.onMouseUp(new MouseUpEvent(event.x, event.y), clickRef);
|
|
return;
|
|
}
|
|
|
|
const nearbyWarships = this.findWarshipsNearCell(clickRef);
|
|
|
|
if (nearbyWarships.length > 0) {
|
|
this.onMouseUp(
|
|
new MouseUpEvent(event.x, event.y),
|
|
clickRef,
|
|
nearbyWarships,
|
|
);
|
|
} else {
|
|
// No warships selected or nearby, open Radial Menu
|
|
this.eventBus.emit(new ContextMenuEvent(event.x, event.y));
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Handle unit selection changes
|
|
*/
|
|
private onUnitSelectionChange(event: UnitSelectionEvent) {
|
|
if (event.isSelected) {
|
|
this.selectedUnit = event.unit;
|
|
} else if (this.selectedUnit === event.unit) {
|
|
this.selectedUnit = null;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Handle unit deactivation or destruction
|
|
* If the selected unit is removed from the game, deselect it
|
|
*/
|
|
private handleUnitDeactivation(unit: UnitView) {
|
|
if (this.selectedUnit === unit && !unit.isActive()) {
|
|
this.eventBus.emit(new UnitSelectionEvent(unit, false));
|
|
}
|
|
}
|
|
|
|
renderLayer(context: CanvasRenderingContext2D) {
|
|
this.renderFrame++;
|
|
const tickAlpha = this.computeTickAlpha();
|
|
const tickFloat = this.game.ticks() + tickAlpha;
|
|
const viewBounds = this.currentViewBounds();
|
|
const activeMoverIds = new Set<number>();
|
|
|
|
for (const [unitId, plan] of this.game.motionPlans()) {
|
|
const unit = this.game.unit(unitId);
|
|
if (!unit || !unit.isActive()) {
|
|
this.clearMoverState(unitId);
|
|
if (this.transportShipTrails.delete(unitId)) this.trailDirty = true;
|
|
continue;
|
|
}
|
|
activeMoverIds.add(unitId);
|
|
|
|
const state = this.ensureMoverState(unitId, plan.planId);
|
|
const maybeOnScreen = this.isPotentiallyOnScreen(
|
|
plan,
|
|
state,
|
|
tickFloat,
|
|
viewBounds,
|
|
);
|
|
this.moveMoverToBucket(unitId, state, maybeOnScreen ? "on" : "off");
|
|
|
|
if (
|
|
!maybeOnScreen &&
|
|
state.lastOnScreen &&
|
|
state.lastSpriteRect &&
|
|
this.renderFrame - state.lastSeenFrame > ONSCREEN_HYSTERESIS_FRAMES
|
|
) {
|
|
this.clearMoverRect(state.lastSpriteRect);
|
|
state.lastSpriteRect = null;
|
|
state.lastOnScreen = false;
|
|
}
|
|
}
|
|
|
|
this.pruneMoverStates(activeMoverIds);
|
|
|
|
const moverPerf = this.drawBucketedMovers(
|
|
tickFloat,
|
|
activeMoverIds,
|
|
viewBounds,
|
|
);
|
|
|
|
this.rebuildTrailCanvasIfDirty();
|
|
|
|
context.drawImage(
|
|
this.trailCanvas,
|
|
-this.game.width() / 2,
|
|
-this.game.height() / 2,
|
|
this.game.width(),
|
|
this.game.height(),
|
|
);
|
|
context.drawImage(
|
|
this.canvas,
|
|
-this.game.width() / 2,
|
|
-this.game.height() / 2,
|
|
this.game.width(),
|
|
this.game.height(),
|
|
);
|
|
context.drawImage(
|
|
this.dynamicMoverCanvas,
|
|
-this.game.width() / 2,
|
|
-this.game.height() / 2,
|
|
this.game.width(),
|
|
this.game.height(),
|
|
);
|
|
|
|
let totalOnScreenDebt = 0;
|
|
let onScreenDebtCount = 0;
|
|
let maxOnScreenDebt = 0;
|
|
for (const unitId of this.onScreenMoverIds) {
|
|
const state = this.moverState.get(unitId);
|
|
if (!state) continue;
|
|
totalOnScreenDebt += state.skipDebt;
|
|
onScreenDebtCount++;
|
|
if (state.skipDebt > maxOnScreenDebt) {
|
|
maxOnScreenDebt = state.skipDebt;
|
|
}
|
|
}
|
|
|
|
this.lastPerfCounters = {
|
|
moversTrackedTotal:
|
|
this.onScreenMoverIds.length + this.offScreenMoverIds.length,
|
|
moversSampled: moverPerf.sampled,
|
|
moversDrawn: moverPerf.drawn,
|
|
moversSkipped: moverPerf.skipped,
|
|
drawTimeMs: moverPerf.budgetUsedMs,
|
|
budgetTargetMs: UNIT_DRAW_BUDGET_MS,
|
|
budgetSoftOverrunMs: UNIT_DRAW_SOFT_OVERRUN_MS,
|
|
avgOnScreenDebt:
|
|
onScreenDebtCount > 0 ? totalOnScreenDebt / onScreenDebtCount : 0,
|
|
maxOnScreenDebt,
|
|
};
|
|
}
|
|
|
|
private drawBucketedMovers(
|
|
tickFloat: number,
|
|
activeMoverIds: Set<number>,
|
|
viewBounds: { left: number; top: number; right: number; bottom: number },
|
|
): {
|
|
sampled: number;
|
|
drawn: number;
|
|
skipped: number;
|
|
budgetUsedMs: number;
|
|
} {
|
|
const frameStartMs = performance.now();
|
|
const drawnIds = new Set<number>();
|
|
|
|
let sampled = 0;
|
|
let drawn = 0;
|
|
let skipped = 0;
|
|
|
|
const onScreenPass = this.drawBucketPass(
|
|
"on",
|
|
tickFloat,
|
|
activeMoverIds,
|
|
drawnIds,
|
|
frameStartMs,
|
|
viewBounds,
|
|
Number.MAX_SAFE_INTEGER,
|
|
);
|
|
sampled += onScreenPass.sampled;
|
|
drawn += onScreenPass.drawn;
|
|
skipped += onScreenPass.skipped;
|
|
|
|
const budgetExceeded = !onScreenPass.budgetRemaining;
|
|
const shouldVerifyOffscreen =
|
|
!budgetExceeded &&
|
|
this.offScreenMoverIds.length > 0 &&
|
|
this.renderFrame % OFFSCREEN_REFRESH_EVERY_N_FRAMES === 0;
|
|
|
|
if (shouldVerifyOffscreen) {
|
|
const offscreenPass = this.drawBucketPass(
|
|
"off",
|
|
tickFloat,
|
|
activeMoverIds,
|
|
drawnIds,
|
|
frameStartMs,
|
|
viewBounds,
|
|
OFFSCREEN_VERIFY_MAX_PER_FRAME,
|
|
);
|
|
sampled += offscreenPass.sampled;
|
|
drawn += offscreenPass.drawn;
|
|
skipped += offscreenPass.skipped;
|
|
}
|
|
|
|
for (const unitId of activeMoverIds) {
|
|
if (drawnIds.has(unitId)) {
|
|
continue;
|
|
}
|
|
const state = this.moverState.get(unitId);
|
|
if (state && state.bucket === "on") {
|
|
state.skipDebt = (state.skipDebt + 1) >>> 0;
|
|
}
|
|
}
|
|
|
|
return {
|
|
sampled,
|
|
drawn,
|
|
skipped,
|
|
budgetUsedMs: performance.now() - frameStartMs,
|
|
};
|
|
}
|
|
|
|
private drawBucketPass(
|
|
bucket: "on" | "off",
|
|
tickFloat: number,
|
|
activeMoverIds: Set<number>,
|
|
drawnIds: Set<number>,
|
|
frameStartMs: number,
|
|
viewBounds: { left: number; top: number; right: number; bottom: number },
|
|
maxItems: number,
|
|
): {
|
|
sampled: number;
|
|
drawn: number;
|
|
skipped: number;
|
|
budgetRemaining: boolean;
|
|
} {
|
|
const bucketIds =
|
|
bucket === "on" ? this.onScreenMoverIds : this.offScreenMoverIds;
|
|
if (bucketIds.length === 0 || maxItems <= 0) {
|
|
return { sampled: 0, drawn: 0, skipped: 0, budgetRemaining: true };
|
|
}
|
|
|
|
const startCursor =
|
|
bucket === "on" ? this.onScreenCursor : this.offScreenCursor;
|
|
const cap = Math.min(bucketIds.length, maxItems);
|
|
|
|
let sampled = 0;
|
|
let drawn = 0;
|
|
let skipped = 0;
|
|
let budgetRemaining = true;
|
|
|
|
for (let offset = 0; offset < cap; offset++) {
|
|
if (bucketIds.length === 0) {
|
|
break;
|
|
}
|
|
const idx = (startCursor + offset) % bucketIds.length;
|
|
const unitId = bucketIds[idx];
|
|
|
|
const elapsedMs = performance.now() - frameStartMs;
|
|
const canDrawWithinTarget = elapsedMs < UNIT_DRAW_BUDGET_MS;
|
|
const canDrawOnScreenOverrun =
|
|
bucket === "on" &&
|
|
elapsedMs < UNIT_DRAW_BUDGET_MS + UNIT_DRAW_SOFT_OVERRUN_MS;
|
|
if (!canDrawWithinTarget && !canDrawOnScreenOverrun) {
|
|
budgetRemaining = false;
|
|
skipped++;
|
|
break;
|
|
}
|
|
|
|
if (!activeMoverIds.has(unitId)) {
|
|
continue;
|
|
}
|
|
|
|
const unit = this.game.unit(unitId);
|
|
const plan = this.game.motionPlans().get(unitId);
|
|
const state = this.moverState.get(unitId);
|
|
if (!unit || !unit.isActive() || !plan || !state) {
|
|
this.clearMoverState(unitId);
|
|
skipped++;
|
|
continue;
|
|
}
|
|
|
|
sampled++;
|
|
const sampledPos = sampleGridSegmentPlan(this.game, plan, tickFloat);
|
|
if (!sampledPos) {
|
|
skipped++;
|
|
continue;
|
|
}
|
|
|
|
const onScreen = this.pointInView(
|
|
sampledPos.x,
|
|
sampledPos.y,
|
|
viewBounds,
|
|
VIEW_PADDING_PX,
|
|
);
|
|
|
|
if (!onScreen) {
|
|
if (state.lastOnScreen && state.lastSpriteRect) {
|
|
this.clearMoverRect(state.lastSpriteRect);
|
|
state.lastSpriteRect = null;
|
|
state.lastOnScreen = false;
|
|
}
|
|
this.moveMoverToBucket(unitId, state, "off");
|
|
if (unit.type() === UnitType.TransportShip) {
|
|
this.updateTransportShipTrail(
|
|
unitId,
|
|
plan.planId,
|
|
sampledPos.x,
|
|
sampledPos.y,
|
|
false,
|
|
);
|
|
}
|
|
skipped++;
|
|
continue;
|
|
}
|
|
|
|
this.moveMoverToBucket(unitId, state, "on");
|
|
if (state.lastSpriteRect) {
|
|
this.clearMoverRect(state.lastSpriteRect);
|
|
}
|
|
const rect = this.drawSpriteAt(
|
|
unit,
|
|
sampledPos.x,
|
|
sampledPos.y,
|
|
this.dynamicMoverContext,
|
|
false,
|
|
);
|
|
if (!rect) {
|
|
skipped++;
|
|
continue;
|
|
}
|
|
|
|
state.lastSpriteRect = rect;
|
|
state.lastOnScreen = true;
|
|
state.lastSeenFrame = this.renderFrame;
|
|
state.skipDebt = 0;
|
|
drawnIds.add(unitId);
|
|
drawn++;
|
|
|
|
if (unit.type() === UnitType.TransportShip) {
|
|
this.updateTransportShipTrail(
|
|
unitId,
|
|
plan.planId,
|
|
sampledPos.x,
|
|
sampledPos.y,
|
|
true,
|
|
);
|
|
}
|
|
}
|
|
|
|
if (bucket === "on") {
|
|
this.onScreenCursor =
|
|
bucketIds.length > 0
|
|
? (startCursor + Math.max(1, cap)) % bucketIds.length
|
|
: 0;
|
|
} else {
|
|
this.offScreenCursor =
|
|
bucketIds.length > 0
|
|
? (startCursor + Math.max(1, cap)) % bucketIds.length
|
|
: 0;
|
|
}
|
|
|
|
return { sampled, drawn, skipped, budgetRemaining };
|
|
}
|
|
|
|
onAlternativeViewEvent(event: AlternateViewEvent) {
|
|
this.alternateView = event.alternateView;
|
|
this.redraw();
|
|
}
|
|
|
|
redraw() {
|
|
this.canvas = document.createElement("canvas");
|
|
const context = this.canvas.getContext("2d");
|
|
if (context === null) throw new Error("2d context not supported");
|
|
this.context = context;
|
|
|
|
this.dynamicMoverCanvas = document.createElement("canvas");
|
|
const dynamicMoverContext = this.dynamicMoverCanvas.getContext("2d");
|
|
if (dynamicMoverContext === null)
|
|
throw new Error("2d context not supported");
|
|
this.dynamicMoverContext = dynamicMoverContext;
|
|
|
|
this.trailCanvas = document.createElement("canvas");
|
|
const trailContext = this.trailCanvas.getContext("2d");
|
|
if (trailContext === null) throw new Error("2d context not supported");
|
|
this.trailContext = trailContext;
|
|
|
|
this.canvas.width = this.game.width();
|
|
this.canvas.height = this.game.height();
|
|
this.dynamicMoverCanvas.width = this.game.width();
|
|
this.dynamicMoverCanvas.height = this.game.height();
|
|
this.trailCanvas.width = this.game.width();
|
|
this.trailCanvas.height = this.game.height();
|
|
|
|
this.gridMoverUnitIds = new Set<number>(this.game.motionPlans().keys());
|
|
this.moverState.clear();
|
|
this.onScreenMoverIds = [];
|
|
this.offScreenMoverIds = [];
|
|
this.onScreenCursor = 0;
|
|
this.offScreenCursor = 0;
|
|
this.trailDirty = true;
|
|
|
|
this.redrawStaticSprites();
|
|
}
|
|
|
|
private setsEqual(a: Set<number>, b: Set<number>): boolean {
|
|
if (a.size !== b.size) {
|
|
return false;
|
|
}
|
|
for (const v of a) {
|
|
if (!b.has(v)) {
|
|
return false;
|
|
}
|
|
}
|
|
return true;
|
|
}
|
|
|
|
private redrawStaticSprites(): void {
|
|
this.context.clearRect(0, 0, this.game.width(), this.game.height());
|
|
const units = this.game
|
|
.units()
|
|
.filter((u) => !this.gridMoverUnitIds.has(u.id()));
|
|
this.drawUnitsCells(units);
|
|
}
|
|
|
|
private computeTickAlpha(): number {
|
|
if (this.game.isCatchingUp()) {
|
|
return 1;
|
|
}
|
|
const dt = Math.max(1, this.game.tickDtEmaMs());
|
|
const alpha = (performance.now() - this.game.lastUpdateAtMs()) / dt;
|
|
return Math.max(0, Math.min(1, alpha));
|
|
}
|
|
|
|
getPerfCounters(): Record<string, number> {
|
|
return this.lastPerfCounters;
|
|
}
|
|
|
|
private currentViewBounds(): {
|
|
left: number;
|
|
top: number;
|
|
right: number;
|
|
bottom: number;
|
|
} {
|
|
const [topLeft, bottomRight] = this.transformHandler.screenBoundingRect();
|
|
return {
|
|
left: topLeft.x,
|
|
top: topLeft.y,
|
|
right: bottomRight.x,
|
|
bottom: bottomRight.y,
|
|
};
|
|
}
|
|
|
|
private pointInView(
|
|
x: number,
|
|
y: number,
|
|
viewBounds: { left: number; top: number; right: number; bottom: number },
|
|
pad: number = 0,
|
|
): boolean {
|
|
return (
|
|
x >= viewBounds.left - pad &&
|
|
x <= viewBounds.right + pad &&
|
|
y >= viewBounds.top - pad &&
|
|
y <= viewBounds.bottom + pad
|
|
);
|
|
}
|
|
|
|
private isPotentiallyOnScreen(
|
|
plan: {
|
|
startTick: number;
|
|
ticksPerStep: number;
|
|
points: Uint32Array;
|
|
segmentSteps: Uint32Array;
|
|
segCumSteps: Uint32Array;
|
|
},
|
|
state: MoverRenderState,
|
|
tickFloat: number,
|
|
viewBounds: { left: number; top: number; right: number; bottom: number },
|
|
): boolean {
|
|
if (
|
|
state.lastOnScreen &&
|
|
this.renderFrame - state.lastSeenFrame <= ONSCREEN_HYSTERESIS_FRAMES
|
|
) {
|
|
return true;
|
|
}
|
|
|
|
const segment = this.currentSegmentEndpoints(plan, tickFloat);
|
|
if (!segment) {
|
|
return false;
|
|
}
|
|
|
|
if (
|
|
this.pointInView(segment.x0, segment.y0, viewBounds, VIEW_PADDING_PX) ||
|
|
this.pointInView(segment.x1, segment.y1, viewBounds, VIEW_PADDING_PX)
|
|
) {
|
|
return true;
|
|
}
|
|
|
|
const segLeft = Math.min(segment.x0, segment.x1) - VIEW_PADDING_PX;
|
|
const segRight = Math.max(segment.x0, segment.x1) + VIEW_PADDING_PX;
|
|
const segTop = Math.min(segment.y0, segment.y1) - VIEW_PADDING_PX;
|
|
const segBottom = Math.max(segment.y0, segment.y1) + VIEW_PADDING_PX;
|
|
|
|
return !(
|
|
segRight < viewBounds.left ||
|
|
segLeft > viewBounds.right ||
|
|
segBottom < viewBounds.top ||
|
|
segTop > viewBounds.bottom
|
|
);
|
|
}
|
|
|
|
private currentSegmentEndpoints(
|
|
plan: {
|
|
startTick: number;
|
|
ticksPerStep: number;
|
|
points: Uint32Array;
|
|
segmentSteps: Uint32Array;
|
|
segCumSteps: Uint32Array;
|
|
},
|
|
tickFloat: number,
|
|
): { x0: number; y0: number; x1: number; y1: number } | null {
|
|
const points = plan.points;
|
|
if (points.length === 0) {
|
|
return null;
|
|
}
|
|
if (points.length === 1 || plan.segmentSteps.length === 0) {
|
|
const tile = points[0] as TileRef;
|
|
const x = this.game.x(tile);
|
|
const y = this.game.y(tile);
|
|
return { x0: x, y0: y, x1: x, y1: y };
|
|
}
|
|
|
|
const segCum = plan.segCumSteps;
|
|
const totalSteps = segCum[segCum.length - 1] >>> 0;
|
|
if (totalSteps === 0) {
|
|
const tile = points[points.length - 1] as TileRef;
|
|
const x = this.game.x(tile);
|
|
const y = this.game.y(tile);
|
|
return { x0: x, y0: y, x1: x, y1: y };
|
|
}
|
|
|
|
const ticksPerStep = Math.max(1, plan.ticksPerStep);
|
|
const stepFloat = (tickFloat - plan.startTick) / ticksPerStep;
|
|
let seg = 0;
|
|
if (stepFloat >= totalSteps) {
|
|
seg = Math.max(0, plan.segmentSteps.length - 1);
|
|
} else if (stepFloat > 0) {
|
|
let lo = 0;
|
|
let hi = plan.segmentSteps.length - 1;
|
|
while (lo <= hi) {
|
|
const mid = (lo + hi) >>> 1;
|
|
const start = segCum[mid] >>> 0;
|
|
const end = segCum[mid + 1] >>> 0;
|
|
if (stepFloat < start) {
|
|
hi = mid - 1;
|
|
} else if (stepFloat >= end) {
|
|
lo = mid + 1;
|
|
} else {
|
|
seg = mid;
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
|
|
const p0 = points[seg] as TileRef;
|
|
const p1 = points[Math.min(points.length - 1, seg + 1)] as TileRef;
|
|
return {
|
|
x0: this.game.x(p0),
|
|
y0: this.game.y(p0),
|
|
x1: this.game.x(p1),
|
|
y1: this.game.y(p1),
|
|
};
|
|
}
|
|
|
|
private ensureMoverState(unitId: number, planId: number): MoverRenderState {
|
|
const existing = this.moverState.get(unitId);
|
|
if (!existing) {
|
|
const state: MoverRenderState = {
|
|
planId,
|
|
lastSpriteRect: null,
|
|
lastOnScreen: false,
|
|
bucket: "off",
|
|
bucketIndex: -1,
|
|
skipDebt: 0,
|
|
lastSeenFrame: -1,
|
|
};
|
|
this.moverState.set(unitId, state);
|
|
this.moveMoverToBucket(unitId, state, "off");
|
|
return state;
|
|
}
|
|
|
|
if (existing.planId !== planId) {
|
|
if (existing.lastSpriteRect) {
|
|
this.clearMoverRect(existing.lastSpriteRect);
|
|
}
|
|
existing.planId = planId;
|
|
existing.lastOnScreen = false;
|
|
existing.lastSpriteRect = null;
|
|
existing.skipDebt = 0;
|
|
existing.lastSeenFrame = -1;
|
|
this.moveMoverToBucket(unitId, existing, "off");
|
|
}
|
|
|
|
return existing;
|
|
}
|
|
|
|
private pruneMoverStates(activeMoverIds: Set<number>): void {
|
|
for (const [unitId, state] of this.moverState) {
|
|
if (activeMoverIds.has(unitId)) {
|
|
continue;
|
|
}
|
|
if (state.lastSpriteRect) {
|
|
this.clearMoverRect(state.lastSpriteRect);
|
|
}
|
|
this.removeFromBucket(unitId, state);
|
|
this.moverState.delete(unitId);
|
|
}
|
|
}
|
|
|
|
private clearMoverState(unitId: number): void {
|
|
const state = this.moverState.get(unitId);
|
|
if (state?.lastSpriteRect) {
|
|
this.clearMoverRect(state.lastSpriteRect);
|
|
}
|
|
if (state) {
|
|
this.removeFromBucket(unitId, state);
|
|
}
|
|
this.moverState.delete(unitId);
|
|
}
|
|
|
|
private moveMoverToBucket(
|
|
unitId: number,
|
|
state: MoverRenderState,
|
|
target: "on" | "off",
|
|
): void {
|
|
if (state.bucket === target && state.bucketIndex >= 0) {
|
|
return;
|
|
}
|
|
|
|
this.removeFromBucket(unitId, state);
|
|
|
|
const targetBucket =
|
|
target === "on" ? this.onScreenMoverIds : this.offScreenMoverIds;
|
|
state.bucket = target;
|
|
state.bucketIndex = targetBucket.length;
|
|
targetBucket.push(unitId);
|
|
}
|
|
|
|
private removeFromBucket(unitId: number, state: MoverRenderState): void {
|
|
if (state.bucketIndex < 0) {
|
|
return;
|
|
}
|
|
|
|
const bucketIds =
|
|
state.bucket === "on" ? this.onScreenMoverIds : this.offScreenMoverIds;
|
|
const idx = state.bucketIndex;
|
|
const lastIdx = bucketIds.length - 1;
|
|
if (idx < 0 || idx > lastIdx) {
|
|
state.bucketIndex = -1;
|
|
return;
|
|
}
|
|
|
|
const swappedUnitId = bucketIds[lastIdx];
|
|
bucketIds[idx] = swappedUnitId;
|
|
bucketIds.pop();
|
|
|
|
if (idx !== lastIdx) {
|
|
const swappedState = this.moverState.get(swappedUnitId);
|
|
if (swappedState) {
|
|
swappedState.bucketIndex = idx;
|
|
}
|
|
}
|
|
|
|
state.bucketIndex = -1;
|
|
|
|
if (state.bucket === "on" && this.onScreenCursor >= bucketIds.length) {
|
|
this.onScreenCursor = 0;
|
|
}
|
|
if (state.bucket === "off" && this.offScreenCursor >= bucketIds.length) {
|
|
this.offScreenCursor = 0;
|
|
}
|
|
}
|
|
|
|
private clearMoverRect(rect: MoverSpriteRect): void {
|
|
this.dynamicMoverContext.clearRect(rect.x, rect.y, rect.w, rect.h);
|
|
}
|
|
|
|
private updateTransportShipTrail(
|
|
unitId: number,
|
|
planId: number,
|
|
x: number,
|
|
y: number,
|
|
onScreen: boolean,
|
|
): void {
|
|
const existing = this.transportShipTrails.get(unitId);
|
|
if (!existing || existing.planId !== planId) {
|
|
const xy: number[] = onScreen ? [x, y] : [];
|
|
this.transportShipTrails.set(unitId, {
|
|
xy,
|
|
planId,
|
|
lastX: x,
|
|
lastY: y,
|
|
lastOnScreen: onScreen,
|
|
});
|
|
if (onScreen) {
|
|
this.trailDirty = true;
|
|
}
|
|
return;
|
|
}
|
|
|
|
if (onScreen && (existing.lastX !== x || existing.lastY !== y)) {
|
|
if (!existing.lastOnScreen && existing.xy.length > 0) {
|
|
existing.xy.push(Number.NaN, Number.NaN);
|
|
}
|
|
existing.xy.push(x, y);
|
|
this.trailDirty = true;
|
|
} else if (onScreen && existing.xy.length === 0) {
|
|
existing.xy.push(x, y);
|
|
this.trailDirty = true;
|
|
}
|
|
|
|
existing.lastX = x;
|
|
existing.lastY = y;
|
|
existing.lastOnScreen = onScreen;
|
|
}
|
|
|
|
private rebuildTrailCanvasIfDirty(): void {
|
|
if (!this.trailDirty) {
|
|
return;
|
|
}
|
|
this.trailDirty = false;
|
|
|
|
const ctx = this.trailContext;
|
|
ctx.clearRect(0, 0, this.game.width(), this.game.height());
|
|
|
|
for (const [unitId, trail] of this.unitToTrail) {
|
|
const unit = this.game.unit(unitId);
|
|
if (!unit || !unit.isActive()) {
|
|
continue;
|
|
}
|
|
const rel = this.relationship(unit);
|
|
for (const tile of trail) {
|
|
this.paintCell(
|
|
this.game.x(tile),
|
|
this.game.y(tile),
|
|
rel,
|
|
unit.owner().territoryColor(),
|
|
150,
|
|
ctx,
|
|
);
|
|
}
|
|
}
|
|
|
|
for (const [unitId, trail] of this.transportShipTrails) {
|
|
const unit = this.game.unit(unitId);
|
|
if (!unit || !unit.isActive()) {
|
|
continue;
|
|
}
|
|
|
|
if (trail.xy.length < 4) {
|
|
continue;
|
|
}
|
|
|
|
ctx.save();
|
|
ctx.lineCap = "round";
|
|
ctx.lineJoin = "round";
|
|
ctx.lineWidth = 1.0;
|
|
ctx.strokeStyle = this.motionTrailColor(unit);
|
|
|
|
ctx.beginPath();
|
|
let needMove = true;
|
|
for (let i = 0; i < trail.xy.length; i += 2) {
|
|
const x = trail.xy[i];
|
|
const y = trail.xy[i + 1];
|
|
if (!Number.isFinite(x) || !Number.isFinite(y)) {
|
|
needMove = true;
|
|
continue;
|
|
}
|
|
if (needMove) {
|
|
ctx.moveTo(x, y);
|
|
needMove = false;
|
|
} else {
|
|
ctx.lineTo(x, y);
|
|
}
|
|
}
|
|
ctx.stroke();
|
|
ctx.restore();
|
|
}
|
|
}
|
|
|
|
private relationshipForAlternateView(unit: UnitView): Relationship {
|
|
let rel = this.relationship(unit);
|
|
const dstPortId = unit.targetUnitId();
|
|
if (unit.type() === UnitType.TradeShip && dstPortId !== undefined) {
|
|
const target = this.game.unit(dstPortId)?.owner();
|
|
const myPlayer = this.game.myPlayer();
|
|
if (myPlayer !== null && target !== undefined) {
|
|
if (myPlayer === target) {
|
|
rel = Relationship.Self;
|
|
} else if (myPlayer.isFriendly(target)) {
|
|
rel = Relationship.Ally;
|
|
}
|
|
}
|
|
}
|
|
return rel;
|
|
}
|
|
|
|
private motionTrailColor(unit: UnitView): string {
|
|
if (this.alternateView) {
|
|
const rel = this.relationshipForAlternateView(unit);
|
|
switch (rel) {
|
|
case Relationship.Self:
|
|
return this.theme.selfColor().alpha(0.65).toRgbString();
|
|
case Relationship.Ally:
|
|
return this.theme.allyColor().alpha(0.65).toRgbString();
|
|
case Relationship.Enemy:
|
|
return this.theme.enemyColor().alpha(0.65).toRgbString();
|
|
}
|
|
}
|
|
return unit.owner().territoryColor().alpha(0.55).toRgbString();
|
|
}
|
|
|
|
private updateUnitsSprites(unitIds: number[]) {
|
|
const unitsToUpdate = unitIds
|
|
?.map((id) => this.game.unit(id))
|
|
.filter((unit) => unit !== undefined);
|
|
|
|
if (unitsToUpdate) {
|
|
// the clearing and drawing of unit sprites need to be done in 2 passes
|
|
// otherwise the sprite of a unit can be drawn on top of another unit
|
|
this.clearUnitsCells(unitsToUpdate);
|
|
this.drawUnitsCells(unitsToUpdate);
|
|
}
|
|
}
|
|
|
|
private clearUnitsCells(unitViews: UnitView[]) {
|
|
unitViews
|
|
.filter((unitView) => isSpriteReady(unitView))
|
|
.forEach((unitView) => {
|
|
const sprite = getColoredSprite(unitView, this.theme);
|
|
const clearsize = sprite.width + 1;
|
|
const lastX = this.game.x(unitView.lastTile());
|
|
const lastY = this.game.y(unitView.lastTile());
|
|
this.context.clearRect(
|
|
lastX - clearsize / 2,
|
|
lastY - clearsize / 2,
|
|
clearsize,
|
|
clearsize,
|
|
);
|
|
});
|
|
}
|
|
|
|
private drawUnitsCells(unitViews: UnitView[]) {
|
|
unitViews.forEach((unitView) => this.onUnitEvent(unitView));
|
|
}
|
|
|
|
private relationship(unit: UnitView): Relationship {
|
|
const myPlayer = this.game.myPlayer();
|
|
if (myPlayer === null) {
|
|
return Relationship.Enemy;
|
|
}
|
|
if (myPlayer === unit.owner()) {
|
|
return Relationship.Self;
|
|
}
|
|
if (myPlayer.isFriendly(unit.owner())) {
|
|
return Relationship.Ally;
|
|
}
|
|
return Relationship.Enemy;
|
|
}
|
|
|
|
onUnitEvent(unit: UnitView) {
|
|
// Check if unit was deactivated
|
|
if (!unit.isActive()) {
|
|
this.handleUnitDeactivation(unit);
|
|
}
|
|
|
|
switch (unit.type()) {
|
|
case UnitType.TransportShip:
|
|
this.handleBoatEvent(unit);
|
|
break;
|
|
case UnitType.Warship:
|
|
this.handleWarShipEvent(unit);
|
|
break;
|
|
case UnitType.Shell:
|
|
this.handleShellEvent(unit);
|
|
break;
|
|
case UnitType.SAMMissile:
|
|
this.handleMissileEvent(unit);
|
|
break;
|
|
case UnitType.TradeShip:
|
|
this.handleTradeShipEvent(unit);
|
|
break;
|
|
case UnitType.Train:
|
|
this.handleTrainEvent(unit);
|
|
break;
|
|
case UnitType.MIRVWarhead:
|
|
this.handleMIRVWarhead(unit);
|
|
break;
|
|
case UnitType.AtomBomb:
|
|
case UnitType.HydrogenBomb:
|
|
case UnitType.MIRV:
|
|
this.handleNuke(unit);
|
|
break;
|
|
}
|
|
}
|
|
|
|
private handleWarShipEvent(unit: UnitView) {
|
|
if (unit.targetUnitId()) {
|
|
this.drawSprite(unit, colord("rgb(200,0,0)"));
|
|
} else {
|
|
this.drawSprite(unit);
|
|
}
|
|
}
|
|
|
|
private handleShellEvent(unit: UnitView) {
|
|
const rel = this.relationship(unit);
|
|
|
|
// Clear current and previous positions
|
|
this.clearCell(this.game.x(unit.lastTile()), this.game.y(unit.lastTile()));
|
|
const oldTile = this.oldShellTile.get(unit);
|
|
if (oldTile !== undefined) {
|
|
this.clearCell(this.game.x(oldTile), this.game.y(oldTile));
|
|
}
|
|
|
|
this.oldShellTile.set(unit, unit.lastTile());
|
|
if (!unit.isActive()) {
|
|
return;
|
|
}
|
|
|
|
// Paint current and previous positions
|
|
this.paintCell(
|
|
this.game.x(unit.tile()),
|
|
this.game.y(unit.tile()),
|
|
rel,
|
|
unit.owner().borderColor(),
|
|
255,
|
|
);
|
|
this.paintCell(
|
|
this.game.x(unit.lastTile()),
|
|
this.game.y(unit.lastTile()),
|
|
rel,
|
|
unit.owner().borderColor(),
|
|
255,
|
|
);
|
|
}
|
|
|
|
// interception missile from SAM
|
|
private handleMissileEvent(unit: UnitView) {
|
|
this.drawSprite(unit);
|
|
}
|
|
|
|
private clearTrail(unitId: number) {
|
|
if (this.unitToTrail.delete(unitId)) {
|
|
this.trailDirty = true;
|
|
}
|
|
}
|
|
|
|
private handleNuke(unit: UnitView) {
|
|
const unitId = unit.id();
|
|
|
|
if (!this.unitToTrail.has(unitId)) {
|
|
this.unitToTrail.set(unitId, []);
|
|
}
|
|
|
|
const trail = this.unitToTrail.get(unitId) ?? [];
|
|
// It can move faster than 1 pixel, draw a line for the trail or else it will be dotted
|
|
if (trail.length >= 1) {
|
|
const cur = {
|
|
x: this.game.x(unit.lastTile()),
|
|
y: this.game.y(unit.lastTile()),
|
|
};
|
|
const prev = {
|
|
x: this.game.x(trail[trail.length - 1]),
|
|
y: this.game.y(trail[trail.length - 1]),
|
|
};
|
|
const line = new BezenhamLine(prev, cur);
|
|
let point = line.increment();
|
|
while (point !== true) {
|
|
trail.push(this.game.ref(point.x, point.y));
|
|
point = line.increment();
|
|
}
|
|
} else {
|
|
trail.push(unit.lastTile());
|
|
}
|
|
|
|
this.trailDirty = true;
|
|
this.drawSprite(unit);
|
|
if (!unit.isActive()) {
|
|
this.clearTrail(unitId);
|
|
}
|
|
}
|
|
|
|
private handleMIRVWarhead(unit: UnitView) {
|
|
const rel = this.relationship(unit);
|
|
|
|
this.clearCell(this.game.x(unit.lastTile()), this.game.y(unit.lastTile()));
|
|
|
|
if (unit.isActive()) {
|
|
// Paint area
|
|
this.paintCell(
|
|
this.game.x(unit.tile()),
|
|
this.game.y(unit.tile()),
|
|
rel,
|
|
unit.owner().borderColor(),
|
|
255,
|
|
);
|
|
}
|
|
}
|
|
|
|
private handleTradeShipEvent(unit: UnitView) {
|
|
this.drawSprite(unit);
|
|
}
|
|
|
|
private handleTrainEvent(unit: UnitView) {
|
|
this.drawSprite(unit);
|
|
}
|
|
|
|
private handleBoatEvent(unit: UnitView) {
|
|
this.drawSprite(unit);
|
|
}
|
|
|
|
paintCell(
|
|
x: number,
|
|
y: number,
|
|
relationship: Relationship,
|
|
color: Colord,
|
|
alpha: number,
|
|
context: CanvasRenderingContext2D = this.context,
|
|
) {
|
|
this.clearCell(x, y, context);
|
|
if (this.alternateView) {
|
|
switch (relationship) {
|
|
case Relationship.Self:
|
|
context.fillStyle = this.theme.selfColor().toRgbString();
|
|
break;
|
|
case Relationship.Ally:
|
|
context.fillStyle = this.theme.allyColor().toRgbString();
|
|
break;
|
|
case Relationship.Enemy:
|
|
context.fillStyle = this.theme.enemyColor().toRgbString();
|
|
break;
|
|
}
|
|
} else {
|
|
context.fillStyle = color.alpha(alpha / 255).toRgbString();
|
|
}
|
|
context.fillRect(x, y, 1, 1);
|
|
}
|
|
|
|
clearCell(
|
|
x: number,
|
|
y: number,
|
|
context: CanvasRenderingContext2D = this.context,
|
|
) {
|
|
context.clearRect(x, y, 1, 1);
|
|
}
|
|
|
|
private drawSpriteAt(
|
|
unit: UnitView,
|
|
x: number,
|
|
y: number,
|
|
ctx: CanvasRenderingContext2D = this.context,
|
|
roundCoords: boolean = true,
|
|
customTerritoryColor?: Colord,
|
|
): MoverSpriteRect | null {
|
|
let alternateViewColor: Colord | null = null;
|
|
|
|
if (this.alternateView) {
|
|
const rel = this.relationshipForAlternateView(unit);
|
|
switch (rel) {
|
|
case Relationship.Self:
|
|
alternateViewColor = this.theme.selfColor();
|
|
break;
|
|
case Relationship.Ally:
|
|
alternateViewColor = this.theme.allyColor();
|
|
break;
|
|
case Relationship.Enemy:
|
|
alternateViewColor = this.theme.enemyColor();
|
|
break;
|
|
}
|
|
}
|
|
|
|
const sprite = getColoredSprite(
|
|
unit,
|
|
this.theme,
|
|
alternateViewColor ?? customTerritoryColor,
|
|
alternateViewColor ?? undefined,
|
|
);
|
|
|
|
if (!unit.isActive()) {
|
|
return null;
|
|
}
|
|
|
|
const targetable = unit.targetable();
|
|
ctx.save();
|
|
if (!targetable) {
|
|
ctx.globalAlpha = 0.5;
|
|
}
|
|
|
|
const drawX = x - sprite.width / 2;
|
|
const drawY = y - sprite.height / 2;
|
|
const outX = roundCoords ? Math.round(drawX) : drawX;
|
|
const outY = roundCoords ? Math.round(drawY) : drawY;
|
|
ctx.drawImage(sprite, outX, outY, sprite.width, sprite.width);
|
|
|
|
ctx.restore();
|
|
|
|
const pad = 1;
|
|
return {
|
|
x: outX - pad,
|
|
y: outY - pad,
|
|
w: sprite.width + pad * 2,
|
|
h: sprite.width + pad * 2,
|
|
};
|
|
}
|
|
|
|
private drawSprite(unit: UnitView, customTerritoryColor?: Colord) {
|
|
this.drawSpriteAt(
|
|
unit,
|
|
this.game.x(unit.tile()),
|
|
this.game.y(unit.tile()),
|
|
this.context,
|
|
true,
|
|
customTerritoryColor,
|
|
);
|
|
}
|
|
}
|