diff --git a/web/assets/css/creatures.css b/web/assets/css/creatures.css new file mode 100644 index 0000000..92b28cc --- /dev/null +++ b/web/assets/css/creatures.css @@ -0,0 +1,83 @@ + +#resultSection { + font-family: Arial, sans-serif; + font-size: 14pt; +} + +.nickname { + background-color: #abf1f1; + border-style: solid; + border-width: 1px; + font-weight: bold; +} + +.house-note { + background-color: rgba(246, 246, 167, 0.93); + font-style: italic; +} + +.container { + display: grid; + grid-template-columns: 1.1fr 1fr 0.9fr; + grid-template-rows: 1.2fr 0.5fr 1.3fr; + gap: 0 0; + grid-auto-flow: row; +} + +.container.android { + display: flex; + flex-direction: column; + gap: 20px; +} + +/* Container for each type (thinker, worker, warrior) */ +.typeContainer { + display: flex; /* Use flexbox for layout */ + justify-content: space-between; /* Space out the child elements evenly */ + margin-bottom: 20px; /* Add some bottom margin for separation between types */ +} + +/* Profile and abilities within each type */ +.creature_id, +.creature_profile, +.creature_abilities { + width: 45%; /* Give them each about half the container's width */ + height: 345px; +} + +.creature_attacks { + width: 40%; +} + +.creature_mutations { + width: 60%; +} + +.creature_description { + width: 90%; + margin-top: 5px; +} + +.creature_id { + grid-area: 1 / 1 / 2 / 2; +} + +.creature_profile { + grid-area: 1 / 2 / 2 / 3; +} + +.creature_abilities { + grid-area: 1 / 3 / 2 / 4; +} + +.creature_attacks { + grid-area: 2 / 1 / 3 / 4; +} + +.creature_mutations { + grid-area: 2 / 2 / 3 / 2; +} + +.creature_description { + grid-area: 3 / 1 / 4 / 4; +} \ No newline at end of file diff --git a/web/styles.css b/web/assets/css/styles.css similarity index 100% rename from web/styles.css rename to web/assets/css/styles.css diff --git a/web/img/404.jpg b/web/assets/img/404.jpg similarity index 100% rename from web/img/404.jpg rename to web/assets/img/404.jpg diff --git a/web/img/Attack Failed!.png b/web/assets/img/Attack Failed!.png similarity index 100% rename from web/img/Attack Failed!.png rename to web/assets/img/Attack Failed!.png diff --git a/web/img/Attack Successful!.png b/web/assets/img/Attack Successful!.png similarity index 100% rename from web/img/Attack Successful!.png rename to web/assets/img/Attack Successful!.png diff --git a/web/img/Devastating Success!.png b/web/assets/img/Devastating Success!.png similarity index 100% rename from web/img/Devastating Success!.png rename to web/assets/img/Devastating Success!.png diff --git a/web/img/Heads.jpg b/web/assets/img/Heads.jpg similarity index 100% rename from web/img/Heads.jpg rename to web/assets/img/Heads.jpg diff --git a/web/img/No Encounter.jpg b/web/assets/img/No Encounter.jpg similarity index 100% rename from web/img/No Encounter.jpg rename to web/assets/img/No Encounter.jpg diff --git a/web/img/Tails.jpg b/web/assets/img/Tails.jpg similarity index 100% rename from web/img/Tails.jpg rename to web/assets/img/Tails.jpg diff --git a/web/img/ability_check_fail2.gif b/web/assets/img/ability_check_fail2.gif similarity index 100% rename from web/img/ability_check_fail2.gif rename to web/assets/img/ability_check_fail2.gif diff --git a/web/img/ability_check_failed.gif b/web/assets/img/ability_check_failed.gif similarity index 100% rename from web/img/ability_check_failed.gif rename to web/assets/img/ability_check_failed.gif diff --git a/web/img/ability_check_loading.gif b/web/assets/img/ability_check_loading.gif similarity index 100% rename from web/img/ability_check_loading.gif rename to web/assets/img/ability_check_loading.gif diff --git a/web/img/ability_check_succeeded.gif b/web/assets/img/ability_check_succeeded.gif similarity index 100% rename from web/img/ability_check_succeeded.gif rename to web/assets/img/ability_check_succeeded.gif diff --git a/web/img/android.jpg b/web/assets/img/android.jpg similarity index 100% rename from web/img/android.jpg rename to web/assets/img/android.jpg diff --git a/web/img/ark.jpg b/web/assets/img/ark.jpg similarity index 100% rename from web/img/ark.jpg rename to web/assets/img/ark.jpg diff --git a/web/img/arn.jpg b/web/assets/img/arn.jpg similarity index 100% rename from web/img/arn.jpg rename to web/assets/img/arn.jpg diff --git a/web/img/badder.jpg b/web/assets/img/badder.jpg similarity index 100% rename from web/img/badder.jpg rename to web/assets/img/badder.jpg diff --git a/web/img/barl nep.jpg b/web/assets/img/barl nep.jpg similarity index 100% rename from web/img/barl nep.jpg rename to web/assets/img/barl nep.jpg diff --git a/web/img/ber lep.jpg b/web/assets/img/ber lep.jpg similarity index 100% rename from web/img/ber lep.jpg rename to web/assets/img/ber lep.jpg diff --git a/web/img/bigoon.jpg b/web/assets/img/bigoon.jpg similarity index 100% rename from web/img/bigoon.jpg rename to web/assets/img/bigoon.jpg diff --git a/web/img/blaash.jpg b/web/assets/img/blaash.jpg similarity index 100% rename from web/img/blaash.jpg rename to web/assets/img/blaash.jpg diff --git a/web/img/blackun.jpg b/web/assets/img/blackun.jpg similarity index 100% rename from web/img/blackun.jpg rename to web/assets/img/blackun.jpg diff --git a/web/img/blight.jpg b/web/assets/img/blight.jpg similarity index 100% rename from web/img/blight.jpg rename to web/assets/img/blight.jpg diff --git a/web/img/blood bird.jpg b/web/assets/img/blood bird.jpg similarity index 100% rename from web/img/blood bird.jpg rename to web/assets/img/blood bird.jpg diff --git a/web/img/brutorz.jpg b/web/assets/img/brutorz.jpg similarity index 100% rename from web/img/brutorz.jpg rename to web/assets/img/brutorz.jpg diff --git a/web/img/buggem.jpg b/web/assets/img/buggem.jpg similarity index 100% rename from web/img/buggem.jpg rename to web/assets/img/buggem.jpg diff --git a/web/img/cal then.jpg b/web/assets/img/cal then.jpg similarity index 100% rename from web/img/cal then.jpg rename to web/assets/img/cal then.jpg diff --git a/web/img/carrin.jpg b/web/assets/img/carrin.jpg similarity index 100% rename from web/img/carrin.jpg rename to web/assets/img/carrin.jpg diff --git a/web/img/centisteed.jpg b/web/assets/img/centisteed.jpg similarity index 100% rename from web/img/centisteed.jpg rename to web/assets/img/centisteed.jpg diff --git a/web/img/checking.gif b/web/assets/img/checking.gif similarity index 100% rename from web/img/checking.gif rename to web/assets/img/checking.gif diff --git a/web/img/cren tosh.jpg b/web/assets/img/cren tosh.jpg similarity index 100% rename from web/img/cren tosh.jpg rename to web/assets/img/cren tosh.jpg diff --git a/web/img/crep plant.jpg b/web/assets/img/crep plant.jpg similarity index 100% rename from web/img/crep plant.jpg rename to web/assets/img/crep plant.jpg diff --git a/web/img/dabber.jpg b/web/assets/img/dabber.jpg similarity index 100% rename from web/img/dabber.jpg rename to web/assets/img/dabber.jpg diff --git a/web/img/ert telden.jpg b/web/assets/img/ert telden.jpg similarity index 100% rename from web/img/ert telden.jpg rename to web/assets/img/ert telden.jpg diff --git a/web/img/ert.jpg b/web/assets/img/ert.jpg similarity index 100% rename from web/img/ert.jpg rename to web/assets/img/ert.jpg diff --git a/web/img/fen.jpg b/web/assets/img/fen.jpg similarity index 100% rename from web/img/fen.jpg rename to web/assets/img/fen.jpg diff --git a/web/img/fleshin.jpg b/web/assets/img/fleshin.jpg similarity index 100% rename from web/img/fleshin.jpg rename to web/assets/img/fleshin.jpg diff --git a/web/img/gamma_world_cover.png b/web/assets/img/gamma_world_cover.png similarity index 100% rename from web/img/gamma_world_cover.png rename to web/assets/img/gamma_world_cover.png diff --git a/web/img/gator.jpg b/web/assets/img/gator.jpg similarity index 100% rename from web/img/gator.jpg rename to web/assets/img/gator.jpg diff --git a/web/img/gren.jpg b/web/assets/img/gren.jpg similarity index 100% rename from web/img/gren.jpg rename to web/assets/img/gren.jpg diff --git a/web/img/hawkoid.jpg b/web/assets/img/hawkoid.jpg similarity index 100% rename from web/img/hawkoid.jpg rename to web/assets/img/hawkoid.jpg diff --git a/web/img/herkel.jpg b/web/assets/img/herkel.jpg similarity index 100% rename from web/img/herkel.jpg rename to web/assets/img/herkel.jpg diff --git a/web/img/herp.jpg b/web/assets/img/herp.jpg similarity index 100% rename from web/img/herp.jpg rename to web/assets/img/herp.jpg diff --git a/web/img/hisser.jpg b/web/assets/img/hisser.jpg similarity index 100% rename from web/img/hisser.jpg rename to web/assets/img/hisser.jpg diff --git a/web/img/hoop.jpg b/web/assets/img/hoop.jpg similarity index 100% rename from web/img/hoop.jpg rename to web/assets/img/hoop.jpg diff --git a/web/img/hopper.jpg b/web/assets/img/hopper.jpg similarity index 100% rename from web/img/hopper.jpg rename to web/assets/img/hopper.jpg diff --git a/web/img/horl choo.jpg b/web/assets/img/horl choo.jpg similarity index 100% rename from web/img/horl choo.jpg rename to web/assets/img/horl choo.jpg diff --git a/web/img/jaget.jpg b/web/assets/img/jaget.jpg similarity index 100% rename from web/img/jaget.jpg rename to web/assets/img/jaget.jpg diff --git a/web/img/kai lin.jpg b/web/assets/img/kai lin.jpg similarity index 100% rename from web/img/kai lin.jpg rename to web/assets/img/kai lin.jpg diff --git a/web/img/kamodo.jpg b/web/assets/img/kamodo.jpg similarity index 100% rename from web/img/kamodo.jpg rename to web/assets/img/kamodo.jpg diff --git a/web/img/keeshin.jpg b/web/assets/img/keeshin.jpg similarity index 100% rename from web/img/keeshin.jpg rename to web/assets/img/keeshin.jpg diff --git a/web/img/kep plant.jpg b/web/assets/img/kep plant.jpg similarity index 100% rename from web/img/kep plant.jpg rename to web/assets/img/kep plant.jpg diff --git a/web/img/lil.jpg b/web/assets/img/lil.jpg similarity index 100% rename from web/img/lil.jpg rename to web/assets/img/lil.jpg diff --git a/web/img/loading.gif b/web/assets/img/loading.gif similarity index 100% rename from web/img/loading.gif rename to web/assets/img/loading.gif diff --git a/web/img/manta.jpg b/web/assets/img/manta.jpg similarity index 100% rename from web/img/manta.jpg rename to web/assets/img/manta.jpg diff --git a/web/img/menarl.jpg b/web/assets/img/menarl.jpg similarity index 100% rename from web/img/menarl.jpg rename to web/assets/img/menarl.jpg diff --git a/web/img/narl ep.jpg b/web/assets/img/narl ep.jpg similarity index 100% rename from web/img/narl ep.jpg rename to web/assets/img/narl ep.jpg diff --git a/web/img/normal_man.jpg b/web/assets/img/normal_man.jpg similarity index 100% rename from web/img/normal_man.jpg rename to web/assets/img/normal_man.jpg diff --git a/web/img/obb.jpg b/web/assets/img/obb.jpg similarity index 100% rename from web/img/obb.jpg rename to web/assets/img/obb.jpg diff --git a/web/img/odds.gif b/web/assets/img/odds.gif similarity index 100% rename from web/img/odds.gif rename to web/assets/img/odds.gif diff --git a/web/img/orlen.jpg b/web/assets/img/orlen.jpg similarity index 100% rename from web/img/orlen.jpg rename to web/assets/img/orlen.jpg diff --git a/web/img/parn.jpg b/web/assets/img/parn.jpg similarity index 100% rename from web/img/parn.jpg rename to web/assets/img/parn.jpg diff --git a/web/img/percheron_pattern.png b/web/assets/img/percheron_pattern.png similarity index 100% rename from web/img/percheron_pattern.png rename to web/assets/img/percheron_pattern.png diff --git a/web/img/perth.jpg b/web/assets/img/perth.jpg similarity index 100% rename from web/img/perth.jpg rename to web/assets/img/perth.jpg diff --git a/web/img/pineto.jpg b/web/assets/img/pineto.jpg similarity index 100% rename from web/img/pineto.jpg rename to web/assets/img/pineto.jpg diff --git a/web/img/podog.jpg b/web/assets/img/podog.jpg similarity index 100% rename from web/img/podog.jpg rename to web/assets/img/podog.jpg diff --git a/web/img/rakox.jpg b/web/assets/img/rakox.jpg similarity index 100% rename from web/img/rakox.jpg rename to web/assets/img/rakox.jpg diff --git a/web/img/sep.jpg b/web/assets/img/sep.jpg similarity index 100% rename from web/img/sep.jpg rename to web/assets/img/sep.jpg diff --git a/web/img/serf.jpg b/web/assets/img/serf.jpg similarity index 100% rename from web/img/serf.jpg rename to web/assets/img/serf.jpg diff --git a/web/img/seroon lou.jpg b/web/assets/img/seroon lou.jpg similarity index 100% rename from web/img/seroon lou.jpg rename to web/assets/img/seroon lou.jpg diff --git a/web/img/sleeth.jpg b/web/assets/img/sleeth.jpg similarity index 100% rename from web/img/sleeth.jpg rename to web/assets/img/sleeth.jpg diff --git a/web/img/soul besh.jpg b/web/assets/img/soul besh.jpg similarity index 100% rename from web/img/soul besh.jpg rename to web/assets/img/soul besh.jpg diff --git a/web/img/squeeker.jpg b/web/assets/img/squeeker.jpg similarity index 100% rename from web/img/squeeker.jpg rename to web/assets/img/squeeker.jpg diff --git a/web/img/terl.jpg b/web/assets/img/terl.jpg similarity index 100% rename from web/img/terl.jpg rename to web/assets/img/terl.jpg diff --git a/web/img/wardent.jpg b/web/assets/img/wardent.jpg similarity index 100% rename from web/img/wardent.jpg rename to web/assets/img/wardent.jpg diff --git a/web/img/win seen.jpg b/web/assets/img/win seen.jpg similarity index 100% rename from web/img/win seen.jpg rename to web/assets/img/win seen.jpg diff --git a/web/img/yexil.jpg b/web/assets/img/yexil.jpg similarity index 100% rename from web/img/yexil.jpg rename to web/assets/img/yexil.jpg diff --git a/web/img/zarn.jpg b/web/assets/img/zarn.jpg similarity index 100% rename from web/img/zarn.jpg rename to web/assets/img/zarn.jpg diff --git a/web/img/zeethh.jpg b/web/assets/img/zeethh.jpg similarity index 100% rename from web/img/zeethh.jpg rename to web/assets/img/zeethh.jpg diff --git a/web/assets/js/androidResultTable.js b/web/assets/js/androidResultTable.js new file mode 100644 index 0000000..3b16e5c --- /dev/null +++ b/web/assets/js/androidResultTable.js @@ -0,0 +1,47 @@ +import {createProfileSection} from "./createProfileSection.js"; +import {createAbilitiesSection} from "./createAbilitiesSection.js"; +import {createDescriptionSection} from "./createDescriptionSection.js"; + +export function androidResultTable(data, creatureName) { + 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 = '/assets/img/android.jpg'; + image.onerror = () => { image.src = '/assets/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); +} diff --git a/web/assets/js/bestiary.js b/web/assets/js/bestiary.js new file mode 100644 index 0000000..7d9d91a --- /dev/null +++ b/web/assets/js/bestiary.js @@ -0,0 +1,44 @@ +import {loadingGif} from "./loading.js"; +import {androidResultTable} from "./androidResultTable.js"; +import {setCreatureTable} from "./setCreatureTable.js"; + + +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'); + let imgElement = loadingGif(resultSection); + + 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 = '/assets/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, creatureName); + } else { + setCreatureTable(json, creatureName); + } + }) + .catch((err) => { + console.log(err); + if (!resultSection.hasChildNodes()) { // Only update the image if it wasn't already updated + imgElement.src = '/assets/img/404.jpg'; + } + }); + }, 1000); +}); \ No newline at end of file diff --git a/web/catalog.js b/web/assets/js/catalog.js similarity index 100% rename from web/catalog.js rename to web/assets/js/catalog.js diff --git a/web/chargen.js b/web/assets/js/chargen.js similarity index 100% rename from web/chargen.js rename to web/assets/js/chargen.js diff --git a/web/config.js b/web/assets/js/config.js similarity index 64% rename from web/config.js rename to web/assets/js/config.js index 747afb9..ac830ed 100644 --- a/web/config.js +++ b/web/assets/js/config.js @@ -4,5 +4,10 @@ if (window.location.hostname === 'localhost' || window.location.hostname === '12 } else { window.BASE_URL = 'https://gammaworld.gmgauthier.com'; } +window.IMG = "/assets/img"; +window.CSS = "/assets/css"; +window.JS = "/assets/js"; +window.DOC = "/pages"; + console.log(window.location.hostname) console.log(window.BASE_URL) \ No newline at end of file diff --git a/web/assets/js/createAbilitiesSection.js b/web/assets/js/createAbilitiesSection.js new file mode 100644 index 0000000..cee2c19 --- /dev/null +++ b/web/assets/js/createAbilitiesSection.js @@ -0,0 +1,19 @@ +import {formatDiceMnemonic} from "./formatDiceMnemonic.js"; + +export function createAbilitiesSection(data) { + // Abilities section + let abilities = document.createElement('div'); + abilities.className = 'creature_abilities'; + abilities.innerHTML = ` +

