gammatools/web/ability_check.html

88 lines
3.3 KiB
HTML
Raw Normal View History

2024-06-30 11:01:34 +00:00
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="styles.css">
<title>Ability Checks</title>
2024-06-30 13:00:30 +00:00
<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>
2024-06-30 11:01:34 +00:00
</head>
<body>
<h2>Will You Succeed?</h2>
<div class="content-container">
<form id="abilityCheckForm">
<div class="form-row">
<div class="form-field" style="margin-right: 15px">
<label for="score" style="margin-right: 2px">Ability Score</label>
<input type="number" name="score" id="score" min="3" max="24" value="10">
</div>
<div class="form-field" style="margin-left: 15px">
<label for="multiplier">Multiplier</label>
<input type="number" name="multiplier" id="multiplier" min="-100" max="100" value="5">
</div>
<div class="form-field" style="margin: 5px">
<button type="submit" style="margin: 3px">Roll</button>
</div>
</div>
</form>
</div>
<hr/>
<div id="results"></div>
<script>
document.getElementById("abilityCheckForm").addEventListener("submit", function (event) {
event.preventDefault();
2024-06-30 13:00:30 +00:00
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);
2024-06-30 11:01:34 +00:00
fetch("https://gammaworld.gmgauthier.com/roll/check", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
2024-06-30 13:00:30 +00:00
body: jsonData,
2024-06-30 11:01:34 +00:00
})
.then(response => response.json())
.then(data => {
2024-06-30 13:00:30 +00:00
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);
2024-06-30 11:01:34 +00:00
2024-06-30 13:00:30 +00:00
let imgSrc = data.success ? "img/ability_check_succeeded.gif" : "img/ability_check_failed.gif";
imgElement.src = imgSrc;
results.appendChild(imgElement);
}, 1500);
2024-06-30 11:01:34 +00:00
})
.catch((error) => {
2024-06-30 13:00:30 +00:00
console.error('Failed:', error);
2024-06-30 11:01:34 +00:00
});
});
</script>
</body>
</html>