chore(gamification): better dynamic scaling

tui/screen/song/song.go

@@ -11,8 +11,9 @@ import (
 
 // Song represents the song screen
 type Song struct {
-	db     *db.DB
-	song   view.View
+	db   *db.DB
+	song view.View
+
 	width  int
 	height int
 }

tui/view/gamification/gamification.go

@@ -21,6 +21,9 @@ import (
 type Model struct {
 	db          *db.DB
 	leaderboard []gamificationItem
+
+	width  int
+	height int
 }
 
 type gamificationItem struct {
@@ -51,6 +54,20 @@ func (m *Model) Name() string {
 // Update updates the gamification view
 func (m *Model) Update(msg tea.Msg) (view.View, tea.Cmd) {
 	switch msg := msg.(type) {
+	case view.MsgSize:
+		// Size update!
+		// Check if it's relevant for this view
+		entry, ok := msg.Sizes[m.Name()]
+		if ok {
+			// Update all dependent styles
+			m.width = entry.Width
+			m.height = entry.Height
+
+			m.updateStyles()
+		}
+
+		return m, nil
+
 	case Msg:
 		m.leaderboard = msg.leaderboard
 	}
@@ -62,21 +79,19 @@ func (m *Model) Update(msg tea.Msg) (view.View, tea.Cmd) {
 func (m *Model) View() string {
 	columns := make([]string, 0, len(m.leaderboard))
 
-	positions := []lipgloss.Style{sFirst, sSecond, sThird, sFourth}
-
 	for i, item := range m.leaderboard {
 		user := lipgloss.JoinVertical(lipgloss.Left,
-			positions[i].Render(fmt.Sprintf("%d. %s", i+1, item.item.Name)),
+			positions[i].Inherit(sName).Render(fmt.Sprintf("%d. %s", i+1, item.item.Name)),
 			sScore.Render(strconv.Itoa(int(item.item.Score))),
 		)
 
-		column := lipgloss.JoinVertical(lipgloss.Left, view.ImagetoString(width, item.image), user)
+		column := lipgloss.JoinVertical(lipgloss.Left, view.ImagetoString(wAvatar, item.image), user)
 		columns = append(columns, sColumn.Render(column))
 	}
 
 	list := lipgloss.JoinHorizontal(lipgloss.Top, columns...)
 
-	return list
+	return sAll.Render(list)
 }
 
 // GetUpdateDatas get all update functions for the gamification view

tui/view/gamification/styles.go

@@ -1,9 +1,9 @@
 package gamification
 
-import "github.com/charmbracelet/lipgloss"
-
-var base = lipgloss.NewStyle()
-var width = 20
+import (
+	"github.com/charmbracelet/lipgloss"
+	"github.com/zeusWPI/scc/tui/view"
+)
 
 // Colors
 var (
@@ -13,17 +13,37 @@ var (
 	cBorder = lipgloss.Color("#383838")
 )
 
+// Base style
+var base = lipgloss.NewStyle()
+
+// All style
+var sAll = base.Align(lipgloss.Center)
+
 // Styles
 var (
-	sName   = base.BorderStyle(lipgloss.NormalBorder()).BorderBottom(true).BorderForeground(cBorder).Width(width).Align(lipgloss.Center)
-	sScore  = base.Width(width).Align(lipgloss.Center)
-	sColumn = base.MarginRight(4)
-)
+	wAvatar = 20 // Width of an avatar
+	wAmount = 4  // Amount of people that are shown
 
-// Positions
-var (
-	sFirst  = sName.Foreground(cGold)
-	sSecond = sName.Foreground(cZeus)
-	sThird  = sName.Foreground(cBronze)
-	sFourth = sName
+	sColumn = base.Margin(2)
+	sName   = base.Align(lipgloss.Center)
+	sScore  = base.Align(lipgloss.Center)
 )
+
+// Styles for the positions
+var positions = []lipgloss.Style{
+	base.Foreground(cGold),
+	base.Foreground(cZeus),
+	base.Foreground(cBronze),
+	base,
+}
+
+func (m *Model) updateStyles() {
+	// Adjust all style
+	sAll = sAll.Width(m.width).Height(m.height).MaxHeight(m.height)
+
+	// Adjust styles
+	wAvatar = (sAll.GetWidth() - view.GetOuterWidth(sAll) - view.GetOuterWidth(sColumn)*wAmount) / wAmount
+
+	sName = sName.Width(wAvatar).BorderStyle(lipgloss.NormalBorder()).BorderBottom(true).BorderForeground(cBorder)
+	sScore = sScore.Width(wAvatar)
+}

tui/view/message/message.go

@@ -15,11 +15,12 @@ import (
 
 // Model represents the model for the message view
 type Model struct {
-	width         int
-	height        int
 	db            *db.DB
 	lastMessageID int32
 	messages      []message
+
+	width  int
+	height int
 }
 
 type message struct {