From 978329ee49e255150e6f3c8e33a2bba350ea8992 Mon Sep 17 00:00:00 2001 From: Chris kerr Date: Thu, 1 Feb 2024 21:52:59 -0500 Subject: [PATCH] ...optimized --- app.py | 26 +++----- static/js/breeding.js | 59 ------------------ static/js/index.js | 73 ----------------------- static/js/indexListener.js | 25 ++++++++ static/js/populateDropdown.js | 10 ++++ static/js/updateIFrames.js | 23 +++---- static/js/updateMonstersDropdown.js | 9 +++ static/js/{sprite.js => updateSprite.js} | 0 templates/breeding.html | 76 ++++++++++++------------ templates/index.html | 58 ++++++++++-------- 10 files changed, 133 insertions(+), 226 deletions(-) delete mode 100644 static/js/breeding.js delete mode 100644 static/js/index.js create mode 100644 static/js/indexListener.js create mode 100644 static/js/populateDropdown.js create mode 100644 static/js/updateMonstersDropdown.js rename static/js/{sprite.js => updateSprite.js} (100%) diff --git a/app.py b/app.py index ec34d1f..9b18bfc 100644 --- a/app.py +++ b/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_files = [f for f in os.listdir(js_folder) if f.endswith('.js')] + 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(): 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/") 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) diff --git a/static/js/breeding.js b/static/js/breeding.js deleted file mode 100644 index ac09167..0000000 --- a/static/js/breeding.js +++ /dev/null @@ -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 = ''; - - // Populate dropdown options - data.forEach(item => { - const option = document.createElement("option"); - option.value = item; - option.text = item; - dropdown.appendChild(option); - }); - } -} diff --git a/static/js/index.js b/static/js/index.js deleted file mode 100644 index 21f6642..0000000 --- a/static/js/index.js +++ /dev/null @@ -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 = ''; - - // 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; - } -}); diff --git a/static/js/indexListener.js b/static/js/indexListener.js new file mode 100644 index 0000000..836f859 --- /dev/null +++ b/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(); + }); + + +}); diff --git a/static/js/populateDropdown.js b/static/js/populateDropdown.js new file mode 100644 index 0000000..fc4838b --- /dev/null +++ b/static/js/populateDropdown.js @@ -0,0 +1,10 @@ +function populateDropdown(dropdown, data) { + dropdown.innerHTML = ''; + + data.forEach(item => { + const option = document.createElement("option"); + option.value = item; + option.text = item; + dropdown.appendChild(option); + }); +} diff --git a/static/js/updateIFrames.js b/static/js/updateIFrames.js index 6416b8a..6497b50 100644 --- a/static/js/updateIFrames.js +++ b/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"; + ? `/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); - updateIframeSrc("breedingIframe", breedingIframeSrc); -} - -function updateIframeSrc(iframeId, src) { - const iframe = document.getElementById(iframeId); - iframe.src = src; -} - -// Usage example: -updateIframes(familyDropdown, monsterDropdown); + breedingIframe.src = breedingIframeSrc; +} \ No newline at end of file diff --git a/static/js/updateMonstersDropdown.js b/static/js/updateMonstersDropdown.js new file mode 100644 index 0000000..97b1f0e --- /dev/null +++ b/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)); +} diff --git a/static/js/sprite.js b/static/js/updateSprite.js similarity index 100% rename from static/js/sprite.js rename to static/js/updateSprite.js diff --git a/templates/breeding.html b/templates/breeding.html index 63ee5e6..3d08541 100644 --- a/templates/breeding.html +++ b/templates/breeding.html @@ -2,45 +2,45 @@ - - - + + + Breeding Combinations - - - - + + +
- {% if selected_monster %} -

- Breeding Pairs -

-
-
-

Base

-
    - {% for combination in selected_monster.base_combinations %} -
  • - - {{ combination }} -
    • - {% endfor %} -
-
-
-

Mates

-
    - {% for combination in selected_monster.mate_combinations %} -
  • - - {{ combination }} -
    • - {% endfor %} -
-
-
- {% endif %} + {% if selected_monster %} +

Breeding Pairs

+
+
+

Base

+
    + {% for combination in selected_monster.base_combinations %} +
  • + + {{ combination }} +
    • + {% endfor %} +
+
+
+

Mates

+
    + {% for combination in selected_monster.mate_combinations %} +
  • + + {{ combination }} +
    • + {% endfor %} +
+
+
+ {% endif %}
- - + diff --git a/templates/index.html b/templates/index.html index 41e8c8e..077f4da 100644 --- a/templates/index.html +++ b/templates/index.html @@ -6,7 +6,7 @@ DWM APP - +

Welcome to the Dragon Warrior Monsters 2 App

@@ -17,7 +17,11 @@ -
@@ -26,35 +30,39 @@ src="" class="pl-2 pr-2 ml-4 border-2 border-teal-500 rounded-md" height="456" - width="272"> + width="272" + >
- - + +
- + {% for file in js_files %} -{% endfor %} + {% endfor %}