Skip to content

Commit 9e31f58

Browse files
author
DavidQ
committed
Object Shape/Type
1 parent 1f586c1 commit 9e31f58

3 files changed

Lines changed: 1163 additions & 677 deletions

File tree

‎tools/Skin Editor/index.html‎

Lines changed: 64 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -34,59 +34,87 @@
3434
<div id="skinEditorStatus" class="debug-tool-meta">Skin editor ready.</div>
3535
</section>
3636

37-
<section class="debug-tool-grid skin-editor-grid">
38-
<section class="panel debug-tool-panel skin-editor-visual-panel">
39-
<h3>Visual Controls</h3>
37+
<section class="skin-editor-workbench">
38+
<aside class="panel debug-tool-panel skin-editor-column skin-editor-column--left">
4039
<div class="skin-editor-context">
4140
<span id="skinEditorContextGame" class="skin-editor-chip">Game: n/a</span>
4241
<span id="skinEditorContextSchema" class="skin-editor-chip">Schema: n/a</span>
4342
<span id="skinEditorContextSource" class="skin-editor-chip">Source: n/a</span>
4443
</div>
45-
<section class="skin-editor-section">
46-
<h4>Live Preview Canvas</h4>
47-
<div class="skin-editor-preview-toolbar">
48-
<label class="debug-tool-label" for="skinEditorPreviewItemSelect">
49-
Focus Item
50-
<select id="skinEditorPreviewItemSelect" class="debug-tool-field">
51-
<option value="paddle">Paddle</option>
52-
<option value="ball">Ball</option>
53-
<option value="brick">Brick</option>
54-
</select>
55-
</label>
44+
<section class="skin-editor-section skin-editor-section--shape-add">
45+
<h4>Object Shape/Type</h4>
46+
<div class="skin-editor-shape-add-row">
47+
<label for="skinEditorNewShapeType">Object Shape/Type</label>
48+
<select id="skinEditorNewShapeType" class="skin-editor-field">
49+
<option value="circle">Circle</option>
50+
<option value="oval">Oval</option>
51+
<option value="rectangle">Rectangle</option>
52+
<option value="square">Square</option>
53+
<option value="polygon">Polygon</option>
54+
<option value="star">Star</option>
55+
<option value="ring">Ring</option>
56+
<option value="wall-3-sides">Wall (3 Sides)</option>
57+
<option value="hud-color">HUD Color</option>
58+
</select>
59+
</div>
60+
<div class="skin-editor-shape-add-row">
61+
<label for="skinEditorNewShapeName">Name</label>
62+
<input
63+
id="skinEditorNewShapeName"
64+
class="skin-editor-field"
65+
type="text"
66+
placeholder="example: paddle, hudText, hudPanel"
67+
autocomplete="off"
68+
/>
5669
</div>
70+
<div class="debug-tool-actions">
71+
<button type="button" id="skinEditorAddShapeButton" class="debug-tool-control">Add</button>
72+
<button type="button" id="skinEditorRenameObjectButton" class="debug-tool-control">Rename</button>
73+
<button type="button" id="skinEditorDeleteObjectButton" class="debug-tool-control">Delete</button>
74+
<button type="button" id="skinEditorFlattenObjectsButton" class="debug-tool-control">Flatten</button>
75+
</div>
76+
</section>
77+
<h3>Objects</h3>
78+
<div id="skinEditorObjectList" class="skin-editor-object-list" role="listbox" aria-label="Skin objects"></div>
79+
</aside>
80+
81+
<section class="panel debug-tool-panel skin-editor-canvas-panel">
82+
<h3>Canvas Preview</h3>
83+
<div class="skin-editor-canvas-wrap">
5784
<canvas
5885
id="skinEditorPreviewCanvas"
5986
class="skin-editor-preview-canvas"
60-
width="720"
61-
height="260"
62-
aria-label="Skin preview canvas"
87+
width="960"
88+
height="560"
89+
aria-label="Selected object preview"
6390
></canvas>
64-
<p id="skinEditorPreviewNote" class="skin-editor-empty"></p>
65-
<h4>Focused Item Controls</h4>
66-
<div id="skinEditorFocusedControls" class="skin-editor-list"></div>
91+
</div>
92+
<p id="skinEditorPreviewNote" class="skin-editor-empty"></p>
93+
</section>
94+
95+
<aside class="panel debug-tool-panel skin-editor-column skin-editor-column--right">
96+
<h3>Inspector</h3>
97+
<section class="skin-editor-section">
98+
<h4>Palette</h4>
99+
<div id="skinEditorPaletteList" class="skin-editor-palette-list"></div>
67100
</section>
68101
<section class="skin-editor-section">
69-
<h4>Object Colors</h4>
70-
<div id="skinEditorColorList" class="skin-editor-list"></div>
102+
<h4>Selected Object</h4>
103+
<div id="skinEditorObjectControls" class="skin-editor-list"></div>
71104
</section>
105+
72106
<section class="skin-editor-section">
73-
<h4>Object Metrics</h4>
74-
<div id="skinEditorSizingList" class="skin-editor-list"></div>
107+
<h4>Skin JSON Input</h4>
108+
<textarea id="skinEditorInput" class="debug-tool-field skin-editor-json" rows="14"></textarea>
109+
<div class="debug-tool-actions">
110+
<button type="button" id="skinEditorSyncVisualButton" class="debug-tool-control">Sync Visual From JSON</button>
111+
</div>
75112
</section>
76113
<section class="skin-editor-section">
77-
<h4>Entities</h4>
78-
<div id="skinEditorEntitiesList" class="skin-editor-entities"></div>
114+
<h4>Skin Summary</h4>
115+
<pre id="skinEditorSummary" class="debug-tool-readout">Load active skin to inspect its payload.</pre>
79116
</section>
80-
</section>
81-
<section class="panel debug-tool-panel">
82-
<h3>Skin JSON Input</h3>
83-
<textarea id="skinEditorInput" class="debug-tool-field skin-editor-json" rows="18"></textarea>
84-
<div class="debug-tool-actions">
85-
<button type="button" id="skinEditorSyncVisualButton" class="debug-tool-control">Sync Visual From JSON</button>
86-
</div>
87-
<h3>Skin Summary</h3>
88-
<pre id="skinEditorSummary" class="debug-tool-readout">Load active skin to inspect its payload.</pre>
89-
</section>
117+
</aside>
90118
</section>
91119
</div>
92120

0 commit comments

Comments
 (0)