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)
This commit is contained in:
parent
97475599a7
commit
be6dd7c0e4
GPG key ID:
87E4D691632DFF15
13 changed files with 296 additions and 76 deletions
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
const tavern = {
|
||||
socket: socket = new WebSocket('ws:/' + window.location.host + '/ws'),
|
||||
msgs: [],
|
||||
connected: false,
|
||||
loggedIn: false,
|
||||
call: (f, ...args) => {
|
||||
|
|
@ -8,6 +9,27 @@ const tavern = {
|
|||
}
|
||||
}
|
||||
};
|
||||
tavern.add_msg_to_history = (m) => {
|
||||
let id = m.id - 1;
|
||||
if(id >= 0) {
|
||||
if(id < tavern.msgs.length) {
|
||||
if(tavern.msgs[id].id == id + 1) {
|
||||
tavern.msgs[id] = m;
|
||||
}
|
||||
else {
|
||||
for(let i = 0; i < tavern.msgs.length; i += 1) {
|
||||
if(tavern.msgs[i].id > id) {
|
||||
tavern.msgs.splice(i, 0, m);
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
else {
|
||||
tavern.msgs.push(m)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
tavern.socket.onopen = () => tavern.connected = true;
|
||||
tavern.socket.onmessage = (m) => {
|
||||
|
|
@ -18,13 +40,21 @@ tavern.socket.onmessage = (m) => {
|
|||
tavern.call(tavern.onlogin, tavern.socket.loggedIn);
|
||||
}
|
||||
if(m.message) {
|
||||
tavern.call(tavern.onmessage, m.message)
|
||||
tavern.add_msg_to_history(m.message);
|
||||
tavern.call(tavern.onmessage, m.message);
|
||||
}
|
||||
if(m.get_chat_history) {
|
||||
m.get_chat_history.forEach(msg => {
|
||||
tavern.add_msg_to_history(msg);
|
||||
tavern.call(tavern.onmessage, msg);
|
||||
});
|
||||
}
|
||||
if(m.spawn_token) {
|
||||
tavern.call(tavern.onspawntoken, m.spawn_token);
|
||||
}
|
||||
if(m.move_token) {
|
||||
tavern.call(tavern.onmovetoken, m.move_token);
|
||||
}
|
||||
}
|
||||
tavern.login = (username, password) => {
|
||||
if(!tavern.connected || tavern.loggedIn) { return false; }
|
||||
|
|
@ -32,7 +62,14 @@ tavern.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.socket.send(JSON.stringify({ message: { text: msg, character: token ?? "" } }));
|
||||
}
|
||||
tavern.edit_msg = (new_text, id) => {
|
||||
if(id <= tavern.msgs.length && id > 0) {
|
||||
let msg = tavern.msgs[id - 1];
|
||||
msg.text = new_text;
|
||||
tavern.socket.send(JSON.stringify({ message: msg }));
|
||||
}
|
||||
}
|
||||
tavern.get_chat_history = (from, amount) => {
|
||||
if(!tavern.connected || tavern.loggedIn) { return false; }
|
||||
|
|
@ -42,3 +79,11 @@ tavern.get_last_msgs = (amount) => {
|
|||
if(!tavern.connected || tavern.loggedIn) { return false; }
|
||||
tavern.socket.send(JSON.stringify({ get_last_messages: { amount: amount } }))
|
||||
}
|
||||
tavern.get_tokens = () => {
|
||||
if(!tavern.connected || tavern.loggedIn) { return false; }
|
||||
tavern.socket.send(JSON.stringify('get_tokens'));
|
||||
}
|
||||
tavern.move_token = (id, x, y) => {
|
||||
if(!tavern.connected || tavern.loggedIn) { return false; }
|
||||
tavern.socket.send(JSON.stringify({ move_token: { token_id: id, x: x, y: y } }));
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue