Feat: join team

components/index.html

@@ -12,6 +12,8 @@
 	</div>
 	{{else}}
 	<!-- user has room id => send him to his room -->
+	<div id="room">
 	{{template "room" .}}
+	</div>
 {{end}}
 {{end}}

components/playerlist.html

@@ -0,0 +1,7 @@
+{{define "teamlist"}}
+<div class="playerlist border border-gray-300 rounded-lg p-4">
+{{range .}}
+    <p>{{.}}</p>
+{{end}}
+</div>
+{{end}}

components/room.html

@@ -5,9 +5,15 @@
 <hr />
 <div class="flex justify-center">
   <!-- Left Panel -->
+  {{template "teamlist" .Room.BlueGuessers}}
+  {{if eq .State.Team ""}}
   {{template "teampew" "blue"}}
+  {{end}}
   <!-- Right Panel -->
+  {{if eq .State.Team ""}}
   {{template "teampew" "red"}}
+  {{end}}
+  {{template "teamlist" .Room.RedGuessers}}
 </div>
 <hr />
 <div id="cardtable">

components/teampew.html

@@ -1,8 +1,7 @@
 {{define "teampew"}}
-<!-- <div class="w-1/4 p-4 border-r"> -->
 <div>
 <h2 class="text-xl mb-4">Join {{.}} Team</h2>
-<form hx-post="/join-team" hx-target="#room-content">
+<form hx-post="/join-team" hx-target="#ancestor">
     <input type="hidden" name="team" value="{{.}}">
   <div class="mb-1">
       <button type="submit" name="role" value="guesser" class="w-full bg-{{.}}-500 text-white py-2 px-4 rounded">