add character generator web page

2024-06-25 15:03:13 +01:00 · 2024-06-25 15:03:13 +01:00 · 375b664373
commit 375b664373
parent dd4aada41c
2 changed files with 91 additions and 0 deletions
--- a/web/chargen.html
+++ b/web/chargen.html
@ -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>
--- a/web/chargen.js
+++ b/web/chargen.js
@ -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));
+});