98 lines
2.9 KiB
HTML
98 lines
2.9 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>NS Unknown Game Map Editor</title>
|
|
<link rel="stylesheet" href="styles.css">
|
|
</head>
|
|
<body>
|
|
<header class="app-header">
|
|
<div>
|
|
<h1>Map Editor</h1>
|
|
<p>Edits Frostbite2D .map text files used by the game runtime.</p>
|
|
</div>
|
|
<div class="header-actions">
|
|
<button id="loadSampleButton" type="button">Load stage_01.map</button>
|
|
<label class="file-button">
|
|
Open .map
|
|
<input id="fileInput" type="file" accept=".map,text/plain">
|
|
</label>
|
|
<button id="downloadButton" type="button">Download .map</button>
|
|
</div>
|
|
</header>
|
|
|
|
<main class="editor-shell">
|
|
<aside class="panel left-panel">
|
|
<section>
|
|
<h2>Map</h2>
|
|
<div class="field-grid">
|
|
<label>
|
|
ID
|
|
<input id="mapIdInput" type="text">
|
|
</label>
|
|
<label>
|
|
World W
|
|
<input id="worldWidthInput" type="number" step="1">
|
|
</label>
|
|
<label>
|
|
World H
|
|
<input id="worldHeightInput" type="number" step="1">
|
|
</label>
|
|
<label>
|
|
Grid
|
|
<input id="gridSizeInput" type="number" step="1" min="1" value="10">
|
|
</label>
|
|
</div>
|
|
</section>
|
|
|
|
<section>
|
|
<h2>Add</h2>
|
|
<div class="button-grid">
|
|
<button id="addTilesetButton" type="button">Tileset</button>
|
|
<button id="addLayerButton" type="button">Layer</button>
|
|
<button id="addCollisionButton" type="button">Collision</button>
|
|
<button id="addTileRectButton" type="button">Tile Rect</button>
|
|
<button id="addBattleZoneButton" type="button">Battle Zone</button>
|
|
<button id="addSpawnButton" type="button">Spawn</button>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="object-section">
|
|
<h2>Objects</h2>
|
|
<div id="objectList" class="object-list"></div>
|
|
</section>
|
|
</aside>
|
|
|
|
<section class="canvas-panel">
|
|
<div class="toolbar">
|
|
<span id="statusText">Ready</span>
|
|
<span id="viewText"></span>
|
|
</div>
|
|
<canvas id="mapCanvas" width="1280" height="720"></canvas>
|
|
</section>
|
|
|
|
<aside class="panel right-panel">
|
|
<section>
|
|
<h2>Selection</h2>
|
|
<div id="selectionSummary" class="selection-summary">Nothing selected.</div>
|
|
<div id="propertyPanel" class="property-panel"></div>
|
|
<button id="deleteButton" type="button" class="danger-button">Delete Selected</button>
|
|
</section>
|
|
|
|
<section>
|
|
<h2>Tilesets</h2>
|
|
<div id="tilesetList" class="tileset-list"></div>
|
|
</section>
|
|
|
|
<section>
|
|
<h2>Output</h2>
|
|
<textarea id="outputText" spellcheck="false"></textarea>
|
|
</section>
|
|
</aside>
|
|
</main>
|
|
|
|
<script src="app.js"></script>
|
|
</body>
|
|
</html>
|