Add basic widgets

menu/hints.go

@@ -5,14 +5,38 @@ import (
 	"github.com/libretro/ludo/input"
 )
 
-// Used to easily compose different hint bars based on the context.
-func stackHint(stack *float32, icon uint32, label string, h int) {
-	vid.Font.SetColor(darkGrey)
-	*stack += 30 * menu.ratio
-	vid.DrawImage(icon, *stack, float32(h)-70*menu.ratio, 70*menu.ratio, 70*menu.ratio, 1.0, darkGrey)
-	*stack += 70 * menu.ratio
-	vid.Font.Printf(*stack, float32(h)-23*menu.ratio, 0.4*menu.ratio, label)
-	*stack += vid.Font.Width(0.4*menu.ratio, label)
+// HintBar is the bar showing at the bottom of the screen
+func HintBar(props *Props, children ...func()) func() {
+	w, h := vid.Window.GetFramebufferSize()
+	return HBox(&Props{
+		Y:      float32(h) - 70*menu.ratio,
+		Width:  float32(w),
+		Height: 70 * menu.ratio,
+		Color:  lightGrey,
+		Hidden: props.Hidden,
+	},
+		children...,
+	)
+}
+
+// Hint is a widget combining an icon and a label
+func Hint(props *Props, icon uint32, title string) func() {
+	darkGrey := darkGrey
+	return HBox(props,
+		Box(&Props{Width: 15}),
+		Image(&Props{
+			Width:  70 * menu.ratio,
+			Height: 70 * menu.ratio,
+			Scale:  1,
+			Color:  darkGrey,
+		}, icon),
+		Label(&Props{
+			Height: 70 * menu.ratio,
+			Scale:  0.4 * menu.ratio,
+			Color:  darkGrey,
+		}, title),
+		Box(&Props{Width: 15}),
+	)
 }
 
 func hintIcons() (arrows, upDown, leftRight, a, b, x, y, start, slct, guide uint32) {

menu/notifications.go

@@ -23,32 +23,41 @@ var severityBgColor = map[ntf.Severity]video.Color{
 func (m *Menu) RenderNotifications() {
 	fbw, fbh := vid.Window.GetFramebufferSize()
 	vid.Font.UpdateResolution(fbw, fbh)
-	var h float32 = 75
-	stack := h
+	stack := float32(0)
 	for _, n := range ntf.List() {
-		fading := n.Duration * 4
-		if fading > 1 {
-			fading = 1
-		}
-		offset := fading*h - h
-		lw := vid.Font.Width(0.5*m.ratio, n.Message)
-		fg := severityFgColor[n.Severity]
-		bg := severityBgColor[n.Severity]
-		vid.DrawRect(
-			25*m.ratio,
-			(stack+offset-46)*m.ratio,
-			lw+40*m.ratio,
-			70*m.ratio,
-			0.25,
-			bg.Alpha(fading),
-		)
-		vid.Font.SetColor(fg.Alpha(fading))
-		vid.Font.Printf(
-			45*m.ratio,
-			(stack+offset)*m.ratio,
-			0.5*m.ratio,
-			n.Message,
-		)
-		stack += h + offset
+		offset := minf32(n.Duration*4, 1) * 80
+		lw := vid.Font.Width(0.4*menu.ratio, n.Message)
+
+		Toast(&Props{
+			X:            25 * menu.ratio,
+			Y:            (stack + offset - 80 + 25) * menu.ratio,
+			Width:        lw + 70*menu.ratio + 20*menu.ratio,
+			Height:       70 * menu.ratio,
+			BorderRadius: 0.25,
+		}, n)()
+
+		stack += offset
 	}
 }
+
+// Toast can render a notification
+func Toast(props *Props, n *ntf.Notification) func() {
+	alpha := minf32(n.Duration*4, 1)
+	fg := severityFgColor[n.Severity].Alpha(alpha)
+	bg := severityBgColor[n.Severity].Alpha(alpha)
+	props.Color = bg
+
+	return HBox(props,
+		Image(&Props{
+			Width:  props.Height,
+			Height: props.Height,
+			Scale:  1,
+			Color:  fg,
+		}, menu.icons["core-infos"]),
+		Label(&Props{
+			Height: props.Height,
+			Scale:  0.4 * menu.ratio,
+			Color:  fg,
+		}, n.Message),
+	)
+}

menu/scene.go

@@ -174,6 +174,7 @@ func thumbnailDrawCursor(list *entry) {
 // It also display values of settings if we are displaying a settings scene
 func genericRender(list *entry) {
 	w, h := vid.Window.GetFramebufferSize()
+	fontOffset := 64 * 0.7 * menu.ratio * 0.3
 
 	genericDrawCursor(list)
 
@@ -184,8 +185,6 @@ func genericRender(list *entry) {
 			continue
 		}
 
-		fontOffset := 64 * 0.7 * menu.ratio * 0.3
-
 		vid.DrawImage(menu.icons[e.icon],
 			610*menu.ratio-64*0.5*menu.ratio,
 			float32(h)*e.yp-14*menu.ratio-64*0.5*menu.ratio+fontOffset,
@@ -215,16 +214,11 @@ func genericRender(list *entry) {
 }
 
 func genericDrawHintBar() {
-	w, h := vid.Window.GetFramebufferSize()
-	vid.DrawRect(0, float32(h)-70*menu.ratio, float32(w), 70*menu.ratio, 0, lightGrey)
-
 	_, upDown, _, a, b, _, _, _, _, guide := hintIcons()
-
-	var stack float32
-	if state.Global.CoreRunning {
-		stackHint(&stack, guide, "RESUME", h)
-	}
-	stackHint(&stack, upDown, "NAVIGATE", h)
-	stackHint(&stack, b, "BACK", h)
-	stackHint(&stack, a, "OK", h)
+	HintBar(&Props{},
+		Hint(&Props{Hidden: !state.Global.CoreRunning}, guide, "RESUME"),
+		Hint(&Props{}, upDown, "NAVIGATE"),
+		Hint(&Props{}, b, "BACK"),
+		Hint(&Props{}, a, "OK"),
+	)()
 }

menu/scene_core_options.go

@@ -80,16 +80,11 @@ func (s *sceneCoreOptions) render() {
 }
 
 func (s *sceneCoreOptions) drawHintBar() {
-	w, h := vid.Window.GetFramebufferSize()
-	vid.DrawRect(0, float32(h)-70*menu.ratio, float32(w), 70*menu.ratio, 0, lightGrey)
-
 	_, upDown, leftRight, _, b, _, _, _, _, guide := hintIcons()
-
-	var stack float32
-	if state.Global.CoreRunning {
-		stackHint(&stack, guide, "RESUME", h)
-	}
-	stackHint(&stack, upDown, "NAVIGATE", h)
-	stackHint(&stack, b, "BACK", h)
-	stackHint(&stack, leftRight, "SET", h)
+	HintBar(&Props{},
+		Hint(&Props{Hidden: !state.Global.CoreRunning}, guide, "RESUME"),
+		Hint(&Props{}, upDown, "NAVIGATE"),
+		Hint(&Props{}, b, "BACK"),
+		Hint(&Props{}, leftRight, "SET"),
+	)()
 }

menu/scene_dialog.go

@@ -50,59 +50,52 @@ func (s *sceneDialog) render() {
 	w, h := vid.Window.GetFramebufferSize()
 	fw := float32(w)
 	fh := float32(h)
-	vid.DrawRect(0, 0, fw, fh, 0, black.Alpha(0.85))
 
-	var width float32 = 1000
-	var height float32 = 400
-
-	vid.DrawRect(
-		fw/2-width/2*menu.ratio,
-		fh/2-height/2*menu.ratio,
-		width*menu.ratio,
-		height*menu.ratio,
-		0.05,
-		white,
-	)
-
-	vid.Font.SetColor(orange)
-	msg1 := "A game is currently running."
-	lw1 := vid.Font.Width(0.7*menu.ratio, msg1)
-	vid.Font.Printf(fw/2-lw1/2, fh/2-120*menu.ratio+20*menu.ratio, 0.7*menu.ratio, msg1)
-	vid.Font.SetColor(black)
-	msg2 := "If you have not saved yet, your progress will be lost."
-	lw2 := vid.Font.Width(0.5*menu.ratio, msg2)
-	vid.Font.Printf(fw/2-lw2/2, fh/2-30*menu.ratio+20*menu.ratio, 0.5*menu.ratio, msg2)
-	msg3 := "Do you want to exit Ludo anyway?"
-	lw3 := vid.Font.Width(0.5*menu.ratio, msg3)
-	vid.Font.Printf(fw/2-lw3/2, fh/2+30*menu.ratio+20*menu.ratio, 0.5*menu.ratio, msg3)
-
-	vid.Font.SetColor(darkGrey)
-
-	var margin float32 = 15
+	width := 1000 * menu.ratio
+	height := 400 * menu.ratio
 
 	_, _, _, a, b, _, _, _, _, _ := hintIcons()
 
-	vid.DrawImage(
-		b,
-		fw/2-width/2*menu.ratio+margin*menu.ratio,
-		fh/2+height/2*menu.ratio-70*menu.ratio-margin*menu.ratio,
-		70*menu.ratio, 70*menu.ratio, 1.0, darkGrey)
-	vid.Font.Printf(
-		fw/2-width/2*menu.ratio+margin*menu.ratio+70*menu.ratio,
-		fh/2+height/2*menu.ratio-23*menu.ratio-margin*menu.ratio,
-		0.4*menu.ratio,
-		"NO")
-
-	vid.DrawImage(
-		a,
-		fw/2+width/2*menu.ratio-150*menu.ratio-margin*menu.ratio,
-		fh/2+height/2*menu.ratio-70*menu.ratio-margin*menu.ratio,
-		70*menu.ratio, 70*menu.ratio, 1.0, darkGrey)
-	vid.Font.Printf(
-		fw/2+width/2*menu.ratio-150*menu.ratio-margin*menu.ratio+70*menu.ratio,
-		fh/2+height/2*menu.ratio-23*menu.ratio-margin*menu.ratio,
-		0.4*menu.ratio,
-		"YES")
+	// Background
+	Box(&Props{Width: fw, Height: fh, Color: black.Alpha(0.85)},
+		// Dialog
+		VBox(&Props{
+			X:            fw/2 - width/2,
+			Y:            fh/2 - height/2,
+			Width:        width,
+			Height:       height,
+			BorderRadius: 0.05,
+			Color:        white,
+		},
+			// Title
+			Label(&Props{
+				TextAlign: "center",
+				Scale:     0.7 * menu.ratio,
+				Color:     orange,
+				Height:    150 * menu.ratio,
+			}, "A game is currently running"),
+			// Messages
+			Label(&Props{
+				TextAlign: "center",
+				Scale:     0.5 * menu.ratio,
+				Color:     black,
+				Height:    60 * menu.ratio,
+			}, "If you have not saved yet, your progress will be lost."),
+			Label(&Props{
+				TextAlign: "center",
+				Scale:     0.5 * menu.ratio,
+				Color:     black,
+				Height:    60 * menu.ratio,
+			}, "Do you want to exit Ludo anyway?"),
+			Box(&Props{Height: 40 * menu.ratio}),
+			Box(&Props{},
+				// The NO Hint
+				Hint(&Props{}, b, "NO"),
+				// The YES Hint
+				Hint(&Props{X: width - 175*menu.ratio}, a, "YES"),
+			),
+		),
+	)()
 }
 
 func (s *sceneDialog) drawHintBar() {

menu/scene_history.go

@@ -189,16 +189,11 @@ func (s *sceneHistory) render() {
 }
 
 func (s *sceneHistory) drawHintBar() {
-	w, h := vid.Window.GetFramebufferSize()
-	vid.DrawRect(0, float32(h)-70*menu.ratio, float32(w), 70*menu.ratio, 0, lightGrey)
-
 	_, upDown, _, a, b, _, _, _, _, guide := hintIcons()
-
-	var stack float32
-	if state.Global.CoreRunning {
-		stackHint(&stack, guide, "RESUME", h)
-	}
-	stackHint(&stack, upDown, "NAVIGATE", h)
-	stackHint(&stack, b, "BACK", h)
-	stackHint(&stack, a, "RUN", h)
+	HintBar(&Props{},
+		Hint(&Props{Hidden: !state.Global.CoreRunning}, guide, "RESUME"),
+		Hint(&Props{}, upDown, "NAVIGATE"),
+		Hint(&Props{}, b, "BACK"),
+		Hint(&Props{}, a, "RUN"),
+	)()
 }

menu/scene_keyboard.go

@@ -204,16 +204,13 @@ func (s *sceneKeyboard) render() {
 }
 
 func (s *sceneKeyboard) drawHintBar() {
-	w, h := vid.Window.GetFramebufferSize()
-	vid.DrawRect(0, float32(h)-70*menu.ratio, float32(w), 70*menu.ratio, 0, lightGrey)
-
 	arrows, _, _, a, b, x, y, start, _, _ := hintIcons()
-
-	var stack float32
-	stackHint(&stack, arrows, "SELECT", h)
-	stackHint(&stack, b, "BACK", h)
-	stackHint(&stack, x, "SHIFT", h)
-	stackHint(&stack, y, "DELETE", h)
-	stackHint(&stack, a, "INSERT", h)
-	stackHint(&stack, start, "DONE", h)
+	HintBar(&Props{},
+		Hint(&Props{}, arrows, "SELECT"),
+		Hint(&Props{}, b, "BACK"),
+		Hint(&Props{}, x, "SHIFT"),
+		Hint(&Props{}, y, "DELETE"),
+		Hint(&Props{}, a, "INSERT"),
+		Hint(&Props{}, start, "DONE"),
+	)()
 }

menu/scene_playlist.go

@@ -210,16 +210,11 @@ func (s *scenePlaylist) render() {
 }
 
 func (s *scenePlaylist) drawHintBar() {
-	w, h := vid.Window.GetFramebufferSize()
-	vid.DrawRect(0, float32(h)-70*menu.ratio, float32(w), 70*menu.ratio, 0, lightGrey)
-
 	_, upDown, _, a, b, _, _, _, _, guide := hintIcons()
-
-	var stack float32
-	if state.Global.CoreRunning {
-		stackHint(&stack, guide, "RESUME", h)
-	}
-	stackHint(&stack, upDown, "NAVIGATE", h)
-	stackHint(&stack, b, "BACK", h)
-	stackHint(&stack, a, "RUN", h)
+	HintBar(&Props{},
+		Hint(&Props{Hidden: !state.Global.CoreRunning}, guide, "RESUME"),
+		Hint(&Props{}, upDown, "NAVIGATE"),
+		Hint(&Props{}, b, "BACK"),
+		Hint(&Props{}, a, "RUN"),
+	)()
 }

menu/scene_savestates.go

@@ -135,22 +135,13 @@ func (s *sceneSavestates) render() {
 }
 
 func (s *sceneSavestates) drawHintBar() {
-	w, h := vid.Window.GetFramebufferSize()
-	vid.DrawRect(0, float32(h)-70*menu.ratio, float32(w), 70*menu.ratio, 0, lightGrey)
-
 	ptr := menu.stack[len(menu.stack)-1].Entry().ptr
-
 	_, upDown, _, a, b, _, _, _, _, guide := hintIcons()
-
-	var stack float32
-	if state.Global.CoreRunning {
-		stackHint(&stack, guide, "RESUME", h)
-	}
-	stackHint(&stack, upDown, "NAVIGATE", h)
-	stackHint(&stack, b, "BACK", h)
-	if ptr == 0 {
-		stackHint(&stack, a, "SAVE", h)
-	} else {
-		stackHint(&stack, a, "LOAD", h)
-	}
+	HintBar(&Props{},
+		Hint(&Props{Hidden: !state.Global.CoreRunning}, guide, "RESUME"),
+		Hint(&Props{}, upDown, "NAVIGATE"),
+		Hint(&Props{}, b, "BACK"),
+		Hint(&Props{Hidden: ptr != 0}, a, "SAVE"),
+		Hint(&Props{Hidden: ptr == 0}, a, "LOAD"),
+	)()
 }