Feat: add backlog

components/actionhistory.html

@@ -0,0 +1,17 @@
+{{define "actionhistory"}}
+<div class="overflow-y-auto max-h-96 border-2 border-gray-300 p-4 rounded-lg space-y-2">
+  Backlog:
+  {{range .}}
+    <div class="flex items-center justify-between p-2 rounded">
+      <span class="font-mono text-sm">
+      <span class="text-{{.ActorColor}}-600">{{.Actor}}:</span>
+        <span class="text-gray-600">{{.Action}}:</span>
+        <span class="text-{{.WordColor}}-500 font-medium">{{.Word}}</span>
+        {{if .Number}}
+        <span class="text-gray-400">- {{.Number}}</span>
+        {{end}}
+      </span>
+    </div>
+  {{end}}
+</div>
+{{end}}

components/cluepopup.html

@@ -1,53 +0,0 @@
-{{define "cluepopup"}}
-<div hx-sse="swap:newClue" hx-swap="none"
-    _="on htmx:sseMessage(mimeclue_{{.ID}})
-          -- Update content
-        set match to event.detail.match(/(.*?)(\d+)$/)
-          if match
-            set clue to match[1]
-            set number to match[2]
-          else
-            set clue to 'Invalid clue'
-            set number to '0'
-          end
-          
-          -- Cancel any previous timeout
-          if window.clueTimeout then clearTimeout(window.clueTimeout)
-          
-          -- Show with animation
-          remove .hidden from #clueModal
-          remove .opacity-0.-translate-y-4 from #clueModal div
-          add .opacity-100.translate-y-0 to #clueModal div
-          
-          -- Auto-hide after 3 seconds
-          set window.clueTimeout to setTimeout(() => 
-            trigger closeModal
-          end, 3000)
-        
-        on closeModal
-          -- Hide with animation
-          add .opacity-0.-translate-y-4 to #clueModal div
-          wait 300ms
-          add .hidden to #clueModal">
-<div id="clueModal" 
-     class="hidden fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full transition-opacity duration-300 ease-in-out">
-  <div class="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white 
-              transform transition-all duration-300 ease-out 
-              opacity-0 -translate-y-4">
-    <div class="mt-3 text-center">
-      <h3 class="text-lg leading-6 font-medium text-gray-900">New Clue Received! 🔍</h3>
-      <div class="mt-2 px-7 py-3">
-        <p class="text-sm text-gray-500">Clue: <span id="modalClue" class="font-medium"></span></p>
-        <p class="text-sm text-gray-500">Number: <span id="modalNumber" class="font-medium"></span></p>
-      </div>
-      <div class="items-center px-4 py-3">
-        <button _="on click trigger closeModal"
-                class="px-4 py-2 bg-green-500 text-white rounded-md hover:bg-green-700 transition-colors">
-          OK
-        </button>
-      </div>
-    </div>
-  </div>
-</div>
-</div>
-{{end}}

components/room.html

@@ -45,10 +45,8 @@
     {{template "mimeclue"}}
     {{end}}
   </div>
-  <div>
-  {{if .Room.MimeDone}}
-  {{template "cluepop"}}
-  {{end}}
+  <div hx-get="/actionhistory" hx-trigger="sse:backlog_{{.Room.ID}}">
+  {{template "actionhistory" .Room.ActionHistory}}
   </div>
 </div>
 {{end}}