adjustments, update from
click still not working
This commit is contained in:
parent
68b6cfeaac
commit
38a02737e8
57
app.py
57
app.py
@ -112,6 +112,63 @@ def monster_info(monster_name):
|
||||
},
|
||||
)
|
||||
|
||||
@app.route("/monster_info_json/<monster_name>")
|
||||
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")
|
||||
|
||||
76
static/js/breeding.js
Normal file
76
static/js/breeding.js
Normal file
@ -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 = '<option value="">All</option>';
|
||||
|
||||
// Populate dropdown options
|
||||
data.forEach(item => {
|
||||
const option = document.createElement("option");
|
||||
option.value = item;
|
||||
option.text = item;
|
||||
dropdown.appendChild(option);
|
||||
});
|
||||
}
|
||||
@ -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);
|
||||
});
|
||||
});
|
||||
|
||||
@ -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));
|
||||
}
|
||||
|
||||
@ -2,37 +2,45 @@
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Breeding Combinations</title>
|
||||
<link rel="stylesheet" href="../static/style/output.css" />
|
||||
</head>
|
||||
<body class="bg-slate-700 font-mono text-white">
|
||||
<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="font-bold text-xl mt-4">
|
||||
Possible Breeding Pairs for {{ selected_monster.name }}
|
||||
</h2>
|
||||
<div class="grid grid-cols-2 gap-1">
|
||||
<div class="col-span-1">
|
||||
<h3 class="font-bold text-lg">Base</h3>
|
||||
<ul>
|
||||
{% for combination in selected_monster.base_combinations %}
|
||||
<li>{{ combination }}</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-span-1">
|
||||
<h3 class="font-bold text-lg">Mates</h3>
|
||||
<ul>
|
||||
{% for combination in selected_monster.mate_combinations %}
|
||||
<li>{{ combination }}</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if selected_monster %}
|
||||
<h2 class="mt-4 text-xl font-bold">
|
||||
Possible Breeding Pairs for {{ selected_monster.name }}
|
||||
</h2>
|
||||
<div class="grid grid-cols-2 gap-1">
|
||||
<div class="col-span-1">
|
||||
<h3 class="text-lg font-bold">Base</h3>
|
||||
<ul>
|
||||
{% for combination in selected_monster.base_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>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-span-1">
|
||||
<h3 class="text-lg font-bold">Mates</h3>
|
||||
<ul>
|
||||
{% 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>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</body>
|
||||
<script src="{{ url_for('static', filename='js/breeding.js') }}"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -26,17 +26,17 @@
|
||||
<iframe
|
||||
id="monsterIframe"
|
||||
src=""
|
||||
class="w-auto h-max mt-4 ml-4 border-2 border-teal-500 rounded-md"
|
||||
onload="resizeIframe(this)"
|
||||
class="w-auto mt-4 ml-4 border-2 border-teal-500 rounded-md h-96"
|
||||
></iframe>
|
||||
|
||||
<iframe
|
||||
id="breedingIframe"
|
||||
src=""
|
||||
class="w-auto mt-4 ml-4 p-2 border-2 border-teal-500 rounded-md"
|
||||
onload="resizeIframe(this)"
|
||||
class="w-auto p-2 mt-4 ml-4 border-2 border-teal-500 rounded-md"
|
||||
></iframe>
|
||||
</div>
|
||||
</div>
|
||||
<script src="{{ url_for('static', filename='js/index.js') }}"></script>
|
||||
<script src="{{ url_for('static', filename='js/breeding.js') }}"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user