chore: gitignore generated _templ.go files, track .templ sources
Generated _templ.go files are deterministic output from .templ sources, same as output.css from input.css. Remove them from version control to reduce diff noise and merge conflicts. Add build:templ and live:templ tasks to the Taskfile so generation happens as part of the build.
This commit is contained in:
69
features/c4game/components/chat.templ
Normal file
69
features/c4game/components/chat.templ
Normal file
@@ -0,0 +1,69 @@
|
||||
package components
|
||||
|
||||
import (
|
||||
"fmt"
|
||||
|
||||
"github.com/starfederation/datastar-go/datastar"
|
||||
)
|
||||
|
||||
type ChatMessage struct {
|
||||
Nickname string `json:"nickname"`
|
||||
Color int `json:"color"`
|
||||
Message string `json:"message"`
|
||||
Time int64 `json:"time"`
|
||||
}
|
||||
|
||||
var chatColors = map[int]string{
|
||||
1: "#4a2a3a",
|
||||
2: "#2a4545",
|
||||
}
|
||||
|
||||
templ Chat(messages []ChatMessage, gameID string) {
|
||||
<div id="c4-chat" class="c4-chat">
|
||||
<div class="c4-chat-history">
|
||||
for _, m := range messages {
|
||||
<div class="c4-chat-msg">
|
||||
<span style={ fmt.Sprintf("color:%s;font-weight:bold;", chatColor(m.Color)) }>
|
||||
{ m.Nickname }:
|
||||
</span>
|
||||
<span>{ m.Message }</span>
|
||||
</div>
|
||||
}
|
||||
@chatAutoScroll()
|
||||
</div>
|
||||
<div class="c4-chat-input" data-morph-ignore>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Chat..."
|
||||
autocomplete="off"
|
||||
data-bind="chatMsg"
|
||||
data-on:keydown.enter={ datastar.PostSSE("/games/%s/chat", gameID) }
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
data-on:click={ datastar.PostSSE("/games/%s/chat", gameID) }
|
||||
>
|
||||
Send
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
templ chatAutoScroll() {
|
||||
<script>
|
||||
(function(){
|
||||
var el = document.querySelector('.c4-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(color int) string {
|
||||
if c, ok := chatColors[color]; ok {
|
||||
return c
|
||||
}
|
||||
return "#666"
|
||||
}
|
||||
Reference in New Issue
Block a user