add ability check to the web page
This commit is contained in:
parent
aa817b97d9
commit
2767a438f3
@ -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: </b>" + data.threshold + " "
|
||||||
|
+ "<b>You Rolled: </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
BIN
web/img/ability_check_fail2.gif
Normal file
Binary file not shown.
After Width: | Height: | Size: 434 KiB |
BIN
web/img/ability_check_failed.gif
Normal file
BIN
web/img/ability_check_failed.gif
Normal file
Binary file not shown.
After Width: | Height: | Size: 382 KiB |
BIN
web/img/ability_check_loading.gif
Normal file
BIN
web/img/ability_check_loading.gif
Normal file
Binary file not shown.
After Width: | Height: | Size: 440 KiB |
BIN
web/img/ability_check_succeeded.gif
Normal file
BIN
web/img/ability_check_succeeded.gif
Normal file
Binary file not shown.
After Width: | Height: | Size: 566 KiB |
@ -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());
|
||||||
});
|
});
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user