feat: initial toggling controls

routes/room_page.go

@@ -101,6 +101,7 @@ func streamingRoomStates(
 }
 
 // if currently speaking? i guess first lower the hand and then raise new
+// TODO should return control for raised state
 func raiseGestureHandRoute(
 	roomsM rooms.RoomManager,
 ) http.HandlerFunc {
@@ -130,13 +131,24 @@ func raiseGestureHandRoute(
 			// TODO return error i guess
 		}
 		log.Printf(">> i attempt to get room with closure: %+v\n", outerClosureRoom)
-		w.WriteHeader(http.StatusNoContent)
-
-		// then htmx style i'll need to re-render the room, i suppose
-		// oh, not really, the SSE should send the updated room state
+		tableTemplates := "templates/room.gohtml"
+		tmpl := template.Must(
+			template.New("").ParseFS(templateFs, tableTemplates))
+		gestureData := GestureData{
+			Url:  fmt.Sprintf("%s%d", raiseHandPath, gesture),
+			Gesture: gesture,
+			IsSelected: true,
+		}
+		err = tmpl.ExecuteTemplate(w, "activeButton", &gestureData)
+		if err != nil {
+			log.Printf("/rooms/releaseHand error saving hand: %s\n", err)
+			return
+			// TODO return error i guess
+		}
 	}
 }
 
