add physical attack;rearrange buttons;add gif animations
This commit is contained in:
parent
f06b426d49
commit
b1f9c0734b
@ -1,47 +1,51 @@
|
|||||||
document.getElementById('terrainForm').addEventListener('submit', function(event) {
|
document.getElementById('terrainForm').addEventListener('submit', function (event) {
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
var terrain = document.getElementById('terrainType').value;
|
var terrain = document.getElementById('terrainType').value;
|
||||||
|
|
||||||
|
// Insert the loading.gif before making the fetch request
|
||||||
|
let resultSection = document.getElementById('resultSection');
|
||||||
|
resultSection.innerHTML = '';
|
||||||
|
let imgElement = document.createElement('img');
|
||||||
|
imgElement.src = 'img/checking.gif';
|
||||||
|
imgElement.style.width = '500px';
|
||||||
|
imgElement.style.height = '500px';
|
||||||
|
imgElement.style.display = 'block';
|
||||||
|
imgElement.style.marginLeft = 'auto';
|
||||||
|
imgElement.style.marginRight = 'auto';
|
||||||
|
resultSection.appendChild(imgElement);
|
||||||
|
|
||||||
fetch('https://gammaworld.gmgauthier.com/roll/encounter', {
|
fetch('https://gammaworld.gmgauthier.com/roll/encounter', {
|
||||||
method: 'POST',
|
method: 'POST',
|
||||||
headers: {
|
headers: {
|
||||||
'Content-Type': 'application/json'
|
'Content-Type': 'application/json',
|
||||||
},
|
},
|
||||||
body: JSON.stringify({
|
body: JSON.stringify({
|
||||||
"terrain": terrain
|
terrain: terrain,
|
||||||
|
}),
|
||||||
|
})
|
||||||
|
.then((response) => {
|
||||||
|
if (!response.ok) {
|
||||||
|
throw response;
|
||||||
|
}
|
||||||
|
return response.json(); // we only get here if there is no error
|
||||||
})
|
})
|
||||||
}).then(response => {
|
.then((json) => {
|
||||||
if (!response.ok) { throw response }
|
// Handle null encounter
|
||||||
return response.json() // we only get here if there is no error
|
let encounterText = json.encounter ? json.encounter : 'No Encounter';
|
||||||
}).then(json => {
|
|
||||||
//Handle null encounter
|
|
||||||
let encounterText = json.encounter ? json.encounter : "No Encounter";
|
|
||||||
let resultSection = document.getElementById('resultSection');
|
|
||||||
resultSection.innerHTML = '';
|
|
||||||
|
|
||||||
// Create an image element and set its src to the corresponding jpeg image
|
// Change the src attribute of the image after fetch resolves
|
||||||
let imgElement = document.createElement("img");
|
setTimeout(() => {
|
||||||
imgElement.alt = encounterText;
|
imgElement.src = './img/' + encounterText + ".jpg";
|
||||||
imgElement.width = 500; // You can set width as per your choice
|
}, 1000);
|
||||||
imgElement.height = 500; // You can set height as per your choice
|
|
||||||
imgElement.onerror = function() {
|
|
||||||
this.onerror=null;
|
|
||||||
this.src='./img/404.jpg';
|
|
||||||
}
|
|
||||||
imgElement.src = "./img/" + encounterText + ".jpg";
|
|
||||||
|
|
||||||
// Append the image element to the resultSection
|
imgElement.onerror = function () {
|
||||||
resultSection.appendChild(imgElement);
|
this.onerror = null;
|
||||||
}).catch(err => {
|
this.src = './img/404.jpg';
|
||||||
err.text().then(errorMessage => {
|
};
|
||||||
let imgElement = document.createElement("img");
|
|
||||||
imgElement.src = "./img/404.jpg";
|
|
||||||
imgElement.width = 500;
|
|
||||||
imgElement.height = 500;
|
|
||||||
|
|
||||||
let resultSection = document.getElementById('resultSection');
|
|
||||||
resultSection.innerHTML = '';
|
|
||||||
resultSection.appendChild(imgElement);
|
|
||||||
})
|
})
|
||||||
});
|
.catch((err) => {
|
||||||
|
err.text().then((errorMessage) => {
|
||||||
|
imgElement.src = './img/404.jpg';
|
||||||
|
});
|
||||||
|
});
|
||||||
});
|
});
|
BIN
web/img/Heads.jpg
Normal file
BIN
web/img/Heads.jpg
Normal file
Binary file not shown.
After Width: | Height: | Size: 33 KiB |
BIN
web/img/Tails.jpg
Normal file
BIN
web/img/Tails.jpg
Normal file
Binary file not shown.
After Width: | Height: | Size: 43 KiB |
BIN
web/img/checking.gif
Normal file
BIN
web/img/checking.gif
Normal file
Binary file not shown.
After Width: | Height: | Size: 4.8 MiB |
BIN
web/img/loading.gif
Normal file
BIN
web/img/loading.gif
Normal file
Binary file not shown.
After Width: | Height: | Size: 636 KiB |
BIN
web/img/odds.gif
Normal file
BIN
web/img/odds.gif
Normal file
Binary file not shown.
After Width: | Height: | Size: 8.8 MiB |
100
web/index.html
100
web/index.html
@ -9,13 +9,19 @@
|
|||||||
<h1>Gamma World Gaming Tools</h1>
|
<h1>Gamma World Gaming Tools</h1>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="button-panel" style="text-align: center">
|
<div id="probability-panel" style="text-align: center; margin: 3px">
|
||||||
<button id="dieroller">Dice</button>
|
<button id="dieroller">Dice</button>
|
||||||
<button id="encounter">Encounters</button>
|
<button id="coinflip">Flip Coin</button>
|
||||||
<button id="mentalattack">Mental Attack!</button>
|
<button id="chance">Roll Chance</button>
|
||||||
<button id="chargen">Characters</button>
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
<div id="button-panel" style="text-align: center; margin: 3px">
|
||||||
|
|
||||||
|
<button id="encounter">Encounters</button>
|
||||||
|
<button id="physicalattack">Physical Attack!</button>
|
||||||
|
<button id="mentalattack">Mental Attack!</button>
|
||||||
|
<button id="chargen">Characters</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
<hr/>
|
<hr/>
|
||||||
<div id="toolPanel"></div>
|
<div id="toolPanel"></div>
|
||||||
|
|
||||||
@ -33,10 +39,90 @@
|
|||||||
loadContent("mentalattack.html?t=" + new Date().getTime());
|
loadContent("mentalattack.html?t=" + new Date().getTime());
|
||||||
});
|
});
|
||||||
|
|
||||||
|
document.getElementById("physicalattack").addEventListener("click", function () {
|
||||||
|
loadContent("physicalattack.html?t=" + new Date().getTime());
|
||||||
|
});
|
||||||
|
|
||||||
document.getElementById("chargen").addEventListener("click", function () {
|
document.getElementById("chargen").addEventListener("click", function () {
|
||||||
loadContent("chargen.html?t=" + new Date().getTime());
|
loadContent("chargen.html?t=" + new Date().getTime());
|
||||||
});
|
});
|
||||||
|
|
||||||
|
document.getElementById("coinflip").addEventListener("click", function () {
|
||||||
|
let commonImgSize = '250px'
|
||||||
|
// Display a placeholder image or loading indicator
|
||||||
|
let imgElement = document.createElement('img');
|
||||||
|
imgElement.src = 'img/loading.gif';
|
||||||
|
imgElement.style.width = commonImgSize;
|
||||||
|
imgElement.style.height = commonImgSize;
|
||||||
|
|
||||||
|
// Center the image
|
||||||
|
imgElement.style.display = 'block';
|
||||||
|
imgElement.style.marginLeft = 'auto';
|
||||||
|
imgElement.style.marginRight = 'auto';
|
||||||
|
|
||||||
|
document.getElementById('toolPanel').innerHTML = '';
|
||||||
|
document.getElementById('toolPanel').appendChild(imgElement);
|
||||||
|
|
||||||
|
fetch('https://gammaworld.gmgauthier.com/coinflip')
|
||||||
|
.then(response => response.text())
|
||||||
|
.then(data => {
|
||||||
|
let imgSrc = 'img/' + data.replace(/\"/g, '') + '.jpg';
|
||||||
|
setTimeout(() => {
|
||||||
|
imgElement.src = imgSrc;
|
||||||
|
}, 1500);
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
console.error('Error:', error);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
document.getElementById('chance').addEventListener('click', function(event) {
|
||||||
|
event.preventDefault();
|
||||||
|
|
||||||
|
// Insert the odds.gif before making the fetch request
|
||||||
|
let resultSection = document.getElementById('toolPanel');
|
||||||
|
resultSection.innerHTML = '';
|
||||||
|
let imgElement = document.createElement('img');
|
||||||
|
imgElement.src = 'img/odds.gif';
|
||||||
|
imgElement.style.width = '250px';
|
||||||
|
imgElement.style.height = '250px';
|
||||||
|
imgElement.style.display = 'block';
|
||||||
|
imgElement.style.marginLeft = 'auto';
|
||||||
|
imgElement.style.marginRight = 'auto';
|
||||||
|
resultSection.appendChild(imgElement);
|
||||||
|
|
||||||
|
fetch('https://gammaworld.gmgauthier.com/roll/chance', {
|
||||||
|
method: 'GET',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
},
|
||||||
|
})
|
||||||
|
.then((response) => {
|
||||||
|
if (!response.ok) {
|
||||||
|
throw response;
|
||||||
|
}
|
||||||
|
return response.json();
|
||||||
|
})
|
||||||
|
.then((json) => {
|
||||||
|
// Add a delay of 1 second (1000 milliseconds) before changing the image.
|
||||||
|
setTimeout(() => {
|
||||||
|
// Remove loading gif from HTML
|
||||||
|
imgElement.style.display = 'none';
|
||||||
|
|
||||||
|
// Show the result with %+ in large bold centered text
|
||||||
|
let resultText = document.createElement('p');
|
||||||
|
resultText.style.fontSize = '32px'; // Large text
|
||||||
|
resultText.style.fontWeight = 'bold'; // Bold text
|
||||||
|
resultText.style.textAlign = 'center'; // Centered text
|
||||||
|
resultText.textContent = json.result + '%'; // Append % to the result value
|
||||||
|
|
||||||
|
resultSection.appendChild(resultText);
|
||||||
|
}, 1000);
|
||||||
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
console.log('Request failed', err);
|
||||||
|
});
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
function loadContent(pageUrl) {
|
function loadContent(pageUrl) {
|
||||||
@ -45,7 +131,7 @@
|
|||||||
iframe.style.width = '100%'; // make the iframe take full width of the container
|
iframe.style.width = '100%'; // make the iframe take full width of the container
|
||||||
iframe.style.border = 'none'; // hide the border
|
iframe.style.border = 'none'; // hide the border
|
||||||
iframe.style.overflow = 'hidden'; // hide scrollbars, can be 'auto' if you prefer automatic scrollbars
|
iframe.style.overflow = 'hidden'; // hide scrollbars, can be 'auto' if you prefer automatic scrollbars
|
||||||
iframe.style.height = '750px'; // set a height so that the iframe is visible, adjust as per your needs
|
iframe.style.height = '800px'; // set a height so that the iframe is visible, adjust as per your needs
|
||||||
document.getElementById("toolPanel").innerHTML = '';
|
document.getElementById("toolPanel").innerHTML = '';
|
||||||
document.getElementById("toolPanel").appendChild(iframe);
|
document.getElementById("toolPanel").appendChild(iframe);
|
||||||
}
|
}
|
||||||
|
50
web/physicalattack.html
Normal file
50
web/physicalattack.html
Normal file
@ -0,0 +1,50 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Gamma World Physical Attack Roll</title>
|
||||||
|
<link rel="stylesheet" type="text/css" href="styles.css">
|
||||||
|
<script src="physicalattack.js" defer></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<h2>Attempt A Physical Attack</h2>
|
||||||
|
|
||||||
|
<div class="content-container">
|
||||||
|
<form id="physicalAttackForm">
|
||||||
|
<div class="form-row">
|
||||||
|
<div class="form-field">
|
||||||
|
<label for="dac">Defender Armour Class:</label>
|
||||||
|
<input type="number" name="dac" id="dac" min="1" max="10" value="5">
|
||||||
|
</div>
|
||||||
|
<div class="form-field">
|
||||||
|
<label for="weapon_attack">Weapon Attack?</label>
|
||||||
|
<input type="checkbox" name="weapon_attack" id="weapon_attack"/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="form-row">
|
||||||
|
<div class="form-field">
|
||||||
|
<label for="awc">Attacker Weapon Class:</label>
|
||||||
|
<input type="number" name="awc" id="awc" min="1" max="16" value="8">
|
||||||
|
</div>
|
||||||
|
<div class="form-field">
|
||||||
|
<label for="ahd">Attacker Hit Dice:</label>
|
||||||
|
<input type="number" name="ahd" id="ahd" min="1" max="16" value="8">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="form-row">
|
||||||
|
<div class="form-field">
|
||||||
|
<label for="modifier">Modifier:</label>
|
||||||
|
<input type="number" name="modifier" id="modifier" min="-100" max="100" value="0">
|
||||||
|
</div>
|
||||||
|
<div class="form-field">
|
||||||
|
<button type="submit">Attack!</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<hr/>
|
||||||
|
<div id="results"></div>
|
||||||
|
</body>
|
||||||
|
</html>
|
58
web/physicalattack.js
Normal file
58
web/physicalattack.js
Normal file
@ -0,0 +1,58 @@
|
|||||||
|
window.onload = function () {
|
||||||
|
document.getElementById('physicalAttackForm').addEventListener('submit', function (event) {
|
||||||
|
event.preventDefault(); // Prevent the form from submitting the normal way
|
||||||
|
|
||||||
|
const dac = parseInt(document.getElementById('dac').value, 10);
|
||||||
|
const awc = parseInt(document.getElementById('awc').value, 10);
|
||||||
|
const ahd = parseInt(document.getElementById('ahd').value, 10);
|
||||||
|
const modifier = parseInt(document.getElementById('modifier').value, 10);
|
||||||
|
const weapon_attack = document.getElementById('weapon_attack').checked;
|
||||||
|
|
||||||
|
fetch('https://gammaworld.gmgauthier.com/roll/attack/physical', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
},
|
||||||
|
body: JSON.stringify({
|
||||||
|
weapon_attack: weapon_attack,
|
||||||
|
modifier: modifier,
|
||||||
|
dac: dac,
|
||||||
|
awc: awc,
|
||||||
|
ahd: ahd
|
||||||
|
}),
|
||||||
|
})
|
||||||
|
.then(response => response.json())
|
||||||
|
.then(data => {
|
||||||
|
const resultsDiv = document.getElementById('results');
|
||||||
|
let html = '';
|
||||||
|
|
||||||
|
if (data['needed']) {
|
||||||
|
html += `<p><b>Needed: </b>${data['needed']}      `;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (data['original-roll']) {
|
||||||
|
html += `<b>Original Roll: </b>${data['original-roll']}</p>`;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (data['modifier']) {
|
||||||
|
html += `<p><b>Modifier: </b>${data['modifier']}      `;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (data['adjusted-roll']) {
|
||||||
|
html += `<b>Adjusted Roll: </b> ${data['adjusted-roll']}</p>`;
|
||||||
|
}
|
||||||
|
|
||||||
|
html += `<br/>`;
|
||||||
|
|
||||||
|
if (data['outcome']) {
|
||||||
|
let outcomeText = data['outcome'];
|
||||||
|
html += `<p><h2>${outcomeText}</h2></p>`;
|
||||||
|
// adding img tag
|
||||||
|
let outcomeImage = 'img/' + outcomeText.replace(' ', '%20') + '.png';
|
||||||
|
html += `<img src="${outcomeImage}" width="350px" height="350px"/>`
|
||||||
|
|
||||||
|
resultsDiv.innerHTML = html;
|
||||||
|
}
|
||||||
|
})
|
||||||
|
});
|
||||||
|
}
|
Loading…
Reference in New Issue
Block a user