trying to clean up some of the code base and optimize javascript

app.py

@@ -1,5 +1,5 @@
 from flask import Flask, render_template, g, abort, request, jsonify
-import sqlite3
+import sqlite3, os
 
 app = Flask(__name__)
 
@@ -20,10 +20,15 @@ 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_files = [f for f in os.listdir(js_folder) if f.endswith('.js')]
+    return js_files
 
-@app.route("/")
+@app.route('/')
 def show_index():
-    return render_template("index.html")
+    js_files = get_js_files()
+    return render_template('index.html', js_files=js_files)
 
 
 @app.route("/get_families")
@@ -170,6 +175,7 @@ def monster_info_json(monster_name):
     )
 
 
+
 # Update the breeding route
 @app.route("/breeding")
 def breeding():

static/js/breeding.js

@@ -41,33 +41,6 @@ function updateMonstersDropdown(familyDropdown) {
     }
 }
 
-function updateIframes(familyDropdown, monsterDropdown) {
-    // Check if both familyDropdown and monsterDropdown exist
-    if (familyDropdown && monsterDropdown) {
-        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";
-
-        // Assuming you have these iframe elements defined somewhere
-        const monsterIframe = document.getElementById("monsterIframe");
-        const breedingIframe = document.getElementById("breedingIframe");
-
-        monsterIframe.src = monsterIframeSrc;
-
-        // Update breedingIframe src based on the selected monster
-        const breedingIframeSrc = selectedMonster
-            ? `/get_breeding_combinations?monster=${selectedMonster}`
-            : "about:blank";
-
-        breedingIframe.src = breedingIframeSrc;
-    }
-}
 
 function populateDropdown(dropdown, data) {
     // Check if dropdown exists

static/js/updateIFrames.js

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

templates/index.html

@@ -53,8 +53,8 @@
               width="800">
             </iframe>
     </div>
-    <script src="{{ url_for('static', filename='js/index.js') }}"></script>
+    {% for file in js_files %}
-    <script src="{{ url_for('static', filename='js/breeding.js') }}"></script>
+    <script src="{{ url_for('static', filename='js/' + file) }}"></script>
-    <script src="{{ url_for('static', filename='js/sprite.js') }}"></script>
+{% endfor %}
   </body>
 </html>