Added node based web map renderer
This commit is contained in:
Marco
parent
82ae89865a
commit
24a4d90a3e
19 changed files with 3970 additions and 0 deletions
8
map_renderer/.dockerignore
Normal file
8
map_renderer/.dockerignore
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
node_modules/
|
||||
.cache/
|
||||
coverage/
|
||||
dist/
|
||||
.env
|
||||
.env.*
|
||||
STATIC/
|
||||
STATIC_REGRET/
|
||||
12
map_renderer/.gitignore
vendored
Normal file
12
map_renderer/.gitignore
vendored
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
node_modules/
|
||||
.cache/
|
||||
coverage/
|
||||
dist/
|
||||
.env
|
||||
.env.*
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
STATIC/
|
||||
STATIC_REGRET/
|
||||
13
map_renderer/Dockerfile
Normal file
13
map_renderer/Dockerfile
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
FROM node:20-alpine
|
||||
|
||||
WORKDIR /app
|
||||
|
||||
COPY package.json package-lock.json* ./
|
||||
RUN npm ci --omit=dev --no-audit --no-fund
|
||||
|
||||
COPY src ./src
|
||||
|
||||
ENV PORT=3000
|
||||
EXPOSE 3000
|
||||
|
||||
CMD ["npm", "start"]
|
||||
67
map_renderer/README.md
Normal file
67
map_renderer/README.md
Normal file
|
|
@ -0,0 +1,67 @@
|
|||
# Crusader Map Renderer
|
||||
|
||||
Node web app that renders Crusader maps on the server and streams only finished PNG tiles to the browser.
|
||||
|
||||
## Goals
|
||||
|
||||
- Keep Crusader source assets server-side.
|
||||
- Detect maps from `STATIC` and `STATIC_REGRET` automatically.
|
||||
- Build map render state on demand after the user selects a map.
|
||||
- Serve large maps as draggable and zoomable image tiles.
|
||||
- Run locally with Node or inside Docker.
|
||||
|
||||
## Local Run
|
||||
|
||||
```powershell
|
||||
cd map_renderer
|
||||
npm install
|
||||
npm start
|
||||
```
|
||||
|
||||
Open `http://localhost:3000`.
|
||||
|
||||
Viewer behavior:
|
||||
|
||||
- drag with the mouse or one finger to pan
|
||||
- use the scroll wheel to zoom directly at the pointer
|
||||
- pinch to zoom on touch devices
|
||||
- toggle roofs and editor-only elements independently before building
|
||||
|
||||
The app expects asset folders under the app root:
|
||||
|
||||
- `map_renderer/STATIC`
|
||||
- `map_renderer/STATIC_REGRET`
|
||||
|
||||
## Docker Run
|
||||
|
||||
The Docker image excludes the Crusader assets on purpose. Mount them at runtime so they stay outside the image and are never served directly to clients.
|
||||
|
||||
```powershell
|
||||
cd map_renderer
|
||||
docker build -t crusader-map-renderer .
|
||||
docker run --rm -p 3000:3000 `
|
||||
-v ${PWD}/STATIC:/app/STATIC:ro `
|
||||
-v ${PWD}/STATIC_REGRET:/app/STATIC_REGRET:ro `
|
||||
crusader-map-renderer
|
||||
```
|
||||
|
||||
If only one game is available, mount only that folder.
|
||||
|
||||
## Docker Compose
|
||||
|
||||
The compose file mounts `STATIC` and `STATIC_REGRET` from the host filesystem into the container as read-only volumes. They are excluded from the image build by `.dockerignore`, so the assets are never copied into the image.
|
||||
|
||||
```powershell
|
||||
cd map_renderer
|
||||
docker compose up --build
|
||||
```
|
||||
|
||||
## HTTP Surface
|
||||
|
||||
- `GET /api/maps` returns the detected catalog.
|
||||
- `POST /api/builds` starts or reuses a build.
|
||||
- `GET /api/builds/:id` returns build status.
|
||||
- `GET /api/maps/:game/:mapId/metadata?buildId=...` returns map bounds and tile settings.
|
||||
- `GET /api/maps/:game/:mapId/tiles/:tileX/:tileY.png?buildId=...` returns rendered PNG tiles.
|
||||
|
||||
No raw Crusader asset files are exposed over HTTP.
|
||||
13
map_renderer/compose.yaml
Normal file
13
map_renderer/compose.yaml
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
services:
|
||||
map-renderer:
|
||||
build:
|
||||
context: .
|
||||
ports:
|
||||
- "3000:3000"
|
||||
environment:
|
||||
PORT: "3000"
|
||||
REMORSE_STATIC_DIR: /app/STATIC
|
||||
REGRET_STATIC_DIR: /app/STATIC_REGRET
|
||||
volumes:
|
||||
- ./STATIC:/app/STATIC:ro
|
||||
- ./STATIC_REGRET:/app/STATIC_REGRET:ro
|
||||
1387
map_renderer/package-lock.json
generated
Normal file
1387
map_renderer/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load diff
19
map_renderer/package.json
Normal file
19
map_renderer/package.json
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
{
|
||||
"name": "crusader-map-renderer",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"description": "Server-side tiled Crusader map renderer for browser viewing.",
|
||||
"scripts": {
|
||||
"start": "node src/server.js",
|
||||
"dev": "node --watch src/server.js"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=20"
|
||||
},
|
||||
"dependencies": {
|
||||
"express": "^5.1.0",
|
||||
"pngjs": "^7.0.0",
|
||||
"sharp": "^0.34.2"
|
||||
}
|
||||
}
|
||||
24
map_renderer/src/config.js
Normal file
24
map_renderer/src/config.js
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
import path from "node:path";
|
||||
import { fileURLToPath } from "node:url";
|
||||
|
||||
const __filename = fileURLToPath(import.meta.url);
|
||||
const __dirname = path.dirname(__filename);
|
||||
|
||||
export const APP_ROOT = path.resolve(__dirname, "..");
|
||||
export const PUBLIC_ROOT = path.join(APP_ROOT, "src", "public");
|
||||
export const TILE_SIZE = Number.parseInt(process.env.TILE_SIZE ?? "1024", 10);
|
||||
export const PORT = Number.parseInt(process.env.PORT ?? "3000", 10);
|
||||
export const CACHE_ROOT = path.join(APP_ROOT, ".cache");
|
||||
export const TILE_CACHE_ROOT = path.join(CACHE_ROOT, "tiles");
|
||||
export const GAMES = [
|
||||
{
|
||||
id: "remorse",
|
||||
label: "No Remorse",
|
||||
staticDir: process.env.REMORSE_STATIC_DIR || path.join(APP_ROOT, "STATIC")
|
||||
},
|
||||
{
|
||||
id: "regret",
|
||||
label: "No Regret",
|
||||
staticDir: process.env.REGRET_STATIC_DIR || path.join(APP_ROOT, "STATIC_REGRET")
|
||||
}
|
||||
];
|
||||
15
map_renderer/src/lib/binary.js
Normal file
15
map_renderer/src/lib/binary.js
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
export function readU16LE(buffer, offset) {
|
||||
return buffer.readUInt16LE(offset);
|
||||
}
|
||||
|
||||
export function readU24LE(buffer, offset) {
|
||||
return buffer[offset] | (buffer[offset + 1] << 8) | (buffer[offset + 2] << 16);
|
||||
}
|
||||
|
||||
export function readU32LE(buffer, offset) {
|
||||
return buffer.readUInt32LE(offset);
|
||||
}
|
||||
|
||||
export function readI32LE(buffer, offset) {
|
||||
return buffer.readInt32LE(offset);
|
||||
}
|
||||
451
map_renderer/src/lib/build-manager.js
Normal file
451
map_renderer/src/lib/build-manager.js
Normal file
|
|
@ -0,0 +1,451 @@
|
|||
import crypto from "node:crypto";
|
||||
import fs from "node:fs";
|
||||
import path from "node:path";
|
||||
import sharp from "sharp";
|
||||
|
||||
import { TILE_CACHE_ROOT, TILE_SIZE } from "../config.js";
|
||||
import {
|
||||
FLAG_FLIPPED,
|
||||
ShapeArchive,
|
||||
collectRenderItems,
|
||||
loadGlobs,
|
||||
loadMapItems,
|
||||
loadPalette,
|
||||
loadTypeflags,
|
||||
resolveStaticFile,
|
||||
summarizeRenderClasses
|
||||
} from "./formats.js";
|
||||
import { blitFrame, encodePng, rgbaBuffer } from "./png.js";
|
||||
import { prepareSortedItems } from "./sorting.js";
|
||||
|
||||
function nowIso() {
|
||||
return new Date().toISOString();
|
||||
}
|
||||
|
||||
function ensureDir(dirPath) {
|
||||
fs.mkdirSync(dirPath, { recursive: true });
|
||||
}
|
||||
|
||||
const DOWNLOAD_CACHE_ROOT = path.join(TILE_CACHE_ROOT, "downloads");
|
||||
sharp.cache(false);
|
||||
|
||||
function normalizeBuildOptions(options = {}) {
|
||||
return {
|
||||
includeEditor: options.includeEditor !== false,
|
||||
includeRoofs: options.includeRoofs === true
|
||||
};
|
||||
}
|
||||
|
||||
function buildOptionSuffix(options) {
|
||||
return `editor-${options.includeEditor ? "on" : "off"}_roofs-${options.includeRoofs ? "on" : "off"}`;
|
||||
}
|
||||
|
||||
function makeUsageInfo(gameId, mapId, baseItems, renderItems) {
|
||||
const itemMapNums = [...new Set(baseItems.map((item) => item.mapNum))].sort((left, right) => left - right);
|
||||
return {
|
||||
status: "unknown",
|
||||
confidence: "unknown",
|
||||
knownHints: [],
|
||||
itemMapNums,
|
||||
nonzeroItemMapNums: itemMapNums.filter((value) => value !== 0),
|
||||
npcLinkedItemCount: baseItems.filter((item) => item.npcNum !== 0).length,
|
||||
note: "No authoritative mission-to-map ownership table has been extracted yet. Unknown does not imply orphaned.",
|
||||
hasRenderableContent: renderItems.length > 0,
|
||||
game: gameId,
|
||||
map: mapId
|
||||
};
|
||||
}
|
||||
|
||||
function buildEmptyMetadata(gameConfig, mapId, baseItems, reason) {
|
||||
return {
|
||||
game: gameConfig.id,
|
||||
gameLabel: gameConfig.label,
|
||||
map: mapId,
|
||||
rawItemCount: baseItems.length,
|
||||
itemCount: 0,
|
||||
paintedItemCount: 0,
|
||||
occludedItemCount: 0,
|
||||
invalidItemCount: 0,
|
||||
invalidItems: [],
|
||||
usage: makeUsageInfo(gameConfig.id, mapId, baseItems, []),
|
||||
baseItemSummary: {
|
||||
roofItems: 0,
|
||||
editorItems: 0,
|
||||
eggFamilyItems: 0,
|
||||
invisibleFlaggedItems: 0,
|
||||
npcLinkedItems: 0
|
||||
},
|
||||
sorter: "scummvm_dependency_graph",
|
||||
isEmpty: true,
|
||||
emptyReason: reason,
|
||||
filters: {
|
||||
includeEditor: true,
|
||||
includeRoofs: false
|
||||
},
|
||||
bounds: {
|
||||
screenLeft: 0,
|
||||
screenTop: 0,
|
||||
screenRight: TILE_SIZE,
|
||||
screenBottom: TILE_SIZE,
|
||||
width: TILE_SIZE,
|
||||
height: TILE_SIZE
|
||||
},
|
||||
tileSize: TILE_SIZE,
|
||||
tileCountX: 1,
|
||||
tileCountY: 1,
|
||||
zoom: {
|
||||
min: 0.01,
|
||||
max: 8,
|
||||
step: 0.1,
|
||||
initial: 1
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
export class BuildManager {
|
||||
constructor(catalog) {
|
||||
this.catalog = catalog;
|
||||
this.assetCache = new Map();
|
||||
this.jobs = new Map();
|
||||
this.jobsByKey = new Map();
|
||||
this.tileCache = new Map();
|
||||
ensureDir(TILE_CACHE_ROOT);
|
||||
}
|
||||
|
||||
listCatalog() {
|
||||
return this.catalog;
|
||||
}
|
||||
|
||||
getJob(jobId) {
|
||||
return this.jobs.get(jobId) ?? null;
|
||||
}
|
||||
|
||||
async createOrReuseBuild(gameConfig, mapId, rawOptions = {}) {
|
||||
const options = normalizeBuildOptions(rawOptions);
|
||||
const key = `${gameConfig.id}:${mapId}:${buildOptionSuffix(options)}`;
|
||||
const existing = this.jobsByKey.get(key);
|
||||
if (existing) {
|
||||
if (existing.status === "ready" || existing.status === "building") {
|
||||
return existing;
|
||||
}
|
||||
this.jobsByKey.delete(key);
|
||||
}
|
||||
|
||||
const job = {
|
||||
id: crypto.randomUUID(),
|
||||
key,
|
||||
game: gameConfig.id,
|
||||
mapId,
|
||||
options,
|
||||
status: "queued",
|
||||
phase: "queued",
|
||||
createdAt: nowIso(),
|
||||
updatedAt: nowIso(),
|
||||
progress: [],
|
||||
error: null,
|
||||
metadata: null,
|
||||
build: null
|
||||
};
|
||||
this.jobs.set(job.id, job);
|
||||
this.jobsByKey.set(key, job);
|
||||
void this.runBuild(job, gameConfig);
|
||||
return job;
|
||||
}
|
||||
|
||||
async runBuild(job, gameConfig) {
|
||||
try {
|
||||
job.status = "building";
|
||||
job.phase = "loading-assets";
|
||||
this.touchJob(job, `Loading ${gameConfig.label} assets`);
|
||||
const assets = this.getAssets(gameConfig);
|
||||
|
||||
job.phase = "loading-map";
|
||||
this.touchJob(job, `Loading map ${job.mapId}`);
|
||||
const fixedDatPath = resolveStaticFile(gameConfig.staticDir, "FIXED.DAT");
|
||||
const baseItems = loadMapItems(fixedDatPath, job.mapId);
|
||||
this.touchJob(job, `Loaded ${baseItems.length} fixed records`);
|
||||
|
||||
job.phase = "collecting-items";
|
||||
const renderItems = collectRenderItems(baseItems, assets.shapeInfos, assets.globs, {
|
||||
includeEditor: job.options.includeEditor,
|
||||
expandGlobs: true,
|
||||
worldRect: null,
|
||||
includeRoofs: job.options.includeRoofs,
|
||||
includeHiddenMarkers: true,
|
||||
checkpointEvery: 2000,
|
||||
progress: (message) => this.touchJob(job, message)
|
||||
});
|
||||
if (!renderItems.length) {
|
||||
job.build = {
|
||||
assets,
|
||||
prepared: [],
|
||||
minLeft: 0,
|
||||
minTop: 0,
|
||||
width: TILE_SIZE,
|
||||
height: TILE_SIZE
|
||||
};
|
||||
job.metadata = buildEmptyMetadata(gameConfig, job.mapId, baseItems, "This map has no renderable items in FIXED.DAT.");
|
||||
job.metadata.filters = {
|
||||
includeEditor: job.options.includeEditor,
|
||||
includeRoofs: job.options.includeRoofs
|
||||
};
|
||||
job.status = "ready";
|
||||
job.phase = "ready";
|
||||
this.touchJob(job, "Build ready: map is empty, serving a blank placeholder tile");
|
||||
return;
|
||||
}
|
||||
|
||||
job.phase = "sorting";
|
||||
const sorted = prepareSortedItems(renderItems, assets.shapeArchive, assets.shapeInfos, {
|
||||
checkpointEvery: 2000,
|
||||
maxInvalidDetails: 20,
|
||||
progress: (message) => this.touchJob(job, message)
|
||||
});
|
||||
if (!sorted.prepared.length) {
|
||||
job.build = {
|
||||
assets,
|
||||
prepared: [],
|
||||
minLeft: 0,
|
||||
minTop: 0,
|
||||
width: TILE_SIZE,
|
||||
height: TILE_SIZE
|
||||
};
|
||||
job.metadata = buildEmptyMetadata(
|
||||
gameConfig,
|
||||
job.mapId,
|
||||
baseItems,
|
||||
"This map resolved to no valid shape or frame pairs after decoding."
|
||||
);
|
||||
job.metadata.filters = {
|
||||
includeEditor: job.options.includeEditor,
|
||||
includeRoofs: job.options.includeRoofs
|
||||
};
|
||||
job.status = "ready";
|
||||
job.phase = "ready";
|
||||
this.touchJob(job, "Build ready: no valid frames were renderable, serving a blank placeholder tile");
|
||||
return;
|
||||
}
|
||||
|
||||
const width = sorted.maxRight - sorted.minLeft;
|
||||
const height = sorted.maxBottom - sorted.minTop;
|
||||
if (width <= 0 || height <= 0) {
|
||||
throw new Error("Computed image bounds are invalid");
|
||||
}
|
||||
|
||||
const metadata = {
|
||||
game: gameConfig.id,
|
||||
gameLabel: gameConfig.label,
|
||||
map: job.mapId,
|
||||
rawItemCount: baseItems.length,
|
||||
itemCount: renderItems.length,
|
||||
paintedItemCount: sorted.prepared.length,
|
||||
occludedItemCount: sorted.occludedCount,
|
||||
invalidItemCount: sorted.invalidItemCount,
|
||||
invalidItems: sorted.invalidItems,
|
||||
usage: makeUsageInfo(gameConfig.id, job.mapId, baseItems, renderItems),
|
||||
baseItemSummary: summarizeRenderClasses(baseItems, assets.shapeInfos),
|
||||
sorter: "scummvm_dependency_graph",
|
||||
isEmpty: false,
|
||||
emptyReason: null,
|
||||
filters: {
|
||||
includeEditor: job.options.includeEditor,
|
||||
includeRoofs: job.options.includeRoofs
|
||||
},
|
||||
bounds: {
|
||||
screenLeft: sorted.minLeft,
|
||||
screenTop: sorted.minTop,
|
||||
screenRight: sorted.maxRight,
|
||||
screenBottom: sorted.maxBottom,
|
||||
width,
|
||||
height
|
||||
},
|
||||
tileSize: TILE_SIZE,
|
||||
tileCountX: Math.ceil(width / TILE_SIZE),
|
||||
tileCountY: Math.ceil(height / TILE_SIZE),
|
||||
zoom: {
|
||||
min: 0.01,
|
||||
max: 8,
|
||||
step: 0.1,
|
||||
initial: 1
|
||||
}
|
||||
};
|
||||
|
||||
job.build = {
|
||||
assets,
|
||||
prepared: sorted.prepared,
|
||||
minLeft: sorted.minLeft,
|
||||
minTop: sorted.minTop,
|
||||
width,
|
||||
height
|
||||
};
|
||||
job.metadata = metadata;
|
||||
job.status = "ready";
|
||||
job.phase = "ready";
|
||||
this.touchJob(job, `Build ready with ${metadata.tileCountX}x${metadata.tileCountY} tiles`);
|
||||
} catch (error) {
|
||||
job.status = "failed";
|
||||
job.phase = "failed";
|
||||
job.error = error instanceof Error ? error.message : String(error);
|
||||
this.touchJob(job, `Build failed: ${job.error}`);
|
||||
}
|
||||
}
|
||||
|
||||
getAssets(gameConfig) {
|
||||
if (this.assetCache.has(gameConfig.id)) {
|
||||
return this.assetCache.get(gameConfig.id);
|
||||
}
|
||||
const assets = {
|
||||
palette: loadPalette(resolveStaticFile(gameConfig.staticDir, "GAMEPAL.PAL")),
|
||||
shapeInfos: loadTypeflags(resolveStaticFile(gameConfig.staticDir, "TYPEFLAG.DAT")),
|
||||
globs: loadGlobs(resolveStaticFile(gameConfig.staticDir, "GLOB.FLX")),
|
||||
shapeArchive: new ShapeArchive(resolveStaticFile(gameConfig.staticDir, "SHAPES.FLX"))
|
||||
};
|
||||
this.assetCache.set(gameConfig.id, assets);
|
||||
return assets;
|
||||
}
|
||||
|
||||
touchJob(job, message) {
|
||||
job.updatedAt = nowIso();
|
||||
job.progress.push({
|
||||
at: job.updatedAt,
|
||||
phase: job.phase,
|
||||
message
|
||||
});
|
||||
if (job.progress.length > 100) {
|
||||
job.progress.splice(0, job.progress.length - 100);
|
||||
}
|
||||
}
|
||||
|
||||
getPublicJob(job) {
|
||||
return {
|
||||
id: job.id,
|
||||
game: job.game,
|
||||
mapId: job.mapId,
|
||||
options: job.options,
|
||||
status: job.status,
|
||||
phase: job.phase,
|
||||
createdAt: job.createdAt,
|
||||
updatedAt: job.updatedAt,
|
||||
error: job.error,
|
||||
metadata: job.status === "ready" ? job.metadata : null,
|
||||
progress: job.progress
|
||||
};
|
||||
}
|
||||
|
||||
getMetadata(jobId, gameId, mapId) {
|
||||
const job = this.requireReadyJob(jobId, gameId, mapId);
|
||||
return job.metadata;
|
||||
}
|
||||
|
||||
async renderFullMap(jobId, gameId, mapId) {
|
||||
const job = this.requireReadyJob(jobId, gameId, mapId);
|
||||
const outputPath = path.join(
|
||||
DOWNLOAD_CACHE_ROOT,
|
||||
gameId,
|
||||
`map-${mapId}`,
|
||||
`${buildOptionSuffix(job.options)}.png`
|
||||
);
|
||||
if (fs.existsSync(outputPath)) {
|
||||
return outputPath;
|
||||
}
|
||||
|
||||
ensureDir(path.dirname(outputPath));
|
||||
const composites = [];
|
||||
for (let tileY = 0; tileY < job.metadata.tileCountY; tileY += 1) {
|
||||
for (let tileX = 0; tileX < job.metadata.tileCountX; tileX += 1) {
|
||||
composites.push({
|
||||
input: this.renderTile(jobId, gameId, mapId, tileX, tileY),
|
||||
left: tileX * job.metadata.tileSize,
|
||||
top: tileY * job.metadata.tileSize
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
await sharp({
|
||||
create: {
|
||||
width: job.metadata.bounds.width,
|
||||
height: job.metadata.bounds.height,
|
||||
channels: 4,
|
||||
background: { r: 10, g: 12, b: 18, alpha: 1 }
|
||||
},
|
||||
limitInputPixels: false
|
||||
})
|
||||
.composite(composites)
|
||||
.png()
|
||||
.toFile(outputPath);
|
||||
|
||||
return outputPath;
|
||||
}
|
||||
|
||||
renderTile(jobId, gameId, mapId, tileX, tileY) {
|
||||
const job = this.requireReadyJob(jobId, gameId, mapId);
|
||||
const tileKey = `${job.id}:${tileX}:${tileY}`;
|
||||
if (this.tileCache.has(tileKey)) {
|
||||
return this.tileCache.get(tileKey);
|
||||
}
|
||||
|
||||
const tilePath = path.join(
|
||||
TILE_CACHE_ROOT,
|
||||
gameId,
|
||||
`map-${mapId}`,
|
||||
buildOptionSuffix(job.options),
|
||||
`${tileX}-${tileY}.png`
|
||||
);
|
||||
if (fs.existsSync(tilePath)) {
|
||||
const cached = fs.readFileSync(tilePath);
|
||||
this.tileCache.set(tileKey, cached);
|
||||
return cached;
|
||||
}
|
||||
|
||||
const tileLeft = tileX * TILE_SIZE;
|
||||
const tileTop = tileY * TILE_SIZE;
|
||||
const tileWidth = Math.max(0, Math.min(TILE_SIZE, job.build.width - tileLeft));
|
||||
const tileHeight = Math.max(0, Math.min(TILE_SIZE, job.build.height - tileTop));
|
||||
if (tileWidth <= 0 || tileHeight <= 0) {
|
||||
throw new Error("Requested tile is outside the rendered map bounds");
|
||||
}
|
||||
|
||||
const buffer = rgbaBuffer(tileWidth, tileHeight);
|
||||
const screenLeft = job.build.minLeft + tileLeft;
|
||||
const screenTop = job.build.minTop + tileTop;
|
||||
const screenRight = screenLeft + tileWidth;
|
||||
const screenBottom = screenTop + tileHeight;
|
||||
|
||||
for (const node of job.build.prepared) {
|
||||
if (node.right <= screenLeft || node.left >= screenRight || node.bottom <= screenTop || node.top >= screenBottom) {
|
||||
continue;
|
||||
}
|
||||
blitFrame(
|
||||
buffer,
|
||||
tileWidth,
|
||||
tileHeight,
|
||||
node.left - screenLeft,
|
||||
node.top - screenTop,
|
||||
node.frame,
|
||||
node.pixels,
|
||||
job.build.assets.palette,
|
||||
Boolean(node.item.flags & FLAG_FLIPPED)
|
||||
);
|
||||
}
|
||||
|
||||
const png = encodePng(tileWidth, tileHeight, buffer);
|
||||
ensureDir(path.dirname(tilePath));
|
||||
fs.writeFileSync(tilePath, png);
|
||||
this.tileCache.set(tileKey, png);
|
||||
return png;
|
||||
}
|
||||
|
||||
requireReadyJob(jobId, gameId, mapId) {
|
||||
const job = this.getJob(jobId);
|
||||
if (!job) {
|
||||
throw new Error("Unknown build id");
|
||||
}
|
||||
if (job.game !== gameId || job.mapId !== mapId) {
|
||||
throw new Error("Build id does not match the requested map");
|
||||
}
|
||||
if (job.status !== "ready") {
|
||||
throw new Error("Build is not ready yet");
|
||||
}
|
||||
return job;
|
||||
}
|
||||
}
|
||||
34
map_renderer/src/lib/catalog.js
Normal file
34
map_renderer/src/lib/catalog.js
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
import fs from "node:fs";
|
||||
|
||||
import { GAMES } from "../config.js";
|
||||
import { getMapSummaries, resolveStaticFile } from "./formats.js";
|
||||
|
||||
export function detectCatalog() {
|
||||
const games = [];
|
||||
for (const game of GAMES) {
|
||||
const fixedDat = resolveStaticFile(game.staticDir, "FIXED.DAT");
|
||||
if (!fs.existsSync(fixedDat)) {
|
||||
continue;
|
||||
}
|
||||
const maps = getMapSummaries(fixedDat)
|
||||
.filter((map) => map.isValid && map.rawItemCount > 0)
|
||||
.map((map) => ({
|
||||
id: map.id,
|
||||
label: `${game.label} Map ${map.id}`,
|
||||
rawItemCount: map.rawItemCount
|
||||
}));
|
||||
if (maps.length > 0) {
|
||||
games.push({
|
||||
id: game.id,
|
||||
label: game.label,
|
||||
mapCount: maps.length,
|
||||
maps
|
||||
});
|
||||
}
|
||||
}
|
||||
return { games };
|
||||
}
|
||||
|
||||
export function getGameConfig(gameId) {
|
||||
return GAMES.find((game) => game.id === gameId) ?? null;
|
||||
}
|
||||
475
map_renderer/src/lib/formats.js
Normal file
475
map_renderer/src/lib/formats.js
Normal file
|
|
@ -0,0 +1,475 @@
|
|||
import fs from "node:fs";
|
||||
import path from "node:path";
|
||||
|
||||
import { readI32LE, readU16LE, readU24LE, readU32LE } from "./binary.js";
|
||||
|
||||
export const FLEX_TABLE_OFFSET = 0x80;
|
||||
export const FLEX_COUNT_OFFSET = 0x54;
|
||||
export const FIXED_MAP_COUNT_OFFSET = 0x54;
|
||||
export const FIXED_MAP_TABLE_OFFSET = 0x80;
|
||||
export const CRUSADER_COORD_SCALE = 2;
|
||||
export const GLOB_COORD_MASK = ~0x3ff;
|
||||
export const GLOB_COORD_SHIFT = 2;
|
||||
export const GLOB_COORD_OFFSET = 2;
|
||||
export const FLAG_INVISIBLE = 0x0010;
|
||||
export const FLAG_FLIPPED = 0x0020;
|
||||
export const EGG_FAMILIES = new Set([3, 4, 7, 8]);
|
||||
|
||||
export const SI_FIXED = 0x0001;
|
||||
export const SI_SOLID = 0x0002;
|
||||
export const SI_LAND = 0x0008;
|
||||
export const SI_OCCL = 0x0010;
|
||||
export const SI_NOISY = 0x0080;
|
||||
export const SI_DRAW = 0x0100;
|
||||
export const SI_ROOF = 0x0400;
|
||||
export const SI_TRANSL = 0x0800;
|
||||
|
||||
export function getMapCount(fixedDatPath) {
|
||||
const data = fs.readFileSync(fixedDatPath);
|
||||
return readU16LE(data, FIXED_MAP_COUNT_OFFSET);
|
||||
}
|
||||
|
||||
export function getMapSummaries(fixedDatPath) {
|
||||
const data = fs.readFileSync(fixedDatPath);
|
||||
const mapCount = readU16LE(data, FIXED_MAP_COUNT_OFFSET);
|
||||
const maps = [];
|
||||
for (let mapId = 0; mapId < mapCount; mapId += 1) {
|
||||
const tableOffset = FIXED_MAP_TABLE_OFFSET + mapId * 8;
|
||||
const mapOffset = readU32LE(data, tableOffset);
|
||||
const mapSize = readU32LE(data, tableOffset + 4);
|
||||
maps.push({
|
||||
id: mapId,
|
||||
offset: mapOffset,
|
||||
byteSize: mapSize,
|
||||
rawItemCount: Math.floor(mapSize / 16),
|
||||
isValid: mapSize >= 16
|
||||
});
|
||||
}
|
||||
return maps;
|
||||
}
|
||||
|
||||
export class FlexArchive {
|
||||
constructor(filePath) {
|
||||
this.path = filePath;
|
||||
this.data = fs.readFileSync(filePath);
|
||||
this.entries = FlexArchive.readEntries(this.data);
|
||||
}
|
||||
|
||||
static readEntries(data) {
|
||||
const count = readU32LE(data, FLEX_COUNT_OFFSET);
|
||||
const entries = [];
|
||||
for (let index = 0; index < count; index += 1) {
|
||||
const base = FLEX_TABLE_OFFSET + index * 8;
|
||||
entries.push({
|
||||
offset: readU32LE(data, base),
|
||||
size: readU32LE(data, base + 4)
|
||||
});
|
||||
}
|
||||
return entries;
|
||||
}
|
||||
|
||||
get(index) {
|
||||
const entry = this.entries[index];
|
||||
if (!entry || entry.size === 0) {
|
||||
return Buffer.alloc(0);
|
||||
}
|
||||
return this.data.subarray(entry.offset, entry.offset + entry.size);
|
||||
}
|
||||
|
||||
get length() {
|
||||
return this.entries.length;
|
||||
}
|
||||
}
|
||||
|
||||
export class ShapeArchive {
|
||||
constructor(filePath) {
|
||||
this.archive = new FlexArchive(filePath);
|
||||
this.shapeCache = new Map();
|
||||
this.decodedFrameCache = new Map();
|
||||
}
|
||||
|
||||
getFrame(shapeIndex, frameIndex) {
|
||||
const frames = this.getShape(shapeIndex);
|
||||
if (frameIndex < 0 || frameIndex >= frames.length) {
|
||||
throw new RangeError(`shape ${shapeIndex} frame ${frameIndex} out of range`);
|
||||
}
|
||||
return frames[frameIndex];
|
||||
}
|
||||
|
||||
decodeFrame(shapeIndex, frameIndex) {
|
||||
const cacheKey = `${shapeIndex}:${frameIndex}`;
|
||||
let decoded = this.decodedFrameCache.get(cacheKey);
|
||||
const frame = this.getFrame(shapeIndex, frameIndex);
|
||||
if (!decoded) {
|
||||
decoded = decodePixels(frame);
|
||||
this.decodedFrameCache.set(cacheKey, decoded);
|
||||
}
|
||||
return { frame, pixels: decoded };
|
||||
}
|
||||
|
||||
getShape(shapeIndex) {
|
||||
if (this.shapeCache.has(shapeIndex)) {
|
||||
return this.shapeCache.get(shapeIndex);
|
||||
}
|
||||
const raw = this.archive.get(shapeIndex);
|
||||
if (!raw.length) {
|
||||
throw new Error(`shape ${shapeIndex} has no data`);
|
||||
}
|
||||
const frames = parseShape(raw);
|
||||
this.shapeCache.set(shapeIndex, frames);
|
||||
return frames;
|
||||
}
|
||||
}
|
||||
|
||||
function parseShape(data) {
|
||||
const frameCount = readU16LE(data, 4);
|
||||
const frames = [];
|
||||
for (let index = 0; index < frameCount; index += 1) {
|
||||
const headerOffset = 6 + index * 8;
|
||||
const frameOffset = readU24LE(data, headerOffset);
|
||||
const frameSize = readU32LE(data, headerOffset + 4);
|
||||
const frameData = data.subarray(frameOffset, frameOffset + frameSize);
|
||||
if (frameData.length < 28) {
|
||||
throw new Error(`frame ${index} too small: ${frameData.length}`);
|
||||
}
|
||||
const compressed = Boolean(readU32LE(frameData, 8));
|
||||
const width = readU32LE(frameData, 12);
|
||||
const height = readU32LE(frameData, 16);
|
||||
const xoff = readI32LE(frameData, 20);
|
||||
const yoff = readI32LE(frameData, 24);
|
||||
const lineOffsets = [];
|
||||
for (let row = 0; row < height; row += 1) {
|
||||
lineOffsets.push(readU32LE(frameData, 28 + row * 4) - ((height - row) * 4));
|
||||
}
|
||||
const rleOffset = 28 + height * 4;
|
||||
frames.push({
|
||||
compressed,
|
||||
width,
|
||||
height,
|
||||
xoff,
|
||||
yoff,
|
||||
lineOffsets,
|
||||
rleData: frameData.subarray(rleOffset)
|
||||
});
|
||||
}
|
||||
return frames;
|
||||
}
|
||||
|
||||
function decodePixels(frame) {
|
||||
const pixels = new Int16Array(frame.width * frame.height);
|
||||
pixels.fill(-1);
|
||||
const rle = frame.rleData;
|
||||
for (let row = 0; row < frame.height; row += 1) {
|
||||
let pos = frame.lineOffsets[row];
|
||||
let xpos = 0;
|
||||
while (xpos < frame.width) {
|
||||
if (pos >= rle.length) {
|
||||
throw new Error(`row ${row} overran RLE data`);
|
||||
}
|
||||
xpos += rle[pos];
|
||||
pos += 1;
|
||||
if (xpos === frame.width) {
|
||||
break;
|
||||
}
|
||||
if (pos >= rle.length) {
|
||||
throw new Error(`row ${row} missing run header`);
|
||||
}
|
||||
let dlen = rle[pos];
|
||||
pos += 1;
|
||||
let runType = 0;
|
||||
if (frame.compressed) {
|
||||
runType = dlen & 1;
|
||||
dlen >>= 1;
|
||||
}
|
||||
if (dlen <= 0 || xpos + dlen > frame.width) {
|
||||
throw new Error(`invalid run length ${dlen} at row ${row}`);
|
||||
}
|
||||
const rowBase = row * frame.width + xpos;
|
||||
if (runType === 0) {
|
||||
const end = pos + dlen;
|
||||
if (end > rle.length) {
|
||||
throw new Error(`row ${row} literal run overruns RLE data`);
|
||||
}
|
||||
for (let index = 0; index < dlen; index += 1) {
|
||||
pixels[rowBase + index] = rle[pos + index];
|
||||
}
|
||||
pos = end;
|
||||
} else {
|
||||
if (pos >= rle.length) {
|
||||
throw new Error(`row ${row} repeated-color run missing color byte`);
|
||||
}
|
||||
const color = rle[pos];
|
||||
pos += 1;
|
||||
for (let index = 0; index < dlen; index += 1) {
|
||||
pixels[rowBase + index] = color;
|
||||
}
|
||||
}
|
||||
xpos += dlen;
|
||||
}
|
||||
}
|
||||
return pixels;
|
||||
}
|
||||
|
||||
export function loadPalette(filePath) {
|
||||
const data = fs.readFileSync(filePath);
|
||||
if (data.length < 768) {
|
||||
throw new Error(`palette too small: ${filePath}`);
|
||||
}
|
||||
const palette = [];
|
||||
for (let index = 0; index < 256; index += 1) {
|
||||
const r = Math.floor((data[index * 3] * 255) / 63);
|
||||
const g = Math.floor((data[index * 3 + 1] * 255) / 63);
|
||||
const b = Math.floor((data[index * 3 + 2] * 255) / 63);
|
||||
palette.push([r, g, b]);
|
||||
}
|
||||
return palette;
|
||||
}
|
||||
|
||||
export function loadTypeflags(filePath) {
|
||||
const data = fs.readFileSync(filePath);
|
||||
const infos = [];
|
||||
for (let base = 0; base + 9 <= data.length; base += 9) {
|
||||
const block = data.subarray(base, base + 9);
|
||||
let flags = 0;
|
||||
if (block[0] & 0x01) flags |= 0x0001;
|
||||
if (block[0] & 0x02) flags |= 0x0002;
|
||||
if (block[0] & 0x04) flags |= 0x0004;
|
||||
if (block[0] & 0x08) flags |= 0x0008;
|
||||
if (block[0] & 0x10) flags |= 0x0010;
|
||||
if (block[0] & 0x20) flags |= 0x0020;
|
||||
if (block[0] & 0x40) flags |= 0x0040;
|
||||
if (block[0] & 0x80) flags |= 0x0080;
|
||||
if (block[1] & 0x01) flags |= 0x0100;
|
||||
if (block[1] & 0x02) flags |= 0x0200;
|
||||
if (block[1] & 0x04) flags |= 0x0400;
|
||||
if (block[1] & 0x08) flags |= 0x0800;
|
||||
if (block[6] & 0x01) flags |= 0x1000;
|
||||
if (block[6] & 0x02) flags |= 0x2000;
|
||||
if (block[6] & 0x04) flags |= 0x4000;
|
||||
if (block[6] & 0x08) flags |= 0x8000;
|
||||
if (block[6] & 0x10) flags |= 0x10000;
|
||||
if (block[6] & 0x20) flags |= 0x20000;
|
||||
if (block[6] & 0x40) flags |= 0x40000;
|
||||
if (block[6] & 0x80) flags |= 0x80000;
|
||||
const family = (block[1] >> 4) + ((block[2] & 1) << 4);
|
||||
const x = ((block[3] << 3) | (block[2] >> 5)) & 0x1f;
|
||||
const y = (block[3] >> 2) & 0x1f;
|
||||
const z = ((block[4] << 1) | (block[3] >> 7)) & 0x1f;
|
||||
const animType = block[4] >> 4;
|
||||
infos.push({
|
||||
family,
|
||||
flags,
|
||||
x,
|
||||
y,
|
||||
z,
|
||||
animType,
|
||||
isEditor: Boolean(flags & 0x1000),
|
||||
isFixed: Boolean(flags & SI_FIXED),
|
||||
isSolid: Boolean(flags & SI_SOLID),
|
||||
isLand: Boolean(flags & SI_LAND),
|
||||
isOccl: Boolean(flags & SI_OCCL),
|
||||
isNoisy: Boolean(flags & SI_NOISY),
|
||||
isDraw: Boolean(flags & SI_DRAW),
|
||||
isRoof: Boolean(flags & SI_ROOF),
|
||||
isTranslucent: Boolean(flags & SI_TRANSL),
|
||||
isInvitem: family === 13
|
||||
});
|
||||
}
|
||||
return infos;
|
||||
}
|
||||
|
||||
export function loadGlobs(filePath) {
|
||||
const archive = new FlexArchive(filePath);
|
||||
const globs = [];
|
||||
for (let index = 0; index < archive.length; index += 1) {
|
||||
const raw = archive.get(index);
|
||||
if (!raw.length) {
|
||||
globs.push([]);
|
||||
continue;
|
||||
}
|
||||
const count = readU16LE(raw, 0);
|
||||
const items = [];
|
||||
for (let itemIndex = 0; itemIndex < count; itemIndex += 1) {
|
||||
const base = 2 + itemIndex * 6;
|
||||
items.push({
|
||||
x: raw[base],
|
||||
y: raw[base + 1],
|
||||
z: raw[base + 2],
|
||||
shape: readU16LE(raw, base + 3),
|
||||
frame: raw[base + 5]
|
||||
});
|
||||
}
|
||||
globs.push(items);
|
||||
}
|
||||
return globs;
|
||||
}
|
||||
|
||||
export function loadMapItems(filePath, mapIndex) {
|
||||
if (!fs.existsSync(filePath)) {
|
||||
throw new Error(`Missing file: ${filePath}`);
|
||||
}
|
||||
const data = fs.readFileSync(filePath);
|
||||
const mapCount = readU16LE(data, FIXED_MAP_COUNT_OFFSET);
|
||||
if (mapIndex < 0 || mapIndex >= mapCount) {
|
||||
throw new Error(`map index ${mapIndex} out of range 0..${mapCount - 1}`);
|
||||
}
|
||||
const tableOffset = FIXED_MAP_TABLE_OFFSET + mapIndex * 8;
|
||||
const mapOffset = readU32LE(data, tableOffset);
|
||||
const mapSize = readU32LE(data, tableOffset + 4);
|
||||
const payload = data.subarray(mapOffset, mapOffset + mapSize);
|
||||
if (payload.length !== mapSize) {
|
||||
throw new Error(`map ${mapIndex} payload truncated`);
|
||||
}
|
||||
const items = [];
|
||||
for (let base = 0; base + 16 <= payload.length; base += 16) {
|
||||
const record = payload.subarray(base, base + 16);
|
||||
items.push({
|
||||
x: readU16LE(record, 0) * CRUSADER_COORD_SCALE,
|
||||
y: readU16LE(record, 2) * CRUSADER_COORD_SCALE,
|
||||
z: record[4],
|
||||
shape: readU16LE(record, 5),
|
||||
frame: record[7],
|
||||
flags: readU16LE(record, 8),
|
||||
quality: readU16LE(record, 10),
|
||||
npcNum: record[12],
|
||||
mapNum: record[13],
|
||||
nextItem: readU16LE(record, 14),
|
||||
source: "fixed"
|
||||
});
|
||||
}
|
||||
return items;
|
||||
}
|
||||
|
||||
export function expandGlobItem(item, globs) {
|
||||
if (item.quality < 0 || item.quality >= globs.length) {
|
||||
return [];
|
||||
}
|
||||
return globs[item.quality].map((globItem) => ({
|
||||
x: (item.x & GLOB_COORD_MASK) + (globItem.x << GLOB_COORD_SHIFT) + GLOB_COORD_OFFSET,
|
||||
y: (item.y & GLOB_COORD_MASK) + (globItem.y << GLOB_COORD_SHIFT) + GLOB_COORD_OFFSET,
|
||||
z: item.z + globItem.z,
|
||||
shape: globItem.shape,
|
||||
frame: globItem.frame,
|
||||
flags: 0,
|
||||
quality: 0,
|
||||
npcNum: 0,
|
||||
mapNum: item.mapNum,
|
||||
nextItem: 0,
|
||||
source: "glob"
|
||||
}));
|
||||
}
|
||||
|
||||
export function collectRenderItems(baseItems, shapeInfos, globs, options) {
|
||||
const {
|
||||
includeEditor,
|
||||
expandGlobs,
|
||||
worldRect,
|
||||
includeRoofs,
|
||||
includeHiddenMarkers,
|
||||
progress,
|
||||
checkpointEvery = 0
|
||||
} = options;
|
||||
|
||||
const renderItems = [];
|
||||
const pending = [...baseItems];
|
||||
let index = 0;
|
||||
let skippedInvisible = 0;
|
||||
let skippedWorldRect = 0;
|
||||
let skippedInvalidShape = 0;
|
||||
let skippedEditor = 0;
|
||||
let skippedEgg = 0;
|
||||
let skippedRoof = 0;
|
||||
let skippedHidden = 0;
|
||||
let expandedGlobs = 0;
|
||||
|
||||
while (index < pending.length) {
|
||||
const item = pending[index];
|
||||
index += 1;
|
||||
if (item.flags & FLAG_INVISIBLE) {
|
||||
if (!includeHiddenMarkers) {
|
||||
skippedHidden += 1;
|
||||
continue;
|
||||
}
|
||||
skippedInvisible += 1;
|
||||
}
|
||||
if (worldRect) {
|
||||
const [minX, minY, maxX, maxY] = worldRect;
|
||||
if (item.x < minX || item.y < minY || item.x > maxX || item.y > maxY) {
|
||||
skippedWorldRect += 1;
|
||||
continue;
|
||||
}
|
||||
}
|
||||
if (item.shape >= shapeInfos.length) {
|
||||
skippedInvalidShape += 1;
|
||||
continue;
|
||||
}
|
||||
const info = shapeInfos[item.shape];
|
||||
if (info.isEditor && !includeEditor) {
|
||||
skippedEditor += 1;
|
||||
continue;
|
||||
}
|
||||
if (info.isRoof && !includeRoofs) {
|
||||
skippedRoof += 1;
|
||||
continue;
|
||||
}
|
||||
if (expandGlobs && info.family === 3 && item.source === "fixed") {
|
||||
pending.push(...expandGlobItem(item, globs));
|
||||
expandedGlobs += 1;
|
||||
if (!includeHiddenMarkers) {
|
||||
continue;
|
||||
}
|
||||
}
|
||||
if (EGG_FAMILIES.has(info.family) && !includeHiddenMarkers) {
|
||||
skippedEgg += 1;
|
||||
continue;
|
||||
}
|
||||
renderItems.push(item);
|
||||
if (progress && checkpointEvery > 0 && index % checkpointEvery === 0) {
|
||||
progress(
|
||||
`collect processed=${index} pending=${pending.length} rendered=${renderItems.length} expanded_globs=${expandedGlobs} ` +
|
||||
`skipped=(invisible:${skippedInvisible}, world:${skippedWorldRect}, shape:${skippedInvalidShape}, editor:${skippedEditor}, ` +
|
||||
`roof:${skippedRoof}, hidden:${skippedHidden}, egg:${skippedEgg})`
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
if (progress) {
|
||||
progress(
|
||||
`collect complete processed=${index} pending=${pending.length} rendered=${renderItems.length} expanded_globs=${expandedGlobs} ` +
|
||||
`skipped=(invisible:${skippedInvisible}, world:${skippedWorldRect}, shape:${skippedInvalidShape}, editor:${skippedEditor}, ` +
|
||||
`roof:${skippedRoof}, hidden:${skippedHidden}, egg:${skippedEgg})`
|
||||
);
|
||||
}
|
||||
|
||||
return renderItems;
|
||||
}
|
||||
|
||||
export function summarizeRenderClasses(baseItems, shapeInfos) {
|
||||
const summary = {
|
||||
roofItems: 0,
|
||||
editorItems: 0,
|
||||
eggFamilyItems: 0,
|
||||
invisibleFlaggedItems: 0,
|
||||
npcLinkedItems: 0
|
||||
};
|
||||
for (const item of baseItems) {
|
||||
if (item.flags & FLAG_INVISIBLE) {
|
||||
summary.invisibleFlaggedItems += 1;
|
||||
}
|
||||
if (item.npcNum !== 0) {
|
||||
summary.npcLinkedItems += 1;
|
||||
}
|
||||
if (item.shape >= shapeInfos.length) {
|
||||
continue;
|
||||
}
|
||||
const info = shapeInfos[item.shape];
|
||||
if (info.isRoof) summary.roofItems += 1;
|
||||
if (info.isEditor) summary.editorItems += 1;
|
||||
if (EGG_FAMILIES.has(info.family)) summary.eggFamilyItems += 1;
|
||||
}
|
||||
return summary;
|
||||
}
|
||||
|
||||
export function resolveStaticFile(staticDir, name) {
|
||||
return path.join(staticDir, name);
|
||||
}
|
||||
48
map_renderer/src/lib/png.js
Normal file
48
map_renderer/src/lib/png.js
Normal file
|
|
@ -0,0 +1,48 @@
|
|||
import { PNG } from "pngjs";
|
||||
|
||||
export const DEFAULT_BACKGROUND = [10, 12, 18, 255];
|
||||
|
||||
export function rgbaBuffer(width, height, color = DEFAULT_BACKGROUND) {
|
||||
const [r, g, b, a] = color;
|
||||
const pixels = Buffer.alloc(width * height * 4);
|
||||
for (let offset = 0; offset < pixels.length; offset += 4) {
|
||||
pixels[offset] = r;
|
||||
pixels[offset + 1] = g;
|
||||
pixels[offset + 2] = b;
|
||||
pixels[offset + 3] = a;
|
||||
}
|
||||
return pixels;
|
||||
}
|
||||
|
||||
export function blitFrame(buffer, canvasWidth, canvasHeight, left, top, frame, pixels, palette, flipped) {
|
||||
for (let srcY = 0; srcY < frame.height; srcY += 1) {
|
||||
const dstY = top + srcY;
|
||||
if (dstY < 0 || dstY >= canvasHeight) {
|
||||
continue;
|
||||
}
|
||||
const rowBase = srcY * frame.width;
|
||||
for (let srcX = 0; srcX < frame.width; srcX += 1) {
|
||||
const pixelIndex = rowBase + (flipped ? frame.width - 1 - srcX : srcX);
|
||||
const colorIndex = pixels[pixelIndex];
|
||||
if (colorIndex < 0) {
|
||||
continue;
|
||||
}
|
||||
const dstX = left + srcX;
|
||||
if (dstX < 0 || dstX >= canvasWidth) {
|
||||
continue;
|
||||
}
|
||||
const pixelBase = (dstY * canvasWidth + dstX) * 4;
|
||||
const [r, g, b] = palette[colorIndex];
|
||||
buffer[pixelBase] = r;
|
||||
buffer[pixelBase + 1] = g;
|
||||
buffer[pixelBase + 2] = b;
|
||||
buffer[pixelBase + 3] = 255;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export function encodePng(width, height, data) {
|
||||
const png = new PNG({ width, height });
|
||||
data.copy(png.data);
|
||||
return PNG.sync.write(png, { colorType: 6, inputColorType: 6 });
|
||||
}
|
||||
394
map_renderer/src/lib/sorting.js
Normal file
394
map_renderer/src/lib/sorting.js
Normal file
|
|
@ -0,0 +1,394 @@
|
|||
import { FLAG_FLIPPED } from "./formats.js";
|
||||
|
||||
function rectIntersects(left, right) {
|
||||
return left.left < right.right && left.right > right.left && left.top < right.bottom && left.bottom > right.top;
|
||||
}
|
||||
|
||||
function rectContains(outer, inner) {
|
||||
return outer.left <= inner.left && outer.top <= inner.top && outer.right >= inner.right && outer.bottom >= inner.bottom;
|
||||
}
|
||||
|
||||
function listLessThan(left, right) {
|
||||
if (left.sprite !== right.sprite) {
|
||||
return left.sprite < right.sprite;
|
||||
}
|
||||
if (left.z !== right.z) {
|
||||
return left.z < right.z;
|
||||
}
|
||||
return left.flat > right.flat;
|
||||
}
|
||||
|
||||
function overlap(left, right) {
|
||||
if (!rectIntersects(left, right)) {
|
||||
return false;
|
||||
}
|
||||
const pointTopDiff = [left.sx_top - right.sx_bot, left.sy_top - right.sy_bot];
|
||||
const pointBotDiff = [left.sx_bot - right.sx_top, left.sy_bot - right.sy_top];
|
||||
const dotTopLeft = pointTopDiff[0] + pointTopDiff[1] * 2;
|
||||
const dotTopRight = -pointTopDiff[0] + pointTopDiff[1] * 2;
|
||||
const dotBotLeft = pointBotDiff[0] - pointBotDiff[1] * 2;
|
||||
const dotBotRight = -pointBotDiff[0] - pointBotDiff[1] * 2;
|
||||
const rightClear = left.sx_right <= right.sx_left;
|
||||
const leftClear = left.sx_left >= right.sx_right;
|
||||
const topLeftClear = dotTopLeft >= 0;
|
||||
const topRightClear = dotTopRight >= 0;
|
||||
const botLeftClear = dotBotLeft >= 0;
|
||||
const botRightClear = dotBotRight >= 0;
|
||||
const clear = rightClear || leftClear || botRightClear || botLeftClear || topRightClear || topLeftClear;
|
||||
return !clear;
|
||||
}
|
||||
|
||||
function occludes(left, right) {
|
||||
if (!rectContains(left, right)) {
|
||||
return false;
|
||||
}
|
||||
const pointTopDiff = [left.sx_top - right.sx_top, left.sy_top - right.sy_top];
|
||||
const pointBotDiff = [left.sx_bot - right.sx_bot, left.sy_bot - right.sy_bot];
|
||||
const dotTopLeft = pointTopDiff[0] + pointTopDiff[1] * 2;
|
||||
const dotTopRight = -pointTopDiff[0] + pointTopDiff[1] * 2;
|
||||
const dotBotLeft = pointBotDiff[0] - pointBotDiff[1] * 2;
|
||||
const dotBotRight = -pointBotDiff[0] - pointBotDiff[1] * 2;
|
||||
const rightRes = left.sx_right >= right.sx_right;
|
||||
const leftRes = left.sx_left <= right.sx_left;
|
||||
const topLeftRes = dotTopLeft <= 0;
|
||||
const topRightRes = dotTopRight <= 0;
|
||||
const botLeftRes = dotBotLeft <= 0;
|
||||
const botRightRes = dotBotRight <= 0;
|
||||
return rightRes && leftRes && botRightRes && botLeftRes && topRightRes && topLeftRes;
|
||||
}
|
||||
|
||||
function below(left, right) {
|
||||
if (left.sprite !== right.sprite) {
|
||||
return left.sprite < right.sprite;
|
||||
}
|
||||
|
||||
if (left.flat && right.flat) {
|
||||
if (left.z !== right.z) {
|
||||
return left.z < right.z;
|
||||
}
|
||||
} else if (left.invitem === right.invitem) {
|
||||
if (left.z_top <= right.z) {
|
||||
return true;
|
||||
}
|
||||
if (left.z >= right.z_top) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
const yFlatLeft = left.y_far === left.y;
|
||||
const yFlatRight = right.y_far === right.y;
|
||||
if (yFlatLeft && yFlatRight) {
|
||||
if (Math.floor(left.y / 32) !== Math.floor(right.y / 32)) {
|
||||
return left.y < right.y;
|
||||
}
|
||||
} else {
|
||||
if (left.y <= right.y_far) {
|
||||
return true;
|
||||
}
|
||||
if (left.y_far >= right.y) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
const xFlatLeft = left.x_left === left.x;
|
||||
const xFlatRight = right.x_left === right.x;
|
||||
if (xFlatLeft && xFlatRight) {
|
||||
if (Math.floor(left.x / 32) !== Math.floor(right.x / 32)) {
|
||||
return left.x < right.x;
|
||||
}
|
||||
} else {
|
||||
if (left.x <= right.x_left) {
|
||||
return true;
|
||||
}
|
||||
if (left.x_left >= right.x) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
if (left.z_top - 8 <= right.z && left.z < right.z_top - 8) {
|
||||
return true;
|
||||
}
|
||||
if (left.z >= right.z_top - 8 && left.z_top - 8 > right.z) {
|
||||
return false;
|
||||
}
|
||||
|
||||
if (yFlatLeft !== yFlatRight) {
|
||||
if (Math.floor(left.y / 32) <= Math.floor(right.y_far / 32)) {
|
||||
return true;
|
||||
}
|
||||
if (Math.floor(left.y_far / 32) >= Math.floor(right.y / 32)) {
|
||||
return false;
|
||||
}
|
||||
const yCenterLeft = Math.floor((Math.floor(left.y_far / 32) + Math.floor(left.y / 32)) / 2);
|
||||
const yCenterRight = Math.floor((Math.floor(right.y_far / 32) + Math.floor(right.y / 32)) / 2);
|
||||
if (yCenterLeft !== yCenterRight) {
|
||||
return yCenterLeft < yCenterRight;
|
||||
}
|
||||
}
|
||||
|
||||
if (xFlatLeft !== xFlatRight) {
|
||||
if (Math.floor(left.x / 32) <= Math.floor(right.x_left / 32)) {
|
||||
return true;
|
||||
}
|
||||
if (Math.floor(left.x_left / 32) >= Math.floor(right.x / 32)) {
|
||||
return false;
|
||||
}
|
||||
const xCenterLeft = Math.floor((Math.floor(left.x_left / 32) + Math.floor(left.x / 32)) / 2);
|
||||
const xCenterRight = Math.floor((Math.floor(right.x_left / 32) + Math.floor(right.x / 32)) / 2);
|
||||
if (xCenterLeft !== xCenterRight) {
|
||||
return xCenterLeft < xCenterRight;
|
||||
}
|
||||
}
|
||||
|
||||
if (left.flat || right.flat) {
|
||||
if (left.z !== right.z) return left.z < right.z;
|
||||
if (left.invitem !== right.invitem) return left.invitem < right.invitem;
|
||||
if (left.flat !== right.flat) return left.flat > right.flat;
|
||||
if (left.trans !== right.trans) return left.trans < right.trans;
|
||||
if (left.anim !== right.anim) return left.anim < right.anim;
|
||||
if (left.draw !== right.draw) return left.draw > right.draw;
|
||||
if (left.solid !== right.solid) return left.solid > right.solid;
|
||||
if (left.occl !== right.occl) return left.occl > right.occl;
|
||||
if (left.fbigsq !== right.fbigsq) return left.fbigsq > right.fbigsq;
|
||||
}
|
||||
|
||||
if (left.x === right.x && left.y === right.y && left.trans !== right.trans) {
|
||||
return left.trans < right.trans;
|
||||
}
|
||||
|
||||
if (left.land && right.land && left.roof !== right.roof) {
|
||||
return left.roof < right.roof;
|
||||
}
|
||||
if (left.roof !== right.roof) {
|
||||
return left.roof > right.roof;
|
||||
}
|
||||
if (left.z !== right.z) {
|
||||
return left.z < right.z;
|
||||
}
|
||||
|
||||
if (xFlatLeft || xFlatRight || yFlatLeft || yFlatRight) {
|
||||
if (left.sx_left !== right.sx_left) {
|
||||
return left.sx_left > right.sx_left;
|
||||
}
|
||||
if (left.sy_bot !== right.sy_bot) {
|
||||
return left.sy_bot < right.sy_bot;
|
||||
}
|
||||
}
|
||||
|
||||
if (left.x + left.y !== right.x + right.y) return left.x + left.y < right.x + right.y;
|
||||
if (left.x_left + left.y_far !== right.x_left + right.y_far) return left.x_left + left.y_far < right.x_left + right.y_far;
|
||||
if (left.y !== right.y) return left.y < right.y;
|
||||
if (left.x !== right.x) return left.x < right.x;
|
||||
if (left.item.shape !== right.item.shape) return left.item.shape < right.item.shape;
|
||||
return left.item.frame < right.item.frame;
|
||||
}
|
||||
|
||||
function buildSortNode(item, info, frame, pixels) {
|
||||
const flipped = Boolean(item.flags & FLAG_FLIPPED);
|
||||
const xdim = (flipped ? info.y : info.x) * 32;
|
||||
const ydim = (flipped ? info.x : info.y) * 32;
|
||||
const zdim = info.z * 8;
|
||||
const x = item.x;
|
||||
const y = item.y;
|
||||
const z = item.z;
|
||||
const xLeft = x - xdim;
|
||||
const yFar = y - ydim;
|
||||
const zTop = z + zdim;
|
||||
const sxLeft = Math.trunc(xLeft / 4 - y / 4);
|
||||
const sxRight = Math.trunc(x / 4 - yFar / 4);
|
||||
const sxTop = Math.trunc(xLeft / 4 - yFar / 4);
|
||||
const syTop = Math.trunc(xLeft / 8 + yFar / 8 - zTop);
|
||||
const sxBot = Math.trunc(x / 4 - y / 4);
|
||||
const syBot = Math.trunc(x / 8 + y / 8 - z);
|
||||
const left = flipped ? sxBot + frame.xoff - frame.width : sxBot - frame.xoff;
|
||||
const top = syBot - frame.yoff;
|
||||
const right = left + frame.width;
|
||||
const bottom = top + frame.height;
|
||||
|
||||
return {
|
||||
item,
|
||||
info,
|
||||
frame,
|
||||
pixels,
|
||||
left,
|
||||
top,
|
||||
right,
|
||||
bottom,
|
||||
x,
|
||||
x_left: xLeft,
|
||||
y,
|
||||
y_far: yFar,
|
||||
z,
|
||||
z_top: zTop,
|
||||
sx_left: sxLeft,
|
||||
sx_right: sxRight,
|
||||
sx_top: sxTop,
|
||||
sy_top: syTop,
|
||||
sx_bot: sxBot,
|
||||
sy_bot: syBot,
|
||||
fbigsq: xdim === ydim && xdim >= 128,
|
||||
flat: zdim === 0,
|
||||
occl: info.isOccl && !info.isTranslucent,
|
||||
solid: info.isSolid,
|
||||
draw: info.isDraw,
|
||||
roof: info.isRoof,
|
||||
noisy: info.isNoisy,
|
||||
anim: info.animType !== 0,
|
||||
trans: info.isTranslucent,
|
||||
fixed: info.isFixed,
|
||||
land: info.isLand,
|
||||
sprite: false,
|
||||
invitem: info.isInvitem,
|
||||
occluded: false,
|
||||
order: -1,
|
||||
depends: []
|
||||
};
|
||||
}
|
||||
|
||||
function insertDependencySorted(depends, node) {
|
||||
for (let index = 0; index < depends.length; index += 1) {
|
||||
const current = depends[index];
|
||||
if (current === node) {
|
||||
return false;
|
||||
}
|
||||
if (listLessThan(node, current)) {
|
||||
depends.splice(index, 0, node);
|
||||
return true;
|
||||
}
|
||||
}
|
||||
depends.push(node);
|
||||
return true;
|
||||
}
|
||||
|
||||
function resolvePaintOrder(ordered, progress, checkpointEvery = 0) {
|
||||
const painted = [];
|
||||
|
||||
function visit(node) {
|
||||
if (node.occluded || node.order >= 0) {
|
||||
return;
|
||||
}
|
||||
node.order = -2;
|
||||
for (const dependency of node.depends) {
|
||||
if (dependency.order === -2) {
|
||||
break;
|
||||
}
|
||||
if (dependency.order === -1) {
|
||||
visit(dependency);
|
||||
}
|
||||
}
|
||||
node.order = painted.length ? painted[painted.length - 1].order + 1 : 0;
|
||||
painted.push(node);
|
||||
if (progress && checkpointEvery > 0 && painted.length % checkpointEvery === 0) {
|
||||
progress(`paint resolved=${painted.length} of ${ordered.length}`);
|
||||
}
|
||||
}
|
||||
|
||||
for (const node of ordered) {
|
||||
if (node.order === -1) {
|
||||
visit(node);
|
||||
}
|
||||
}
|
||||
if (progress) {
|
||||
progress(`paint complete resolved=${painted.length} of ${ordered.length}`);
|
||||
}
|
||||
return painted;
|
||||
}
|
||||
|
||||
export function prepareSortedItems(items, archive, shapeInfos, options = {}) {
|
||||
const { progress, checkpointEvery = 0, maxInvalidDetails = 20 } = options;
|
||||
const ordered = [];
|
||||
let minLeft = Number.MAX_SAFE_INTEGER;
|
||||
let minTop = Number.MAX_SAFE_INTEGER;
|
||||
let maxRight = -Number.MAX_SAFE_INTEGER;
|
||||
let maxBottom = -Number.MAX_SAFE_INTEGER;
|
||||
let occludedCount = 0;
|
||||
let invalidItemCount = 0;
|
||||
const invalidItems = [];
|
||||
let dependencyCount = 0;
|
||||
|
||||
for (let itemIndex = 0; itemIndex < items.length; itemIndex += 1) {
|
||||
const item = items[itemIndex];
|
||||
let frame;
|
||||
let pixels;
|
||||
try {
|
||||
const decoded = archive.decodeFrame(item.shape, item.frame);
|
||||
frame = decoded.frame;
|
||||
pixels = decoded.pixels;
|
||||
} catch (error) {
|
||||
invalidItemCount += 1;
|
||||
if (invalidItems.length < maxInvalidDetails) {
|
||||
invalidItems.push({
|
||||
shape: item.shape,
|
||||
frame: item.frame,
|
||||
x: item.x,
|
||||
y: item.y,
|
||||
z: item.z,
|
||||
source: item.source,
|
||||
reason: error instanceof Error ? error.message : String(error)
|
||||
});
|
||||
}
|
||||
continue;
|
||||
}
|
||||
|
||||
const node = buildSortNode(item, shapeInfos[item.shape], frame, pixels);
|
||||
minLeft = Math.min(minLeft, node.left);
|
||||
minTop = Math.min(minTop, node.top);
|
||||
maxRight = Math.max(maxRight, node.right);
|
||||
maxBottom = Math.max(maxBottom, node.bottom);
|
||||
|
||||
let insertAt = ordered.length;
|
||||
for (let index = 0; index < ordered.length; index += 1) {
|
||||
const other = ordered[index];
|
||||
if (insertAt === ordered.length && listLessThan(node, other)) {
|
||||
insertAt = index;
|
||||
}
|
||||
if (other.occluded) {
|
||||
continue;
|
||||
}
|
||||
if (!overlap(node, other)) {
|
||||
continue;
|
||||
}
|
||||
if (below(node, other)) {
|
||||
if (other.occl && occludes(other, node)) {
|
||||
node.occluded = true;
|
||||
occludedCount += 1;
|
||||
break;
|
||||
}
|
||||
if (insertDependencySorted(other.depends, node)) {
|
||||
dependencyCount += 1;
|
||||
}
|
||||
} else if (node.occl && occludes(node, other)) {
|
||||
if (!other.occluded) {
|
||||
other.occluded = true;
|
||||
occludedCount += 1;
|
||||
}
|
||||
} else if (insertDependencySorted(node.depends, other)) {
|
||||
dependencyCount += 1;
|
||||
}
|
||||
}
|
||||
ordered.splice(insertAt, 0, node);
|
||||
|
||||
if (progress && checkpointEvery > 0 && (itemIndex + 1) % checkpointEvery === 0) {
|
||||
progress(
|
||||
`sort processed=${itemIndex + 1} valid=${ordered.length} occluded=${occludedCount} invalid=${invalidItemCount} dependencies=${dependencyCount}`
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
if (progress) {
|
||||
progress(
|
||||
`sort complete processed=${items.length} valid=${ordered.length} occluded=${occludedCount} invalid=${invalidItemCount} dependencies=${dependencyCount}`
|
||||
);
|
||||
}
|
||||
|
||||
return {
|
||||
minLeft,
|
||||
minTop,
|
||||
maxRight,
|
||||
maxBottom,
|
||||
prepared: resolvePaintOrder(ordered, progress, checkpointEvery),
|
||||
occludedCount,
|
||||
invalidItemCount,
|
||||
invalidItems
|
||||
};
|
||||
}
|
||||
278
map_renderer/src/public/app.css
Normal file
278
map_renderer/src/public/app.css
Normal file
|
|
@ -0,0 +1,278 @@
|
|||
:root {
|
||||
color-scheme: light dark;
|
||||
--bg: #f1ead6;
|
||||
--panel: rgba(255, 248, 232, 0.92);
|
||||
--panel-border: rgba(94, 73, 37, 0.25);
|
||||
--ink: #2d2212;
|
||||
--muted: #6e5a37;
|
||||
--accent: #0d6c7d;
|
||||
--accent-strong: #114f59;
|
||||
--viewport: #0e1218;
|
||||
--tile-border: rgba(255, 255, 255, 0.04);
|
||||
--shadow: 0 18px 45px rgba(59, 40, 8, 0.16);
|
||||
--font-ui: "Segoe UI Variable Text", "Aptos", "Trebuchet MS", sans-serif;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--bg: #12161d;
|
||||
--panel: rgba(22, 28, 38, 0.92);
|
||||
--panel-border: rgba(166, 187, 211, 0.16);
|
||||
--ink: #edf2fa;
|
||||
--muted: #aab8cc;
|
||||
--accent: #46a7bc;
|
||||
--accent-strong: #2a7b8d;
|
||||
--viewport: #06080d;
|
||||
--tile-border: rgba(255, 255, 255, 0.03);
|
||||
--shadow: 0 18px 45px rgba(0, 0, 0, 0.35);
|
||||
}
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
min-height: 100vh;
|
||||
font-family: var(--font-ui);
|
||||
color: var(--ink);
|
||||
background:
|
||||
radial-gradient(circle at top left, rgba(255, 255, 255, 0.14), transparent 32%),
|
||||
linear-gradient(135deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 75%, #6e8aa3 25%) 100%);
|
||||
}
|
||||
|
||||
.shell {
|
||||
display: grid;
|
||||
grid-template-columns: 340px minmax(0, 1fr);
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.panel {
|
||||
padding: 24px;
|
||||
background: var(--panel);
|
||||
backdrop-filter: blur(16px);
|
||||
border-right: 1px solid var(--panel-border);
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
|
||||
.panel h1 {
|
||||
margin: 0;
|
||||
font-size: 1.6rem;
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
.lede,
|
||||
.muted {
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.stack {
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
label {
|
||||
font-weight: 700;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
select,
|
||||
button,
|
||||
.action-link {
|
||||
width: 100%;
|
||||
border-radius: 12px;
|
||||
border: 1px solid rgba(65, 48, 21, 0.18);
|
||||
padding: 12px 14px;
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
button,
|
||||
.action-link {
|
||||
cursor: pointer;
|
||||
color: white;
|
||||
background: linear-gradient(180deg, var(--accent) 0%, var(--accent-strong) 100%);
|
||||
text-decoration: none;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
button:disabled,
|
||||
select:disabled,
|
||||
.action-link.is-disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.55;
|
||||
}
|
||||
|
||||
.button-row {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.toggle-grid,
|
||||
.status,
|
||||
.meta-panel {
|
||||
padding: 12px 14px;
|
||||
border-radius: 14px;
|
||||
background: rgba(255, 255, 255, 0.58);
|
||||
border: 1px solid rgba(65, 48, 21, 0.08);
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.toggle-grid {
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.toggle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
font-weight: 600;
|
||||
font-size: 0.92rem;
|
||||
}
|
||||
|
||||
.toggle input {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.action-link {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.status {
|
||||
min-height: 72px;
|
||||
}
|
||||
|
||||
.meta-panel {
|
||||
min-height: 240px;
|
||||
}
|
||||
|
||||
.meta-empty {
|
||||
margin: 0;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.meta-section + .meta-section {
|
||||
margin-top: 14px;
|
||||
padding-top: 14px;
|
||||
border-top: 1px solid color-mix(in srgb, var(--panel-border) 70%, transparent 30%);
|
||||
}
|
||||
|
||||
.meta-title {
|
||||
margin: 0 0 8px;
|
||||
font-size: 0.84rem;
|
||||
font-weight: 800;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.meta-grid {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
gap: 6px 12px;
|
||||
font-size: 0.92rem;
|
||||
}
|
||||
|
||||
.meta-grid dt {
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.meta-grid dd {
|
||||
margin: 0;
|
||||
text-align: right;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.workspace {
|
||||
min-width: 0;
|
||||
padding: 18px;
|
||||
}
|
||||
|
||||
.viewport {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: calc(100vh - 36px);
|
||||
overflow: hidden;
|
||||
border-radius: 24px;
|
||||
background:
|
||||
linear-gradient(0deg, rgba(255,255,255,0.03), rgba(255,255,255,0.03)),
|
||||
linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px),
|
||||
linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
|
||||
var(--viewport);
|
||||
background-size: auto, 32px 32px, 32px 32px, auto;
|
||||
box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05), var(--shadow);
|
||||
touch-action: none;
|
||||
cursor: grab;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.scene {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
transform-origin: top left;
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
.layer {
|
||||
position: absolute;
|
||||
inset: 0 auto auto 0;
|
||||
}
|
||||
|
||||
.tile {
|
||||
position: absolute;
|
||||
image-rendering: pixelated;
|
||||
image-rendering: crisp-edges;
|
||||
border: 1px solid var(--tile-border);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.viewport.is-dragging {
|
||||
cursor: grabbing;
|
||||
}
|
||||
|
||||
.viewport-hint {
|
||||
position: absolute;
|
||||
top: 16px;
|
||||
left: 16px;
|
||||
z-index: 2;
|
||||
padding: 8px 12px;
|
||||
border-radius: 999px;
|
||||
background: rgba(6, 8, 12, 0.66);
|
||||
color: rgba(255, 255, 255, 0.82);
|
||||
font-size: 0.86rem;
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
padding: 24px;
|
||||
color: rgba(255,255,255,0.72);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.shell {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.panel {
|
||||
border-right: 0;
|
||||
border-bottom: 1px solid var(--panel-border);
|
||||
}
|
||||
|
||||
.viewport {
|
||||
height: 70vh;
|
||||
}
|
||||
}
|
||||
559
map_renderer/src/public/app.js
Normal file
559
map_renderer/src/public/app.js
Normal file
|
|
@ -0,0 +1,559 @@
|
|||
const mapForm = document.querySelector("#map-form");
|
||||
const mapSelect = document.querySelector("#map-select");
|
||||
const buildButton = document.querySelector("#build-button");
|
||||
const includeEditorCheckbox = document.querySelector("#include-editor");
|
||||
const includeRoofsCheckbox = document.querySelector("#include-roofs");
|
||||
const downloadButton = document.querySelector("#download-button");
|
||||
const statusBox = document.querySelector("#status");
|
||||
const metaBox = document.querySelector("#meta");
|
||||
const viewport = document.querySelector("#viewport");
|
||||
const scene = document.querySelector("#scene");
|
||||
const emptyState = document.querySelector("#empty-state");
|
||||
const zoomLabel = document.querySelector("#zoom-label");
|
||||
const zoomInButton = document.querySelector("#zoom-in");
|
||||
const zoomOutButton = document.querySelector("#zoom-out");
|
||||
const zoomResetButton = document.querySelector("#zoom-reset");
|
||||
const zoomFitButton = document.querySelector("#zoom-fit");
|
||||
|
||||
let activeLayer = document.querySelector("#active-layer");
|
||||
let autoBuildTimer = null;
|
||||
|
||||
const state = {
|
||||
catalog: null,
|
||||
current: null,
|
||||
zoom: 1,
|
||||
offsetX: 0,
|
||||
offsetY: 0,
|
||||
buildPollTimer: null,
|
||||
buildToken: 0,
|
||||
drag: null,
|
||||
pointers: new Map(),
|
||||
pinch: null
|
||||
};
|
||||
|
||||
const ZOOM_FACTOR = 1.2;
|
||||
const FIT_PADDING = 24;
|
||||
|
||||
async function fetchJson(url, init) {
|
||||
const response = await fetch(url, init);
|
||||
if (!response.ok) {
|
||||
let message = `HTTP ${response.status}`;
|
||||
try {
|
||||
const body = await response.json();
|
||||
if (body.error) {
|
||||
message = body.error;
|
||||
}
|
||||
} catch {
|
||||
// Ignore parse failures.
|
||||
}
|
||||
throw new Error(message);
|
||||
}
|
||||
return response.json();
|
||||
}
|
||||
|
||||
function setStatus(message) {
|
||||
statusBox.textContent = message;
|
||||
}
|
||||
|
||||
function setMeta(metadata) {
|
||||
if (!metadata) {
|
||||
metaBox.innerHTML = '<p class="meta-empty">Select a map to see render metadata.</p>';
|
||||
return;
|
||||
}
|
||||
|
||||
metaBox.innerHTML = `
|
||||
<section class="meta-section">
|
||||
<h2 class="meta-title">Overview</h2>
|
||||
<dl class="meta-grid">
|
||||
<dt>Game</dt><dd>${metadata.gameLabel}</dd>
|
||||
<dt>Map</dt><dd>${metadata.map}</dd>
|
||||
<dt>Bounds</dt><dd>${metadata.bounds.width} x ${metadata.bounds.height}</dd>
|
||||
<dt>Tiles</dt><dd>${metadata.tileCountX} x ${metadata.tileCountY}</dd>
|
||||
</dl>
|
||||
</section>
|
||||
<section class="meta-section">
|
||||
<h2 class="meta-title">Render</h2>
|
||||
<dl class="meta-grid">
|
||||
<dt>Raw items</dt><dd>${metadata.rawItemCount}</dd>
|
||||
<dt>Render items</dt><dd>${metadata.itemCount}</dd>
|
||||
<dt>Painted items</dt><dd>${metadata.paintedItemCount}</dd>
|
||||
<dt>Occluded</dt><dd>${metadata.occludedItemCount}</dd>
|
||||
<dt>Invalid</dt><dd>${metadata.invalidItemCount}</dd>
|
||||
</dl>
|
||||
</section>
|
||||
<section class="meta-section">
|
||||
<h2 class="meta-title">Filters</h2>
|
||||
<dl class="meta-grid">
|
||||
<dt>Editor-only</dt><dd>${metadata.filters.includeEditor ? "Shown" : "Hidden"}</dd>
|
||||
<dt>Roofs</dt><dd>${metadata.filters.includeRoofs ? "Shown" : "Hidden"}</dd>
|
||||
<dt>Empty map</dt><dd>${metadata.isEmpty ? "Yes" : "No"}</dd>
|
||||
</dl>
|
||||
${metadata.emptyReason ? `<p class="muted">${metadata.emptyReason}</p>` : ""}
|
||||
</section>
|
||||
`;
|
||||
}
|
||||
|
||||
function enableZoomControls(enabled) {
|
||||
zoomInButton.disabled = !enabled;
|
||||
zoomOutButton.disabled = !enabled;
|
||||
zoomResetButton.disabled = !enabled;
|
||||
zoomFitButton.disabled = !enabled;
|
||||
}
|
||||
|
||||
function setDownloadState(enabled, href = "#") {
|
||||
downloadButton.href = href;
|
||||
downloadButton.classList.toggle("is-disabled", !enabled);
|
||||
downloadButton.setAttribute("aria-disabled", String(!enabled));
|
||||
}
|
||||
|
||||
function updateZoomLabel() {
|
||||
zoomLabel.textContent = `Zoom: ${Math.round(state.zoom * 100)}%`;
|
||||
}
|
||||
|
||||
function updateSceneLayout() {
|
||||
if (!state.current) {
|
||||
scene.style.width = "0px";
|
||||
scene.style.height = "0px";
|
||||
scene.style.transform = "translate(0px, 0px) scale(1)";
|
||||
return;
|
||||
}
|
||||
const { metadata } = state.current;
|
||||
scene.style.width = `${metadata.bounds.width}px`;
|
||||
scene.style.height = `${metadata.bounds.height}px`;
|
||||
scene.style.transform = `translate(${state.offsetX}px, ${state.offsetY}px) scale(${state.zoom})`;
|
||||
}
|
||||
|
||||
function clampZoom(nextZoom) {
|
||||
if (!state.current) {
|
||||
return 1;
|
||||
}
|
||||
const { min, max } = state.current.metadata.zoom;
|
||||
return Math.min(max, Math.max(min, nextZoom));
|
||||
}
|
||||
|
||||
function clampOffsets() {
|
||||
if (!state.current) {
|
||||
return;
|
||||
}
|
||||
const { width, height } = state.current.metadata.bounds;
|
||||
const scaledWidth = width * state.zoom;
|
||||
const scaledHeight = height * state.zoom;
|
||||
|
||||
if (scaledWidth <= viewport.clientWidth) {
|
||||
state.offsetX = (viewport.clientWidth - scaledWidth) / 2;
|
||||
} else {
|
||||
state.offsetX = Math.min(0, Math.max(viewport.clientWidth - scaledWidth, state.offsetX));
|
||||
}
|
||||
|
||||
if (scaledHeight <= viewport.clientHeight) {
|
||||
state.offsetY = (viewport.clientHeight - scaledHeight) / 2;
|
||||
} else {
|
||||
state.offsetY = Math.min(0, Math.max(viewport.clientHeight - scaledHeight, state.offsetY));
|
||||
}
|
||||
}
|
||||
|
||||
function setZoom(nextZoom, anchor = null) {
|
||||
if (!state.current) {
|
||||
return;
|
||||
}
|
||||
const clamped = clampZoom(nextZoom);
|
||||
if (clamped === state.zoom) {
|
||||
updateZoomLabel();
|
||||
return;
|
||||
}
|
||||
|
||||
const focus = anchor ?? { x: viewport.clientWidth / 2, y: viewport.clientHeight / 2 };
|
||||
const worldX = (focus.x - state.offsetX) / state.zoom;
|
||||
const worldY = (focus.y - state.offsetY) / state.zoom;
|
||||
|
||||
state.zoom = clamped;
|
||||
state.offsetX = focus.x - worldX * state.zoom;
|
||||
state.offsetY = focus.y - worldY * state.zoom;
|
||||
clampOffsets();
|
||||
updateSceneLayout();
|
||||
updateZoomLabel();
|
||||
}
|
||||
|
||||
function fitMap() {
|
||||
if (!state.current) {
|
||||
return;
|
||||
}
|
||||
const { width, height } = state.current.metadata.bounds;
|
||||
const scaleX = Math.max(0.01, (viewport.clientWidth - FIT_PADDING * 2) / width);
|
||||
const scaleY = Math.max(0.01, (viewport.clientHeight - FIT_PADDING * 2) / height);
|
||||
state.zoom = clampZoom(Math.min(scaleX, scaleY));
|
||||
clampOffsets();
|
||||
updateSceneLayout();
|
||||
updateZoomLabel();
|
||||
}
|
||||
|
||||
function tileUrl(buildContext, tileX, tileY) {
|
||||
const { selected, jobId } = buildContext;
|
||||
return `/api/maps/${selected.game}/${selected.mapId}/tiles/${tileX}/${tileY}.png?buildId=${encodeURIComponent(jobId)}`;
|
||||
}
|
||||
|
||||
function createTileElement(tileX, tileY, buildContext, metadata) {
|
||||
const tileSize = metadata.tileSize;
|
||||
const tile = document.createElement("img");
|
||||
tile.className = "tile";
|
||||
tile.alt = `Tile ${tileX},${tileY}`;
|
||||
tile.loading = "eager";
|
||||
tile.decoding = "async";
|
||||
tile.draggable = false;
|
||||
tile.src = tileUrl(buildContext, tileX, tileY);
|
||||
tile.style.left = `${tileX * tileSize}px`;
|
||||
tile.style.top = `${tileY * tileSize}px`;
|
||||
tile.style.width = `${Math.min(tileSize, metadata.bounds.width - tileX * tileSize)}px`;
|
||||
tile.style.height = `${Math.min(tileSize, metadata.bounds.height - tileY * tileSize)}px`;
|
||||
return tile;
|
||||
}
|
||||
|
||||
function waitForImage(tile) {
|
||||
if (tile.complete && tile.naturalWidth > 0) {
|
||||
return tile.decode?.().catch(() => undefined) ?? Promise.resolve();
|
||||
}
|
||||
return new Promise((resolve, reject) => {
|
||||
tile.addEventListener(
|
||||
"load",
|
||||
() => {
|
||||
const decodePromise = tile.decode?.().catch(() => undefined);
|
||||
Promise.resolve(decodePromise).then(resolve);
|
||||
},
|
||||
{ once: true }
|
||||
);
|
||||
tile.addEventListener("error", () => reject(new Error(`Failed to load ${tile.alt}`)), { once: true });
|
||||
});
|
||||
}
|
||||
|
||||
async function buildLayer(buildContext) {
|
||||
const layer = document.createElement("div");
|
||||
layer.className = "layer";
|
||||
const { metadata } = buildContext;
|
||||
layer.style.width = `${metadata.bounds.width}px`;
|
||||
layer.style.height = `${metadata.bounds.height}px`;
|
||||
|
||||
const tilePromises = [];
|
||||
for (let tileY = 0; tileY < metadata.tileCountY; tileY += 1) {
|
||||
for (let tileX = 0; tileX < metadata.tileCountX; tileX += 1) {
|
||||
const tile = createTileElement(tileX, tileY, buildContext, metadata);
|
||||
layer.append(tile);
|
||||
tilePromises.push(waitForImage(tile));
|
||||
}
|
||||
}
|
||||
|
||||
await Promise.all(tilePromises);
|
||||
return layer;
|
||||
}
|
||||
|
||||
function getSelectedMap() {
|
||||
if (!mapSelect.value) {
|
||||
return null;
|
||||
}
|
||||
return JSON.parse(mapSelect.value);
|
||||
}
|
||||
|
||||
function currentSelectionMatches(selected) {
|
||||
return Boolean(
|
||||
state.current &&
|
||||
state.current.selected.game === selected.game &&
|
||||
state.current.selected.mapId === selected.mapId
|
||||
);
|
||||
}
|
||||
|
||||
function currentFiltersMatch() {
|
||||
return Boolean(
|
||||
state.current &&
|
||||
state.current.metadata.filters.includeEditor === includeEditorCheckbox.checked &&
|
||||
state.current.metadata.filters.includeRoofs === includeRoofsCheckbox.checked
|
||||
);
|
||||
}
|
||||
|
||||
function scheduleAutoBuild() {
|
||||
clearTimeout(autoBuildTimer);
|
||||
autoBuildTimer = window.setTimeout(() => {
|
||||
const selected = getSelectedMap();
|
||||
if (!selected) {
|
||||
return;
|
||||
}
|
||||
if (currentSelectionMatches(selected) && currentFiltersMatch()) {
|
||||
return;
|
||||
}
|
||||
startBuild(selected).catch((error) => {
|
||||
setStatus(error instanceof Error ? error.message : String(error));
|
||||
});
|
||||
}, 100);
|
||||
}
|
||||
|
||||
function populateCatalog(catalog) {
|
||||
state.catalog = catalog;
|
||||
mapSelect.innerHTML = "";
|
||||
const placeholder = document.createElement("option");
|
||||
placeholder.textContent = "Select a map";
|
||||
placeholder.value = "";
|
||||
mapSelect.append(placeholder);
|
||||
|
||||
for (const game of catalog.games) {
|
||||
const group = document.createElement("optgroup");
|
||||
group.label = `${game.label} (${game.mapCount} maps)`;
|
||||
for (const map of game.maps) {
|
||||
const option = document.createElement("option");
|
||||
option.value = JSON.stringify({ game: game.id, mapId: map.id });
|
||||
option.textContent = `${map.label} (${map.rawItemCount} items)`;
|
||||
group.append(option);
|
||||
}
|
||||
mapSelect.append(group);
|
||||
}
|
||||
|
||||
mapSelect.disabled = catalog.games.length === 0;
|
||||
buildButton.disabled = catalog.games.length === 0;
|
||||
setDownloadState(false);
|
||||
if (catalog.games.length === 0) {
|
||||
setStatus("No usable STATIC folders were detected under the app root.");
|
||||
} else {
|
||||
setStatus("Select a map to build it immediately.");
|
||||
}
|
||||
}
|
||||
|
||||
async function startBuild(selected) {
|
||||
clearTimeout(state.buildPollTimer);
|
||||
const token = ++state.buildToken;
|
||||
const preserveView = currentSelectionMatches(selected);
|
||||
|
||||
if (!state.current) {
|
||||
emptyState.hidden = false;
|
||||
enableZoomControls(false);
|
||||
setMeta(null);
|
||||
setDownloadState(false);
|
||||
}
|
||||
|
||||
setStatus(
|
||||
preserveView
|
||||
? `Rebuilding ${selected.game} map ${selected.mapId}. The current view stays visible until the new tiles are ready.`
|
||||
: `Building ${selected.game} map ${selected.mapId}...`
|
||||
);
|
||||
|
||||
const build = await fetchJson("/api/builds", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({
|
||||
...selected,
|
||||
includeEditor: includeEditorCheckbox.checked,
|
||||
includeRoofs: includeRoofsCheckbox.checked
|
||||
})
|
||||
});
|
||||
|
||||
await pollBuild(build.id, selected, token, preserveView);
|
||||
}
|
||||
|
||||
async function pollBuild(jobId, selected, token, preserveView) {
|
||||
if (token !== state.buildToken) {
|
||||
return;
|
||||
}
|
||||
|
||||
const build = await fetchJson(`/api/builds/${encodeURIComponent(jobId)}`);
|
||||
if (token !== state.buildToken) {
|
||||
return;
|
||||
}
|
||||
|
||||
const latest = build.progress.at(-1);
|
||||
setStatus(latest ? `${build.phase}: ${latest.message}` : `${build.phase}...`);
|
||||
if (build.status === "failed") {
|
||||
throw new Error(build.error || "Build failed");
|
||||
}
|
||||
if (build.status !== "ready") {
|
||||
state.buildPollTimer = window.setTimeout(() => {
|
||||
pollBuild(jobId, selected, token, preserveView).catch((error) => {
|
||||
setStatus(error.message);
|
||||
});
|
||||
}, 1000);
|
||||
return;
|
||||
}
|
||||
|
||||
const metadata = await fetchJson(
|
||||
`/api/maps/${selected.game}/${selected.mapId}/metadata?buildId=${encodeURIComponent(jobId)}`
|
||||
);
|
||||
if (token !== state.buildToken) {
|
||||
return;
|
||||
}
|
||||
|
||||
const nextContext = { selected, jobId, metadata };
|
||||
const nextLayer = await buildLayer(nextContext);
|
||||
if (token !== state.buildToken) {
|
||||
return;
|
||||
}
|
||||
|
||||
state.current = nextContext;
|
||||
activeLayer.replaceWith(nextLayer);
|
||||
activeLayer = nextLayer;
|
||||
|
||||
if (!preserveView) {
|
||||
fitMap();
|
||||
} else {
|
||||
clampOffsets();
|
||||
updateSceneLayout();
|
||||
updateZoomLabel();
|
||||
}
|
||||
|
||||
setMeta(metadata);
|
||||
setDownloadState(
|
||||
true,
|
||||
`/api/maps/${selected.game}/${selected.mapId}/download.png?buildId=${encodeURIComponent(jobId)}`
|
||||
);
|
||||
setStatus(`Ready. ${selected.game} map ${selected.mapId} is fully loaded.`);
|
||||
emptyState.hidden = true;
|
||||
enableZoomControls(true);
|
||||
}
|
||||
|
||||
async function loadCatalog() {
|
||||
const catalog = await fetchJson("/api/maps");
|
||||
populateCatalog(catalog);
|
||||
}
|
||||
|
||||
mapForm.addEventListener("submit", async (event) => {
|
||||
event.preventDefault();
|
||||
const selected = getSelectedMap();
|
||||
if (!selected) {
|
||||
setStatus("Choose a map first.");
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
await startBuild(selected);
|
||||
} catch (error) {
|
||||
setStatus(error instanceof Error ? error.message : String(error));
|
||||
}
|
||||
});
|
||||
|
||||
mapSelect.addEventListener("change", scheduleAutoBuild);
|
||||
includeEditorCheckbox.addEventListener("change", scheduleAutoBuild);
|
||||
includeRoofsCheckbox.addEventListener("change", scheduleAutoBuild);
|
||||
|
||||
downloadButton.addEventListener("click", (event) => {
|
||||
if (downloadButton.classList.contains("is-disabled")) {
|
||||
event.preventDefault();
|
||||
}
|
||||
});
|
||||
|
||||
window.addEventListener("resize", () => {
|
||||
if (state.current) {
|
||||
clampOffsets();
|
||||
updateSceneLayout();
|
||||
}
|
||||
});
|
||||
|
||||
zoomInButton.addEventListener("click", () => {
|
||||
setZoom(state.zoom * ZOOM_FACTOR);
|
||||
});
|
||||
|
||||
zoomOutButton.addEventListener("click", () => {
|
||||
setZoom(state.zoom / ZOOM_FACTOR);
|
||||
});
|
||||
|
||||
zoomResetButton.addEventListener("click", () => {
|
||||
setZoom(1);
|
||||
});
|
||||
|
||||
zoomFitButton.addEventListener("click", () => {
|
||||
fitMap();
|
||||
});
|
||||
|
||||
viewport.addEventListener(
|
||||
"wheel",
|
||||
(event) => {
|
||||
if (!state.current) {
|
||||
return;
|
||||
}
|
||||
event.preventDefault();
|
||||
const rect = viewport.getBoundingClientRect();
|
||||
const nextZoom = event.deltaY < 0 ? state.zoom * ZOOM_FACTOR : state.zoom / ZOOM_FACTOR;
|
||||
setZoom(nextZoom, { x: event.clientX - rect.left, y: event.clientY - rect.top });
|
||||
},
|
||||
{ passive: false }
|
||||
);
|
||||
|
||||
viewport.addEventListener("pointerdown", (event) => {
|
||||
if (!state.current) {
|
||||
return;
|
||||
}
|
||||
event.preventDefault();
|
||||
viewport.setPointerCapture(event.pointerId);
|
||||
state.pointers.set(event.pointerId, { x: event.clientX, y: event.clientY });
|
||||
|
||||
if (state.pointers.size === 1) {
|
||||
state.drag = {
|
||||
pointerId: event.pointerId,
|
||||
startX: event.clientX,
|
||||
startY: event.clientY,
|
||||
originX: state.offsetX,
|
||||
originY: state.offsetY
|
||||
};
|
||||
viewport.classList.add("is-dragging");
|
||||
}
|
||||
|
||||
if (state.pointers.size === 2) {
|
||||
const [first, second] = [...state.pointers.values()];
|
||||
state.pinch = {
|
||||
distance: Math.hypot(second.x - first.x, second.y - first.y),
|
||||
zoom: state.zoom
|
||||
};
|
||||
state.drag = null;
|
||||
}
|
||||
});
|
||||
|
||||
viewport.addEventListener("pointermove", (event) => {
|
||||
if (!state.current || !state.pointers.has(event.pointerId)) {
|
||||
return;
|
||||
}
|
||||
state.pointers.set(event.pointerId, { x: event.clientX, y: event.clientY });
|
||||
|
||||
if (state.pointers.size === 2 && state.pinch) {
|
||||
const [first, second] = [...state.pointers.values()];
|
||||
const distance = Math.hypot(second.x - first.x, second.y - first.y);
|
||||
if (distance > 0) {
|
||||
const rect = viewport.getBoundingClientRect();
|
||||
const center = {
|
||||
x: (first.x + second.x) / 2 - rect.left,
|
||||
y: (first.y + second.y) / 2 - rect.top
|
||||
};
|
||||
setZoom(state.pinch.zoom * (distance / state.pinch.distance), center);
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
if (!state.drag || state.drag.pointerId !== event.pointerId) {
|
||||
return;
|
||||
}
|
||||
|
||||
state.offsetX = state.drag.originX + (event.clientX - state.drag.startX);
|
||||
state.offsetY = state.drag.originY + (event.clientY - state.drag.startY);
|
||||
clampOffsets();
|
||||
updateSceneLayout();
|
||||
});
|
||||
|
||||
function releasePointer(event) {
|
||||
state.pointers.delete(event.pointerId);
|
||||
if (viewport.hasPointerCapture(event.pointerId)) {
|
||||
viewport.releasePointerCapture(event.pointerId);
|
||||
}
|
||||
if (state.pointers.size < 2) {
|
||||
state.pinch = null;
|
||||
}
|
||||
if (state.drag?.pointerId === event.pointerId) {
|
||||
state.drag = null;
|
||||
}
|
||||
if (state.pointers.size === 0) {
|
||||
viewport.classList.remove("is-dragging");
|
||||
}
|
||||
}
|
||||
|
||||
viewport.addEventListener("pointerup", releasePointer);
|
||||
viewport.addEventListener("pointercancel", releasePointer);
|
||||
viewport.addEventListener("lostpointercapture", releasePointer);
|
||||
|
||||
enableZoomControls(false);
|
||||
updateZoomLabel();
|
||||
setMeta(null);
|
||||
setDownloadState(false);
|
||||
loadCatalog().catch((error) => {
|
||||
setStatus(error instanceof Error ? error.message : String(error));
|
||||
});
|
||||
65
map_renderer/src/public/index.html
Normal file
65
map_renderer/src/public/index.html
Normal file
|
|
@ -0,0 +1,65 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Crusader Map Renderer</title>
|
||||
<link rel="stylesheet" href="/app.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="shell">
|
||||
<aside class="panel">
|
||||
<h1>Crusader Map Renderer</h1>
|
||||
<p class="lede">Server-rendered tiles only. Source assets stay on the server.</p>
|
||||
|
||||
<form id="map-form" class="stack">
|
||||
<label for="map-select">Detected maps</label>
|
||||
<select id="map-select" name="map" disabled>
|
||||
<option>Loading map catalog...</option>
|
||||
</select>
|
||||
<div class="toggle-grid">
|
||||
<label class="toggle"><input id="include-editor" type="checkbox" checked> Show editor-only elements</label>
|
||||
<label class="toggle"><input id="include-roofs" type="checkbox"> Show roofs</label>
|
||||
</div>
|
||||
<button id="build-button" type="submit" disabled>Rebuild now</button>
|
||||
</form>
|
||||
|
||||
<div class="stack controls">
|
||||
<label>View</label>
|
||||
<div class="button-row">
|
||||
<button id="zoom-out" type="button" disabled>-</button>
|
||||
<button id="zoom-reset" type="button" disabled>100%</button>
|
||||
<button id="zoom-in" type="button" disabled>+</button>
|
||||
<button id="zoom-fit" type="button" disabled>Fit</button>
|
||||
</div>
|
||||
<div id="zoom-label" class="muted">Zoom: --</div>
|
||||
<a id="download-button" class="action-link is-disabled" aria-disabled="true" href="#">Download PNG</a>
|
||||
</div>
|
||||
|
||||
<div class="stack">
|
||||
<label>Status</label>
|
||||
<div id="status" class="status">Idle.</div>
|
||||
</div>
|
||||
|
||||
<div class="stack">
|
||||
<label>Map Metadata</label>
|
||||
<div id="meta" class="meta-panel">
|
||||
<p class="meta-empty">Select a map to see render metadata.</p>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<main class="workspace">
|
||||
<div id="viewport" class="viewport">
|
||||
<div id="viewport-hint" class="viewport-hint">Drag to pan. Scroll or pinch to zoom.</div>
|
||||
<div id="scene" class="scene">
|
||||
<div id="active-layer" class="layer"></div>
|
||||
</div>
|
||||
<div id="empty-state" class="empty-state">Choose a detected map to build and view it.</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<script type="module" src="/app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
102
map_renderer/src/server.js
Normal file
102
map_renderer/src/server.js
Normal file
|
|
@ -0,0 +1,102 @@
|
|||
import express from "express";
|
||||
import path from "node:path";
|
||||
|
||||
import { PORT, PUBLIC_ROOT } from "./config.js";
|
||||
import { BuildManager } from "./lib/build-manager.js";
|
||||
import { detectCatalog, getGameConfig } from "./lib/catalog.js";
|
||||
|
||||
const app = express();
|
||||
const catalog = detectCatalog();
|
||||
const builds = new BuildManager(catalog);
|
||||
|
||||
app.disable("x-powered-by");
|
||||
app.use(express.json({ limit: "64kb" }));
|
||||
app.use(express.static(PUBLIC_ROOT, { extensions: ["html"] }));
|
||||
|
||||
app.get("/api/maps", (_request, response) => {
|
||||
response.json(builds.listCatalog());
|
||||
});
|
||||
|
||||
app.post("/api/builds", async (request, response) => {
|
||||
try {
|
||||
const game = String(request.body?.game ?? "");
|
||||
const mapId = Number.parseInt(String(request.body?.mapId ?? ""), 10);
|
||||
const options = {
|
||||
includeEditor: request.body?.includeEditor !== false,
|
||||
includeRoofs: request.body?.includeRoofs === true
|
||||
};
|
||||
const gameConfig = getGameConfig(game);
|
||||
if (!gameConfig) {
|
||||
response.status(400).json({ error: "Unknown game id" });
|
||||
return;
|
||||
}
|
||||
if (!Number.isInteger(mapId) || mapId < 0) {
|
||||
response.status(400).json({ error: "Invalid map id" });
|
||||
return;
|
||||
}
|
||||
const job = await builds.createOrReuseBuild(gameConfig, mapId, options);
|
||||
response.status(202).json(builds.getPublicJob(job));
|
||||
} catch (error) {
|
||||
response.status(500).json({ error: error instanceof Error ? error.message : String(error) });
|
||||
}
|
||||
});
|
||||
|
||||
app.get("/api/builds/:id", (request, response) => {
|
||||
const job = builds.getJob(request.params.id);
|
||||
if (!job) {
|
||||
response.status(404).json({ error: "Unknown build id" });
|
||||
return;
|
||||
}
|
||||
response.json(builds.getPublicJob(job));
|
||||
});
|
||||
|
||||
app.get("/api/maps/:game/:mapId/metadata", (request, response) => {
|
||||
try {
|
||||
const buildId = String(request.query.buildId ?? "");
|
||||
const mapId = Number.parseInt(request.params.mapId, 10);
|
||||
const metadata = builds.getMetadata(buildId, request.params.game, mapId);
|
||||
response.json(metadata);
|
||||
} catch (error) {
|
||||
response.status(400).json({ error: error instanceof Error ? error.message : String(error) });
|
||||
}
|
||||
});
|
||||
|
||||
app.get("/api/maps/:game/:mapId/tiles/:tileX/:tileY.png", (request, response) => {
|
||||
try {
|
||||
const buildId = String(request.query.buildId ?? "");
|
||||
const mapId = Number.parseInt(request.params.mapId, 10);
|
||||
const tileX = Number.parseInt(request.params.tileX, 10);
|
||||
const tileY = Number.parseInt(request.params.tileY, 10);
|
||||
if (!Number.isInteger(tileX) || !Number.isInteger(tileY) || tileX < 0 || tileY < 0) {
|
||||
response.status(400).json({ error: "Invalid tile coordinates" });
|
||||
return;
|
||||
}
|
||||
const png = builds.renderTile(buildId, request.params.game, mapId, tileX, tileY);
|
||||
response.setHeader("Content-Type", "image/png");
|
||||
response.setHeader("Cache-Control", "public, max-age=31536000, immutable");
|
||||
response.end(png);
|
||||
} catch (error) {
|
||||
response.status(400).json({ error: error instanceof Error ? error.message : String(error) });
|
||||
}
|
||||
});
|
||||
|
||||
app.get("/api/maps/:game/:mapId/download.png", async (request, response) => {
|
||||
try {
|
||||
const buildId = String(request.query.buildId ?? "");
|
||||
const mapId = Number.parseInt(request.params.mapId, 10);
|
||||
const filePath = await builds.renderFullMap(buildId, request.params.game, mapId);
|
||||
response.setHeader("Content-Type", "image/png");
|
||||
response.setHeader("Content-Disposition", `attachment; filename="${path.basename(filePath)}"`);
|
||||
response.sendFile(path.resolve(filePath), { dotfiles: "allow" });
|
||||
} catch (error) {
|
||||
response.status(400).json({ error: error instanceof Error ? error.message : String(error) });
|
||||
}
|
||||
});
|
||||
|
||||
app.get("/api/health", (_request, response) => {
|
||||
response.json({ ok: true, games: catalog.games.length });
|
||||
});
|
||||
|
||||
app.listen(PORT, () => {
|
||||
console.log(`Crusader map renderer listening on http://localhost:${PORT}`);
|
||||
});
|
||||
6
package-lock.json
generated
Normal file
6
package-lock.json
generated
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
{
|
||||
"name": "Crusader",
|
||||
"lockfileVersion": 3,
|
||||
"requires": true,
|
||||
"packages": {}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue