Compare commits

...

4 Commits

Author SHA1 Message Date
Chris kerr
0d187b35ec template bluprinting, refactoring, 2024-02-04 15:21:15 -05:00
Chris kerr
d1597244da app.html added as base bluebrint 2024-02-04 14:56:29 -05:00
Chris kerr
4f644a706a template cleanup 2024-02-04 13:18:59 -05:00
Chris kerr
f628e5ba71 blueprint templates 2024-02-04 11:20:50 -05:00
9 changed files with 169 additions and 221 deletions

11
app.py
View File

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

View File

Before

Width:  |  Height:  |  Size: 41 KiB

After

Width:  |  Height:  |  Size: 41 KiB

View File

@ -586,10 +586,6 @@ video {
margin: 0.5rem; margin: 0.5rem;
} }
.m-4 {
margin: 1rem;
}
.mx-auto { .mx-auto {
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
@ -599,6 +595,10 @@ video {
margin-left: 1rem; margin-left: 1rem;
} }
.ml-8 {
margin-left: 2rem;
}
.mt-2 { .mt-2 {
margin-top: 0.5rem; margin-top: 0.5rem;
} }
@ -607,14 +607,6 @@ video {
margin-top: 1rem; margin-top: 1rem;
} }
.ml-6 {
margin-left: 1.5rem;
}
.ml-8 {
margin-left: 2rem;
}
.block { .block {
display: block; display: block;
} }
@ -632,10 +624,6 @@ video {
width: fit-content; width: fit-content;
} }
.flex-1 {
flex: 1 1 0%;
}
.cursor-pointer { .cursor-pointer {
cursor: pointer; cursor: pointer;
} }
@ -687,12 +675,13 @@ video {
background-color: rgb(30 41 59 / var(--tw-bg-opacity)); background-color: rgb(30 41 59 / var(--tw-bg-opacity));
} }
.p-2 { .bg-slate-900 {
padding: 0.5rem; --tw-bg-opacity: 1;
background-color: rgb(15 23 42 / var(--tw-bg-opacity));
} }
.p-4 { .p-2 {
padding: 1rem; padding: 0.5rem;
} }
.pl-2 { .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>

71
templates/app.html Normal file
View File

@ -0,0 +1,71 @@
{% 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,15 +1,5 @@
<!-- breeding.html --> {% extends '.layout.html' %} {% block head %}{% endblock %} {% block body %}
<div id="breedingPairs">
<!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">
<div id="breedingPairs">
{% if selected_monster %} {% 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="grid grid-cols-2 gap-1">
@ -17,11 +7,11 @@
<h3 class="text-lg font-bold">Base</h3> <h3 class="text-lg font-bold">Base</h3>
<ul> <ul>
{% for pair in selected_monster.base_pair %} {% for pair in selected_monster.base_pair %}
<li id="parent" class="text-center cursor-pointer hover:text-red-700 w-fit"> <li
<!-- Add a class to make the monster name clickable --> id="parent"
<span class="monster-name" data-name="{{ pair }}" class="text-center cursor-pointer hover:text-red-700 w-fit"
>{{ pair }}</span
> >
<span class="monster-name" data-name="{{ pair }}"> {{ pair }} </span>
</li> </li>
{% endfor %} {% endfor %}
</ul> </ul>
@ -31,19 +21,14 @@
<ul> <ul>
{% for pair in selected_monster.mate_pair %} {% for pair in selected_monster.mate_pair %}
<li id="parent" class="cursor-pointer hover:text-red-700 w-fit"> <li id="parent" class="cursor-pointer hover:text-red-700 w-fit">
<!-- Add a class to make the monster name clickable --> <span class="monster-name" data-name="{{ pair }}"> {{ pair }} </span>
<span class="monster-name" data-name="{{ pair }}"
>{{ pair }}</span
>
</li> </li>
{% endfor %} {% endfor %}
</ul> </ul>
</div> </div>
</div> </div>
{% endif %} {% endif %}
</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 %} {% endblock %}
</body>
</html>

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,69 +0,0 @@
<!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" />
<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">
<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</option>
</select>
<label for="monsterDropdown">Select Monster:</label>
<select
id="monsterDropdown"
class="p-2 rounded-md bg-slate-800"
onchange="updateMonsterSprite()"
>
<option value="">All</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 %}
</body>
</html>

View File

@ -1,20 +1,14 @@
<!DOCTYPE html> {% extends '.layout.html' %} {% block head %}{% endblock %} {% block body %}
<html lang="en"> <div>
<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">
<div>
<h2>{{ monster.name }}</h2> <h2>{{ monster.name }}</h2>
<p><strong>Family:</strong> {{ monster.family }}</p> <p><strong>Family:</strong> {{ monster.family }}</p>
<div class="Stats"> <div class="Stats">
<p><strong>Stats:</strong></p> <p><strong>Stats:</strong></p>
<ul> <ul>
<div class="grid grid-cols-2 gap-1"> <div class="grid grid-cols-2 gap-1">
<li><label class="font-bold">Max Level:</label> {{ monster.maxlvl }}</li> <li>
<label class="font-bold">Max Level:</label> {{ monster.maxlvl }}
</li>
<li><label class="font-bold">EXP:</label> {{ monster.exp }}</li> <li><label class="font-bold">EXP:</label> {{ monster.exp }}</li>
<li><label class="font-bold">HP:</label> {{ monster.hp }}</li> <li><label class="font-bold">HP:</label> {{ monster.hp }}</li>
<li><label class="font-bold">ATK:</label> {{ monster.atk }}</li> <li><label class="font-bold">ATK:</label> {{ monster.atk }}</li>
@ -41,6 +35,5 @@
<li>{{ location.map }} - {{ location.description }}</li> <li>{{ location.map }} - {{ location.description }}</li>
{% endfor %} {% endfor %}
</ul> </ul>
</div> </div>
</body> {% endblock %}
</html>