+// TODO should return lowered control for passed hand gesture, i guess optional
 func releaseHandRoute(
 	roomsM rooms.RoomManager,
 ) http.HandlerFunc {
@@ -147,6 +159,7 @@ func releaseHandRoute(
 			// TODO return error i guess
 			return
 		}
+
 		err := roomsM.Update(r.Context(), session.RoomId, func(fromRoom rooms.Room) (toRoom rooms.Room) {
 			toRoom = fromRoom
 			toRoom.ReleaseHand(session.PersonId)
@@ -157,10 +170,44 @@ func releaseHandRoute(
 			return
 			// TODO return error i guess
 		}
+
+		r.ParseForm() // to return either 'inactive button" or 'no need to change html'
+		gestureString := r.FormValue("gesture")
+		if gestureString != "" {
+			gestureIndex, err := strconv.Atoi(gestureString)
+			if err != nil {
+				log.Printf("/rooms/releaseHand error getting gesture index: %s %s", gestureString, err)
+				return
+				// TODO return error i guess
+			}
+			gesture, ok := rooms.GestureFromInt(gestureIndex)
+			if !ok {
+				log.Printf("/rooms/releaseHand error getting gesture: %s %s", gestureString, err)
+				return
+				// TODO return error i guess
+			}
+
+			tableTemplates := "templates/room.gohtml"
+			tmpl := template.Must(
+				template.New("").ParseFS(templateFs, tableTemplates))
+			gestureData := GestureData{
+				Url:  fmt.Sprintf("%s%d", raiseHandPath, gesture),
+				Gesture: gesture,
+				IsSelected: false,
+			}
+			err = tmpl.ExecuteTemplate(w, "inactiveButton", &gestureData)
+			if err != nil {
+				log.Printf("/rooms/releaseHand error saving hand: %s\n", err)
+				return
+				// TODO return error i guess
+			}
+		} else {
 			w.WriteHeader(http.StatusNoContent)
 		}
+	}
 }
 
+
 func roomPageRoute(
 	templateFs *embed.FS,
 	roomsM rooms.RoomManager,
@@ -200,16 +247,13 @@ func roomPageRoute(
 		tmpl := template.Must(
 			template.New("").ParseFS(templateFs, tableTemplates, templFile, baseFile))
 
-		type GestureData struct {
-			Url  string
-			Gesture rooms.HandGesture
-		}
-
 		var gesturesData []GestureData
+		selectedGesture, isSelected := room.ParticipantHands[session.PersonId]
 		for _, gesture := range rooms.GesturesHighToLow {
 			gesturesData = append(gesturesData, GestureData{
 				Url:  fmt.Sprintf("%s%d", raiseHandPath, gesture),
 				Gesture: gesture,
+				IsSelected: isSelected && selectedGesture == gesture,
 			})
 		}
 
@@ -239,3 +283,9 @@ func roomPageRoute(
 		}
 	}
 }
+
+type GestureData struct {
+	Url  string
+	Gesture rooms.HandGesture
+	IsSelected bool
+}

routes/static/out.css

@@ -709,16 +709,15 @@ video {
   border-color: hsl(var(--brick-color) / 0.25);
 }
 
+.border-\[hsl\(var\(--color-dark\)\)\] {
+  border-color: hsl(var(--color-dark));
+}
+
 .border-black {
   --tw-border-opacity: 1;
   border-color: rgb(0 0 0 / var(--tw-border-opacity));
 }
 
-.border-yellow-700 {
-  --tw-border-opacity: 1;
-  border-color: rgb(161 98 7 / var(--tw-border-opacity));
-}
-
 .bg-\[hsl\(var\(--brick-color\)\)\]\/25 {
   background-color: hsl(var(--brick-color) / 0.25);
 }
@@ -731,6 +730,10 @@ video {
   background-color: hsl(var(--brick-color) / 0.5);
 }
 
+.bg-\[hsl\(var\(--color\)\)\]\/50 {
+  background-color: hsl(var(--color) / 0.5);
+}
+
 .bg-green-300 {
   --tw-bg-opacity: 1;
   background-color: rgb(134 239 172 / var(--tw-bg-opacity));
@@ -790,6 +793,10 @@ video {
   color: hsl(var(--brick-color) / 0.5);
 }
 
+.text-\[hsl\(var\(--color-dark\)\)\] {
+  color: hsl(var(--color-dark));
+}
+
 .text-\[hsl\(var\(--text-color\)\)\] {
   color: hsl(var(--text-color));
 }

routes/templates/room.gohtml

@@ -49,8 +49,13 @@
         {{/* This is personal hand controls */}}
         <div id="controls" class="bg-green-300 flex flex-col p-10 gap-y-5">
           {{ range .Gestures }}
+
+          {{ if not .IsSelected }}
+          {{/* expects routes.GestureData */}}
+          {{ block "inactiveButton" . }}
           <button
             hx-get="{{ .Url }}"
+            hx-swap="outerHTML"
             class="bg-white rounded border-[hsl(var(--border-color))] border-2 text-[hsl(var(--text-color))] font-bold h-16 rounded-l-full flex flex-row items-center"
             style="--border-color: var({{.Gesture.GetGestureInfo.Color}});
                    --text-color: var({{.Gesture.GetGestureInfo.ColorDark}})
@@ -61,11 +66,25 @@
             <p class="px-5 text-l">{{ .Gesture.String }} </p>
           </button>
           {{ end }}
+          {{ else }}
+          {{/* expects routes.GestureData */}}
+          {{ block "activeButton" . }}
           <button
-            hx-get="/rooms/releaseHand"
-            class="bg-white rounded border-yellow-700 border-4">
-            Release Hand
+            hx-get="/rooms/releaseHand?gesture={{ printf "%d" .Gesture}}"
+            hx-swap="outerHTML"
+            class="bg-[hsl(var(--color))]/50 rounded border-[hsl(var(--color-dark))] border-2 text-[hsl(var(--color-dark))] font-bold h-16 rounded-l-full flex flex-row items-center"
+            style="--color: var({{.Gesture.GetGestureInfo.Color}});
+                   --color-dark: var({{.Gesture.GetGestureInfo.ColorDark}})
+                   ">
+            <img src="{{.Gesture.GetGestureInfo.IconUrl}}" alt=""
+                 class="h-full"
+                 />
+            <p class="px-5 text-l">{{ .Gesture.String }} </p>
           </button>
+          {{ end }}
+          {{ end }}
+
+          {{ end }}
         </div>
       </div>
     </main>