...optimized

app.py

@@ -20,15 +20,17 @@ def teardown_request(exception):
     if hasattr(g, "db"):
         g.db.close()
 
+
 def get_js_files():
-    js_folder = os.path.join(app.static_folder, 'js')
+    js_folder = os.path.join(app.static_folder, "js")
-    js_files = [f for f in os.listdir(js_folder) if f.endswith('.js')]
+    js_files = [f for f in os.listdir(js_folder) if f.endswith(".js")]
     return js_files
 
-@app.route('/')
+
+@app.route("/")
 def show_index():
     js_files = get_js_files()
-    return render_template('index.html', js_files=js_files)
+    return render_template("index.html", js_files=js_files)
 
 
 @app.route("/get_families")
@@ -117,6 +119,7 @@ def monster_info(monster_name):
         },
     )
 
+
 @app.route("/monster_info_json/<monster_name>")
 def monster_info_json(monster_name):
     cursor = g.db.cursor()
@@ -175,19 +178,6 @@ def monster_info_json(monster_name):
     )
 
 
-
-# Update the breeding route
-@app.route("/breeding")
-def breeding():
-    # Get all monsters for dropdown
-    cursor = g.db.cursor()
-    cursor.execute("SELECT DISTINCT name FROM monsters")
-    monsters = [row[0] for row in cursor.fetchall()]
-
-    # Pass the monsters to the breeding template
-    return render_template("breeding.html", monsters=monsters)
-
-
 # Add this route for fetching breeding combinations
 @app.route("/get_breeding_combinations")
 def get_breeding_combinations():
@@ -262,9 +252,11 @@ def get_breeding_info(breed_id):
 
     return base_combinations, mate_combinations
 
+
 @app.route("/footer")
 def show_footer():
     return render_template("footer.html")
 
+
 if __name__ == "__main__":
     app.run(debug=True)

static/js/breeding.js

@@ -1,59 +0,0 @@
-document.addEventListener("DOMContentLoaded", function () {
-    const monsterNames = document.querySelectorAll(".monster-name");
-    const familyDropdown = document.getElementById("familyDropdown");
-    const monsterDropdown = document.getElementById("monsterDropdown");
-
-    // Add click event listener to each monster name
-    monsterNames.forEach(name => {
-        name.addEventListener("click", function () {
-            const selectedMonster = this.dataset.name;
-
-            // Update the monsterDropdown and trigger iframes update
-            updateDropdownAndIframes(selectedMonster, familyDropdown, monsterDropdown);
-        });
-    });
-});
-
-function updateDropdownAndIframes(selectedMonster, familyDropdown, monsterDropdown) {
-    // Check if both familyDropdown and monsterDropdown exist
-    if (familyDropdown && monsterDropdown) {
-        // Update the monsterDropdown value
-        monsterDropdown.value = selectedMonster;
-
-        // Update families dropdown
-        updateMonstersDropdown(familyDropdown);
-
-        // Trigger updateIframes function
-        updateIframes(familyDropdown, monsterDropdown);
-    }
-}
-
-function updateMonstersDropdown(familyDropdown) {
-    // Check if familyDropdown exists
-    if (familyDropdown) {
-        const selectedFamily = familyDropdown.value;
-
-        // Fetch monsters data from the server based on the selected family
-        fetch(`/get_monsters?family=${selectedFamily}`)
-            .then(response => response.json())
-            .then(data => populateDropdown(monsterDropdown, data))
-            .catch(error => console.error("Error fetching monsters:", error));
-    }
-}
-
-
-function populateDropdown(dropdown, data) {
-    // Check if dropdown exists
-    if (dropdown) {
-        // Clear existing options
-        dropdown.innerHTML = '<option value="">All</option>';
-
-        // Populate dropdown options
-        data.forEach(item => {
-            const option = document.createElement("option");
-            option.value = item;
-            option.text = item;
-            dropdown.appendChild(option);
-        });
-    }
-}

static/js/index.js

