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

some tokens stuff (ye i started to work on the map, also i 'fixed' the context menu for msgs but still needs to be impl-ed)

Browse source
This commit is contained in:
Rusty Striker 2024-10-08 19:55:48 +03:00
parent 97475599a7
commit be6dd7c0e4
Signed by: RustyStriker
GPG key ID: 87E4D691632DFF15
13 changed files with 296 additions and 76 deletions
Download patch file Download diff file Expand all files Collapse all files

81
assets/web/index.html
View file

@ -4,9 +4,11 @@
<script src="./socket.js"></script>
<script>
// init - game view (map)
const GRID_SIZE = 200; // Grid size in pixels
var mapScale = 1.0;
var mapOffsetX = 0.0;
var mapOffsetY = 0.0;
function init() {
let view = document.getElementById('game-view');
view.onwheel = onGameViewScroll;
@ -35,6 +37,11 @@
}
// focus on the username field for the sake of just pressing enter multiple times
document.getElementById('login-username').focus();
document.body.onclick = (e) => {
document.getElementById('msg-context-menu').style.display = 'none';
}
// TODO: Remove when done dev-ing
tavern.onmessage({ text: 'test', id: 1, source: 'rusty', character: 'bart' });
}
tavern.onlogin = (s) => {
@ -45,6 +52,7 @@
game.style.display = 'flex';
// get last 50 msgs (i think that is enough for now) when we get in
tavern.get_last_msgs(50);
tavern.get_tokens();
}
else {
alert("Invalid username or password!");
@ -57,13 +65,21 @@
// #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>
<p style='align-self: center; margin: 4px 0;'>
<b>${m.character ?? ''}</b>
(${m.source})
</p>
<hr style='width: 75%;' />
${m.text}
<p style='margin: 4px 2px;'>
${m.text}
</p>
`
msg.oncontextmenu = () => {
document.getElementById('msg-context-menu').style.display = 'flex';
msg.oncontextmenu = (e) => {
if(e.shiftKey) { return true; }
let cm = document.getElementById('msg-context-menu');
cm.style.display = 'flex';
cm.style.top = `${e.pageY}px`;
cm.style.left = `${e.pageX}px`;
return false;
}
let history = document.getElementById('chat-history');
@ -75,6 +91,26 @@
history.appendChild(msg);
msg.scrollIntoView();
}
tavern.onspawntoken = (t) => {
console.log(t);
let map = document.getElementById('map');
let token = document.createElement('div');
token.className = 'token';
token.style.top = `${t.y * GRID_SIZE}px`;
token.style.left = `${t.x * GRID_SIZE}px`;
token.token_id = t.token_id;
token.innerHTML = `
<img src='data:image/jpg;base64,${t.img}'>
`
map.append(token);
}
tavern.onmovetoken = (m) => {
let token = Array.from(document.getElementsByClassName('token')).filter(t => t.token_id == m.token_id)[0]
if(token) {
token.style.top = `${m.y * GRID_SIZE}px`;
token.style.left = `${m.x * GRID_SIZE}px`;
}
}
function onLoginClick() {
let username = document.getElementById('login-username').value;
let pass = document.getElementById('login-pass').value;
@ -152,6 +188,36 @@
display: flex;
flex-direction: column;
}
#msg-context-menu {
display: none;
position: absolute;
z-index: 1000;
padding: 4px;
}
#msg-context-menu ul {
padding: 0px;
margin: 0px;
list-style: none;
}
#msg-context-menu ul li {
padding: 4px;
}
#msg-context-menu ul li:hover {
background: darkgray;
cursor: pointer;
}
.token {
position: absolute;
transition:
top 0.5s ease-in,
left 0.5s ease-in;
}
.token img {
cursor: grab;
width: 200px;
height: 200px;
}
</style>
</head>
@ -184,13 +250,12 @@
</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>
<div id="msg-context-menu" class="chat-message" style="display: none; position: absolute; z-index: 1000; top: 0px;">
<div id="msg-context-menu" class="chat-message">
<ul>
<li onclick='document.getElementById("msg-context-menu").style.display="none"'>Edit</li>
<li>Delete (TODO)</li>
</ul>
</div>
</body>