Skip to content

Commit acd053d

Browse files
author
DavidQ
committed
Add acordion to Games Level & updated Workspace > Workflow
1 parent 2d85127 commit acd053d

3 files changed

Lines changed: 66 additions & 20 deletions

File tree

‎games/index.css‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -115,3 +115,46 @@
115115
.hub-page-games .pin-label {
116116
margin-right: 6px;
117117
}
118+
119+
body.hub-page-games .games-level-accordion {
120+
margin: 0 0 12px;
121+
border: 1px solid var(--line, rgba(221, 214, 254, 0.26));
122+
border-radius: 12px;
123+
background: linear-gradient(180deg, var(--panel, rgba(76, 29, 149, 0.88)) 0%, var(--panel2, rgba(49, 17, 102, 0.94)) 100%);
124+
overflow: hidden;
125+
border-bottom: 1px solid var(--line, rgba(221, 214, 254, 0.26));
126+
}
127+
128+
body.hub-page-games .games-level-accordion > .is-collapsible__summary {
129+
display: flex;
130+
align-items: center;
131+
justify-content: space-between;
132+
gap: 10px;
133+
padding: 12px 14px;
134+
font-size: 1.35rem;
135+
background: rgba(43, 16, 91, 0.78);
136+
color: var(--text, #f7f4ff);
137+
position: static;
138+
top: auto;
139+
left: auto;
140+
z-index: auto;
141+
}
142+
143+
body.hub-page-games .games-level-accordion > .is-collapsible__summary::before {
144+
font-size: 2em;
145+
margin-right: 6px;
146+
}
147+
148+
body.hub-page-games .games-level-accordion[open] > .is-collapsible__summary {
149+
position: static;
150+
}
151+
152+
.games-level-accordion__count {
153+
color: var(--muted, #e9ddff);
154+
font-size: 1rem;
155+
font-weight: 600;
156+
}
157+
158+
.games-level-accordion__content {
159+
padding: 12px;
160+
}

‎games/index.render.js‎

Lines changed: 15 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -217,15 +217,26 @@ function render(container, statusNode, rows, state) {
217217
const groups = groupByLevel(filtered);
218218
container.innerHTML = "";
219219
for (const group of groups) {
220-
const section = document.createElement("section");
221-
section.className = "content-section";
222-
section.innerHTML = `<h2>${escapeHtml(group.level)}</h2>`;
220+
const section = document.createElement("details");
221+
section.className = "is-collapsible games-level-accordion";
222+
section.dataset.level = group.level;
223+
section.open = true;
224+
const summary = document.createElement("summary");
225+
summary.className = "is-collapsible__summary";
226+
summary.innerHTML = `
227+
<span class="games-level-accordion__title">${escapeHtml(group.level)}</span>
228+
<span class="games-level-accordion__count">${group.items.length} game${group.items.length === 1 ? "" : "s"}</span>
229+
`;
230+
const content = document.createElement("div");
231+
content.className = "is-collapsible__content games-level-accordion__content";
223232
const grid = document.createElement("div");
224233
grid.className = "game-level-grid";
225234
for (const row of group.items) {
226235
grid.appendChild(renderCard(row, `main-${row.id}`));
227236
}
228-
section.appendChild(grid);
237+
content.appendChild(grid);
238+
section.appendChild(summary);
239+
section.appendChild(content);
229240
container.appendChild(section);
230241
}
231242
const totalLevels = new Set(rows.map((row) => row.level)).size;

‎tools/Workspace Manager/how_to_use.html‎

Lines changed: 8 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -32,22 +32,14 @@ <h2>Tool vs Workspace Saves</h2>
3232
</section>
3333
<section class="section">
3434
<h2>Workflow</h2>
35-
<div class="tools-howto-workflow-compare">
36-
<article class="card tools-howto-workflow-column">
37-
<h3>Tool Mode</h3>
38-
<p><strong>1. Coordinate multi-tool workspace sessions</strong><br />Action: Launch this tool from <code>tools/&lt;tool&gt;/index.html</code> (not through Workspace Manager).<br />Why this step matters: Uses this tool as a focused single-tool surface.</p>
39-
<p><strong>2. Build/edit in the tool</strong><br />Action: Switch tools from tiles and monitor shared workspace context.<br />Why this step matters: Keeps cross-tool workflows orchestrated under one manifest.</p>
40-
<p><strong>3. Save/export deliverables</strong><br />Action: Save workspace manifest checkpoints as you progress.<br />Why this step matters: Preserves synchronized cross-tool state.</p>
41-
<p><strong>4. Continue or close</strong><br />Action: Open another tool directly as needed.<br />Why this step matters: Tool mode is best for isolated tasks and rapid single-tool iteration.</p>
42-
</article>
43-
44-
<article class="card tools-howto-workflow-column">
45-
<h3>Workspace Mode</h3>
46-
<p><strong>1. Create a named workspace</strong><br />Action: Click <code>New Workspace</code> and enter a meaningful name (example: <code>UAT 001 Workspace</code>).<br />Why this step matters: Starts from a clear baseline and makes saved snapshots easy to identify.</p>
47-
<p><strong>2. Open tools from Workspace Manager tiles</strong><br />Action: Select needed tool tiles and perform each tool's primary task.<br />Why this step matters: Keeps multi-tool work coordinated under one shared context.</p>
48-
<p><strong>3. Save both levels intentionally</strong><br />Action: Use tool-level save/export for artifacts, then click <code>Save Workspace</code> for session state.<br />Why this step matters: Preserves both deliverable files and cross-tool orchestration state.</p>
49-
<p><strong>4. Checkpoint and resume</strong><br />Action: Use <code>Save Workspace As</code> for milestones and <code>Open Workspace</code> to resume later.<br />Why this step matters: Supports versioned progress and reliable continuation.</p>
50-
</article>
35+
<div class="card">
36+
<h3>Workspace Mode</h3>
37+
<p><strong>1. Create a named workspace</strong><br />Action: Click <code>New Workspace</code> and enter a meaningful name (example: <code>UAT 001 Workspace</code>).<br />Why this step matters: Starts from a clear baseline and makes saved snapshots easy to identify.</p>
38+
<p><strong>2. Before opening a tool, confirm workspace state</strong><br />Action: Verify header status for <code>Workspace</code>, <code>Shared Palette</code>, and <code>Shared Assets</code> so you know the current context.<br />Why this step matters: Prevents editing with stale or unintended shared data.</p>
39+
<p><strong>3. Example flow A: Palette Browser -&gt; Sprite Editor</strong><br />Action: In <code>Palette Browser</code>, select/create a palette and click <code>Use in Workspace Manager</code>, then open <code>Sprite Editor</code> and continue sprite work with that palette context.<br />Why this step matters: Demonstrates intentional shared palette handoff between tools.</p>
40+
<p><strong>4. Example flow B: Asset Browser -&gt; Vector Map Editor</strong><br />Action: In <code>Asset Browser</code>, select an approved asset, then open <code>Vector Map Editor</code> to reference that asset while building map geometry.<br />Why this step matters: Keeps asset selection and map authoring synchronized in one workspace session.</p>
41+
<p><strong>5. After each tool step, save the right thing</strong><br />Action: First run tool-level save/export for concrete outputs (JSON, PNG, payloads), then click <code>Save Workspace</code> to persist cross-tool session state.<br />Why this step matters: Preserves both deliverables and orchestration context.</p>
42+
<p><strong>6. Use checkpoints and resume safely</strong><br />Action: Use <code>Save Workspace As</code> at milestones (for example, pre-import and post-import), and use <code>Open Workspace</code> later to continue exactly where you left off.<br />Why this step matters: Supports versioned progress, rollback points, and reliable continuation.</p>
5143
</div>
5244
</section>
5345

0 commit comments

Comments
 (0)