gammatools/web/ability_check.html

107 lines
4.6 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link href="styles.css" rel="stylesheet" type="text/css">
<script src="config.js"></script>
<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>
<h2>Will You Succeed?</h2>
<div id="instructions">
<ul>
<li>
<p><h4>Ability Score:</h4> Entered into the first field. So, for example, if you are doing an
intelligence check, then enter your intelligence score. Anything between 3 and 21 is
accepted.</p>
</li>
<li>
<p><h4>Probability Multiplier:</h4> <b>NOTE:</b> <em>This is not a die-roll modifier. </em>
It sets the chance threshold (score x multiplier). Above which, you fail. Below which,
you succeed. This number defaults to 5 (i.e. 50-50 with an attribute score of 10. So,
an Intelligence score of 14 gives you a 70% chance of succeeding at your task. However,
your character's other attributes can affect this roll. So, if you suffer from the
Anti-Charisma mutation, and you're rolling a charisma check with a base score of 9, will
result in a 20% chance of success ((95)*5). Environmental factors can also affect the
multiplier. So, for example, if you're rolling a constitution check, and you've been marching
all day, then the number will be lowered by the level of fatigue you're at. So, assuming a
base constitution of 12, then (12*(5-3)) would take a normal 60% chance down to a 24% chance.</p>
</li>
</ul>
<p>
</div>
<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 id="score" max="24" min="3" name="score" type="number" value="10">
</div>
<div class="form-field" style="margin-left: 15px">
<label for="multiplier">Multiplier</label>
<input id="multiplier" max="10" min="1" name="multiplier" type="number" value="5">
</div>
<div class="form-field" style="margin: 5px">
<button style="margin: 3px" type="submit">Roll</button>
</div>
</div>
</form>
</div>
<hr/>
<div id="results"></div>
<script>
document.getElementById("abilityCheckForm").addEventListener("submit", function (event) {
event.preventDefault();
let ability_score = parseInt(document.getElementById('score').value);
let multiplier = parseInt(document.getElementById('multiplier').value);
const queryParams = new URLSearchParams({
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(`${window.BASE_URL}/gameplay/ability/check?${queryParams}`)
.then(response => response.json())
.then(data => {
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);
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('Failed:', error);
});
});
</script>
</body>
</html>