update
This commit is contained in:
parent
67a7477242
commit
a05c031074
7 changed files with 1781 additions and 385 deletions
135
index.html
135
index.html
|
|
@ -9,41 +9,44 @@
|
|||
<body>
|
||||
<div class="app">
|
||||
<canvas id="worldCanvas" aria-label="Island map"></canvas>
|
||||
<div id="islandClickHint" class="islandClickHint">Left-click: select · Right-click: clear</div>
|
||||
|
||||
<button id="openEditor" class="edgeAdd" title="Open Pixel Studio">+</button>
|
||||
<button id="openEditor" class="drawDockButton" type="button" title="Open Pixel Studio">✎ DRAW</button>
|
||||
<div id="placementPreviewBar" class="placementPreviewBar" hidden>
|
||||
<button id="confirmPreviewPlace" class="primary" type="button">Place here</button>
|
||||
<button id="backToCanvas" class="secondary" type="button">Back to canvas</button>
|
||||
<span>Check how this work looks on the island. Works are permanent in Library; island placement is temporary exhibition.</span>
|
||||
<span>Check how this work looks on the island. Works are permanent in Collection; island placement is temporary exhibition.</span>
|
||||
</div>
|
||||
|
||||
<header class="hud topHud">
|
||||
<div>
|
||||
<header class="hud topHud islandTopBar">
|
||||
<div class="brandBlock">
|
||||
<div class="logo">Pixel Island</div>
|
||||
<div class="subline">Local prototype / Draw pixels, summon them to islands.</div>
|
||||
<div class="subline">A rotating island exhibition for tiny pixel works.</div>
|
||||
</div>
|
||||
<label class="authorCard">
|
||||
<span>Your Name</span>
|
||||
<input id="authorName" type="text" maxlength="24" value="Local Artist" />
|
||||
<button id="createAccount" class="miniButton" type="button">Create local account</button>
|
||||
<small id="accountNote">Account required to publish. Prototype only: name + local timestamp.</small>
|
||||
</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 class="authorCard accountCard utilityControl" aria-label="Local account">
|
||||
<div class="accountFields">
|
||||
<label class="accountField">ID
|
||||
<input id="accountId" type="text" readonly placeholder="auto" />
|
||||
</label>
|
||||
<label class="accountField">Name
|
||||
<input id="authorName" type="text" maxlength="24" value="Local Artist" />
|
||||
</label>
|
||||
<label class="accountField">Pass
|
||||
<input id="accountPass" type="text" maxlength="32" placeholder="auto" />
|
||||
</label>
|
||||
</div>
|
||||
<button id="createAccount" class="miniButton" type="button">Generate account</button>
|
||||
<small id="accountNote">Save + Place creates a local ID, name, and password. Change the password after creation.</small>
|
||||
</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>
|
||||
<div id="analogClock" class="analogClock" aria-label="Island day-night clock" title="10 min = 1 island day">
|
||||
<div class="analogClockDial">
|
||||
<span id="analogClockHand" class="analogClockHand"></span>
|
||||
</div>
|
||||
<div id="phaseLabel" class="phaseLabel analogClockLabel">Day</div>
|
||||
<div class="phaseBar analogPhaseBar" aria-hidden="true"><span id="phaseBar"></span></div>
|
||||
</div>
|
||||
|
||||
<section id="studioDrawer" class="studioDrawer" aria-label="Pixel Studio">
|
||||
<div class="drawerHead">
|
||||
|
|
@ -55,9 +58,9 @@
|
|||
</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>
|
||||
<button class="tab active" data-tab="draw">Create</button>
|
||||
<button class="tab" data-tab="library">Collection</button>
|
||||
<button class="tab devOnly" data-tab="data">Data</button>
|
||||
</nav>
|
||||
|
||||
<div class="drawerBody">
|
||||
|
|
@ -102,33 +105,49 @@
|
|||
</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>
|
||||
<button id="toolBrush" class="tool toolBrush active" title="B">✎ Draw</button>
|
||||
<button id="toolErase" class="tool toolErase" title="E">⌫ Erase</button>
|
||||
<button id="toolFill" class="tool toolFill" title="F">▣ Fill</button>
|
||||
<button id="toolPick" class="tool toolPick" title="I">◆ Pick</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>
|
||||
<button id="clearSelection" class="tool" type="button" disabled>Clear Sel</button>
|
||||
<button id="undoPaint" class="tool toolUndo" type="button" disabled>↶ Undo</button>
|
||||
<button id="redoPaint" class="tool toolRedo" type="button" disabled>↷ Redo</button>
|
||||
</div>
|
||||
<div id="advancedToolGroup" class="advancedToolGroup" hidden>
|
||||
<div class="toolRow advancedDrawRow">
|
||||
<button id="toolLine" class="tool toolLine advancedTool" title="L">／ Line</button>
|
||||
<button id="toolRect" class="tool toolRect advancedTool" title="R">□ Rect</button>
|
||||
<button id="toolSelect" class="tool toolSelect advancedTool" title="S">▥ Select</button>
|
||||
<button id="toolDoor" class="tool toolDoor advancedTool buildingOnly">▤ Door</button>
|
||||
<button id="clearPaint" class="tool danger advancedTool">× Clear</button>
|
||||
</div>
|
||||
<div class="toolRow advancedActionRow">
|
||||
<button id="outlinePaint" class="tool toolOutline advancedTool" type="button">▧ Outline</button>
|
||||
<button id="flipHorizontal" class="tool toolFlipH advancedTool" type="button">⇄ Flip H</button>
|
||||
<button id="flipVertical" class="tool toolFlipV advancedTool" type="button">⇅ Flip V</button>
|
||||
<button id="clearSelection" class="tool toolClearSel advancedTool" type="button" disabled>◇ Clear Sel</button>
|
||||
</div>
|
||||
</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="toolParticle" class="tool advancedOnly" hidden>Particle</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, Particle, and Depth tools are here. Particle uses the selected palette color; Shift/right-click clears.</span>
|
||||
<button id="toggleAdvanced" class="tool toolAdvanced" type="button">＋ Advanced</button>
|
||||
<button id="toolLight" class="tool toolLight advancedOnly" hidden>✹ Light</button>
|
||||
<button id="toolDepth" class="tool toolDepth advancedOnly" hidden>▨ Depth</button>
|
||||
<button id="toolParticle" class="tool toolParticle advancedOnly" hidden>⁕ Particle</button>
|
||||
<button id="depthHigh" class="tool advancedOnly" type="button" hidden>▲ High</button>
|
||||
<button id="depthLow" class="tool advancedOnly" type="button" hidden>▼ Low</button>
|
||||
<div id="particleDirectionWrap" class="particleControl particleControlGroup advancedOnly" hidden>
|
||||
<label>Direction
|
||||
<select id="particleDirection">
|
||||
<option value="up" selected>↑ Up</option>
|
||||
<option value="down">↓ Down</option>
|
||||
<option value="left">← Left</option>
|
||||
<option value="right">→ Right</option>
|
||||
</select>
|
||||
</label>
|
||||
<small id="particleRangeStatus">Particle: paint cells like Light/Depth. Shift/right-click clears a cell.</small>
|
||||
</div>
|
||||
<span id="advancedHint" class="hint" hidden>Advanced tools stay below the basic draw row. Select tool: left-click selects, right-click clears selection. Particle paints emitter cells with palette color and direction. Shift/right-click clears a particle cell.</span>
|
||||
</div>
|
||||
<input id="paintColor" type="color" value="#6bd06b" hidden />
|
||||
<div id="editHint" class="hint">Palette color is used for pixels, lights, particles, and depth marks. Shortcuts: B/E/F/I/L/R/S, Ctrl/Cmd+Z, arrows move a selection.</div>
|
||||
|
|
@ -138,9 +157,7 @@
|
|||
<div class="cardTitle">Finish</div>
|
||||
<div class="actionRow finishActions">
|
||||
<button id="saveAndPlace" class="primary bigPrimary">Save + Place on Island</button>
|
||||
<button id="saveAsset" class="secondary">Save to Library</button>
|
||||
<button id="checkOnIsland" class="secondary">Check on Island</button>
|
||||
<button id="newAsset" class="secondary">New</button>
|
||||
<button id="saveAsset" class="secondary">Save to Collection</button>
|
||||
</div>
|
||||
</div>
|
||||
<div id="lineageNote" class="lineageNote"></div>
|
||||
|
|
@ -149,7 +166,7 @@
|
|||
<section id="tab-library" class="tabPanel">
|
||||
<div class="card stack">
|
||||
<div class="libraryHead">
|
||||
<div class="cardTitle">Library</div>
|
||||
<div class="cardTitle">Collection</div>
|
||||
<button id="showHiddenAssets" class="tool" type="button">Hidden</button>
|
||||
</div>
|
||||
<p class="hint">Your works are permanent here. The island is a temporary exhibition: place your own new or past works; remix only copies lineage and pixels to the canvas.</p>
|
||||
|
|
@ -162,10 +179,10 @@
|
|||
</div>
|
||||
</section>
|
||||
|
||||
<section id="tab-data" class="tabPanel">
|
||||
<section id="tab-data" class="tabPanel devOnly">
|
||||
<div class="card stack">
|
||||
<div class="cardTitle">Local save</div>
|
||||
<p class="hint">Works are durable library assets; island placements are temporary exhibition objects. Export JSON if you want to move or test a local world.</p>
|
||||
<p class="hint">Works are durable collection works; island placements are temporary exhibition objects. Export JSON if you want to move or test a local world.</p>
|
||||
<div class="actionRow wrap">
|
||||
<button id="exportData">Export full JSON</button>
|
||||
<button id="exportCompact">Export compact</button>
|
||||
|
|
@ -221,7 +238,11 @@
|
|||
<button id="voteDown" type="button">▼</button>
|
||||
</div>
|
||||
<div class="bubbleActions">
|
||||
<button id="bubbleRemix" type="button">Remix</button>
|
||||
<button id="bubbleRemix" class="bubbleRemixPrimary" type="button">Remix</button>
|
||||
<button id="bubbleTeleport" type="button" hidden>Teleport to source</button>
|
||||
</div>
|
||||
<button id="bubbleMenu" class="bubbleMenuButton" type="button">Menu</button>
|
||||
<div id="bubbleMenuActions" class="bubbleMenuActions" hidden>
|
||||
<button id="bubbleReport" type="button">Report</button>
|
||||
<button id="bubbleHide" type="button" hidden>Hide</button>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue