From 8b23103e8ed2e923c77ad88bfc61ce765c9578af Mon Sep 17 00:00:00 2001 From: efim Date: Sat, 18 Nov 2023 18:45:21 +0000 Subject: [PATCH] feat: rotated table display --- Makefile | 2 +- routes/in.css | 27 ++++++++++++++++ routes/room_page_templates_preview.go | 32 ++++++++++++++----- routes/static/out.css | 43 +++++++++++++++++++++++--- routes/templates/room.gohtml | 2 +- routes/templates/tableTemplates.gohtml | 12 +++++-- 6 files changed, 101 insertions(+), 17 deletions(-) diff --git a/Makefile b/Makefile index 0e13ec2..4b9f086 100644 --- a/Makefile +++ b/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 diff --git a/routes/in.css b/routes/in.css index d5a09f8..363c29d 100644 --- a/routes/in.css +++ b/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) +} diff --git a/routes/room_page_templates_preview.go b/routes/room_page_templates_preview.go index 348e02c..8e7b1e1 100644 --- a/routes/room_page_templates_preview.go +++ b/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)) - for _, pId := range room.Paricipants { - result = append(result, personDataFromRoom(room, pId)) + total := len(room.Paricipants) + persons := make([]personData, 0, total) + 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", )) diff --git a/routes/static/out.css b/routes/static/out.css index b17d9c4..13fd0db 100644 --- a/routes/static/out.css +++ b/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)); diff --git a/routes/templates/room.gohtml b/routes/templates/room.gohtml index bdfc99f..d0a0cd8 100644 --- a/routes/templates/room.gohtml +++ b/routes/templates/room.gohtml @@ -35,7 +35,7 @@
diff --git a/routes/templates/tableTemplates.gohtml b/routes/templates/tableTemplates.gohtml index f52e1c3..0c3363d 100644 --- a/routes/templates/tableTemplates.gohtml +++ b/routes/templates/tableTemplates.gohtml @@ -67,7 +67,10 @@

Now for a person

{{ define "personBlocks" }} -
+
{{ range (bricksForPerson .) }} {{ template "brick" . }} {{ end }} @@ -79,11 +82,14 @@

And now i'll want to get all persons for a room

{{ define "roomPeople" }} + {{ with (personsFromRoom .)}}
- {{ range (personsFromRoom .) }} + {{ range .Persons }} {{ template "personBlocks" . }} {{ end }}
+ {{ end }} {{end}}