Feat: components chain

components/cardtable.html

@@ -0,0 +1,10 @@
+{{define "cardtable"}}
+  <!-- Center Panel -->
+  <div class="w-1/2 p-4 flex justify-center">
+    <div class="grid grid-cols-5 gap-2">
+      {{range .Room.Cards}}
+	{{template "cardword" .}} 
+      {{end}}
+    </div>
+  </div>
+{{end}}

components/cardword.html

@@ -1,13 +1,29 @@
 {{define "cardword"}}
-<div id="card-%s" style="
+{{if .Revealed}}
+<div id="card-{{.Word}}" style="
     background-color: {{.Color}};
-	padding: 1rem;
+    padding: 1rem;
-	border-radius: 8px;
+    border-radius: 8px;
-	box-shadow: 0 2px 4px rgba(0,0,0,0.2);
+    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
-	min-width: 100px;
+    min-width: 100px;
-	text-align: center;
+    text-align: center;
-	color: white;
+    color: white;
-	text-shadow: 0 2px 4px rgba(0,0,0,0.8);
+    text-shadow: 0 2px 4px rgba(0,0,0,0.8);
     cursor: pointer;"> {{.Word}}
 </div>
+{{else}}
+<div id="card-{{.Word}}" style="
+    background-color: #e4d5b7;
+    padding: 1rem;
+    border-radius: 8px;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
+    min-width: 100px;
+    text-align: center;
+    color: white;
+    text-shadow: 0 2px 4px rgba(0,0,0,0.8);
+    cursor: pointer;"
+    hx-get="/word/show-color?word={{.Word}}" hx-trigger="click" hx-swap="outerHTML transition:true swap:.1s">
+    {{.Word}}
+</div>
+{{end}}
 {{end}}

components/index.html

@@ -46,24 +46,26 @@
 	<div id="create-room" class="create-room-div">
 	    <button button id="create-form-btn" type="submit" class="justify-center rounded-md bg-indigo-600 px-3 py-1.5 text-sm font-semibold leading-6 text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600" hx-get="/room/createform" hx-swap="outerHTML">SHOW ROOM CREATE FORM</button>
 	</div>
-	<h1>Word Color Cards</h1>
+	<!-- check if user in the room -->
-	<div style="display: flex; gap: 1rem; flex-wrap: wrap; padding: 1rem;">
+	{{template "room" .}}
-		{{range $word, $color := .}}
+	<!-- <h1>Word Color Cards</h1> -->
-		<div id="card-{{$word}}" class="slide-it" style="
+	<!-- <div style="display: flex; gap: 1rem; flex-wrap: wrap; padding: 1rem;"> -->
-			background-color: beige;
+	<!-- 	{{range $word, $color := .}} -->
-			padding: 1rem;
+	<!-- 	<div id="card-{{$word}}" class="slide-it" style=" -->
-			border-radius: 8px;
+	<!-- 		background-color: beige; -->
-			box-shadow: 0 2px 4px rgba(0,0,0,0.2);
+	<!-- 		padding: 1rem; -->
-			min-width: 100px;
+	<!-- 		border-radius: 8px; -->
-			text-align: center;
+	<!-- 		box-shadow: 0 2px 4px rgba(0,0,0,0.2); -->
-			color: white;
+	<!-- 		min-width: 100px; -->
-			text-shadow: 0 2px 4px rgba(0,0,0,0.8);
+	<!-- 		text-align: center; -->
-			cursor: pointer;"
+	<!-- 		color: white; -->
-			hx-get="/word/show-color?word={{$word}}" hx-trigger="click" hx-swap="outerHTML transition:true swap:.2s">
+	<!-- 		text-shadow: 0 2px 4px rgba(0,0,0,0.8); -->
-			{{$word}}
+	<!-- 		cursor: pointer;" -->
-		</div>
+	<!-- 		hx-get="/word/show-color?word={{$word}}" hx-trigger="click" hx-swap="outerHTML transition:true swap:.2s"> -->
-		{{end}}
+	<!-- 		{{$word}} -->
-	</div>
+	<!-- 	</div> -->
+	<!-- 	{{end}} -->
+	<!-- </div> -->
 </div>
 </body>
 </html>

components/room.html

@@ -18,28 +18,7 @@
       </div>
     </form>
   </div>
-
+  {{template "cardtable" .}}
-  <!-- Center Panel -->
-  <div class="w-1/2 p-4 flex justify-center">
-    <div class="grid grid-cols-5 gap-2">
-      {{range .Room.Cards}}
-        <div class="border p-2 text-center rounded" 
-             style="background-color: {{if eq .Color "white"}}#ffffff{{else if eq .Color "blue"}}#0000ff{{else if eq .Color "red"}}#ff0000{{else if eq .Color "black"}}#000000{{else if eq .Color "beige"}}#f5f5dc{{else}}#f5f5dc{{end}};">
-          {{if .Revealed}}
-            {{.Word}}
-          {{else}}
-            <button hx-post="/reveal-card" 
-                    hx-target="#room-content"
-                    hx-include="form"
-                    class="w-full h-full flex items-center justify-center">
-              ?
-            </button>
-          {{end}}
-        </div>
-      {{end}}
-    </div>
-  </div>
-
   <!-- Right Panel -->
   <div class="w-1/4 p-4">
     <h2 class="text-xl mb-4">Join Red Team</h2>

handlers/handlers.go

@@ -2,6 +2,7 @@ package handlers
 
 import (
 	"golias/config"
+	"golias/models"
 	"golias/pkg/cache"
 	"html/template"
 	"log/slog"
@@ -43,6 +44,14 @@ func HandleHome(w http.ResponseWriter, r *http.Request) {
 		return
 	}
 	// check if user in a room
-	roomID := getRoomIDFromCtx(r.Context())
+	// roomID := getRoomIDFromCtx(r.Context())
-	tmpl.ExecuteTemplate(w, "main", roundWords)
+	// roomID = "test-id"
+	// if roomID != "" {
+	// 	// get room data
+	// 	userState := models.MakeTestState()
+	// 	tmpl.ExecuteTemplate(w, "room", userState)
+	// 	return
+	// }
+	userState := models.MakeTestState()
+	tmpl.ExecuteTemplate(w, "main", userState)
 }

models/main.go

@@ -62,6 +62,7 @@ type RoomPublic struct {
 	BlueMime     string
 	RedGuessers  []string
 	BlueGuessers []string
+	Cards        []WordCard
 }
 
 func (r Room) ToPublic() RoomPublic {

models/state.go

@@ -50,15 +50,21 @@ type UserState struct {
 func MakeTestState() *UserState {
 	cards := []WordCard{
 		{Word: "hamster", Color: "blue"},
+		{Word: "child", Color: "red"},
+		{Word: "wheel", Color: "white"},
+		{Word: "condition", Color: "black"},
+		{Word: "test", Color: "white"},
 	}
 	room := RoomPublic{
 		ID:          "test-id",
 		CreatedAt:   time.Now(),
 		CreatorName: "test-name",
+		Cards:       cards,
 	}
 	return &UserState{
 		Username: "test-name",
 		Team:     UserTeamNone,
 		Role:     UserRoleNone,
+		Room:     room,
 	}
 }