From a9d8564d621baac67171e0b1359cb7b853eb862e Mon Sep 17 00:00:00 2001
From: Greg Gauthier <gmgauthier@protonmail.com>
Date: Wed, 3 Jul 2024 08:16:37 +0100
Subject: [PATCH] fix the flow of android containers

---
 web/encounter.html | 13 +++++++++++++
 web/encounter.js   | 16 ++++++++++++----
 2 files changed, 25 insertions(+), 4 deletions(-)

diff --git a/web/encounter.html b/web/encounter.html
index c57d936..f071613 100644
--- a/web/encounter.html
+++ b/web/encounter.html
@@ -23,6 +23,19 @@
             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_profile { grid-area: 1 / 2 / 2 / 3; }
         .creature_abilities { grid-area: 1 / 3 / 2 / 4; }
diff --git a/web/encounter.js b/web/encounter.js
index 5bb41f8..940758a 100644
--- a/web/encounter.js
+++ b/web/encounter.js
@@ -67,11 +67,12 @@ document.getElementById('terrainForm').addEventListener('submit', function (even
 
         function androidResultTable(data) {
             let container = document.createElement('div');
-            container.className = 'container android';  // Added 'android' class
+            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' };
@@ -86,15 +87,22 @@ document.getElementById('terrainForm').addEventListener('submit', function (even
 
                 if (key === 'thinker' || key === 'worker' || key === 'warrior') {
                     let typeTitle = document.createElement('h2');
-                    typeTitle.textContent = key.toUpperCase(); // Display the type (worker, warrior, thinker)
+                    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);
 
-                    container.appendChild(profile);
-                    container.appendChild(abilities);
+                    // 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);
                 }
             });