Add tooltips to text entry boxes

common/arena.go

@@ -86,7 +86,7 @@ func NewArena(pos turdgl.Vec) *Arena {
 					Y: pos.Y + float64(i)*tileSpacingPx,
 				},
 			)
-			bgTiles[j][i].SetStyle(turdgl.Style{Colour: tileBackgroundColour})
+			bgTiles[j][i].SetStyle(turdgl.Style{Colour: TileBackgroundColour})
 		}
 	}
 

common/button.go

@@ -69,7 +69,7 @@ var gameButtonStyleHovering = turdgl.Style{
 // NewGameButton constructs a new game button with sensible defaults.
 func NewGameButton(width, height float64, pos turdgl.Vec, cb func()) *turdgl.Button {
 	r := turdgl.NewCurvedRect(width, height, TileCornerRadius, pos.Round()).
-		SetStyle(turdgl.Style{Colour: buttonOrangeColour})
+		SetStyle(turdgl.Style{Colour: ButtonOrangeColour})
 	b := turdgl.NewButton(r, FontPathBold).
 		SetLabelText("BUTTON").
 		SetLabelSize(14).

common/textbox.go

@@ -70,16 +70,15 @@ func (e *EntryBox) SetModifiedCB(callback func()) *EntryBox {
 	return e
 }
 
+// NewTextBox constructs a new text box.
 func NewTextBox(width, height float64, pos turdgl.Vec, txt string) *turdgl.TextBox {
 	r := turdgl.NewCurvedRect(width, height, 6, pos).
 		SetStyle(turdgl.Style{Colour: buttonColourUnpressed})
 
-	tb := turdgl.NewTextBox(r, txt, FontPathMedium).
+	return turdgl.NewTextBox(r, txt, FontPathMedium).
 		SetTextOffset(turdgl.Vec{X: 0, Y: 15}).
 		SetTextSize(36).
 		SetTextColour(LightGreyTextColour)
-
-	return tb
 }
 
 // ScoreBox is a commonly used text box for displaying scores.
@@ -152,3 +151,14 @@ func NewLogoBox(size float64, pos turdgl.Vec) *turdgl.TextBox {
 
 	return logo
 }
+
+// NewLogoBox returns a new tooltip text box.
+func NewTooltip() *turdgl.TextBox {
+	r := turdgl.NewCurvedRect(110, 23, 2, turdgl.Vec{}).
+		SetStyle(turdgl.Style{Colour: ArenaBackgroundColour})
+
+	return turdgl.NewTextBox(r, "Click to edit", FontPathMedium).
+		SetTextOffset(turdgl.Vec{Y: 4}).
+		SetTextSize(16).
+		SetTextColour(LightGreyTextColour)
+}

common/theme.go

@@ -24,8 +24,8 @@ var (
 	GreyTextColour      = turdgl.RGB(120, 110, 100) // official colour
 	WhiteFontColour     = turdgl.RGB(255, 255, 255) // official colour
 
-	buttonOrangeColour    = turdgl.RGB(235, 152, 91)  // official colour
-	tileBackgroundColour  = turdgl.RGB(204, 192, 180) // official colour
+	ButtonOrangeColour    = turdgl.RGB(235, 152, 91)  // official colour
+	TileBackgroundColour  = turdgl.RGB(204, 192, 180) // official colour
 	ArenaBackgroundColour = turdgl.RGB(187, 173, 160) // official colour
 
 )

go.mod

@@ -6,7 +6,7 @@ require (
 	github.com/brunoga/deep v1.2.4
 	github.com/google/uuid v1.6.0
 	github.com/moby/moby v27.3.1+incompatible
-	github.com/z-riley/turdgl v0.0.0-20241109150126-d7ad58ec364c
+	github.com/z-riley/turdgl v0.0.0-20241110155312-25280b430bfe
 	github.com/z-riley/turdserve v0.0.0-20241109095301-66eab11d38af
 	golang.org/x/exp v0.0.0-20240808152545-0cdaa3abc0fa
 )

go.sum

@@ -12,6 +12,20 @@ github.com/z-riley/turdgl v0.0.0-20241103202229-f47b8b5d8d90 h1:m8g+TQSdHx2iv8Eg
 github.com/z-riley/turdgl v0.0.0-20241103202229-f47b8b5d8d90/go.mod h1:PUy0rnENvtQrZRghi9dYinsUUE7gvC9wOz8C/gcwJ8A=
 github.com/z-riley/turdgl v0.0.0-20241109150126-d7ad58ec364c h1:8eEADvOzL+DlwZzHkCB/TYNKMMrrdK5/2+cZSPpTL04=
 github.com/z-riley/turdgl v0.0.0-20241109150126-d7ad58ec364c/go.mod h1:PUy0rnENvtQrZRghi9dYinsUUE7gvC9wOz8C/gcwJ8A=
+github.com/z-riley/turdgl v0.0.0-20241110110918-9258386195d6 h1:m2Vh7JsgPsHTDFv3gtZJ073pkCq02Jtt7YG8QBv1vrw=
+github.com/z-riley/turdgl v0.0.0-20241110110918-9258386195d6/go.mod h1:PUy0rnENvtQrZRghi9dYinsUUE7gvC9wOz8C/gcwJ8A=
+github.com/z-riley/turdgl v0.0.0-20241110144119-202ac9fcd989 h1:MnFLhRGIwNl3ArCOzkC3Jyhf65LBCHWNOoaPhy5Vof8=
+github.com/z-riley/turdgl v0.0.0-20241110144119-202ac9fcd989/go.mod h1:PUy0rnENvtQrZRghi9dYinsUUE7gvC9wOz8C/gcwJ8A=
+github.com/z-riley/turdgl v0.0.0-20241110145108-b4bd5b5fb227 h1:pK16y0wM7hgVefDRr6HZvzqRGp36Ca4xaWj/qDRDleo=
+github.com/z-riley/turdgl v0.0.0-20241110145108-b4bd5b5fb227/go.mod h1:PUy0rnENvtQrZRghi9dYinsUUE7gvC9wOz8C/gcwJ8A=
+github.com/z-riley/turdgl v0.0.0-20241110145540-e8b3eff55539 h1:x/ZkxDoEPiJG92Fog16ACuh1MN4J0Rt0LGykIAlIgkA=
+github.com/z-riley/turdgl v0.0.0-20241110145540-e8b3eff55539/go.mod h1:PUy0rnENvtQrZRghi9dYinsUUE7gvC9wOz8C/gcwJ8A=
+github.com/z-riley/turdgl v0.0.0-20241110150420-77cce0ab743c h1:Fk3ce0wEsVcD2OLA5iJO3gNGPN+NRMsVj/fHLyxF7E4=
+github.com/z-riley/turdgl v0.0.0-20241110150420-77cce0ab743c/go.mod h1:PUy0rnENvtQrZRghi9dYinsUUE7gvC9wOz8C/gcwJ8A=
+github.com/z-riley/turdgl v0.0.0-20241110155021-280343130dc7 h1:i0KmQ9APd/pzkuwPaZjaBFah/MUI3eeABE9dxVkabkM=
+github.com/z-riley/turdgl v0.0.0-20241110155021-280343130dc7/go.mod h1:PUy0rnENvtQrZRghi9dYinsUUE7gvC9wOz8C/gcwJ8A=
+github.com/z-riley/turdgl v0.0.0-20241110155312-25280b430bfe h1:eAF2Nn4N/xDvA2WLpUJWcL1lx36se4SKfi8AJJDzIxI=
+github.com/z-riley/turdgl v0.0.0-20241110155312-25280b430bfe/go.mod h1:PUy0rnENvtQrZRghi9dYinsUUE7gvC9wOz8C/gcwJ8A=
 github.com/z-riley/turdserve v0.0.0-20241103172943-200ed8c9c094 h1:9ldkpBMZ5+BV8GOGH+4QhrBgevotAprFgMVCasm+td0=
 github.com/z-riley/turdserve v0.0.0-20241103172943-200ed8c9c094/go.mod h1:D5VroZVlQvt0vUtZ2xHL8aQOlCumE/9LFEH1BBLE468=
 github.com/z-riley/turdserve v0.0.0-20241109095301-66eab11d38af h1:X0XCfUgoGvZaOZtSRcB6UkuEkP4B6EzwvDUkkZkA7p0=

screen/multiplayer.go

@@ -63,10 +63,10 @@ func (s *MultiplayerScreen) Enter(initData InitData) {
 	// UI widgets
 	{
 		s.arena = common.NewArena(
-			turdgl.Vec{X: float64(s.win.Width())/3 - 249, Y: 300},
+			turdgl.Vec{X: config.WinWidth/3 - 249, Y: 300},
 		)
 		s.opponentArena = common.NewArena(
-			turdgl.Vec{X: float64(s.win.Width())*2/3 - 71, Y: 300},
+			turdgl.Vec{X: config.WinWidth*2/3 - 71, Y: 300},
 		)
 
 		// Everything is sized relative to the tile size and arena position
@@ -76,12 +76,12 @@ func (s *MultiplayerScreen) Enter(initData InitData) {
 		const logoSize = 1.36 * unit
 		s.logo2048 = common.NewLogoBox(
 			logoSize,
-			turdgl.Vec{X: (float64(s.win.Width()) - logoSize) / 2, Y: anchor.Y - 2.58*unit},
+			turdgl.Vec{X: (config.WinWidth - logoSize) / 2, Y: anchor.Y - 2.58*unit},
 		)
 
 		s.endGameDialog = common.NewGameText(
 			"Press MENU to\nplay again",
-			turdgl.Vec{X: float64(s.win.Width() / 2), Y: anchor.Y - 2.5*unit},
+			turdgl.Vec{X: config.WinWidth / 2, Y: anchor.Y - 2.5*unit},
 		).SetAlignment(turdgl.AlignTopCentre).SetSize(25)
 
 		// Player's grid
@@ -124,7 +124,7 @@ func (s *MultiplayerScreen) Enter(initData InitData) {
 			s.arenaInputCh = make(chan func(), 100)
 
 			s.timer = common.NewGameText("",
-				turdgl.Vec{X: 600, Y: anchor.Y - 0.53*unit},
+				turdgl.Vec{X: config.WinWidth / 2, Y: anchor.Y - 0.53*unit},
 			).SetAlignment(turdgl.AlignTopCentre)
 
 		}

screen/multiplayer_host.go

@@ -22,6 +22,7 @@ type MultiplayerHostScreen struct {
 	win *turdgl.Window
 
 	title            *turdgl.Text
+	tooltip          *turdgl.TextBox
 	nameHeading      *turdgl.Text
 	nameEntry        *common.EntryBox
 	opponentName     string
@@ -41,23 +42,25 @@ func NewMultiplayerHostScreen(win *turdgl.Window) *MultiplayerHostScreen {
 
 // Enter initialises the screen.
 func (s *MultiplayerHostScreen) Enter(_ InitData) {
-	s.title = turdgl.NewText("Host Game", turdgl.Vec{X: 600, Y: 150}, common.FontPathMedium).
+	s.title = turdgl.NewText("Host Game", turdgl.Vec{X: config.WinWidth / 2, Y: 150}, common.FontPathMedium).
 		SetColour(common.GreyTextColour).
 		SetAlignment(turdgl.AlignCentre).
 		SetSize(100)
 
+	s.tooltip = common.NewTooltip()
+
 	s.nameHeading = turdgl.NewText(
 		"Your name:",
-		turdgl.Vec{X: 600, Y: 290},
+		turdgl.Vec{X: config.WinWidth / 2, Y: 290},
 		common.FontPathMedium,
 	).
 		SetColour(common.GreyTextColour).
 		SetAlignment(turdgl.AlignCentre).
 		SetSize(30)
 
 	s.nameEntry = common.NewEntryBox(
-		400, 60,
-		turdgl.Vec{X: 600 - 400/2, Y: s.nameHeading.Pos().Y + 20},
+		440, 60,
+		turdgl.Vec{X: (config.WinWidth - 440) / 2, Y: s.nameHeading.Pos().Y + 20},
 		namesgenerator.GetRandomName(0),
 	).
 		SetModifiedCB(func() {
@@ -69,7 +72,7 @@ func (s *MultiplayerHostScreen) Enter(_ InitData) {
 
 	s.opponentStatus = turdgl.NewText(
 		fmt.Sprintf("Waiting for opponent to join \"%s\"", getIPAddr()),
-		turdgl.Vec{X: 600, Y: 510},
+		turdgl.Vec{X: config.WinWidth / 2, Y: 510},
 		common.FontPathMedium,
 	).
 		SetColour(common.GreyTextColour).
@@ -87,7 +90,7 @@ func (s *MultiplayerHostScreen) Enter(_ InitData) {
 	const w = TileSizePx * (2 + 3*TileBoundryFactor)
 	s.buttonBackground = turdgl.NewCurvedRect(
 		w, TileSizePx*(1+2*TileBoundryFactor), TileCornerRadius,
-		turdgl.Vec{X: (float64(s.win.Width()) - w) / 2, Y: 560},
+		turdgl.Vec{X: (config.WinWidth - w) / 2, Y: 560},
 	)
 	s.buttonBackground.SetStyle(turdgl.Style{Colour: common.ArenaBackgroundColour})
 
@@ -189,6 +192,12 @@ func (s *MultiplayerHostScreen) Update() {
 
 	s.win.Draw(s.nameEntry)
 	s.nameEntry.Update(s.win)
+
+	mouseLoc := s.win.MouseLocation()
+	if s.nameEntry.TextBox.Shape.IsWithin(mouseLoc) && !s.nameEntry.TextBox.IsEditing() {
+		s.tooltip.SetPos(turdgl.Vec{X: mouseLoc.X, Y: mouseLoc.Y - s.tooltip.Shape.Height()})
+		s.win.Draw(s.tooltip)
+	}
 }
 
 // handleClientData handles all data received from a client.

screen/multiplayer_join.go

@@ -19,6 +19,7 @@ type MultiplayerJoinScreen struct {
 	win *turdgl.Window
 
 	title            *turdgl.Text
+	tooltip          *turdgl.TextBox
 	nameHeading      *turdgl.Text
 	nameEntry        *common.EntryBox
 	ipHeading        *turdgl.Text
@@ -41,23 +42,25 @@ func NewMultiplayerJoinScreen(win *turdgl.Window) *MultiplayerJoinScreen {
 
 // Enter initialises the screen.
 func (s *MultiplayerJoinScreen) Enter(_ InitData) {
-	s.title = turdgl.NewText("Join game", turdgl.Vec{X: 600, Y: 120}, common.FontPathMedium).
+	s.title = turdgl.NewText("Join game", turdgl.Vec{X: config.WinWidth / 2, Y: 120}, common.FontPathMedium).
 		SetColour(common.GreyTextColour).
 		SetAlignment(turdgl.AlignCentre).
 		SetSize(100)
 
+	s.tooltip = common.NewTooltip()
+
 	s.nameHeading = turdgl.NewText(
 		"Your name:",
-		turdgl.Vec{X: 600, Y: 230},
+		turdgl.Vec{X: config.WinWidth / 2, Y: 230},
 		common.FontPathMedium,
 	).
 		SetColour(common.GreyTextColour).
 		SetAlignment(turdgl.AlignCentre).
 		SetSize(30)
 
 	s.nameEntry = common.NewEntryBox(
-		400, 60,
-		turdgl.Vec{X: 600 - 400/2, Y: s.nameHeading.Pos().Y + 15},
+		440, 60,
+		turdgl.Vec{X: config.WinWidth/2 - 440/2, Y: s.nameHeading.Pos().Y + 15},
 		namesgenerator.GetRandomName(0),
 	).
 		SetModifiedCB(func() {
@@ -71,7 +74,7 @@ func (s *MultiplayerJoinScreen) Enter(_ InitData) {
 
 	s.ipHeading = turdgl.NewText(
 		"Host IP:",
-		turdgl.Vec{X: 600, Y: 370},
+		turdgl.Vec{X: config.WinWidth / 2, Y: 370},
 		common.FontPathMedium,
 	).
 		SetColour(common.GreyTextColour).
@@ -86,8 +89,8 @@ func (s *MultiplayerJoinScreen) Enter(_ InitData) {
 	}
 
 	s.ipEntry = common.NewEntryBox(
-		400, 60,
-		turdgl.Vec{X: 600 - 400/2, Y: s.ipHeading.Pos().Y + 15},
+		440, 60,
+		turdgl.Vec{X: (config.WinWidth - 440) / 2, Y: s.ipHeading.Pos().Y + 15},
 		string(b),
 	).SetModifiedCB(func() {
 		if err := s.ipStore.SaveBytes([]byte(s.ipEntry.Text())); err != nil {
@@ -97,7 +100,7 @@ func (s *MultiplayerJoinScreen) Enter(_ InitData) {
 
 	s.opponentStatus = turdgl.NewText(
 		"",
-		turdgl.Vec{X: 600, Y: 530},
+		turdgl.Vec{X: config.WinWidth / 2, Y: 530},
 		common.FontPathMedium,
 	).
 		SetColour(common.GreyTextColour).
@@ -115,7 +118,7 @@ func (s *MultiplayerJoinScreen) Enter(_ InitData) {
 	const w = TileSizePx * (2 + 3*TileBoundryFactor)
 	s.buttonBackground = turdgl.NewCurvedRect(
 		w, TileSizePx*(1+2*TileBoundryFactor), TileCornerRadius,
-		turdgl.Vec{X: (float64(s.win.Width()) - w) / 2, Y: 560},
+		turdgl.Vec{X: (config.WinWidth - w) / 2, Y: 560},
 	)
 	s.buttonBackground.SetStyle(turdgl.Style{Colour: common.ArenaBackgroundColour})
 
@@ -179,6 +182,14 @@ func (s *MultiplayerJoinScreen) Update() {
 		e.Update(s.win)
 		s.win.Draw(e)
 	}
+
+	mouseLoc := s.win.MouseLocation()
+	if (s.nameEntry.TextBox.Shape.IsWithin(mouseLoc) && !s.nameEntry.TextBox.IsEditing()) ||
+		(s.ipEntry.TextBox.Shape.IsWithin(mouseLoc) && !s.ipEntry.TextBox.IsEditing()) {
+
+		s.tooltip.SetPos(turdgl.Vec{X: mouseLoc.X, Y: mouseLoc.Y - s.tooltip.Shape.Height()})
+		s.win.Draw(s.tooltip)
+	}
 }
 
 // clientKey is used for indentifying the server in InitData.

screen/multiplayer_menu.go

@@ -2,6 +2,7 @@ package screen
 
 import (
 	"github.com/z-riley/go-2048-battle/common"
+	"github.com/z-riley/go-2048-battle/config"
 	"github.com/z-riley/turdgl"
 )
 
@@ -24,12 +25,12 @@ func NewMultiplayerMenuScreen(win *turdgl.Window) *MultiplayerMenuScreen {
 
 // Enter initialises the screen.
 func (s *MultiplayerMenuScreen) Enter(_ InitData) {
-	s.title = turdgl.NewText("Versus", turdgl.Vec{X: 600, Y: 260}, common.FontPathMedium).
+	s.title = turdgl.NewText("Versus", turdgl.Vec{X: config.WinWidth / 2, Y: 260}, common.FontPathMedium).
 		SetColour(common.GreyTextColour).
 		SetAlignment(turdgl.AlignCentre).
 		SetSize(100)
 
-	s.hint = turdgl.NewText("", turdgl.Vec{X: 600, Y: 375}, common.FontPathMedium).
+	s.hint = turdgl.NewText("", turdgl.Vec{X: config.WinWidth / 2, Y: 375}, common.FontPathMedium).
 		SetColour(common.GreyTextColour).
 		SetAlignment(turdgl.AlignBottomCentre).
 		SetSize(20)
@@ -45,7 +46,7 @@ func (s *MultiplayerMenuScreen) Enter(_ InitData) {
 	const w = TileSizePx * (3 + 4*TileBoundryFactor)
 	s.buttonBackground = turdgl.NewCurvedRect(
 		w, TileSizePx*(1+2*TileBoundryFactor), TileCornerRadius,
-		turdgl.Vec{X: (float64(s.win.Width()) - w) / 2, Y: 400},
+		turdgl.Vec{X: (config.WinWidth - w) / 2, Y: 400},
 	)
 	s.buttonBackground.SetStyle(turdgl.Style{Colour: common.ArenaBackgroundColour})
 

screen/screens.go

@@ -1,11 +1,8 @@
 package screen
 
 import (
-	"fmt"
 	"sync"
-	"time"
 
-	"github.com/z-riley/go-2048-battle/config"
 	"github.com/z-riley/turdgl"
 )
 
@@ -84,11 +81,7 @@ func Update() {
 		CurrentScreen().Enter(screen.data)
 
 	default:
-		now := time.Now()
 		CurrentScreen().Update()
-		if config.Debug {
-			fmt.Println("Updated in", time.Since(now))
-		}
 	}
 }
 

screen/title.go

@@ -2,14 +2,14 @@ package screen
 
 import (
 	"github.com/z-riley/go-2048-battle/common"
+	"github.com/z-riley/go-2048-battle/config"
 	"github.com/z-riley/turdgl"
 )
 
 type TitleScreen struct {
 	win *turdgl.Window
 
-	title *turdgl.Text
-
+	title            *turdgl.Text
 	hint             *turdgl.Text
 	buttonBackground *turdgl.CurvedRect
 	singleplayer     *turdgl.Button
@@ -24,12 +24,12 @@ func NewTitleScreen(win *turdgl.Window) *TitleScreen {
 
 // Enter initialises the screen.
 func (s *TitleScreen) Enter(_ InitData) {
-	s.title = turdgl.NewText("2048 Battle", turdgl.Vec{X: 600, Y: 260}, common.FontPathMedium).
+	s.title = turdgl.NewText("2048 Battle", turdgl.Vec{X: config.WinWidth / 2, Y: 260}, common.FontPathMedium).
 		SetColour(common.GreyTextColour).
 		SetAlignment(turdgl.AlignCentre).
 		SetSize(100)
 
-	s.hint = turdgl.NewText("", turdgl.Vec{X: 600, Y: 375}, common.FontPathMedium).
+	s.hint = turdgl.NewText("", turdgl.Vec{X: config.WinWidth / 2, Y: 375}, common.FontPathMedium).
 		SetColour(common.GreyTextColour).
 		SetAlignment(turdgl.AlignBottomCentre).
 		SetSize(20)
@@ -45,7 +45,7 @@ func (s *TitleScreen) Enter(_ InitData) {
 	const w = TileSizePx * (3 + 4*TileBoundryFactor)
 	s.buttonBackground = turdgl.NewCurvedRect(
 		w, TileSizePx*(1+2*TileBoundryFactor), TileCornerRadius,
-		turdgl.Vec{X: (float64(s.win.Width()) - w) / 2, Y: 400},
+		turdgl.Vec{X: (config.WinWidth - w) / 2, Y: 400},
 	)
 	s.buttonBackground.SetStyle(turdgl.Style{Colour: common.ArenaBackgroundColour})