2024-09-28 17:13:11 +00:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<script src="./socket.js"></script>
|
|
|
|
|
<script>
|
|
|
|
|
// init - game view (map)
|
|
|
|
|
var mapScale = 1.0;
|
|
|
|
|
var mapOffsetX = 0.0;
|
|
|
|
|
var mapOffsetY = 0.0;
|
|
|
|
|
function init() {
|
|
|
|
|
let view = document.getElementById('game-view');
|
|
|
|
|
view.onwheel = onGameViewScroll;
|
|
|
|
|
view.onclick = (e) => console.log('click', e);
|
|
|
|
|
view.onauxclick = (e) => console.log(e);
|
|
|
|
|
view.onmousemove = onGameMouseMove;
|
|
|
|
|
view.oncontextmenu = () => false;
|
2024-10-01 17:53:19 +00:00
|
|
|
// 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;
|
|
|
|
|
}
|
|
|
|
|
}
|
2024-10-01 19:16:35 +00:00
|
|
|
document.getElementById('login-username').onkeypress = (e) => {
|
|
|
|
|
if(e.key == 'Enter') {
|
|
|
|
|
document.getElementById('login-pass').focus();
|
|
|
|
|
return false;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
document.getElementById('login-pass').onkeypress = (e) => {
|
|
|
|
|
if(e.key == 'Enter') {
|
|
|
|
|
onLoginClick();
|
|
|
|
|
return false;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
// focus on the username field for the sake of just pressing enter multiple times
|
|
|
|
|
document.getElementById('login-username').focus();
|
2024-09-28 17:13:11 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
tavern.onlogin = (s) => {
|
|
|
|
|
if(s) {
|
|
|
|
|
let login = document.getElementById('login-screen');
|
|
|
|
|
let game = document.getElementById('game');
|
|
|
|
|
login.style.display = 'none';
|
|
|
|
|
game.style.display = 'flex';
|
2024-10-01 19:16:35 +00:00
|
|
|
// get last 50 msgs (i think that is enough for now) when we get in
|
|
|
|
|
tavern.get_last_msgs(50);
|
2024-09-28 17:13:11 +00:00
|
|
|
}
|
|
|
|
|
else {
|
|
|
|
|
alert("Invalid username or password!");
|
|
|
|
|
}
|
|
|
|
|
}
|
2024-10-01 17:53:19 +00:00
|
|
|
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}
|
|
|
|
|
`
|
2024-10-04 11:46:20 +00:00
|
|
|
msg.oncontextmenu = () => {
|
|
|
|
|
document.getElementById('msg-context-menu').style.display = 'flex';
|
|
|
|
|
return false;
|
|
|
|
|
}
|
2024-10-01 17:53:19 +00:00
|
|
|
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);
|
2024-10-01 19:16:35 +00:00
|
|
|
msg.scrollIntoView();
|
2024-10-01 17:53:19 +00:00
|
|
|
}
|
|
|
|
|
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);
|
|
|
|
|
}
|
2024-09-28 17:13:11 +00:00
|
|
|
function onGameViewScroll(event) {
|
|
|
|
|
let map = document.getElementById('map');
|
|
|
|
|
mapScale += (event.wheelDelta / 1800.0);
|
|
|
|
|
if(mapScale < 0.1) { mapScale = 0.1; }
|
|
|
|
|
map.style.transform = `scale(${mapScale})`;
|
|
|
|
|
}
|
|
|
|
|
function onGameMouseMove(event) {
|
|
|
|
|
if(event.buttons == 2) {
|
|
|
|
|
// middle click
|
|
|
|
|
let map = document.getElementById('map');
|
|
|
|
|
let mult = event.ctrlKey ? 2.0 : 1.0;
|
|
|
|
|
mapOffsetX += event.movementX * mult;
|
|
|
|
|
mapOffsetY += event.movementY * mult;
|
|
|
|
|
map.style.left = `${mapOffsetX}px`;
|
|
|
|
|
map.style.top = `${mapOffsetY}px`;
|
|
|
|
|
}
|
|
|
|
|
}
|
2024-10-01 17:53:19 +00:00
|
|
|
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);
|
|
|
|
|
}
|
2024-09-28 17:13:11 +00:00
|
|
|
</script>
|
|
|
|
|
<style>
|
|
|
|
|
html, body {
|
|
|
|
|
margin: 0;
|
|
|
|
|
height: 100%;
|
|
|
|
|
}
|
|
|
|
|
body{
|
|
|
|
|
background-color: rgb(32, 35, 35);
|
|
|
|
|
color: white;
|
|
|
|
|
}
|
|
|
|
|
#side-panel {
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: row;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
resize: horizontal;
|
|
|
|
|
overflow: auto;
|
|
|
|
|
border: 0px solid black;
|
|
|
|
|
width: 20%;
|
|
|
|
|
min-width: 10%;
|
|
|
|
|
max-width: 50%;
|
2024-10-01 17:53:19 +00:00
|
|
|
background-image: linear-gradient(135deg, #0f0f2f 0px, #0f0f2f 99%, rgb(188, 255, 185) 100%);
|
2024-09-28 17:13:11 +00:00
|
|
|
}
|
|
|
|
|
#chat-history {
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 90%;
|
2024-10-01 17:53:19 +00:00
|
|
|
resize: none;
|
2024-09-28 17:13:11 +00:00
|
|
|
overflow: auto;
|
|
|
|
|
margin-top: 10px;
|
2024-10-01 17:53:19 +00:00
|
|
|
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;
|
2024-09-28 17:13:11 +00:00
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
|
|
|
|
|
</head>
|
|
|
|
|
<body onload="init()">
|
|
|
|
|
<div id="login-screen" style="display: flex; justify-content: center; width: 100%; height: 100%;">
|
|
|
|
|
<div style="display: flex; justify-content: center; flex-direction: column;" >
|
|
|
|
|
<input type="text" id="login-username" placeholder="Username..." >
|
|
|
|
|
<input type="password" id="login-pass" placeholder="Password..." >
|
|
|
|
|
<button onclick="onLoginClick()">
|
|
|
|
|
Login
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div id="game" style="display: none; width: 100%; height: 100%;" >
|
|
|
|
|
<div id="side-panel">
|
|
|
|
|
<div style="display: flex; flex-direction: column; width: calc(100% - 15px); height: 100%;" >
|
|
|
|
|
<div id="chat-history">
|
|
|
|
|
</div>
|
2024-10-01 17:53:19 +00:00
|
|
|
<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> -->
|
2024-09-28 17:13:11 +00:00
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div id="game-view" style="display: flex; overflow: hidden; position: relative; top: 0px; left: 0px; flex-grow: 1;" >
|
|
|
|
|
<div style="position:absolute; top: 10px; left: 5px; background-color: rgb(255, 166, 0); z-index: 1;" >
|
|
|
|
|
floating<br>stuff
|
|
|
|
|
</div>
|
|
|
|
|
<div id="map" style="position:absolute;">
|
|
|
|
|
<img src="https://rustystriker.dev/molly.jpg" height="200%" >
|
|
|
|
|
<img src="https://rustystriker.dev/louise.jpg" height="10%" style="position: absolute; left:20px; top: 20px;" >
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2024-10-04 11:46:20 +00:00
|
|
|
<div id="msg-context-menu" class="chat-message" style="display: none; position: absolute; z-index: 1000; top: 0px;">
|
|
|
|
|
<ul>
|
|
|
|
|
<li onclick='document.getElementById("msg-context-menu").style.display="none"'>Edit</li>
|
|
|
|
|
</ul>
|
|
|
|
|
</div>
|
2024-09-28 17:13:11 +00:00
|
|
|
</body>
|
2024-10-04 11:46:20 +00:00
|
|
|
</html>
|
