73 lines
3.2 KiB
HTML
73 lines
3.2 KiB
HTML
{{define "cardtable"}}
|
|
<!-- Center Panel -->
|
|
<div class="flex justify-center">
|
|
<div class="grid grid-cols-2 sm:grid-cols-5 gap-2">
|
|
{{range .Cards}}
|
|
{{if .Revealed}}
|
|
{{if eq .Color "amber"}}
|
|
<div id="card-{{.Word}}" class="bg-{{.Color}}-100 border-8 border-stine-400 p-4 min-w-[100px] text-center text-white cursor-pointer line-through"
|
|
style="text-shadow: 0 2px 4px rgba(0,0,0,0.9);"> {{.Word}}
|
|
</div>
|
|
{{else}}
|
|
<div id="card-{{.Word}}" class="bg-{{.Color}}-400 border-8 border-stone-400 p-4 min-w-[100px] text-center text-white cursor-pointer line-through"
|
|
style="text-shadow: 0 2px 4px rgba(0,0,0,0.9);"> {{.Word}}
|
|
</div>
|
|
{{end}}
|
|
{{else if $.IsOver}}
|
|
{{if eq .Color "amber"}}
|
|
<div id="card-{{.Word}}" class="bg-{{.Color}}-100 border border-stone-400 p-4 rounded-lg min-w-[100px] text-center text-white cursor-pointer"
|
|
style="text-shadow: 0 2px 4px rgba(0,0,0,0.9);"> {{.Word}}
|
|
</div>
|
|
{{else}}
|
|
<div id="card-{{.Word}}" class="bg-{{.Color}}-400 border border-stone-400 p-4 rounded-lg min-w-[100px] text-center text-white cursor-pointer"
|
|
style="text-shadow: 0 2px 4px rgba(0,0,0,0.9);"> {{.Word}}
|
|
</div>
|
|
{{end}}
|
|
{{else if .Mime}}
|
|
{{if eq .Color "amber"}}
|
|
<div id="card-{{.Word}}" class="bg-{{.Color}}-100 border border-gray-500 rounded-lg min-w-[100px] cursor-pointer flex flex-col h-full">
|
|
{{else}}
|
|
<div id="card-{{.Word}}" class="bg-{{.Color}}-400 border border-gray-500 rounded-lg min-w-[100px] cursor-pointer flex flex-col h-full">
|
|
{{end}}
|
|
<div class="flex-grow text-center p-4 flex items-center justify-center text-white"
|
|
style="text-shadow: 0 2px 4px rgba(0,0,0,0.8);"
|
|
hx-get="/word/show-color?word={{.Word}}" hx-trigger="click" hx-swap="outerHTML transition:true swap:.05s">
|
|
{{.Word}}
|
|
</div>
|
|
<div class="h-6 bg-stone-600 rounded-b flex items-center justify-center text-white text-sm cursor-pointer"
|
|
hx-get="/mark-card?word={{.Word}}" hx-trigger="click" hx-swap="outerHTML transition:true swap:.05s">
|
|
{{range .Marks}}
|
|
{{ $length := len .Username }}
|
|
{{ if lt $length 3 }}
|
|
<span class="mx-0.5">{{.Username}}</span>
|
|
{{else}}
|
|
<span class="mx-0.5">{{slice .Username 0 3}}</span>
|
|
{{end}}
|
|
{{end}}
|
|
</div>
|
|
</div>
|
|
{{else}}
|
|
<div id="card-{{.Word}}" class="bg-stone-400 border border-gray-500 rounded-lg min-w-[100px] cursor-pointer flex flex-col h-full">
|
|
<div class="flex-grow text-center p-4 flex items-center justify-center text-white"
|
|
style="text-shadow: 0 2px 4px rgba(0,0,0,0.8);"
|
|
hx-get="/word/show-color?word={{.Word}}" hx-trigger="click" hx-swap="outerHTML transition:true swap:.05s">
|
|
{{.Word}}
|
|
</div>
|
|
<div class="h-6 bg-stone-600 rounded-b flex items-center justify-center text-white text-sm cursor-pointer"
|
|
hx-get="/mark-card?word={{.Word}}" hx-trigger="click" hx-swap="outerHTML transition:true swap:.05s">
|
|
{{range .Marks}}
|
|
{{ $length := len .Username }}
|
|
{{ if lt $length 3 }}
|
|
<span class="mx-0.5">{{.Username}}</span>
|
|
{{else}}
|
|
<span class="mx-0.5">{{slice .Username 0 3}}</span>
|
|
{{end}}
|
|
{{end}}
|
|
</div>
|
|
</div>
|
|
{{end}}
|
|
{{end}}
|
|
</div>
|
|
</div>
|
|
{{end}}
|