refactor: pass GestureInfo into brick fragment

This commit is contained in:
efim 2023-11-23 14:25:48 +00:00
parent 82a96ea9d7
commit dbae803ead
3 changed files with 19 additions and 25 deletions

View File

@ -12,8 +12,8 @@ import (
)
type brickState struct {
ColorClass template.CSS
TemplateType string
Gesture rooms.HandGesture
}
type personData struct {
Name string
@ -184,8 +184,8 @@ func (pData personData) BricksForPerson() []brickState {
}
result[gesture] = brickState{
ColorClass: gesture.GetGestureInfo().Color,
TemplateType: templateType,
Gesture: gesture,
}
}
@ -198,12 +198,6 @@ func roomTemplatesPreview(
) http.HandlerFunc {
return func(w http.ResponseWriter, r *http.Request) {
type SingleBrickData struct {
ColorClass template.CSS
Name string
Gesture rooms.HandGesture
}
testPersonData := personData{
Name: "John Doe",
IsRaised: true,
@ -263,8 +257,8 @@ func roomTemplatesPreview(
}{
DefaultColor: "--expand-color",
ABrick: brickState{
ColorClass: "--expand-color",
TemplateType: "raisedBrick",
Gesture: rooms.Expand,
},
Gestures: rooms.GesturesHighToLow[:],
TestPerson: testPersonData,

View File

@ -6,25 +6,25 @@
{{ define "inactiveBrick" }}
<div
class="h-[var(--brick-height)] w-20 border-[hsl(var(--brick-color))]/25 border bg-[hsl(var(--brick-color))]/5"
style="--brick-color: var({{.}}); --brick-height: calc(var(--d)/5)"
style="--brick-color: var({{.Color}}); --brick-height: calc(var(--d)/5)"
></div>
{{ end }}
{{ define "raisedBrick" }}
<div
class="h-[var(--brick-height)] w-20 border-[hsl(var(--brick-color))] border-2 bg-[hsl(var(--brick-color))]/25"
style="--brick-color: var({{.}}); --brick-height: calc(var(--d)/5)"
style="--brick-color: var({{.Color}}); --brick-height: calc(var(--d)/5)"
></div>
{{ end }}
{{ define "speakerBrick" }}
<div
class="h-[var(--brick-height)] w-20 border-[hsl(var(--brick-color))] border-2 bg-[hsl(var(--brick-color))]/50 shadow-[0_0_15px_rgba(0,_0,_0,_0.5)] shadow-[hsl(var(--brick-color))] animate-pulse"
style="--brick-color: var({{.}}); --brick-height: calc(var(--d)/5)"
style="--brick-color: var({{.Color}}); --brick-height: calc(var(--d)/5)"
></div>
{{ end }}
{{ define "markBrick" }}
<div
class="h-[var(--brick-height)] w-20 border-[hsl(var(--brick-color))]/25 border bg-[hsl(var(--brick-color))]/5 grid place-content-center font-bold text-[hsl(var(--brick-color))]/50"
style="--brick-color: var({{.}}); --brick-height: calc(var(--d)/5)"
style="--brick-color: var({{.Color}}); --brick-height: calc(var(--d)/5)"
>
X
</div>
@ -32,31 +32,31 @@
{{ define "markAndRaisedBrick" }}
<div
class="h-[var(--brick-height)] w-20 border-[hsl(var(--brick-color))] border-2 bg-[hsl(var(--brick-color))]/25 grid place-content-center font-bold text-[hsl(var(--brick-color))]/50"
style="--brick-color: var({{.}}); --brick-height: calc(var(--d)/5)"
style="--brick-color: var({{.Color}}); --brick-height: calc(var(--d)/5)"
>
X
</div>
{{ end }}
{{/* takes in router.brickState as parameter */}}
<h2>Now for BrickData taking parametrized template name</h2>
{{ define "brick" }}
{{ if eq .TemplateType "inactiveBrick" }}
{{ template "inactiveBrick" .ColorClass }}
{{ template "inactiveBrick" .Gesture.GetGestureInfo }}
{{ else if eq .TemplateType "raisedBrick" }}
{{template "raisedBrick" .ColorClass }}
{{template "raisedBrick" .Gesture.GetGestureInfo }}
{{ else if eq .TemplateType "speakerBrick"}}
{{ template "speakerBrick" .ColorClass }}
{{ template "speakerBrick" .Gesture.GetGestureInfo }}
{{ else if eq .TemplateType "markBrick" }}
{{ template "markBrick" .ColorClass }}
{{ template "markBrick" .Gesture.GetGestureInfo }}
{{ else if eq .TemplateType "markAndRaisedBrick" }}
{{ template "markAndRaisedBrick" .ColorClass }}
{{ template "markAndRaisedBrick" .Gesture.GetGestureInfo }}
{{ end }}
{{end}}
<h2>Now for a person</h2>
<p>expected to be called with personData</p>
{{ define "personBlocks" }}
<div class="person-bricks flex flex-col items-center"
id="person-{{.Index}}" style="--i: {{ .Index }}">
{{ range .BricksForPerson }} {{ template "brick" . }} {{ end }}

View File

@ -12,11 +12,11 @@
{{ range .Gestures }}
{{ with .GetGestureInfo }}
<div class="border-2">for {{ .Name }}</div>
<div>{{ template "inactiveBrick" .Color }}</div>
<div>{{ template "raisedBrick" .Color }}</div>
<div>{{ template "speakerBrick" .Color }}</div>
<div>{{ template "markBrick" .Color }}</div>
<div>{{ template "markAndRaisedBrick" .Color }}</div>
<div>{{ template "inactiveBrick" . }}</div>
<div>{{ template "raisedBrick" . }}</div>
<div>{{ template "speakerBrick" . }}</div>
<div>{{ template "markBrick" . }}</div>
<div>{{ template "markAndRaisedBrick" . }}</div>
{{ end }}
{{ end }}
</section>