gmgauthier/gammatools
gmgauthier/gammatools
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix the flow of android containers

Browse Source
This commit is contained in:
Greg Gauthier 2024-07-03 08:16:37 +01:00
parent 4d0f140384
commit a9d8564d62
2 changed files with 25 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
web/encounter.html
View File

@ -23,6 +23,19 @@
gap: 20px; 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_profile,
.creature_abilities {
width: 45%; /* Give them each about half the container's width */
}
.creature_id { grid-area: 1 / 1 / 2 / 2; } .creature_id { grid-area: 1 / 1 / 2 / 2; }
.creature_profile { grid-area: 1 / 2 / 2 / 3; } .creature_profile { grid-area: 1 / 2 / 2 / 3; }
.creature_abilities { grid-area: 1 / 3 / 2 / 4; } .creature_abilities { grid-area: 1 / 3 / 2 / 4; }

16
web/encounter.js
View File

@ -67,11 +67,12 @@ document.getElementById('terrainForm').addEventListener('submit', function (even
function androidResultTable(data) { function androidResultTable(data) {
let container = document.createElement('div'); let container = document.createElement('div');
container.className = 'container android'; // Added 'android' class container.className = 'container android';
let creatureTitle = document.createElement('h2'); let creatureTitle = document.createElement('h2');
creatureTitle.textContent = data.name.toUpperCase(); creatureTitle.textContent = data.name.toUpperCase();
container.appendChild(creatureTitle) container.appendChild(creatureTitle)
let image = document.createElement('img'); let image = document.createElement('img');
image.src = 'img/android.jpg'; image.src = 'img/android.jpg';
image.onerror = () => { image.src = 'img/404.jpg' }; image.onerror = () => { image.src = 'img/404.jpg' };
@ -86,15 +87,22 @@ document.getElementById('terrainForm').addEventListener('submit', function (even
if (key === 'thinker' || key === 'worker' || key === 'warrior') { if (key === 'thinker' || key === 'worker' || key === 'warrior') {
let typeTitle = document.createElement('h2'); let typeTitle = document.createElement('h2');
typeTitle.textContent = key.toUpperCase(); // Display the type (worker, warrior, thinker) typeTitle.textContent = key.toUpperCase();
container.appendChild(typeTitle); 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 profile = createProfileSection(value);
let abilities = createAbilitiesSection(value); let abilities = createAbilitiesSection(value);
container.appendChild(profile); // Append profile and abilities to the typeContainer, instead of the main container
container.appendChild(abilities); typeContainer.appendChild(profile);
typeContainer.appendChild(abilities);
// Finally, append the typeContainer to the main container.
container.appendChild(typeContainer);
} }
}); });