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

template bluprinting, refactoring,

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

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)

13
static/style/output.css
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;
@ -679,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>

84
templates/app.html
View File

@ -1,13 +1,71 @@
<!DOCTYPE html> {% extends '.layout.html' %} {% block head %}{% endblock %} {% block body %}
<html lang="en"> <h1 class="text-2xl font-black text-white">
<head> Welcome to the Dragon Warrior Monsters 2 App
<meta charset="UTF-8" /> </h1>
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <div>
<link rel="icon" href="https://happytavern.co/.pictures/dwm/favicon.ico" /> <label for="familyDropdown">Select Family:</label>
<link rel="stylesheet" href="../static/style/output.css" /> <select id="familyDropdown" class="p-2 rounded-md bg-slate-900">
{% block head %}{% endblock %} <option value="">All Families</option>
</head> </select>
<body class="content-center p-4 m-4 font-mono text-white bg-slate-700">
{% block body %}{% endblock %} <label for="monsterDropdown">Select Monster:</label>
</body> <select
</html> 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 %}

80
templates/breeds.html
View File

@ -1,48 +1,34 @@
<!DOCTYPE html> {% extends '.layout.html' %} {% block head %}{% endblock %} {% block body %}
<html lang="en"> <div id="breedingPairs">
<head> {% if selected_monster %}
<meta charset="UTF-8" /> <h2 class="text-xl font-bold text-center">Breeding Pairs</h2>
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <div class="grid grid-cols-2 gap-1">
<title>Breeding Pairs</title> <div class="col-span-1">
<link rel="stylesheet" href="../static/style/output.css" /> <h3 class="text-lg font-bold">Base</h3>
</head> <ul>
<body class="font-mono text-white bg-slate-700"> {% for pair in selected_monster.base_pair %}
<div id="breedingPairs"> <li
{% if selected_monster %} id="parent"
<h2 class="text-xl font-bold text-center">Breeding Pairs</h2> class="text-center cursor-pointer hover:text-red-700 w-fit"
<div class="grid grid-cols-2 gap-1"> >
<div class="col-span-1"> <span class="monster-name" data-name="{{ pair }}"> {{ pair }} </span>
<h3 class="text-lg font-bold">Base</h3> </li>
<ul> {% endfor %}
{% for pair in selected_monster.base_pair %} </ul>
<li
id="parent"
class="text-center cursor-pointer hover:text-red-700 w-fit"
>
<span class="monster-name" data-name="{{ pair }}">
{{ pair }}
</span>
</li>
{% endfor %}
</ul>
</div>
<div class="col-span-1">
<h3 class="text-lg font-bold">Mates</h3>
<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>
</li>
{% endfor %}
</ul>
</div>
</div>
{% endif %}
</div> </div>
{% for file in js_files %} <div class="col-span-1">
<script src="{{ url_for('static', filename='js/' + file) }}"></script> <h3 class="text-lg font-bold">Mates</h3>
{% endfor %} <ul>
</body> {% for pair in selected_monster.mate_pair %}
</html> <li id="parent" class="cursor-pointer hover:text-red-700 w-fit">
<span class="monster-name" data-name="{{ pair }}"> {{ pair }} </span>
</li>
{% endfor %}
</ul>
</div>
</div>
{% endif %}
</div>
{% for file in js_files %}
<script src="{{ url_for('static', filename='js/' + file) }}"></script>
{% endfor %} {% endblock %}

29
templates/footer.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>

58
templates/index.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 %}

83
templates/stats.html
View File

@ -1,48 +1,39 @@
<!DOCTYPE html> {% extends '.layout.html' %} {% block head %}{% endblock %} {% block body %}
<html lang="en"> <div>
<head> <h2>{{ monster.name }}</h2>
<meta charset="UTF-8" /> <p><strong>Family:</strong> {{ monster.family }}</p>
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <div class="Stats">
<title>Monster Stats</title> <p><strong>Stats:</strong></p>
<link rel="stylesheet" href="../static/style/output.css" /> <ul>
</head> <div class="grid grid-cols-2 gap-1">
<body class="p-2 font-mono text-white bg-slate-700"> <li>
<div> <label class="font-bold">Max Level:</label> {{ monster.maxlvl }}
<h2>{{ monster.name }}</h2> </li>
<p><strong>Family:</strong> {{ monster.family }}</p> <li><label class="font-bold">EXP:</label> {{ monster.exp }}</li>
<div class="Stats"> <li><label class="font-bold">HP:</label> {{ monster.hp }}</li>
<p><strong>Stats:</strong></p> <li><label class="font-bold">ATK:</label> {{ monster.atk }}</li>
<ul> <li><label class="font-bold">MP:</label> {{ monster.mp }}</li>
<div class="grid grid-cols-2 gap-1"> <li><label class="font-bold">DEF:</label> {{ monster.def }}</li>
<li> <li><label class="font-bold">AGL:</label> {{ monster.agl }}</li>
<label class="font-bold">Max Level:</label> {{ monster.maxlvl }} <li><label class="font-bold">INT:</label> {{ monster.int }}</li>
</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">ATK:</label> {{ monster.atk }}</li>
<li><label class="font-bold">MP:</label> {{ monster.mp }}</li>
<li><label class="font-bold">DEF:</label> {{ monster.def }}</li>
<li><label class="font-bold">AGL:</label> {{ monster.agl }}</li>
<li><label class="font-bold">INT:</label> {{ monster.int }}</li>
</div>
</ul>
</div> </div>
</ul>
</div>
<p><strong>Skills:</strong></p> <p><strong>Skills:</strong></p>
<ul> <ul>
{% for skill in monster.skills %} {% for skill in monster.skills %}
<li>{{ skill }}</li> <li>{{ skill }}</li>
{% endfor %} {% endfor %}
</ul> </ul>
<div class="grid grid-cols-1 gap-1 mt-2"> <div class="grid grid-cols-1 gap-1 mt-2">
<p><strong>In Story:</strong> {{ monster.in_story }}</p> <p><strong>In Story:</strong> {{ monster.in_story }}</p>
<p><strong>Spawn Locations:</strong></p> <p><strong>Spawn Locations:</strong></p>
</div> </div>
<ul> <ul>
{% for location in monster.spawn_locations %} {% for location in monster.spawn_locations %}
<li>{{ location.map }} - {{ location.description }}</li> <li>{{ location.map }} - {{ location.description }}</li>
{% endfor %} {% endfor %}
</ul> </ul>
</div> </div>
</body> {% endblock %}
</html>