@@ -1,73 +0,0 @@
-document.addEventListener("DOMContentLoaded", function () {
-    const familyDropdown = document.getElementById("familyDropdown");
-    const monsterDropdown = document.getElementById("monsterDropdown");
-    const monsterIframe = document.getElementById("monsterIframe");
-    const breedingIframe = document.getElementById("breedingIframe");
-
-    // Initialize dropdowns and iframes
-    updateMonstersDropdown();
-    updateIframes();
-
-    // Fetch families data from the server
-    fetch("/get_families")
-        .then(response => response.json())
-        .then(data => {
-            populateDropdown(familyDropdown, data);
-            updateMonstersDropdown();
-            updateIframes();
-        })
-        .catch(error => console.error("Error fetching families:", error));
-
-    familyDropdown.addEventListener("change", function () {
-        updateMonstersDropdown();
-        updateIframes();
-    });
-
-    monsterDropdown.addEventListener("change", function () {
-        updateIframes();
-    });
-
-    function populateDropdown(dropdown, data) {
-        // Clear existing options
-        dropdown.innerHTML = '<option value="">All</option>';
-
-        // Populate dropdown options
-        data.forEach(item => {
-            const option = document.createElement("option");
-            option.value = item;
-            option.text = item;
-            dropdown.appendChild(option);
-        });
-    }
-
-    function updateMonstersDropdown() {
-        const selectedFamily = familyDropdown.value;
-
-        // Fetch monsters data from the server based on the selected family
-        fetch(`/get_monsters?family=${selectedFamily}`)
-            .then(response => response.json())
-            .then(data => populateDropdown(monsterDropdown, data))
-            .catch(error => console.error("Error fetching monsters:", error));
-    }
-
-    function updateIframes() {
-        const selectedFamily = familyDropdown.value;
-        const selectedMonster = monsterDropdown.value;
-
-        // Update monsterIframe src based on selected family and monster
-        const monsterIframeSrc = selectedMonster
-            ? `/monster/${selectedMonster}`
-            : selectedFamily
-            ? `/monster/${selectedFamily}`
-            : "about:blank";
-
-        monsterIframe.src = monsterIframeSrc;
-
-        // Update breedingIframe src based on the selected monster
-        const breedingIframeSrc = selectedMonster
-            ? `/get_breeding_combinations?monster=${selectedMonster}`
-            : "about:blank";
-
-        breedingIframe.src = breedingIframeSrc;
-    }
-});

static/js/indexListener.js

@@ -0,0 +1,25 @@
+document.addEventListener("DOMContentLoaded", function () {
+    const familyDropdown = document.getElementById("familyDropdown");
+    const monsterDropdown = document.getElementById("monsterDropdown");
+
+    // Initialize dropdowns and iframes
+    updateMonstersDropdown();
+
+    // Fetch families data from the server
+    fetch("/get_families")
+        .then(response => response.json())
+        .then(data => {
+            populateDropdown(familyDropdown, data);
+        })
+        .catch(error => console.error("Error fetching families:", error));
+
+    familyDropdown.addEventListener("change", function () {
+        updateMonstersDropdown();
+    });
+
+    monsterDropdown.addEventListener("change", function () {
+        updateIframes();
+    });
+
+
+});

static/js/populateDropdown.js

@@ -0,0 +1,10 @@
+function populateDropdown(dropdown, data) {
+    dropdown.innerHTML = '<option value="">All</option>';
+    
+    data.forEach(item => {
+        const option = document.createElement("option");
+        option.value = item;
+        option.text = item;
+        dropdown.appendChild(option);
+    });
+}

static/js/updateIFrames.js

