new _room_gear.html to manage room actions for various gamers (e.g., founders & guests); new _room.scss for gatekeeper styling (still flimsy); added new .btn-abandon Bl-btn palette to _button-pad.scss; new FTs & epic view ITs assert functionality (100 percent coverage, fully passing test suite)

2026-03-14 00:10:40 -04:00
parent dddffd22d5
commit af3523c9bb
10 changed files with 297 additions and 1 deletions
--- a/src/static_src/scss/_room.scss
+++ b/src/static_src/scss/_room.scss
@@ -0,0 +1,119 @@
+$gate-node: 64px;
+$gate-gap: 36px;
+$gate-line: 2px;
+
+.room-page {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 60vh;
+}
+
+.room-page .gear-btn,
+#id_room_menu {
+    z-index: 101;
+}
+
+.gate-overlay {
+    position: fixed;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: rgba(0, 0, 0, 0.7);
+    backdrop-filter: blur(4px);
+    z-index: 100;
+}
+
+.gate-modal {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 2rem;
+    padding: 2rem;
+    border-radius: 1rem;
+    background-color: rgba(var(--priUser), 1);
+
+    .gate-header {
+        text-align: center;
+        h1 { margin: 0; }
+        .gate-status {
+            opacity: 0.5;
+            font-size: 0.75em;
+            text-transform: uppercase;
+            letter-spacing: 0.15em;
+        }
+    }
+
+    .gate-slots {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        gap: $gate-gap;
+
+        .gate-slot {
+            position: relative;
+            width: $gate-node;
+            height: $gate-node;
+            border-radius: 50%;
+            border: $gate-line solid rgba(var(--terUser), 1);
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            flex-shrink: 0;
+
+            &.filled {
+                background: rgba(var(--terUser), 0.2);
+            }
+
+            .slot-number {
+                font-size: 0.7em;
+                opacity: 0.5;
+            }
+
+            .slot-gamer { display: none; }
+
+            form {
+                position: absolute;
+                inset: 0;
+            }
+
+            .drop-token-btn {
+                position: absolute;
+                inset: 0;
+                border-radius: 50%;
+                width: 100%;
+                height: 100%;
+                background: transparent;
+                border: none;
+                font-size: 0;
+                cursor: pointer;
+
+                &:hover {
+                    background: rgba(var(--terUser), 0.15);
+                }
+            }
+        }
+    }
+}
+
+// Mobile: 2×3 grid, both rows left-to-right
+@media (max-width: 550px) {
+    .gate-modal .gate-slots {
+        display: grid;
+        grid-template-columns: repeat(3, $gate-node);
+        grid-template-rows: repeat(2, $gate-node);
+        gap: $gate-gap;
+
+        .gate-slot {
+            &:nth-child(1) { grid-column: 1; grid-row: 1; }
+            &:nth-child(2) { grid-column: 2; grid-row: 1; }
+            &:nth-child(3) { grid-column: 3; grid-row: 1; }
+            &:nth-child(4) { grid-column: 1; grid-row: 2; }
+            &:nth-child(5) { grid-column: 2; grid-row: 2; }
+            &:nth-child(6) { grid-column: 3; grid-row: 2; }
+        }
+    }
+}