not sure what is going on anymore, a lot of changes as im working on the chat thing. currently simple chat seems to work
This commit is contained in:
parent
dd34317d14
commit
acf96db186
GPG key ID:
87E4D691632DFF15
11 changed files with 170 additions and 52 deletions
|
|
@ -14,25 +14,57 @@
|
|||
view.onauxclick = (e) => console.log(e);
|
||||
view.onmousemove = onGameMouseMove;
|
||||
view.oncontextmenu = () => false;
|
||||
// allow sending chat message using enter (and shift-enter for new line)
|
||||
document.getElementById('newmsg-content').onkeypress = (e) => {
|
||||
if(e.key == "Enter" && !e.shiftKey) {
|
||||
sendChatMessage();
|
||||
return false;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function onLoginClick() {
|
||||
let username = document.getElementById('login-username').value;
|
||||
let pass = document.getElementById('login-pass').value;
|
||||
tavern.login(username, pass);
|
||||
}
|
||||
tavern.onlogin = (s) => {
|
||||
console.log(s);
|
||||
if(s) {
|
||||
let login = document.getElementById('login-screen');
|
||||
let game = document.getElementById('game');
|
||||
login.style.display = 'none';
|
||||
game.style.display = 'flex';
|
||||
// get all chat history as soon as we get in
|
||||
tavern.get_chat_history(0, 0);
|
||||
}
|
||||
else {
|
||||
alert("Invalid username or password!");
|
||||
}
|
||||
}
|
||||
tavern.onmessage = (m) => {
|
||||
console.log(m);
|
||||
let msg = document.createElement('div');
|
||||
msg.className = 'chat-message';
|
||||
// #abusing_style_order_as_both_id_variable_and_forcing_chronological_order
|
||||
msg.style.order = m.id;
|
||||
msg.innerHTML = `
|
||||
<b style='align-self: center;'>${m.source}</b>
|
||||
<br>
|
||||
<hr style='width: 75%;' />
|
||||
${m.text}
|
||||
`
|
||||
let history = document.getElementById('chat-history');
|
||||
// this is to force update everytime we get a duplicate msg to allow msg editing (yay)
|
||||
let exists = Array.from(history.children).filter(e => e.style.order == m.id)[0];
|
||||
if(exists) {
|
||||
history.removeChild(exists);
|
||||
}
|
||||
history.appendChild(msg);
|
||||
}
|
||||
function onLoginClick() {
|
||||
let username = document.getElementById('login-username').value;
|
||||
let pass = document.getElementById('login-pass').value;
|
||||
if(username == 'test') {
|
||||
// TODO: Remove this for when im done dev-ing with this file
|
||||
tavern.onlogin(true);
|
||||
}
|
||||
tavern.login(username, pass);
|
||||
}
|
||||
function onGameViewScroll(event) {
|
||||
let map = document.getElementById('map');
|
||||
mapScale += (event.wheelDelta / 1800.0);
|
||||
|
|
@ -50,6 +82,13 @@
|
|||
map.style.top = `${mapOffsetY}px`;
|
||||
}
|
||||
}
|
||||
function sendChatMessage() {
|
||||
let tb = document.getElementById('newmsg-content');
|
||||
// get the msg and reset the textarea
|
||||
let text = tb.value;
|
||||
tb.value = '';
|
||||
tavern.simple_msg(text);
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
html, body {
|
||||
|
|
@ -70,18 +109,30 @@
|
|||
width: 20%;
|
||||
min-width: 10%;
|
||||
max-width: 50%;
|
||||
background-color: rgb(17, 0, 36);
|
||||
background-image: linear-gradient(135deg, rgb(17, 0, 36) 0px, rgb(17, 0, 36) 98%, rgb(188, 255, 185) 99%);
|
||||
background-image: linear-gradient(135deg, #0f0f2f 0px, #0f0f2f 99%, rgb(188, 255, 185) 100%);
|
||||
}
|
||||
#chat-history {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
height: 90%;
|
||||
resize: vertical;
|
||||
resize: none;
|
||||
overflow: auto;
|
||||
margin-top: 10px;
|
||||
background-color:brown;
|
||||
background-color:#0f0f2f;
|
||||
}
|
||||
.chat-message {
|
||||
|
||||
background-color: #ffffd6;
|
||||
color: #000000;
|
||||
border-width: 2px;
|
||||
border-color: rgb(73, 49, 49);
|
||||
border-style: solid;
|
||||
border-radius: 8px;
|
||||
padding: 4px 16px;
|
||||
margin: 2px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
@ -100,10 +151,11 @@
|
|||
<div id="side-panel">
|
||||
<div style="display: flex; flex-direction: column; width: calc(100% - 15px); height: 100%;" >
|
||||
<div id="chat-history">
|
||||
Chat history
|
||||
</div>
|
||||
<div id="chat-input" style="width: 100%; flex-grow: 1; background-color: aqua; margin: 10px 0;">
|
||||
new message input
|
||||
<div id="chat-input" style="width: 100%; flex-grow: 1; margin: 10px 0; display:flex;">
|
||||
<textarea id="newmsg-content" placeholder="Message..." spellcheck="true" style="resize:none; height: auto; flex-grow: 1; min-width:0px;"></textarea>
|
||||
<!-- it looks better without the button :( -->
|
||||
<!-- <button style="height: fit-content; align-self: center; margin: 0 4px;" onclick="sendChatMessage()">Send</button> -->
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -17,8 +17,24 @@ tavern.socket.onmessage = (m) => {
|
|||
tavern.socket.loggedIn = m.login.success;
|
||||
tavern.call(tavern.onlogin, tavern.socket.loggedIn);
|
||||
}
|
||||
if(m.message) {
|
||||
tavern.call(tavern.onmessage, m.message)
|
||||
}
|
||||
if(m.get_chat_history) {
|
||||
m.get_chat_history.forEach(msg => {
|
||||
tavern.call(tavern.onmessage, msg);
|
||||
});
|
||||
}
|
||||
}
|
||||
tavern.login = (username, password) => {
|
||||
if(!tavern.connected || tavern.loggedIn) { return false; }
|
||||
tavern.socket.send(JSON.stringify({ login: { username, password }}));
|
||||
}
|
||||
tavern.simple_msg = (msg, token) => {
|
||||
if(!tavern.connected || tavern.loggedIn) { return false; }
|
||||
tavern.socket.send(JSON.stringify({ message: { text: msg, source: token ?? "" } }));
|
||||
}
|
||||
tavern.get_chat_history = (from, amount) => {
|
||||
if(!tavern.connected || tavern.loggedIn) { return false; }
|
||||
tavern.socket.send(JSON.stringify({ get_chat_history: { from: from, amount: amount } }))
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue