diff --git a/assets/web/index.html b/assets/web/index.html index 943f8ea..04dca6e 100644 --- a/assets/web/index.html +++ b/assets/web/index.html @@ -13,8 +13,6 @@ 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.onmouseup = onGameMouseUp; view.oncontextmenu = () => false; @@ -73,7 +71,7 @@


- ${m.text} + ${m.text.replace('\n', '\n
\n')}

` msg.oncontextmenu = (e) => { @@ -84,6 +82,21 @@ cm.style.left = `${e.pageX}px`; return false; } + if(m.actions) { + let holder = document.createElement('div'); + holder.style.display = 'flex'; + holder.style.flexWrap = 'wrap'; + msg.appendChild(holder); + for (const act of m.actions) { + let button = document.createElement('button'); + button.innerText = act.display_name ?? act.name; + button.action = act; + button.onclick = () => console.log(button.action); + button.style.margin = '2px'; + button.onclick = () => openRollsPopup(act); + holder.appendChild(button); + } + } 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]; @@ -111,7 +124,7 @@ draggedToken.offY = ((e.clientY - mapOffsetY) / mapScale) - parseInt(token.style.top); token.children[0].style.cursor = 'grabbing'; } - map.append(token); + map.appendChild(token); } tavern.onmovetoken = (m) => { let token = Array.from(document.getElementsByClassName('token')).filter(t => t.token_id == m.token_id)[0] @@ -148,7 +161,6 @@ else if(draggedToken.token != null && event.buttons == 1) { let top = (event.clientY - mapOffsetY) / mapScale - draggedToken.offY; let left = (event.clientX - mapOffsetX) / mapScale - draggedToken.offX; - console.log(event.clientX, event.clientY, draggedToken.offX, draggedToken.offY); draggedToken.token.style.top = `${top}px`; draggedToken.token.style.left = `${left}px`; } @@ -172,6 +184,61 @@ tb.value = ''; tavern.simple_msg(text); } + function openRollsPopup(action) { + let holder = document.getElementById('dice-roll-holder'); + holder.innerHTML = ''; // remove all holder children + holder.action = action; + if(action.rolls != undefined && Array.isArray(action.rolls)) { + for (const r of action.rolls) { + // name (extra) (dice_amount)d(dice_type) + constant | enabled + console.log(r); + let row = document.createElement('div'); + row.style.display = 'flex'; + row.roll = r; + row.innerHTML = ` +

${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.display; + 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); + }