Redesign tutorial

This commit is contained in:
Trevor Slocum 2024-09-30 01:58:10 -07:00
parent 28feb8920d
commit f61ba9b08f
4 changed files with 45 additions and 55 deletions

View file

@ -106,6 +106,9 @@ msgstr ""
msgid "Date"
msgstr ""
msgid "Dismiss"
msgstr ""
msgid "Donate:"
msgstr ""
@ -373,10 +376,7 @@ msgstr ""
msgid "Tabula"
msgstr ""
msgid "Tap to dismiss this pop-up."
msgstr ""
msgid "This concludes the tutorial. To share feedback and chat with other players visit %s"
msgid "This concludes the tutorial. Learn how to play backgammon at bgammon.org/faq and share your feedback at bgammon.org/community"
msgstr ""
msgid "This screen lists the matches that are currently available. A few bots are always available to play against. You can also spectate ongoing public matches."
@ -412,7 +412,7 @@ msgstr ""
msgid "Warning: Received unrecognized event from server."
msgstr ""
msgid "Welcome to the guided tutorial. Click anywhere outside of this message box to close the tutorial. Click anywhere inside of this message box to view the next page."
msgid "Welcome to the guided tutorial. This program (Boxcars) is the official bgammon.org client. bgammon.org is a free and open source backgammon server."
msgstr ""
msgid "Welcome, %s. There are %d clients playing %d matches."

View file

