136 lines
6.5 KiB
HTML
136 lines
6.5 KiB
HTML
<title>Deepgrain Foundry</title>
|
||
<meta name="claude:viewport-fit-sides" content="cover">
|
||
<style>
|
||
/*__CSS__*/
|
||
</style>
|
||
|
||
<canvas id="game" aria-label="Game world"></canvas>
|
||
<div id="ovframe" aria-hidden="true"><i class="c1"></i><i class="c2"></i><i class="c3"></i><i class="c4"></i></div>
|
||
|
||
<div id="hud" hidden>
|
||
<div class="corner tl">
|
||
<div id="hotbar" class="plate interactive" role="toolbar" aria-label="Tools"></div>
|
||
<div id="selcard" class="plate interactive" aria-live="polite"></div>
|
||
</div>
|
||
<div class="corner tr">
|
||
<button id="wallet" class="plate interactive" aria-label="Money and the trade dock. Opens the Market page.">
|
||
<span class="money num" id="w-money"></span>
|
||
<span class="line" id="w-claim"></span>
|
||
<span class="orders" id="w-orders"></span>
|
||
</button>
|
||
<div id="bagpanel" class="plate interactive">
|
||
<div class="head">
|
||
<span class="label">Bag</span>
|
||
<span class="num" id="bagcap"></span>
|
||
</div>
|
||
<div class="bar" id="bagbar"><i></i></div>
|
||
<div id="baglist"></div>
|
||
<div id="bagfoot"></div>
|
||
</div>
|
||
</div>
|
||
<div class="corner bl">
|
||
<div id="info" class="plate"></div>
|
||
</div>
|
||
<div class="corner br">
|
||
<div id="minimap" class="plate interactive"><canvas id="mini-canvas" width="200" height="130" aria-label="Minimap"></canvas><div class="map-buttons"><button id="mini-minus" class="iconbtn" aria-label="Zoom out minimap">−</button><button id="mini-plus" class="iconbtn" aria-label="Zoom in minimap">+</button><button id="mini-map" class="iconbtn">Map <kbd>M</kbd></button></div></div>
|
||
</div>
|
||
<div class="corner bc">
|
||
<div id="cards" aria-live="polite"></div>
|
||
<div id="buildbar" class="plate interactive" hidden role="toolbar" aria-label="Build menu"></div>
|
||
<div id="ovbadges" aria-live="polite"></div>
|
||
</div>
|
||
</div>
|
||
<div id="toasts" aria-live="polite"></div>
|
||
<div id="perf"></div>
|
||
<div id="saving" hidden role="status"><i></i>Saving…</div>
|
||
|
||
<div id="title">
|
||
<div class="titlewrap">
|
||
<canvas id="titleart" width="320" height="80" aria-label="Deepgrain Foundry"></canvas>
|
||
<p class="tagline">Dig. Smelt. Cast your own tools. Every grain is simulated, and nothing turns into anything unless the physics says so.</p>
|
||
<div class="tmenu" id="tmenu">
|
||
<button class="btn primary" id="btn-continue" hidden>Continue <small id="continue-meta"></small></button>
|
||
<button class="btn" id="btn-worlds" hidden>Worlds <small>load · rename · delete</small></button>
|
||
<button class="btn" id="btn-new">New world <small>generate</small></button>
|
||
<div class="plate newworld" id="newworld" hidden>
|
||
<label>Name <input id="nw-name" type="text" maxlength="40" autocomplete="off" spellcheck="false"></label>
|
||
<label>Seed <input id="nw-seed" type="text" inputmode="numeric" autocomplete="off"></label>
|
||
<label>Size
|
||
<select id="nw-size">
|
||
<option value="2048x1024">Small · 2048 × 1024</option>
|
||
<option value="3072x1280" selected>Medium · 3072 × 1280</option>
|
||
<option value="4096x1536">Large · 4096 × 1536</option>
|
||
<option value="6144x2048">Huge · 6144 × 2048</option>
|
||
</select>
|
||
</label>
|
||
<button class="btn primary full" id="btn-generate">Generate and start</button>
|
||
</div>
|
||
<button class="btn" id="btn-title-settings">Settings <small>display · audio · controls</small></button>
|
||
<button class="btn" id="btn-title-help">How to play <small>controls · first steps</small></button>
|
||
</div>
|
||
<p class="touchnote" id="touchnote" hidden>This prototype needs a keyboard and mouse, or a gamepad.</p>
|
||
</div>
|
||
<div class="tfoot">Prototype v0.1 · keyboard + mouse or gamepad · all graphics and sound are generated in code</div>
|
||
</div>
|
||
|
||
<div id="loading" hidden><div class="plate"><span class="label">Generating world</span><div class="bar"><i id="loadbar" style="width:0%"></i></div><span id="loadstep" role="status"></span><span id="loadtext" class="num" style="color:var(--ash)">0%</span></div></div>
|
||
|
||
<div id="m-pause" class="modal small" hidden>
|
||
<div class="plate">
|
||
<div class="mhead"><h2>Paused</h2><span class="label num" id="pause-meta"></span></div>
|
||
<div class="mbody" style="display:flex;flex-direction:column;gap:8px">
|
||
<button class="btn primary" id="pm-resume">Resume</button>
|
||
<button class="btn" id="pm-notebook">Notebook</button>
|
||
<button class="btn" id="pm-settings">Settings</button>
|
||
<button class="btn" id="pm-save">Save now</button>
|
||
<button class="btn" id="pm-export">Export world file</button>
|
||
<button class="btn" id="pm-import">Import world file</button>
|
||
<button class="btn" id="pm-title">Save and quit to title</button>
|
||
<input type="file" id="importfile" accept=".json,application/json" hidden>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="m-settings" class="modal" hidden>
|
||
<div class="plate">
|
||
<div class="mhead"><h2>Settings</h2><button class="iconbtn" data-close aria-label="Close settings">Close <kbd>Esc</kbd></button></div>
|
||
<div class="tabs" id="set-tabs" role="tablist"></div>
|
||
<div class="mbody" id="set-body"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="m-notebook" class="modal" hidden>
|
||
<div class="plate">
|
||
<div class="mhead"><h2>Field notebook</h2><button class="iconbtn" data-close aria-label="Close notebook">Close <kbd>N</kbd></button></div>
|
||
<div class="tabs" id="nb-tabs" role="tablist"></div>
|
||
<div class="mbody" id="nb-body"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="m-worlds" class="modal" hidden>
|
||
<div class="plate">
|
||
<div class="mhead"><h2>Worlds</h2><button class="iconbtn" data-close aria-label="Close worlds">Close <kbd>Esc</kbd></button></div>
|
||
<div class="mbody" id="worlds-list"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="m-map" class="modal" hidden>
|
||
<div class="plate">
|
||
<div class="mhead"><h2>World map</h2><button class="iconbtn" data-close aria-label="Close map">Close <kbd>M / Esc</kbd></button></div>
|
||
<canvas id="map-canvas" aria-label="World map. Drag to pan; wheel to zoom."></canvas>
|
||
<div class="mfoot"><button id="map-minus" class="iconbtn" aria-label="Zoom out map">−</button><button id="map-plus" class="iconbtn" aria-label="Zoom in map">+</button><button id="map-centre" class="iconbtn">Centre on bot</button><span class="note">Drag to pan · wheel to zoom</span></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="m-dialog" class="modal small" hidden>
|
||
<div class="plate">
|
||
<div class="mhead"><h2 id="dlg-title"></h2></div>
|
||
<div class="mbody" id="dlg-body"></div>
|
||
<div class="mfoot" id="dlg-foot"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
//__JS__
|
||
</script>
|