gammatools/web/bestiary.js

226 lines
9.4 KiB
JavaScript

document.getElementById('searchForm').addEventListener('submit', function (event) {
event.preventDefault();
const creatureName = document.getElementById('creature').value;
const queryParams = new URLSearchParams({
creature: creatureName,
});
// 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);
setTimeout(() => {
fetch(`${window.BASE_URL}/rules/creature?${queryParams}`)
.then((response) => {
if (!response.ok) {
throw response;
}
return response.json(); // we only get here if there is no error
})
.then((json) => {
if (json === null) { // if json is null update the image and stop execution
imgElement.src = 'img/404.jpg';
throw new Error('No data found'); // this will stop the execution and go to the catch block
}
resultSection.innerHTML = ''; // Clear previous content
if (creatureName === 'android') {
androidResultTable(json);
} else {
setCreatureTable(json);
}
})
.catch((err) => {
console.log(err);
if(!resultSection.hasChildNodes()) { // Only update the image if it wasn't already updated
imgElement.src = 'img/404.jpg';
}
});
function setResultImage(name) {
let imgElement = document.createElement('img');
imgElement.src = 'img/' + name + ".jpg";
console.log(imgElement.src);
imgElement.onerror = function () {
this.src = 'img/404.jpg';
};
resultSection.appendChild(imgElement);
}
function formatDiceMnemonic(data) {
return Array.isArray(data) ?
data[0] + "d" + data[1] + (data[2] === 0 ? "" : (data[2] > 0 ? "+" : "") + data[2]) :
data.toString();
}
function formatSpeedMnemonic(data){
return data[0] + '/' + data[1] + '/' + data[2];
}
function androidResultTable(data) {
let container = document.createElement('div');
container.className = 'container android';
let creatureTitle = document.createElement('h2');
creatureTitle.textContent = creatureName.toUpperCase();
container.appendChild(creatureTitle)
let image = document.createElement('img');
image.src = 'img/android.jpg';
image.onerror = () => { image.src = 'img/404.jpg' };
image.style.width = '275px';
image.style.height = '275px';
container.appendChild(image);
let description = createDescriptionSection(data);
container.appendChild(description);
Object.entries(data).forEach(([key, value]) => {
if (key === 'thinker' || key === 'worker' || key === 'warrior') {
let typeTitle = document.createElement('h2');
typeTitle.textContent = key.toUpperCase();
container.appendChild(typeTitle);
// Create a div for each type (thinker, worker, or warrior)
let typeContainer = document.createElement('div');
typeContainer.className = 'typeContainer'; // we'll use this in css
let profile = createProfileSection(value);
let abilities = createAbilitiesSection(value);
// Append profile and abilities to the typeContainer, instead of the main container
typeContainer.appendChild(profile);
typeContainer.appendChild(abilities);
// Finally, append the typeContainer to the main container.
container.appendChild(typeContainer);
}
});
resultSection.appendChild(container);
}
function createProfileSection(data) {
let profile = document.createElement('div');
profile.className = 'creature_profile';
let profileHTML = `
<h3>Profile</h3>
<table>
<tr><td><b>NUMBER</b></td> <td>${formatDiceMnemonic(data.number)}</td></tr>
<tr><td><b>MORALE</b></td> <td>${formatDiceMnemonic(data.morale)}</td></tr>
<tr><td><b>HIT DICE</b></td> <td>${formatDiceMnemonic(data['hit dice'])}</td></tr>
<tr><td><b>ARMOUR</b></td> <td>${data.armour}</td></tr>
<tr><td><b>ENVIRON</b></td> <td>${data.environ.join(', ')}</td></tr>
`;
if(data['land speed']){
profileHTML += `<tr><td><b>LAND SPEED</b></td> <td>${formatSpeedMnemonic(data['land speed'])}</td></tr>`;
}
if(data['water speed']){
profileHTML += `<tr><td><b>WATER SPEED</b></td> <td>${formatSpeedMnemonic(data['water speed'])}</td></tr>`;
}
if(data['air speed']){
profileHTML += `<tr><td><b>AIR SPEED</b></td> <td>${formatSpeedMnemonic(data['air speed'])}</td></tr>`;
}
profileHTML += '</table>';
profile.innerHTML = profileHTML;
return profile;
}
function createAbilitiesSection(data) {
// Abilities section
let abilities = document.createElement('div');
abilities.className = 'creature_abilities';
abilities.innerHTML = `
<h3>Abilities</h3>
<table>
<tr><td><b>MS</b></td> <td>${formatDiceMnemonic(data.ms)}</td></tr>
<tr><td><b>IN</b></td> <td>${formatDiceMnemonic(data.in)}</td></tr>
<tr><td><b>DX</b></td> <td>${formatDiceMnemonic(data.dx)}</td></tr>
<tr><td><b>CH</b></td> <td>${formatDiceMnemonic(data.ch)}</td></tr>
<tr><td><b>CN</b></td> <td>${formatDiceMnemonic(data.cn)}</td></tr>
<tr><td><b>PS</b></td> <td>${formatDiceMnemonic(data.ps)}</td></tr>
</table>
`;
return abilities;
}
function createAttacksSection(data) {
// Attacks section
let attacks = document.createElement('div');
attacks.className = 'creature_attacks';
let attacksHTML = '<h3>Attacks</h3>';
let attacksTable = '<table>';
for (let attack in data.attacks) {
let mnemonic_display;
mnemonic_display = formatDiceMnemonic(data.attacks[attack]);
if (mnemonic_display === "0d0") {
mnemonic_display = 'See Description';
}
attacksTable += `<tr><td><b>${attack}</b></td><td>${mnemonic_display}</td></tr>`
}
attacksTable += '</table>';
attacks.innerHTML = attacksHTML + attacksTable;
return attacks
}
function createMutationsSection(mutarray) {
// Mutations section
let mutations = document.createElement('div');
mutations.className = 'creature_mutations';
let mutationsHTML = '<h3>Mutations</h3>';
let mutationsList = mutarray.reduce((result, mutation) => result + `<li>${mutation}</li>`, '');
mutationsHTML += `<ul>${mutationsList}</ul>`;
mutations.innerHTML = mutationsHTML
return mutations
}
function createDescriptionSection(data) {
// Description section
let description = document.createElement('div');
description.className = 'creature_description';
let descriptionHTML = `
<h3>Description</h3>
<p>${data.description}</p>
`;
description.innerHTML = descriptionHTML;
return description
}
function setCreatureTable(data) {
let container = document.createElement('div');
container.className = 'container';
// Creature ID section
let creatureId = document.createElement('div');
creatureId.className = 'creature_id';
creatureId.innerHTML = `
<h2>${creatureName.toUpperCase()}</h2>
<img src='img/${creatureName}.jpg' onerror='this.src="img/404.jpg";' style='width: 275px; height: 275px;'>
`;
let profile = createProfileSection(data);
let abilities = createAbilitiesSection(data);
let attacks = createAttacksSection(data);
let mutations = createMutationsSection(data.mutations); // Notice the data difference
let description = createDescriptionSection(data);
container.appendChild(creatureId);
container.appendChild(profile);
container.appendChild(abilities);
container.appendChild(attacks);
container.appendChild(mutations);
container.appendChild(description);
resultSection.appendChild(container);
}
}, 1000);
});