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

Feat: components chain

Browse Source
This commit is contained in:
Grail Finder
2025-05-03 09:18:05 +03:00
parent 8b68aee884
commit 5cf1f1199e
7 changed files with 73 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
components/cardtable.html Normal file
View File

@@ -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}}

32
components/cardword.html
View File

@@ -1,13 +1,29 @@
{{define "cardword"}}
<div id="card-%s" style="
{{if .Revealed}}
<div id="card-{{.Word}}" style="
background-color: {{.Color}};
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);
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;"> {{.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}}

38
components/index.html
View File

@@ -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>
<div style="display: flex; gap: 1rem; flex-wrap: wrap; padding: 1rem;">
{{range $word, $color := .}}
<div id="card-{{$word}}" class="slide-it" style="
background-color: beige;
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:.2s">
{{$word}}
</div>
{{end}}
</div>
<!-- check if user in the room -->
{{template "room" .}}
<!-- <h1>Word Color Cards</h1> -->
<!-- <div style="display: flex; gap: 1rem; flex-wrap: wrap; padding: 1rem;"> -->
<!-- {{range $word, $color := .}} -->
<!-- <div id="card-{{$word}}" class="slide-it" style=" -->
<!-- background-color: beige; -->
<!-- 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:.2s"> -->
<!-- {{$word}} -->
<!-- </div> -->
<!-- {{end}} -->
<!-- </div> -->
</div>
</body>
</html>

23
components/room.html
View File

@@ -18,28 +18,7 @@
</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 if eq .Color "beige"}}#f5f5dc{{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>
{{template "cardtable" .}}
<!-- Right Panel -->
<div class="w-1/4 p-4">
<h2 class="text-xl mb-4">Join Red Team</h2>