fix: append chat messages instead of re-rendering entire game
Previously patchAll() re-rendered the full GameContent on every chat message, which was inefficient and could cause UI glitches. Now we append just the new ChatMessage to the chat history element.
This commit is contained in:
@@ -23,10 +23,8 @@ type Config struct {
|
|||||||
StopKeyPropagation bool
|
StopKeyPropagation bool
|
||||||
}
|
}
|
||||||
|
|
||||||
templ Chat(messages []chat.Message, cfg Config) {
|
// ChatMessage renders a single chat message. Used for appending new messages via SSE.
|
||||||
<div id={ cfg.CSSPrefix + "-chat" } class={ cfg.CSSPrefix + "-chat" }>
|
templ ChatMessage(m chat.Message, cfg Config) {
|
||||||
<div class={ cfg.CSSPrefix + "-chat-history" }>
|
|
||||||
for _, m := range messages {
|
|
||||||
<div class={ cfg.CSSPrefix + "-chat-msg" }>
|
<div class={ cfg.CSSPrefix + "-chat-msg" }>
|
||||||
<span style={ fmt.Sprintf("color:%s;font-weight:bold;", cfg.Color(m.Slot)) }>
|
<span style={ fmt.Sprintf("color:%s;font-weight:bold;", cfg.Color(m.Slot)) }>
|
||||||
{ m.Nickname + ": " }
|
{ m.Nickname + ": " }
|
||||||
@@ -34,6 +32,13 @@ templ Chat(messages []chat.Message, cfg Config) {
|
|||||||
<span>{ m.Message }</span>
|
<span>{ m.Message }</span>
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
|
|
||||||
|
templ Chat(messages []chat.Message, cfg Config) {
|
||||||
|
<div id={ cfg.CSSPrefix + "-chat" } class={ cfg.CSSPrefix + "-chat" }>
|
||||||
|
<div id={ cfg.CSSPrefix + "-chat-history" } class={ cfg.CSSPrefix + "-chat-history" }>
|
||||||
|
for _, m := range messages {
|
||||||
|
@ChatMessage(m, cfg)
|
||||||
|
}
|
||||||
</div>
|
</div>
|
||||||
<div class={ cfg.CSSPrefix + "-chat-input" } data-morph-ignore>
|
<div class={ cfg.CSSPrefix + "-chat-input" } data-morph-ignore>
|
||||||
if cfg.StopKeyPropagation {
|
if cfg.StopKeyPropagation {
|
||||||
|
|||||||
@@ -148,8 +148,13 @@ func HandleGameEvents(store *connect4.Store, nc *nats.Conn, sm *scs.SessionManag
|
|||||||
return
|
return
|
||||||
}
|
}
|
||||||
case msg := <-chatCh:
|
case msg := <-chatCh:
|
||||||
room.Receive(msg.Data)
|
chatMsg, _ := room.Receive(msg.Data)
|
||||||
if err := patchAll(); err != nil {
|
err := sse.PatchElementTempl(
|
||||||
|
chatcomponents.ChatMessage(chatMsg, chatCfg),
|
||||||
|
datastar.WithSelectorID("c4-chat-history"),
|
||||||
|
datastar.WithModeAppend(),
|
||||||
|
)
|
||||||
|
if err != nil {
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -172,8 +172,13 @@ func HandleSnakeEvents(snakeStore *snake.SnakeStore, nc *nats.Conn, sm *scs.Sess
|
|||||||
if msg == nil {
|
if msg == nil {
|
||||||
continue
|
continue
|
||||||
}
|
}
|
||||||
room.Receive(msg.Data)
|
chatMsg, _ := room.Receive(msg.Data)
|
||||||
if err := patchAll(); err != nil {
|
err := sse.PatchElementTempl(
|
||||||
|
chatcomponents.ChatMessage(chatMsg, chatCfg),
|
||||||
|
datastar.WithSelectorID("snake-chat-history"),
|
||||||
|
datastar.WithModeAppend(),
|
||||||
|
)
|
||||||
|
if err != nil {
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user