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}}

handlers/elements.go

@@ -66,6 +66,14 @@ func HandleShowColor(w http.ResponseWriter, r *http.Request) {
 	}
 	fi.Room.RevealSpecificWord(word)
 	fi.Room.UpdateCounter()
+	action := models.Action{
+		Actor:      fi.State.Username,
+		ActorColor: string(fi.State.Team),
+		WordColor:  color,
+		Action:     "guessed",
+		Word:       word,
+	}
+	fi.Room.ActionHistory = append(fi.Room.ActionHistory, action)
 	// if opened card is of color of opp team, change turn
 	switch color {
 	case "black":
@@ -83,3 +91,17 @@ func HandleShowColor(w http.ResponseWriter, r *http.Request) {
 	notify(models.NotifyRoomUpdatePrefix+fi.Room.ID, "")
 	tmpl.ExecuteTemplate(w, "cardword", cardword)
 }
+
+func HandleActionHistory(w http.ResponseWriter, r *http.Request) {
+	fi, err := getFullInfoByCtx(r.Context())
+	if err != nil {
+		abortWithError(w, err.Error())
+		return
+	}
+	tmpl, err := template.ParseGlob("components/*.html")
+	if err != nil {
+		abortWithError(w, err.Error())
+		return
+	}
+	tmpl.ExecuteTemplate(w, "actionhistory", fi.Room.ActionHistory)
+}

handlers/game.go

@@ -253,16 +253,19 @@ func HandleGiveClue(w http.ResponseWriter, r *http.Request) {
 		abortWithError(w, err.Error())
 		return
 	}
+	action := models.Action{
+		Actor:      fi.State.Username,
+		ActorColor: string(fi.State.Team),
+		WordColor:  string(fi.State.Team),
+		Action:     "gave clue",
+		Word:       clue,
+		Number:     num,
+	}
+	fi.Room.ActionHistory = append(fi.Room.ActionHistory, action)
 	fi.Room.MimeDone = true
-	notify(models.NotifyMimePrefix+fi.Room.ID, clue+num)
+	notify(models.NotifyBacklogPrefix+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

@@ -31,6 +31,7 @@ func ListenToRequests(port string) error {
 	mux.HandleFunc("GET /room-join", handlers.HandleJoinRoom)
 	mux.HandleFunc("POST /give-clue", handlers.HandleGiveClue)
 	//elements
+	mux.HandleFunc("GET /actionhistory", handlers.HandleActionHistory)
 	mux.HandleFunc("GET /room/createform", handlers.HandleShowCreateForm)
 	mux.HandleFunc("GET /room/hideform", handlers.HandleHideCreateForm)
 	mux.HandleFunc("GET /word/show-color", handlers.HandleShowColor)

models/keys.go

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

models/main.go

@@ -37,24 +37,34 @@ type Team struct {
 	Color    string
 }
 
+type Action struct {
+	Actor      string
+	ActorColor string
+	Action     string // clue | guess
+	Word       string
+	WordColor  string
+	Number     string // for clue
+}
+
 type Room struct {
 	ID        string    `json:"id" db:"id"`
 	CreatedAt time.Time `json:"created_at" db:"created_at"`
 	// RoomName     string    `json:"room_name"`
-	RoomPass    string `json:"room_pass"`
-	RoomLink    string
-	CreatorName string   `json:"creator_name"`
-	PlayerList  []string `json:"player_list"`
-	TeamTurn    string
-	RedTeam     Team
-	BlueTeam    Team
-	Cards       []WordCard
-	Result      uint8 // 0 for unknown; 1 is win for red; 2 if for blue;
-	BlueCounter uint8
-	RedCounter  uint8
-	RedTurn     bool // false is blue turn
-	MimeDone    bool
-	IsPublic    bool
+	RoomPass      string `json:"room_pass"`
+	RoomLink      string
+	CreatorName   string   `json:"creator_name"`
+	PlayerList    []string `json:"player_list"`
+	ActionHistory []Action
+	TeamTurn      string
+	RedTeam       Team
+	BlueTeam      Team
+	Cards         []WordCard
+	Result        uint8 // 0 for unknown; 1 is win for red; 2 if for blue;
+	BlueCounter   uint8
+	RedCounter    uint8
+	RedTurn       bool // false is blue turn
+	MimeDone      bool
+	IsPublic      bool
 	// GameSettings *GameSettings `json:"settings"`
 	IsRunning bool   `json:"is_running"`
 	Language  string `json:"language" example:"en" form:"language"`