...optimized
This commit is contained in:
parent
3922e1778a
commit
978329ee49
26
app.py
26
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/<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)
|
||||
|
@ -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);
|
||||
});
|
||||
}
|
||||
}
|
@ -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;
|
||||
}
|
||||
});
|
25
static/js/indexListener.js
Normal file
25
static/js/indexListener.js
Normal file
@ -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();
|
||||
});
|
||||
|
||||
|
||||
});
|
10
static/js/populateDropdown.js
Normal file
10
static/js/populateDropdown.js
Normal file
@ -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);
|
||||
});
|
||||
}
|
@ -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);
|
||||
updateIframeSrc("breedingIframe", breedingIframeSrc);
|
||||
breedingIframe.src = breedingIframeSrc;
|
||||
}
|
||||
|
||||
function updateIframeSrc(iframeId, src) {
|
||||
const iframe = document.getElementById(iframeId);
|
||||
iframe.src = src;
|
||||
}
|
||||
|
||||
// Usage example:
|
||||
updateIframes(familyDropdown, monsterDropdown);
|
||||
|
9
static/js/updateMonstersDropdown.js
Normal file
9
static/js/updateMonstersDropdown.js
Normal file
@ -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));
|
||||
}
|
@ -3,18 +3,15 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<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">
|
||||
<script src="{{ url_for('static', filename='js/breeding.js') }}"></script>
|
||||
<link rel="stylesheet" href="../static/style/output.css" />
|
||||
</head>
|
||||
<body class="font-mono text-white bg-slate-700">
|
||||
<div id="breedingCombinations">
|
||||
{% if selected_monster %}
|
||||
<h2 class="text-xl font-bold text-center">
|
||||
Breeding Pairs
|
||||
</h2>
|
||||
<h2 class="text-xl font-bold text-center">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>
|
||||
|
@ -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 %}
|
||||
|
Loading…
Reference in New Issue
Block a user