add character generator web page
This commit is contained in:
parent
dd4aada41c
commit
375b664373
24
web/chargen.html
Normal file
24
web/chargen.html
Normal 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
67
web/chargen.js
Normal 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));
|
||||||
|
});
|
Loading…
Reference in New Issue
Block a user