grail/gralias
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add room layout with team buttons and word grid using HTMX

Browse Source
This commit is contained in:
Grail Finder (aider)
2025-05-03 08:26:52 +03:00
parent bd4e2431bf
commit 1dcf013766
1 changed files with 59 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
components/room.html
View File

@@ -1,3 +1,62 @@
{{define "room"}} {{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}} {{end}}