add physical attack;rearrange buttons;add gif animations

This commit is contained in:
Greg Gauthier 2024-06-29 20:25:55 +01:00
parent f06b426d49
commit b1f9c0734b
9 changed files with 239 additions and 41 deletions

View File

@ -2,46 +2,50 @@ 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 => { .then((response) => {
if (!response.ok) { throw response } if (!response.ok) {
return response.json() // we only get here if there is no error throw response;
}).then(json => { }
return response.json(); // we only get here if there is no error
})
.then((json) => {
// Handle null encounter // Handle null encounter
let encounterText = json.encounter ? json.encounter : "No Encounter"; let encounterText = json.encounter ? json.encounter : 'No Encounter';
let resultSection = document.getElementById('resultSection');
resultSection.innerHTML = ''; // Change the src attribute of the image after fetch resolves
setTimeout(() => {
imgElement.src = './img/' + encounterText + ".jpg";
}, 1000);
// Create an image element and set its src to the corresponding jpeg image
let imgElement = document.createElement("img");
imgElement.alt = encounterText;
imgElement.width = 500; // You can set width as per your choice
imgElement.height = 500; // You can set height as per your choice
imgElement.onerror = function () { imgElement.onerror = function () {
this.onerror = null; this.onerror = null;
this.src = './img/404.jpg'; this.src = './img/404.jpg';
} };
imgElement.src = "./img/" + encounterText + ".jpg";
// Append the image element to the resultSection
resultSection.appendChild(imgElement);
}).catch(err => {
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

Binary file not shown.

After

Width:  |  Height:  |  Size: 33 KiB

BIN
web/img/Tails.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 43 KiB

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

Binary file not shown.

After

Width:  |  Height:  |  Size: 636 KiB

BIN
web/img/odds.gif Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.8 MiB

View File

@ -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="coinflip">Flip Coin</button>
<button id="chance">Roll Chance</button>
</div>
<div id="button-panel" style="text-align: center; margin: 3px">
<button id="encounter">Encounters</button> <button id="encounter">Encounters</button>
<button id="physicalattack">Physical Attack!</button>
<button id="mentalattack">Mental Attack!</button> <button id="mentalattack">Mental Attack!</button>
<button id="chargen">Characters</button> <button id="chargen">Characters</button>
</div> </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
View 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
View 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']} &emsp;&emsp;&emsp;&emsp;&emsp;`;
}
if (data['original-roll']) {
html += `<b>Original Roll: </b>${data['original-roll']}</p>`;
}
if (data['modifier']) {
html += `<p><b>Modifier: </b>${data['modifier']} &emsp;&emsp;&emsp;&emsp;&emsp;`;
}
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;
}
})
});
}