gammatools/web/index.html

148 lines
5.8 KiB
HTML
Raw Normal View History

2024-06-27 13:47:52 +00:00
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
2024-06-29 22:53:57 +00:00
<link rel="stylesheet" type="text/css" href="styles.css">
2024-06-27 13:47:52 +00:00
<title>Gamma World Gaming Tools</title>
</head>
<body>
<div style="text-align: center">
<h1>Gamma World Gaming Tools</h1>
</div>
<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">
2024-06-28 22:00:49 +00:00
<button id="encounter">Encounters</button>
<button id="physicalattack">Physical Attack!</button>
<button id="mentalattack">Mental Attack!</button>
<button id="chargen">Characters</button>
<button id="tables">Show Tables</button>
2024-06-27 13:47:52 +00:00
</div>
2024-06-27 13:47:52 +00:00
<hr/>
<div id="toolPanel"></div>
<script>
2024-06-28 18:48:06 +00:00
document.addEventListener('DOMContentLoaded', function () {
2024-06-29 22:53:57 +00:00
loadContent("intro.html");
document.getElementById("tables").addEventListener("click", function () {
loadContent("display_tables.html?t=" + new Date().getTime());
});
2024-06-28 18:48:06 +00:00
document.getElementById("dieroller").addEventListener("click", function () {
loadContent("rolldice.html?t=" + new Date().getTime());
});
2024-06-27 13:47:52 +00:00
2024-06-28 22:00:49 +00:00
document.getElementById("encounter").addEventListener("click", function () {
loadContent("encounter.html?t=" + new Date().getTime());
});
document.getElementById("mentalattack").addEventListener("click", function () {
loadContent("mentalattack.html?t=" + new Date().getTime());
});
document.getElementById("physicalattack").addEventListener("click", function () {
loadContent("physicalattack.html?t=" + new Date().getTime());
});
2024-06-28 18:48:06 +00:00
document.getElementById("chargen").addEventListener("click", function () {
loadContent("chargen.html?t=" + new Date().getTime());
});
2024-06-27 13:47:52 +00:00
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);
});
});
2024-06-27 13:47:52 +00:00
});
function loadContent(pageUrl) {
var iframe = document.createElement('iframe');
iframe.src = pageUrl;
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 = '800px'; // set a height so that the iframe is visible, adjust as per your needs
2024-06-27 13:47:52 +00:00
document.getElementById("toolPanel").innerHTML = '';
document.getElementById("toolPanel").appendChild(iframe);
}
</script>
</body>
</html>