efim
/
some-automoderation
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: spread out low person count 

for 2 people tan is huge, so radius becomes ~0, hardcode for radius
~image size

and in css --r add part of image for 'offces from center'
This commit is contained in:
efim 2023-11-19 06:47:43 +00:00
parent af53bda10e
commit b13a43aa71
4 changed files with 22 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
routes/in.css
View File

@ -12,14 +12,13 @@
/* https://stackoverflow.com/questions/12813573/position-icons-into-circle */ /* https://stackoverflow.com/questions/12813573/position-icons-into-circle */
.circle-container { .circle-container {
--d: 7em; /* image size */ --d: 10rem; /* the image size */
--rel: 1; /* how much extra space we want between images, 1 = one image size */ --rel: 0.5; /* how much extra space we want between images, 1 = one image size */
--r: calc(.5*(1 + var(--rel))*var(--d)/var(--tan)); /* circle radius */ --r: calc(.5*(1 + var(--rel))*var(--d)/var(--tan) + 0.4*var(--d)); /* circle radius */
--s: calc(2*var(--r) + var(--d)); /* container size */ --s: calc(2*var(--r) + var(--d)); /* container size */
position: relative; position: relative;
width: var(--s); width: var(--s);
height: var(--s); height: var(--s);
/* background: silver /\* to show images perfectly fit in container *\/ */
} }
.circle-container .person-bricks { .circle-container .person-bricks {

4
routes/room_page_templates_preview.go
View File

@ -55,6 +55,10 @@ func (r *roomTableData)Total() int {
return len(r.Paricipants) return len(r.Paricipants)
} }
func (r *roomTableData)Tangens() float64 { func (r *roomTableData)Tangens() float64 {
total := r.Total()
if total == 2 {
return 1
}
return math.Tan(math.Pi / float64(r.Total())) // Math.tan(Math.PI/m); return math.Tan(math.Pi / float64(r.Total())) // Math.tan(Math.PI/m);
} }

13
routes/static/out.css
View File

@ -558,8 +558,8 @@ video {
height: 3.5rem; height: 3.5rem;
} }
.h-8 { .h-\[var\(--brick-height\)\] {
height: 2rem; height: var(--brick-height);
} }
.h-fit { .h-fit {
@ -771,18 +771,17 @@ video {
/* https://stackoverflow.com/questions/12813573/position-icons-into-circle */ /* https://stackoverflow.com/questions/12813573/position-icons-into-circle */
.circle-container { .circle-container {
--d: 7em; --d: 10rem;
/* image size */ /* the image size */
--rel: 1; --rel: 0.5;
/* how much extra space we want between images, 1 = one image size */ /* how much extra space we want between images, 1 = one image size */
--r: calc(.5*(1 + var(--rel))*var(--d)/var(--tan)); --r: calc(.5*(1 + var(--rel))*var(--d)/var(--tan) + 0.4*var(--d));
/* circle radius */ /* circle radius */
--s: calc(2*var(--r) + var(--d)); --s: calc(2*var(--r) + var(--d));
/* container size */ /* container size */
position: relative; position: relative;
width: var(--s); width: var(--s);
height: var(--s); height: var(--s);
/* background: silver /\* to show images perfectly fit in container *\/ */
} }
.circle-container .person-bricks { .circle-container .person-bricks {

16
routes/templates/tableTemplates.gohtml
View File

@ -3,29 +3,29 @@
{{ define "inactiveBrick" }} {{ define "inactiveBrick" }}
<div <div
class="h-8 w-20 border-[hsl(var(--brick-color))]/25 border bg-[hsl(var(--brick-color))]/5" class="h-[var(--brick-height)] w-20 border-[hsl(var(--brick-color))]/25 border bg-[hsl(var(--brick-color))]/5"
style="--brick-color: var({{.}})" style="--brick-color: var({{.}}); --brick-height: calc(var(--d)/5)"
></div> ></div>
{{ end }} {{ end }}
{{ define "raisedBrick" }} {{ define "raisedBrick" }}
<div <div
class="h-8 w-20 border-[hsl(var(--brick-color))] border-2 bg-[hsl(var(--brick-color))]/25" class="h-[var(--brick-height)] w-20 border-[hsl(var(--brick-color))] border-2 bg-[hsl(var(--brick-color))]/25"
style="--brick-color: var({{.}})" style="--brick-color: var({{.}}); --brick-height: calc(var(--d)/5)"
></div> ></div>
{{ end }} {{ end }}
{{ define "speakerBrick" }} {{ define "speakerBrick" }}
<div <div
class="h-8 w-20 border-[hsl(var(--brick-color))] border-2 bg-[hsl(var(--brick-color))]/50 shadow-[0_0_15px_rgba(0,_0,_0,_0.5)] shadow-[hsl(var(--brick-color))] animate-pulse" class="h-[var(--brick-height)] w-20 border-[hsl(var(--brick-color))] border-2 bg-[hsl(var(--brick-color))]/50 shadow-[0_0_15px_rgba(0,_0,_0,_0.5)] shadow-[hsl(var(--brick-color))] animate-pulse"
style="--brick-color: var({{.}})" style="--brick-color: var({{.}}); --brick-height: calc(var(--d)/5)"
></div> ></div>
{{ end }} {{ end }}
{{ define "markBrick" }} {{ define "markBrick" }}
<div <div
class="h-8 w-20 border-[hsl(var(--brick-color))]/25 border bg-[hsl(var(--brick-color))]/5 grid place-content-center font-bold text-[hsl(var(--brick-color))]/50" class="h-[var(--brick-height)] w-20 border-[hsl(var(--brick-color))]/25 border bg-[hsl(var(--brick-color))]/5 grid place-content-center font-bold text-[hsl(var(--brick-color))]/50"
style="--brick-color: var({{.}})" style="--brick-color: var({{.}}); --brick-height: calc(var(--d)/5)"
> >
X X
</div> </div>