add ability check to the web page
This commit is contained in:
parent
aa817b97d9
commit
2767a438f3
@ -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: </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) => {
|
||||
console.error('Error:', error);
|
||||
console.error('Failed:', error);
|
||||
});
|
||||
});
|
||||
</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 () {
|
||||
loadContent("intro.html");
|
||||
|
||||
document.getElementById("tables").addEventListener("click", function () {
|
||||
document.getElementById("abcheck").addEventListener("click", function () {
|
||||
loadContent("ability_check.html?t=" + new Date().getTime());
|
||||
});
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user