Abilities

+ + + + + + + +
MS ${formatDiceMnemonic(data.ms)}
IN ${formatDiceMnemonic(data.in)}
DX ${formatDiceMnemonic(data.dx)}
CH ${formatDiceMnemonic(data.ch)}
CN ${formatDiceMnemonic(data.cn)}
PS ${formatDiceMnemonic(data.ps)}
+ `; + return abilities; +} diff --git a/web/assets/js/createAttacksSection.js b/web/assets/js/createAttacksSection.js new file mode 100644 index 0000000..38dc592 --- /dev/null +++ b/web/assets/js/createAttacksSection.js @@ -0,0 +1,20 @@ +import {formatDiceMnemonic} from "./formatDiceMnemonic.js"; + +export function createAttacksSection(data) { + // Attacks section + let attacks = document.createElement('div'); + attacks.className = 'creature_attacks'; + let attacksHTML = '

Attacks

'; + let attacksTable = ''; + for (let attack in data.attacks) { + let mnemonic_display; + mnemonic_display = formatDiceMnemonic(data.attacks[attack]); + if (mnemonic_display === "0d0") { + mnemonic_display = 'See Description'; + } + attacksTable += `` + } + attacksTable += '
${attack}${mnemonic_display}
'; + attacks.innerHTML = attacksHTML + attacksTable; + return attacks +} diff --git a/web/assets/js/createDescriptionSection.js b/web/assets/js/createDescriptionSection.js new file mode 100644 index 0000000..7e0d46e --- /dev/null +++ b/web/assets/js/createDescriptionSection.js @@ -0,0 +1,11 @@ + +export function createDescriptionSection(data) { + // Description section + let description = document.createElement('div'); + description.className = 'creature_description'; + description.innerHTML = ` +

