cedcadfe3c
Add ConnectionIndicator to Connect 4 game page (Snake already had it). Both games now patch the indicator on initial connect and every 10s heartbeat, giving users visual feedback that SSE is connected.
58 lines
1.6 KiB
Plaintext
58 lines
1.6 KiB
Plaintext
package pages
|
|
|
|
import (
|
|
"fmt"
|
|
|
|
"github.com/ryanhamamura/games/chat"
|
|
chatcomponents "github.com/ryanhamamura/games/chat/components"
|
|
"github.com/ryanhamamura/games/connect4"
|
|
"github.com/ryanhamamura/games/features/c4game/components"
|
|
sharedcomponents "github.com/ryanhamamura/games/features/common/components"
|
|
"github.com/ryanhamamura/games/features/common/layouts"
|
|
)
|
|
|
|
templ GamePage(g *connect4.Game, myColor int, messages []chat.Message, chatCfg chatcomponents.Config) {
|
|
@layouts.Base("Connect 4") {
|
|
<main
|
|
class="flex flex-col items-center gap-4 p-4"
|
|
data-signals="{chatMsg: ''}"
|
|
data-init={ fmt.Sprintf("@get('/games/%s/events',{requestCancellation:'disabled'})", g.ID) }
|
|
>
|
|
@sharedcomponents.ConnectionIndicator(0)
|
|
@GameContent(g, myColor, messages, chatCfg)
|
|
</main>
|
|
}
|
|
}
|
|
|
|
templ GameContent(g *connect4.Game, myColor int, messages []chat.Message, chatCfg chatcomponents.Config) {
|
|
<div id="game-content">
|
|
@sharedcomponents.BackToLobby()
|
|
@sharedcomponents.StealthTitle("text-3xl font-bold")
|
|
@components.PlayerInfo(g, myColor)
|
|
@components.StatusBanner(g, myColor)
|
|
<div class="c4-game-area">
|
|
@components.Board(g, myColor)
|
|
@chatcomponents.Chat(messages, chatCfg)
|
|
</div>
|
|
if g.Status == connect4.StatusWaitingForPlayer {
|
|
@components.InviteLink(g.ID)
|
|
}
|
|
</div>
|
|
}
|
|
|
|
templ JoinPage(gameID string) {
|
|
@layouts.Base("Connect 4 - Join") {
|
|
@sharedcomponents.GameJoinPrompt(
|
|
"/login?return_url=/games/"+gameID,
|
|
"/register?return_url=/games/"+gameID,
|
|
"/games/"+gameID,
|
|
)
|
|
}
|
|
}
|
|
|
|
templ NicknamePage(gameID string) {
|
|
@layouts.Base("Connect 4 - Join") {
|
|
@sharedcomponents.NicknamePrompt("/games/" + gameID + "/join")
|
|
}
|
|
}
|