OceanSlim/dwm-app
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

...optimized

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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)

59
static/js/breeding.js
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);
});
}
}

73
static/js/index.js
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;
}
});

25
static/js/indexListener.js Normal file
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();
});
});

10
static/js/populateDropdown.js Normal file
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);
});
}

21
static/js/updateIFrames.js
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";
? `/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
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));
}

0
static/js/sprite.js → static/js/updateSprite.js
View File

76
templates/breeding.html
View File

@ -2,45 +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">
<script src="{{ url_for('static', filename='js/breeding.js') }}"></script>
</head>
<body class="font-mono text-white bg-slate-700">
<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>
<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="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>
</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 %}
{% if selected_monster %}
<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>
<ul>
{% 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
>
</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>
<script src="{{ url_for('static', filename='js/breeding.js') }}"></script>
</body>
</body>
</html>

58
templates/index.html
View File

@ -6,7 +6,7 @@
<title>DWM APP</title>
<link rel="stylesheet" href="../static/style/output.css" />
</head>
<body class="content-center p-4 m-4 font-mono text-white bg-slate-700" >
<body class="content-center p-4 m-4 font-mono text-white bg-slate-700">
<h1 class="text-2xl font-black text-white">
Welcome to the Dragon Warrior Monsters 2 App
</h1>
@ -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,35 +30,39 @@
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
id="monsterSpriteIframe"
src=""
class="p-2 ml-8 border-2 border-teal-500 rounded-md"
height="200"
width="200">
</iframe>
<iframe
id="breedingIframe"
src=""
class="p-2 mt-4 border-2 border-teal-500 rounded-md"
height="200"
width="272">
</iframe>
<iframe
id="monsterSpriteIframe"
src=""
class="p-2 ml-8 border-2 border-teal-500 rounded-md"
height="200"
width="200"
>
</iframe>
<iframe
id="breedingIframe"
src=""
class="p-2 mt-4 border-2 border-teal-500 rounded-md"
height="200"
width="272"
>
</iframe>
</div>
</div>
<iframe
id="footerIframe"
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">
</iframe>
<iframe
id="footerIframe"
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"
>
</iframe>
</div>
{% for file in js_files %}
<script src="{{ url_for('static', filename='js/' + file) }}"></script>
{% endfor %}
{% endfor %}
</body>
</html>