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

first attempt at modularizing the javascript to reduce duplication

Browse Source
This commit is contained in:
Greg Gauthier 2024-07-06 18:38:50 +01:00
parent a5dd8f1610
commit 6dbff09621
4 changed files with 35 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
web/bestiary.html
View File

@ -45,8 +45,8 @@
</style>
<title>Gamma World Bestiary</title>
<script src="config.js"></script>
<script src="bestiary.js" defer></script>
<script src="catalog.js" defer></script>
<script type="module" src="bestiary.js" defer></script>
<script type="module" src="catalog.js" defer></script>
</head>
<body>
<h2>Look Up A Creature</h2>

12
web/bestiary.js
View File

@ -1,3 +1,5 @@
import {loadingGif} from "./loading.js";
document.getElementById('searchForm').addEventListener('submit', function (event) {
event.preventDefault();
const creatureName = document.getElementById('creature').value;
@ -7,15 +9,7 @@ document.getElementById('searchForm').addEventListener('submit', function (event
// 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);
let imgElement = loadingGif(resultSection);
setTimeout(() => {
fetch(`${window.BASE_URL}/rules/creature?${queryParams}`)

16
web/catalog.js
View File

@ -1,17 +1,13 @@
import {loadingGif} from "./loading.js";
document.getElementById('catalog-button').addEventListener('click', function (event) {
event.preventDefault();
// Insert the loading.gif
// 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);
loadingGif(resultSection);
fetch(`${window.BASE_URL}/rules/creature`)
.then(response => {

24
web/loading.js Normal file
View File

@ -0,0 +1,24 @@
export function loadingGif(resultSection) {
// Insert the loading.gif before making the fetch request
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);
return imgElement;
}
export function setResultImage(document, name) {
let imgElement = document.createElement('img');
let resultSection = document.getElementById('resultSection');
imgElement.src = 'img/' + name + ".jpg";
console.log(imgElement.src);
imgElement.onerror = function () {
this.src = 'img/404.jpg';
};
resultSection.appendChild(imgElement);
}