feat: add connection status indicator with SSE heartbeat
All checks were successful
CI / Deploy / test (pull_request) Successful in 14s
CI / Deploy / lint (pull_request) Successful in 25s
CI / Deploy / deploy (pull_request) Has been skipped

- Add ConnectionIndicator component showing green/red dot
- Send lastPing signal every 15 seconds via SSE
- Indicator turns red if no ping received in 20 seconds
- Gives users confidence the live connection is active
This commit is contained in:
Ryan Hamamura
2026-03-03 09:53:20 -10:00
parent ffbff8cca5
commit da82f31d46
5 changed files with 51 additions and 4 deletions

View File

@@ -15,9 +15,10 @@ templ GamePage(g *connect4.Game, myColor int, messages []chat.Message, chatCfg c
@layouts.Base("Connect 4") {
<main
class="flex flex-col items-center gap-4 p-4"
data-signals="{chatMsg: ''}"
data-signals="{chatMsg: '', lastPing: 0}"
data-init={ fmt.Sprintf("@get('/games/%s/events',{requestCancellation:'disabled'})", g.ID) }
>
@sharedcomponents.ConnectionIndicator()
@GameContent(g, myColor, messages, chatCfg)
</main>
}