feat: dynamic arrow drawing

routes/room_page_templates_preview.go

@@ -63,6 +63,7 @@ func (r *roomTableData)Tangens() float64 {
 }
 
 type arrowData struct {
+	IsVisible bool
 	Height, Width int
 	Radius int
 	StartX, StartY int
@@ -72,15 +73,21 @@ type arrowData struct {
 	Angle2X, Angle2Y int
 }
 
+// arrow data - to draw SVG from current speaker to next speaker
 func (r *roomTableData)ArrowData() arrowData {
-	// TODO take total and indexes from room data
-	// also figure out size to be around the people
+	// TODO figure out size to be around the people
 	// and this is somewhat a win
 	height, width := 150.0, 150.0
 	centerX, centerY := height/2, width/2
-	total := 5 // 0 to 4
-	startSector := 1
-	endSector := 5
+	total := r.Total()
+	// speakerIndex := slices.Index(r.Paricipants, r.CurrentSpeaker)
+	currentPersonIndex := slices.Index(r.Paricipants, r.currentPerson)
+	nextSpeakerIndex, found, countedFromIndex := r.NextSpeakerIndex()
+	if !found {
+		return arrowData{}
+	}
+	startSector := countedFromIndex + total - currentPersonIndex
+	endSector := nextSpeakerIndex + total - currentPersonIndex
 	if endSector < startSector {
 		endSector += total
 	}
@@ -113,6 +120,7 @@ func (r *roomTableData)ArrowData() arrowData {
 		largeArcFlag = 1
 	}
 	return arrowData{
+		IsVisible: true,
 		Height: int(height),
 		Width: int(width),
 		Radius: int(radius),

routes/templates/tableTemplates.gohtml

@@ -72,11 +72,11 @@
   style="--tan: {{ .Tangens }};  --m: {{ .Total }};"
 >
   {{ with .ArrowData }}
+  {{ if .IsVisible }}
   <svg height="{{.Height}}" width="{{.Width}}"
        class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"
        >
     <g>
-      <rect height="{{.Height}}" width="{{.Width}}" fill="#EEE" />
       <path
         d="M {{.StartX}} {{.StartY}}
          A {{.Radius}} {{.Radius}} 0, {{.LargeArcFlag}}, 1, {{.EndX}} {{.EndY}}"
@@ -90,6 +90,7 @@
     </g>
   </svg>
   {{ end }}
+  {{ end }}
   {{ range .Persons }} {{ template "personBlocks" . }} {{ end }}
 </div>
 {{end}}