v0.4

games.html

@@ -344,6 +344,19 @@
         </div>
       </div>
 
+      <div x-show="decks.length" style="border-top:1px solid rgba(232,220,196,.18);margin-top:1.4rem;padding-top:1.2rem;">
+        <div style="font:700 .68rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:1rem;">Card Deck</div>
+        <div class="form-group">
+          <label class="form-label">Default deck</label>
+          <select x-model="form.deck_id">
+            <option value="">Default Cards (built-in)</option>
+            <template x-for="d in decks" :key="d.id">
+              <option :value="d.id" x-text="d.name"></option>
+            </template>
+          </select>
+        </div>
+      </div>
+
       <div class="form-error" x-show="formError" x-text="formError"></div>
 
       <div class="modal-actions">
@@ -360,6 +373,7 @@
     function gamesApp() {
       return {
         games: [],
+        decks: [],
         loading: true,
         showModal: false,
         saving: false,
@@ -367,7 +381,11 @@
         form: {},
 
         async init() {
-          await this.loadGames()
+          await Promise.all([this.loadGames(), this.loadDecks()])
+        },
+
+        async loadDecks() {
+          try { const r = await fetch('/api/decks'); this.decks = r.ok ? await r.json() : [] } catch {}
         },
 
         async loadGames() {
@@ -386,7 +404,8 @@
             title: '', description: '', mood: 'light',
             timeline_start: '', timeline_end: '', password: '',
             start_title: '', start_description: '', start_mood: '',
-            end_title: '', end_description: '', end_mood: ''
+            end_title: '', end_description: '', end_mood: '',
+            deck_id: ''
           }
           this.formError = null
           this.showModal = true