used in added to breeding window

app.py

@@ -61,13 +61,21 @@ def json_monsters():
     if selected_family:
         cursor.execute(
             """
-            SELECT name FROM monsters
+            SELECT name
+            FROM monsters
             WHERE family_id = (SELECT id FROM families WHERE name = ?)
+            ORDER BY (agl + int + atk + mp + exp + hp + def) * maxlvl ASC
         """,
             (selected_family,),
         )
     else:
-        cursor.execute("SELECT DISTINCT name FROM monsters")
+        cursor.execute(
+            """
+            SELECT name
+            FROM monsters
+            ORDER BY (agl + int + atk + mp + exp + hp + def) * maxlvl ASC
+            """
+        )
 
     monsters = [row[0] for row in cursor.fetchall()]
     return jsonify(monsters)
@@ -199,6 +207,9 @@ def get_breeding_combinations():
 
     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(
         "breeds.html",
         selected_monster={
@@ -206,8 +217,57 @@ def get_breeding_combinations():
             "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()

static/style/output.css

@@ -626,31 +626,6 @@ video {
   border-width: 2px;
 }
 
-.border-teal-500 {
-  --tw-border-opacity: 1;
-  border-color: rgb(20 184 166 / var(--tw-border-opacity));
-}
-
-.border-purple-600 {
-  --tw-border-opacity: 1;
-  border-color: rgb(147 51 234 / var(--tw-border-opacity));
-}
-
-.border-purple-500 {
-  --tw-border-opacity: 1;
-  border-color: rgb(168 85 247 / var(--tw-border-opacity));
-}
-
-.border-purple-400 {
-  --tw-border-opacity: 1;
-  border-color: rgb(192 132 252 / var(--tw-border-opacity));
-}
-
-.border-orange-400 {
-  --tw-border-opacity: 1;
-  border-color: rgb(251 146 60 / var(--tw-border-opacity));
-}
-
 .border-slate-400 {
   --tw-border-opacity: 1;
   border-color: rgb(148 163 184 / var(--tw-border-opacity));
@@ -666,11 +641,6 @@ video {
   background-color: rgb(31 41 55 / var(--tw-bg-opacity));
 }
 
-.bg-gray-900 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(17 24 39 / var(--tw-bg-opacity));
-}
-
 .bg-neutral-800 {
   --tw-bg-opacity: 1;
   background-color: rgb(38 38 38 / var(--tw-bg-opacity));
@@ -728,16 +698,16 @@ video {
   color: rgb(192 132 252 / var(--tw-text-opacity));
 }
 
-.text-teal-500 {
-  --tw-text-opacity: 1;
-  color: rgb(20 184 166 / var(--tw-text-opacity));
-}
-
 .text-white {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
+.hover\:text-green-700:hover {
+  --tw-text-opacity: 1;
+  color: rgb(21 128 61 / var(--tw-text-opacity));
+}
+
 .hover\:text-purple-200:hover {
   --tw-text-opacity: 1;
   color: rgb(233 213 255 / var(--tw-text-opacity));

templates/.layout.html

@@ -7,7 +7,9 @@
     <link rel="stylesheet" href="../static/style/output.css" />
     {% block head %}{% endblock %}
   </head>
-  <body class="content-center justify-center p-2 m-2 font-mono text-white bg-neutral-800">
+  <body
+    class="content-center justify-center p-2 m-2 font-mono text-white bg-neutral-800"
+  >
     {% block body %} {% endblock %}
   </body>
   {% for file in js_files %}

templates/breeds.html

@@ -27,6 +27,15 @@
       </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 %}