app.py

@@ -9,7 +9,7 @@ from src.api.get_breeding_pairs import *
 from src.api.get_breeding_usage import *
 
 from src.views.serve_content import *
-
+from src.views.breed_info import *
 from src.views.skills import *
 
 app = Flask(__name__)
@@ -29,6 +29,7 @@ app.register_blueprint(get_breeding_usage_bp)
 app.register_blueprint(serve_content)
 
 # Register Other Views Blurprints (HTML Render Templates)
+app.register_blueprint(breed_info_bp)
 app.register_blueprint(skills_bp)
 
 @app.route("/")

src/data/updated_breeding_pairs.csv

@@ -202,11 +202,18 @@ deathmore1,mirudraas2,zoma,
 deathmore1,zoma,azurile,
 deathmore1,zoma,mirudraas1,
 deathmore1,zoma,mirudraas2,
-deathmore2,deathmore1,titanis,
 deathmore2,deathmore1,armorpion,
+deathmore2,deathmore1,titanis,
+deathmore3,deathmore1,armorpion,
 deathmore3,deathmore2,darkmate,
 deathmore3,deathmore2,mudou,
 deathmore3,deathmore2,poseidon,
+deathmore3,mirudraas2,zoma,
+deathmore4,deathmore2,mudou,
+deathmore5,deathmore2,poseidon,
+deathmore5,zoma,mirudraas1,
+deathmore6,zoma,mirudraas2,
+deathmore7,zoma,azurile,
 demonite,any devil,any bird,
 devipine,any plant,gulpple,
 digong,rushfish,gigantes,

src/views/breed_info.py

@@ -0,0 +1,129 @@
+from flask import Blueprint, render_template, g, request
+import jsonify
+
+breed_info_bp = Blueprint('view_breed_info', __name__)
+
+@breed_info_bp.route("/breed")
+def get_breeding_combinations():
+    selected_monster = request.args.get("monster")
+    if not selected_monster:
+        return jsonify({"error": "Invalid input"})
+
+    # Fetch breed ID based on the selected monster as a target
+    breed_id = get_breed_id(selected_monster)
+
+    if breed_id is None:
+        return jsonify({"error": f"No breed information found for {selected_monster}"})
+
+    base_pair, mate_pair = get_breeding_pairs(breed_id)
+
+    # Fetch breeds in which the selected monster is used
+    used_in_breeds = get_used_in_breeds(selected_monster)
+
+    return render_template(
+        "breed.html",
+        selected_monster={
+            "name": selected_monster,
+            "base_pair": base_pair,
+            "mate_pair": mate_pair,
+        },
+        used_in_breeds=used_in_breeds,
+    )
+    
+def get_used_in_breeds(target_monster):
+    cursor = g.db.cursor()
+
+    # Fetch breed IDs where the selected monster is used as a base
+    cursor.execute(
+        """
+        SELECT breed_id
+        FROM breed_requirements
+        WHERE requirement_type = 'base'
+              AND requirement_value = ?
+        """,
+        (target_monster,),
+    )
+
+    base_breed_ids = [row[0] for row in cursor.fetchall()]
+
+    # Fetch breed IDs where the selected monster is used as a mate
+    cursor.execute(
+        """
+        SELECT breed_id
+        FROM breed_requirements
+        WHERE requirement_type = 'mate'
+              AND requirement_value = ?
+        """,
+        (target_monster,),
+    )
+
+    mate_breed_ids = [row[0] for row in cursor.fetchall()]
+
+    # Combine the results from both queries
+    used_in_breed_ids = base_breed_ids + mate_breed_ids
+
+    # Fetch the target monsters for the obtained breed IDs
+    used_in_breeds = []
+    for breed_id in used_in_breed_ids:
+        cursor.execute(
+            """
+            SELECT target
+            FROM breeds
+            WHERE id = ?
+            """,
+            (breed_id,),
+        )
+        target_monster = cursor.fetchone()
+        if target_monster:
+            used_in_breeds.append(target_monster[0])
+
+    return used_in_breeds
+
+def get_breed_id(target_monster):
+    cursor = g.db.cursor()
+
+    # Fetch breed ID based on the selected monster as a target
+    cursor.execute(
+        """
+        SELECT breeds.id
+        FROM breeds
+        WHERE breeds.target = ?
+        """,
+        (target_monster,),
+    )
+
+    breed_id = cursor.fetchone()
+
+    if breed_id:
+        return breed_id[0]
+    else:
+        return None
+
+
+def get_breeding_pairs(breed_id):
+    cursor = g.db.cursor()
+
+    # Fetch base and mate breeding combinations based on the breed ID
+    cursor.execute(
+        """
+        SELECT requirement_type, requirement_value
+        FROM breed_requirements
+        WHERE breed_id = ?
+        """,
+        (breed_id,),
+    )
+
+    breeding_info = cursor.fetchall()
+
+    base_pair = [
+        value
+        for (requirement_type, value) in breeding_info
+        if requirement_type == "base"
+    ]
+    mate_pair = [
+        value
+        for (requirement_type, value) in breeding_info
+        if requirement_type == "mate"
+    ]
+
+    return base_pair, mate_pair    

