feat: stealth mode — replace game-related text with discrete symbols
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.
This commit is contained in:
Ryan Hamamura
2026-02-13 09:22:07 -10:00
parent 9799387a32
commit e85271ab29
4 changed files with 2011 additions and 9 deletions

View File

@@ -3,7 +3,7 @@
@source not "./daisyui{,*}.mjs"; @source not "./daisyui{,*}.mjs";
@plugin "./daisyui.mjs"; @plugin "./daisyui.mjs";
@plugin "./daisyui-theme.mjs" { @plugin "./daisyui-theme.mjs" {
name: "connect4"; name: "stealth";
default: true; default: true;
color-scheme: light; color-scheme: light;

File diff suppressed because one or more lines are too long

View File

@@ -483,7 +483,7 @@ func main() {
var content []h.H var content []h.H
content = append(content, content = append(content,
ui.BackToLobby(), ui.BackToLobby(),
h.H1(h.Class("text-3xl font-bold"), h.Text("Connect 4")), ui.StealthTitle("text-3xl font-bold"),
ui.PlayerInfo(g, myColor), ui.PlayerInfo(g, myColor),
ui.StatusBanner(g, myColor, createRematch.OnClick()), ui.StatusBanner(g, myColor, createRematch.OnClick()),
ui.BoardComponent(g, columnClick, myColor), ui.BoardComponent(g, columnClick, myColor),
@@ -674,7 +674,7 @@ func main() {
var content []h.H var content []h.H
content = append(content, content = append(content,
ui.BackToLobby(), ui.BackToLobby(),
h.H1(h.Class("text-3xl font-bold"), h.Text("Snake")), h.H1(h.Class("text-3xl font-bold"), h.Text("~~~~")),
ui.SnakePlayerList(sg, mySlot), ui.SnakePlayerList(sg, mySlot),
ui.SnakeStatusBanner(sg, mySlot, createRematch.OnClick()), ui.SnakeStatusBanner(sg, mySlot, createRematch.OnClick()),
) )

View File

@@ -26,7 +26,16 @@ type LobbyProps struct {
} }
func BackToLobby() h.H { func BackToLobby() h.H {
return h.A(h.Class("link text-sm opacity-70"), h.Href("/"), h.Text("← Back to Lobby")) 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 { func LobbyView(p LobbyProps) h.H {
@@ -54,10 +63,10 @@ func LobbyView(p LobbyProps) h.H {
return h.Main(h.Class("max-w-md mx-auto mt-8 text-center"), return h.Main(h.Class("max-w-md mx-auto mt-8 text-center"),
authSection, authSection,
h.H1(h.Class("text-3xl font-bold mb-4"), h.Text("Game Lobby")), h.H1(h.Class("text-3xl font-bold mb-4"), StealthTitle("")),
h.Div(h.Class("tabs tabs-box mb-6 justify-center"), h.Div(h.Class("tabs tabs-box mb-6 justify-center"),
h.Button(h.Class(connect4Class), h.Type("button"), h.Text("Connect 4"), p.TabClickConnect4), h.Button(h.Class(connect4Class), h.Type("button"), StealthTitle(""), p.TabClickConnect4),
h.Button(h.Class(snakeClass), h.Type("button"), h.Text("Snake"), p.TabClickSnake), h.Button(h.Class(snakeClass), h.Type("button"), h.Text("~~~~"), p.TabClickSnake),
), ),
tabContent, tabContent,
) )
@@ -65,7 +74,7 @@ func LobbyView(p LobbyProps) h.H {
func connect4LobbyContent(p LobbyProps) h.H { func connect4LobbyContent(p LobbyProps) h.H {
return h.Div( return h.Div(
h.P(h.Class("mb-4"), h.Text("Challenge a friend to a game of Connect 4!")), h.P(h.Class("mb-4"), h.Text("Start a new session")),
h.Form( h.Form(
h.FieldSet(h.Class("fieldset"), h.FieldSet(h.Class("fieldset"),
h.Label(h.Class("label"), h.Text("Your Nickname"), h.Attr("for", "nickname")), h.Label(h.Class("label"), h.Text("Your Nickname"), h.Attr("for", "nickname")),