@ -7,7 +7,6 @@ import (
"code.rocket9labs.com/tslocum/etk"
"code.rocket9labs.com/tslocum/gotext"
"github.com/hajimehoshi/ebiten/v2"
)
type tutorialWidget struct {
@ -26,11 +25,15 @@ func NewTutorialWidget() *tutorialWidget {
w.Frame.AddChild(w.grid)
w.setPage(0)
return w
}
func (w *tutorialWidget) hide() {
func (w *tutorialWidget) nextPage() error {
w.setPage(w.page + 1)
return nil
}
func (w *tutorialWidget) hide() error {
game.lobby.showCreateGame = false
game.setRoot(listGamesFrame)
etk.SetFocus(nil)
@ -38,18 +41,7 @@ func (w *tutorialWidget) hide() {
game.board.gameState.PlayerNumber = 0
game.savedUsername = "a"
w.grid.Clear()
}
func (w *tutorialWidget) dialogText(message string) *tutorialDialog {
t := etk.NewText(message)
t.SetPadding(10)
t.SetBackground(bufferBackgroundColor)
return &tutorialDialog{
Text: t,
handler: func() {
w.setPage(w.page + 1)
},
}
return nil
}
func (w *tutorialWidget) newTutorialBox() *tutorialBox {
@ -59,20 +51,44 @@ func (w *tutorialWidget) newTutorialBox() *tutorialBox {
}
}
func (w *tutorialWidget) newDialog(title string, message string) *Dialog {
titleLabel := resizeText(title)
titleLabel.SetHorizontal(etk.AlignCenter)
titleLabel.SetVertical(etk.AlignCenter)
messageLabel := etk.NewText(message)
grid := etk.NewGrid()
grid.SetBackground(color.RGBA{40, 24, 9, 255})
grid.SetColumnSizes(20, -1, -1, 20)
grid.SetRowSizes(72, 20, -1, etk.Scale(20), etk.Scale(baseButtonHeight))
grid.AddChildAt(titleLabel, 1, 0, 2, 1)
grid.AddChildAt(messageLabel, 1, 2, 2, 1)
grid.AddChildAt(etk.NewBox(), 1, 3, 1, 1)
columns := 2
if w.page == 5 {
columns = 4
}
grid.AddChildAt(etk.NewButton(gotext.Get("Dismiss"), w.hide), 0, 4, columns, 1)
if w.page < 5 {
grid.AddChildAt(etk.NewButton(gotext.Get("Next"), w.nextPage), 2, 4, 2, 1)
}
return &Dialog{grid}
}
func (w *tutorialWidget) setPage(page int) {
if time.Since(w.lastClick) < 250*time.Millisecond {
return
}
w.lastClick = time.Now()
w.page = page
w.grid.Clear()
var title string
var message string
switch w.page {
case 0:
title = gotext.Get("Tutorial")
message = gotext.Get("Welcome to the guided tutorial. Click anywhere outside of this message box to close the tutorial. Click anywhere inside of this message box to view the next page.")
message = gotext.Get("Welcome to the guided tutorial. This program (Boxcars) is the official bgammon.org client. bgammon.org is a free and open source backgammon server.")
case 1:
title = gotext.Get("Matches List")
message = gotext.Get("This screen lists the matches that are currently available. A few bots are always available to play against. You can also spectate ongoing public matches.")
@ -98,49 +114,23 @@ func (w *tutorialWidget) setPage(page int) {
message = gotext.Get("Double click a checker to bear it off. Bear off all 15 checkers to win.")
case 5:
title = gotext.Get("Good Luck, Have Fun")
message = gotext.Get("This concludes the tutorial. To share feedback and chat with other players visit %s", "bgammon.org/community")
message = gotext.Get("This concludes the tutorial. Learn how to play backgammon at bgammon.org/faq and share your feedback at bgammon.org/community")
case 6:
w.hide()
return
}
message = title + "\n\n" + message
w.grid.SetColumnSizes(-1, -1, -1, -1, -1, -1)
w.grid.SetRowSizes(-1, -1, -1, -1)
w.grid.Clear()
w.grid.AddChildAt(w.newTutorialBox(), 0, 0, 6, 1)
w.grid.AddChildAt(w.newTutorialBox(), 0, 1, 1, 2)
w.grid.AddChildAt(w.dialogText(message), 1, 1, 4, 2)
w.grid.AddChildAt(w.newDialog(title, message), 1, 1, 4, 2)
w.grid.AddChildAt(w.newTutorialBox(), 5, 1, 1, 2)
w.grid.AddChildAt(w.newTutorialBox(), 0, 3, 6, 1)
}
type tutorialDialog struct {
*etk.Text
handler func()
}
func (d *tutorialDialog) Draw(screen *ebiten.Image) error {
r := d.Rect()
borderColor := color.RGBA{0, 0, 0, 255}
const borderSize = 2
screen.SubImage(image.Rect(r.Min.X, r.Min.Y-borderSize, r.Min.X-borderSize, r.Max.Y)).(*ebiten.Image).Fill(borderColor)
screen.SubImage(image.Rect(r.Min.X-borderSize, r.Min.Y, r.Max.X+borderSize, r.Min.Y-borderSize)).(*ebiten.Image).Fill(borderColor)
screen.SubImage(image.Rect(r.Max.X+borderSize, r.Min.Y, r.Max.X, r.Max.Y+borderSize)).(*ebiten.Image).Fill(borderColor)
screen.SubImage(image.Rect(r.Min.X-borderSize, r.Max.Y+borderSize, r.Max.X, r.Max.Y)).(*ebiten.Image).Fill(borderColor)
return d.Text.Draw(screen)
}
func (d *tutorialDialog) HandleMouse(cursor image.Point, pressed bool, clicked bool) (handled bool, err error) {
if !cursor.In(d.Rect()) || !clicked {
return false, nil
}
d.handler()
return true, nil
}
type tutorialBox struct {
*etk.Box
handler func()
handler func() error
}
func (b *tutorialBox) HandleMouse(cursor image.Point, pressed bool, clicked bool) (handled bool, err error) {

2
go.mod
View file

@ -11,7 +11,7 @@ require (
code.rocket9labs.com/tslocum/gotext v0.0.0-20240728181248-46f419ff143b
code.rocket9labs.com/tslocum/tabula v0.0.0-20240820025521-91065b63f1be
github.com/coder/websocket v1.8.12
github.com/hajimehoshi/ebiten/v2 v2.8.0-rc.1
github.com/hajimehoshi/ebiten/v2 v2.8.0
github.com/llgcode/draw2d v0.0.0-20240627062922-0ed1ff131195
github.com/nfnt/resize v0.0.0-20180221191011-83c6a9932646
golang.org/x/image v0.20.0

4
go.sum
View file

@ -55,8 +55,8 @@ github.com/gorilla/mux v1.8.1 h1:TuBL49tXwgrFYWhqrNgrUNEY92u81SPhu7sTdzQEiWY=
github.com/gorilla/mux v1.8.1/go.mod h1:AKf9I4AEqPTmMytcMc0KkNouC66V3BtZ4qD5fmWSiMQ=
github.com/hajimehoshi/bitmapfont/v3 v3.2.0 h1:0DISQM/rseKIJhdF29AkhvdzIULqNIIlXAGWit4ez1Q=
github.com/hajimehoshi/bitmapfont/v3 v3.2.0/go.mod h1:8gLqGatKVu0pwcNCJguW3Igg9WQqVXF0zg/RvrGQWyg=
github.com/hajimehoshi/ebiten/v2 v2.8.0-rc.1 h1:1AX4fS9WqpReEYOMcEMlnpeY1J+GJqPeOM07qrApyU8=
github.com/hajimehoshi/ebiten/v2 v2.8.0-rc.1/go.mod h1:xshjiIcF+ClTrY5OY/E7Aa5EUXHtwmuddhS9s/6to3k=
github.com/hajimehoshi/ebiten/v2 v2.8.0 h1:CZF2PAksTG7vee9mu1Ok9QHqPyic0rTmIQvepYjs66A=
github.com/hajimehoshi/ebiten/v2 v2.8.0/go.mod h1:32c6GXjzxA/h2CLLNMjWv5dVSNkTnn7NASZm0nXC/rA=
github.com/huandu/xstrings v1.2.0/go.mod h1:DvyZB1rfVYsBIigL8HwpZgxHwXozlTgGqn63UyNX5k4=
github.com/huandu/xstrings v1.5.0 h1:2ag3IFq9ZDANvthTwTiqSSZLjDc+BedvHPAp5tJy2TI=
github.com/huandu/xstrings v1.5.0/go.mod h1:y5/lhBue+AyNmUVz9RLU9xbLR0o4KIIExikq4ovT0aE=