refactor: extract standalone chat package from game-specific handlers
Create chat/ package with Message type, Room (NATS pub/sub + buffer), DB persistence helpers, and a unified templ component parameterized by Config (CSS prefix, post URL, color function, key propagation). Both c4game and snakegame now use chat.Room for message management and chatcomponents.Chat for rendering, eliminating the duplicated ChatMessage types, chat templ components, chatAutoScroll scripts, color functions, and inline buffer management.
This commit is contained in:
@@ -1,66 +0,0 @@
|
||||
package components
|
||||
|
||||
import (
|
||||
"fmt"
|
||||
|
||||
"github.com/ryanhamamura/c4/snake"
|
||||
"github.com/starfederation/datastar-go/datastar"
|
||||
)
|
||||
|
||||
type ChatMessage struct {
|
||||
Nickname string `json:"nickname"`
|
||||
Slot int `json:"slot"`
|
||||
Message string `json:"message"`
|
||||
Time int64 `json:"time"`
|
||||
}
|
||||
|
||||
templ Chat(messages []ChatMessage, gameID string) {
|
||||
<div id="snake-chat" class="snake-chat">
|
||||
<div class="snake-chat-history">
|
||||
for _, m := range messages {
|
||||
<div class="snake-chat-msg">
|
||||
<span style={ fmt.Sprintf("color:%s;font-weight:bold;", chatColor(m.Slot)) }>
|
||||
{ m.Nickname + ": " }
|
||||
</span>
|
||||
<span>{ m.Message }</span>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
<div class="snake-chat-input" data-morph-ignore>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Chat..."
|
||||
autocomplete="off"
|
||||
data-bind="chatMsg"
|
||||
data-on:keydown.stop=""
|
||||
data-on:keydown.key_enter={ datastar.PostSSE("/snake/%s/chat", gameID) }
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
data-on:click={ datastar.PostSSE("/snake/%s/chat", gameID) }
|
||||
>
|
||||
Send
|
||||
</button>
|
||||
</div>
|
||||
@chatAutoScroll()
|
||||
</div>
|
||||
}
|
||||
|
||||
templ chatAutoScroll() {
|
||||
<script>
|
||||
(function(){
|
||||
var el = document.querySelector('.snake-chat-history');
|
||||
if (!el) return;
|
||||
el.scrollTop = el.scrollHeight;
|
||||
new MutationObserver(function(){ el.scrollTop = el.scrollHeight; })
|
||||
.observe(el, {childList:true, subtree:true});
|
||||
})();
|
||||
</script>
|
||||
}
|
||||
|
||||
func chatColor(slot int) string {
|
||||
if slot >= 0 && slot < len(snake.SnakeColors) {
|
||||
return snake.SnakeColors[slot]
|
||||
}
|
||||
return "#666"
|
||||
}
|
||||
Reference in New Issue
Block a user