Merge pull request 'Fix chat messages not appearing without refresh' (#7) from fix/chat-append-messages into main

chat/components/chat.templ

@@ -23,16 +23,21 @@ type Config struct {
 	StopKeyPropagation bool
 }
 
+// ChatMessage renders a single chat message. Used for appending new messages via SSE.
+templ ChatMessage(m chat.Message, cfg Config) {
+	<div class={ cfg.CSSPrefix + "-chat-msg" }>
+		<span style={ fmt.Sprintf("color:%s;font-weight:bold;", cfg.Color(m.Slot)) }>
+			{ m.Nickname + ": " }
+		</span>
+		<span>{ m.Message }</span>
+	</div>
+}
+
 templ Chat(messages []chat.Message, cfg Config) {
 	<div id={ cfg.CSSPrefix + "-chat" } class={ cfg.CSSPrefix + "-chat" }>
-		<div class={ cfg.CSSPrefix + "-chat-history" }>
+		<div id={ cfg.CSSPrefix + "-chat-history" } class={ cfg.CSSPrefix + "-chat-history" }>
 			for _, m := range messages {
-				<div class={ cfg.CSSPrefix + "-chat-msg" }>
-					<span style={ fmt.Sprintf("color:%s;font-weight:bold;", cfg.Color(m.Slot)) }>
-						{ m.Nickname + ": " }
-					</span>
-					<span>{ m.Message }</span>
-				</div>
+				@ChatMessage(m, cfg)
 			}
 		</div>
 		<div class={ cfg.CSSPrefix + "-chat-input" } data-morph-ignore>

features/c4game/handlers.go

@@ -148,8 +148,13 @@ func HandleGameEvents(store *connect4.Store, nc *nats.Conn, sm *scs.SessionManag
 					return
 				}
 			case msg := <-chatCh:
-				room.Receive(msg.Data)
-				if err := patchAll(); err != nil {
+				chatMsg, _ := room.Receive(msg.Data)
+				err := sse.PatchElementTempl(
+					chatcomponents.ChatMessage(chatMsg, chatCfg),
+					datastar.WithSelectorID("c4-chat-history"),
+					datastar.WithModeAppend(),
+				)
+				if err != nil {
 					return
 				}
 			}

features/snakegame/handlers.go

@@ -172,8 +172,13 @@ func HandleSnakeEvents(snakeStore *snake.SnakeStore, nc *nats.Conn, sm *scs.Sess
 				if msg == nil {
 					continue
 				}
-				room.Receive(msg.Data)
-				if err := patchAll(); err != nil {
+				chatMsg, _ := room.Receive(msg.Data)
+				err := sse.PatchElementTempl(
+					chatcomponents.ChatMessage(chatMsg, chatCfg),
+					datastar.WithSelectorID("snake-chat-history"),
+					datastar.WithModeAppend(),
+				)
+				if err != nil {
 					return
 				}
 			}