gmgauthier/gammatools
gmgauthier/gammatools
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add ability check to the web page

Browse Source
This commit is contained in:
Greg Gauthier 2024-06-30 14:00:30 +01:00
parent aa817b97d9
commit 2767a438f3
6 changed files with 35 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
web/ability_check.html
View File

@ -4,6 +4,15 @@
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="styles.css">
<title>Ability Checks</title>
<style>
#results {
text-align: center; /* Center the text */
display: flex; /* Set up for centering the image */
flex-direction: column; /* Stack the content and the image vertically */
justify-content: center; /* Center the content and the image vertically */
align-items: center; /* Center the content and the image horizontally */
}
</style>
</head>
<body>
@ -35,29 +44,43 @@
document.getElementById("abilityCheckForm").addEventListener("submit", function (event) {
event.preventDefault();
let ability_score = document.getElementById('score').value;
let multiplier = document.getElementById('multiplier').value;
let ability_score = parseInt(document.getElementById('score').value);
let multiplier = parseInt(document.getElementById('multiplier').value);
let jsonData = JSON.stringify({"ability_score": ability_score, "multiplier": multiplier});
let imgElement = document.createElement('img');
imgElement.src = 'img/ability_check_loading.gif';
let results = document.getElementById('results');
results.innerHTML = '';
results.appendChild(imgElement);
fetch("https://gammaworld.gmgauthier.com/roll/check", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
"ability_score": ability_score,
"multiplier": multiplier
}),
body: jsonData,
})
.then(response => response.json())
.then(data => {
let result = document.getElementById("results");
result.innerHTML = "Threshold: " + data[0].threshold + "<br>"
+ "Rolled: " + data[0].rolled + "<br>"
+ (data[0].success ? "You Succeeded!" : "You Failed!");
setTimeout(() => {
results.textContent = '';
let thresholdsRolledtag = document.createElement("div");
thresholdsRolledtag.innerHTML = "<b>Roll Below:&nbsp;&nbsp;</b>" + data.threshold + "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"
+ "<b>You Rolled:&nbsp;&nbsp;</b>" + data.rolled;
results.appendChild(thresholdsRolledtag)
let h2tag = document.createElement("h2");
h2tag.textContent = data.success ? "You Succeeded!" : "You Failed!";
results.appendChild(h2tag);
let imgSrc = data.success ? "img/ability_check_succeeded.gif" : "img/ability_check_failed.gif";
imgElement.src = imgSrc;
results.appendChild(imgElement);
}, 1500);
})
.catch((error) => {
console.error('Error:', error);
console.error('Failed:', error);
});
});
</script>

BIN
web/img/ability_check_fail2.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 434 KiB

BIN
web/img/ability_check_failed.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 382 KiB

BIN
web/img/ability_check_loading.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 440 KiB

BIN
web/img/ability_check_succeeded.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 566 KiB

2
web/index.html
View File

@ -34,7 +34,7 @@
document.addEventListener('DOMContentLoaded', function () {
loadContent("intro.html");
document.getElementById("tables").addEventListener("click", function () {
document.getElementById("abcheck").addEventListener("click", function () {
loadContent("ability_check.html?t=" + new Date().getTime());
});