gmgauthier/gammatools
gmgauthier/gammatools
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor web pages to work with new endpoints

Browse Source
This commit is contained in:
Greg Gauthier 2024-07-01 16:03:40 +01:00
parent 963d4cc475
commit 98579ca17f
15 changed files with 59 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
web/ability_check.html
View File

@ -3,6 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="styles.css"> <link rel="stylesheet" type="text/css" href="styles.css">
<script src="config.js"></script>
<title>Ability Checks</title> <title>Ability Checks</title>
<style> <style>
#results { #results {
@ -46,22 +47,19 @@
let ability_score = parseInt(document.getElementById('score').value); let ability_score = parseInt(document.getElementById('score').value);
let multiplier = parseInt(document.getElementById('multiplier').value); let multiplier = parseInt(document.getElementById('multiplier').value);
let jsonData = JSON.stringify({"ability_score": ability_score, "multiplier": multiplier});
const queryParams = new URLSearchParams({
score: ability_score,
multiplier: multiplier
});
let imgElement = document.createElement('img'); let imgElement = document.createElement('img');
imgElement.src = 'img/ability_check_loading.gif'; imgElement.src = 'img/ability_check_loading.gif';
let results = document.getElementById('results'); let results = document.getElementById('results');
results.innerHTML = ''; results.innerHTML = '';
results.appendChild(imgElement); results.appendChild(imgElement);
fetch("https://gammaworld.gmgauthier.com/roll/check", { fetch(`${window.BASE_URL}/gameplay/ability/check?${queryParams}`)
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: jsonData,
})
.then(response => response.json()) .then(response => response.json())
.then(data => { .then(data => {
setTimeout(() => { setTimeout(() => {

1
web/chargen.html
View File

@ -3,6 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Gamma World Character Generator</title> <title>Gamma World Character Generator</title>
<script src="config.js"></script>
<script src="chargen.js" defer></script> <script src="chargen.js" defer></script>
</head> </head>
<body> <body>

12
web/chargen.js
View File

@ -3,15 +3,11 @@ document.getElementById('characterForm').addEventListener('submit', function(eve
// Retrieves selected character type // Retrieves selected character type
var charType = document.getElementById('charType').value; var charType = document.getElementById('charType').value;
const queryParams = new URLSearchParams({
chartype: charType,
});
// Makes a POST request to endpoint with selected charType as parameter // Makes a POST request to endpoint with selected charType as parameter
fetch('https://gammaworld.gmgauthier.com/character/generate', { fetch(`${window.BASE_URL}/rules/character?${queryParams}`)
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(response => response.json()) // Gets the response and returns it as JSON
.then(data => { // When promise is resolved .then(data => { // When promise is resolved

16
web/config.js
View File

@ -1,10 +1,8 @@
// config.js
let environment = window.location.hostname === 'parmenides' ? 'dev' : 'prod';
fetch('./config.json') if (window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1') {
.then(response => response.json()) window.BASE_URL = 'http://127.0.0.1:5000';
.then(config => { } else {
window.BASE_URL = config[environment].BASE_URL; window.BASE_URL = 'https://gammaworld.gmgauthier.com';
console.log("BASE URL:", window.BASE_URL); }
}) console.log(window.location.hostname)
.catch(error => console.error('Error:', error)); console.log(window.BASE_URL)

3
web/display_tables.html
View File

@ -2,6 +2,7 @@
<html> <html>
<head> <head>
<title>Table View</title> <title>Table View</title>
<script src="config.js"></script>
<style> <style>
table { table {
border-collapse: collapse; border-collapse: collapse;
@ -87,7 +88,7 @@
} }
document.addEventListener('DOMContentLoaded', function () { document.addEventListener('DOMContentLoaded', function () {
fetch('https://gammaworld.gmgauthier.com/matrices/dump') fetch(`${window.BASE_URL}/rules/tables`)
.then(response => response.json()) .then(response => response.json())
.then(data => { .then(data => {
parseAndRenderData(data) parseAndRenderData(data)

1
web/encounter.html
View File

@ -3,6 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Gamma World Encounter Check</title> <title>Gamma World Encounter Check</title>
<script src="config.js"></script>
<script src="encounter.js" defer></script> <script src="encounter.js" defer></script>
</head> </head>
<body> <body>

13
web/encounter.js
View File

@ -1,6 +1,9 @@
document.getElementById('terrainForm').addEventListener('submit', function (event) { document.getElementById('terrainForm').addEventListener('submit', function (event) {
event.preventDefault(); event.preventDefault();
var terrain = document.getElementById('terrainType').value; var terrain = document.getElementById('terrainType').value;
const queryParams = new URLSearchParams({
terrain: terrain,
});
// Insert the loading.gif before making the fetch request // Insert the loading.gif before making the fetch request
let resultSection = document.getElementById('resultSection'); let resultSection = document.getElementById('resultSection');
@ -14,15 +17,7 @@ document.getElementById('terrainForm').addEventListener('submit', function (even
imgElement.style.marginRight = 'auto'; imgElement.style.marginRight = 'auto';
resultSection.appendChild(imgElement); resultSection.appendChild(imgElement);
fetch('https://gammaworld.gmgauthier.com/roll/encounter', { fetch(`${window.BASE_URL}/gameplay/encounter?${queryParams}`)
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
terrain: terrain,
}),
})
.then((response) => { .then((response) => {
if (!response.ok) { if (!response.ok) {
throw response; throw response;

1
web/index.html
View File

@ -3,6 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="styles.css"> <link rel="stylesheet" type="text/css" href="styles.css">
<script src="config.js"></script>
<title>Gamma World Gaming Tools</title> <title>Gamma World Gaming Tools</title>
</head> </head>
<body> <body>

1
web/mentalattack.html
View File

@ -4,6 +4,7 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Gamma World Mental Attack Roll</title> <title>Gamma World Mental Attack Roll</title>
<link rel="stylesheet" type="text/css" href="styles.css"> <link rel="stylesheet" type="text/css" href="styles.css">
<script src="config.js"></script>
<script src="mentalattack.js" defer></script> <script src="mentalattack.js" defer></script>
</head> </head>
<body> <body>

13
web/mentalattack.js
View File

@ -5,18 +5,13 @@ window.onload = function () {
const ams = parseInt(document.getElementById('ams').value, 10); const ams = parseInt(document.getElementById('ams').value, 10);
const dms = parseInt(document.getElementById('dms').value, 10); const dms = parseInt(document.getElementById('dms').value, 10);
const modifier = parseInt(document.getElementById('modifier').value, 0); const modifier = parseInt(document.getElementById('modifier').value, 0);
const queryParams = new URLSearchParams({
fetch('https://gammaworld.gmgauthier.com/roll/attack/mental', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
ams: ams, ams: ams,
dms: dms, dms: dms,
modifier: modifier modifier: modifier
}), });
})
fetch(`${window.BASE_URL}/gameplay/attack/mental?${queryParams}`)
.then(response => response.json()) .then(response => response.json())
.then(data => { .then(data => {
const resultsDiv = document.getElementById('results'); const resultsDiv = document.getElementById('results');

25
web/physicalattack.html
View File

@ -4,6 +4,7 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Gamma World Physical Attack Roll</title> <title>Gamma World Physical Attack Roll</title>
<link rel="stylesheet" type="text/css" href="styles.css"> <link rel="stylesheet" type="text/css" href="styles.css">
<script src="config.js"></script>
<script src="physicalattack.js" defer></script> <script src="physicalattack.js" defer></script>
</head> </head>
<body> <body>
@ -11,31 +12,29 @@
<h2>Attempt A Physical Attack</h2> <h2>Attempt A Physical Attack</h2>
<div class="content-container"> <div class="content-container">
<p><b>Only supply a number required for the type of attack. If you are making a weapon attack, only fill in
the Attacker Weapon Class. If you are making a non-weapon attack, only fill in the Attacker Hit
Dice.
</b></p>
<form id="physicalAttackForm"> <form id="physicalAttackForm">
<div class="form-row"> <div class="form-row">
<div class="form-field"> <div class="form-field">
<label for="dac">Defender Armour Class:</label> <label for="awc">Attacker WC:</label>
<input type="number" name="dac" id="dac" min="1" max="10" value="5"> <input type="number" name="awc" id="awc" min="1" max="16"style="margin-right: 5px">
</div> </div>
<div class="form-field"> <div class="form-field">
<label for="weapon_attack">Weapon Attack?</label> <label for="ahd">Attacker HD:</label>
<input type="checkbox" name="weapon_attack" id="weapon_attack"/> <input type="number" name="ahd" id="ahd" min="1" max="16" style="margin-right: 5px">
</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>
<div class="form-field"> <div class="form-field">
<label for="ahd">Attacker Hit Dice:</label> <label for="dac">Defender AC:</label>
<input type="number" name="ahd" id="ahd" min="1" max="16" value="8"> <input type="number" name="dac" id="dac" min="1" max="10" value="5" style="margin-right: 5px">
</div> </div>
</div> </div>
<div class="form-row"> <div class="form-row">
<div class="form-field"> <div class="form-field">
<label for="modifier">Modifier:</label> <label for="modifier">Modifier:</label>
<input type="number" name="modifier" id="modifier" min="-100" max="100" value="0"> <input type="number" name="modifier" id="modifier" min="-100" max="100" value="0" style="margin-right: 10px">
</div> </div>
<div class="form-field"> <div class="form-field">
<button type="submit">Attack!</button> <button type="submit">Attack!</button>

19
web/physicalattack.js
View File

@ -6,21 +6,14 @@ window.onload = function () {
const awc = parseInt(document.getElementById('awc').value, 10); const awc = parseInt(document.getElementById('awc').value, 10);
const ahd = parseInt(document.getElementById('ahd').value, 10); const ahd = parseInt(document.getElementById('ahd').value, 10);
const modifier = parseInt(document.getElementById('modifier').value, 10); const modifier = parseInt(document.getElementById('modifier').value, 10);
const weapon_attack = document.getElementById('weapon_attack').checked; const queryParams = new URLSearchParams({
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, dac: dac,
awc: awc, awc: awc,
ahd: ahd ahd: ahd,
}), modifier: modifier
}) });
fetch(`${window.BASE_URL}/gameplay/attack/physical?${queryParams}`)
.then(response => response.json()) .then(response => response.json())
.then(data => { .then(data => {
const resultsDiv = document.getElementById('results'); const resultsDiv = document.getElementById('results');

3
web/rolldice.html
View File

@ -4,7 +4,8 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Gamma World Die Roller</title> <title>Gamma World Die Roller</title>
<link rel="stylesheet" type="text/css" href="styles.css"> <link rel="stylesheet" type="text/css" href="styles.css">
<script type="module" src="rolldice.js" defer></script> <script src="config.js"></script>
<script src="rolldice.js" defer></script>
</head> </head>
<body> <body>

2
web/rolldice.js
View File

@ -12,7 +12,7 @@ window.onload = function () {
discard_lowest: discard discard_lowest: discard
}); });
fetch(`http://127.0.0.1:5000/dice?${queryParams}`) fetch(`${window.BASE_URL}/dice?${queryParams}`)
.then(response => response.json()) .then(response => response.json())
.then(data => { .then(data => {
const resultsDiv = document.getElementById('results'); const resultsDiv = document.getElementById('results');

2
web/styles.css
View File

@ -9,7 +9,7 @@
flex-direction: row; /* changed this from column */ flex-direction: row; /* changed this from column */
align-items: center; /* added this to vertically align elements in the row */ align-items: center; /* added this to vertically align elements in the row */
justify-content: space-between; /* added this to put some space between the label and the input field */ justify-content: space-between; /* added this to put some space between the label and the input field */
width: 200px; /* optionally set a width to keep it consistent */ width: 275px; /* optionally set a width to keep it consistent */
} }
.content-container { .content-container {