Styling Changes

static/js/updateBreedingPairs.js

@@ -11,7 +11,7 @@ function updateBreedingPairs() {
             breedingPairsContainer.innerHTML = `
             <div class='text-center '>
             <h3 class='text-xl font-bold mb-0.5'>Breeding Pairs:</h3>
-                <div class='text-xs mb-2 flex justify-center'>
+                <div class='text-xs mb-2 flex justify-center text-left'>
                     (<p class='text-red-300'>base</p> &nbsp;+&nbsp; <p class='text-blue-300'>mate</p>)
                 </div>
             </div>
@@ -19,7 +19,7 @@ function updateBreedingPairs() {
 
             if (data.breeding_pairs.length > 0) {
                 var pairsList = document.createElement("ul");
-                pairsList.classList.add('m-2','p-2','list-disc', 'marker:text-slate-300');
+                pairsList.classList.add('m-2','p-2','list-disc', 'marker:text-slate-300','text-left');
                 
                 data.breeding_pairs.forEach(pair => {
                     var listItem = document.createElement("li");

static/js/updateBreedingUsage.js

@@ -1,32 +1,39 @@
 function updateBreedingUsage() {
-    // Get the selected monster from the dropdown
-    var selectedMonster = document.getElementById("monsterDropdown").value;
+  // Get the selected monster from the dropdown
+  var selectedMonster = document.getElementById("monsterDropdown").value;
 
-    // Fetch data from the API
-    fetch(`/api/breeding/usage/${selectedMonster}`)
+  // Fetch data from the API
+  fetch(`/api/breeding/usage/${selectedMonster}`)
       .then(response => response.json())
       .then(data => {
-        // Update the HTML with the list of offspring monsters
-        renderOffspringList(data.used_in);
+          // Update the HTML with the list of offspring monsters
+          renderOffspringList(data.used_in);
       })
       .catch(error => console.error('Error fetching data:', error));
-  }
-
-  function renderOffspringList(usageData) {
-    var offspringContainer = document.getElementById("offspringContainer");
-
-    // Clear previous HTML content
-    offspringContainer.innerHTML = "<h2 class='text-xl font-bold'>Used to Breed: </h2><ul class='list-disc'>";
-
-    // Create and append HTML for each offspring
-    usageData.forEach(item => {
-      var offspringHTML = `<li class='font-bold marker:text-slate-400 text-purple-300'>
-                            ${item.offspring}   
-                            </li>
-                            `;
-      offspringContainer.innerHTML += offspringHTML;
-    });
-
-    // Close the unordered list
-    offspringContainer.innerHTML += "</ul>";
+}
+
+function renderOffspringList(usageData) {
+  var offspringContainer = document.getElementById("offspringContainer");
+
+  // Clear previous HTML content
+  offspringContainer.innerHTML = "<h2 class='text-xl font-bold'>Used to Breed: </h2><ul class='list-disc'>";
+
+  // Create a Set to store unique offspring monsters
+  var uniqueOffspringSet = new Set();
+
+  // Add unique offspring to the Set
+  usageData.forEach(item => {
+      uniqueOffspringSet.add(item.offspring);
+  });
+
+  // Create and append HTML for each unique offspring
+  uniqueOffspringSet.forEach(offspring => {
+      var offspringHTML = `<li class='font-bold text-left marker:text-slate-400 text-purple-300'>
+                          ${offspring}   
+                          </li>`;
+      offspringContainer.innerHTML += offspringHTML;
+  });
+
+  // Close the unordered list
+  offspringContainer.innerHTML += "</ul>";
 }

static/style/output.css

@@ -617,10 +617,51 @@ video {
   display: grid;
 }
 
+.h-screen {
+  height: 100vh;
+}
+
 .w-full {
   width: 100%;
 }
 
+.w-fit {
+  width: -moz-fit-content;
+  width: fit-content;
+}
+
+.w-auto {
+  width: auto;
+}
+
+.w-1\/2 {
+  width: 50%;
+}
+
+.max-w-lg {
+  max-width: 32rem;
+}
+
+.max-w-md {
+  max-width: 28rem;
+}
+
+.max-w-sm {
+  max-width: 24rem;
+}
+
+.max-w-xs {
+  max-width: 20rem;
+}
+
+.max-w-xl {
+  max-width: 36rem;
+}
+
+.flex-1 {
+  flex: 1 1 0%;
+}
+
 .border-collapse {
   border-collapse: collapse;
 }
@@ -637,6 +678,14 @@ video {
   grid-template-columns: repeat(4, minmax(0, 1fr));
 }
 
+.flex-col {
+  flex-direction: column;
+}
+
+.place-content-center {
+  place-content: center;
+}
+
 .content-center {
   align-content: center;
 }
@@ -704,6 +753,10 @@ video {
   padding-bottom: 0.5rem;
 }
 
+.text-left {
+  text-align: left;
+}
+
 .text-center {
   text-align: center;
 }

templates/.layout.html

@@ -8,22 +8,19 @@
     {% block head %}{% endblock %}
   </head>
   <body
-    class="content-center justify-center p-2 m-2 font-mono text-white bg-neutral-800"
+    class="content-center justify-center p-2 m-2 font-mono text-white bg-neutral-800 w-auto text-center"
   >
     {% block body %} {% endblock %}
   </body>
-  <div class="mx-auto footer">
-    <h2 class="m-2 text-2xl font-bold">About The App</h2>
-    <p class="leading-7">
-      Dragon Warrior Monsters 2 App, an open-source project where you can explore
-      information about monsters, breeding pairs, and more.
+  <div class="mx-auto footer max-w-lg">
+    <h2 class="m-2 text-xl font-bold">About The App</h2>
+    <p class="text-md">
+      Dragon Warrior Monsters 2 App, an open-source project. You can contribute
+      to the development and improvement of this app on our Git repository. Feel
+      free to explore the code, report issues, and submit pull requests.
     </p>
-    <p class="mt-4 leading-7">
-      You can contribute to the development and improvement of this app on our Git
-      repository. Feel free to explore the code, report issues, and submit pull
-      requests.
-    </p>
-    <div class="mt-4">
+    <p class="mt-4 leading-7"></p>
+    <div class="mt-4 text-md">
       <a
         href="https://git.happytavern.co/oceanslim/dwm-app"
         target="_blank"
@@ -32,6 +29,7 @@
         View the git repository
       </a>
     </div>
+  </div>
   {% for file in js_files %}
   <script src="{{ url_for('static', filename='js/' + file) }}"></script>
   {% endfor %}

templates/app.html

@@ -1,14 +1,12 @@
 {% extends '.layout.html' %} {% block head %}{% endblock %} {% block body %}
-<h1 class="text-2xl font-black text-white">
-  Welcome to the Dragon Warrior Monsters 2 App
-</h1>
+<h1 class="text-2xl font-black text-white">Dragon Warrior Monsters 2 App</h1>
 <br />
-<label for="familyDropdown">Select Family:</label>
+<label for="familyDropdown">Family:</label>
 <select id="familyDropdown" class="p-2 bg-gray-900 rounded-md">
   <option value="">All Families</option>
 </select>
 <br />
-<label for="monsterDropdown">Select Monster:</label>
+<label for="monsterDropdown">Monster:</label>
 <select
   id="monsterDropdown"
   class="p-2 mt-2 rounded-md bg-slate-900"
@@ -19,13 +17,20 @@
 
 <br />
 
-<div id="modules" class="flex mt-4">
-
-  <div class="p-2 m-2 border-2 rounded-md border-slate-400">
-    <div id="monsterNameContainer" class="text-center">
-      <!-- Monster name will be displayed here -->
-    </div>
+<div id="modules" class="mt-4 justify-center items-center flex flex-col">
+  <div id="monsterNameContainer" class="text-center">
+    <!-- Monster name will be displayed here -->
+  </div>
+  <iframe
+    id="monsterSpriteIframe"
+    src=""
+    class="p-2 m-2 border-2 rounded-md border-slate-400"
+    height="200"
+    width="200"
+  >
+  </iframe>
 
+  <div class="p-2 mt-2 border-2 rounded-md border-slate-400 w-full max-w-xs">
     <div id="monsterFamilyContainer" class="mt-1">
       <!-- Monster Family will be displayed here-->
     </div>
@@ -42,30 +47,29 @@
     </div>
   </div>
 
-  <div id="breedingPairsContainer" class="p-2 m-2 border-2 rounded-md border-slate-400">
-    <!-- Breeding pairs will be displayed here -->
-  </div>
-
-  <div id="offspringContainer" class="p-2 m-2 border-2 rounded-md border-slate-400"></div>
-
-  <div class="grid items-center justify-center grid-cols-1 ml-4">
-    <iframe
-      id="monsterSpriteIframe"
-      src=""
-      class="p-2 ml-8 border-2 rounded-md border-slate-400"
-      height="200"
-      width="200"
+  <div class="flex m-2 w-full max-w-xl">
+    <div
+      id="breedingPairsContainer"
+      class="p-2 m-2 border-2 rounded-md border-slate-400 w-full"
     >
-    </iframe>
+      <!-- Breeding pairs will be displayed here -->
+    </div>
 
+    <div
+      id="offspringContainer"
+      class="p-2 m-2 border-2 rounded-md border-slate-400 w-full"
+    ></div>
+
+    <div class="grid items-center justify-center grid-cols-1 ml-4"></div>
+  </div>
+  <div class="mt-4 text-center">
+    <a
+      href="/skills"
+      class="float-left text-2xl font-bold text-purple-400 hover:underline"
+      >Go to Skills Data Page</a
+    >
   </div>
 </div>
-<div class="mt-4 text-center">
-  <a
-    href="/skills"
-    class="float-left text-2xl font-bold text-purple-400 hover:underline"
-    >Go to Skills Data Page</a
-  >
-</div>
-</br>
+
+<br />
 {% endblock %}