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

Compare commits

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

No commits in common. "4822f47aac4fd5d5259878c621751ae498fbfd17" and "ac2f700ae16b0028fe2a4333fb46975663340c2e" have entirely different histories.
4822f47aac ... ac2f700ae1

5 changed files with 70 additions and 132 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 text-left'> <div class='text-xs mb-2 flex justify-center'>
(<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','text-left'); pairsList.classList.add('m-2','p-2','list-disc', 'marker:text-slate-300');
data.breeding_pairs.forEach(pair => { data.breeding_pairs.forEach(pair => {
var listItem = document.createElement("li"); var listItem = document.createElement("li");

49
static/js/updateBreedingUsage.js
View File

@ -1,39 +1,32 @@
function updateBreedingUsage() { function updateBreedingUsage() {
// Get the selected monster from the dropdown // Get the selected monster from the dropdown
var selectedMonster = document.getElementById("monsterDropdown").value; var selectedMonster = document.getElementById("monsterDropdown").value;
// Fetch data from the API // Fetch data from the API
fetch(`/api/breeding/usage/${selectedMonster}`) fetch(`/api/breeding/usage/${selectedMonster}`)
.then(response => response.json()) .then(response => response.json())
.then(data => { .then(data => {
// Update the HTML with the list of offspring monsters // Update the HTML with the list of offspring monsters
renderOffspringList(data.used_in); renderOffspringList(data.used_in);
}) })
.catch(error => console.error('Error fetching data:', error)); .catch(error => console.error('Error fetching data:', error));
} }
function renderOffspringList(usageData) { function renderOffspringList(usageData) {
var offspringContainer = document.getElementById("offspringContainer"); var offspringContainer = document.getElementById("offspringContainer");
// 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 a Set to store unique offspring monsters // Create and append HTML for each offspring
var uniqueOffspringSet = new Set(); usageData.forEach(item => {
var offspringHTML = `<li class='font-bold marker:text-slate-400 text-purple-300'>
// Add unique offspring to the Set ${item.offspring}
usageData.forEach(item => { </li>
uniqueOffspringSet.add(item.offspring); `;
});
// 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;
}); });
// Close the unordered list // Close the unordered list
offspringContainer.innerHTML += "</ul>"; offspringContainer.innerHTML += "</ul>";
} }

53
static/style/output.css
View File

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

74
templates/app.html
View File

@ -1,12 +1,14 @@
{% extends '.layout.html' %} {% block head %}{% endblock %} {% block body %} {% extends '.layout.html' %} {% block head %}{% endblock %} {% block body %}
<h1 class="text-2xl font-black text-white">Dragon Warrior Monsters 2 App</h1> <h1 class="text-2xl font-black text-white">
Welcome to the Dragon Warrior Monsters 2 App
</h1>
<br /> <br />
<label for="familyDropdown">Family:</label> <label for="familyDropdown">Select 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">Monster:</label> <label for="monsterDropdown">Select 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"
@ -17,28 +19,21 @@
<br /> <br />
<div id="modules" class="mt-4 justify-center items-center flex flex-col"> <div id="modules" class="flex mt-4">
<div id="monsterNameContainer" class="text-center">
<!-- Monster name will be displayed here --> <div class="p-2 m-2 border-2 rounded-md border-slate-400">
</div> <div id="monsterNameContainer" class="text-center">
<iframe <!-- Monster name will be displayed here -->
id="monsterSpriteIframe" </div>
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>
<div id="monsterStatsContainer" class="mt-2"> <div id="monsterStatsContainer" class="mt-2">
<!-- Monster stats will be displayed here --> <!-- Monster stats will be displayed here -->
</div> </div>
<div id="monsterSkillsContainer" class="mt-2"> <div id="monsterSkillsContainer" class="mt-2">
<!-- Monster Skills will be displayed here--> <!-- Monster Skills will be displayed here-->
</div> </div>
@ -47,29 +42,30 @@
</div> </div>
</div> </div>
<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">
<div <!-- Breeding pairs will be displayed here -->
id="breedingPairsContainer"
class="p-2 m-2 border-2 rounded-md border-slate-400 w-full"
>
<!-- Breeding pairs will be displayed here -->
</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>
</div> </div>
<div class="mt-4 text-center">
<a <div id="offspringContainer" class="p-2 m-2 border-2 rounded-md border-slate-400"></div>
href="/skills"
class="float-left text-2xl font-bold text-purple-400 hover:underline" <div class="grid items-center justify-center grid-cols-1 ml-4">
>Go to Skills Data Page</a <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>
<div class="mt-4 text-center">
<br /> <a
href="/skills"
class="float-left text-2xl font-bold text-purple-400 hover:underline"
>Go to Skills Data Page</a
>
</div>
</br>
{% endblock %} {% endblock %}