...optimized

This commit is contained in:
Chris kerr 2024-02-01 21:52:59 -05:00
parent 3922e1778a
commit 978329ee49
10 changed files with 133 additions and 226 deletions

26
app.py
View File

@ -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)

View File

@ -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);
});
}
}

View File

@ -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;
}
});

View 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();
});
});

View 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);
});
}

View File

@ -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);

View 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));
}

View File

@ -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>

View File

@ -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 %}