refactor: toggling state by same button

routes/room_page.go

@@ -107,22 +107,20 @@ func raiseGestureHandRoute(
 ) http.HandlerFunc {
 	return func(w http.ResponseWriter, r *http.Request) {
 		gestureInd, err := strconv.Atoi(r.URL.Path)
-		gesture, found := rooms.GestureFromInt(gestureInd)
+		selectedGesture, found := rooms.GestureFromInt(gestureInd)
 		if err != nil || !found {
 			log.Printf("/rooms/raiseGesture error %s gettin hand symbol index from path %s\n", err, r.URL.Path)
 			return
 		}
-		log.Printf("/rooms/raiseGesture successfully got gesture %d : %s", gesture, gesture.String())
+		log.Printf("/rooms/raiseGesture successfully got gesture %d : %s", selectedGesture, selectedGesture.String())
 		session, found := getContextSession(r.Context())
 		if !found {
 			log.Printf("/rooms/raiseGesture session not found, should be impossible")
 			// TODO return error i guess
 			return
 		}
-		var outerClosureRoom rooms.Room
 		err = roomsM.Update(r.Context(), session.RoomId, func(fromRoom rooms.Room) (toRoom rooms.Room) {
-			toRoom = fromRoom.RaiseHand(session.PersonId, gesture)
+			toRoom = fromRoom.RaiseHand(session.PersonId, selectedGesture)
-			outerClosureRoom = toRoom
 			return toRoom
 		})
 		if err != nil {
@@ -130,16 +128,19 @@ func raiseGestureHandRoute(
 			return
 			// TODO return error i guess
 		}
-		log.Printf(">> i attempt to get room with closure: %+v\n", outerClosureRoom)
 		tableTemplates := "templates/room.gohtml"
 		tmpl := template.Must(
 			template.New("").ParseFS(templateFs, tableTemplates))
-		gestureData := GestureData{
+
-			Url:  fmt.Sprintf("%s%d", raiseHandPath, gesture),
+		var gesturesData []GestureData
-			Gesture: gesture,
+		for _, gesture := range rooms.GesturesHighToLow {
-			IsSelected: true,
+			gesturesData = append(gesturesData, GestureData{
+				Url:  fmt.Sprintf("%s%d", raiseHandPath, gesture),
+				Gesture: gesture,
+				IsSelected: selectedGesture == gesture,
+			})
 		}
-		err = tmpl.ExecuteTemplate(w, "activeButton", &gestureData)
+		err = tmpl.ExecuteTemplate(w, "controls", &gesturesData)
 		if err != nil {
 			log.Printf("/rooms/releaseHand error saving hand: %s\n", err)
 			return
@@ -171,38 +172,22 @@ func releaseHandRoute(
 			// TODO return error i guess
 		}
 
-		r.ParseForm() // to return either 'inactive button" or 'no need to change html'
+		tableTemplates := "templates/room.gohtml"
-		gestureString := r.FormValue("gesture")
+		tmpl := template.Must(
-		if gestureString != "" {
+			template.New("").ParseFS(templateFs, tableTemplates))
-			gestureIndex, err := strconv.Atoi(gestureString)
+		var gesturesData []GestureData
-			if err != nil {
+		for _, gesture := range rooms.GesturesHighToLow {
-				log.Printf("/rooms/releaseHand error getting gesture index: %s %s", gestureString, err)
+			gesturesData = append(gesturesData, GestureData{
-				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 {
+		err = tmpl.ExecuteTemplate(w, "controls", &gesturesData)
-				log.Printf("/rooms/releaseHand error saving hand: %s\n", err)
+		if err != nil {
-				return
+			log.Printf("/rooms/releaseHand error saving hand: %s\n", err)
-				// TODO return error i guess
+			return
-			}
+			// TODO return error i guess
-		} else {
-			w.WriteHeader(http.StatusNoContent)
 		}
 	}
 }

routes/static/out.css

@@ -697,10 +697,6 @@ 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));
 }
@@ -709,6 +705,10 @@ video {
   border-color: hsl(var(--brick-color) / 0.25);
 }
 
+.border-\[hsl\(var\(--color\)\)\] {
+  border-color: hsl(var(--color));
+}
+
 .border-\[hsl\(var\(--color-dark\)\)\] {
   border-color: hsl(var(--color-dark));
 }

routes/templates/room.gohtml

@@ -48,31 +48,19 @@
         </div>
         {{/* This is personal hand controls */}}
         <div id="controls" class="bg-green-300 flex flex-col p-10 gap-y-5">
-          {{ range .Gestures }}
+          {{ block "controls" .Gestures }}
+          {{ range . }}
 
-          {{ if not .IsSelected }}
           {{/* expects routes.GestureData */}}
-          {{ block "inactiveButton" . }}
           <button
+            {{ if not .IsSelected }}
             hx-get="{{ .Url }}"
-            hx-swap="outerHTML"
+            class="bg-white rounded border-[hsl(var(--color))] border-2 text-[hsl(var(--color-dark))] font-bold h-16 rounded-l-full flex flex-row items-center"
-            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"
+            {{ else }}
-            style="--border-color: var({{.Gesture.GetGestureInfo.Color}});
+            hx-get="/rooms/releaseHand"
-                   --text-color: var({{.Gesture.GetGestureInfo.ColorDark}})
+            class="bg-[hsl(var(--color))]/50 rounded border-[hsl(var(--color-dark))] border-2 text-[hsl(var(--text-color))] font-bold h-16 rounded-l-full flex flex-row items-center"
-                   ">
+            {{ end }}
-            <img src="{{.Gesture.GetGestureInfo.IconUrl}}" alt=""
+            hx-target="#controls"
-                 class="h-full"
-                 />
-            <p class="px-5 text-l">{{ .Gesture.String }} </p>
-          </button>
-          {{ end }}
-          {{ else }}
-          {{/* expects routes.GestureData */}}
-          {{ block "activeButton" . }}
-          <button
-            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}})
                    ">
@@ -81,10 +69,9 @@
                  />
             <p class="px-5 text-l">{{ .Gesture.String }} </p>
           </button>
-          {{ end }}
-          {{ end }}
 
           {{ end }}
+          {{ end }}
         </div>
       </div>
     </main>