2024-06-30 11:01:34 +00:00
|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
|
<html lang="en">
|
|
|
|
|
|
<head>
|
|
|
|
|
|
<meta charset="UTF-8">
|
2024-07-14 22:04:58 +00:00
|
|
|
|
<link href="styles.css" rel="stylesheet" type="text/css">
|
2024-07-01 15:03:40 +00:00
|
|
|
|
<script src="config.js"></script>
|
2024-06-30 11:01:34 +00:00
|
|
|
|
<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>
|
|
|
|
|
|
|
2024-07-14 22:04:58 +00:00
|
|
|
|
<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 ((9–5)*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>
|
2024-06-30 11:01:34 +00:00
|
|
|
|
<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>
|
2024-07-14 22:04:58 +00:00
|
|
|
|
<input id="score" max="24" min="3" name="score" type="number" value="10">
|
2024-06-30 11:01:34 +00:00
|
|
|
|
</div>
|
|
|
|
|
|
<div class="form-field" style="margin-left: 15px">
|
|
|
|
|
|
<label for="multiplier">Multiplier</label>
|
2024-07-14 22:04:58 +00:00
|
|
|
|
<input id="multiplier" max="10" min="1" name="multiplier" type="number" value="5">
|
2024-06-30 11:01:34 +00:00
|
|
|
|
</div>
|
|
|
|
|
|
<div class="form-field" style="margin: 5px">
|
2024-07-14 22:04:58 +00:00
|
|
|
|
<button style="margin: 3px" type="submit">Roll</button>
|
2024-06-30 11:01:34 +00:00
|
|
|
|
</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);
|
2024-07-01 15:03:40 +00:00
|
|
|
|
|
|
|
|
|
|
const queryParams = new URLSearchParams({
|
|
|
|
|
|
score: ability_score,
|
|
|
|
|
|
multiplier: multiplier
|
|
|
|
|
|
});
|
2024-06-30 13:00:30 +00:00
|
|
|
|
|
|
|
|
|
|
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
|
|
|
|
|
2024-07-01 15:03:40 +00:00
|
|
|
|
fetch(`${window.BASE_URL}/gameplay/ability/check?${queryParams}`)
|
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: </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);
|
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>
|
