add an encounters web page

2024-06-26 08:45:20 +01:00 · 2024-06-26 08:45:20 +01:00 · 00e1e24d6b
commit 00e1e24d6b
parent 317614f4a8
2 changed files with 62 additions and 0 deletions
--- a/web/encounter.html
+++ b/web/encounter.html
@ -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>
--- a/web/encounter.js
+++ b/web/encounter.js
@ -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;
+        })
+    });
+});