919 lines
31 KiB
JavaScript
919 lines
31 KiB
JavaScript
// Copyright (c) 2026 Dominic Masters
|
|
//
|
|
// This software is released under the MIT License.
|
|
// https://opensource.org/licenses/MIT
|
|
|
|
"use strict";
|
|
|
|
(() => {
|
|
const SHAPES = [
|
|
{ type: ChunkTerrain.TILE_SHAPE_NULL, name: "Erase", color: "#20232a" },
|
|
{ type: ChunkTerrain.TILE_SHAPE_GROUND, name: "Ground", color: "#4caf50" },
|
|
{ type: ChunkTerrain.TILE_SHAPE_RAMP_NORTH, name: "Ramp North", color: "#2196f3" },
|
|
{ type: ChunkTerrain.TILE_SHAPE_RAMP_EAST, name: "Ramp East", color: "#03a9f4" },
|
|
{ type: ChunkTerrain.TILE_SHAPE_RAMP_SOUTH, name: "Ramp South", color: "#00bcd4" },
|
|
{ type: ChunkTerrain.TILE_SHAPE_RAMP_WEST, name: "Ramp West", color: "#009688" },
|
|
{ type: ChunkTerrain.TILE_SHAPE_RAMP_NORTHEAST, name: "Ramp NE", color: "#ff9800" },
|
|
{ type: ChunkTerrain.TILE_SHAPE_RAMP_NORTHWEST, name: "Ramp NW", color: "#ff5722" },
|
|
{ type: ChunkTerrain.TILE_SHAPE_RAMP_SOUTHEAST, name: "Ramp SE", color: "#9c27b0" },
|
|
{ type: ChunkTerrain.TILE_SHAPE_RAMP_SOUTHWEST, name: "Ramp SW", color: "#e91e63" },
|
|
{ type: ChunkTerrain.TILE_SHAPE_RAMP_NORTHEAST_INNER, name: "Ramp NE Inner", color: "#795548" },
|
|
{ type: ChunkTerrain.TILE_SHAPE_RAMP_NORTHWEST_INNER, name: "Ramp NW Inner", color: "#607d8b" },
|
|
{ type: ChunkTerrain.TILE_SHAPE_RAMP_SOUTHEAST_INNER, name: "Ramp SE Inner", color: "#8bc34a" },
|
|
{ type: ChunkTerrain.TILE_SHAPE_RAMP_SOUTHWEST_INNER, name: "Ramp SW Inner", color: "#ffc107" },
|
|
];
|
|
const SHAPE_COLORS = Object.fromEntries(SHAPES.map((s) => [s.type, s.color]));
|
|
|
|
// Arrow direction per ramp, in canvas/screen space: north is up (dy < 0),
|
|
// east is right (dx > 0) - matches renderGrid()'s north-is-up convention.
|
|
const SHAPE_DIRECTIONS = {
|
|
[ChunkTerrain.TILE_SHAPE_RAMP_NORTH]: { dx: 0, dy: -1 },
|
|
[ChunkTerrain.TILE_SHAPE_RAMP_SOUTH]: { dx: 0, dy: 1 },
|
|
[ChunkTerrain.TILE_SHAPE_RAMP_EAST]: { dx: 1, dy: 0 },
|
|
[ChunkTerrain.TILE_SHAPE_RAMP_WEST]: { dx: -1, dy: 0 },
|
|
[ChunkTerrain.TILE_SHAPE_RAMP_NORTHEAST]: { dx: 1, dy: -1 },
|
|
[ChunkTerrain.TILE_SHAPE_RAMP_NORTHWEST]: { dx: -1, dy: -1 },
|
|
[ChunkTerrain.TILE_SHAPE_RAMP_SOUTHEAST]: { dx: 1, dy: 1 },
|
|
[ChunkTerrain.TILE_SHAPE_RAMP_SOUTHWEST]: { dx: -1, dy: 1 },
|
|
[ChunkTerrain.TILE_SHAPE_RAMP_NORTHEAST_INNER]: { dx: 1, dy: -1 },
|
|
[ChunkTerrain.TILE_SHAPE_RAMP_NORTHWEST_INNER]: { dx: -1, dy: -1 },
|
|
[ChunkTerrain.TILE_SHAPE_RAMP_SOUTHEAST_INNER]: { dx: 1, dy: 1 },
|
|
[ChunkTerrain.TILE_SHAPE_RAMP_SOUTHWEST_INNER]: { dx: -1, dy: 1 },
|
|
};
|
|
|
|
const INNER_CORNER_SHAPES = new Set([
|
|
ChunkTerrain.TILE_SHAPE_RAMP_NORTHEAST_INNER,
|
|
ChunkTerrain.TILE_SHAPE_RAMP_NORTHWEST_INNER,
|
|
ChunkTerrain.TILE_SHAPE_RAMP_SOUTHEAST_INNER,
|
|
ChunkTerrain.TILE_SHAPE_RAMP_SOUTHWEST_INNER,
|
|
]);
|
|
|
|
// Draws a single-headed arrow from (tailX, tailY) to (tipX, tipY).
|
|
function drawArrowSegment(ctx, tailX, tailY, tipX, tipY, size) {
|
|
ctx.strokeStyle = "#ffffff";
|
|
ctx.fillStyle = "#ffffff";
|
|
ctx.lineWidth = Math.max(1, size * 0.08);
|
|
ctx.lineCap = "round";
|
|
|
|
ctx.beginPath();
|
|
ctx.moveTo(tailX, tailY);
|
|
ctx.lineTo(tipX, tipY);
|
|
ctx.stroke();
|
|
|
|
const headLen = size * 0.18;
|
|
const angle = Math.atan2(tipY - tailY, tipX - tailX);
|
|
const leftAngle = angle + Math.PI * 0.8;
|
|
const rightAngle = angle - Math.PI * 0.8;
|
|
ctx.beginPath();
|
|
ctx.moveTo(tipX, tipY);
|
|
ctx.lineTo(tipX + Math.cos(leftAngle) * headLen, tipY + Math.sin(leftAngle) * headLen);
|
|
ctx.lineTo(tipX + Math.cos(rightAngle) * headLen, tipY + Math.sin(rightAngle) * headLen);
|
|
ctx.closePath();
|
|
ctx.fill();
|
|
}
|
|
|
|
// Draws an arrow centered at (cx, cy) pointing toward the ramp's high
|
|
// side, so ramp direction is visible at a glance on both the palette
|
|
// swatches and the tile grid. Used for cardinal ramps and outer-corner
|
|
// ramps (a single raised corner).
|
|
function drawArrow(ctx, cx, cy, size, dx, dy) {
|
|
const mag = Math.hypot(dx, dy) || 1;
|
|
const ux = dx / mag, uy = dy / mag;
|
|
const len = size * 0.32;
|
|
drawArrowSegment(ctx, cx - ux * len, cy - uy * len, cx + ux * len, cy + uy * len, size);
|
|
}
|
|
|
|
// Draws a plain right-angle bracket - two line segments meeting at 90
|
|
// degrees at the tile's corner, one running along each of the two edges
|
|
// adjacent to it - so inner-corner ramps (three corners raised, one
|
|
// dropped) read as "the adjacent sides meeting in a 90-degree corner",
|
|
// distinct from the single diagonal arrow used for outer-corner ramps.
|
|
function drawCornerBracket(ctx, cx, cy, size, dx, dy) {
|
|
const cornerDist = size * 0.42;
|
|
const armLen = size * 0.34;
|
|
const cornerX = cx + dx * cornerDist;
|
|
const cornerY = cy + dy * cornerDist;
|
|
|
|
ctx.strokeStyle = "#ffffff";
|
|
ctx.lineWidth = Math.max(1, size * 0.08);
|
|
ctx.lineCap = "round";
|
|
ctx.lineJoin = "round";
|
|
|
|
ctx.beginPath();
|
|
ctx.moveTo(cornerX - dx * armLen, cornerY);
|
|
ctx.lineTo(cornerX, cornerY);
|
|
ctx.lineTo(cornerX, cornerY - dy * armLen);
|
|
ctx.stroke();
|
|
}
|
|
|
|
// Draws the direction icon for a ramp tile `type` in a `size`x`size` area
|
|
// centered at (cx, cy): a diagonal arrow for cardinal/outer-corner ramps,
|
|
// or a right-angle bracket for inner-corner ramps. No-op for shapes with
|
|
// no direction (ground, erase).
|
|
function drawShapeIcon(ctx, cx, cy, size, type) {
|
|
const dir = SHAPE_DIRECTIONS[type];
|
|
if(!dir) return;
|
|
if(INNER_CORNER_SHAPES.has(type)) {
|
|
drawCornerBracket(ctx, cx, cy, size, dir.dx, dir.dy);
|
|
} else {
|
|
drawArrow(ctx, cx, cy, size, dir.dx, dir.dy);
|
|
}
|
|
}
|
|
|
|
// Draws a small pencil icon centered in a `size`x`size` canvas.
|
|
function drawPencilIcon(ctx, size) {
|
|
ctx.save();
|
|
ctx.translate(size / 2, size / 2);
|
|
ctx.rotate(-Math.PI / 4);
|
|
|
|
const shaftW = size * 0.18;
|
|
const shaftH = size * 0.62;
|
|
|
|
ctx.fillStyle = "#e0e0e0";
|
|
ctx.fillRect(-shaftW / 2, shaftH * 0.28, shaftW, shaftH * 0.22);
|
|
|
|
ctx.fillStyle = "#f0c419";
|
|
ctx.fillRect(-shaftW / 2, -shaftH * 0.5, shaftW, shaftH * 0.78);
|
|
|
|
ctx.fillStyle = "#8d6e63";
|
|
ctx.beginPath();
|
|
ctx.moveTo(-shaftW / 2, -shaftH * 0.5);
|
|
ctx.lineTo(shaftW / 2, -shaftH * 0.5);
|
|
ctx.lineTo(0, -shaftH * 0.5 - shaftW);
|
|
ctx.closePath();
|
|
ctx.fill();
|
|
|
|
ctx.restore();
|
|
}
|
|
|
|
// Draws a small paint bucket icon centered in a `size`x`size` canvas.
|
|
function drawBucketIcon(ctx, size) {
|
|
ctx.save();
|
|
ctx.translate(size / 2, size / 2);
|
|
|
|
const w = size * 0.5, h = size * 0.34;
|
|
|
|
ctx.strokeStyle = "#e0e0e0";
|
|
ctx.lineWidth = Math.max(1, size * 0.06);
|
|
ctx.beginPath();
|
|
ctx.arc(0, -h * 0.4, w * 0.4, Math.PI, 0);
|
|
ctx.stroke();
|
|
|
|
ctx.fillStyle = "#03a9f4";
|
|
ctx.beginPath();
|
|
ctx.moveTo(-w / 2, -h * 0.2);
|
|
ctx.lineTo(w / 2, -h * 0.2);
|
|
ctx.lineTo(w * 0.32, h * 0.6);
|
|
ctx.lineTo(-w * 0.32, h * 0.6);
|
|
ctx.closePath();
|
|
ctx.fill();
|
|
|
|
ctx.beginPath();
|
|
ctx.arc(-w * 0.55, h * 0.75, size * 0.06, 0, Math.PI * 2);
|
|
ctx.fill();
|
|
|
|
ctx.restore();
|
|
}
|
|
|
|
const TOOLS = [
|
|
{ id: "pencil", name: "Pencil", draw: drawPencilIcon },
|
|
{ id: "bucket", name: "Paint Bucket", draw: drawBucketIcon },
|
|
];
|
|
|
|
let coord = { x: 0, y: 0, z: 0 };
|
|
let tiles = new Int32Array(ChunkTerrain.TILE_COUNT);
|
|
let meshes = [];
|
|
let chunkExists = false;
|
|
let currentZLevel = 0;
|
|
let selectedShape = ChunkTerrain.TILE_SHAPE_GROUND;
|
|
let zoomWorldH = 20;
|
|
let dirty = false;
|
|
let hoverTile = null;
|
|
let activeTool = "pencil";
|
|
|
|
let mapRenderer = null;
|
|
let terrainMesh = null;
|
|
let gridLinesMesh = null;
|
|
let terrainTexturePromise = null;
|
|
let modelIndex = null;
|
|
let neighborChunks = [];
|
|
const modelCache = new Map();
|
|
|
|
const UNDO_LIMIT = 100;
|
|
let undoStack = [];
|
|
|
|
function markDirty() {
|
|
dirty = true;
|
|
}
|
|
|
|
function snapshotState() {
|
|
return {
|
|
tiles: tiles.slice(),
|
|
meshes: meshes.map((m) => ({ file: m.file, pos: m.pos.slice() })),
|
|
};
|
|
}
|
|
|
|
function pushUndo() {
|
|
undoStack.push(snapshotState());
|
|
if(undoStack.length > UNDO_LIMIT) undoStack.shift();
|
|
}
|
|
|
|
function undo() {
|
|
if(!undoStack.length) return;
|
|
const snap = undoStack.pop();
|
|
tiles = snap.tiles;
|
|
meshes = snap.meshes;
|
|
dirty = true;
|
|
renderGrid();
|
|
renderMeshList();
|
|
renderPreview();
|
|
updateStatus("Undid last change.");
|
|
}
|
|
|
|
// Returns true if it's OK to proceed (no unsaved changes, or the user
|
|
// confirmed discarding them).
|
|
function confirmDiscardIfDirty() {
|
|
if(!dirty) return true;
|
|
return window.confirm("You have unsaved changes to this chunk. Discard them?");
|
|
}
|
|
|
|
function statusLine() {
|
|
return document.getElementById("statusLine");
|
|
}
|
|
|
|
function updateStatus(msg, isError) {
|
|
const el = statusLine();
|
|
el.textContent = msg;
|
|
el.classList.toggle("text-danger", !!isError);
|
|
el.classList.toggle("text-muted", !isError);
|
|
}
|
|
|
|
async function apiReadJson(path) {
|
|
const res = await fetch(`/api/read?path=${encodeURIComponent(path)}`);
|
|
const data = await res.json();
|
|
return { ok: res.ok, data };
|
|
}
|
|
|
|
async function apiWrite(path, content) {
|
|
return fetch(`/api/write?path=${encodeURIComponent(path)}`, {
|
|
method: "POST",
|
|
body: JSON.stringify({ content }),
|
|
});
|
|
}
|
|
|
|
async function apiDelete(path) {
|
|
return fetch(`/api/delete?path=${encodeURIComponent(path)}`, { method: "POST" });
|
|
}
|
|
|
|
async function apiCompileChunk(x, y, z) {
|
|
const res = await fetch(`/api/compile-chunk?x=${x}&y=${y}&z=${z}`, { method: "POST" });
|
|
return res.json();
|
|
}
|
|
|
|
async function apiLs(path) {
|
|
const res = await fetch(`/api/ls?path=${encodeURIComponent(path)}`);
|
|
return res.json();
|
|
}
|
|
|
|
async function apiFind(path, ext) {
|
|
const res = await fetch(`/api/find?path=${encodeURIComponent(path)}&ext=${encodeURIComponent(ext)}`);
|
|
return res.json();
|
|
}
|
|
|
|
function base64ToBuffer(base64) {
|
|
const bytes = Uint8Array.from(atob(base64), (c) => c.charCodeAt(0));
|
|
return bytes.buffer;
|
|
}
|
|
|
|
async function loadImageTexture(assetPath) {
|
|
const { ok, data } = await apiReadJson(assetPath);
|
|
if(!ok || data.error) return null;
|
|
const blob = new Blob([base64ToBuffer(data.content)], { type: "image/png" });
|
|
const bitmap = await createImageBitmap(blob);
|
|
return mapRenderer.createTextureFromImage(bitmap);
|
|
}
|
|
|
|
async function readDmfVertices(assetPath) {
|
|
const { ok, data } = await apiReadJson(assetPath);
|
|
if(!ok || data.error) throw new Error(`Failed to read ${assetPath}`);
|
|
return DMF.decode(base64ToBuffer(data.content)).floats;
|
|
}
|
|
|
|
async function ensureModelIndex() {
|
|
if(modelIndex) return modelIndex;
|
|
const res = await apiFind("assets/models", ".json");
|
|
modelIndex = new Map();
|
|
for(const file of res.files || []) {
|
|
const base = file.split("/").pop().replace(/\.json$/, "");
|
|
modelIndex.set(base, file);
|
|
}
|
|
return modelIndex;
|
|
}
|
|
|
|
// Scales a mesh's stored [x, y, z] offset for preview, matching the
|
|
// Z scaling mapChunkLoaded() applies at runtime (chunk.meshOffsets[m][2]
|
|
// * WORLD_LAYER_HEIGHT) - x/y stay 1:1 since only Z is height-scaled.
|
|
function scaledMeshOffset(pos) {
|
|
return [pos[0], pos[1], pos[2] * ChunkTerrain.WORLD_LAYER_HEIGHT];
|
|
}
|
|
|
|
// Resolves a chunk mesh entry's bare filename (e.g. "house_5_3.dmf") to
|
|
// its model JSON by basename, mirroring find_model() in
|
|
// tools/asset/chunk/__main__.py - the chunk JSON only ever stores a bare
|
|
// filename, not a path.
|
|
async function resolveModelForMeshFile(file) {
|
|
await ensureModelIndex();
|
|
const base = file.replace(/\.[^.]+$/, "");
|
|
const rel = modelIndex.get(base);
|
|
if(!rel) return null;
|
|
|
|
const modelPath = `assets/models/${rel}`;
|
|
if(modelCache.has(modelPath)) return modelCache.get(modelPath);
|
|
|
|
const promise = (async () => {
|
|
const { ok, data } = await apiReadJson(modelPath);
|
|
if(!ok || data.error) throw new Error(`Failed to read model ${modelPath}`);
|
|
const modelDef = JSON.parse(data.content);
|
|
const meshFloats = await readDmfVertices(`assets/${modelDef.mesh}`);
|
|
const mesh = mapRenderer.createMesh(meshFloats);
|
|
const texture = modelDef.texture ? await loadImageTexture(`assets/${modelDef.texture}`) : null;
|
|
const colorBytes = modelDef.color || [255, 255, 255, 255];
|
|
const color = colorBytes.map((c) => c / 255);
|
|
return { mesh, texture, color };
|
|
})();
|
|
modelCache.set(modelPath, promise);
|
|
return promise;
|
|
}
|
|
|
|
function chunkPaths(x, y, z) {
|
|
return {
|
|
raw: `assetsraw/chunks/chunk_${x}_${y}_${z}.json`,
|
|
dcf: `assets/chunks/${x}_${y}_${z}.dcf`,
|
|
terrainDmf: `assets/meshes/chunks/chunk_${x}_${y}_${z}_0.dmf`,
|
|
terrainModel: `assets/models/chunks/chunk_${x}_${y}_${z}_0.json`,
|
|
};
|
|
}
|
|
|
|
// Loads the 8 same-Z neighbors around `coord` (read-only, for context in
|
|
// the 3D preview) and pre-builds their render data so renderPreview()
|
|
// doesn't have to rebuild GL buffers on every paint stroke.
|
|
async function loadNeighborChunks() {
|
|
const offsets = [];
|
|
for(let dy = -1; dy <= 1; dy++) {
|
|
for(let dx = -1; dx <= 1; dx++) {
|
|
if(dx || dy) offsets.push({ dx, dy });
|
|
}
|
|
}
|
|
|
|
const results = await Promise.all(offsets.map(async ({ dx, dy }) => {
|
|
const nx = coord.x + dx, ny = coord.y + dy, nz = coord.z;
|
|
const { ok, data } = await apiReadJson(chunkPaths(nx, ny, nz).raw);
|
|
if(!ok || data.error) return null;
|
|
|
|
const json = JSON.parse(data.content);
|
|
const neighborTiles = new Int32Array(ChunkTerrain.TILE_COUNT);
|
|
for(const t of json.tiles || []) {
|
|
const [tx, ty, tz] = t.pos;
|
|
neighborTiles[ChunkTerrain.tileIndex(tx, ty, tz)] = t.type;
|
|
}
|
|
const neighborMeshes = (json.meshes || []).map((m) => ({ file: m.file, pos: m.pos || [0, 0, 0] }));
|
|
|
|
const floats = ChunkTerrain.buildTerrainVerts(neighborTiles);
|
|
const terrain = floats.length ? { mesh: mapRenderer.createMesh(floats) } : null;
|
|
|
|
const models = [];
|
|
for(const m of neighborMeshes) {
|
|
try {
|
|
const resolved = await resolveModelForMeshFile(m.file);
|
|
if(resolved) models.push({ ...resolved, offset: scaledMeshOffset(m.pos) });
|
|
} catch(e) {
|
|
console.warn("Failed to load neighbor mesh preview", m.file, e);
|
|
}
|
|
}
|
|
|
|
return {
|
|
offset: [dx * ChunkTerrain.CHUNK_WIDTH, dy * ChunkTerrain.CHUNK_HEIGHT, 0],
|
|
terrain,
|
|
models,
|
|
};
|
|
}));
|
|
|
|
neighborChunks = results.filter(Boolean);
|
|
}
|
|
|
|
async function loadChunk(x, y, z) {
|
|
coord = { x, y, z };
|
|
tiles = new Int32Array(ChunkTerrain.TILE_COUNT);
|
|
meshes = [];
|
|
chunkExists = false;
|
|
|
|
const { ok, data } = await apiReadJson(chunkPaths(x, y, z).raw);
|
|
if(ok && !data.error) {
|
|
chunkExists = true;
|
|
const json = JSON.parse(data.content);
|
|
for(const t of json.tiles || []) {
|
|
const [tx, ty, tz] = t.pos;
|
|
tiles[ChunkTerrain.tileIndex(tx, ty, tz)] = t.type;
|
|
}
|
|
meshes = (json.meshes || []).map((m) => ({ file: m.file, pos: m.pos || [0, 0, 0] }));
|
|
}
|
|
|
|
await loadNeighborChunks();
|
|
dirty = false;
|
|
undoStack = [];
|
|
|
|
renderGrid();
|
|
renderMeshList();
|
|
renderPreview();
|
|
updateStatus(chunkExists
|
|
? `Loaded chunk_${x}_${y}_${z}.json`
|
|
: `New (empty) chunk at ${x}, ${y}, ${z} - paint a tile and save to create it.`);
|
|
}
|
|
|
|
async function saveChunk() {
|
|
const tilesArr = [];
|
|
for(let z = 0; z < ChunkTerrain.CHUNK_DEPTH; z++) {
|
|
for(let y = 0; y < ChunkTerrain.CHUNK_HEIGHT; y++) {
|
|
for(let x = 0; x < ChunkTerrain.CHUNK_WIDTH; x++) {
|
|
const type = tiles[ChunkTerrain.tileIndex(x, y, z)];
|
|
if(type && type !== ChunkTerrain.TILE_SHAPE_NULL) {
|
|
tilesArr.push({ pos: [x, y, z], type, tile: 0 });
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
const paths = chunkPaths(coord.x, coord.y, coord.z);
|
|
|
|
if(tilesArr.length === 0 && meshes.length === 0) {
|
|
await Promise.all(Object.values(paths).map((p) => apiDelete(p)));
|
|
chunkExists = false;
|
|
dirty = false;
|
|
updateStatus(`Chunk ${coord.x}, ${coord.y}, ${coord.z} is empty - deleted.`);
|
|
return;
|
|
}
|
|
|
|
const json = { tiles: tilesArr, meshes: meshes.map((m) => ({ file: m.file, pos: m.pos })) };
|
|
await apiWrite(paths.raw, JSON.stringify(json, null, 2));
|
|
chunkExists = true;
|
|
dirty = false;
|
|
updateStatus("Saved. Compiling...");
|
|
|
|
const result = await apiCompileChunk(coord.x, coord.y, coord.z);
|
|
if(result.ok) {
|
|
updateStatus(`Compiled OK.\n${result.stdout}`);
|
|
} else {
|
|
updateStatus(`Compile FAILED (code ${result.returncode}):\n${result.stderr}`, true);
|
|
}
|
|
}
|
|
|
|
function buildPalette() {
|
|
const el = document.getElementById("tilePalette");
|
|
el.innerHTML = "";
|
|
for(const s of SHAPES) {
|
|
const btn = document.createElement("button");
|
|
btn.type = "button";
|
|
btn.className = "tile-swatch" + (s.type === selectedShape ? " active" : "");
|
|
btn.style.background = s.color;
|
|
btn.title = s.name;
|
|
btn.addEventListener("click", () => {
|
|
selectedShape = s.type;
|
|
buildPalette();
|
|
});
|
|
|
|
if(SHAPE_DIRECTIONS[s.type]) {
|
|
const icon = document.createElement("canvas");
|
|
icon.width = 32;
|
|
icon.height = 32;
|
|
icon.className = "tile-swatch-icon";
|
|
drawShapeIcon(icon.getContext("2d"), 16, 16, 32, s.type);
|
|
btn.appendChild(icon);
|
|
}
|
|
|
|
el.appendChild(btn);
|
|
}
|
|
}
|
|
|
|
function buildToolPalette() {
|
|
const el = document.getElementById("toolPalette");
|
|
el.innerHTML = "";
|
|
for(const tool of TOOLS) {
|
|
const btn = document.createElement("button");
|
|
btn.type = "button";
|
|
btn.className = "tile-swatch" + (tool.id === activeTool ? " active" : "");
|
|
btn.style.background = "#2a2d33";
|
|
btn.title = tool.name;
|
|
btn.addEventListener("click", () => {
|
|
activeTool = tool.id;
|
|
buildToolPalette();
|
|
});
|
|
|
|
const icon = document.createElement("canvas");
|
|
icon.width = 32;
|
|
icon.height = 32;
|
|
icon.className = "tile-swatch-icon";
|
|
tool.draw(icon.getContext("2d"), 32);
|
|
btn.appendChild(icon);
|
|
|
|
el.appendChild(btn);
|
|
}
|
|
}
|
|
|
|
function canvasToTile(e, canvas) {
|
|
const rect = canvas.getBoundingClientRect();
|
|
const cell = canvas.width / ChunkTerrain.CHUNK_WIDTH;
|
|
const px = (e.clientX - rect.left) * (canvas.width / rect.width);
|
|
const py = (e.clientY - rect.top) * (canvas.height / rect.height);
|
|
const x = Math.floor(px / cell);
|
|
const yFromTop = Math.floor(py / cell);
|
|
const y = ChunkTerrain.CHUNK_HEIGHT - 1 - yFromTop;
|
|
if(x < 0 || x >= ChunkTerrain.CHUNK_WIDTH || y < 0 || y >= ChunkTerrain.CHUNK_HEIGHT) return null;
|
|
return { x, y };
|
|
}
|
|
|
|
function renderGrid() {
|
|
const canvas = document.getElementById("gridCanvas");
|
|
const ctx = canvas.getContext("2d");
|
|
const cell = canvas.width / ChunkTerrain.CHUNK_WIDTH;
|
|
|
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
|
for(let y = 0; y < ChunkTerrain.CHUNK_HEIGHT; y++) {
|
|
for(let x = 0; x < ChunkTerrain.CHUNK_WIDTH; x++) {
|
|
const type = tiles[ChunkTerrain.tileIndex(x, y, currentZLevel)];
|
|
const sy = (ChunkTerrain.CHUNK_HEIGHT - 1 - y) * cell;
|
|
ctx.fillStyle = SHAPE_COLORS[type] || "#15171b";
|
|
ctx.fillRect(x * cell, sy, cell, cell);
|
|
ctx.strokeStyle = "rgba(255, 255, 255, 0.25)";
|
|
ctx.strokeRect(x * cell, sy, cell, cell);
|
|
|
|
drawShapeIcon(ctx, x * cell + cell / 2, sy + cell / 2, cell, type);
|
|
}
|
|
}
|
|
|
|
ctx.fillStyle = "#ffffff";
|
|
for(const m of meshes) {
|
|
const [mx, my, mz] = m.pos;
|
|
if(Math.round(mz) !== currentZLevel) continue;
|
|
const sy = (ChunkTerrain.CHUNK_HEIGHT - 1 - my) * cell;
|
|
ctx.beginPath();
|
|
ctx.arc(mx * cell + cell / 2, sy + cell / 2, cell * 0.3, 0, Math.PI * 2);
|
|
ctx.fill();
|
|
}
|
|
|
|
if(hoverTile) {
|
|
const sy = (ChunkTerrain.CHUNK_HEIGHT - 1 - hoverTile.y) * cell;
|
|
ctx.strokeStyle = "#ffeb3b";
|
|
ctx.lineWidth = 2;
|
|
ctx.strokeRect(hoverTile.x * cell + 1, sy + 1, cell - 2, cell - 2);
|
|
}
|
|
}
|
|
|
|
function hitTestMesh(e, canvas) {
|
|
const rect = canvas.getBoundingClientRect();
|
|
const cell = canvas.width / ChunkTerrain.CHUNK_WIDTH;
|
|
const px = (e.clientX - rect.left) * (canvas.width / rect.width);
|
|
const py = (e.clientY - rect.top) * (canvas.height / rect.height);
|
|
|
|
let closest = -1;
|
|
let closestDist = cell * 0.5;
|
|
meshes.forEach((m, i) => {
|
|
const [mx, my, mz] = m.pos;
|
|
if(Math.round(mz) !== currentZLevel) return;
|
|
const cx = mx * cell + cell / 2;
|
|
const cy = (ChunkTerrain.CHUNK_HEIGHT - 1 - my) * cell + cell / 2;
|
|
const dist = Math.hypot(px - cx, py - cy);
|
|
if(dist < closestDist) { closestDist = dist; closest = i; }
|
|
});
|
|
return closest;
|
|
}
|
|
|
|
function moveMeshTo(e, index) {
|
|
const canvas = document.getElementById("gridCanvas");
|
|
const t = canvasToTile(e, canvas);
|
|
if(!t) return;
|
|
meshes[index].pos[0] = t.x;
|
|
meshes[index].pos[1] = t.y;
|
|
markDirty();
|
|
renderGrid();
|
|
renderMeshList();
|
|
renderPreview();
|
|
}
|
|
|
|
function paintAt(e) {
|
|
const canvas = document.getElementById("gridCanvas");
|
|
const t = canvasToTile(e, canvas);
|
|
if(!t) return;
|
|
tiles[ChunkTerrain.tileIndex(t.x, t.y, currentZLevel)] = selectedShape;
|
|
markDirty();
|
|
renderGrid();
|
|
renderPreview();
|
|
}
|
|
|
|
// 4-connected flood fill of same-type tiles at the current Z-level,
|
|
// starting from (startX, startY), replacing them with selectedShape.
|
|
function floodFill(startX, startY) {
|
|
const targetType = tiles[ChunkTerrain.tileIndex(startX, startY, currentZLevel)];
|
|
if(targetType === selectedShape) return;
|
|
|
|
const stack = [[startX, startY]];
|
|
const visited = new Set();
|
|
while(stack.length) {
|
|
const [x, y] = stack.pop();
|
|
const key = `${x},${y}`;
|
|
if(visited.has(key)) continue;
|
|
if(x < 0 || x >= ChunkTerrain.CHUNK_WIDTH || y < 0 || y >= ChunkTerrain.CHUNK_HEIGHT) continue;
|
|
visited.add(key);
|
|
|
|
const idx = ChunkTerrain.tileIndex(x, y, currentZLevel);
|
|
if(tiles[idx] !== targetType) continue;
|
|
tiles[idx] = selectedShape;
|
|
stack.push([x + 1, y], [x - 1, y], [x, y + 1], [x, y - 1]);
|
|
}
|
|
}
|
|
|
|
function fillAt(e) {
|
|
const canvas = document.getElementById("gridCanvas");
|
|
const t = canvasToTile(e, canvas);
|
|
if(!t) return;
|
|
pushUndo();
|
|
floodFill(t.x, t.y);
|
|
markDirty();
|
|
renderGrid();
|
|
renderPreview();
|
|
}
|
|
|
|
function rebuildTerrainMesh() {
|
|
const floats = ChunkTerrain.buildTerrainVerts(tiles);
|
|
terrainMesh = floats.length ? mapRenderer.createMesh(floats) : null;
|
|
|
|
const lineFloats = ChunkTerrain.buildGridLines(tiles);
|
|
gridLinesMesh = lineFloats.length ? mapRenderer.createMesh(lineFloats) : null;
|
|
}
|
|
|
|
// Keeps the preview canvas's backing-store resolution matched to its
|
|
// actual displayed CSS size (times devicePixelRatio) - the canvas
|
|
// otherwise stays at its fixed width/height attributes (512x512) while
|
|
// CSS stretches it to fill the column, which upscales and blurs the
|
|
// WebGL output on wider or high-DPI screens.
|
|
function resizePreviewCanvas() {
|
|
const canvas = document.getElementById("previewCanvas");
|
|
const dpr = window.devicePixelRatio || 1;
|
|
const displayWidth = Math.max(1, Math.round(canvas.clientWidth * dpr));
|
|
const displayHeight = Math.max(1, Math.round(canvas.clientHeight * dpr));
|
|
if(canvas.width !== displayWidth || canvas.height !== displayHeight) {
|
|
canvas.width = displayWidth;
|
|
canvas.height = displayHeight;
|
|
}
|
|
}
|
|
|
|
async function renderPreview() {
|
|
if(!mapRenderer) return;
|
|
resizePreviewCanvas();
|
|
rebuildTerrainMesh();
|
|
|
|
const models = [];
|
|
for(const m of meshes) {
|
|
try {
|
|
const resolved = await resolveModelForMeshFile(m.file);
|
|
if(resolved) models.push({ ...resolved, offset: scaledMeshOffset(m.pos) });
|
|
} catch(e) {
|
|
console.warn("Failed to load mesh preview", m.file, e);
|
|
}
|
|
}
|
|
|
|
let terrainTexture = null;
|
|
if(terrainMesh || neighborChunks.some((n) => n.terrain)) {
|
|
if(!terrainTexturePromise) terrainTexturePromise = loadImageTexture("assets/tiles.png");
|
|
terrainTexture = await terrainTexturePromise;
|
|
}
|
|
|
|
const neighbors = neighborChunks.map((n) => ({
|
|
offset: n.offset,
|
|
terrain: n.terrain ? { mesh: n.terrain.mesh, texture: terrainTexture } : null,
|
|
models: n.models,
|
|
}));
|
|
|
|
const zLevelHeight = currentZLevel * ChunkTerrain.WORLD_LAYER_HEIGHT;
|
|
mapRenderer.render({
|
|
target: [ChunkTerrain.CHUNK_WIDTH / 2, ChunkTerrain.CHUNK_HEIGHT / 2, zLevelHeight],
|
|
worldH: zoomWorldH,
|
|
terrain: terrainMesh ? { mesh: terrainMesh, texture: terrainTexture } : null,
|
|
gridLines: gridLinesMesh ? { mesh: gridLinesMesh } : null,
|
|
models,
|
|
neighbors,
|
|
highlight: hoverTile ? { x: hoverTile.x, y: hoverTile.y, z: zLevelHeight } : null,
|
|
});
|
|
}
|
|
|
|
function renderMeshList() {
|
|
const ul = document.getElementById("meshList");
|
|
ul.innerHTML = "";
|
|
meshes.forEach((m, i) => {
|
|
const li = document.createElement("li");
|
|
li.className = "list-group-item d-flex align-items-center gap-2 flex-wrap";
|
|
|
|
const label = document.createElement("span");
|
|
label.className = "me-auto";
|
|
label.textContent = m.file;
|
|
li.appendChild(label);
|
|
|
|
["X", "Y", "Z"].forEach((axis, axisIndex) => {
|
|
const input = document.createElement("input");
|
|
input.type = "number";
|
|
input.className = "form-control form-control-sm";
|
|
input.style.width = "5rem";
|
|
input.title = axis;
|
|
input.value = m.pos[axisIndex];
|
|
input.addEventListener("change", () => {
|
|
pushUndo();
|
|
m.pos[axisIndex] = parseFloat(input.value) || 0;
|
|
markDirty();
|
|
renderGrid();
|
|
renderPreview();
|
|
});
|
|
li.appendChild(input);
|
|
});
|
|
|
|
const btn = document.createElement("button");
|
|
btn.type = "button";
|
|
btn.className = "btn btn-sm btn-outline-danger";
|
|
btn.textContent = "Remove";
|
|
btn.addEventListener("click", () => {
|
|
pushUndo();
|
|
meshes.splice(i, 1);
|
|
markDirty();
|
|
renderMeshList();
|
|
renderGrid();
|
|
renderPreview();
|
|
});
|
|
|
|
li.appendChild(btn);
|
|
ul.appendChild(li);
|
|
});
|
|
}
|
|
|
|
async function buildMeshPicker() {
|
|
await ensureModelIndex();
|
|
const select = document.getElementById("meshPicker");
|
|
select.innerHTML = "";
|
|
for(const [base, rel] of [...modelIndex.entries()].sort()) {
|
|
const opt = document.createElement("option");
|
|
opt.value = base;
|
|
opt.textContent = rel;
|
|
select.appendChild(opt);
|
|
}
|
|
}
|
|
|
|
async function buildChunkBrowseList() {
|
|
const list = document.getElementById("chunkBrowseList");
|
|
list.innerHTML = "";
|
|
const res = await apiLs("assetsraw/chunks");
|
|
for(const entry of res.entries || []) {
|
|
const m = entry.name.match(/^chunk_(-?\d+)_(-?\d+)_(-?\d+)\.json$/);
|
|
if(!m) continue;
|
|
const [, x, y, z] = m;
|
|
|
|
const li = document.createElement("li");
|
|
const a = document.createElement("a");
|
|
a.className = "dropdown-item";
|
|
a.href = "#";
|
|
a.textContent = `${x}, ${y}, ${z}`;
|
|
a.addEventListener("click", (e) => {
|
|
e.preventDefault();
|
|
goToChunk(parseInt(x, 10), parseInt(y, 10), parseInt(z, 10));
|
|
});
|
|
|
|
li.appendChild(a);
|
|
list.appendChild(li);
|
|
}
|
|
}
|
|
|
|
function setCoordInputs(x, y, z) {
|
|
document.getElementById("coordX").value = x;
|
|
document.getElementById("coordY").value = y;
|
|
document.getElementById("coordZ").value = z;
|
|
}
|
|
|
|
function goToChunk(x, y, z) {
|
|
if(!confirmDiscardIfDirty()) return;
|
|
setCoordInputs(x, y, z);
|
|
loadChunk(x, y, z);
|
|
}
|
|
|
|
function bindEvents() {
|
|
const gridCanvas = document.getElementById("gridCanvas");
|
|
let painting = false;
|
|
let draggingMeshIndex = -1;
|
|
|
|
gridCanvas.addEventListener("mousedown", (e) => {
|
|
if(activeTool === "bucket") {
|
|
fillAt(e);
|
|
return;
|
|
}
|
|
|
|
const hit = hitTestMesh(e, gridCanvas);
|
|
pushUndo();
|
|
if(hit !== -1) {
|
|
draggingMeshIndex = hit;
|
|
return;
|
|
}
|
|
painting = true;
|
|
paintAt(e);
|
|
});
|
|
window.addEventListener("mouseup", () => { painting = false; draggingMeshIndex = -1; });
|
|
gridCanvas.addEventListener("mousemove", (e) => {
|
|
hoverTile = canvasToTile(e, gridCanvas);
|
|
if(draggingMeshIndex !== -1) { moveMeshTo(e, draggingMeshIndex); return; }
|
|
if(painting) { paintAt(e); return; }
|
|
renderGrid();
|
|
renderPreview();
|
|
});
|
|
gridCanvas.addEventListener("mouseleave", () => {
|
|
hoverTile = null;
|
|
renderGrid();
|
|
renderPreview();
|
|
});
|
|
|
|
function setZLevel(z) {
|
|
currentZLevel = Math.max(0, Math.min(ChunkTerrain.CHUNK_DEPTH - 1, z));
|
|
document.getElementById("zLevel").value = currentZLevel;
|
|
document.getElementById("zLevelLabel").textContent = currentZLevel;
|
|
renderGrid();
|
|
renderPreview();
|
|
}
|
|
|
|
document.getElementById("zLevel").addEventListener("input", (e) => {
|
|
setZLevel(parseInt(e.target.value, 10));
|
|
});
|
|
document.getElementById("zLevelDown").addEventListener("click", () => setZLevel(currentZLevel - 1));
|
|
document.getElementById("zLevelUp").addEventListener("click", () => setZLevel(currentZLevel + 1));
|
|
|
|
document.getElementById("btnLoad").addEventListener("click", () => {
|
|
const x = parseInt(document.getElementById("coordX").value, 10) || 0;
|
|
const y = parseInt(document.getElementById("coordY").value, 10) || 0;
|
|
const z = parseInt(document.getElementById("coordZ").value, 10) || 0;
|
|
goToChunk(x, y, z);
|
|
});
|
|
|
|
// NORTH=+Y, EAST=+X (matches tile-shape convention used by the tile
|
|
// grid and tools/asset/chunk/__main__.py).
|
|
document.getElementById("navN").addEventListener("click", () => goToChunk(coord.x, coord.y + 1, coord.z));
|
|
document.getElementById("navS").addEventListener("click", () => goToChunk(coord.x, coord.y - 1, coord.z));
|
|
document.getElementById("navE").addEventListener("click", () => goToChunk(coord.x + 1, coord.y, coord.z));
|
|
document.getElementById("navW").addEventListener("click", () => goToChunk(coord.x - 1, coord.y, coord.z));
|
|
document.getElementById("navUp").addEventListener("click", () => goToChunk(coord.x, coord.y, coord.z + 1));
|
|
document.getElementById("navDown").addEventListener("click", () => goToChunk(coord.x, coord.y, coord.z - 1));
|
|
|
|
function runSave() {
|
|
saveChunk().catch((e) => updateStatus(`Save failed: ${e.message}`, true));
|
|
}
|
|
|
|
document.getElementById("btnSave").addEventListener("click", runSave);
|
|
|
|
document.getElementById("btnAddMesh").addEventListener("click", () => {
|
|
const base = document.getElementById("meshPicker").value;
|
|
if(!base) return;
|
|
const pos = [
|
|
parseFloat(document.getElementById("meshX").value) || 0,
|
|
parseFloat(document.getElementById("meshY").value) || 0,
|
|
parseFloat(document.getElementById("meshZ").value) || 0,
|
|
];
|
|
pushUndo();
|
|
meshes.push({ file: `${base}.dmf`, pos });
|
|
markDirty();
|
|
renderMeshList();
|
|
renderGrid();
|
|
renderPreview();
|
|
});
|
|
|
|
document.getElementById("previewCanvas").addEventListener("wheel", (e) => {
|
|
e.preventDefault();
|
|
zoomWorldH = Math.min(60, Math.max(4, zoomWorldH + Math.sign(e.deltaY)));
|
|
renderPreview();
|
|
}, { passive: false });
|
|
|
|
window.addEventListener("resize", () => renderPreview());
|
|
|
|
window.addEventListener("keydown", (e) => {
|
|
if(!(e.ctrlKey || e.metaKey)) return;
|
|
const key = e.key.toLowerCase();
|
|
if(key === "z") {
|
|
e.preventDefault();
|
|
undo();
|
|
} else if(key === "s") {
|
|
e.preventDefault();
|
|
runSave();
|
|
}
|
|
});
|
|
}
|
|
|
|
document.addEventListener("DOMContentLoaded", async () => {
|
|
buildPalette();
|
|
buildToolPalette();
|
|
mapRenderer = MapRenderer.create(document.getElementById("previewCanvas"));
|
|
bindEvents();
|
|
await Promise.all([buildChunkBrowseList(), buildMeshPicker()]);
|
|
await loadChunk(coord.x, coord.y, coord.z);
|
|
});
|
|
})();
|