44r0n7/deepgrain-foundry
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Bag: hint and Clear selection stay visible under the list (t20)

Browse Source 
The hint and Clear button were inside the scrolling bag list, so a long
Ctrl list scrolled them away. They now sit in a footer under the list, and
Clear is a full-width, highlighted "Clear selection" button.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
44r0n7
2026-10-24 14:29:02 -04:00
co-authored by Claude Opus 5.5
parent 248aba439e
commit 318de3ed76
7 changed files with 33 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/shell.html
+1
View File
@@ -25,6 +25,7 @@
</div>
<div class="bar" id="bagbar"><i></i></div>
<div id="baglist"></div>
<div id="bagfoot"></div>
</div>
</div>
<div class="corner bl">
src/styles/style.css
+5 -2
View File
@@ -180,11 +180,14 @@ table.mt td.dip { color: var(--melt); }
#baglist .tag { flex: none; padding: 0 3px; color: var(--patina); font-size: 11px; }
#selcard .vacrow { flex-wrap: wrap; gap: 4px; }
#selcard .vacrow .sw { width: 9px; height: 9px; }
#baglist .baghint { color: var(--ash-dim); font-size: 0.82em; padding: 4px 4px 0; }
#bagfoot:empty { display: none; }
#bagfoot { border-top: 1px solid var(--soot-3); margin-top: 4px; }
#bagfoot .baghint { color: var(--ash-dim); font-size: 0.82em; padding: 4px 4px 0; }
.bagsep { margin: 6px 4px 2px; padding-top: 5px; border-top: 1px solid var(--ash-dim); color: var(--ash-dim); font-size: 0.75em; text-transform: uppercase; letter-spacing: 0.08em; }
#baglist .bagrow.none { opacity: 0.55; }
#baglist .bagrow.none:hover { opacity: 1; }
#baglist .bagclear { display: inline-flex; margin-left: 5px; padding: 1px 5px; background: transparent; color: var(--ash-dim); border: 1px solid var(--soot-3); font-size: inherit; }
#bagfoot .bagclear { display: block; width: 100%; margin-top: 6px; padding: 4px 8px; background: rgba(92, 186, 166, 0.12); color: var(--bone); border: 1px solid var(--patina-dim); border-radius: 3px; font-weight: 600; cursor: pointer; }
#bagfoot .bagclear:hover { background: rgba(92, 186, 166, 0.24); border-color: var(--patina); }
#bagtoggle { background: none; border: none; color: var(--ash); cursor: pointer; padding: 0 2px; }
#info { padding: 7px 10px; min-width: calc(220px * var(--ui)); max-width: min(360px, 60vw); display: flex; flex-direction: column; gap: 2px; font-size: 0.92em; }
src/ui/selection.js
+10 -9
View File
@@ -210,6 +210,16 @@ function renderBag() {
if (key === lastBagKey) return;
lastBagKey = key;
const box = $('baglist'); box.innerHTML = '';
// the hint and Clear sit under the list, outside its scroll, so they never scroll away
const foot = $('bagfoot'); foot.innerHTML = '';
if (t === 'vacuum') {
foot.appendChild(el('div', { class: 'baghint' }, "Click: select only this · Ctrl+click: add to the selection (hold Ctrl to see everything you've found) · Q/E: next"));
if (GAME.blow.size) {
const clear = el('button', { class: 'bagclear', 'data-bag-clear': '' }, 'Clear selection');
clear.onclick = () => { GAME.blow.clear(); lastBagKey = ''; hudDirty = true; playSfx('ui'); };
foot.appendChild(clear);
}
}
if (!l.length) { box.appendChild(el('div', { class: 'empty' }, 'Empty. Break rock with the Drill, then use the Vacuum.')); return; }
for (const m of l) {
if (m === missing[0]) box.appendChild(el('div', { class: 'bagsep' }, 'Not in bag'));
@@ -230,13 +240,4 @@ function renderBag() {
row.appendChild(b);
box.appendChild(row);
}
if (t === 'vacuum') {
const hint = el('div', { class: 'baghint' }, "Click: select only this · Ctrl+click: add to the selection (hold Ctrl to see everything you've found) · Q/E: next");
if (GAME.blow.size) {
const clear = el('button', { class: 'bagclear', 'data-bag-clear': '' }, 'Clear');
clear.onclick = () => { GAME.blow.clear(); lastBagKey = ''; hudDirty = true; playSfx('ui'); };
hint.appendChild(clear);
}
box.appendChild(hint);
}
}