63 lines
2.1 KiB
HTML
63 lines
2.1 KiB
HTML
{{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}}
|