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

Compare commits

base: OceanSlim:ac2f700ae16b0028fe2a4333fb46975663340c2e
Branches Tags
OceanSlim:main
...
compare: OceanSlim:4822f47aac4fd5d5259878c621751ae498fbfd17
Branches Tags
OceanSlim:main

2 Commits
ac2f700ae1 ... 4822f47aac

Author SHA1 Message Date
Chris kerr
4822f47aac Styling Changes 2024-02-26 06:54:52 -05:00
Chris kerr
d6565acc7f breed usage no longer has any duplicates 2024-02-24 14:30:47 -05:00
5 changed files with 133 additions and 71 deletions
Show Stats Expand all files Collapse all files

4
static/js/updateBreedingPairs.js
View File

@ -11,7 +11,7 @@ function updateBreedingPairs() {
breedingPairsContainer.innerHTML = ` breedingPairsContainer.innerHTML = `
<div class='text-center '> <div class='text-center '>
<h3 class='text-xl font-bold mb-0.5'>Breeding Pairs:</h3> <h3 class='text-xl font-bold mb-0.5'>Breeding Pairs:</h3>
<div class='text-xs mb-2 flex justify-center'> <div class='text-xs mb-2 flex justify-center text-left'>
(<p class='text-red-300'>base</p> &nbsp;+&nbsp; <p class='text-blue-300'>mate</p>) (<p class='text-red-300'>base</p> &nbsp;+&nbsp; <p class='text-blue-300'>mate</p>)
</div> </div>
</div> </div>
@ -19,7 +19,7 @@ function updateBreedingPairs() {
if (data.breeding_pairs.length > 0) { if (data.breeding_pairs.length > 0) {
var pairsList = document.createElement("ul"); var pairsList = document.createElement("ul");
pairsList.classList.add('m-2','p-2','list-disc', 'marker:text-slate-300'); pairsList.classList.add('m-2','p-2','list-disc', 'marker:text-slate-300','text-left');
data.breeding_pairs.forEach(pair => { data.breeding_pairs.forEach(pair => {
var listItem = document.createElement("li"); var listItem = document.createElement("li");

17
static/js/updateBreedingUsage.js
View File

@ -18,12 +18,19 @@ function updateBreedingUsage() {
// Clear previous HTML content // Clear previous HTML content
offspringContainer.innerHTML = "<h2 class='text-xl font-bold'>Used to Breed: </h2><ul class='list-disc'>"; offspringContainer.innerHTML = "<h2 class='text-xl font-bold'>Used to Breed: </h2><ul class='list-disc'>";
// Create and append HTML for each offspring // Create a Set to store unique offspring monsters
var uniqueOffspringSet = new Set();
// Add unique offspring to the Set
usageData.forEach(item => { usageData.forEach(item => {
var offspringHTML = `<li class='font-bold marker:text-slate-400 text-purple-300'> uniqueOffspringSet.add(item.offspring);
${item.offspring} });
</li>
`; // Create and append HTML for each unique offspring
uniqueOffspringSet.forEach(offspring => {
var offspringHTML = `<li class='font-bold text-left marker:text-slate-400 text-purple-300'>
${offspring}
</li>`;
offspringContainer.innerHTML += offspringHTML; offspringContainer.innerHTML += offspringHTML;
}); });

53
static/style/output.css
View File

@ -617,10 +617,51 @@ video {
display: grid; display: grid;
} }
.h-screen {
height: 100vh;
}
.w-full { .w-full {
width: 100%; width: 100%;
} }
.w-fit {
width: -moz-fit-content;
width: fit-content;
}
.w-auto {
width: auto;
}
.w-1\/2 {
width: 50%;
}
.max-w-lg {
max-width: 32rem;
}
.max-w-md {
max-width: 28rem;
}
.max-w-sm {
max-width: 24rem;
}
.max-w-xs {
max-width: 20rem;
}
.max-w-xl {
max-width: 36rem;
}
.flex-1 {
flex: 1 1 0%;
}
.border-collapse { .border-collapse {
border-collapse: collapse; border-collapse: collapse;
} }
@ -637,6 +678,14 @@ video {
grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-columns: repeat(4, minmax(0, 1fr));
} }
.flex-col {
flex-direction: column;
}
.place-content-center {
place-content: center;
}
.content-center { .content-center {
align-content: center; align-content: center;
} }
@ -704,6 +753,10 @@ video {
padding-bottom: 0.5rem; padding-bottom: 0.5rem;
} }
.text-left {
text-align: left;
}
.text-center { .text-center {
text-align: center; text-align: center;
} }

22
templates/.layout.html
View File

@ -8,22 +8,19 @@
{% block head %}{% endblock %} {% block head %}{% endblock %}
</head> </head>
<body <body
class="content-center justify-center p-2 m-2 font-mono text-white bg-neutral-800" class="content-center justify-center p-2 m-2 font-mono text-white bg-neutral-800 w-auto text-center"
> >
{% block body %} {% endblock %} {% block body %} {% endblock %}
</body> </body>
<div class="mx-auto footer"> <div class="mx-auto footer max-w-lg">
<h2 class="m-2 text-2xl font-bold">About The App</h2> <h2 class="m-2 text-xl font-bold">About The App</h2>
<p class="leading-7"> <p class="text-md">
Dragon Warrior Monsters 2 App, an open-source project where you can explore Dragon Warrior Monsters 2 App, an open-source project. You can contribute
information about monsters, breeding pairs, and more. 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> </p>
<p class="mt-4 leading-7"> <p class="mt-4 leading-7"></p>
You can contribute to the development and improvement of this app on our Git <div class="mt-4 text-md">
repository. Feel free to explore the code, report issues, and submit pull
requests.
</p>
<div class="mt-4">
<a <a
href="https://git.happytavern.co/oceanslim/dwm-app" href="https://git.happytavern.co/oceanslim/dwm-app"
target="_blank" target="_blank"
@ -32,6 +29,7 @@
View the git repository View the git repository
</a> </a>
</div> </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 %}

48
templates/app.html
View File

@ -1,14 +1,12 @@
{% extends '.layout.html' %} {% block head %}{% endblock %} {% block body %} {% extends '.layout.html' %} {% block head %}{% endblock %} {% block body %}
<h1 class="text-2xl font-black text-white"> <h1 class="text-2xl font-black text-white">Dragon Warrior Monsters 2 App</h1>
Welcome to the Dragon Warrior Monsters 2 App
</h1>
<br /> <br />
<label for="familyDropdown">Select Family:</label> <label for="familyDropdown">Family:</label>
<select id="familyDropdown" class="p-2 bg-gray-900 rounded-md"> <select id="familyDropdown" class="p-2 bg-gray-900 rounded-md">
<option value="">All Families</option> <option value="">All Families</option>
</select> </select>
<br /> <br />
<label for="monsterDropdown">Select Monster:</label> <label for="monsterDropdown">Monster:</label>
<select <select
id="monsterDropdown" id="monsterDropdown"
class="p-2 mt-2 rounded-md bg-slate-900" class="p-2 mt-2 rounded-md bg-slate-900"
@ -19,13 +17,20 @@
<br /> <br />
<div id="modules" class="flex mt-4"> <div id="modules" class="mt-4 justify-center items-center flex flex-col">
<div class="p-2 m-2 border-2 rounded-md border-slate-400">
<div id="monsterNameContainer" class="text-center"> <div id="monsterNameContainer" class="text-center">
<!-- Monster name will be displayed here --> <!-- Monster name will be displayed here -->
</div> </div>
<iframe
id="monsterSpriteIframe"
src=""
class="p-2 m-2 border-2 rounded-md border-slate-400"
height="200"
width="200"
>
</iframe>
<div class="p-2 mt-2 border-2 rounded-md border-slate-400 w-full max-w-xs">
<div id="monsterFamilyContainer" class="mt-1"> <div id="monsterFamilyContainer" class="mt-1">
<!-- Monster Family will be displayed here--> <!-- Monster Family will be displayed here-->
</div> </div>
@ -42,23 +47,20 @@
</div> </div>
</div> </div>
<div id="breedingPairsContainer" class="p-2 m-2 border-2 rounded-md border-slate-400"> <div class="flex m-2 w-full max-w-xl">
<div
id="breedingPairsContainer"
class="p-2 m-2 border-2 rounded-md border-slate-400 w-full"
>
<!-- Breeding pairs will be displayed here --> <!-- Breeding pairs will be displayed here -->
</div> </div>
<div id="offspringContainer" class="p-2 m-2 border-2 rounded-md border-slate-400"></div> <div
id="offspringContainer"
class="p-2 m-2 border-2 rounded-md border-slate-400 w-full"
></div>
<div class="grid items-center justify-center grid-cols-1 ml-4"> <div class="grid items-center justify-center grid-cols-1 ml-4"></div>
<iframe
id="monsterSpriteIframe"
src=""
class="p-2 ml-8 border-2 rounded-md border-slate-400"
height="200"
width="200"
>
</iframe>
</div>
</div> </div>
<div class="mt-4 text-center"> <div class="mt-4 text-center">
<a <a
@ -67,5 +69,7 @@
>Go to Skills Data Page</a >Go to Skills Data Page</a
> >
</div> </div>
</br> </div>
<br />
{% endblock %} {% endblock %}