feat: controls styling from gesture info

routes/room_page.go

@@ -201,14 +201,15 @@ func roomPageRoute(
 			template.New("").ParseFS(templateFs, tableTemplates, templFile, baseFile))
 
 		type GestureData struct {
-			Name string
 			Url  string
+			Gesture rooms.HandGesture
 		}
+
 		var gesturesData []GestureData
-		for gesture := rooms.ChangeTopic; gesture <= rooms.Meta; gesture++ {
+		for _, gesture := range rooms.GesturesHighToLow {
 			gesturesData = append(gesturesData, GestureData{
-				Name: gesture.String(),
 				Url:  fmt.Sprintf("%s%d", raiseHandPath, gesture),
+				Gesture: gesture,
 			})
 		}
 

routes/room_page_templates_preview.go

@@ -250,7 +250,7 @@ func roomTemplatesPreview(
 
 		contentData := struct {
 			DefaultColor template.CSS
-			Gestures       []rooms.HandGesture
+			GesturePreviews       []rooms.HandGesture
 			ABrick       brickState
 			TestPerson   personData
 			ARoom        *roomTableData
@@ -260,7 +260,7 @@ func roomTemplatesPreview(
 				TemplateType: "raisedBrick",
 				Gesture: rooms.Expand,
 			},
-			Gestures: rooms.GesturesHighToLow[:],
+			GesturePreviews: rooms.GesturesHighToLow[:],
 			TestPerson: testPersonData,
 			ARoom: &roomTableData{
 				Room:          &aRoom,

routes/static/out.css

@@ -558,6 +558,10 @@ video {
   display: flex;
 }
 
+.table {
+  display: table;
+}
+
 .grid {
   display: grid;
 }
@@ -684,6 +688,10 @@ video {
   border-width: 4px;
 }
 
+.border-\[hsl\(var\(--border-color\)\)\] {
+  border-color: hsl(var(--border-color));
+}
+
 .border-\[hsl\(var\(--brick-color\)\)\] {
   border-color: hsl(var(--brick-color));
 }
@@ -697,11 +705,6 @@ video {
   border-color: rgb(0 0 0 / var(--tw-border-opacity));
 }
 
-.border-blue-700 {
-  --tw-border-opacity: 1;
-  border-color: rgb(29 78 216 / var(--tw-border-opacity));
-}
-
 .border-yellow-700 {
   --tw-border-opacity: 1;
   border-color: rgb(161 98 7 / var(--tw-border-opacity));
@@ -750,6 +753,11 @@ video {
   padding: 1rem;
 }
 
+.px-10 {
+  padding-left: 2.5rem;
+  padding-right: 2.5rem;
+}
+
 .px-2 {
   padding-left: 0.5rem;
   padding-right: 0.5rem;
@@ -760,6 +768,11 @@ video {
   padding-bottom: 0.25rem;
 }
 
+.py-4 {
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+}
+
 .text-xl {
   font-size: 1.25rem;
   line-height: 1.75rem;
@@ -773,6 +786,10 @@ video {
   color: hsl(var(--brick-color) / 0.5);
 }
 
+.text-\[hsl\(var\(--text-color\)\)\] {
+  color: hsl(var(--text-color));
+}
+
 .text-blue-700 {
   --tw-text-opacity: 1;
   color: rgb(29 78 216 / var(--tw-text-opacity));

routes/templates/room.gohtml

@@ -29,6 +29,7 @@
     <main class="h-screen">
       <div class="h-full w-full flex flex-row">
         <script src="/static/dist/ext/sse.js"></script>
+        {{/* This is dynamic table, updated from SSE */}}
         <div
           id="roomTextContainer"
           class="grid place-content-center grow"
@@ -45,19 +46,21 @@
           </div>
           {{ end }}
         </div>
+        {{/* This is personal hand controls */}}
         <div id="controls" class="bg-green-300 flex flex-col p-10 gap-y-10">
           {{ range .Gestures }}
           <button
             hx-get="{{ .Url }}"
-            class="bg-white rounded border-blue-700 border-2"
-          >
-            {{ .Name }}
+            class="bg-white rounded border-[hsl(var(--border-color))] border-2 text-[hsl(var(--text-color))] font-bold px-10 py-4"
+            style="--border-color: var({{.Gesture.GetGestureInfo.Color}});
+                   --text-color: var({{.Gesture.GetGestureInfo.ColorDark}})
+                   ">
+            {{ .Gesture.String }}
           </button>
           {{ end }}
           <button
             hx-get="/rooms/releaseHand"
-            class="bg-white rounded border-yellow-700 border-4"
-          >
+            class="bg-white rounded border-yellow-700 border-4">
             Release Hand
           </button>
         </div>

routes/templates/tableTemplatesPreview.gohtml

@@ -9,7 +9,7 @@
   <p> speaker </p>
   <p> mark </p>
   <p> mark and active </p>
-  {{ range .Gestures }}
+  {{ range .GesturePreviews }}
   {{ with .GetGestureInfo }}
   <div class="border-2">for {{ .Name }}</div>
   <div>{{ template "inactiveBrick" . }}</div>