mirror of
https://github.com/openfrontio/OpenFrontIO.git
synced 2026-07-13 20:29:53 +00:00
scamiv
803 lines
24 KiB
TypeScript
803 lines
24 KiB
TypeScript
import { PriorityQueue } from "@datastructures-js/priority-queue";
|
|
import { Colord } from "colord";
|
|
import { Theme } from "../../../core/configuration/Config";
|
|
import { EventBus } from "../../../core/EventBus";
|
|
import {
|
|
Cell,
|
|
ColoredTeams,
|
|
PlayerType,
|
|
Team,
|
|
UnitType,
|
|
} from "../../../core/game/Game";
|
|
import { euclDistFN, TileRef } from "../../../core/game/GameMap";
|
|
import { GameUpdateType } from "../../../core/game/GameUpdates";
|
|
import { GameView, PlayerView } from "../../../core/game/GameView";
|
|
import { UserSettings } from "../../../core/game/UserSettings";
|
|
import { PseudoRandom } from "../../../core/PseudoRandom";
|
|
import {
|
|
AlternateViewEvent,
|
|
ContextMenuEvent,
|
|
DragEvent,
|
|
MouseOverEvent,
|
|
TerritoryWebGLStatusEvent,
|
|
ToggleTerritoryWebGLDebugBordersEvent,
|
|
ToggleTerritoryWebGLEvent,
|
|
} from "../../InputHandler";
|
|
import { FrameProfiler } from "../FrameProfiler";
|
|
import { resolveHoverTarget } from "../HoverTargetResolver";
|
|
import { TransformHandler } from "../TransformHandler";
|
|
import { BorderRenderer, NullBorderRenderer } from "./BorderRenderer";
|
|
import { Layer } from "./Layer";
|
|
import { WebGLBorderRenderer } from "./WebGLBorderRenderer";
|
|
|
|
export class TerritoryLayer implements Layer {
|
|
private userSettings: UserSettings;
|
|
private canvas: HTMLCanvasElement;
|
|
private context: CanvasRenderingContext2D;
|
|
private imageData: ImageData;
|
|
private alternativeImageData: ImageData;
|
|
private borderAnimTime = 0;
|
|
|
|
private cachedTerritoryPatternsEnabled: boolean | undefined;
|
|
|
|
private tileToRenderQueue: PriorityQueue<{
|
|
tile: TileRef;
|
|
lastUpdate: number;
|
|
}> = new PriorityQueue((a, b) => {
|
|
return a.lastUpdate - b.lastUpdate;
|
|
});
|
|
private random = new PseudoRandom(123);
|
|
private theme: Theme;
|
|
|
|
// Used for spawn highlighting
|
|
private highlightCanvas: HTMLCanvasElement;
|
|
private highlightContext: CanvasRenderingContext2D;
|
|
|
|
private highlightedTerritory: PlayerView | null = null;
|
|
private borderRenderer: BorderRenderer = new NullBorderRenderer();
|
|
|
|
private alternativeView = false;
|
|
private lastDragTime = 0;
|
|
private nodrawDragDuration = 200;
|
|
private lastMousePosition: { x: number; y: number } | null = null;
|
|
|
|
private refreshRate = 10; //refresh every 10ms
|
|
private lastRefresh = 0;
|
|
|
|
private lastFocusedPlayer: PlayerView | null = null;
|
|
private lastMyPlayerSmallId: number | null = null;
|
|
private useWebGL: boolean;
|
|
private webglSupported = true;
|
|
|
|
constructor(
|
|
private game: GameView,
|
|
private eventBus: EventBus,
|
|
private transformHandler: TransformHandler,
|
|
userSettings: UserSettings,
|
|
) {
|
|
this.userSettings = userSettings;
|
|
this.theme = game.config().theme();
|
|
this.cachedTerritoryPatternsEnabled = undefined;
|
|
this.lastMyPlayerSmallId = game.myPlayer()?.smallID() ?? null;
|
|
this.useWebGL = this.userSettings.territoryWebGL();
|
|
}
|
|
|
|
shouldTransform(): boolean {
|
|
return true;
|
|
}
|
|
|
|
async paintPlayerBorder(player: PlayerView) {
|
|
const tiles = await player.borderTiles();
|
|
tiles.borderTiles.forEach((tile: TileRef) => {
|
|
this.paintTerritory(tile, true); // Immediately paint the tile instead of enqueueing
|
|
});
|
|
}
|
|
|
|
tick() {
|
|
if (this.game.inSpawnPhase()) {
|
|
this.spawnHighlight();
|
|
}
|
|
|
|
this.game.recentlyUpdatedTiles().forEach((t) => this.enqueueTile(t));
|
|
const updates = this.game.updatesSinceLastTick();
|
|
const unitUpdates = updates !== null ? updates[GameUpdateType.Unit] : [];
|
|
unitUpdates.forEach((update) => {
|
|
if (update.unitType === UnitType.DefensePost) {
|
|
const tile = update.pos;
|
|
this.game
|
|
.bfs(tile, euclDistFN(tile, this.game.config().defensePostRange()))
|
|
.forEach((t) => {
|
|
if (
|
|
this.game.isBorder(t) &&
|
|
(this.game.ownerID(t) === update.ownerID ||
|
|
this.game.ownerID(t) === update.lastOwnerID)
|
|
) {
|
|
this.enqueueTile(t);
|
|
}
|
|
});
|
|
}
|
|
});
|
|
|
|
// Detect alliance mutations
|
|
const myPlayer = this.game.myPlayer();
|
|
if (myPlayer) {
|
|
updates?.[GameUpdateType.BrokeAlliance]?.forEach((update) => {
|
|
const territory = this.game.playerBySmallID(update.betrayedID);
|
|
if (territory && territory instanceof PlayerView) {
|
|
this.redrawBorder(territory);
|
|
}
|
|
});
|
|
|
|
updates?.[GameUpdateType.AllianceRequestReply]?.forEach((update) => {
|
|
if (
|
|
update.accepted &&
|
|
(update.request.requestorID === myPlayer.smallID() ||
|
|
update.request.recipientID === myPlayer.smallID())
|
|
) {
|
|
const territoryId =
|
|
update.request.requestorID === myPlayer.smallID()
|
|
? update.request.recipientID
|
|
: update.request.requestorID;
|
|
const territory = this.game.playerBySmallID(territoryId);
|
|
if (territory && territory instanceof PlayerView) {
|
|
this.redrawBorder(territory);
|
|
}
|
|
}
|
|
});
|
|
updates?.[GameUpdateType.EmbargoEvent]?.forEach((update) => {
|
|
const player = this.game.playerBySmallID(update.playerID) as PlayerView;
|
|
const embargoed = this.game.playerBySmallID(
|
|
update.embargoedID,
|
|
) as PlayerView;
|
|
|
|
if (
|
|
player.id() === myPlayer?.id() ||
|
|
embargoed.id() === myPlayer?.id()
|
|
) {
|
|
this.redrawBorder(player, embargoed);
|
|
}
|
|
});
|
|
}
|
|
|
|
const focusedPlayer = this.game.focusedPlayer();
|
|
if (focusedPlayer !== this.lastFocusedPlayer) {
|
|
if (!this.borderRenderer.drawsOwnBorders()) {
|
|
if (this.lastFocusedPlayer) {
|
|
this.paintPlayerBorder(this.lastFocusedPlayer);
|
|
}
|
|
if (focusedPlayer) {
|
|
this.paintPlayerBorder(focusedPlayer);
|
|
}
|
|
}
|
|
this.lastFocusedPlayer = focusedPlayer;
|
|
}
|
|
|
|
const currentMyPlayer = this.game.myPlayer()?.smallID() ?? null;
|
|
if (currentMyPlayer !== this.lastMyPlayerSmallId) {
|
|
this.redraw();
|
|
}
|
|
}
|
|
|
|
private spawnHighlight() {
|
|
if (this.game.ticks() % 5 === 0) {
|
|
return;
|
|
}
|
|
|
|
this.highlightContext.clearRect(
|
|
0,
|
|
0,
|
|
this.game.width(),
|
|
this.game.height(),
|
|
);
|
|
|
|
this.drawFocusedPlayerHighlight();
|
|
|
|
const humans = this.game
|
|
.playerViews()
|
|
.filter((p) => p.type() === PlayerType.Human);
|
|
|
|
const focusedPlayer = this.game.focusedPlayer();
|
|
const teamColors = Object.values(ColoredTeams);
|
|
for (const human of humans) {
|
|
if (human === focusedPlayer) {
|
|
continue;
|
|
}
|
|
const center = human.nameLocation();
|
|
if (!center) {
|
|
continue;
|
|
}
|
|
const centerTile = this.game.ref(center.x, center.y);
|
|
if (!centerTile) {
|
|
continue;
|
|
}
|
|
let color = this.theme.spawnHighlightColor();
|
|
const myPlayer = this.game.myPlayer();
|
|
if (myPlayer !== null && myPlayer !== human && myPlayer.team() === null) {
|
|
// In FFA games (when team === null), use default yellow spawn highlight color
|
|
color = this.theme.spawnHighlightColor();
|
|
} else if (myPlayer !== null && myPlayer !== human) {
|
|
// In Team games, the spawn highlight color becomes that player's team color
|
|
// Optionally, this could be broken down to teammate or enemy and simplified to green and red, respectively
|
|
const team = human.team();
|
|
if (team !== null && teamColors.includes(team)) {
|
|
color = this.theme.teamColor(team);
|
|
} else {
|
|
if (myPlayer.isFriendly(human)) {
|
|
color = this.theme.spawnHighlightTeamColor();
|
|
} else {
|
|
color = this.theme.spawnHighlightColor();
|
|
}
|
|
}
|
|
}
|
|
|
|
for (const tile of this.game.bfs(
|
|
centerTile,
|
|
euclDistFN(centerTile, 9, true),
|
|
)) {
|
|
if (!this.game.hasOwner(tile)) {
|
|
this.paintHighlightTile(tile, color, 255);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
private drawFocusedPlayerHighlight() {
|
|
const focusedPlayer = this.game.focusedPlayer();
|
|
|
|
if (!focusedPlayer) {
|
|
return;
|
|
}
|
|
const center = focusedPlayer.nameLocation();
|
|
if (!center) {
|
|
return;
|
|
}
|
|
// Breathing border animation
|
|
this.borderAnimTime += 0.5;
|
|
const minRad = 8;
|
|
const maxRad = 24;
|
|
// Range: [minPadding..maxPadding]
|
|
const radius =
|
|
minRad + (maxRad - minRad) * (0.5 + 0.5 * Math.sin(this.borderAnimTime));
|
|
|
|
const baseColor = this.theme.spawnHighlightSelfColor(); //white
|
|
let teamColor: Colord | null = null;
|
|
|
|
const team: Team | null = focusedPlayer.team();
|
|
if (team !== null && Object.values(ColoredTeams).includes(team)) {
|
|
teamColor = this.theme.teamColor(team).alpha(0.5);
|
|
} else {
|
|
teamColor = baseColor;
|
|
}
|
|
|
|
this.drawBreathingRing(
|
|
center.x,
|
|
center.y,
|
|
minRad,
|
|
maxRad,
|
|
radius,
|
|
baseColor, // Always draw white static semi-transparent ring
|
|
teamColor, // Pass the breathing ring color. White for FFA, Duos, Trios, Quads. Transparent team color for TEAM games.
|
|
);
|
|
}
|
|
|
|
init() {
|
|
this.eventBus.on(MouseOverEvent, (e) => this.onMouseOver(e));
|
|
this.eventBus.on(ContextMenuEvent, (e) => this.onMouseOver(e));
|
|
this.eventBus.on(AlternateViewEvent, (e) => {
|
|
this.alternativeView = e.alternateView;
|
|
this.borderRenderer.setAlternativeView(this.alternativeView);
|
|
if (this.borderRenderer instanceof WebGLBorderRenderer) {
|
|
this.borderRenderer.setHoverHighlightOptions(
|
|
this.hoverHighlightOptions(),
|
|
);
|
|
}
|
|
});
|
|
this.eventBus.on(ToggleTerritoryWebGLEvent, () => {
|
|
this.userSettings.toggleTerritoryWebGL();
|
|
this.useWebGL = this.userSettings.territoryWebGL();
|
|
this.redraw();
|
|
});
|
|
this.eventBus.on(ToggleTerritoryWebGLDebugBordersEvent, (e) => {
|
|
if (this.borderRenderer instanceof WebGLBorderRenderer) {
|
|
this.borderRenderer.setDebugPulseEnabled(e.enabled);
|
|
}
|
|
});
|
|
this.eventBus.on(DragEvent, (e) => {
|
|
// TODO: consider re-enabling this on mobile or low end devices for smoother dragging.
|
|
// this.lastDragTime = Date.now();
|
|
});
|
|
this.redraw();
|
|
}
|
|
|
|
onMouseOver(event: MouseOverEvent) {
|
|
this.lastMousePosition = { x: event.x, y: event.y };
|
|
this.updateHighlightedTerritory();
|
|
}
|
|
|
|
private updateHighlightedTerritory() {
|
|
const supportsHover =
|
|
this.alternativeView || this.borderRenderer.drawsOwnBorders();
|
|
if (!supportsHover) {
|
|
return;
|
|
}
|
|
|
|
if (!this.lastMousePosition) {
|
|
return;
|
|
}
|
|
|
|
const cell = this.transformHandler.screenToWorldCoordinates(
|
|
this.lastMousePosition.x,
|
|
this.lastMousePosition.y,
|
|
);
|
|
if (!this.game.isValidCoord(cell.x, cell.y)) {
|
|
return;
|
|
}
|
|
|
|
const previousTerritory = this.highlightedTerritory;
|
|
const territory = resolveHoverTarget(this.game, cell).player;
|
|
|
|
if (territory) {
|
|
this.highlightedTerritory = territory;
|
|
} else {
|
|
this.highlightedTerritory = null;
|
|
}
|
|
|
|
if (previousTerritory?.id() !== this.highlightedTerritory?.id()) {
|
|
if (this.borderRenderer.drawsOwnBorders()) {
|
|
this.borderRenderer.setHoveredPlayerId(
|
|
this.highlightedTerritory?.smallID() ?? null,
|
|
);
|
|
} else {
|
|
const territories: PlayerView[] = [];
|
|
if (previousTerritory) {
|
|
territories.push(previousTerritory);
|
|
}
|
|
if (this.highlightedTerritory) {
|
|
territories.push(this.highlightedTerritory);
|
|
}
|
|
this.redrawBorder(...territories);
|
|
}
|
|
}
|
|
}
|
|
|
|
redraw() {
|
|
console.log("redrew territory layer");
|
|
this.lastMyPlayerSmallId = this.game.myPlayer()?.smallID() ?? null;
|
|
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.canvas.width = this.game.width();
|
|
this.canvas.height = this.game.height();
|
|
|
|
this.imageData = this.context.getImageData(
|
|
0,
|
|
0,
|
|
this.canvas.width,
|
|
this.canvas.height,
|
|
);
|
|
this.alternativeImageData = this.context.getImageData(
|
|
0,
|
|
0,
|
|
this.canvas.width,
|
|
this.canvas.height,
|
|
);
|
|
this.initImageData();
|
|
|
|
this.context.putImageData(
|
|
this.alternativeView ? this.alternativeImageData : this.imageData,
|
|
0,
|
|
0,
|
|
);
|
|
|
|
this.configureBorderRenderer();
|
|
|
|
// Add a second canvas for highlights
|
|
this.highlightCanvas = document.createElement("canvas");
|
|
const highlightContext = this.highlightCanvas.getContext("2d", {
|
|
alpha: true,
|
|
});
|
|
if (highlightContext === null) throw new Error("2d context not supported");
|
|
this.highlightContext = highlightContext;
|
|
this.highlightCanvas.width = this.game.width();
|
|
this.highlightCanvas.height = this.game.height();
|
|
|
|
this.game.forEachTile((t) => {
|
|
this.paintTerritory(t);
|
|
});
|
|
}
|
|
|
|
private configureBorderRenderer() {
|
|
if (!this.useWebGL) {
|
|
this.borderRenderer = new NullBorderRenderer();
|
|
this.webglSupported = true;
|
|
this.emitWebGLStatus(
|
|
false,
|
|
false,
|
|
this.webglSupported,
|
|
"WebGL territory layer hidden.",
|
|
);
|
|
return;
|
|
}
|
|
|
|
const renderer = new WebGLBorderRenderer(this.game, this.theme);
|
|
this.webglSupported = renderer.isSupported();
|
|
if (renderer.isActive()) {
|
|
this.borderRenderer = renderer;
|
|
this.borderRenderer.setAlternativeView(this.alternativeView);
|
|
this.borderRenderer.setHoveredPlayerId(
|
|
this.highlightedTerritory?.smallID() ?? null,
|
|
);
|
|
renderer.setHoverHighlightOptions(this.hoverHighlightOptions());
|
|
this.emitWebGLStatus(true, true, this.webglSupported);
|
|
} else {
|
|
this.borderRenderer = new NullBorderRenderer();
|
|
this.emitWebGLStatus(
|
|
true,
|
|
false,
|
|
this.webglSupported,
|
|
"WebGL not available. Using canvas fallback for borders.",
|
|
);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Central configuration for WebGL border hover styling.
|
|
* Keeps main view and alternate view behavior explicit and tweakable.
|
|
*/
|
|
private hoverHighlightOptions() {
|
|
const baseColor = this.theme.spawnHighlightSelfColor();
|
|
|
|
if (this.alternativeView) {
|
|
// Alternate view: borders are the primary visual, so make hover stronger
|
|
return {
|
|
color: baseColor,
|
|
strength: 0.8,
|
|
pulseStrength: 0.45,
|
|
pulseSpeed: Math.PI * 2,
|
|
};
|
|
}
|
|
|
|
// Main view: keep highlight noticeable but a bit subtler
|
|
return {
|
|
color: baseColor,
|
|
strength: 0.6,
|
|
pulseStrength: 0.35,
|
|
pulseSpeed: Math.PI * 2,
|
|
};
|
|
}
|
|
|
|
private emitWebGLStatus(
|
|
enabled: boolean,
|
|
active: boolean,
|
|
supported: boolean,
|
|
message?: string,
|
|
) {
|
|
this.eventBus.emit(
|
|
new TerritoryWebGLStatusEvent(enabled, active, supported, message),
|
|
);
|
|
}
|
|
|
|
redrawBorder(...players: PlayerView[]) {
|
|
return Promise.all(
|
|
players.map(async (player) => {
|
|
const tiles = await player.borderTiles();
|
|
tiles.borderTiles.forEach((tile: TileRef) => {
|
|
this.paintTerritory(tile, true);
|
|
});
|
|
}),
|
|
);
|
|
}
|
|
|
|
initImageData() {
|
|
this.game.forEachTile((tile) => {
|
|
const cell = new Cell(this.game.x(tile), this.game.y(tile));
|
|
const index = cell.y * this.game.width() + cell.x;
|
|
const offset = index * 4;
|
|
this.imageData.data[offset + 3] = 0;
|
|
this.alternativeImageData.data[offset + 3] = 0;
|
|
});
|
|
}
|
|
|
|
renderLayer(context: CanvasRenderingContext2D) {
|
|
const now = Date.now();
|
|
const skipTerritoryCanvas =
|
|
this.alternativeView && this.borderRenderer.drawsOwnBorders();
|
|
|
|
if (
|
|
now > this.lastDragTime + this.nodrawDragDuration &&
|
|
now > this.lastRefresh + this.refreshRate
|
|
) {
|
|
this.lastRefresh = now;
|
|
const renderTerritoryStart = FrameProfiler.start();
|
|
this.renderTerritory();
|
|
FrameProfiler.end("TerritoryLayer:renderTerritory", renderTerritoryStart);
|
|
|
|
const [topLeft, bottomRight] = this.transformHandler.screenBoundingRect();
|
|
const vx0 = Math.max(0, topLeft.x);
|
|
const vy0 = Math.max(0, topLeft.y);
|
|
const vx1 = Math.min(this.game.width() - 1, bottomRight.x);
|
|
const vy1 = Math.min(this.game.height() - 1, bottomRight.y);
|
|
|
|
const w = vx1 - vx0 + 1;
|
|
const h = vy1 - vy0 + 1;
|
|
|
|
// When WebGL borders are active and we're in alternative view, the 2D
|
|
// territory buffer (alternativeImageData) is effectively transparent and
|
|
// all visible work is done by the WebGL layer. Skip putImageData in that
|
|
// case to avoid unnecessary CPU work each frame.
|
|
const shouldBlitTerritories = !skipTerritoryCanvas;
|
|
|
|
if (w > 0 && h > 0 && shouldBlitTerritories) {
|
|
const putImageStart = FrameProfiler.start();
|
|
this.context.putImageData(
|
|
this.alternativeView ? this.alternativeImageData : this.imageData,
|
|
0,
|
|
0,
|
|
vx0,
|
|
vy0,
|
|
w,
|
|
h,
|
|
);
|
|
FrameProfiler.end("TerritoryLayer:putImageData", putImageStart);
|
|
}
|
|
}
|
|
|
|
if (!skipTerritoryCanvas) {
|
|
const drawCanvasStart = FrameProfiler.start();
|
|
context.drawImage(
|
|
this.canvas,
|
|
-this.game.width() / 2,
|
|
-this.game.height() / 2,
|
|
this.game.width(),
|
|
this.game.height(),
|
|
);
|
|
FrameProfiler.end("TerritoryLayer:drawCanvas", drawCanvasStart);
|
|
}
|
|
|
|
const borderRenderStart = FrameProfiler.start();
|
|
this.borderRenderer.render(context);
|
|
FrameProfiler.end(
|
|
"TerritoryLayer:borderRenderer.render",
|
|
borderRenderStart,
|
|
);
|
|
if (this.game.inSpawnPhase()) {
|
|
const highlightDrawStart = FrameProfiler.start();
|
|
context.drawImage(
|
|
this.highlightCanvas,
|
|
-this.game.width() / 2,
|
|
-this.game.height() / 2,
|
|
this.game.width(),
|
|
this.game.height(),
|
|
);
|
|
FrameProfiler.end(
|
|
"TerritoryLayer:drawHighlightCanvas",
|
|
highlightDrawStart,
|
|
);
|
|
}
|
|
}
|
|
|
|
renderTerritory() {
|
|
let numToRender = Math.floor(this.tileToRenderQueue.size() / 10);
|
|
if (numToRender === 0 || this.game.inSpawnPhase()) {
|
|
numToRender = this.tileToRenderQueue.size();
|
|
}
|
|
|
|
while (numToRender > 0) {
|
|
numToRender--;
|
|
|
|
const entry = this.tileToRenderQueue.pop();
|
|
if (!entry) {
|
|
break;
|
|
}
|
|
|
|
const tile = entry.tile;
|
|
this.paintTerritory(tile);
|
|
for (const neighbor of this.game.neighbors(tile)) {
|
|
this.paintTerritory(neighbor, true); //this is a misuse of the _Border parameter, making it a maybe stale border
|
|
}
|
|
}
|
|
}
|
|
|
|
paintTerritory(tile: TileRef, _maybeStaleBorder: boolean = false) {
|
|
const cpuStart = FrameProfiler.start();
|
|
const hasOwner = this.game.hasOwner(tile);
|
|
const owner = hasOwner ? (this.game.owner(tile) as PlayerView) : null;
|
|
const isBorderTile = this.game.isBorder(tile);
|
|
const hasFallout = this.game.hasFallout(tile);
|
|
let isDefended = false;
|
|
const rendererHandlesBorders = this.borderRenderer.drawsOwnBorders();
|
|
|
|
if (!owner) {
|
|
if (hasFallout) {
|
|
this.paintTile(this.imageData, tile, this.theme.falloutColor(), 150);
|
|
this.paintTile(
|
|
this.alternativeImageData,
|
|
tile,
|
|
this.theme.falloutColor(),
|
|
150,
|
|
);
|
|
} else {
|
|
this.clearTile(tile);
|
|
}
|
|
} else {
|
|
const myPlayer = this.game.myPlayer();
|
|
|
|
if (isBorderTile) {
|
|
isDefended = this.game.hasUnitNearby(
|
|
tile,
|
|
this.game.config().defensePostRange(),
|
|
UnitType.DefensePost,
|
|
owner.id(),
|
|
);
|
|
|
|
if (rendererHandlesBorders) {
|
|
this.paintTile(this.imageData, tile, owner.territoryColor(tile), 150);
|
|
} else {
|
|
if (myPlayer) {
|
|
const alternativeColor = this.alternateViewColor(owner);
|
|
this.paintTile(
|
|
this.alternativeImageData,
|
|
tile,
|
|
alternativeColor,
|
|
255,
|
|
);
|
|
}
|
|
this.paintTile(
|
|
this.imageData,
|
|
tile,
|
|
owner.borderColor(tile, isDefended),
|
|
255,
|
|
);
|
|
}
|
|
} else {
|
|
if (!rendererHandlesBorders) {
|
|
// Alternative view only shows borders.
|
|
this.clearAlternativeTile(tile);
|
|
}
|
|
|
|
this.paintTile(this.imageData, tile, owner.territoryColor(tile), 150);
|
|
}
|
|
}
|
|
FrameProfiler.end("TerritoryLayer:paintTerritory.cpu", cpuStart);
|
|
|
|
if (rendererHandlesBorders) {
|
|
if (_maybeStaleBorder && !isBorderTile) {
|
|
this.borderRenderer.clearTile(tile);
|
|
} else {
|
|
const borderUpdateStart = FrameProfiler.start();
|
|
this.borderRenderer.updateBorder(
|
|
tile,
|
|
owner,
|
|
isBorderTile,
|
|
isDefended,
|
|
hasFallout,
|
|
);
|
|
FrameProfiler.end(
|
|
"TerritoryLayer:borderRenderer.updateBorder",
|
|
borderUpdateStart,
|
|
);
|
|
}
|
|
}
|
|
}
|
|
|
|
alternateViewColor(other: PlayerView): Colord {
|
|
const myPlayer = this.game.myPlayer();
|
|
if (!myPlayer) {
|
|
return this.theme.neutralColor();
|
|
}
|
|
if (other.smallID() === myPlayer.smallID()) {
|
|
return this.theme.selfColor();
|
|
}
|
|
if (other.isFriendly(myPlayer)) {
|
|
return this.theme.allyColor();
|
|
}
|
|
if (!other.hasEmbargo(myPlayer)) {
|
|
return this.theme.neutralColor();
|
|
}
|
|
return this.theme.enemyColor();
|
|
}
|
|
|
|
paintAlternateViewTile(tile: TileRef, other: PlayerView) {
|
|
const color = this.alternateViewColor(other);
|
|
this.paintTile(this.alternativeImageData, tile, color, 255);
|
|
}
|
|
|
|
paintTile(imageData: ImageData, tile: TileRef, color: Colord, alpha: number) {
|
|
const offset = tile * 4;
|
|
imageData.data[offset] = color.rgba.r;
|
|
imageData.data[offset + 1] = color.rgba.g;
|
|
imageData.data[offset + 2] = color.rgba.b;
|
|
imageData.data[offset + 3] = alpha;
|
|
}
|
|
|
|
clearTile(tile: TileRef) {
|
|
this.borderRenderer.clearTile(tile);
|
|
const offset = tile * 4;
|
|
this.imageData.data[offset + 3] = 0; // Set alpha to 0 (fully transparent)
|
|
this.alternativeImageData.data[offset + 3] = 0; // Set alpha to 0 (fully transparent)
|
|
}
|
|
|
|
clearAlternativeTile(tile: TileRef) {
|
|
const offset = tile * 4;
|
|
this.alternativeImageData.data[offset + 3] = 0; // Set alpha to 0 (fully transparent)
|
|
}
|
|
|
|
enqueueTile(tile: TileRef) {
|
|
this.tileToRenderQueue.push({
|
|
tile: tile,
|
|
lastUpdate: this.game.ticks() + this.random.nextFloat(0, 0.5),
|
|
});
|
|
}
|
|
|
|
async enqueuePlayerBorder(player: PlayerView) {
|
|
const playerBorderTiles = await player.borderTiles();
|
|
playerBorderTiles.borderTiles.forEach((tile: TileRef) => {
|
|
this.enqueueTile(tile);
|
|
});
|
|
}
|
|
|
|
paintHighlightTile(tile: TileRef, color: Colord, alpha: number) {
|
|
this.clearTile(tile);
|
|
const x = this.game.x(tile);
|
|
const y = this.game.y(tile);
|
|
this.highlightContext.fillStyle = color.alpha(alpha / 255).toRgbString();
|
|
this.highlightContext.fillRect(x, y, 1, 1);
|
|
}
|
|
|
|
clearHighlightTile(tile: TileRef) {
|
|
const x = this.game.x(tile);
|
|
const y = this.game.y(tile);
|
|
this.highlightContext.clearRect(x, y, 1, 1);
|
|
}
|
|
|
|
private drawBreathingRing(
|
|
cx: number,
|
|
cy: number,
|
|
minRad: number,
|
|
maxRad: number,
|
|
radius: number,
|
|
transparentColor: Colord,
|
|
breathingColor: Colord,
|
|
) {
|
|
const ctx = this.highlightContext;
|
|
if (!ctx) return;
|
|
|
|
// Draw a semi-transparent ring around the starting location
|
|
ctx.beginPath();
|
|
// Transparency matches the highlight color provided
|
|
const transparent = transparentColor.alpha(0);
|
|
const radGrad = ctx.createRadialGradient(cx, cy, minRad, cx, cy, maxRad);
|
|
|
|
// Pixels with radius < minRad are transparent
|
|
radGrad.addColorStop(0, transparent.toRgbString());
|
|
// The ring then starts with solid highlight color
|
|
radGrad.addColorStop(0.01, transparentColor.toRgbString());
|
|
radGrad.addColorStop(0.1, transparentColor.toRgbString());
|
|
// The outer edge of the ring is transparent
|
|
radGrad.addColorStop(1, transparent.toRgbString());
|
|
|
|
// Draw an arc at the max radius and fill with the created radial gradient
|
|
ctx.arc(cx, cy, maxRad, 0, Math.PI * 2);
|
|
ctx.fillStyle = radGrad;
|
|
ctx.closePath();
|
|
ctx.fill();
|
|
|
|
const breatheInner = breathingColor.alpha(0);
|
|
// Draw a solid ring around the starting location with outer radius = the breathing radius
|
|
ctx.beginPath();
|
|
const radGrad2 = ctx.createRadialGradient(cx, cy, minRad, cx, cy, radius);
|
|
// Pixels with radius < minRad are transparent
|
|
radGrad2.addColorStop(0, breatheInner.toRgbString());
|
|
// The ring then starts with solid highlight color
|
|
radGrad2.addColorStop(0.01, breathingColor.toRgbString());
|
|
// The ring is solid throughout
|
|
radGrad2.addColorStop(1, breathingColor.toRgbString());
|
|
|
|
// Draw an arc at the current breathing radius and fill with the created "gradient"
|
|
ctx.arc(cx, cy, radius, 0, Math.PI * 2);
|
|
ctx.fillStyle = radGrad2;
|
|
ctx.fill();
|
|
}
|
|
}
|