All checks were successful
Deploy c4 / deploy (push) Successful in 40s
Replace "Game Lobby", "Connect 4", and "Snake" headings with colored circles (●●●●) and tildes (~~~~) so the UI is less obviously a game at a glance. Also neutralize the lobby description text and shorten the back link.
154 lines
4.1 KiB
Go
154 lines
4.1 KiB
Go
package ui
|
|
|
|
import (
|
|
"github.com/ryanhamamura/c4/snake"
|
|
"github.com/ryanhamamura/via/h"
|
|
)
|
|
|
|
type LobbyProps struct {
|
|
NicknameBind h.H
|
|
CreateGameKeyDown h.H
|
|
CreateGameClick h.H
|
|
IsLoggedIn bool
|
|
Username string
|
|
LogoutClick h.H
|
|
UserGames []GameListItem
|
|
DeleteGameClick func(id string) h.H
|
|
ActiveTab string
|
|
TabClickConnect4 h.H
|
|
TabClickSnake h.H
|
|
SnakeNicknameBind h.H
|
|
SnakeSoloClicks []h.H
|
|
SnakeMultiClicks []h.H
|
|
ActiveSnakeGames []*snake.SnakeGame
|
|
SelectedSpeedIndex int
|
|
SpeedSelectClicks []h.H
|
|
}
|
|
|
|
func BackToLobby() h.H {
|
|
return h.A(h.Class("link text-sm opacity-70"), h.Href("/"), h.Text("← Back"))
|
|
}
|
|
|
|
func StealthTitle(class string) h.H {
|
|
return h.Span(h.Class(class),
|
|
h.Span(h.Style("color:#4a2a3a"), h.Text("●")),
|
|
h.Span(h.Style("color:#2a4545"), h.Text("●")),
|
|
h.Span(h.Style("color:#4a2a3a"), h.Text("●")),
|
|
h.Span(h.Style("color:#2a4545"), h.Text("●")),
|
|
)
|
|
}
|
|
|
|
func LobbyView(p LobbyProps) h.H {
|
|
var authSection h.H
|
|
if p.IsLoggedIn {
|
|
authSection = AuthHeader(p.Username, p.LogoutClick)
|
|
} else {
|
|
authSection = GuestBanner()
|
|
}
|
|
|
|
connect4Class := "tab"
|
|
snakeClass := "tab"
|
|
if p.ActiveTab == "snake" {
|
|
snakeClass += " tab-active"
|
|
} else {
|
|
connect4Class += " tab-active"
|
|
}
|
|
|
|
var tabContent h.H
|
|
if p.ActiveTab == "snake" {
|
|
tabContent = SnakeLobbyTab(p.SnakeNicknameBind, p.SnakeSoloClicks, p.SnakeMultiClicks, p.ActiveSnakeGames, p.SelectedSpeedIndex, p.SpeedSelectClicks)
|
|
} else {
|
|
tabContent = connect4LobbyContent(p)
|
|
}
|
|
|
|
return h.Main(h.Class("max-w-md mx-auto mt-8 text-center"),
|
|
authSection,
|
|
h.H1(h.Class("text-3xl font-bold mb-4"), StealthTitle("")),
|
|
h.Div(h.Class("tabs tabs-box mb-6 justify-center"),
|
|
h.Button(h.Class(connect4Class), h.Type("button"), StealthTitle(""), p.TabClickConnect4),
|
|
h.Button(h.Class(snakeClass), h.Type("button"), h.Text("~~~~"), p.TabClickSnake),
|
|
),
|
|
tabContent,
|
|
)
|
|
}
|
|
|
|
func connect4LobbyContent(p LobbyProps) h.H {
|
|
return h.Div(
|
|
h.P(h.Class("mb-4"), h.Text("Start a new session")),
|
|
h.Form(
|
|
h.FieldSet(h.Class("fieldset"),
|
|
h.Label(h.Class("label"), h.Text("Your Nickname"), h.Attr("for", "nickname")),
|
|
h.Input(
|
|
h.Class("input input-bordered w-full"),
|
|
h.ID("nickname"),
|
|
h.Type("text"),
|
|
h.Placeholder("Enter your nickname"),
|
|
p.NicknameBind,
|
|
h.Attr("required"),
|
|
p.CreateGameKeyDown,
|
|
),
|
|
),
|
|
h.Button(
|
|
h.Class("btn btn-primary w-full"),
|
|
h.Type("button"),
|
|
h.Text("Create Game"),
|
|
p.CreateGameClick,
|
|
),
|
|
),
|
|
GameList(p.UserGames, p.DeleteGameClick),
|
|
)
|
|
}
|
|
|
|
func NicknamePrompt(nicknameBind, setNicknameKeyDown, setNicknameClick h.H) h.H {
|
|
return h.Main(h.Class("max-w-sm mx-auto mt-8 text-center"),
|
|
h.H1(h.Class("text-3xl font-bold"), h.Text("Join Game")),
|
|
h.P(h.Class("mb-4"), h.Text("Enter your nickname to join the game.")),
|
|
h.Form(
|
|
h.FieldSet(h.Class("fieldset"),
|
|
h.Label(h.Class("label"), h.Text("Your Nickname"), h.Attr("for", "nickname")),
|
|
h.Input(
|
|
h.Class("input input-bordered w-full"),
|
|
h.ID("nickname"),
|
|
h.Type("text"),
|
|
h.Placeholder("Enter your nickname"),
|
|
nicknameBind,
|
|
h.Attr("required"),
|
|
h.Attr("autofocus"),
|
|
setNicknameKeyDown,
|
|
),
|
|
),
|
|
h.Button(
|
|
h.Class("btn btn-primary w-full"),
|
|
h.Type("button"),
|
|
h.Text("Join"),
|
|
setNicknameClick,
|
|
),
|
|
),
|
|
)
|
|
}
|
|
|
|
func GameJoinPrompt(loginClick, guestClick, registerClick h.H) h.H {
|
|
return h.Main(h.Class("max-w-sm mx-auto mt-8 text-center"),
|
|
h.H1(h.Class("text-3xl font-bold"), h.Text("Join Game")),
|
|
h.P(h.Class("mb-4"), h.Text("Log in to track your game history, or continue as a guest.")),
|
|
h.Div(h.Class("flex flex-col gap-2 my-4"),
|
|
h.Button(
|
|
h.Class("btn btn-primary w-full"),
|
|
h.Type("button"),
|
|
h.Text("Login"),
|
|
loginClick,
|
|
),
|
|
h.Button(
|
|
h.Class("btn btn-secondary w-full"),
|
|
h.Type("button"),
|
|
h.Text("Continue as Guest"),
|
|
guestClick,
|
|
),
|
|
),
|
|
h.P(h.Class("text-sm opacity-60"),
|
|
h.Text("Don't have an account? "),
|
|
h.A(h.Class("link"), h.Href("#"), h.Text("Register"), registerClick),
|
|
),
|
|
)
|
|
}
|