template bluprinting, refactoring,

This commit is contained in:
Chris kerr 2024-02-04 15:21:15 -05:00
parent d1597244da
commit 0d187b35ec
8 changed files with 163 additions and 210 deletions

11
app.py
View File

@ -28,9 +28,9 @@ def get_js_files():
@app.route("/")
def show_index():
def show_app():
js_files = get_js_files()
return render_template("index.html", js_files=js_files)
return render_template("app.html", js_files=js_files)
@app.route("/get_families")
@ -120,11 +120,9 @@ def monster_stats(monster_name):
)
# Add this route for fetching breeding combinations
@app.route("/breeds")
def get_breeding_combinations():
selected_monster = request.args.get("monster")
if not selected_monster:
return jsonify({"error": "Invalid input"})
@ -197,10 +195,5 @@ def get_breeding_pairs(breed_id):
return base_pair, mate_pair
@app.route("/footer")
def show_footer():
return render_template("footer.html")
if __name__ == "__main__":
app.run(debug=True)

View File

@ -586,10 +586,6 @@ video {
margin: 0.5rem;
}
.m-4 {
margin: 1rem;
}
.mx-auto {
margin-left: auto;
margin-right: auto;
@ -679,12 +675,13 @@ video {
background-color: rgb(30 41 59 / var(--tw-bg-opacity));
}
.p-2 {
padding: 0.5rem;
.bg-slate-900 {
--tw-bg-opacity: 1;
background-color: rgb(15 23 42 / var(--tw-bg-opacity));
}
.p-4 {
padding: 1rem;
.p-2 {
padding: 0.5rem;
}
.pl-2 {

15
templates/.layout.html Normal file
View File

@ -0,0 +1,15 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" href="https://happytavern.co/.pictures/dwm/favicon.ico" />
<link rel="stylesheet" href="../static/style/output.css" />
{% block head %}{% endblock %}
</head>
<body class="content-center p-2 m-2 font-mono text-white bg-slate-800">
{% block body %}{% endblock %}
</body>
</div>
</html>

View File

@ -1,13 +1,71 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" href="https://happytavern.co/.pictures/dwm/favicon.ico" />
<link rel="stylesheet" href="../static/style/output.css" />
{% block head %}{% endblock %}
</head>
<body class="content-center p-4 m-4 font-mono text-white bg-slate-700">
{% block body %}{% endblock %}
</body>
</html>
{% extends '.layout.html' %} {% block head %}{% endblock %} {% block body %}
<h1 class="text-2xl font-black text-white">
Welcome to the Dragon Warrior Monsters 2 App
</h1>
<div>
<label for="familyDropdown">Select Family:</label>
<select id="familyDropdown" class="p-2 rounded-md bg-slate-900">
<option value="">All Families</option>
</select>
<label for="monsterDropdown">Select Monster:</label>
<select
id="monsterDropdown"
class="p-2 rounded-md bg-slate-900"
onchange="updateMonsterSprite()"
>
<option value="">All Monsters</option>
</select>
<div id="modules" class="flex mt-4">
<iframe
id="monsterIframe"
src=""
class="pl-2 pr-2 ml-4 border-2 border-teal-500 rounded-md"
height="456"
width="280"
>
</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>
</div>
</div>
</div>
<div class="footer mx-auto">
<h2 class="m-2 text-2xl font-bold">About The App</h2>
<p class="leading-7">
Dragon Warrior Monsters 2 App, an open-source project where you can explore
information about monsters, breeding pairs, and more.
</p>
<p class="mt-4 leading-7">
You can contribute to the development and improvement of this app on our Git
repository. Feel free to explore the code, report issues, and submit pull
requests.
</p>
<div class="mt-4 text-purple-400 hover:text-purple-200">
<a
href="https://git.happytavern.co/oceanslim/dwm-app"
target="_blank"
class="text-teal-500 hover:underline"
>
View the git repository
</a>
</div>
</div>
{% for file in js_files %}
<script src="{{ url_for('static', filename='js/' + file) }}"></script>
{% endfor %} {% endblock %}

View File

@ -1,12 +1,4 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Breeding Pairs</title>
<link rel="stylesheet" href="../static/style/output.css" />
</head>
<body class="font-mono text-white bg-slate-700">
{% extends '.layout.html' %} {% block head %}{% endblock %} {% block body %}
<div id="breedingPairs">
{% if selected_monster %}
<h2 class="text-xl font-bold text-center">Breeding Pairs</h2>
@ -19,9 +11,7 @@
id="parent"
class="text-center cursor-pointer hover:text-red-700 w-fit"
>
<span class="monster-name" data-name="{{ pair }}">
{{ pair }}
</span>
<span class="monster-name" data-name="{{ pair }}"> {{ pair }} </span>
</li>
{% endfor %}
</ul>
@ -31,9 +21,7 @@
<ul>
{% for pair in selected_monster.mate_pair %}
<li id="parent" class="cursor-pointer hover:text-red-700 w-fit">
<span class="monster-name" data-name="{{ pair }}">
{{ pair }}
</span>
<span class="monster-name" data-name="{{ pair }}"> {{ pair }} </span>
</li>
{% endfor %}
</ul>
@ -43,6 +31,4 @@
</div>
{% for file in js_files %}
<script src="{{ url_for('static', filename='js/' + file) }}"></script>
{% endfor %}
</body>
</html>
{% endfor %} {% endblock %}

View File

@ -1,29 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>About</title>
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
</head>
<body class="font-mono text-white bg-slate-700">
<div class="container mx-auto">
<h2 class="m-2 text-2xl font-bold">About The App</h2>
<p class="leading-7">
Dragon Warrior Monsters 2 App, an open-source project where you can explore information about monsters, breeding pairs, and more.
</p>
<p class="mt-4 leading-7">
You can contribute to the development and improvement of this app on our Git repository. Feel free to explore the code, report issues, and submit pull requests.
</p>
<div class="mt-4 text-purple-400 hover:text-purple-200">
<a href="https://git.happytavern.co/oceanslim/dwm-app" target="_blank" class="text-teal-500 hover:underline">
View the git repository
</a>
</div>
</div>
</body>
</html>

View File

@ -1,58 +0,0 @@
{% extends 'app.html' %} {% block head %}{% endblock %} {% block body %}
<h1 class="text-2xl font-black text-white">
Welcome to the Dragon Warrior Monsters 2 App
</h1>
<div>
<label for="familyDropdown">Select Family:</label>
<select id="familyDropdown" class="p-2 rounded-md bg-slate-800">
<option value="">All Families</option>
</select>
<label for="monsterDropdown">Select Monster:</label>
<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">
<iframe
id="monsterIframe"
src=""
class="pl-2 pr-2 ml-4 border-2 border-teal-500 rounded-md"
height="456"
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>
</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>
</div>
{% for file in js_files %}
<script src="{{ url_for('static', filename='js/' + file) }}"></script>
{% endfor %} {% endblock %}

View File

@ -1,12 +1,4 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Monster Stats</title>
<link rel="stylesheet" href="../static/style/output.css" />
</head>
<body class="p-2 font-mono text-white bg-slate-700">
{% extends '.layout.html' %} {% block head %}{% endblock %} {% block body %}
<div>
<h2>{{ monster.name }}</h2>
<p><strong>Family:</strong> {{ monster.family }}</p>
@ -44,5 +36,4 @@
{% endfor %}
</ul>
</div>
</body>
</html>
{% endblock %}