Description

+ ${data.description} + `; + return description; +} diff --git a/web/assets/js/createMutationsSection.js b/web/assets/js/createMutationsSection.js new file mode 100644 index 0000000..5effc57 --- /dev/null +++ b/web/assets/js/createMutationsSection.js @@ -0,0 +1,10 @@ +export function createMutationsSection(mutarray) { + // Mutations section + let mutations = document.createElement('div'); + mutations.className = 'creature_mutations'; + let mutationsHTML = '

Mutations

'; + let mutationsList = mutarray.reduce((result, mutation) => result + `
  • ${mutation}
    • `, ''); + mutationsHTML += ``; + mutations.innerHTML = mutationsHTML + return mutations +} diff --git a/web/assets/js/createProfileSection.js b/web/assets/js/createProfileSection.js new file mode 100644 index 0000000..fac377d --- /dev/null +++ b/web/assets/js/createProfileSection.js @@ -0,0 +1,29 @@ +import {formatDiceMnemonic} from "./formatDiceMnemonic.js"; +import {formatSpeedMnemonic} from "./formatSpeedMnemonic.js"; + +export function createProfileSection(data) { + let profile = document.createElement('div'); + profile.className = 'creature_profile'; + let profileHTML = ` +

    Profile

    + + + + + + + `; + if(data['land speed']){ + profileHTML += ``; + } + if(data['water speed']){ + profileHTML += ``; + } + if(data['air speed']){ + profileHTML += ``; + } + profileHTML += '
    NUMBER ${formatDiceMnemonic(data.number)}
    MORALE ${formatDiceMnemonic(data.morale)}
    HIT DICE ${formatDiceMnemonic(data['hit dice'])}
    ARMOUR ${data.armour}
    ENVIRON ${data.environ.join(', ')}
    LAND SPEED ${formatSpeedMnemonic(data['land speed'])}
    WATER SPEED ${formatSpeedMnemonic(data['water speed'])}
    AIR SPEED ${formatSpeedMnemonic(data['air speed'])}
    '; + + profile.innerHTML = profileHTML; + return profile; +} diff --git a/web/assets/js/encounter.js b/web/assets/js/encounter.js new file mode 100644 index 0000000..3f4b2e6 --- /dev/null +++ b/web/assets/js/encounter.js @@ -0,0 +1,48 @@ +import {loadingGif, setResultImage} from "./loading.js"; + +import {setCreatureTable} from "./setCreatureTable.js"; +import {androidResultTable} from "./androidResultTable.js"; + +document.getElementById('terrainForm').addEventListener('submit', function (event) { + event.preventDefault(); + const terrain = document.getElementById('terrainType').value; + const queryParams = new URLSearchParams({ + terrain: terrain, + }); + + // Insert the loading.gif before making the fetch request + let resultSection = document.getElementById('resultSection'); + let imgElement = loadingGif(resultSection); + + setTimeout(() => { + fetch(`${window.BASE_URL}/gameplay/encounter?${queryParams}`) + .then((response) => { + if (!response.ok) { + throw response; + } + return response.json(); // we only get here if there is no error + }) + .then((json) => { + resultSection.innerHTML = ''; // Clear previous content + if (Object.keys(json).length === 1) { // Short version of response + let name = json.name !== null ? json.name : 'No Encounter'; + setResultImage(name); + } else { // Long version of the response + if (json.name === 'android') { + androidResultTable(json, json.name); + } else { + setCreatureTable(json, json.name); + } + } + }) + .catch((err) => { + err.text().then(() => { + imgElement.src = '/assets/img/404.jpg'; + }); + }); + + + + + }, 1000); +}); \ No newline at end of file diff --git a/web/assets/js/formatDiceMnemonic.js b/web/assets/js/formatDiceMnemonic.js new file mode 100644 index 0000000..e528068 --- /dev/null +++ b/web/assets/js/formatDiceMnemonic.js @@ -0,0 +1,5 @@ +export function formatDiceMnemonic(data) { + return Array.isArray(data) ? + data[0] + "d" + data[1] + (data[2] === 0 ? "" : (data[2] > 0 ? "+" : "") + data[2]) : + data.toString(); +} diff --git a/web/assets/js/formatSpeedMnemonic.js b/web/assets/js/formatSpeedMnemonic.js new file mode 100644 index 0000000..bf5cad7 --- /dev/null +++ b/web/assets/js/formatSpeedMnemonic.js @@ -0,0 +1,9 @@ +export function formatSpeedMnemonic(data){ + if (data[0] === 0 && data[1] === 0 && data[2] === 0){ + return "Immobile"; + } + if (data[0] === 1 && data[1] === 1 && data[2] === 1) { + return "See Description" + } + return data[0] + '/' + data[1] + '/' + data[2]; +} diff --git a/web/loading.js b/web/assets/js/loading.js similarity index 73% rename from web/loading.js rename to web/assets/js/loading.js index 3f7e068..48a5b8f 100644 --- a/web/loading.js +++ b/web/assets/js/loading.js @@ -3,9 +3,9 @@ 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.src = `/assets/img/checking.gif`; + imgElement.style.width = '275px'; + imgElement.style.height = '275px'; imgElement.style.display = 'block'; imgElement.style.marginLeft = 'auto'; imgElement.style.marginRight = 'auto'; @@ -15,10 +15,10 @@ export function loadingGif(resultSection) { export function setResultImage(document, name) { let imgElement = document.createElement('img'); let resultSection = document.getElementById('resultSection'); - imgElement.src = 'img/' + name + ".jpg"; + imgElement.src = `/assets/img/` + name + ".jpg"; console.log(imgElement.src); imgElement.onerror = function () { - this.src = 'img/404.jpg'; + this.src = `/assets/img/404.jpg`; }; resultSection.appendChild(imgElement); } \ No newline at end of file diff --git a/web/mentalattack.js b/web/assets/js/mentalattack.js similarity index 100% rename from web/mentalattack.js rename to web/assets/js/mentalattack.js diff --git a/web/physicalattack.js b/web/assets/js/physicalattack.js similarity index 100% rename from web/physicalattack.js rename to web/assets/js/physicalattack.js diff --git a/web/rolldice.js b/web/assets/js/rolldice.js similarity index 100% rename from web/rolldice.js rename to web/assets/js/rolldice.js diff --git a/web/assets/js/setCreatureTable.js b/web/assets/js/setCreatureTable.js new file mode 100644 index 0000000..78c929d --- /dev/null +++ b/web/assets/js/setCreatureTable.js @@ -0,0 +1,33 @@ +import {createProfileSection} from "./createProfileSection.js"; +import {createAbilitiesSection} from "./createAbilitiesSection.js"; +import {createAttacksSection} from "./createAttacksSection.js"; +import {createMutationsSection} from "./createMutationsSection.js"; +import {createDescriptionSection} from "./createDescriptionSection.js"; + +export function setCreatureTable(data, creatureName) { + let container = document.createElement('div'); + container.className = 'container'; + + // Creature ID section + let creatureId = document.createElement('div'); + creatureId.className = 'creature_id'; + creatureId.innerHTML = ` +

    ${creatureName.toUpperCase()}

    + + `; + + 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); +} diff --git a/web/assets/js/setResultImage.js b/web/assets/js/setResultImage.js new file mode 100644 index 0000000..8171a7f --- /dev/null +++ b/web/assets/js/setResultImage.js @@ -0,0 +1,11 @@ +export function setResultImage(name) { + let imgElement = document.createElement('img'); + imgElement.src = '/assets/img/' + name + ".jpg"; + console.log(imgElement.src); + imgElement.onerror = function () { + this.src = '/assets/img/404.jpg'; + }; + resultSection.appendChild(imgElement); + return imgElement; +} + diff --git a/web/bestiary.html b/web/bestiary.html deleted file mode 100644 index 7afdb27..0000000 --- a/web/bestiary.html +++ /dev/null @@ -1,98 +0,0 @@ - - - - - - - Gamma World Bestiary - - - - - -

    Look Up A Creature

    - -
    -
    -
    - - - -
    -
    - - -
    -
    -
    - -
    -
    - - - \ No newline at end of file diff --git a/web/bestiary.js b/web/bestiary.js deleted file mode 100644 index b0522f1..0000000 --- a/web/bestiary.js +++ /dev/null @@ -1,226 +0,0 @@ -import {loadingGif} from "./loading.js"; - -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'); - let imgElement = loadingGif(resultSection); - - 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){ - if (data[0] === 0 && data[1] === 0 && data[2] === 0){ - return "Immobile"; - } - if (data[0] === 1 && data[1] === 1 && data[2] === 1) { - return "See Description" - } - 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 = ` -

    Profile

    - - - - - - - `; - if(data['land speed']){ - profileHTML += ``; - } - if(data['water speed']){ - profileHTML += ``; - } - if(data['air speed']){ - profileHTML += ``; - } - profileHTML += '
    NUMBER ${formatDiceMnemonic(data.number)}
    MORALE ${formatDiceMnemonic(data.morale)}
    HIT DICE ${formatDiceMnemonic(data['hit dice'])}
    ARMOUR ${data.armour}
    ENVIRON ${data.environ.join(', ')}
    LAND SPEED ${formatSpeedMnemonic(data['land speed'])}
    WATER SPEED ${formatSpeedMnemonic(data['water speed'])}
    AIR SPEED ${formatSpeedMnemonic(data['air speed'])}
    '; - - profile.innerHTML = profileHTML; - return profile; - } - - function createAbilitiesSection(data) { - // Abilities section - let abilities = document.createElement('div'); - abilities.className = 'creature_abilities'; - abilities.innerHTML = ` -

    Abilities

    - - - - - - - -
    MS ${formatDiceMnemonic(data.ms)}
    IN ${formatDiceMnemonic(data.in)}
    DX ${formatDiceMnemonic(data.dx)}
    CH ${formatDiceMnemonic(data.ch)}
    CN ${formatDiceMnemonic(data.cn)}
    PS ${formatDiceMnemonic(data.ps)}
    - `; - return abilities; - } - - function createAttacksSection(data) { - // Attacks section - let attacks = document.createElement('div'); - attacks.className = 'creature_attacks'; - let attacksHTML = '

    Attacks

    '; - let attacksTable = ''; - for (let attack in data.attacks) { - let mnemonic_display; - mnemonic_display = formatDiceMnemonic(data.attacks[attack]); - if (mnemonic_display === "0d0") { - mnemonic_display = 'See Description'; - } - attacksTable += `` - } - attacksTable += '
    ${attack}${mnemonic_display}
    '; - attacks.innerHTML = attacksHTML + attacksTable; - return attacks - } - - function createMutationsSection(mutarray) { - // Mutations section - let mutations = document.createElement('div'); - mutations.className = 'creature_mutations'; - let mutationsHTML = '

    Mutations

    '; - let mutationsList = mutarray.reduce((result, mutation) => result + `
  • ${mutation}
    • `, ''); - mutationsHTML += ``; - mutations.innerHTML = mutationsHTML - return mutations - } - - function createDescriptionSection(data) { - // Description section - let description = document.createElement('div'); - description.className = 'creature_description'; - let descriptionHTML = ` -

    Description

    - ${data.description} - `; - 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 = ` -

    ${creatureName.toUpperCase()}

    - - `; - - 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); -}); \ No newline at end of file diff --git a/web/encounter.html b/web/encounter.html deleted file mode 100644 index f071613..0000000 --- a/web/encounter.html +++ /dev/null @@ -1,69 +0,0 @@ - - - - - - - Gamma World Encounter Check - - - - -

    Check For An Encounter

    - -
    - - -
    -
    -
    - - - \ No newline at end of file diff --git a/web/encounter.js b/web/encounter.js deleted file mode 100644 index c681e42..0000000 --- a/web/encounter.js +++ /dev/null @@ -1,227 +0,0 @@ -document.getElementById('terrainForm').addEventListener('submit', function (event) { - event.preventDefault(); - const terrain = document.getElementById('terrainType').value; - const queryParams = new URLSearchParams({ - terrain: terrain, - }); - - // 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}/gameplay/encounter?${queryParams}`) - .then((response) => { - if (!response.ok) { - throw response; - } - return response.json(); // we only get here if there is no error - }) - .then((json) => { - resultSection.innerHTML = ''; // Clear previous content - if (Object.keys(json).length === 1) { // Short version of response - let name = json.name !== null ? json.name : 'No Encounter'; - console.log(name); - setResultImage(name); - } else { // Long version of the response - if (json.name === 'android') { - androidResultTable(json); - } else { - setCreatureTable(json); - } - } - }) - .catch((err) => { - err.text().then(() => { - 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 = data.name.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 = ` -

    Profile

    - - - - - - - `; - if(data['land speed']){ - profileHTML += ``; - } - if(data['water speed']){ - profileHTML += ``; - } - if(data['air speed']){ - profileHTML += ``; - } - profileHTML += '
    NUMBER ${formatDiceMnemonic(data.number)}
    MORALE ${formatDiceMnemonic(data.morale)}
    HIT DICE ${formatDiceMnemonic(data['hit dice'])}
    ARMOUR ${data.armour}
    ENVIRON ${data.environ.join(', ')}
    LAND SPEED ${formatSpeedMnemonic(data['land speed'])}
    WATER SPEED ${formatSpeedMnemonic(data['water speed'])}
    AIR SPEED ${formatSpeedMnemonic(data['air speed'])}
    '; - - profile.innerHTML = profileHTML; - return profile; - } - - function createAbilitiesSection(data) { - // Abilities section - let abilities = document.createElement('div'); - abilities.className = 'creature_abilities'; - abilities.innerHTML = ` -

    Abilities

    - - - - - - - -
    MS ${formatDiceMnemonic(data.ms)}
    IN ${formatDiceMnemonic(data.in)}
    DX ${formatDiceMnemonic(data.dx)}
    CH ${formatDiceMnemonic(data.ch)}
    CN ${formatDiceMnemonic(data.cn)}
    PS ${formatDiceMnemonic(data.ps)}
    - `; - return abilities; - } - - function createAttacksSection(data) { - // Attacks section - let attacks = document.createElement('div'); - attacks.className = 'creature_attacks'; - let attacksHTML = '

    Attacks

    '; - let attacksTable = ''; - for (let attack in data.attacks) { - let mnemonic_display; - mnemonic_display = formatDiceMnemonic(data.attacks[attack]); - if (mnemonic_display === "0d0") { - mnemonic_display = 'See Description'; - } - attacksTable += `` - } - attacksTable += '
    ${attack}${mnemonic_display}
    '; - attacks.innerHTML = attacksHTML + attacksTable; - return attacks - } - - function createMutationsSection(mutarray) { - // Mutations section - let mutations = document.createElement('div'); - mutations.className = 'creature_mutations'; - let mutationsHTML = '

    Mutations

    '; - let mutationsList = mutarray.reduce((result, mutation) => result + `
  • ${mutation}
    • `, ''); - mutationsHTML += ``; - mutations.innerHTML = mutationsHTML - return mutations - } - - function createDescriptionSection(data) { - // Description section - let description = document.createElement('div'); - description.className = 'creature_description'; - let descriptionHTML = ` -

    Description

    -

    ${data.description}

    - `; - 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 = ` -

    ${data.name.toUpperCase()}

    - - `; - - 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); -}); \ No newline at end of file diff --git a/web/index.html b/web/index.html index 91f181b..db1c1f5 100644 --- a/web/index.html +++ b/web/index.html @@ -2,9 +2,9 @@ - + Gamma World Gaming Tools - +
    @@ -34,45 +34,45 @@ + + Ability Checks