diff --git a/app.py b/app.py index b575a5b..a4f4094 100644 --- a/app.py +++ b/app.py @@ -112,6 +112,63 @@ def monster_info(monster_name): }, ) +@app.route("/monster_info_json/") +def monster_info_json(monster_name): + cursor = g.db.cursor() + + # Retrieve monster information from the database based on name + cursor.execute( + """ + SELECT + monsters.id, monsters.name, families.name AS family, monsters.in_story, + monsters.agl, monsters.int, monsters.maxlvl, monsters.atk, monsters.mp, + monsters.exp, monsters.hp, monsters.def + FROM + monsters + JOIN families ON monsters.family_id = families.id + WHERE + monsters.name = ? + """, + (monster_name,), + ) + + monster_info = cursor.fetchone() + + if monster_info is None: + abort(404) + + # Retrieve skills for the monster + cursor.execute("SELECT skill FROM skills WHERE monster_id = ?", (monster_info[0],)) + skills = [row[0] for row in cursor.fetchall()] + + # Retrieve spawn locations for the monster + cursor.execute( + "SELECT map, description FROM spawn_locations WHERE monster_id = ?", + (monster_info[0],), + ) + spawn_locations = [ + {"map": row[0], "description": row[1]} for row in cursor.fetchall() + ] + + return jsonify( + monster={ + "id": monster_info[0], + "name": monster_info[1], + "family": monster_info[2], + "in_story": "Yes" if monster_info[3] else "No", + "agl": monster_info[4], + "int": monster_info[5], + "maxlvl": monster_info[6], + "atk": monster_info[7], + "mp": monster_info[8], + "exp": monster_info[9], + "hp": monster_info[10], + "def": monster_info[11], + "skills": skills, + "spawn_locations": spawn_locations, + } + ) + # Update the breeding route @app.route("/breeding") diff --git a/static/js/breeding.js b/static/js/breeding.js new file mode 100644 index 0000000..564137b --- /dev/null +++ b/static/js/breeding.js @@ -0,0 +1,76 @@ +// breeding.js + +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) { + // Update the monsterDropdown value + monsterDropdown.value = selectedMonster; + + // Update families dropdown (if needed) + updateMonstersDropdown(familyDropdown); + + // Trigger updateIframes function + updateIframes(familyDropdown, monsterDropdown); +} + +function updateMonstersDropdown(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 updateIframes(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) { + // 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 index 1dd1325..97df6c6 100644 --- a/static/js/index.js +++ b/static/js/index.js @@ -71,33 +71,4 @@ document.addEventListener("DOMContentLoaded", function () { breedingIframe.src = breedingIframeSrc; } -//I was trying to get rid of the scroll bars but h-auto/fit wasn't working -// This works to resize but still leaves some scrollbar -//to-do:fix - - // Function to resize iframe - //function resizeIframe(iframe) { - // const body = iframe.contentDocument.body; - // const html = iframe.contentDocument.documentElement; - // - // const height = Math.max( - // body.scrollHeight, - // body.offsetHeight, - // html.clientHeight, - // html.scrollHeight, - // html.offsetHeight - // ); - // - // iframe.style.height = height + "px"; - //} - - - // Add event listeners for iframe load - monsterIframe.addEventListener("load", function () { - resizeIframe(monsterIframe); - }); - - breedingIframe.addEventListener("load", function () { - resizeIframe(breedingIframe); - }); }); diff --git a/static/style/output.css b/static/style/output.css index b5792f4..9fdbe3f 100644 --- a/static/style/output.css +++ b/static/style/output.css @@ -548,14 +548,6 @@ video { grid-column: span 1 / span 1; } -.float-right { - float: right; -} - -.float-left { - float: left; -} - .m-4 { margin: 1rem; } @@ -576,18 +568,6 @@ video { margin-top: 1rem; } -.mt-6 { - margin-top: 1.5rem; -} - -.mt-8 { - margin-top: 2rem; -} - -.mt-20 { - margin-top: 5rem; -} - .flex { display: flex; } @@ -596,54 +576,26 @@ video { display: grid; } -.h-auto { - height: auto; -} - -.h-fit { - height: -moz-fit-content; - height: fit-content; -} - -.h-10 { - height: 2.5rem; +.h-max { + height: -moz-max-content; + height: max-content; } .h-96 { height: 24rem; } -.h-1\/2 { - height: 50%; -} - -.h-3\/4 { - height: 75%; -} - -.h-max { - height: -moz-max-content; - height: max-content; -} - .w-auto { width: auto; } -.flex-1 { - flex: 1 1 0%; +.w-fit { + width: -moz-fit-content; + width: fit-content; } -.flex-auto { - flex: 1 1 auto; -} - -.flex-initial { - flex: 0 1 auto; -} - -.resize { - resize: both; +.cursor-pointer { + cursor: pointer; } .grid-cols-1 { @@ -658,14 +610,6 @@ video { gap: 0.25rem; } -.gap-4 { - gap: 1rem; -} - -.overflow-hidden { - overflow: hidden; -} - .rounded-md { border-radius: 0.375rem; } @@ -724,12 +668,12 @@ video { font-weight: 700; } -.text-blue-500 { - --tw-text-opacity: 1; - color: rgb(59 130 246 / var(--tw-text-opacity)); -} - .text-white { --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity)); } + +.hover\:text-red-700:hover { + --tw-text-opacity: 1; + color: rgb(185 28 28 / var(--tw-text-opacity)); +} diff --git a/templates/breeding.html b/templates/breeding.html index fc022e9..6de04b7 100644 --- a/templates/breeding.html +++ b/templates/breeding.html @@ -2,37 +2,45 @@ - - - + + + Breeding Combinations - - - + + + +
- {% if selected_monster %} -

- Possible Breeding Pairs for {{ selected_monster.name }} -

-
-
-

Base

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

Mates

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

+ Possible Breeding Pairs for {{ selected_monster.name }} +

+
+
+

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 6674026..4066b79 100644 --- a/templates/index.html +++ b/templates/index.html @@ -26,17 +26,17 @@ + +