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"): if hasattr(g, "db"):
g.db.close() g.db.close()
def get_js_files(): def get_js_files():
js_folder = os.path.join(app.static_folder, 'js') js_folder = os.path.join(app.static_folder, "js")
js_files = [f for f in os.listdir(js_folder) if f.endswith('.js')] js_files = [f for f in os.listdir(js_folder) if f.endswith(".js")]
return js_files return js_files
@app.route('/')
@app.route("/")
def show_index(): def show_index():
js_files = get_js_files() 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") @app.route("/get_families")
@ -117,6 +119,7 @@ def monster_info(monster_name):
}, },
) )
@app.route("/monster_info_json/<monster_name>") @app.route("/monster_info_json/<monster_name>")
def monster_info_json(monster_name): def monster_info_json(monster_name):
cursor = g.db.cursor() 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 # Add this route for fetching breeding combinations
@app.route("/get_breeding_combinations") @app.route("/get_breeding_combinations")
def get_breeding_combinations(): def get_breeding_combinations():
@ -262,9 +252,11 @@ def get_breeding_info(breed_id):
return base_combinations, mate_combinations return base_combinations, mate_combinations
@app.route("/footer") @app.route("/footer")
def show_footer(): def show_footer():
return render_template("footer.html") return render_template("footer.html")
if __name__ == "__main__": if __name__ == "__main__":
app.run(debug=True) 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);
});
}

23
static/js/updateIFrames.js
View File

@ -1,25 +1,20 @@
function updateIframes(familyDropdown, monsterDropdown) { function updateIframes() {
const selectedFamily = familyDropdown.value; const selectedFamily = familyDropdown.value;
const selectedMonster = monsterDropdown.value; const selectedMonster = monsterDropdown.value;
// Update monsterIframe src based on selected family and monster
const monsterIframeSrc = selectedMonster const monsterIframeSrc = selectedMonster
? `/monster/${selectedMonster}` ? `/monster/${selectedMonster}`
: selectedFamily : selectedFamily
? `/monster/${selectedFamily}` ? `/monster/${selectedFamily}`
: "about:blank"; : "about:blank";
monsterIframe.src = monsterIframeSrc;
// Update breedingIframe src based on the selected monster
const breedingIframeSrc = selectedMonster const breedingIframeSrc = selectedMonster
? `/get_breeding_combinations?monster=${selectedMonster}` ? `/get_breeding_combinations?monster=${selectedMonster}`
: "about:blank"; : "about:blank";
updateIframeSrc("monsterIframe", monsterIframeSrc); breedingIframe.src = breedingIframeSrc;
updateIframeSrc("breedingIframe", 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> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Breeding Combinations</title> <title>Breeding Combinations</title>
<link rel="stylesheet" href="../static/style/output.css"> <link rel="stylesheet" href="../static/style/output.css" />
<script src="{{ url_for('static', filename='js/breeding.js') }}"></script> </head>
</head> <body class="font-mono text-white bg-slate-700">
<body class="font-mono text-white bg-slate-700">
<div id="breedingCombinations"> <div id="breedingCombinations">
{% if selected_monster %} {% if selected_monster %}
<h2 class="text-xl font-bold text-center"> <h2 class="text-xl font-bold text-center">Breeding Pairs</h2>
Breeding Pairs <div class="grid grid-cols-2 gap-1">
</h2> <div class="col-span-1">
<div class="grid grid-cols-2 gap-1"> <h3 class="text-lg font-bold">Base</h3>
<div class="col-span-1"> <ul>
<h3 class="text-lg font-bold">Base</h3> {% for combination in selected_monster.base_combinations %}
<ul> <li class="text-center cursor-pointer hover:text-red-700 w-fit">
{% for combination in selected_monster.base_combinations %} <!-- Add a class to make the monster name clickable -->
<li class="text-center cursor-pointer hover:text-red-700 w-fit"> <span class="monster-name" data-name="{{ combination }}"
<!-- Add a class to make the monster name clickable --> >{{ combination }}</span
<span class="monster-name" data-name="{{ combination }}">{{ combination }}</span> >
</li> </li>
{% endfor %} {% endfor %}
</ul> </ul>
</div> </div>
<div class="col-span-1"> <div class="col-span-1">
<h3 class="text-lg font-bold">Mates</h3> <h3 class="text-lg font-bold">Mates</h3>
<ul> <ul>
{% for combination in selected_monster.mate_combinations %} {% for combination in selected_monster.mate_combinations %}
<li class="cursor-pointer hover:text-red-700 w-fit"> <li class="cursor-pointer hover:text-red-700 w-fit">
<!-- Add a class to make the monster name clickable --> <!-- 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 }}"
</li> >{{ combination }}</span
{% endfor %} >
</ul> </li>
</div> {% endfor %}
</div> </ul>
{% endif %} </div>
</div>
{% endif %}
</div> </div>
<script src="{{ url_for('static', filename='js/breeding.js') }}"></script> </body>
</body>
</html> </html>

58
templates/index.html
View File

@ -6,7 +6,7 @@
<title>DWM APP</title> <title>DWM APP</title>
<link rel="stylesheet" href="../static/style/output.css" /> <link rel="stylesheet" href="../static/style/output.css" />
</head> </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"> <h1 class="text-2xl font-black text-white">
Welcome to the Dragon Warrior Monsters 2 App Welcome to the Dragon Warrior Monsters 2 App
</h1> </h1>
@ -17,7 +17,11 @@
</select> </select>
<label for="monsterDropdown">Select Monster:</label> <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> <option value="">All Monsters</option>
</select> </select>
<div id="modules" class="flex mt-4"> <div id="modules" class="flex mt-4">
@ -26,35 +30,39 @@
src="" src=""
class="pl-2 pr-2 ml-4 border-2 border-teal-500 rounded-md" class="pl-2 pr-2 ml-4 border-2 border-teal-500 rounded-md"
height="456" height="456"
width="272"> width="272"
>
</iframe> </iframe>
<div class="grid items-center justify-center grid-cols-1 ml-4"> <div class="grid items-center justify-center grid-cols-1 ml-4">
<iframe <iframe
id="monsterSpriteIframe" id="monsterSpriteIframe"
src="" src=""
class="p-2 ml-8 border-2 border-teal-500 rounded-md" class="p-2 ml-8 border-2 border-teal-500 rounded-md"
height="200" height="200"
width="200"> width="200"
</iframe> >
<iframe </iframe>
id="breedingIframe" <iframe
src="" id="breedingIframe"
class="p-2 mt-4 border-2 border-teal-500 rounded-md" src=""
height="200" class="p-2 mt-4 border-2 border-teal-500 rounded-md"
width="272"> height="200"
</iframe> width="272"
>
</iframe>
</div> </div>
</div> </div>
<iframe <iframe
id="footerIframe" id="footerIframe"
src="https://dwm.happytavern.co/footer" src="https://dwm.happytavern.co/footer"
class="p-2 mt-4 ml-4 border-2 border-teal-500 rounded-md float-end" class="p-2 mt-4 ml-4 border-2 border-teal-500 rounded-md float-end"
height="240" height="240"
width="800"> width="800"
</iframe> >
</iframe>
</div> </div>
{% for file in js_files %} {% for file in js_files %}
<script src="{{ url_for('static', filename='js/' + file) }}"></script> <script src="{{ url_for('static', filename='js/' + file) }}"></script>
{% endfor %} {% endfor %}
</body> </body>
</html> </html>