c541ba56d4
All checks were successful
Deploy c4 / deploy (push) Successful in 42s
Shrink board cells to 36px with tighter gaps on <768px screens so the board fits on 375px phones. Add DataIgnoreMorph to the C4 chat input so typing isn't disrupted when new messages arrive.
65 lines
1.5 KiB
Go
65 lines
1.5 KiB
Go
package ui
|
|
|
|
import (
|
|
"fmt"
|
|
|
|
"github.com/ryanhamamura/via/h"
|
|
)
|
|
|
|
type C4ChatMessage struct {
|
|
Nickname string `json:"nickname"`
|
|
Color int `json:"color"` // 1=Red, 2=Yellow
|
|
Message string `json:"message"`
|
|
Time int64 `json:"time"`
|
|
}
|
|
|
|
var c4ChatColors = map[int]string{
|
|
1: "#4a2a3a",
|
|
2: "#2a4545",
|
|
}
|
|
|
|
func C4Chat(messages []C4ChatMessage, msgBind, sendClick, sendKeyDown h.H) h.H {
|
|
var msgEls []h.H
|
|
for _, m := range messages {
|
|
color := "#666"
|
|
if c, ok := c4ChatColors[m.Color]; ok {
|
|
color = c
|
|
}
|
|
msgEls = append(msgEls, h.Div(h.Class("c4-chat-msg"),
|
|
h.Span(
|
|
h.Attr("style", fmt.Sprintf("color:%s;font-weight:bold;", color)),
|
|
h.Text(m.Nickname+": "),
|
|
),
|
|
h.Span(h.Text(m.Message)),
|
|
))
|
|
}
|
|
|
|
autoScroll := h.Script(h.Text(`
|
|
(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});
|
|
})();
|
|
`))
|
|
|
|
historyAttrs := []h.H{h.Class("c4-chat-history")}
|
|
historyAttrs = append(historyAttrs, msgEls...)
|
|
historyAttrs = append(historyAttrs, autoScroll)
|
|
|
|
return h.Div(h.Class("c4-chat"),
|
|
h.Div(historyAttrs...),
|
|
h.Div(h.Class("c4-chat-input"), h.DataIgnoreMorph(),
|
|
h.Input(
|
|
h.Type("text"),
|
|
h.Attr("placeholder", "Chat..."),
|
|
h.Attr("autocomplete", "off"),
|
|
msgBind,
|
|
sendKeyDown,
|
|
),
|
|
h.Button(h.Type("button"), h.Text("Send"), sendClick),
|
|
),
|
|
)
|
|
}
|