herryyun/ark-stronghold-protocol
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

The bond bar can be folded, so the board stays tappable on phones (#149)

Browse Source 
The fold state stays for the match; Space does not ready or pause at the same time. Closes #142. Contributed by @CELLOPOI.
This commit is contained in:
Alsan Jayson authored and GitHub committed 2026-10-05 22:36:15 +08:00
1 parent 94b6f6ac14
commit ede8e7e773
5 files changed
+127 -3
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

public/css/screens/game.css
+11 -1
View File
@@ -220,12 +220,22 @@
.readybtn.is-busy { opacity: .7; }
/* ---- bond strip ---------------------------------------------------------------------------------------- */
.gm__bonds { position: absolute; left: 1.56rem; top: 1.36rem; right: 5.2rem; pointer-events: none; }
.gm__bonds { position: absolute; left: 1.56rem; top: 1.36rem; right: 5.2rem; pointer-events: none;
display: flex; align-items: flex-start; gap: max(.1rem, 8px); }
/* Only the bond discs (and the +N chip) take the pointer: the strip's box spans the width under the top bar, where the
top board row's units stand (row 12 at 16:9 / 21:9 / 720p / phones, the boss field's row 5 in a boss prep) — it used
to swallow the taps and drags on them (review of user playtest #2 item 8: every own unit reachable). */
.gm__bonds > *, .gm__bonds .bstrip { pointer-events: none; }
.gm__bonds .bslot, .gm__bonds .bstrip__more { pointer-events: auto; }
.gm__bond-list { min-width: 0; }
/* The hidden list leaves no hit area over the board; only this compact tab can reopen it (GitHub #142). */
.gm__bonds .bonds-toggle { pointer-events: auto; flex: none; display: inline-flex; align-items: center; justify-content: center;
gap: max(.03rem, 2px); min-width: 44px; min-height: 44px; padding: .06rem .08rem;
color: var(--text-hi); background: var(--bg-1); border: 1px solid var(--line-2); cursor: pointer;
font-size: max(.14rem, 11px); line-height: 1; }
.bonds-toggle .icon { width: max(.18rem, 14px); height: max(.18rem, 14px); }
.bonds-toggle:hover { color: var(--mint-500); border-color: var(--mint-500); }
.bonds-toggle:focus-visible { outline: 2px solid var(--mint-500); outline-offset: 2px; }
.bstrip { display: flex; align-items: flex-start; gap: .1rem; flex-wrap: nowrap; }
.bstrip.is-frozen .bslot { opacity: .5; filter: saturate(.4); }
.bstrip--empty { display: inline-flex; align-items: center; gap: .12rem; padding: .08rem .16rem; font-size: .15rem; color: var(--text-dim); background: rgba(8, 11, 10, .6); border: 1px dashed var(--line-2); }