Add a map editor
This commit is contained in:
parent
910597e92d
commit
3945887e62
GPG key ID:
22B5C6D66A38B06C
2 changed files with 846 additions and 0 deletions
3
justfile
3
justfile
|
|
@ -18,3 +18,6 @@ debug:
|
||||||
|
|
||||||
render:
|
render:
|
||||||
uv run python scripts/render_map.py
|
uv run python scripts/render_map.py
|
||||||
|
|
||||||
|
edit:
|
||||||
|
python -c "import webbrowser, pathlib; webbrowser.open('file://' + str(pathlib.Path('scripts/map_editor.html').resolve()))"
|
||||||
|
|
|
||||||
843
scripts/map_editor.html
Normal file
843
scripts/map_editor.html
Normal file
|
|
@ -0,0 +1,843 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>ASCII Map Editor</title>
|
||||||
|
<style>
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
display: flex;
|
||||||
|
height: 100vh;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
#sidebar {
|
||||||
|
width: 250px;
|
||||||
|
padding: 1rem;
|
||||||
|
overflow: auto;
|
||||||
|
border-right: 1px solid;
|
||||||
|
}
|
||||||
|
|
||||||
|
#main {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 1rem;
|
||||||
|
min-width: 0;
|
||||||
|
min-height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
fieldset {
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
legend {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-group {
|
||||||
|
margin: 0.5rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
label {
|
||||||
|
display: inline-block;
|
||||||
|
min-width: 60px;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type="number"] {
|
||||||
|
width: 80px;
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
margin-top: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.symbol-slots {
|
||||||
|
display: flex;
|
||||||
|
gap: 1rem;
|
||||||
|
margin: 0.5rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.symbol-slot {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 48px;
|
||||||
|
height: 48px;
|
||||||
|
border: 2px solid;
|
||||||
|
cursor: pointer;
|
||||||
|
font-family: monospace;
|
||||||
|
font-size: 24px;
|
||||||
|
background: black;
|
||||||
|
}
|
||||||
|
|
||||||
|
.symbol-slot.active {
|
||||||
|
border-width: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#canvas {
|
||||||
|
image-rendering: pixelated;
|
||||||
|
image-rendering: crisp-edges;
|
||||||
|
}
|
||||||
|
|
||||||
|
.actions button {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type="file"] {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.palette-list {
|
||||||
|
max-height: 200px;
|
||||||
|
overflow-y: auto;
|
||||||
|
margin: 0.5rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.palette-entry {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.25rem;
|
||||||
|
padding: 2px 4px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.palette-entry:hover {
|
||||||
|
outline: 1px solid;
|
||||||
|
}
|
||||||
|
|
||||||
|
.color-swatch {
|
||||||
|
display: inline-block;
|
||||||
|
width: 14px;
|
||||||
|
height: 14px;
|
||||||
|
border: 1px solid;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.palette-char {
|
||||||
|
font-family: monospace;
|
||||||
|
font-weight: bold;
|
||||||
|
width: 1.5ch;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.palette-label {
|
||||||
|
flex: 1;
|
||||||
|
font-size: 0.85em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.palette-actions button {
|
||||||
|
font-size: 0.75em;
|
||||||
|
padding: 0 3px;
|
||||||
|
margin: 0;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
#palette-form {
|
||||||
|
border: 1px solid;
|
||||||
|
padding: 0.5rem;
|
||||||
|
margin: 0.5rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#palette-form .form-row {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.25rem;
|
||||||
|
margin-bottom: 0.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
#palette-char {
|
||||||
|
width: 2.5ch;
|
||||||
|
font-family: monospace;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#palette-label-input {
|
||||||
|
flex: 1;
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#palette-color {
|
||||||
|
width: 30px;
|
||||||
|
height: 22px;
|
||||||
|
padding: 0;
|
||||||
|
border: 1px solid;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="sidebar">
|
||||||
|
<fieldset>
|
||||||
|
<legend>Dimensions</legend>
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="width">Width:</label>
|
||||||
|
<input type="number" id="width" value="100" min="1" max="1000">
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="height">Height:</label>
|
||||||
|
<input type="number" id="height" value="100" min="1" max="1000">
|
||||||
|
</div>
|
||||||
|
<button id="resize">Resize</button>
|
||||||
|
</fieldset>
|
||||||
|
|
||||||
|
<fieldset>
|
||||||
|
<legend>Tools</legend>
|
||||||
|
<div class="form-group">
|
||||||
|
<label>
|
||||||
|
<input type="radio" name="tool" value="paintbrush" checked>
|
||||||
|
Paintbrush
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label>
|
||||||
|
<input type="radio" name="tool" value="eraser">
|
||||||
|
Eraser
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</fieldset>
|
||||||
|
|
||||||
|
<fieldset>
|
||||||
|
<legend>View</legend>
|
||||||
|
<div class="form-group">
|
||||||
|
<label>
|
||||||
|
<input type="checkbox" id="textView">
|
||||||
|
Show text
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</fieldset>
|
||||||
|
|
||||||
|
<fieldset>
|
||||||
|
<legend>Symbols</legend>
|
||||||
|
<div class="symbol-slots">
|
||||||
|
<div class="symbol-slot active" id="m1" data-slot="m1" title="m1 (left click)">.</div>
|
||||||
|
<div class="symbol-slot" id="m2" data-slot="m2" title="m2 (right click)">~</div>
|
||||||
|
</div>
|
||||||
|
<small>Click slot, type to change</small>
|
||||||
|
</fieldset>
|
||||||
|
|
||||||
|
<fieldset>
|
||||||
|
<legend>Palette</legend>
|
||||||
|
<div id="palette-list" class="palette-list"></div>
|
||||||
|
<div id="palette-form" style="display: none">
|
||||||
|
<div class="form-row">
|
||||||
|
<input type="text" id="palette-char" maxlength="1" placeholder="char">
|
||||||
|
<input type="text" id="palette-label-input" placeholder="label">
|
||||||
|
<input type="color" id="palette-color" value="#cccccc">
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<button id="palette-ok">ok</button>
|
||||||
|
<button id="palette-cancel">cancel</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<button id="add-palette">+ add</button>
|
||||||
|
</fieldset>
|
||||||
|
|
||||||
|
<fieldset>
|
||||||
|
<legend>Actions</legend>
|
||||||
|
<div class="actions">
|
||||||
|
<button id="save">Save</button>
|
||||||
|
<button id="load">Load</button>
|
||||||
|
<input type="file" id="fileInput" accept=".toml">
|
||||||
|
<button id="clear">Clear</button>
|
||||||
|
</div>
|
||||||
|
</fieldset>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="main">
|
||||||
|
<canvas id="canvas"></canvas>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
const DEFAULT_PALETTE = [
|
||||||
|
{ char: '~', label: 'water', color: '#2244aa' },
|
||||||
|
{ char: ':', label: 'sand', color: '#c2b280' },
|
||||||
|
{ char: '.', label: 'grass', color: '#228b22' },
|
||||||
|
{ char: 'T', label: 'forest', color: '#0a5f0a' },
|
||||||
|
{ char: '^', label: 'mountain', color: '#666666' },
|
||||||
|
];
|
||||||
|
|
||||||
|
let palette = structuredClone(DEFAULT_PALETTE);
|
||||||
|
|
||||||
|
const DEFAULT_COLOR = [200, 200, 200]; // light gray
|
||||||
|
|
||||||
|
const CELL_SIZE = 12; // square cells
|
||||||
|
|
||||||
|
let grid = [];
|
||||||
|
let gridWidth = 100;
|
||||||
|
let gridHeight = 100;
|
||||||
|
let symbols = { m1: '.', m2: '~' };
|
||||||
|
let activeSlot = 'm1';
|
||||||
|
let currentTool = 'paintbrush';
|
||||||
|
let viewMode = 'pixels';
|
||||||
|
let isDrawing = false;
|
||||||
|
let drawButton = 0;
|
||||||
|
let lastPaintedCell = null;
|
||||||
|
|
||||||
|
const canvas = document.getElementById('canvas');
|
||||||
|
const ctx = canvas.getContext('2d', { willReadFrequently: true });
|
||||||
|
const widthInput = document.getElementById('width');
|
||||||
|
const heightInput = document.getElementById('height');
|
||||||
|
const m1Slot = document.getElementById('m1');
|
||||||
|
const m2Slot = document.getElementById('m2');
|
||||||
|
const textViewCheckbox = document.getElementById('textView');
|
||||||
|
|
||||||
|
function hexToRgb(hex) {
|
||||||
|
return [
|
||||||
|
parseInt(hex.slice(1, 3), 16),
|
||||||
|
parseInt(hex.slice(3, 5), 16),
|
||||||
|
parseInt(hex.slice(5, 7), 16),
|
||||||
|
];
|
||||||
|
}
|
||||||
|
|
||||||
|
function initGrid(width, height, preserveOld = false) {
|
||||||
|
const oldGrid = grid;
|
||||||
|
const oldWidth = gridWidth;
|
||||||
|
const oldHeight = gridHeight;
|
||||||
|
|
||||||
|
gridWidth = width;
|
||||||
|
gridHeight = height;
|
||||||
|
grid = Array(height).fill(null).map(() => Array(width).fill(' '));
|
||||||
|
|
||||||
|
if (preserveOld && oldGrid.length > 0) {
|
||||||
|
const copyHeight = Math.min(height, oldHeight);
|
||||||
|
const copyWidth = Math.min(width, oldWidth);
|
||||||
|
for (let y = 0; y < copyHeight; y++) {
|
||||||
|
for (let x = 0; x < copyWidth; x++) {
|
||||||
|
grid[y][x] = oldGrid[y][x];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
sizeCanvas();
|
||||||
|
renderCanvas();
|
||||||
|
saveState();
|
||||||
|
}
|
||||||
|
|
||||||
|
function sizeCanvas() {
|
||||||
|
if (viewMode === 'text') {
|
||||||
|
canvas.width = gridWidth * CELL_SIZE;
|
||||||
|
canvas.height = gridHeight * CELL_SIZE;
|
||||||
|
} else {
|
||||||
|
canvas.width = gridWidth;
|
||||||
|
canvas.height = gridHeight;
|
||||||
|
}
|
||||||
|
fitCanvas();
|
||||||
|
}
|
||||||
|
|
||||||
|
function fitCanvas() {
|
||||||
|
const container = document.getElementById('main');
|
||||||
|
const pad = 2 * 16; // 1rem padding on each side
|
||||||
|
const maxW = container.clientWidth - pad;
|
||||||
|
const maxH = container.clientHeight - pad;
|
||||||
|
const ratio = canvas.width / canvas.height;
|
||||||
|
|
||||||
|
let cssW, cssH;
|
||||||
|
if (maxW / maxH > ratio) {
|
||||||
|
cssH = maxH;
|
||||||
|
cssW = cssH * ratio;
|
||||||
|
} else {
|
||||||
|
cssW = maxW;
|
||||||
|
cssH = cssW / ratio;
|
||||||
|
}
|
||||||
|
canvas.style.width = Math.floor(cssW) + 'px';
|
||||||
|
canvas.style.height = Math.floor(cssH) + 'px';
|
||||||
|
}
|
||||||
|
|
||||||
|
window.addEventListener('resize', fitCanvas);
|
||||||
|
|
||||||
|
function getColor(char) {
|
||||||
|
if (char === ' ') return [0, 0, 0];
|
||||||
|
const entry = palette.find(e => e.char === char);
|
||||||
|
return entry ? hexToRgb(entry.color) : DEFAULT_COLOR;
|
||||||
|
}
|
||||||
|
|
||||||
|
function renderCanvas() {
|
||||||
|
if (viewMode === 'text') {
|
||||||
|
renderText();
|
||||||
|
} else {
|
||||||
|
renderPixels();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function renderPixels() {
|
||||||
|
const imageData = ctx.createImageData(gridWidth, gridHeight);
|
||||||
|
const data = imageData.data;
|
||||||
|
|
||||||
|
for (let y = 0; y < gridHeight; y++) {
|
||||||
|
for (let x = 0; x < gridWidth; x++) {
|
||||||
|
const char = grid[y][x];
|
||||||
|
const color = getColor(char);
|
||||||
|
const idx = (y * gridWidth + x) * 4;
|
||||||
|
data[idx] = color[0];
|
||||||
|
data[idx + 1] = color[1];
|
||||||
|
data[idx + 2] = color[2];
|
||||||
|
data[idx + 3] = 255;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
ctx.putImageData(imageData, 0, 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
function renderText() {
|
||||||
|
ctx.fillStyle = 'black';
|
||||||
|
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
||||||
|
ctx.font = CELL_SIZE + 'px monospace';
|
||||||
|
ctx.textAlign = 'center';
|
||||||
|
ctx.textBaseline = 'middle';
|
||||||
|
|
||||||
|
for (let y = 0; y < gridHeight; y++) {
|
||||||
|
for (let x = 0; x < gridWidth; x++) {
|
||||||
|
const char = grid[y][x];
|
||||||
|
if (char === ' ') continue;
|
||||||
|
const c = getColor(char);
|
||||||
|
ctx.fillStyle = `rgb(${c[0]},${c[1]},${c[2]})`;
|
||||||
|
ctx.fillText(char, x * CELL_SIZE + CELL_SIZE / 2, y * CELL_SIZE + CELL_SIZE / 2);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function paintCell(x, y, symbol) {
|
||||||
|
if (x < 0 || x >= gridWidth || y < 0 || y >= gridHeight) return;
|
||||||
|
|
||||||
|
const cellKey = `${x},${y}`;
|
||||||
|
if (lastPaintedCell === cellKey) return;
|
||||||
|
|
||||||
|
grid[y][x] = symbol;
|
||||||
|
lastPaintedCell = cellKey;
|
||||||
|
renderCanvas();
|
||||||
|
}
|
||||||
|
|
||||||
|
function getGridCoords(event) {
|
||||||
|
const rect = canvas.getBoundingClientRect();
|
||||||
|
const canvasX = (event.clientX - rect.left) * (canvas.width / rect.width);
|
||||||
|
const canvasY = (event.clientY - rect.top) * (canvas.height / rect.height);
|
||||||
|
|
||||||
|
if (viewMode === 'text') {
|
||||||
|
return { x: Math.floor(canvasX / CELL_SIZE), y: Math.floor(canvasY / CELL_SIZE) };
|
||||||
|
}
|
||||||
|
return { x: Math.floor(canvasX), y: Math.floor(canvasY) };
|
||||||
|
}
|
||||||
|
|
||||||
|
function handlePaint(event, button) {
|
||||||
|
const { x, y } = getGridCoords(event);
|
||||||
|
let symbol;
|
||||||
|
|
||||||
|
if (currentTool === 'eraser') {
|
||||||
|
symbol = ' ';
|
||||||
|
} else {
|
||||||
|
symbol = button === 0 ? symbols.m1 : symbols.m2;
|
||||||
|
}
|
||||||
|
|
||||||
|
paintCell(x, y, symbol);
|
||||||
|
}
|
||||||
|
|
||||||
|
function saveState() {
|
||||||
|
const state = {
|
||||||
|
width: gridWidth,
|
||||||
|
height: gridHeight,
|
||||||
|
grid: grid,
|
||||||
|
symbols: symbols,
|
||||||
|
activeSlot: activeSlot,
|
||||||
|
palette: palette,
|
||||||
|
};
|
||||||
|
localStorage.setItem('map_editor_state', JSON.stringify(state));
|
||||||
|
}
|
||||||
|
|
||||||
|
function loadState() {
|
||||||
|
const saved = localStorage.getItem('map_editor_state');
|
||||||
|
if (saved) {
|
||||||
|
try {
|
||||||
|
const state = JSON.parse(saved);
|
||||||
|
gridWidth = state.width;
|
||||||
|
gridHeight = state.height;
|
||||||
|
grid = state.grid;
|
||||||
|
if (state.symbols) symbols = state.symbols;
|
||||||
|
if (state.activeSlot) activeSlot = state.activeSlot;
|
||||||
|
if (state.palette) palette = state.palette;
|
||||||
|
|
||||||
|
widthInput.value = gridWidth;
|
||||||
|
heightInput.value = gridHeight;
|
||||||
|
m1Slot.textContent = symbols.m1;
|
||||||
|
m2Slot.textContent = symbols.m2;
|
||||||
|
updateActiveSlot();
|
||||||
|
updateSymbolSlotColors();
|
||||||
|
sizeCanvas();
|
||||||
|
renderCanvas();
|
||||||
|
renderPalette();
|
||||||
|
return true;
|
||||||
|
} catch (e) {
|
||||||
|
console.error('Failed to load state:', e);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
function saveTOML() {
|
||||||
|
let dataStr = '';
|
||||||
|
for (let y = 0; y < gridHeight; y++) {
|
||||||
|
dataStr += grid[y].join('') + '\n';
|
||||||
|
}
|
||||||
|
|
||||||
|
let paletteStr = '';
|
||||||
|
for (const entry of palette) {
|
||||||
|
paletteStr += `${entry.char}|${entry.label}|${entry.color}\n`;
|
||||||
|
}
|
||||||
|
|
||||||
|
const toml = `[map]
|
||||||
|
width = ${gridWidth}
|
||||||
|
height = ${gridHeight}
|
||||||
|
data = """
|
||||||
|
${dataStr}"""
|
||||||
|
|
||||||
|
[palette]
|
||||||
|
entries = """
|
||||||
|
${paletteStr}"""
|
||||||
|
`;
|
||||||
|
|
||||||
|
const blob = new Blob([toml], { type: 'text/plain' });
|
||||||
|
const url = URL.createObjectURL(blob);
|
||||||
|
const a = document.createElement('a');
|
||||||
|
a.href = url;
|
||||||
|
a.download = 'map.toml';
|
||||||
|
a.click();
|
||||||
|
URL.revokeObjectURL(url);
|
||||||
|
}
|
||||||
|
|
||||||
|
function loadTOML(text) {
|
||||||
|
try {
|
||||||
|
const widthMatch = text.match(/width\s*=\s*(\d+)/);
|
||||||
|
const heightMatch = text.match(/height\s*=\s*(\d+)/);
|
||||||
|
const dataMatch = text.match(/data\s*=\s*"""([\s\S]*?)"""/);
|
||||||
|
|
||||||
|
if (!widthMatch || !heightMatch || !dataMatch) {
|
||||||
|
throw new Error('Invalid TOML format');
|
||||||
|
}
|
||||||
|
|
||||||
|
const width = parseInt(widthMatch[1]);
|
||||||
|
const height = parseInt(heightMatch[1]);
|
||||||
|
const dataStr = dataMatch[1].trim();
|
||||||
|
const lines = dataStr.split('\n');
|
||||||
|
|
||||||
|
if (lines.length !== height) {
|
||||||
|
throw new Error('Height mismatch');
|
||||||
|
}
|
||||||
|
|
||||||
|
gridWidth = width;
|
||||||
|
gridHeight = height;
|
||||||
|
grid = Array(height).fill(null).map(() => Array(width).fill(' '));
|
||||||
|
|
||||||
|
for (let y = 0; y < height && y < lines.length; y++) {
|
||||||
|
const line = lines[y];
|
||||||
|
for (let x = 0; x < width && x < line.length; x++) {
|
||||||
|
grid[y][x] = line[x];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Load palette if present
|
||||||
|
const paletteMatch = text.match(/\[palette\]\s*\nentries\s*=\s*"""([\s\S]*?)"""/);
|
||||||
|
if (paletteMatch) {
|
||||||
|
const paletteLines = paletteMatch[1].trim().split('\n');
|
||||||
|
palette = [];
|
||||||
|
for (const line of paletteLines) {
|
||||||
|
const parts = line.split('|');
|
||||||
|
if (parts.length === 3) {
|
||||||
|
palette.push({
|
||||||
|
char: parts[0],
|
||||||
|
label: parts[1],
|
||||||
|
color: parts[2],
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
widthInput.value = width;
|
||||||
|
heightInput.value = height;
|
||||||
|
sizeCanvas();
|
||||||
|
renderCanvas();
|
||||||
|
renderPalette();
|
||||||
|
updateSymbolSlotColors();
|
||||||
|
saveState();
|
||||||
|
} catch (e) {
|
||||||
|
alert('Failed to load TOML file: ' + e.message);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateActiveSlot() {
|
||||||
|
m1Slot.classList.toggle('active', activeSlot === 'm1');
|
||||||
|
m2Slot.classList.toggle('active', activeSlot === 'm2');
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateSymbolSlotColors() {
|
||||||
|
const c1 = getColor(symbols.m1);
|
||||||
|
m1Slot.style.color = `rgb(${c1[0]},${c1[1]},${c1[2]})`;
|
||||||
|
const c2 = getColor(symbols.m2);
|
||||||
|
m2Slot.style.color = `rgb(${c2[0]},${c2[1]},${c2[2]})`;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Palette UI
|
||||||
|
function renderPalette() {
|
||||||
|
const list = document.getElementById('palette-list');
|
||||||
|
list.innerHTML = '';
|
||||||
|
|
||||||
|
for (const entry of palette) {
|
||||||
|
const div = document.createElement('div');
|
||||||
|
div.className = 'palette-entry';
|
||||||
|
|
||||||
|
const swatch = document.createElement('span');
|
||||||
|
swatch.className = 'color-swatch';
|
||||||
|
swatch.style.background = entry.color;
|
||||||
|
|
||||||
|
const charSpan = document.createElement('span');
|
||||||
|
charSpan.className = 'palette-char';
|
||||||
|
charSpan.textContent = entry.char;
|
||||||
|
|
||||||
|
const labelSpan = document.createElement('span');
|
||||||
|
labelSpan.className = 'palette-label';
|
||||||
|
labelSpan.textContent = entry.label;
|
||||||
|
|
||||||
|
const editBtn = document.createElement('button');
|
||||||
|
editBtn.className = 'edit-btn';
|
||||||
|
editBtn.textContent = 'edit';
|
||||||
|
|
||||||
|
const delBtn = document.createElement('button');
|
||||||
|
delBtn.className = 'del-btn';
|
||||||
|
delBtn.textContent = 'x';
|
||||||
|
|
||||||
|
div.append(swatch, charSpan, labelSpan, editBtn, delBtn);
|
||||||
|
|
||||||
|
// Left click palette entry → set m1
|
||||||
|
div.addEventListener('click', (e) => {
|
||||||
|
if (e.target.tagName === 'BUTTON') return;
|
||||||
|
symbols.m1 = entry.char;
|
||||||
|
m1Slot.textContent = entry.char;
|
||||||
|
updateSymbolSlotColors();
|
||||||
|
saveState();
|
||||||
|
});
|
||||||
|
|
||||||
|
// Right click palette entry → set m2
|
||||||
|
div.addEventListener('contextmenu', (e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
if (e.target.tagName === 'BUTTON') return;
|
||||||
|
symbols.m2 = entry.char;
|
||||||
|
m2Slot.textContent = entry.char;
|
||||||
|
updateSymbolSlotColors();
|
||||||
|
saveState();
|
||||||
|
});
|
||||||
|
|
||||||
|
editBtn.addEventListener('click', () => {
|
||||||
|
showPaletteForm(entry);
|
||||||
|
});
|
||||||
|
|
||||||
|
delBtn.addEventListener('click', () => {
|
||||||
|
palette = palette.filter(e => e !== entry);
|
||||||
|
renderPalette();
|
||||||
|
renderCanvas();
|
||||||
|
updateSymbolSlotColors();
|
||||||
|
saveState();
|
||||||
|
});
|
||||||
|
|
||||||
|
list.appendChild(div);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function showPaletteForm(existing = null) {
|
||||||
|
const form = document.getElementById('palette-form');
|
||||||
|
const charInput = document.getElementById('palette-char');
|
||||||
|
const labelInput = document.getElementById('palette-label-input');
|
||||||
|
const colorInput = document.getElementById('palette-color');
|
||||||
|
|
||||||
|
if (existing) {
|
||||||
|
charInput.value = existing.char;
|
||||||
|
labelInput.value = existing.label;
|
||||||
|
colorInput.value = existing.color;
|
||||||
|
charInput.disabled = true;
|
||||||
|
} else {
|
||||||
|
charInput.value = '';
|
||||||
|
labelInput.value = '';
|
||||||
|
colorInput.value = '#cccccc';
|
||||||
|
charInput.disabled = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
form.style.display = 'block';
|
||||||
|
form.dataset.editing = existing ? existing.char : '';
|
||||||
|
|
||||||
|
if (!existing) charInput.focus();
|
||||||
|
else labelInput.focus();
|
||||||
|
}
|
||||||
|
|
||||||
|
function hidePaletteForm() {
|
||||||
|
document.getElementById('palette-form').style.display = 'none';
|
||||||
|
}
|
||||||
|
|
||||||
|
function savePaletteEntry() {
|
||||||
|
const form = document.getElementById('palette-form');
|
||||||
|
const char = document.getElementById('palette-char').value;
|
||||||
|
const label = document.getElementById('palette-label-input').value;
|
||||||
|
const color = document.getElementById('palette-color').value;
|
||||||
|
|
||||||
|
if (!char || char.length !== 1) return;
|
||||||
|
|
||||||
|
const editingChar = form.dataset.editing;
|
||||||
|
|
||||||
|
if (editingChar) {
|
||||||
|
const entry = palette.find(e => e.char === editingChar);
|
||||||
|
if (entry) {
|
||||||
|
entry.label = label;
|
||||||
|
entry.color = color;
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
const existing = palette.find(e => e.char === char);
|
||||||
|
if (existing) {
|
||||||
|
existing.label = label;
|
||||||
|
existing.color = color;
|
||||||
|
} else {
|
||||||
|
palette.push({ char, label, color });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
hidePaletteForm();
|
||||||
|
renderPalette();
|
||||||
|
renderCanvas();
|
||||||
|
updateSymbolSlotColors();
|
||||||
|
saveState();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Canvas events
|
||||||
|
canvas.addEventListener('mousedown', (e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
if (e.button === 0 || e.button === 2) {
|
||||||
|
isDrawing = true;
|
||||||
|
drawButton = e.button;
|
||||||
|
lastPaintedCell = null;
|
||||||
|
handlePaint(e, e.button);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
canvas.addEventListener('mousemove', (e) => {
|
||||||
|
if (isDrawing) {
|
||||||
|
handlePaint(e, drawButton);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Listen on document so releasing outside canvas still stops drawing
|
||||||
|
document.addEventListener('mouseup', () => {
|
||||||
|
if (isDrawing) {
|
||||||
|
isDrawing = false;
|
||||||
|
lastPaintedCell = null;
|
||||||
|
saveState();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
canvas.addEventListener('contextmenu', (e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
});
|
||||||
|
|
||||||
|
// View toggle
|
||||||
|
textViewCheckbox.addEventListener('change', () => {
|
||||||
|
viewMode = textViewCheckbox.checked ? 'text' : 'pixels';
|
||||||
|
sizeCanvas();
|
||||||
|
renderCanvas();
|
||||||
|
});
|
||||||
|
|
||||||
|
// Tool selection
|
||||||
|
document.querySelectorAll('input[name="tool"]').forEach(radio => {
|
||||||
|
radio.addEventListener('change', (e) => {
|
||||||
|
currentTool = e.target.value;
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// Symbol slot selection
|
||||||
|
m1Slot.addEventListener('click', () => {
|
||||||
|
activeSlot = 'm1';
|
||||||
|
updateActiveSlot();
|
||||||
|
saveState();
|
||||||
|
});
|
||||||
|
|
||||||
|
m2Slot.addEventListener('click', () => {
|
||||||
|
activeSlot = 'm2';
|
||||||
|
updateActiveSlot();
|
||||||
|
saveState();
|
||||||
|
});
|
||||||
|
|
||||||
|
// Keyboard input for symbols
|
||||||
|
document.addEventListener('keypress', (e) => {
|
||||||
|
if (e.target.tagName === 'INPUT') return;
|
||||||
|
|
||||||
|
const char = e.key;
|
||||||
|
if (char.length === 1 && char.charCodeAt(0) >= 32 && char.charCodeAt(0) <= 126) {
|
||||||
|
symbols[activeSlot] = char;
|
||||||
|
if (activeSlot === 'm1') {
|
||||||
|
m1Slot.textContent = char;
|
||||||
|
} else {
|
||||||
|
m2Slot.textContent = char;
|
||||||
|
}
|
||||||
|
updateSymbolSlotColors();
|
||||||
|
saveState();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Resize button
|
||||||
|
document.getElementById('resize').addEventListener('click', () => {
|
||||||
|
const newWidth = parseInt(widthInput.value);
|
||||||
|
const newHeight = parseInt(heightInput.value);
|
||||||
|
|
||||||
|
if (newWidth > 0 && newHeight > 0 && newWidth <= 1000 && newHeight <= 1000) {
|
||||||
|
initGrid(newWidth, newHeight, true);
|
||||||
|
} else {
|
||||||
|
alert('Invalid dimensions. Must be between 1 and 1000.');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Save button
|
||||||
|
document.getElementById('save').addEventListener('click', saveTOML);
|
||||||
|
|
||||||
|
// Load button
|
||||||
|
document.getElementById('load').addEventListener('click', () => {
|
||||||
|
document.getElementById('fileInput').click();
|
||||||
|
});
|
||||||
|
|
||||||
|
document.getElementById('fileInput').addEventListener('change', (e) => {
|
||||||
|
const file = e.target.files[0];
|
||||||
|
if (file) {
|
||||||
|
const reader = new FileReader();
|
||||||
|
reader.onload = (event) => {
|
||||||
|
loadTOML(event.target.result);
|
||||||
|
};
|
||||||
|
reader.readAsText(file);
|
||||||
|
}
|
||||||
|
e.target.value = '';
|
||||||
|
});
|
||||||
|
|
||||||
|
// Clear button
|
||||||
|
document.getElementById('clear').addEventListener('click', () => {
|
||||||
|
if (confirm('Clear the entire map? This cannot be undone.')) {
|
||||||
|
initGrid(gridWidth, gridHeight, false);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Palette buttons
|
||||||
|
document.getElementById('add-palette').addEventListener('click', () => {
|
||||||
|
showPaletteForm();
|
||||||
|
});
|
||||||
|
|
||||||
|
document.getElementById('palette-ok').addEventListener('click', savePaletteEntry);
|
||||||
|
document.getElementById('palette-cancel').addEventListener('click', hidePaletteForm);
|
||||||
|
|
||||||
|
// Initialize
|
||||||
|
if (!loadState()) {
|
||||||
|
renderPalette();
|
||||||
|
updateSymbolSlotColors();
|
||||||
|
initGrid(100, 100, false);
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Loading…
Reference in a new issue