<!doctype html><html lang="en"> <head> <meta charset="UTF-8" /> <title>Tile Gallery - verify the map tile picks</title> <style> body { font-family: Consolas, monospace; background: #10151d; color: #e8ecf3; padding: 24px; } h1 { font-size: 18px; color: #ffd166; } p { color: #9aa4b5; margin: 8px 0 20px; max-width: 720px; line-height: 1.5; } .grid { display: grid; grid-template-columns: repeat(12, 64px); gap: 8px; } .cell { text-align: center; background: #1c2330; border-radius: 8px; padding: 6px 2px 2px; border: 1px solid #2c3547; } .cell img { width: 48px; height: 48px; image-rendering: pixelated; background: #2f3a4f; border-radius: 4px; } .cell .n { font-size: 11px; color: #9aa4b5; margin-top: 2px; } .cell.pick { border-color: #ffd166; box-shadow: 0 0 8px rgba(255, 209, 102, 0.35); } .cell.pick .n { color: #ffd166; font-weight: bold; } .legend { margin: 16px 0; color: #9aa4b5; font-size: 13px; } </style> </head> <body> <h1>Tiny Town - tile gallery</h1> <p> This page shows every tile with its index. The gold-highlighted tiles are the ones the game currently uses for the world map. If something looks wrong (e.g. the "tree" is actually a house), open <code>src/render/textures.ts</code>, change the number in <code>TILE_ASSETS</code>, and reload the game. </p> <div class="legend" id="legend"></div> <div class="grid" id="grid"></div> <script> const picks = { grass: 0, grassFlowers: 2, sand: 25, sandAlt: 36, water: 48, waterAlt: 61, stone: 47, tree: 5, treeAlt: 19, bush: 7 }; const legend = document.getElementById("legend"); legend.innerHTML = "Used: " + Object.entries(picks).map(([k, v]) => `<b style="color:#ffd166">${k}=${v}</b>`).join(" · "); const grid = document.getElementById("grid"); for (let i = 0; i < 132; i++) { const isPick = Object.values(picks).includes(i); const cell = document.createElement("div"); cell.className = "cell" + (isPick ? " pick" : ""); cell.innerHTML = `<img src="assets/tiles/tile_${String(i).padStart(4, "0")}.png"><div class="n">${i}</div>`; grid.appendChild(cell); } </script> </body></html>