Display player color on the frontend

game.go

@@ -36,8 +36,7 @@ type Game struct {
 }
 
 type PlayerService interface {
-	Join(uuid.UUID)
-	// Leave()
+	Join(uuid.UUID) PlayerID
 	ToggleIsRunning()
 	Close()
 	TurnLeft(uuid.UUID)
@@ -151,12 +150,12 @@ func (g *Game) TurnRight(u uuid.UUID) {
 	player.Direction = (player.Direction + 1) % 4
 }
 
-func (g *Game) Join(uid uuid.UUID) {
+func (g *Game) Join(uid uuid.UUID) PlayerID {
 	g.playersMutex.Lock()
 	defer g.playersMutex.Unlock()
 
 	if p := g.GetPlayer(uid); p != nil {
-		return
+		return p.Id
 	}
 
 	p := &Player{
@@ -169,6 +168,7 @@ func (g *Game) Join(uid uuid.UUID) {
 	g.claimStartingArea(p)
 	g.UIDToPID[uid] = p.Id
 	g.Players[p.Id] = p
+	return p.Id
 }
 
 func (g *Game) claimStartingArea(p *Player) {

http_input_handler.go

@@ -2,6 +2,7 @@ package main
 
 import (
 	"context"
+	"fmt"
 	"log"
 	"net/http"
 
@@ -61,8 +62,14 @@ func (h *HttpInputHandler) serveWebsocket(w http.ResponseWriter, req *http.Reque
 	}
 	defer conn.Close()
 
-	playerId := uuid.New()
-	h.playerService.Join(playerId)
+	uID := uuid.New()
+	pID := h.playerService.Join(uID)
+
+	err = conn.WriteMessage(websocket.TextMessage, fmt.Appendf([]byte{}, "c:%d", pID))
+	if err != nil {
+		log.Println("Error sending message:", err)
+		return
+	}
 
 	for {
 		_, msg, err := conn.ReadMessage()
@@ -73,9 +80,9 @@ func (h *HttpInputHandler) serveWebsocket(w http.ResponseWriter, req *http.Reque
 
 		switch string(msg) {
 		case "l":
-			h.playerService.TurnLeft(playerId)
+			h.playerService.TurnLeft(uID)
 		case "r":
-			h.playerService.TurnRight(playerId)
+			h.playerService.TurnRight(uID)
 		}
 	}
 }

index.html

@@ -25,14 +25,7 @@
 		color: white; /* Text color */
 		cursor: pointer; /* Indicates it's clickable */
 		touch-action: manipulation;
-	}
-
-	.button:first-child {
-		background-color: #4CAF50; /* Green for the first button */
-	}
-
-	.button:last-child {
-		background-color: #008CBA; /* Blue for the second button */
+    background-color: black;
 	}
 	</style>
 </head>
@@ -58,10 +51,41 @@
 		isOpen = true;
 	});
 
+
+  ws.addEventListener("message", (event) => {
+    if (event.data.startsWith("c:")) {
+      const colorIndex = parseInt(event.data.split(":")[1], 10);
+      if (!isNaN(colorIndex) && colorIndex >= 0 && colorIndex < colorPalette.length) {
+      // change bg color of buttons based on the color colorIndex
+      document.querySelectorAll(".button").forEach(button => {
+        button.style.backgroundColor = colorPalette[colorIndex];
+      });
+      }
+    }
+  });
+
 	ws.addEventListener("close", (event) => {
 		clearInterval(intervalId)
-	})
+	});
 
+  const colorPalette = [
+    "#000000", // Black
+    "#800000", // Red
+    "#008000", // Green
+    "#808000", // Yellow
+    "#000080", // Blue
+    "#800080", // Magenta
+    "#008080", // Cyan
+    "#c0c0c0", // White
+    "#ff0000", // BrightRed
+    "#00ff00", // BrightGreen
+    "#ffff00", // BrightYellow
+    "#0000ff", // BrightBlue
+    "#ff00ff", // BrightMagenta
+    "#00ffff", // BrightCyan
+    "#ffffff",  // BrightWhite
+    "#808080" // BrightBlack (Gray)
+  ];
     </script>
 </body>
-</html>
+</html>