diff --git a/web/ability_check.html b/web/ability_check.html
index fe33dcc..98f2e94 100644
--- a/web/ability_check.html
+++ b/web/ability_check.html
@@ -4,6 +4,15 @@
Ability Checks
+
@@ -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 + "
"
- + "Rolled: " + data[0].rolled + "
"
- + (data[0].success ? "You Succeeded!" : "You Failed!");
+ setTimeout(() => {
+ results.textContent = '';
+ let thresholdsRolledtag = document.createElement("div");
+ thresholdsRolledtag.innerHTML = "Roll Below: " + data.threshold + " "
+ + "You Rolled: " + 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);
});
});
diff --git a/web/img/ability_check_fail2.gif b/web/img/ability_check_fail2.gif
new file mode 100644
index 0000000..57c6b81
Binary files /dev/null and b/web/img/ability_check_fail2.gif differ
diff --git a/web/img/ability_check_failed.gif b/web/img/ability_check_failed.gif
new file mode 100644
index 0000000..bfbd8a3
Binary files /dev/null and b/web/img/ability_check_failed.gif differ
diff --git a/web/img/ability_check_loading.gif b/web/img/ability_check_loading.gif
new file mode 100644
index 0000000..a18759b
Binary files /dev/null and b/web/img/ability_check_loading.gif differ
diff --git a/web/img/ability_check_succeeded.gif b/web/img/ability_check_succeeded.gif
new file mode 100644
index 0000000..6fdc241
Binary files /dev/null and b/web/img/ability_check_succeeded.gif differ
diff --git a/web/index.html b/web/index.html
index 955100a..ca39eaa 100644
--- a/web/index.html
+++ b/web/index.html
@@ -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());
});