gmgauthier/gammatools
gmgauthier/gammatools
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add an encounters web page

Browse Source
This commit is contained in:
Greg Gauthier 2024-06-26 08:45:20 +01:00
parent 317614f4a8
commit 00e1e24d6b
2 changed files with 62 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
web/encounter.html Normal file
View File

@ -0,0 +1,29 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Gamma World Game Play</title>
<script src="encounter.js" defer></script>
</head>
<body>
<h1> Gamma World Encounter Check</h1>
<h2>Choose Terrain Being Traverse</h2>
<!-- Valid values are: '
'"clear", "mountains", "forest", "desert", "watery", "ruins", "deathlands"' -->
<form id="terrainForm">
<select id="terrainType">
<option value="clear">Clear</option>
<option value="mountains">Mountainous</option>
<option value="forest">Forest</option>
<option value="desert">Desert</option>
<option value="watery">Watery</option>
<option value="ruins">Ruins</option>
<option value="deathlands">Death Lands</option>
</select>
<button type="submit">Check For Encounter</button>
</form>
<hr/>
<div id="resultSection"></div>
</body>
</html>

33
web/encounter.js Normal file
View File

@ -0,0 +1,33 @@
document.getElementById('terrainForm').addEventListener('submit', function(event) {
event.preventDefault();
var terrain = document.getElementById('terrainType').value;
fetch('https://gammaworld.gmgauthier.com/roll/encounter', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
"terrain": terrain
})
}).then(response => {
if (!response.ok) { throw response }
return response.json() //we only get here if there is no error
}).then(json => {
//Handle null encounter
let encounterText = json.encounter ? json.encounter : "No Encounter";
let resultSection = document.getElementById('resultSection');
resultSection.style.textAlign = 'center'; // To center text
resultSection.style.fontSize = '1.5em'; // Relative to current font-size (1.5 times the size of the current font)
resultSection.style.fontWeight = 'bold'; //To make it bold like H3
resultSection.innerText = encounterText;
}).catch(err => {
err.text().then(errorMessage => {
let resultSection = document.getElementById('resultSection');
resultSection.style.textAlign = 'center';
resultSection.style.fontSize = '1.5em';
resultSection.style.fontWeight = 'bold';
resultSection.innerText = errorMessage;
})
});
});