new _kit_bag_panel.html partial in core to allow user to manage equipped kit items from anywhere on site; #id_kit_btn moved from _footer.html partial directly into a base.html include; new trinket for superusers now incl. in apps.lyric.models; apps.gameboard.views handles this new type of PASS token; apps.epic.views allows payment with several different token types based on rarity & expiration hierarchy; kit bag and PASS functionality now handled in apps.dashboard.views; /kit-bag/ now pathed in .urls; styles abound; fully passing test suite (tho much work to be done, chiefly with stacking like coins in FEFO order)

2026-03-15 01:17:09 -04:00
parent 4baaa63430
commit 2d453dbc78
16 changed files with 521 additions and 23 deletions
--- a/src/static_src/scss/_game-kit.scss
+++ b/src/static_src/scss/_game-kit.scss
@@ -0,0 +1,123 @@
+#id_kit_btn {
+    position: fixed;
+    bottom: 0.5rem;
+    right: 0.5rem;
+    z-index: 205;
+    font-size: 1.75rem;
+    cursor: pointer;
+    color: rgba(var(--secUser), 1);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 3rem;
+    height: 3rem;
+    border-radius: 50%;
+    background-color: rgba(var(--priUser), 1);
+    border: 0.15rem solid rgba(var(--secUser), 1);
+
+    &:hover,
+    &.active {
+        color: rgba(var(--quaUser), 1);
+        border-color: rgba(var(--quaUser), 1);
+    }
+}
+
+#id_kit_bag_dialog {
+    // Override dialog's native display:none so we can drive visibility via max-height
+    display: block !important;
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    width: 100%;
+    max-width: none;
+    margin: 0;
+    padding: 0;
+    border: none;
+    border-top: 0.1rem solid rgba(var(--terUser), 0.3);
+    background: rgba(var(--priUser), 0.97);
+    z-index: 204;
+    overflow: hidden;
+    // Closed state
+    max-height: 0;
+    visibility: hidden;
+    transition: max-height 0.25s ease-out, visibility 0s 0.25s;
+
+    &[open] {
+        max-height: 5rem;
+        visibility: visible;
+        transition: max-height 0.25s ease-out, visibility 0s;
+        display: flex !important;
+        flex-direction: row;
+        gap: 1.5rem;
+        align-items: center;
+        padding: 0.4rem 1rem;
+    }
+}
+
+.kit-bag-section {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 0.5rem;
+    flex-shrink: 0;
+}
+
+.kit-bag-label {
+    font-size: 0.55rem;
+    text-transform: uppercase;
+    letter-spacing: 0.12em;
+    color: rgba(var(--secUser), 0.35);
+    writing-mode: vertical-rl;
+    text-orientation: mixed;
+    transform: rotate(180deg);
+}
+
+.kit-bag-row {
+    display: flex;
+    flex-direction: row;
+    gap: 0.4rem;
+}
+
+.kit-card {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.15rem;
+    padding: 0.3rem 0.4rem;
+    border: 0.1rem solid rgba(var(--terUser), 0.35);
+    border-radius: 0.4rem;
+    cursor: pointer;
+    min-width: 3rem;
+    transition: border-color 0.15s, box-shadow 0.15s;
+
+    i {
+        font-size: 1.1rem;
+        color: rgba(var(--terUser), 0.7);
+    }
+
+    .kit-card-label {
+        font-size: 0.5rem;
+        color: rgba(var(--secUser), 0.45);
+        text-align: center;
+        white-space: nowrap;
+    }
+
+    &:hover {
+        border-color: rgba(var(--terUser), 0.7);
+    }
+
+    &.selected {
+        border-color: rgba(var(--terUser), 1);
+        box-shadow:
+            0 0 0.4rem rgba(var(--terUser), 0.5),
+            0 0 1rem rgba(var(--terUser), 0.2)
+        ;
+        i { color: rgba(var(--terUser), 1); }
+    }
+}
+
+.kit-bag-empty {
+    font-size: 0.7rem;
+    color: rgba(var(--secUser), 0.4);
+}