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

assets/style.css

@@ -45,3 +45,25 @@ tr{
     border: 1px solid black;
     background-color: darkorange;
 }
+
+@keyframes fadeInDown {
+  from {
+    opacity: 0;
+    transform: translateY(-1rem);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes fadeOutUp {
+  from {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(-1rem);
+  }
+}

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">
+    <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" 
-           min="1" 
+                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}}

handlers/auth.go

@@ -49,7 +49,10 @@ func HandleNameCheck(w http.ResponseWriter, r *http.Request) {
 }
 
 func HandleFrontLogin(w http.ResponseWriter, r *http.Request) {
-	r.ParseForm()
+	if err := r.ParseForm(); err != nil {
+		abortWithError(w, err.Error())
+		return
+	}
 	username := r.PostFormValue("username")
 	if username == "" {
 		msg := "username not provided"

handlers/game.go

@@ -240,3 +240,29 @@ func HandleJoinRoom(w http.ResponseWriter, r *http.Request) {
 	}
 	tmpl.ExecuteTemplate(w, "room", fi)
 }
+
+func HandleGiveClue(w http.ResponseWriter, r *http.Request) {
+	if err := r.ParseForm(); err != nil {
+		abortWithError(w, err.Error())
+		return
+	}
+	clue := r.PostFormValue("clue")
+	num := r.PostFormValue("number")
+	fi, err := getFullInfoByCtx(r.Context())
+	if err != nil {
+		abortWithError(w, err.Error())
+		return
+	}
+	fi.Room.MimeDone = true
+	notify(models.NotifyMimePrefix+fi.Room.ID, clue+num)
+	if err := saveFullInfo(fi); err != nil {
+		abortWithError(w, err.Error())
+		return
+	}
+	// tmpl, err := template.ParseGlob("components/*.html")
+	// if err != nil {
+	// 	abortWithError(w, err.Error())
+	// 	return
+	// }
+	// tmpl.ExecuteTemplate(w, "room", fi)
+}

main.go

@@ -29,7 +29,7 @@ func ListenToRequests(port string) error {
 	mux.HandleFunc("POST /room-create", handlers.HandleCreateRoom)
 	mux.HandleFunc("GET /start-game", handlers.HandleStartGame)
 	mux.HandleFunc("GET /room-join", handlers.HandleJoinRoom)
-	// mux.HandleFunc("GET /roomlist", handlers.HandleRoomList)
+	mux.HandleFunc("POST /give-clue", handlers.HandleGiveClue)
 	//elements
 	mux.HandleFunc("GET /room/createform", handlers.HandleShowCreateForm)
 	mux.HandleFunc("GET /room/hideform", handlers.HandleHideCreateForm)

models/keys.go

@@ -9,4 +9,5 @@ var (
 	CacheStatePrefix = "state-"
 	// sse
 	NotifyRoomUpdatePrefix = "roomupdate_"
+	NotifyMimePrefix       = "mimeclue_"
 )

models/main.go

@@ -53,6 +53,7 @@ type Room struct {
 	BlueCounter uint8
 	RedCounter  uint8
 	RedTurn     bool // false is blue turn
+	MimeDone    bool
 	IsPublic    bool
 	// GameSettings *GameSettings `json:"settings"`
 	IsRunning bool   `json:"is_running"`