67 lines
No EOL
3.1 KiB
HTML
67 lines
No EOL
3.1 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Insert title here</title>
|
|
<link rel="stylesheet" href="https://minecaptain.com/venture/css/all.css">
|
|
<script src="https://minecaptain.com/venture/js?js=vui-base.js|vui-elements.js|vui-ripple-buttons.js|vui-forms.js|vui-modals.js"></script>
|
|
</head>
|
|
<body>
|
|
|
|
<div id="body">
|
|
<div id="messages">
|
|
|
|
|
|
</div>
|
|
<vui-input id="input" label="Message"></vui-input>
|
|
</div>
|
|
|
|
<script>
|
|
|
|
var box = document.querySelector("#messages")
|
|
|
|
function addMessage(name, msg) {
|
|
let lastSender = box.lastElementChild?.getAttribute('sender')
|
|
if (lastSender == name) {
|
|
box.lastElementChild.insertAdjacentHTML('beforeend', `
|
|
<div style="width: 100%; border-bottom: 1px solid var(--border-color); margin-block: 10px;"></div>
|
|
<div style="margin-inline: 30px;display:flex;">
|
|
<div>${msg}</div>
|
|
<vui-popover-item style="display: block;margin: 0;margin-left: auto;" target="1747779141" data-endpoint="<span>This message was sent <vui-timestamp hint='sent-ago'>${(new Date()).getTime()}</vui-timestamp></span>"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 97.24 97.24" style="fill: none; stroke: var(--txt-muted);" width="18" height="18"><circle cx="48.62" cy="48.62" r="43.62" style="stroke-miterlimit: 10; stroke-width: 10px;"></circle><path d="m48.64,14.1v34.52c7.07,4.3,14.13,8.59,21.2,12.89" style="stroke-linejoin: round; stroke-width: 9px;"></path></svg></vui-popover-item>
|
|
</div>
|
|
`)
|
|
} else {
|
|
box.insertAdjacentHTML('beforeend', `
|
|
<div class="area" style="contain: content;" sender="${name}">
|
|
<vui-avatar img="https://belmonttechnical.com/venture/assets/gradient1.png">${name}</vui-avatar>
|
|
<div style="margin-inline: 30px;display:flex;">
|
|
<div>${msg}</div>
|
|
<vui-popover-item style="display: block;margin: 0;margin-left: auto;" target="1747779141" data-endpoint="<span>This message was sent <vui-timestamp hint='sent-ago'>${(new Date()).getTime()}</vui-timestamp></span>"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 97.24 97.24" style="fill: none; stroke: var(--txt-muted);" width="18" height="18"><circle cx="48.62" cy="48.62" r="43.62" style="stroke-miterlimit: 10; stroke-width: 10px;"></circle><path d="m48.64,14.1v34.52c7.07,4.3,14.13,8.59,21.2,12.89" style="stroke-linejoin: round; stroke-width: 9px;"></path></svg></vui-popover-item>
|
|
</div>
|
|
</div>
|
|
`)
|
|
}
|
|
}
|
|
|
|
var host = 'localhost' // Set this to the local IP address of your server, or localhost if on the same machine.
|
|
|
|
var ws = new WebSocket(`ws://${host}:8001`)
|
|
ws.onmessage = ev=>{
|
|
let data = JSON.parse(ev.data)
|
|
if (data.type == "chat") {
|
|
addMessage('#' + data.name, data.msg)
|
|
}
|
|
}
|
|
|
|
let input = document.querySelector('#input')
|
|
input.addEventListener('keyup', ev=>{
|
|
if (ev.key == "Enter") {
|
|
ws.send(JSON.stringify({type: "chat", sender: "???", msg: input.value}))
|
|
addMessage("???", input.value)
|
|
input.value = ""
|
|
}
|
|
})
|
|
|
|
</script>
|
|
</body>
|
|
</html> |