diff --git a/assets/web/app.js b/assets/web/app.js new file mode 100644 index 0000000..1d341b5 --- /dev/null +++ b/assets/web/app.js @@ -0,0 +1,263 @@ +// init - game view (map) +const GRID_SIZE = 200; // Grid size in pixels +var mapScale = 1.0; +var mapOffsetX = 0.0; +var mapOffsetY = 0.0; +var draggedToken = { token: null, offX: 0, offY: 0 }; +var draggedDiv = { div: null, offX: 0, offY: 0 }; + +function init() { + let view = document.getElementById('game-view'); + view.onwheel = onGameViewScroll; + view.onmousemove = onGameMouseMove; + view.onmouseup = onGameMouseUp; + 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; + } + } + 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(); + document.body.onclick = (e) => { + document.getElementById('msg-context-menu').style.display = 'none'; + } + document.body.onmousemove = onMoveableDivDrag; + document.body.onmouseup = onMoveableDivMouseUp; + // TODO: Remove when done dev-ing + tavern.onmessage({ text: 'test', id: 1, source: 'rusty', character: 'bart' }); +} + +tavern.onlogin = (s) => { + if(s) { + let login = document.getElementById('login-screen'); + let game = document.getElementById('game'); + login.style.display = 'none'; + 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!"); + } +} +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 = ` +
+ ${m.character ?? ''} + (${m.source}) +
+
+ ${m.text.replace('\n', '\n
\n')}
+
${r.name} ${r.extra != null ? '(' + r.extra + ')' : ''}
+${r.dice_amount}d${r.dice_type} + ${r.constant}
+ + `; + holder.appendChild(row); + } + } + document.getElementById('dice-roll-title').innerText = action.display_name ?? action.name; + document.getElementById('dice-roll-popup').style.display = 'flex'; +} +function rollPopup() { + // TODO: Maybe let the server roll the dice? + // first - hide the popup + document.getElementById('dice-roll-popup').style.display = 'none'; + // get the holder and start rolling dice + let rolls = []; + let holder = document.getElementById('dice-roll-holder'); + for(const h of holder.children) { + if(h.roll && h.children[2].checked) { + let roll = { name: h.roll.name, extra: h.roll.extra }; + let msg = ''; + let sum = 0; + for (let i = 0; i < h.roll.dice_amount; i++) { + // Math.random gives a value in [0, 1), so we need to add 1 at the end + let roll = Math.floor(Math.random() * h.roll.dice_type) + 1; + sum += roll; + msg += `${roll}`; + if(i != h.roll.dice_amount - 1 || h.roll.constant != 0) { + msg += ' + '; + } + } + if(h.roll.constant != 0) { + sum += h.roll.constant; + msg += `${h.roll.constant}`; + } + roll.result = sum; + roll.result_text = msg; + rolls.push(roll); + } + } + console.log(rolls); + tavern.action_result(holder.action.name, 'Louise', [], rolls); +} +function onMoveableDivMouseDown(e, id) { + if(e.buttons == 1) { + let div = document.getElementById(id); + let rect = div.getBoundingClientRect(); + draggedDiv.div = div; + draggedDiv.offX = e.clientX - rect.x; + draggedDiv.offY = e.clientY - rect.y; + + } +} +function onMoveableDivDrag(e) { + if(draggedDiv.div) { + draggedDiv.div.style.right = ''; + draggedDiv.div.style.top = `${e.clientY - draggedDiv.offY}px`; + draggedDiv.div.style.left = `${e.clientX - draggedDiv.offX}px`; + } +} +function onMoveableDivMouseUp(e, id) { + draggedDiv.div = null; +} +function showHideDiv(id) { + let div = document.getElementById(id); + div.style.display = div.style.display == 'none' ? 'flex' : 'none'; +} \ No newline at end of file diff --git a/assets/web/index.html b/assets/web/index.html index 5eab126..79ff186 100644 --- a/assets/web/index.html +++ b/assets/web/index.html @@ -1,360 +1,22 @@ - - - - + + + +