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

@@ -0,0 +1,41 @@
+{{define "room"}}
+<div class="flex h-screen">
+  <!-- Left Panel -->
+  <div class="w-1/4 p-4 border-r">
+    <h2 class="text-xl mb-4">Join Blue Team</h2>
+    <form hx-post="/join-team" hx-target="#room-content">
+      <input type="hidden" name="room_id" value="{{.Room.ID}}">
+      <input type="hidden" name="team" value="blue">
+      <div class="mb-2">
+        <button type="submit" name="role" value="guesser" class="w-full bg-blue-500 text-white py-2 px-4 rounded">
+          Join as Guesser
+        </button>
+      </div>
+      <div>
+        <button type="submit" name="role" value="mime" class="w-full bg-blue-700 text-white py-2 px-4 rounded">
+          Join as Mime
+        </button>
+      </div>
+    </form>
+  </div>
+  {{template "cardtable" .}}
+  <!-- Right Panel -->
+  <div class="w-1/4 p-4">
+    <h2 class="text-xl mb-4">Join Red Team</h2>
+    <form hx-post="/join-team" hx-target="#room-content">
+      <input type="hidden" name="room_id" value="{{.Room.ID}}">
+      <input type="hidden" name="team" value="red">
+      <div class="mb-2">
+        <button type="submit" name="role" value="guesser" class="w-full bg-red-500 text-white py-2 px-4 rounded">
+          Join as Guesser
+        </button>
+      </div>
+      <div>
+        <button type="submit" name="role" value="mime" class="w-full bg-red-700 text-white py-2 px-4 rounded">
+          Join as Mime
+        </button>
+      </div>
+    </form>
+  </div>
+</div>
+{{end}}

handlers/actions.go

@@ -8,3 +8,9 @@ import (
 func createRoom(ctx context.Context, req *models.RoomReq) (*models.RoomPublic, error) {
 	return nil, nil
 }
+
+// context
+func getRoomIDFromCtx(ctx context.Context) string {
+	id, _ := ctx.Value(models.CtxRoomIDKey).(string)
+	return id
+}

handlers/auth.go

@@ -45,7 +45,7 @@ func HandleFrontLogin(w http.ResponseWriter, r *http.Request) {
 		abortWithError(w, err.Error())
 		return
 	}
-	tmpl.ExecuteTemplate(w, "main", nil)
+	tmpl.ExecuteTemplate(w, "main", roundWords)
 }
 
 func makeCookie(username string, remote string) (*http.Cookie, error) {
@@ -79,8 +79,6 @@ func makeCookie(username string, remote string) (*http.Cookie, error) {
 	log.Info("check remote addr for cookie set",
 		"remote", remote, "session", session)
 	if strings.Contains(remote, "192.168.0") {
-		// no idea what is going on
-		// cookie.Domain = "192.168.0.15"
 		cookie.Domain = "home.host"
 		log.Info("changing cookie domain", "domain", cookie.Domain)
 	}

handlers/handlers.go

@@ -2,6 +2,7 @@ package handlers
 
 import (
 	"golias/config"
+	"golias/models"
 	"golias/pkg/cache"
 	"html/template"
 	"log/slog"
@@ -42,5 +43,15 @@ func HandleHome(w http.ResponseWriter, r *http.Request) {
 		abortWithError(w, err.Error())
 		return
 	}
-	tmpl.ExecuteTemplate(w, "main", roundWords)
+	// check if user in a room
+	// roomID := getRoomIDFromCtx(r.Context())
+	// 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/keys.go

@@ -0,0 +1,5 @@
+package models
+
+var (
+	CtxRoomIDKey = "current_room"
+)

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

@@ -0,0 +1,70 @@
+package models
+
+import "time"
+
+type (
+	UserTeam string
+	UserRole string
+)
+
+const (
+	// UserTeam
+	UserTeamBlue = "blue"
+	UserTeamRed  = "red"
+	UserTeamNone = "none"
+	//UserRole
+	UserRoleMime    = "mime"
+	UserRoleGuesser = "guesser"
+	UserRoleNone    = "none"
+)
+
+func StrToUserTeam(s string) UserTeam {
+	switch s {
+	case "blue":
+		return UserTeamBlue
+	case "red":
+		return UserTeamRed
+	default:
+		return UserTeamNone
+	}
+}
+
+func StrToUserRole(s string) UserRole {
+	switch s {
+	case "mime":
+		return UserRoleMime
+	case "guesser":
+		return UserRoleGuesser
+	default:
+		return UserRoleNone
+	}
+}
+
+type UserState struct {
+	Username string
+	Room     RoomPublic
+	Team     UserTeam
+	Role     UserRole
+}
+
+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,
+	}
+}