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