static/js/indexListener.js

@@ -19,12 +19,12 @@ document.addEventListener("DOMContentLoaded", function () {
     });
 
     monsterDropdown.addEventListener("change", function () {
+        updateIframes();
         updateMonsterStats();
         updateMonsterName();
         updateMonsterFamily();
         updateMonsterLocation();
         updateMonsterSkills();
         updateBreedingPairs();
-        updateBreedingUsage();
     });
 });

static/js/updateBreedingPairs.js

@@ -19,11 +19,10 @@ 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('list-disc', 'ml-4');
-                
+
                 data.breeding_pairs.forEach(pair => {
                     var listItem = document.createElement("li");
-                    
 
                     // Style "base" text
                     var baseText = document.createElement("span");
@@ -39,7 +38,7 @@ function updateBreedingPairs() {
                     listItem.appendChild(baseText);
                     listItem.appendChild(document.createTextNode(" + "));
                     listItem.appendChild(mateText);
-                    
+
                     pairsList.appendChild(listItem);
                 });
 

static/js/updateBreedingUsage.js

@@ -1,32 +0,0 @@
-function updateBreedingUsage() {
-    // Get the selected monster from the dropdown
-    var selectedMonster = document.getElementById("monsterDropdown").value;
-
-    // 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);
-      })
-      .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>";
-}

static/js/updateIFrames.js

@@ -0,0 +1,10 @@
+function updateIframes() {
+    const selectedMonster = monsterDropdown.value;
+
+    // Update breedingIframe src based on the selected monster
+    const breedingIframeSrc = selectedMonster
+        ? `/breed?monster=${selectedMonster}`
+        : "about:blank";
+
+    breedingIframe.src = breedingIframeSrc;
+}

static/style/output.css

@@ -565,14 +565,6 @@ video {
   margin-right: auto;
 }
 
-.mb-0 {
-  margin-bottom: 0px;
-}
-
-.mb-0\.5 {
-  margin-bottom: 0.125rem;
-}
-
 .mb-1 {
   margin-bottom: 0.25rem;
 }
@@ -585,6 +577,10 @@ video {
   margin-bottom: 1rem;
 }
 
+.ml-2 {
+  margin-left: 0.5rem;
+}
+
 .ml-4 {
   margin-left: 1rem;
 }
@@ -605,6 +601,18 @@ video {
   margin-top: 1rem;
 }
 
+.mr-2 {
+  margin-right: 0.5rem;
+}
+
+.mb-0 {
+  margin-bottom: 0px;
+}
+
+.mb-0\.5 {
+  margin-bottom: 0.125rem;
+}
+
 .block {
   display: block;
 }
@@ -630,6 +638,10 @@ video {
   width: 100%;
 }
 
+.flex-initial {
+  flex: 0 1 auto;
+}
+
 .border-collapse {
   border-collapse: collapse;
 }
@@ -654,14 +666,6 @@ video {
   grid-template-columns: repeat(4, minmax(0, 1fr));
 }
 
-.grid-cols-3 {
-  grid-template-columns: repeat(3, minmax(0, 1fr));
-}
-
-.place-content-center {
-  place-content: center;
-}
-
 .items-center {
   align-items: center;
 }
@@ -696,6 +700,11 @@ video {
   border-color: rgb(148 163 184 / var(--tw-border-opacity));
 }
 
+.border-gray-400 {
+  --tw-border-opacity: 1;
+  border-color: rgb(156 163 175 / var(--tw-border-opacity));
+}
+
 .bg-gray-900 {
   --tw-bg-opacity: 1;
   background-color: rgb(17 24 39 / var(--tw-bg-opacity));
@@ -757,6 +766,11 @@ video {
   line-height: 1.75rem;
 }
 
+.text-sm {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+}
+
 .text-xs {
   font-size: 0.75rem;
   line-height: 1rem;
@@ -774,13 +788,17 @@ video {
   text-transform: capitalize;
 }
 
+.italic {
+  font-style: italic;
+}
+
 .leading-7 {
   line-height: 1.75rem;
 }
 
-.text-blue-300 {
+.text-gray-600 {
   --tw-text-opacity: 1;
-  color: rgb(147 197 253 / var(--tw-text-opacity));
+  color: rgb(75 85 99 / var(--tw-text-opacity));
 }
 
 .text-purple-400 {
@@ -788,16 +806,6 @@ video {
   color: rgb(192 132 252 / var(--tw-text-opacity));
 }
 
-.text-red-300 {
-  --tw-text-opacity: 1;
-  color: rgb(252 165 165 / var(--tw-text-opacity));
-}
-
-.text-red-500 {
-  --tw-text-opacity: 1;
-  color: rgb(239 68 68 / var(--tw-text-opacity));
-}
-
 .text-violet-500 {
   --tw-text-opacity: 1;
   color: rgb(139 92 246 / var(--tw-text-opacity));
@@ -808,49 +816,54 @@ video {
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
-.text-purple-300 {
+.text-red-400 {
   --tw-text-opacity: 1;
-  color: rgb(216 180 254 / var(--tw-text-opacity));
+  color: rgb(248 113 113 / var(--tw-text-opacity));
 }
 
-.marker\:text-sky-400 *::marker {
+.text-blue-500 {
-  color: rgb(56 189 248 );
+  --tw-text-opacity: 1;
+  color: rgb(59 130 246 / var(--tw-text-opacity));
 }
 
-.marker\:text-purple-500 *::marker {
+.text-green-500 {
-  color: rgb(168 85 247 );
+  --tw-text-opacity: 1;
+  color: rgb(34 197 94 / var(--tw-text-opacity));
 }
 
-.marker\:text-slate-500 *::marker {
+.text-slate-500 {
-  color: rgb(100 116 139 );
+  --tw-text-opacity: 1;
+  color: rgb(100 116 139 / var(--tw-text-opacity));
 }
 
-.marker\:text-slate-400 *::marker {
+.text-slate-200 {
-  color: rgb(148 163 184 );
+  --tw-text-opacity: 1;
+  color: rgb(226 232 240 / var(--tw-text-opacity));
 }
 
-.marker\:text-slate-300 *::marker {
+.text-slate-300 {
-  color: rgb(203 213 225 );
+  --tw-text-opacity: 1;
+  color: rgb(203 213 225 / var(--tw-text-opacity));
 }
 
-.marker\:text-sky-400::marker {
+.text-blue-200 {
-  color: rgb(56 189 248 );
+  --tw-text-opacity: 1;
+  color: rgb(191 219 254 / var(--tw-text-opacity));
 }
 
-.marker\:text-purple-500::marker {
+.text-blue-300 {
-  color: rgb(168 85 247 );
+  --tw-text-opacity: 1;
+  color: rgb(147 197 253 / var(--tw-text-opacity));
 }
 
-.marker\:text-slate-500::marker {
+.text-red-300 {
-  color: rgb(100 116 139 );
+  --tw-text-opacity: 1;
+  color: rgb(252 165 165 / var(--tw-text-opacity));
 }
 
-.marker\:text-slate-400::marker {
+.text-red-500 {
-  color: rgb(148 163 184 );
+  --tw-text-opacity: 1;
-}
+  color: rgb(239 68 68 / var(--tw-text-opacity));
-
-.marker\:text-slate-300::marker {
-  color: rgb(203 213 225 );
 }
 
 .hover\:text-green-700:hover {

templates/app.html

@@ -46,8 +46,6 @@
     <!-- 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"
@@ -57,7 +55,14 @@
       width="200"
     >
     </iframe>
-    
+    <iframe
+      id="breedingIframe"
+      src=""
+      class="p-2 mt-4 border-2 rounded-md border-slate-400"
+      height="200"
+      width="272"
+    >
+    </iframe>
   </div>
 </div>
 <div class="mt-4 text-center">

templates/breed.html

@@ -0,0 +1,43 @@
+{% extends '.layout.html' %} {% block head %}{% endblock %} {% block body %}
+<div id="breedingPairs">
+  {% if selected_monster %}
+  <h2 class="text-xl font-bold text-center">Breeding Pairs</h2>
+  <div class="grid grid-cols-2 gap-1">
+    <div class="col-span-1">
+      <h3 class="text-lg font-bold">Base</h3>
+      <ul>
+        {% for pair in selected_monster.base_pair %}
+        <li
+          id="parent"
+          class="text-center cursor-pointer hover:text-red-700 w-fit"
+        >
+          <span class="monster-name" data-name="{{ pair }}"> {{ pair }} </span>
+        </li>
+        {% endfor %}
+      </ul>
+    </div>
+    <div class="col-span-1">
+      <h3 class="text-lg font-bold">Mates</h3>
+      <ul>
+        {% for pair in selected_monster.mate_pair %}
+        <li id="parent" class="cursor-pointer hover:text-red-700 w-fit">
+          <span class="monster-name" data-name="{{ pair }}"> {{ pair }} </span>
+        </li>
+        {% endfor %}
+      </ul>
+    </div>
+  </div>
+  {% endif %} {% if used_in_breeds %}
+  <h2 class="text-xl font-bold text-center">Used In</h2>
+  <ul>
+    {% for breed in used_in_breeds %}
+    <li class="text-center cursor-pointer hover:text-green-700 w-fit">
+      <span class="breed-name" data-name="{{ breed }}">{{ breed }}</span>
+    </li>
+    {% endfor %}
+  </ul>
+  {% endif %}
+</div>
+{% for file in js_files %}
+<script src="{{ url_for('static', filename='js/' + file) }}"></script>
+{% endfor %} {% endblock %}