chat/components/chat.templ

@@ -23,16 +23,21 @@ type Config struct {
 	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" }>
 		<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 id={ cfg.CSSPrefix + "-chat-history" } class={ cfg.CSSPrefix + "-chat-history" }>
+			for _, m := range messages {
+				@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)
+				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
 				}
 			}

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)
+				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
 				}
 			}