add physical attack;rearrange buttons;add gif animations

web/encounter.js

@@ -1,47 +1,51 @@
-document.getElementById('terrainForm').addEventListener('submit', function(event) {
+document.getElementById('terrainForm').addEventListener('submit', function (event) {
     event.preventDefault();
     var terrain = document.getElementById('terrainType').value;
 
+    // Insert the loading.gif before making the fetch request
+    let resultSection = document.getElementById('resultSection');
+    resultSection.innerHTML = '';
+    let imgElement = document.createElement('img');
+    imgElement.src = 'img/checking.gif';
+    imgElement.style.width = '500px';
+    imgElement.style.height = '500px';
+    imgElement.style.display = 'block';
+    imgElement.style.marginLeft = 'auto';
+    imgElement.style.marginRight = 'auto';
+    resultSection.appendChild(imgElement);
+
     fetch('https://gammaworld.gmgauthier.com/roll/encounter', {
         method: 'POST',
         headers: {
-            'Content-Type': 'application/json'
+            'Content-Type': 'application/json',
         },
         body: JSON.stringify({
-            "terrain": terrain
+            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.innerHTML = '';
-
-        // Create an image element and set its src to the corresponding jpeg image
-        let imgElement = document.createElement("img");
-        imgElement.alt = encounterText;
-        imgElement.width = 500; // You can set width as per your choice
-        imgElement.height = 500; // You can set height as per your choice
-        imgElement.onerror = function() {
-            this.onerror=null;
-            this.src='./img/404.jpg';
+        .then((response) => {
+            if (!response.ok) {
+                throw response;
             }
-        imgElement.src = "./img/" + encounterText + ".jpg";
-
-        // Append the image element to the resultSection
-        resultSection.appendChild(imgElement);
-    }).catch(err => {
-        err.text().then(errorMessage => {
-            let imgElement = document.createElement("img");
-            imgElement.src = "./img/404.jpg";
-            imgElement.width = 500;
-            imgElement.height = 500;
-
-            let resultSection = document.getElementById('resultSection');
-            resultSection.innerHTML = '';
-            resultSection.appendChild(imgElement);
+            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';
+
+            // Change the src attribute of the image after fetch resolves
+            setTimeout(() => {
+                imgElement.src = './img/' + encounterText + ".jpg";
+            }, 1000);
+
+            imgElement.onerror = function () {
+                this.onerror = null;
+                this.src = './img/404.jpg';
+            };
+        })
+        .catch((err) => {
+            err.text().then((errorMessage) => {
+                imgElement.src = './img/404.jpg';
+            });
         });
 });

web/index.html

@@ -9,13 +9,19 @@
 <h1>Gamma World Gaming Tools</h1>
 </div>
 
-<div id="button-panel" style="text-align: center">
-<button id="dieroller">Dice</button>
-<button id="encounter">Encounters</button>
-<button id="mentalattack">Mental Attack!</button>
-<button id="chargen">Characters</button>
-
+<div id="probability-panel" style="text-align: center; margin: 3px">
+    <button id="dieroller">Dice</button>
+    <button id="coinflip">Flip Coin</button>
+    <button id="chance">Roll Chance</button>
 </div>
+<div id="button-panel" style="text-align: center; margin: 3px">
+
+    <button id="encounter">Encounters</button>
+    <button id="physicalattack">Physical Attack!</button>
+    <button id="mentalattack">Mental Attack!</button>
+    <button id="chargen">Characters</button>
+</div>
+
 <hr/>
 <div id="toolPanel"></div>
 
@@ -33,10 +39,90 @@
             loadContent("mentalattack.html?t=" + new Date().getTime());
         });
 
+        document.getElementById("physicalattack").addEventListener("click", function () {
+            loadContent("physicalattack.html?t=" + new Date().getTime());
+        });
+
         document.getElementById("chargen").addEventListener("click", function () {
             loadContent("chargen.html?t=" + new Date().getTime());
         });
 
+        document.getElementById("coinflip").addEventListener("click", function () {
+            let commonImgSize = '250px'
+            // Display a placeholder image or loading indicator
+            let imgElement = document.createElement('img');
+            imgElement.src = 'img/loading.gif';
+            imgElement.style.width = commonImgSize;
+            imgElement.style.height = commonImgSize;
+
+            // Center the image
+            imgElement.style.display = 'block';
+            imgElement.style.marginLeft = 'auto';
+            imgElement.style.marginRight = 'auto';
+
+            document.getElementById('toolPanel').innerHTML = '';
+            document.getElementById('toolPanel').appendChild(imgElement);
+
+            fetch('https://gammaworld.gmgauthier.com/coinflip')
+                .then(response => response.text())
+                .then(data => {
+                    let imgSrc = 'img/' + data.replace(/\"/g, '') + '.jpg';
+                    setTimeout(() => {
+                        imgElement.src = imgSrc;
+                    }, 1500);
+                })
+                .catch((error) => {
+                    console.error('Error:', error);
+                });
+        });
+
+        document.getElementById('chance').addEventListener('click', function(event) {
+            event.preventDefault();
+
+            // Insert the odds.gif before making the fetch request
+            let resultSection = document.getElementById('toolPanel');
+            resultSection.innerHTML = '';
+            let imgElement = document.createElement('img');
+            imgElement.src = 'img/odds.gif';
+            imgElement.style.width = '250px';
+            imgElement.style.height = '250px';
+            imgElement.style.display = 'block';
+            imgElement.style.marginLeft = 'auto';
+            imgElement.style.marginRight = 'auto';
+            resultSection.appendChild(imgElement);
+
+            fetch('https://gammaworld.gmgauthier.com/roll/chance', {
+                method: 'GET',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+            })
+                .then((response) => {
+                    if (!response.ok) {
+                        throw response;
+                    }
+                    return response.json();
+                })
+                .then((json) => {
+                    // Add a delay of 1 second (1000 milliseconds) before changing the image.
+                    setTimeout(() => {
+                        // Remove loading gif from HTML
+                        imgElement.style.display = 'none';
+
+                        // Show the result with %+ in large bold centered text
+                        let resultText = document.createElement('p');
+                        resultText.style.fontSize = '32px'; // Large text
+                        resultText.style.fontWeight = 'bold'; // Bold text
+                        resultText.style.textAlign = 'center'; // Centered text
+                        resultText.textContent = json.result + '%'; // Append % to the result value
+
+                        resultSection.appendChild(resultText);
+                    }, 1000);
+                })
+                .catch((err) => {
+                    console.log('Request failed', err);
+                });
+        });
     });
 
     function loadContent(pageUrl) {
@@ -45,7 +131,7 @@
         iframe.style.width = '100%'; // make the iframe take full width of the container
         iframe.style.border = 'none';  // hide the border
         iframe.style.overflow = 'hidden'; // hide scrollbars, can be 'auto' if you prefer automatic scrollbars
-        iframe.style.height = '750px'; // set a height so that the iframe is visible, adjust as per your needs
+        iframe.style.height = '800px'; // set a height so that the iframe is visible, adjust as per your needs
         document.getElementById("toolPanel").innerHTML = '';
         document.getElementById("toolPanel").appendChild(iframe);
     }

web/physicalattack.html

@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Gamma World Physical Attack Roll</title>
+    <link rel="stylesheet" type="text/css" href="styles.css">
+    <script src="physicalattack.js" defer></script>
+</head>
+<body>
+
+<h2>Attempt A Physical Attack</h2>
+
+<div class="content-container">
+    <form id="physicalAttackForm">
+        <div class="form-row">
+            <div class="form-field">
+                <label for="dac">Defender Armour Class:</label>
+                <input type="number" name="dac" id="dac" min="1" max="10" value="5">
+            </div>
+            <div class="form-field">
+                <label for="weapon_attack">Weapon Attack?</label>
+                <input type="checkbox" name="weapon_attack" id="weapon_attack"/>
+            </div>
+        </div>
+        <div class="form-row">
+            <div class="form-field">
+                <label for="awc">Attacker Weapon Class:</label>
+                <input type="number" name="awc" id="awc" min="1" max="16" value="8">
+            </div>
+            <div class="form-field">
+                <label for="ahd">Attacker Hit Dice:</label>
+                <input type="number" name="ahd" id="ahd" min="1" max="16" value="8">
+            </div>
+            </div>
+        <div class="form-row">
+            <div class="form-field">
+                <label for="modifier">Modifier:</label>
+                <input type="number" name="modifier" id="modifier" min="-100" max="100" value="0">
+            </div>
+            <div class="form-field">
+                <button type="submit">Attack!</button>
+            </div>
+        </div>
+    </form>
+</div>
+
+<hr/>
+<div id="results"></div>
+</body>
+</html>

web/physicalattack.js

@@ -0,0 +1,58 @@
+window.onload = function () {
+    document.getElementById('physicalAttackForm').addEventListener('submit', function (event) {
+        event.preventDefault();  // Prevent the form from submitting the normal way
+
+        const dac = parseInt(document.getElementById('dac').value, 10);
+        const awc = parseInt(document.getElementById('awc').value, 10);
+        const ahd = parseInt(document.getElementById('ahd').value, 10);
+        const modifier = parseInt(document.getElementById('modifier').value, 10);
+        const weapon_attack = document.getElementById('weapon_attack').checked;
+
+        fetch('https://gammaworld.gmgauthier.com/roll/attack/physical', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({
+                weapon_attack: weapon_attack,
+                modifier: modifier,
+                dac: dac,
+                awc: awc,
+                ahd: ahd
+            }),
+        })
+            .then(response => response.json())
+            .then(data => {
+                const resultsDiv = document.getElementById('results');
+                let html = '';
+
+                if (data['needed']) {
+                    html += `<p><b>Needed: </b>${data['needed']} &emsp;&emsp;&emsp;&emsp;&emsp;`;
+                }
+
+                if (data['original-roll']) {
+                    html += `<b>Original Roll: </b>${data['original-roll']}</p>`;
+                }
+
+                if (data['modifier']) {
+                    html += `<p><b>Modifier: </b>${data['modifier']} &emsp;&emsp;&emsp;&emsp;&emsp;`;
+                }
+
+                if (data['adjusted-roll']) {
+                    html += `<b>Adjusted Roll: </b> ${data['adjusted-roll']}</p>`;
+                }
+
+                html += `<br/>`;
+
+                if (data['outcome']) {
+                    let outcomeText = data['outcome'];
+                    html += `<p><h2>${outcomeText}</h2></p>`;
+                    // adding img tag
+                    let outcomeImage = 'img/' + outcomeText.replace(' ', '%20') + '.png';
+                    html += `<img src="${outcomeImage}" width="350px" height="350px"/>`
+
+                    resultsDiv.innerHTML = html;
+                }
+            })
+    });
+}