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"> <meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="styles.css"> <link rel="stylesheet" type="text/css" href="styles.css">
<title>Ability Checks</title> <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> </head>
<body> <body>
@ -35,29 +44,43 @@
document.getElementById("abilityCheckForm").addEventListener("submit", function (event) { document.getElementById("abilityCheckForm").addEventListener("submit", function (event) {
event.preventDefault(); event.preventDefault();
let ability_score = document.getElementById('score').value; let ability_score = parseInt(document.getElementById('score').value);
let multiplier = document.getElementById('multiplier').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", { fetch("https://gammaworld.gmgauthier.com/roll/check", {
method: "POST", method: "POST",
headers: { headers: {
"Content-Type": "application/json", "Content-Type": "application/json",
}, },
body: JSON.stringify({ body: jsonData,
"ability_score": ability_score,
"multiplier": multiplier
}),
}) })
.then(response => response.json()) .then(response => response.json())
.then(data => { .then(data => {
let result = document.getElementById("results"); setTimeout(() => {
result.innerHTML = "Threshold: " + data[0].threshold + "<br>" results.textContent = '';
+ "Rolled: " + data[0].rolled + "<br>" let thresholdsRolledtag = document.createElement("div");
+ (data[0].success ? "You Succeeded!" : "You Failed!"); 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) => { .catch((error) => {
console.error('Error:', error); console.error('Failed:', error);
}); });
}); });
</script> </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 () { document.addEventListener('DOMContentLoaded', function () {
loadContent("intro.html"); loadContent("intro.html");
document.getElementById("tables").addEventListener("click", function () { document.getElementById("abcheck").addEventListener("click", function () {
loadContent("ability_check.html?t=" + new Date().getTime()); loadContent("ability_check.html?t=" + new Date().getTime());
}); });