@@ -1,25 +1,20 @@
-function updateIframes(familyDropdown, monsterDropdown) {
+function updateIframes() {
     const selectedFamily = familyDropdown.value;
     const selectedMonster = monsterDropdown.value;
 
+    // Update monsterIframe src based on selected family and monster
     const monsterIframeSrc = selectedMonster
         ? `/monster/${selectedMonster}`
         : selectedFamily
         ? `/monster/${selectedFamily}`
         : "about:blank";
 
+    monsterIframe.src = monsterIframeSrc;
+
+    // Update breedingIframe src based on the selected monster
     const breedingIframeSrc = selectedMonster
         ? `/get_breeding_combinations?monster=${selectedMonster}`
         : "about:blank";
 
-    updateIframeSrc("monsterIframe", monsterIframeSrc);
+    breedingIframe.src = breedingIframeSrc;
-    updateIframeSrc("breedingIframe", breedingIframeSrc);
 }
-
-function updateIframeSrc(iframeId, src) {
-    const iframe = document.getElementById(iframeId);
-    iframe.src = src;
-}
-
-// Usage example:
-updateIframes(familyDropdown, monsterDropdown);

static/js/updateMonstersDropdown.js

@@ -0,0 +1,9 @@
+function updateMonstersDropdown() {
+    const selectedFamily = familyDropdown.value;
+
+    // Fetch monsters data from the server based on the selected family
+    fetch(`/get_monsters?family=${selectedFamily}`)
+        .then(response => response.json())
+        .then(data => populateDropdown(monsterDropdown, data))
+        .catch(error => console.error("Error fetching monsters:", error));
+}

templates/breeding.html

@@ -3,18 +3,15 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="UTF-8">
+    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Breeding Combinations</title>
-    <link rel="stylesheet" href="../static/style/output.css">
+    <link rel="stylesheet" href="../static/style/output.css" />
-    <script src="{{ url_for('static', filename='js/breeding.js') }}"></script>
   </head>
   <body class="font-mono text-white bg-slate-700">
     <div id="breedingCombinations">
       {% if selected_monster %}
-            <h2 class="text-xl font-bold text-center">
+      <h2 class="text-xl font-bold text-center">Breeding Pairs</h2>
-                Breeding Pairs
-            </h2>
       <div class="grid grid-cols-2 gap-1">
         <div class="col-span-1">
           <h3 class="text-lg font-bold">Base</h3>
@@ -22,7 +19,9 @@
             {% for combination in selected_monster.base_combinations %}
             <li class="text-center cursor-pointer hover:text-red-700 w-fit">
               <!-- Add a class to make the monster name clickable -->
-                                <span class="monster-name" data-name="{{ combination }}">{{ combination }}</span>
+              <span class="monster-name" data-name="{{ combination }}"
+                >{{ combination }}</span
+              >
             </li>
             {% endfor %}
           </ul>
@@ -33,7 +32,9 @@
             {% for combination in selected_monster.mate_combinations %}
             <li class="cursor-pointer hover:text-red-700 w-fit">
               <!-- Add a class to make the monster name clickable -->
-                                <span class="monster-name" data-name="{{ combination }}">{{ combination }}</span>
+              <span class="monster-name" data-name="{{ combination }}"
+                >{{ combination }}</span
+              >
             </li>
             {% endfor %}
           </ul>
@@ -41,6 +42,5 @@
       </div>
       {% endif %}
     </div>
-    <script src="{{ url_for('static', filename='js/breeding.js') }}"></script>
   </body>
 </html>

templates/index.html

@@ -17,7 +17,11 @@
       </select>
 
       <label for="monsterDropdown">Select Monster:</label>
-      <select id="monsterDropdown" class="p-2 rounded-md bg-slate-800" onchange="updateMonsterSprite()">
+      <select
+        id="monsterDropdown"
+        class="p-2 rounded-md bg-slate-800"
+        onchange="updateMonsterSprite()"
+      >
         <option value="">All Monsters</option>
       </select>
       <div id="modules" class="flex mt-4">
@@ -26,7 +30,8 @@
           src=""
           class="pl-2 pr-2 ml-4 border-2 border-teal-500 rounded-md"
           height="456"
-          width="272">
+          width="272"
+        >
         </iframe>
         <div class="grid items-center justify-center grid-cols-1 ml-4">
           <iframe
@@ -34,14 +39,16 @@
             src=""
             class="p-2 ml-8 border-2 border-teal-500 rounded-md"
             height="200"
-              width="200">
+            width="200"
+          >
           </iframe>
           <iframe
             id="breedingIframe"
             src=""
             class="p-2 mt-4 border-2 border-teal-500 rounded-md"
             height="200"
-              width="272">
+            width="272"
+          >
           </iframe>
         </div>
       </div>
@@ -50,7 +57,8 @@
         src="https://dwm.happytavern.co/footer"
         class="p-2 mt-4 ml-4 border-2 border-teal-500 rounded-md float-end"
         height="240"
-              width="800">
+        width="800"
+      >
       </iframe>
     </div>
     {% for file in js_files %}