refactor web pages to work with new endpoints
This commit is contained in:
parent
963d4cc475
commit
98579ca17f
@ -3,6 +3,7 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<link rel="stylesheet" type="text/css" href="styles.css">
|
||||
<script src="config.js"></script>
|
||||
<title>Ability Checks</title>
|
||||
<style>
|
||||
#results {
|
||||
@ -46,22 +47,19 @@
|
||||
|
||||
let ability_score = parseInt(document.getElementById('score').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');
|
||||
imgElement.src = 'img/ability_check_loading.gif';
|
||||
|
||||
let results = document.getElementById('results');
|
||||
results.innerHTML = '';
|
||||
results.appendChild(imgElement);
|
||||
|
||||
fetch("https://gammaworld.gmgauthier.com/roll/check", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: jsonData,
|
||||
})
|
||||
fetch(`${window.BASE_URL}/gameplay/ability/check?${queryParams}`)
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
setTimeout(() => {
|
||||
|
@ -3,6 +3,7 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Gamma World Character Generator</title>
|
||||
<script src="config.js"></script>
|
||||
<script src="chargen.js" defer></script>
|
||||
</head>
|
||||
<body>
|
||||
|
@ -3,15 +3,11 @@ document.getElementById('characterForm').addEventListener('submit', function(eve
|
||||
|
||||
// Retrieves selected character type
|
||||
var charType = document.getElementById('charType').value;
|
||||
|
||||
const queryParams = new URLSearchParams({
|
||||
chartype: charType,
|
||||
});
|
||||
// Makes a POST request to endpoint with selected charType as parameter
|
||||
fetch('https://gammaworld.gmgauthier.com/character/generate', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify({ chartype: charType }) // Data sent to server
|
||||
})
|
||||
fetch(`${window.BASE_URL}/rules/character?${queryParams}`)
|
||||
.then(response => response.json()) // Gets the response and returns it as JSON
|
||||
.then(data => { // When promise is resolved
|
||||
|
||||
|
@ -1,10 +1,8 @@
|
||||
// config.js
|
||||
let environment = window.location.hostname === 'parmenides' ? 'dev' : 'prod';
|
||||
|
||||
fetch('./config.json')
|
||||
.then(response => response.json())
|
||||
.then(config => {
|
||||
window.BASE_URL = config[environment].BASE_URL;
|
||||
console.log("BASE URL:", window.BASE_URL);
|
||||
})
|
||||
.catch(error => console.error('Error:', error));
|
||||
if (window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1') {
|
||||
window.BASE_URL = 'http://127.0.0.1:5000';
|
||||
} else {
|
||||
window.BASE_URL = 'https://gammaworld.gmgauthier.com';
|
||||
}
|
||||
console.log(window.location.hostname)
|
||||
console.log(window.BASE_URL)
|
@ -2,6 +2,7 @@
|
||||
<html>
|
||||
<head>
|
||||
<title>Table View</title>
|
||||
<script src="config.js"></script>
|
||||
<style>
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
@ -87,7 +88,7 @@
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
fetch('https://gammaworld.gmgauthier.com/matrices/dump')
|
||||
fetch(`${window.BASE_URL}/rules/tables`)
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
parseAndRenderData(data)
|
||||
|
@ -3,6 +3,7 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Gamma World Encounter Check</title>
|
||||
<script src="config.js"></script>
|
||||
<script src="encounter.js" defer></script>
|
||||
</head>
|
||||
<body>
|
||||
|
@ -1,6 +1,9 @@
|
||||
document.getElementById('terrainForm').addEventListener('submit', function (event) {
|
||||
event.preventDefault();
|
||||
var terrain = document.getElementById('terrainType').value;
|
||||
const queryParams = new URLSearchParams({
|
||||
terrain: terrain,
|
||||
});
|
||||
|
||||
// Insert the loading.gif before making the fetch request
|
||||
let resultSection = document.getElementById('resultSection');
|
||||
@ -14,15 +17,7 @@ document.getElementById('terrainForm').addEventListener('submit', function (even
|
||||
imgElement.style.marginRight = 'auto';
|
||||
resultSection.appendChild(imgElement);
|
||||
|
||||
fetch('https://gammaworld.gmgauthier.com/roll/encounter', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({
|
||||
terrain: terrain,
|
||||
}),
|
||||
})
|
||||
fetch(`${window.BASE_URL}/gameplay/encounter?${queryParams}`)
|
||||
.then((response) => {
|
||||
if (!response.ok) {
|
||||
throw response;
|
||||
|
@ -3,6 +3,7 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<link rel="stylesheet" type="text/css" href="styles.css">
|
||||
<script src="config.js"></script>
|
||||
<title>Gamma World Gaming Tools</title>
|
||||
</head>
|
||||
<body>
|
||||
|
@ -4,6 +4,7 @@
|
||||
<meta charset="UTF-8">
|
||||
<title>Gamma World Mental Attack Roll</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css">
|
||||
<script src="config.js"></script>
|
||||
<script src="mentalattack.js" defer></script>
|
||||
</head>
|
||||
<body>
|
||||
|
@ -5,18 +5,13 @@ window.onload = function () {
|
||||
const ams = parseInt(document.getElementById('ams').value, 10);
|
||||
const dms = parseInt(document.getElementById('dms').value, 10);
|
||||
const modifier = parseInt(document.getElementById('modifier').value, 0);
|
||||
|
||||
fetch('https://gammaworld.gmgauthier.com/roll/attack/mental', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({
|
||||
const queryParams = new URLSearchParams({
|
||||
ams: ams,
|
||||
dms: dms,
|
||||
modifier: modifier
|
||||
}),
|
||||
})
|
||||
});
|
||||
|
||||
fetch(`${window.BASE_URL}/gameplay/attack/mental?${queryParams}`)
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
const resultsDiv = document.getElementById('results');
|
||||
|
@ -4,6 +4,7 @@
|
||||
<meta charset="UTF-8">
|
||||
<title>Gamma World Physical Attack Roll</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css">
|
||||
<script src="config.js"></script>
|
||||
<script src="physicalattack.js" defer></script>
|
||||
</head>
|
||||
<body>
|
||||
@ -11,31 +12,29 @@
|
||||
<h2>Attempt A Physical Attack</h2>
|
||||
|
||||
<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">
|
||||
<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">
|
||||
<label for="awc">Attacker WC:</label>
|
||||
<input type="number" name="awc" id="awc" min="1" max="16"style="margin-right: 5px">
|
||||
</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">
|
||||
<label for="ahd">Attacker HD:</label>
|
||||
<input type="number" name="ahd" id="ahd" min="1" max="16" style="margin-right: 5px">
|
||||
</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">
|
||||
<label for="dac">Defender AC:</label>
|
||||
<input type="number" name="dac" id="dac" min="1" max="10" value="5" style="margin-right: 5px">
|
||||
</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">
|
||||
<input type="number" name="modifier" id="modifier" min="-100" max="100" value="0" style="margin-right: 10px">
|
||||
</div>
|
||||
<div class="form-field">
|
||||
<button type="submit">Attack!</button>
|
||||
|
@ -6,21 +6,14 @@ window.onload = function () {
|
||||
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,
|
||||
const queryParams = new URLSearchParams({
|
||||
dac: dac,
|
||||
awc: awc,
|
||||
ahd: ahd
|
||||
}),
|
||||
})
|
||||
ahd: ahd,
|
||||
modifier: modifier
|
||||
});
|
||||
|
||||
fetch(`${window.BASE_URL}/gameplay/attack/physical?${queryParams}`)
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
const resultsDiv = document.getElementById('results');
|
||||
|
@ -4,7 +4,8 @@
|
||||
<meta charset="UTF-8">
|
||||
<title>Gamma World Die Roller</title>
|
||||
<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>
|
||||
<body>
|
||||
|
||||
|
@ -12,7 +12,7 @@ window.onload = function () {
|
||||
discard_lowest: discard
|
||||
});
|
||||
|
||||
fetch(`http://127.0.0.1:5000/dice?${queryParams}`)
|
||||
fetch(`${window.BASE_URL}/dice?${queryParams}`)
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
const resultsDiv = document.getElementById('results');
|
||||
|
@ -9,7 +9,7 @@
|
||||
flex-direction: row; /* changed this from column */
|
||||
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 */
|
||||
width: 200px; /* optionally set a width to keep it consistent */
|
||||
width: 275px; /* optionally set a width to keep it consistent */
|
||||
}
|
||||
|
||||
.content-container {
|
||||
|
Loading…
Reference in New Issue
Block a user