dice rolling (with a dialog and basic chat output)
This commit is contained in:
parent
45106498b4
commit
8b9b5db299
GPG key ID:
87E4D691632DFF15
7 changed files with 244 additions and 63 deletions
|
|
@ -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 @@
|
|||
</p>
|
||||
<hr style='width: 75%;' />
|
||||
<p style='margin: 4px 2px;'>
|
||||
${m.text}
|
||||
${m.text.replace('\n', '\n<br>\n')}
|
||||
</p>
|
||||
`
|
||||
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 = `
|
||||
<p style='flex-grow: 1;'>${r.name} ${r.extra != null ? '(' + r.extra + ')' : ''}</p>
|
||||
<p style='margin-right: 8px;'>${r.dice_amount}d${r.dice_type} + ${r.constant}</p>
|
||||
<input type='checkbox' ${r.enabled ? 'checked' : ''} />
|
||||
`;
|
||||
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);
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
html, body {
|
||||
|
|
@ -278,6 +345,22 @@
|
|||
<div style="position:absolute; top: 10px; left: 5px; background-color: rgb(255, 166, 0); z-index: 1;" >
|
||||
floating<br>stuff
|
||||
</div>
|
||||
<div id="dice-roll-popup" style="display:none; justify-content: center; width: 100%; height: 100%; background-color: transparent; position: absolute; z-index: 2; top: 0px; left: 0px">
|
||||
<div style="display:flex; width: 50%; justify-content: center; flex-direction: column;">
|
||||
<div style="display: flex; height: fit-content; flex-direction: column; background-color: #ffffd6; color: black; border: black solid 1px; padding: 8px; border-radius: 8px;">
|
||||
<h3 id="dice-roll-title" style="align-self: center;">
|
||||
THIS IS THE ROLL DISPLAY
|
||||
</h3>
|
||||
<div id="dice-roll-holder" style="display: flex; flex-direction: column;">
|
||||
|
||||
</div>
|
||||
<div style="display: flex;">
|
||||
<button style="flex-grow: 1; margin: 4px;" onclick="document.getElementById('dice-roll-popup').style.display = 'none';">Cancel</button>
|
||||
<button style="flex-grow: 1; margin: 4px;" onclick="rollPopup()">Roll</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="map" style="position:absolute; transform-origin: top left;">
|
||||
<img src="https://rustystriker.dev/molly.jpg" height="200%" >
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue