removed old code

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,7 +29,6 @@ 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,18 +202,11 @@ deathmore1,mirudraas2,zoma,
 deathmore1,zoma,azurile,
 deathmore1,zoma,mirudraas1,
 deathmore1,zoma,mirudraas2,
-deathmore2,deathmore1,armorpion,
 deathmore2,deathmore1,titanis,
-deathmore3,deathmore1,armorpion,
+deathmore2,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

@@ -1,129 +0,0 @@
-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,10 +19,11 @@ function updateBreedingPairs() {
 
             if (data.breeding_pairs.length > 0) {
                 var pairsList = document.createElement("ul");
-                pairsList.classList.add('list-disc', 'ml-4');
+                pairsList.classList.add('m-2','p-2','list-disc', 'marker:text-slate-300');
-
+                
                 data.breeding_pairs.forEach(pair => {
                     var listItem = document.createElement("li");
+                    
 
                     // Style "base" text
                     var baseText = document.createElement("span");
@@ -38,7 +39,7 @@ function updateBreedingPairs() {
                     listItem.appendChild(baseText);
                     listItem.appendChild(document.createTextNode(" + "));
                     listItem.appendChild(mateText);
-
+                    
                     pairsList.appendChild(listItem);
                 });
 

static/js/updateBreedingUsage.js

@@ -0,0 +1,32 @@
+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

@@ -1,10 +0,0 @@
-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,6 +565,14 @@ video {
   margin-right: auto;
 }
 
+.mb-0 {
+  margin-bottom: 0px;
+}
+
+.mb-0\.5 {
+  margin-bottom: 0.125rem;
+}
+
 .mb-1 {
   margin-bottom: 0.25rem;
 }
@@ -577,10 +585,6 @@ video {
   margin-bottom: 1rem;
 }
 
-.ml-2 {
-  margin-left: 0.5rem;
-}
-
 .ml-4 {
   margin-left: 1rem;
 }
@@ -601,18 +605,6 @@ 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;
 }
@@ -638,10 +630,6 @@ video {
   width: 100%;
 }
 
-.flex-initial {
-  flex: 0 1 auto;
-}
-
 .border-collapse {
   border-collapse: collapse;
 }
@@ -666,6 +654,14 @@ 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;
 }
@@ -700,11 +696,6 @@ 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));
@@ -766,11 +757,6 @@ video {
   line-height: 1.75rem;
 }
 
-.text-sm {
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-}
-
 .text-xs {
   font-size: 0.75rem;
   line-height: 1rem;
@@ -788,17 +774,13 @@ video {
   text-transform: capitalize;
 }
 
-.italic {
-  font-style: italic;
-}
-
 .leading-7 {
   line-height: 1.75rem;
 }
 
-.text-gray-600 {
+.text-blue-300 {
   --tw-text-opacity: 1;
-  color: rgb(75 85 99 / var(--tw-text-opacity));
+  color: rgb(147 197 253 / var(--tw-text-opacity));
 }
 
 .text-purple-400 {
@@ -806,6 +788,16 @@ 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));
@@ -816,54 +808,49 @@ video {
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
-.text-red-400 {
+.text-purple-300 {
   --tw-text-opacity: 1;
-  color: rgb(248 113 113 / var(--tw-text-opacity));
+  color: rgb(216 180 254 / var(--tw-text-opacity));
 }
 
-.text-blue-500 {
+.marker\:text-sky-400 *::marker {
-  --tw-text-opacity: 1;
+  color: rgb(56 189 248 );
-  color: rgb(59 130 246 / var(--tw-text-opacity));
 }
 
-.text-green-500 {
+.marker\:text-purple-500 *::marker {
-  --tw-text-opacity: 1;
+  color: rgb(168 85 247 );
-  color: rgb(34 197 94 / var(--tw-text-opacity));
 }
 
-.text-slate-500 {
+.marker\:text-slate-500 *::marker {
-  --tw-text-opacity: 1;
+  color: rgb(100 116 139 );
-  color: rgb(100 116 139 / var(--tw-text-opacity));
 }
 
-.text-slate-200 {
+.marker\:text-slate-400 *::marker {
-  --tw-text-opacity: 1;
+  color: rgb(148 163 184 );
-  color: rgb(226 232 240 / var(--tw-text-opacity));
 }
 
-.text-slate-300 {
+.marker\:text-slate-300 *::marker {
-  --tw-text-opacity: 1;
+  color: rgb(203 213 225 );
-  color: rgb(203 213 225 / var(--tw-text-opacity));
 }
 
-.text-blue-200 {
+.marker\:text-sky-400::marker {
-  --tw-text-opacity: 1;
+  color: rgb(56 189 248 );
-  color: rgb(191 219 254 / var(--tw-text-opacity));
 }
 
-.text-blue-300 {
+.marker\:text-purple-500::marker {
-  --tw-text-opacity: 1;
+  color: rgb(168 85 247 );
-  color: rgb(147 197 253 / var(--tw-text-opacity));
 }
 
-.text-red-300 {
+.marker\:text-slate-500::marker {
-  --tw-text-opacity: 1;
+  color: rgb(100 116 139 );
-  color: rgb(252 165 165 / var(--tw-text-opacity));
 }
 
-.text-red-500 {
+.marker\:text-slate-400::marker {
-  --tw-text-opacity: 1;
+  color: rgb(148 163 184 );
-  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,6 +46,8 @@
     <!-- 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"
@@ -55,14 +57,7 @@
       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

@@ -1,43 +0,0 @@
-{% 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 %}