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> </style>
<title>Gamma World Bestiary</title> <title>Gamma World Bestiary</title>
<script src="config.js"></script> <script src="config.js"></script>
<script src="bestiary.js" defer></script> <script type="module" src="bestiary.js" defer></script>
<script src="catalog.js" defer></script> <script type="module" src="catalog.js" defer></script>
</head> </head>
<body> <body>
<h2>Look Up A Creature</h2> <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) { document.getElementById('searchForm').addEventListener('submit', function (event) {
event.preventDefault(); event.preventDefault();
const creatureName = document.getElementById('creature').value; 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 // Insert the loading.gif before making the fetch request
let resultSection = document.getElementById('resultSection'); let resultSection = document.getElementById('resultSection');
resultSection.innerHTML = ''; let imgElement = loadingGif(resultSection);
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);
setTimeout(() => { setTimeout(() => {
fetch(`${window.BASE_URL}/rules/creature?${queryParams}`) 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) { document.getElementById('catalog-button').addEventListener('click', function (event) {
event.preventDefault(); event.preventDefault();
// Insert the loading.gif // Insert the loading.gif before making the fetch request
let resultSection = document.getElementById('resultSection'); let resultSection = document.getElementById('resultSection');
resultSection.innerHTML = '';
let imgElement = document.createElement('img');
imgElement.src = 'img/checking.gif'; loadingGif(resultSection);
imgElement.style.width = '500px';
imgElement.style.height = '500px';
imgElement.style.display = 'block';
imgElement.style.marginLeft = 'auto';
imgElement.style.marginRight = 'auto';
resultSection.appendChild(imgElement);
fetch(`${window.BASE_URL}/rules/creature`) fetch(`${window.BASE_URL}/rules/creature`)
.then(response => { .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);
}