From 6dbff0962188afa28a11b500824288d46ffc4599 Mon Sep 17 00:00:00 2001 From: Greg Gauthier Date: Sat, 6 Jul 2024 18:38:50 +0100 Subject: [PATCH] first attempt at modularizing the javascript to reduce duplication --- web/bestiary.html | 4 ++-- web/bestiary.js | 12 +++--------- web/catalog.js | 16 ++++++---------- web/loading.js | 24 ++++++++++++++++++++++++ 4 files changed, 35 insertions(+), 21 deletions(-) create mode 100644 web/loading.js diff --git a/web/bestiary.html b/web/bestiary.html index 1e7de93..c2bbdd9 100644 --- a/web/bestiary.html +++ b/web/bestiary.html @@ -45,8 +45,8 @@ Gamma World Bestiary - - + +

Look Up A Creature

diff --git a/web/bestiary.js b/web/bestiary.js index 32eaa8c..8d027cd 100644 --- a/web/bestiary.js +++ b/web/bestiary.js @@ -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}`) diff --git a/web/catalog.js b/web/catalog.js index 0680875..77c9471 100644 --- a/web/catalog.js +++ b/web/catalog.js @@ -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 => { diff --git a/web/loading.js b/web/loading.js new file mode 100644 index 0000000..3f7e068 --- /dev/null +++ b/web/loading.js @@ -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); +} \ No newline at end of file