add history table

internal/senders/history.go

@@ -0,0 +1,28 @@
+package senders
+
+import (
+	"bytes"
+	"log"
+	templatedata "rcp/elite/internal/types/template-data"
+	"rcp/elite/internal/utils"
+
+	"github.com/gorilla/websocket"
+)
+
+func AppendHistory(conn *websocket.Conn, playerMove, opponentMove, winner string) error {
+	historyData := templatedata.History{
+		PlayerMove:   playerMove,
+		OpponentMove: opponentMove,
+		Winner:       winner,
+	}
+
+	var tplBufferOpponent bytes.Buffer
+	err := utils.Templates.ExecuteTemplate(&tplBufferOpponent, "history-row", historyData)
+	if err != nil {
+		log.Printf("Error executing template history : %v\n", err)
+		return err
+	}
+
+	return conn.WriteMessage(websocket.TextMessage, tplBufferOpponent.Bytes())
+
+}

internal/services/game.go

@@ -5,7 +5,6 @@ import (
 	"encoding/hex"
 	"errors"
 	"fmt"
-	"log"
 	"rcp/elite/internal/senders"
 	"rcp/elite/internal/types"
 	"sync"
@@ -176,8 +175,6 @@ func SetPlayerMove(playerName string, move string) error {
 		return errors.New("player not in game")
 	}
 
-	log.Printf("Move allowed %v", doesGameAllowMove(v))
-
 	if !doesGameAllowMove(v) {
 		return errors.New("game currently does not allow player to make move")
 	}
@@ -235,6 +232,8 @@ func mainGameLoop(gameId string) {
 
 		sendEndRound(gameId, winner, tie)
 
+		updatePlayersHistory(gameId, winner)
+
 		time.Sleep(3 * time.Second)
 
 	}
@@ -259,6 +258,18 @@ func mainGameLoop(gameId string) {
 
 }
 
+func updatePlayersHistory(gameId, winner string) {
+	g, ok := getGameFromId(gameId)
+
+	if !ok {
+		return
+	}
+
+	for _, p := range g.Players {
+		senders.AppendHistory(p.Conn, p.Move, getOpponentMove(g.Players, p), winner)
+	}
+}
+
 func hasReachMaxRound(gameId string) bool {
 	g, ok := getGameFromId(gameId)
 
@@ -278,9 +289,10 @@ func roundStart(gameId string) {
 		return
 	}
 
-	for _, p := range g.Players {
+	for k, p := range g.Players {
 		senders.SendMessage(p.Conn, "Round start! you have 5s", "empty-5s")
 		p.Move = ""
+		g.Players[k] = p
 
 	}
 

internal/types/template-data/history.go

@@ -0,0 +1,7 @@
+package templatedata
+
+type History struct {
+	PlayerMove   string
+	OpponentMove string
+	Winner       string
+}

template/gameHome.html.tmpl

@@ -1,7 +1,7 @@
 {{ define "gameHome" }}
-<div id="main"  class="flex flex-col gap-2 p-2 items-center w-full h-full">
-   <div id="logo-header" class="flex gap-5 w-fit justify-center items-center">
-      <img class="h-12 w-auto" src="/assets/images/logo.svg" alt="logo" />
+<div id="main"  class="flex flex-col gap-2 items-center p-2 w-full h-full">
+   <div id="logo-header" class="flex gap-5 justify-center items-center w-fit">
+      <img class="w-auto h-12" src="/assets/images/logo.svg" alt="logo" />
       <h1 class="text-xl font-bold">RPS Elite</h1>
    </div>
    <div id="players-holder" class="flex justify-between items-center w-full">
@@ -18,26 +18,25 @@
 
          {{ template "opponent-panel" .OpponentInfo}}
 
-      <div class="w-1 bg-primary rounded-full h-56 opacity-30">
+      <div class="w-1 h-56 rounded-full opacity-30 bg-primary">
       </div>
       <div id="player-panel" class="flex flex-col w-1/2 h-full">
-         <div id="player-selected-move" class="bg-white rounded-xl w-36 h-36 border-primary border-2 p-2">
+         <div id="player-selected-move" class="p-2 w-36 h-36 bg-white rounded-xl border-2 border-primary">
          </div>
-         <div id="game-option" class="flex w-full px-5 justify-between">
-            <button hx-ws="send:submit" hx-vals='{"move": "rock", "type":"move"}' class=" flex items-center justify-center h-24 w-auto">
+         <div id="game-option" class="flex justify-between px-5 w-full">
+            <button hx-ws="send:submit" hx-vals='{"move": "rock", "type":"move"}' class="flex justify-center items-center w-auto h-24">
             <img class="w-full h-full" src="/assets/images/rock.svg" alt="Rock" />
             </button>
-            <button hx-ws="send:submit" hx-vals='{"move": "paper", "type":"move"}' class="flex items-center justify-center h-24 w-auto">
+            <button hx-ws="send:submit" hx-vals='{"move": "paper", "type":"move"}' class="flex justify-center items-center w-auto h-24">
             <img class="w-full h-full" src="/assets/images/paper.svg" alt="Paper" />
             </button>
-            <button hx-ws="send:submit" hx-vals='{"move": "scissor", "type":"move"}' class="flex items-center justify-center h-24 w-auto">
+            <button hx-ws="send:submit" hx-vals='{"move": "scissor", "type":"move"}' class="flex justify-center items-center w-auto h-24">
             <img class="w-full h-full" src="/assets/images/scissor.svg" alt="Scissor" />
             </button>
          </div>
       </div>
    </div>
-   <div id="history" class="flex flex-col gap-2">
-      <p>move 1 to 2</p>
+   <div id="history" class="flex flex-col gap-2 items-center">
    </div>
 </div>
 {{ end }}

template/history.html.tmpl

@@ -0,0 +1,26 @@
+{{ define "history-row" }}
+    <div hx-swap-oob="afterbegin:#history">
+    <div class="flex gap-3 content-center items-center h-8" >
+        {{ if ne .OpponentMove "" }}
+            <img class="w-auto h-full" src="/assets/images/{{.OpponentMove}}.svg" alt="{{.OpponentMove}}" />
+        {{ else }}
+        <div></div>
+        {{ end }}
+
+{{ if eq .Winner "" }}
+            <h4 class="font-bold">tie</h4>
+
+{{ else }}
+            <h4 class="font-bold">{{ .Winner }}</h4>
+
+{{ end }}
+
+        {{ if ne .PlayerMove "" }}
+            <img class="w-auto h-full" src="/assets/images/{{.PlayerMove}}.svg" alt="{{.PlayerMove}}" />
+        {{ else }}
+        <div></div>
+        {{ end }}
+        </div>
+
+    </div>
+{{ end }}