65 lines
2.1 KiB
HTML
65 lines
2.1 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<link rel="stylesheet" type="text/css" href="styles.css">
|
||
|
|
<title>Ability Checks</title>
|
||
|
|
</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();
|
||
|
|
|
||
|
|
let ability_score = document.getElementById('score').value;
|
||
|
|
let multiplier = document.getElementById('multiplier').value;
|
||
|
|
|
||
|
|
fetch("https://gammaworld.gmgauthier.com/roll/check", {
|
||
|
|
method: "POST",
|
||
|
|
headers: {
|
||
|
|
"Content-Type": "application/json",
|
||
|
|
},
|
||
|
|
body: JSON.stringify({
|
||
|
|
"ability_score": ability_score,
|
||
|
|
"multiplier": multiplier
|
||
|
|
}),
|
||
|
|
})
|
||
|
|
.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!");
|
||
|
|
|
||
|
|
})
|
||
|
|
.catch((error) => {
|
||
|
|
console.error('Error:', error);
|
||
|
|
});
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|