RustyStriker/open_tavern
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

i did some stuff, honestly it starts to build pretty well if i might sayy

Browse source
This commit is contained in:
Rusty Striker 2024-09-28 20:13:11 +03:00
parent 22319e84a1
commit 9189d9cd88
Signed by: RustyStriker
GPG key ID: 87E4D691632DFF15
22 changed files with 689 additions and 176 deletions
Download patch file Download diff file Expand all files Collapse all files

124
assets/web/index.html
View file

@ -1,2 +1,122 @@
<button onclick="onClick()", id="login_button">Click me!, also open terminal</button>
<script src='socket.js'></script>
<!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;
}
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';
}
else {
alert("Invalid username or password!");
}
}
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`;
}
}
</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%;
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%);
}
#chat-history {
display: flex;
flex-direction: column;
width: 100%;
height: 90%;
resize: vertical;
overflow: auto;
margin-top: 10px;
background-color:brown;
}
</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">
Chat history
</div>
<div id="chat-input" style="width: 100%; flex-grow: 1; background-color: aqua; margin: 10px 0;">
new message input
</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>
</body>
</html>