From 1dcf01376676ef6971e3857c133ce6c1129d8224 Mon Sep 17 00:00:00 2001
From: "Grail Finder (aider)" <wohilas@gmail.com>
Date: Sat, 3 May 2025 08:26:52 +0300
Subject: [PATCH] feat: add room layout with team buttons and word grid using
 HTMX

---
 components/room.html | 59 ++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 59 insertions(+)

diff --git a/components/room.html b/components/room.html
index 8a0ed38..19f699a 100644
--- a/components/room.html
+++ b/components/room.html
@@ -1,3 +1,62 @@
 {{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>
 
+  <!-- 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}}#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>
+    <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}}