add character generator web page

This commit is contained in:
Greg Gauthier 2024-06-25 15:03:13 +01:00
parent dd4aada41c
commit 375b664373
2 changed files with 91 additions and 0 deletions

24
web/chargen.html Normal file
View File

@ -0,0 +1,24 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Gamma World Character Generator</title>
<script src="chargen.js" defer></script>
</head>
<body>
<h1> Gamma World Character Generator </h1>
<h2> Generate A Character </h2>
<form id="characterForm">
<select id="charType">
<option value="human">Human</option>
<option value="humanoid">Humanoid</option>
<option value="mutant">Mutant</option>
<option value="cyborg">Cyborg</option>
</select>
<button type="submit">Generate character</button>
</form>
<hr/>
<div id="resultSection"></div>
</body>
</html>

67
web/chargen.js Normal file
View File

@ -0,0 +1,67 @@
document.getElementById('characterForm').addEventListener('submit', function(event) {
event.preventDefault(); // Prevents form from submitting normally
// Retrieves selected character type
var charType = document.getElementById('charType').value;
// Makes a POST request to endpoint with selected charType as parameter
fetch('http://gammaworld.gmgauthier.com/character/generate', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ chartype: charType }) // Data sent to server
})
.then(response => response.json()) // Gets the response and returns it as JSON
.then(data => { // When promise is resolved
var resultSection = document.getElementById('resultSection');
resultSection.innerHTML = '';
// Display animal-stock if it exists
if(data['animal-stock']){
resultSection.innerHTML += `<strong>Animal Stock:</strong><br/>`;
var animalStock = data['animal-stock'];
for(var prop in animalStock){
resultSection.innerHTML += ` - ${prop}: ${animalStock[prop]}<br/>`;
}
resultSection.innerHTML += "<br/>";
}
// Printing abilities
resultSection.innerHTML += "<strong>Abilities:</strong><br/>";
var abilities = data.abilities;
for(var ability in abilities) {
resultSection.innerHTML += ` - ${ability}: ${abilities[ability]}<br/>`;
}
resultSection.innerHTML += "<br/>";
// Display hp, gold, domars
resultSection.innerHTML += `<strong>hp:</strong> ${data.hp}<br/>`;
resultSection.innerHTML += `<strong>gold:</strong> ${data.gold}<br/>`;
resultSection.innerHTML += `<strong>domars:</strong> ${data.domar}<br/>`;
resultSection.innerHTML += "<br/>";
// Display mutations if they exist
if(data.mutations){
resultSection.innerHTML += `<strong>Mutations:</strong><br/>`;
var mutations = data.mutations;
resultSection.innerHTML += ` - Mental (${mutations.count.mental}): ${mutations.mental.join(', ')}<br/>`;
resultSection.innerHTML += ` - Physical (${mutations.count.physical}): ${mutations.physical.join(', ')}<br/>`;
}
// Display cybermods if they exist
if(data.cybermods){
resultSection.innerHTML += `<strong>Cybermods:</strong><br/>`;
var cybermods = data.cybermods;
if (data.cybermods.mental) {
resultSection.innerHTML += ` - Mental (${cybermods.count.mental}): ${cybermods.mental.join(', ')}<br/>`;
}
if (data.cybermods.physical) {
resultSection.innerHTML += ` - Physical (${cybermods.count.physical}): ${cybermods.physical.join(', ')}<br/>`;
}
}
})
.catch(error => console.error('Error:', error));
});