v0.3

game.html

@@ -989,6 +989,16 @@
     </div>
   </div>
 
+  <!-- Live update toast -->
+  <div x-show="liveUpdate"
+       x-transition:enter="transition ease-out duration-200"
+       x-transition:enter-start="opacity-0 transform translate-y-2"
+       x-transition:leave="transition ease-in duration-300"
+       x-transition:leave-end="opacity-0"
+       style="position:fixed;bottom:1.5rem;right:1.5rem;z-index:400;background:var(--panel);border:1px solid rgba(112,121,78,.5);color:var(--moss);font:700 .62rem/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;padding:.55rem 1rem;pointer-events:none">
+    Chronicle updated
+  </div>
+
   <!-- Timeline click chooser — dismiss on outside click via transparent backdrop -->
   <div x-show="tlChooser.show"
        style="position:fixed;inset:0;z-index:199"
@@ -1351,6 +1361,8 @@
         saving: false,
         tlItems: [],
         _tlRows: { top: 1, bot: 1 },
+        // Live updates
+        liveUpdate: false,
         // Card draw
         cards: [],
         drawnCard: null,
@@ -1386,6 +1398,7 @@
             return
           }
           this.loadCards()
+          this.connectLive()
           const ok = await this.loadGame()
           if (!ok) { this.loading = false; return }
           await Promise.all([this.loadItems(), this.loadKeywords()])
@@ -1418,6 +1431,23 @@
           this.tlItems = this.computeLayout()
         },
 
+        connectLive() {
+          if (!this.slug) return
+          const es = new EventSource('/api/games/' + this.slug + '/live')
+          es.onmessage = async (e) => {
+            if (e.data === 'connected') return
+            // Don't reload while a modal is open — pick it up when they close
+            if (this.showModal) return
+            await Promise.all([this.loadGame(), this.loadItems(), this.loadKeywords()])
+            this.liveUpdate = true
+            setTimeout(() => this.liveUpdate = false, 2500)
+          }
+          es.onerror = () => {
+            es.close()
+            setTimeout(() => this.connectLive(), 5000)
+          }
+        },
+
         async loadCards() {
           try {
             const r = await fetch('/assets/cards.json')