95 lines
4.2 KiB
HTML
95 lines
4.2 KiB
HTML
<link rel="stylesheet" href="/map/map.css">
|
|
|
|
<div class="row g-3">
|
|
<div class="col-12">
|
|
<div class="d-flex flex-wrap align-items-end gap-2 mb-2">
|
|
<div>
|
|
<label class="form-label mb-0">X</label>
|
|
<input type="number" id="coordX" class="form-control form-control-sm" style="width:5rem" value="0">
|
|
</div>
|
|
<div>
|
|
<label class="form-label mb-0">Y</label>
|
|
<input type="number" id="coordY" class="form-control form-control-sm" style="width:5rem" value="0">
|
|
</div>
|
|
<div>
|
|
<label class="form-label mb-0">Z</label>
|
|
<input type="number" id="coordZ" class="form-control form-control-sm" style="width:5rem" value="0">
|
|
</div>
|
|
<button id="btnLoad" type="button" class="btn btn-sm btn-secondary">Load</button>
|
|
|
|
<div class="dropdown">
|
|
<button
|
|
class="btn btn-sm btn-outline-secondary dropdown-toggle"
|
|
type="button" data-bs-toggle="dropdown"
|
|
>Browse</button>
|
|
<ul class="dropdown-menu" id="chunkBrowseList"></ul>
|
|
</div>
|
|
|
|
<div class="dpad" title="Navigate to the neighboring chunk">
|
|
<button type="button" class="btn btn-sm btn-outline-secondary dpad-n" id="navN" title="North (+Y)">N</button>
|
|
<button type="button" class="btn btn-sm btn-outline-secondary dpad-w" id="navW" title="West (-X)">W</button>
|
|
<button type="button" class="btn btn-sm btn-outline-secondary dpad-e" id="navE" title="East (+X)">E</button>
|
|
<button type="button" class="btn btn-sm btn-outline-secondary dpad-s" id="navS" title="South (-Y)">S</button>
|
|
</div>
|
|
<div class="d-flex flex-column gap-1">
|
|
<button type="button" class="btn btn-sm btn-outline-secondary" id="navUp" title="Up (+Z)">Up</button>
|
|
<button type="button" class="btn btn-sm btn-outline-secondary" id="navDown" title="Down (-Z)">Down</button>
|
|
</div>
|
|
|
|
<button id="btnSave" type="button" class="btn btn-sm btn-primary ms-auto">
|
|
Save & Compile
|
|
</button>
|
|
</div>
|
|
<div id="statusLine" class="small text-muted mb-2"> </div>
|
|
</div>
|
|
|
|
<div class="col-12 col-lg-6">
|
|
<div class="d-flex align-items-center gap-2 mb-2">
|
|
<label class="form-label mb-0">Z-Level</label>
|
|
<button type="button" class="btn btn-sm btn-outline-secondary" id="zLevelDown">-</button>
|
|
<input type="range" id="zLevel" class="form-range" style="width:150px" min="0" max="3" value="0">
|
|
<button type="button" class="btn btn-sm btn-outline-secondary" id="zLevelUp">+</button>
|
|
<span id="zLevelLabel">0</span>
|
|
</div>
|
|
<div class="d-flex gap-3">
|
|
<div class="d-flex flex-column gap-2">
|
|
<button type="button" id="fillToggle" class="btn btn-sm btn-outline-secondary">Fill: Off</button>
|
|
<div id="tilePalette" class="tile-palette"></div>
|
|
</div>
|
|
<canvas id="gridCanvas" class="border tile-grid" width="512" height="512"></canvas>
|
|
</div>
|
|
|
|
<h5 class="mt-3">Meshes</h5>
|
|
<ul id="meshList" class="list-group mb-2"></ul>
|
|
<div class="d-flex gap-2 align-items-end flex-wrap">
|
|
<div style="min-width:220px">
|
|
<label class="form-label mb-0">Model</label>
|
|
<select id="meshPicker" class="form-select form-select-sm"></select>
|
|
</div>
|
|
<div>
|
|
<label class="form-label mb-0">X</label>
|
|
<input id="meshX" type="number" class="form-control form-control-sm" style="width:5rem" value="0">
|
|
</div>
|
|
<div>
|
|
<label class="form-label mb-0">Y</label>
|
|
<input id="meshY" type="number" class="form-control form-control-sm" style="width:5rem" value="0">
|
|
</div>
|
|
<div>
|
|
<label class="form-label mb-0">Z</label>
|
|
<input id="meshZ" type="number" class="form-control form-control-sm" style="width:5rem" value="0">
|
|
</div>
|
|
<button id="btnAddMesh" type="button" class="btn btn-sm btn-outline-primary">Add</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-12 col-lg-6">
|
|
<p class="small text-muted mb-2">Preview (scroll to zoom)</p>
|
|
<canvas id="previewCanvas" class="border" width="512" height="512"></canvas>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="/common/dmf.js"></script>
|
|
<script src="/common/chunkterrain.js"></script>
|
|
<script src="/map/renderer.js"></script>
|
|
<script src="/map/map.js"></script>
|