250 lines
12 KiB
HTML
250 lines
12 KiB
HTML
<!doctype html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||
<title>Pixel Island Summoner - Local Prototype</title>
|
||
<link rel="stylesheet" href="./styles.css" />
|
||
</head>
|
||
<body>
|
||
<div class="app">
|
||
<canvas id="worldCanvas" aria-label="Island map"></canvas>
|
||
|
||
<button id="openEditor" class="edgeAdd" title="Open Pixel Studio">+</button>
|
||
|
||
<header class="hud topHud">
|
||
<div>
|
||
<div class="logo">Pixel Island</div>
|
||
<div class="subline">Local prototype / Draw pixels, summon them to islands.</div>
|
||
</div>
|
||
<label class="authorCard">
|
||
<span>Your Name</span>
|
||
<input id="authorName" type="text" maxlength="24" value="Local Artist" />
|
||
</label>
|
||
<div class="clockCard" aria-label="world clock">
|
||
<div id="phaseLabel" class="phaseLabel">Day</div>
|
||
<div class="phaseBar"><span id="phaseBar"></span></div>
|
||
<div class="clockHint">10 min = 1 day</div>
|
||
</div>
|
||
</header>
|
||
|
||
<aside class="hud toolHud">
|
||
<button id="modeInspect" class="iconButton active" title="Pan / Inspect">Pan</button>
|
||
<button id="modePlace" class="iconButton" title="Summon selected asset">Place</button>
|
||
<button id="modeErase" class="iconButton danger" title="Remove asset">Erase</button>
|
||
<div class="divider"></div>
|
||
<button id="zoomOut" class="iconButton" title="Zoom out">−</button>
|
||
<button id="zoomIn" class="iconButton" title="Zoom in">+</button>
|
||
<button id="resetView" class="iconButton" title="Reset view">Reset</button>
|
||
</aside>
|
||
|
||
<section id="studioDrawer" class="studioDrawer" aria-label="Pixel Studio">
|
||
<div class="drawerHead">
|
||
<div>
|
||
<h1>Pixel Studio</h1>
|
||
<p>Make static scenery or moving island life.</p>
|
||
</div>
|
||
<button id="closeEditor" class="ghostButton" title="Close">×</button>
|
||
</div>
|
||
|
||
<nav class="tabs" aria-label="Studio tabs">
|
||
<button class="tab active" data-tab="draw">Draw</button>
|
||
<button class="tab" data-tab="library">Library</button>
|
||
<button class="tab" data-tab="data">Data</button>
|
||
</nav>
|
||
|
||
<div class="drawerBody">
|
||
<section id="tab-draw" class="tabPanel active">
|
||
<div class="card editorCard heroEditor">
|
||
<div class="quickSetupBar twoCols">
|
||
<label class="field">Canvas size
|
||
<select id="assetSize">
|
||
<option value="8" selected>8×8</option>
|
||
<option value="16">16×16</option>
|
||
<option value="32">32×32</option>
|
||
<option value="64">64×64</option>
|
||
</select>
|
||
</label>
|
||
<label class="field">Role
|
||
<select id="assetCategory">
|
||
<option value="human">Human</option>
|
||
<option value="animal">Animal</option>
|
||
<option value="nature" selected>Nature</option>
|
||
<option value="building">Building</option>
|
||
<option value="ship">Ship</option>
|
||
<option value="other">Other</option>
|
||
</select>
|
||
</label>
|
||
</div>
|
||
|
||
<label class="field compactNameField">Name
|
||
<input id="assetName" type="text" maxlength="32" placeholder="Tiny bakery, round tree, island pup..." />
|
||
</label>
|
||
<div class="editorTop compactEditorTop">
|
||
<div id="sideSwitcher" class="sideSwitcher" hidden aria-label="Sprite direction">
|
||
<button id="editLeft" title="Left-facing sprite">◀ Left</button>
|
||
<button id="editRight" class="active" title="Right-facing sprite is the main/front direction">▶ Right</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="paintLayout">
|
||
<canvas id="paintCanvas" width="512" height="512" aria-label="Pixel editor"></canvas>
|
||
<div class="palettePanel">
|
||
<div id="paletteGrid" class="paletteGrid" aria-label="Color palette"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="toolRow editorToolRow">
|
||
<button id="toolBrush" class="tool active" title="B">Draw</button>
|
||
<button id="toolErase" class="tool" title="E">Erase</button>
|
||
<button id="toolFill" class="tool" title="F">Fill</button>
|
||
<button id="toolPick" class="tool" title="I">Pick</button>
|
||
<button id="toolLine" class="tool" title="L">Line</button>
|
||
<button id="toolRect" class="tool" title="R">Rect</button>
|
||
<button id="toolSelect" class="tool" title="S">Select</button>
|
||
<button id="toolDoor" class="tool buildingOnly">Door</button>
|
||
<button id="clearPaint" class="tool danger">Clear</button>
|
||
</div>
|
||
<div class="toolRow editorHistoryRow">
|
||
<button id="undoPaint" class="tool" type="button" disabled>Undo</button>
|
||
<button id="redoPaint" class="tool" type="button" disabled>Redo</button>
|
||
<button id="outlinePaint" class="tool" type="button">Outline</button>
|
||
<button id="flipHorizontal" class="tool" type="button">Flip H</button>
|
||
<button id="flipVertical" class="tool" type="button">Flip V</button>
|
||
</div>
|
||
<div class="toolRow editorMoveRow">
|
||
<button id="nudgeLeft" class="tool" type="button">←</button>
|
||
<button id="nudgeUp" class="tool" type="button">↑</button>
|
||
<button id="nudgeDown" class="tool" type="button">↓</button>
|
||
<button id="nudgeRight" class="tool" type="button">→</button>
|
||
<button id="clearSelection" class="tool" type="button" disabled>Clear Sel</button>
|
||
</div>
|
||
<div class="toolRow editorFileRow">
|
||
<button id="exportPng" class="tool" type="button">Export PNG</button>
|
||
<button id="importPng" class="tool" type="button">Import PNG</button>
|
||
<input id="pngImportInput" type="file" accept="image/png,image/*" hidden />
|
||
</div>
|
||
<div class="advancedRow">
|
||
<button id="toggleAdvanced" class="tool" type="button">Advanced Draw</button>
|
||
<button id="toolLight" class="tool advancedOnly" hidden>Light</button>
|
||
<button id="toolDepth" class="tool advancedOnly" hidden>Depth</button>
|
||
<button id="depthHigh" class="tool advancedOnly" type="button" hidden>High</button>
|
||
<button id="depthLow" class="tool advancedOnly" type="button" hidden>Low</button>
|
||
<button id="depthClear" class="tool advancedOnly" type="button" hidden>Clear</button>
|
||
<span id="advancedHint" class="hint" hidden>Light/Depth tools are here. Depth supports High/Low/Clear. Left-drag paints the selected depth value; Shift clears.</span>
|
||
</div>
|
||
<input id="paintColor" type="color" value="#6bd06b" hidden />
|
||
<div id="editHint" class="hint">Palette color is used for pixels, lights, and depth marks. Shortcuts: B/E/F/I/L/R/S, Ctrl/Cmd+Z, arrows move a selection.</div>
|
||
</div>
|
||
|
||
<div class="card stack summonCard">
|
||
<div class="cardTitle">Finish</div>
|
||
<div class="actionRow finishActions">
|
||
<button id="saveAndPlace" class="primary bigPrimary">Save + Summon on Map</button>
|
||
<button id="saveAsset" class="secondary">Save only</button>
|
||
<button id="newAsset" class="secondary">New</button>
|
||
</div>
|
||
</div>
|
||
<div id="lineageNote" class="lineageNote"></div>
|
||
</section>
|
||
|
||
<section id="tab-library" class="tabPanel">
|
||
<div class="card stack">
|
||
<div class="libraryHead">
|
||
<div class="cardTitle">Library</div>
|
||
<button id="showHiddenAssets" class="tool" type="button">Hidden</button>
|
||
</div>
|
||
<p class="hint">Click an asset to select it and jump to it on the map. Copy Edit creates a new derivative.</p>
|
||
<div id="hiddenAssetPanel" class="hiddenAssetPanel" hidden>
|
||
<div class="cardTitle">Hidden</div>
|
||
<div id="hiddenAssetList" class="assetList compactAssetList"></div>
|
||
</div>
|
||
<div id="assetList" class="assetList"></div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="tab-data" class="tabPanel">
|
||
<div class="card stack">
|
||
<div class="cardTitle">Local save</div>
|
||
<p class="hint">Saved to this browser only. Export JSON if you want to move or share a local world.</p>
|
||
<div class="actionRow wrap">
|
||
<button id="exportData">Export full JSON</button>
|
||
<button id="exportCompact">Export compact</button>
|
||
<button id="exportSnapshot">Export snapshot</button>
|
||
<button id="exportAssetBundle">Export asset bundle</button>
|
||
<button id="importData">Import JSON</button>
|
||
<button id="resetAll" class="danger">Reset all</button>
|
||
</div>
|
||
<div id="syncStats" class="syncStats"></div>
|
||
<textarea id="dataBox" rows="10" placeholder="Exported JSON appears here."></textarea>
|
||
</div>
|
||
|
||
|
||
<div class="card stack">
|
||
<div class="cardTitle">Visual settings</div>
|
||
<p class="hint">Turn major visual systems on or off.</p>
|
||
<div class="toggleList">
|
||
<label class="checkRow"><input id="settingLights" type="checkbox" checked /> <span>Lights & glow</span></label>
|
||
<label class="checkRow"><input id="settingParticles" type="checkbox" checked /> <span>Particles & ambient FX</span></label>
|
||
<label class="checkRow"><input id="settingDayNight" type="checkbox" checked /> <span>Day / night cycle</span></label>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card stack">
|
||
<div class="cardTitle">Phase 5 guardrails</div>
|
||
<p class="hint">Local pre-server checks for object volume, orphaned placements, terrain compatibility, hidden objects, and report logs.</p>
|
||
<div id="guardrailStats" class="syncStats"></div>
|
||
<div class="actionRow wrap">
|
||
<button id="validateWorld" type="button">Validate world</button>
|
||
<button id="exportModerationReport" type="button">Export moderation report</button>
|
||
<button id="clearReports" class="danger" type="button">Clear reports</button>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
</section>
|
||
|
||
<div id="selectionBubble" class="selectionBubble" hidden>
|
||
<div id="bubbleName" class="bubbleName">Name</div>
|
||
<div id="bubbleAuthor" class="bubbleAuthor">by Author</div>
|
||
<div id="bubbleRemixFrom" class="bubbleRemixFrom" hidden></div>
|
||
<div id="bubbleRemixCount" class="bubbleRemixCount">Remixed: 0</div>
|
||
<div class="bubbleVotes">
|
||
<button id="voteUp" type="button">▲</button>
|
||
<span id="voteScore">0</span>
|
||
<button id="voteDown" type="button">▼</button>
|
||
</div>
|
||
<div class="bubbleActions">
|
||
<button id="bubbleRemix" type="button">Remix</button>
|
||
<button id="bubbleReport" type="button">Report</button>
|
||
<button id="bubbleHide" type="button" hidden>Hide</button>
|
||
</div>
|
||
</div>
|
||
<div id="toast" class="toast" hidden></div>
|
||
|
||
<div id="reportDialog" class="reportDialog" hidden>
|
||
<div class="reportCard" role="dialog" aria-modal="true" aria-labelledby="reportTitle">
|
||
<div id="reportTitle" class="cardTitle">Report object</div>
|
||
<p class="hint">Select a reason for reporting <strong id="reportObjectName">this object</strong>.</p>
|
||
<label class="field">Reason
|
||
<select id="reportReason">
|
||
<option value="inappropriate">Inappropriate / sexual</option>
|
||
<option value="harassment">Harassment / hate</option>
|
||
<option value="spam">Spam / flooding</option>
|
||
<option value="copyright">Copyright / stolen work</option>
|
||
<option value="other">Other</option>
|
||
</select>
|
||
</label>
|
||
<div class="actionRow wrap reportActions">
|
||
<button id="reportSubmit" class="danger" type="button">Report + Hide</button>
|
||
<button id="reportCancel" type="button">Cancel</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="./js/editor-actions.js"></script>
|
||
<script src="./js/phase2-sync.js"></script>
|
||
<script src="./app.js"></script>
|
||
</body>
|
||
</html>
|