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)

src/templates/apps/dashboard/home.html

@@ -10,7 +10,7 @@
 
 {% block content %}
     {% if user.is_authenticated %}
-        <div id="id_dash_content">
+        <div id="id_dash_content" class="dashboard-page">
             {% include "apps/applets/_partials/_gear.html" with menu_id="id_dash_applet_menu" %}
             {% include "apps/dashboard/_partials/_applets.html" %}
         </div>

src/templates/apps/gameboard/_partials/_applet-game-kit.html

@@ -4,9 +4,19 @@
 >
     <h2>Game Kit</h2>
     <div id="id_game_kit">
+        {% if pass_token %}
+            <div id="id_kit_pass_token" class="token">
+                <i class="fa-solid fa-clipboard"></i>
+                <div class="token-tooltip">
+                    <h4>{{ pass_token.tooltip_name }}</h4>
+                    <p>{{ pass_token.tooltip_description }}</p>
+                    <p class="expiry">{{ pass_token.tooltip_expiry }}</p>
+                </div>
+            </div>
+        {% endif %}
         {% if coin %}
             <div id="id_kit_coin_on_a_string" class="token">
-                <i class="fa-solid fa-clover"></i>
+                <i class="fa-solid fa-medal"></i>
                 <div class="token-tooltip">
                     <h4>{{ coin.tooltip_name }}</h4>
                     <p>

src/templates/apps/wallet/_partials/_applet-wallet-tokens.html

@@ -4,9 +4,18 @@
 >
     <h2>Tokens</h2>
     <div class="token-row">
-    {% if coin %}
+    {% if pass_token %}
+        <div id="id_pass_token" class="token">
+            <i class="fa-solid fa-clipboard"></i>
+            <div class="token-tooltip">
+                <h4>{{ pass_token.tooltip_name }}</h4>
+                <p>{{ pass_token.tooltip_description }}</p>
+                <p class="expiry">{{ pass_token.tooltip_expiry }}</p>
+            </div>
+        </div>
+    {% elif coin %}
         <div id="id_coin_on_a_string" class="token">
-            <i class="fa-solid fa-clover"></i>
+            <i class="fa-solid fa-medal"></i>
             <div class="token-tooltip">
                 <h4>{{ coin.tooltip_name }}</h4>
                 <p>{{ coin.tooltip_description }}</p>

src/templates/core/_partials/_kit_bag_panel.html

@@ -0,0 +1,48 @@
+{% if tokens %}
+<div class="kit-bag-section">
+    <span class="kit-bag-label">Trinkets</span>
+    <div class="kit-bag-row">
+        {% for token in tokens %}
+            {% if token.token_type == "coin" or token.token_type == "pass" %}
+            <div
+                class="kit-card"
+                draggable="true"
+                data-token-id="{{ token.id }}"
+                data-token-type="{{ token.token_type }}"
+            >
+                {% if token.token_type == "coin" %}
+                    <i class="fa-solid fa-medal"></i>
+                {% else %}
+                    <i class="fa-solid fa-clipboard"></i>
+                {% endif %}
+                <span class="kit-card-label">{{ token.tooltip_name }}</span>
+            </div>
+            {% endif %}
+        {% endfor %}
+    </div>
+</div>
+<div class="kit-bag-section">
+    <span class="kit-bag-label">Tokens</span>
+    <div class="kit-bag-row">
+        {% for token in tokens %}
+            {% if token.token_type == "Free" or token.token_type == "tithe" %}
+            <div
+                class="kit-card"
+                draggable="true"
+                data-token-id="{{ token.id }}"
+                data-token-type="{{ token.token_type }}"
+            >
+                {% if token.token_type == "Free" %}
+                    <i class="fa-solid fa-coins"></i>
+                {% else %}
+                    <i class="fa-solid fa-piggy-bank"></i>
+                {% endif %}
+                <span class="kit-card-label">{{ token.tooltip_name }}</span>
+            </div>
+            {% endif %}
+        {% endfor %}
+    </div>
+</div>
+{% else %}
+<p class="kit-bag-empty">Kit bag empty.</p>
+{% endif %}

src/templates/core/base.html

@@ -50,10 +50,18 @@
         
         {% include "core/_partials/_footer.html" %}
 
+        {% if user.is_authenticated %}
+        <button id="id_kit_btn" data-kit-url="{% url 'kit_bag' %}" aria-label="Open Kit Bag">
+            <i class="fa-solid fa-briefcase"></i>
+        </button>
+        {% endif %}
+        <dialog id="id_kit_bag_dialog"></dialog>
+
         {% block scripts %}
         {% endblock scripts %}
         <script src="{% static "vendor/htmx.min.js" %}"></script>
         <script src="{% static "apps/scripts/applets.js" %}"></script>
+        <script src="{% static "apps/scripts/game-kit.js" %}"></script>
         <script>
             document.body.addEventListener('htmx:configRequest', function(evt) {
                 evt.detail.headers['X-CSRFToken'] = getCookie('csrftoken');