2bea5bb489
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.
70 lines
1.4 KiB
Plaintext
70 lines
1.4 KiB
Plaintext
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"
|
|
}
|