f71acfc73e
PostSSE requires a constant format string; pass "%s" with the URL as an argument instead of passing the URL directly.
75 lines
2.1 KiB
Plaintext
75 lines
2.1 KiB
Plaintext
package components
|
|
|
|
import (
|
|
"fmt"
|
|
|
|
"github.com/ryanhamamura/c4/chat"
|
|
"github.com/starfederation/datastar-go/datastar"
|
|
)
|
|
|
|
// ColorFunc resolves a player slot to a CSS color string.
|
|
type ColorFunc func(slot int) string
|
|
|
|
// Config holds the game-specific settings for rendering a chat component.
|
|
type Config struct {
|
|
// CSSPrefix is used for element IDs and CSS classes (e.g. "c4" or "snake").
|
|
CSSPrefix string
|
|
// PostURL is the URL to POST chat messages to (e.g. "/games/{id}/chat").
|
|
PostURL string
|
|
// Color resolves a player slot to a CSS color string.
|
|
Color ColorFunc
|
|
// StopKeyPropagation adds data-on:keydown.stop="" to the input to prevent
|
|
// key events from propagating (needed for snake to avoid steering while typing).
|
|
StopKeyPropagation bool
|
|
}
|
|
|
|
templ Chat(messages []chat.Message, cfg Config) {
|
|
<div id={ cfg.CSSPrefix + "-chat" } class={ cfg.CSSPrefix + "-chat" }>
|
|
<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>
|
|
}
|
|
</div>
|
|
<div class={ cfg.CSSPrefix + "-chat-input" } data-morph-ignore>
|
|
if cfg.StopKeyPropagation {
|
|
<input
|
|
type="text"
|
|
placeholder="Chat..."
|
|
autocomplete="off"
|
|
data-bind="chatMsg"
|
|
data-on:keydown.stop=""
|
|
data-on:keydown.key_enter={ datastar.PostSSE("%s", cfg.PostURL) }
|
|
/>
|
|
} else {
|
|
<input
|
|
type="text"
|
|
placeholder="Chat..."
|
|
autocomplete="off"
|
|
data-bind="chatMsg"
|
|
data-on:keydown.enter={ datastar.PostSSE("%s", cfg.PostURL) }
|
|
/>
|
|
}
|
|
<button
|
|
type="button"
|
|
data-on:click={ datastar.PostSSE("%s", cfg.PostURL) }
|
|
>
|
|
Send
|
|
</button>
|
|
</div>
|
|
@chatAutoScroll(cfg.CSSPrefix)
|
|
</div>
|
|
}
|
|
|
|
script chatAutoScroll(cssPrefix string) {
|
|
var el = document.querySelector('.' + cssPrefix + '-chat-history');
|
|
if (!el) return;
|
|
el.scrollTop = el.scrollHeight;
|
|
new MutationObserver(function(){ el.scrollTop = el.scrollHeight; })
|
|
.observe(el, {childList:true, subtree:true});
|
|
}
|