Enha: attempt to do modal popup of clue; must be a better way

components/cluepopup.html

@@ -0,0 +1,53 @@
+{{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/mimeclue.html

@@ -1,17 +1,21 @@
 {{define "mimeclue"}}
 <div class="flex gap-4 w-full">
-    <input type="text" 
-           class="flex-1 px-4 py-2 text-lg border-2 border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
-           placeholder="Enter clue..."
-           required>
-    <input type="number" 
-           class="w-24 px-4 py-2 text-lg border-2 border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
-           placeholder="Number" 
-           min="1" 
-           max="9"
-           required>
-    <button type="submit" class="px-6 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors">
-        Send
-    </button>
+    <form class="space-y-6" hx-post="/give-clue">
+        <input type="text" 
+               class="flex-1 px-4 py-2 text-lg border-2 border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+                name="clue"
+               placeholder="Enter clue..."
+               required>
+        <input type="number" 
+               class="w-24 px-4 py-2 text-lg border-2 border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+               placeholder="Number" 
+                name="number"
+               min="0" 
+               max="9"
+               required>
+        <button type="submit" class="px-6 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors">
+            Send
+        </button>
+    </form>
 </div>
 {{end}}

components/room.html

@@ -45,5 +45,10 @@
     {{template "mimeclue"}}
     {{end}}
   </div>
+  <div>
+  {{if .Room.MimeDone}}
+  {{template "cluepop"}}
+  {{end}}
+  </div>
 </div>
 {{end}}