feat: rotated table display

Makefile

@@ -19,7 +19,7 @@ run: tailwindcss
 # and then do `go run .` to rebuild all else
 .PHONY: run/live
 run/live:
-	wgo -verbose -file=.go -file=.gohtml -file=$(TAILWIND_CONF) make run
+	wgo -verbose -file=.go -file=.gohtml -file=.css -file=$(TAILWIND_CONF) make run
 
 # this is alias to concrete task that will build out.css
 .PHONY: tailwindcss

routes/in.css

@@ -9,3 +9,30 @@
     --clarifying-q-color: 216deg 99% 55%;
     --meta-color: 312deg 100% 50%;
 }
+
+/* https://stackoverflow.com/questions/12813573/position-icons-into-circle */
+.circle-container {
+  --d: 7em; /* image size */
+  --rel: 1; /* how much extra space we want between images, 1 = one image size */
+  --r: calc(.5*(1 + var(--rel))*var(--d)/var(--tan)); /* circle radius */
+  --s: calc(2*var(--r) + var(--d)); /* container size */
+  position: relative;
+  width: var(--s);
+  height: var(--s);
+  /* background: silver /\* to show images perfectly fit in container *\/ */
+}
+
+.circle-container .person-bricks {
+  position: absolute;
+  top: 50%; left: 50%;
+  /* margin: calc(-.5*var(--d)); */
+  --az: calc(var(--i)*1turn/var(--m));
+  width: var(--az); height: var(--az);
+  transform:
+    translateX(-50%)
+    translateY(-50%)
+    rotate(90deg)
+    rotate(var(--az))
+    translate(var(--r))
+    rotate(-90deg)
+}

routes/room_page_templates_preview.go

@@ -4,6 +4,7 @@ import (
 	"embed"
 	"html/template"
 	"log"
+	"math"
 	"net/http"
 	"slices"
 
@@ -21,6 +22,7 @@ type personData struct {
 	IsRaised  bool
 	Raised    rooms.HandGesture
 	Mark      rooms.HandGesture
+	Index     int
 }
 
 var brickColors = map[rooms.HandGesture]template.CSS{
@@ -31,13 +33,29 @@ var brickColors = map[rooms.HandGesture]template.CSS{
 	rooms.ChangeTopic: "--change-topic-color",
 }
 
-func personsFromRoom(room rooms.Room) []personData {
+type roomTableData struct {
+	Persons []personData
+	Total   int
+	Tangens float64
+}
+
+func personsFromRoom(room rooms.Room) roomTableData {
 	// TODO start from the 'logged in person'
-	result := make([]personData, 0, len(room.Paricipants))
+	total := len(room.Paricipants)
-	for _, pId := range room.Paricipants {
+	persons := make([]personData, 0, total)
-		result = append(result, personDataFromRoom(room, pId))
+	tangens := math.Tan(math.Pi / float64(total)) // Math.tan(Math.PI/m);
+	// tangens = math.Round(tangens*100) / 100
+	for i, pId := range room.Paricipants {
+		personData := personDataFromRoom(room, pId)
+		personData.Index = i
+		// personData.Tan = math.Round(tangens*100)/100
+		persons = append(persons, personData)
+	}
+	return roomTableData{
+		Persons: persons,
+		Total:   total,
+		Tangens: tangens,
 	}
-	return result
 }
 
 func personDataFromRoom(room rooms.Room, pId rooms.PersonId) personData {
@@ -180,7 +198,7 @@ func roomTemplatesPreview(
 				},
 			},
 			TestPerson: testPersonData,
-			ARoom: aRoom,
+			ARoom:      aRoom,
 		}
 
 		pageData := pageData{
@@ -192,7 +210,7 @@ func roomTemplatesPreview(
 		tmpl := template.Must(template.New("").Funcs(template.FuncMap{
 			"bricksForPerson": bricksForPerson,
 			"personsFromRoom": personsFromRoom,
-		}).ParseFS(templateFs, baseFile ,
+		}).ParseFS(templateFs, baseFile,
 			"templates/tableTemplates.gohtml",
 			"templates/tableTemplatesPreview.gohtml",
 		))

routes/static/out.css

@@ -534,6 +534,10 @@ video {
   --tw-backdrop-sepia:  ;
 }
 
+.relative {
+  position: relative;
+}
+
 .col-span-full {
   grid-column: 1 / -1;
 }
@@ -686,11 +690,6 @@ video {
   background-color: hsl(var(--brick-color) / 0.5);
 }
 
-.bg-blue-200 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(191 219 254 / var(--tw-bg-opacity));
-}
-
 .bg-green-300 {
   --tw-bg-opacity: 1;
   background-color: rgb(134 239 172 / var(--tw-bg-opacity));
@@ -769,6 +768,40 @@ video {
   --meta-color: 312deg 100% 50%;
 }
 
+/* https://stackoverflow.com/questions/12813573/position-icons-into-circle */
+
+.circle-container {
+  --d: 7em;
+  /* image size */
+  --rel: 1;
+  /* how much extra space we want between images, 1 = one image size */
+  --r: calc(.5*(1 + var(--rel))*var(--d)/var(--tan));
+  /* circle radius */
+  --s: calc(2*var(--r) + var(--d));
+  /* container size */
+  position: relative;
+  width: var(--s);
+  height: var(--s);
+  /* background: silver /\* to show images perfectly fit in container *\/ */
+}
+
+.circle-container .person-bricks {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  /* margin: calc(-.5*var(--d)); */
+  --az: calc(var(--i)*1turn/var(--m));
+  width: var(--az);
+  height: var(--az);
+  transform:
+    translateX(-50%)
+    translateY(-50%)
+    rotate(90deg)
+    rotate(var(--az))
+    translate(var(--r))
+    rotate(-90deg)
+}
+
 .invalid\:bg-red-700:invalid {
   --tw-bg-opacity: 1;
   background-color: rgb(185 28 28 / var(--tw-bg-opacity));

routes/templates/room.gohtml

@@ -35,7 +35,7 @@
         <script src="https://unpkg.com/htmx.org/dist/ext/sse.js"></script>
         <div
           id="roomTextContainer"
-          class="bg-blue-200 grid place-content-center"
+          class="grid place-content-center"
           hx-ext="sse"
           sse-connect="/rooms/subscribe?roomName={{ .Room.Name }}"
         >

routes/templates/tableTemplates.gohtml

@@ -67,7 +67,10 @@
 <h2>Now for a person</h2>
 {{ define "personBlocks"  }}
 
-<div>
+<div class="person-bricks "
+     id="person-{{.Index}}"
+     style="--i: {{ .Index }}"
+     >
   {{ range (bricksForPerson .) }}
   {{ template "brick"  .  }}
   {{ end }}
@@ -79,11 +82,14 @@
 
 <h2>And now i'll want to get all persons for a room</h2>
   {{ define "roomPeople"  }}
+  {{ with  (personsFromRoom .)}}
   <div
-    class="flex flex-row"
+    class="circle-container relative"
+    style="--tan: {{ .Tangens }};  --m: {{ .Total }};"
     >
-    {{ range (personsFromRoom .) }}
+    {{ range .Persons }}
     {{ template "personBlocks" . }}
     {{ end }}
   </div>
+  {{ end }}
   {{end}}