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

sprites added

Browse Source
This commit is contained in:
0ceanSlim 2024-02-01 12:40:14 -05:00
parent 8feea69190
commit 68127bf05c
3 changed files with 91 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
static/js/sprite.js Normal file
View File

@ -0,0 +1,30 @@
function updateMonsterSprite() {
var selectedMonster = document.getElementById("monsterDropdown").value;
var spriteUrl = `static/img/monster/${selectedMonster}.png`;
var iframe = document.getElementById("monsterSpriteIframe");
iframe.src = "about:blank"; // Clear the iframe content
var content = `<style>
body {
margin: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
</style>
<body>
<img src="${spriteUrl}" alt="Monster Sprite">
</body>`;
iframe.contentWindow.document.open();
iframe.contentWindow.document.write(content);
iframe.contentWindow.document.close();
}

77
static/style/output.css
View File

@ -582,23 +582,19 @@ video {
grid-column: span 1 / span 1; grid-column: span 1 / span 1;
} }
.m-4 {
margin: 1rem;
}
.m-2 { .m-2 {
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;
} }
.mb-6 {
margin-bottom: 1.5rem;
}
.ml-4 { .ml-4 {
margin-left: 1rem; margin-left: 1rem;
} }
@ -611,8 +607,16 @@ video {
margin-top: 1rem; margin-top: 1rem;
} }
.mt-6 { .ml-6 {
margin-top: 1.5rem; margin-left: 1.5rem;
}
.ml-8 {
margin-left: 2rem;
}
.block {
display: block;
} }
.flex { .flex {
@ -628,6 +632,10 @@ video {
width: fit-content; width: fit-content;
} }
.flex-1 {
flex: 1 1 0%;
}
.cursor-pointer { .cursor-pointer {
cursor: pointer; cursor: pointer;
} }
@ -640,6 +648,18 @@ video {
grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-columns: repeat(2, minmax(0, 1fr));
} }
.content-center {
align-content: center;
}
.items-center {
align-items: center;
}
.justify-center {
justify-content: center;
}
.gap-1 { .gap-1 {
gap: 0.25rem; gap: 0.25rem;
} }
@ -675,11 +695,6 @@ video {
padding: 1rem; padding: 1rem;
} }
.py-10 {
padding-top: 2.5rem;
padding-bottom: 2.5rem;
}
.pl-2 { .pl-2 {
padding-left: 0.5rem; padding-left: 0.5rem;
} }
@ -696,20 +711,11 @@ video {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
} }
.font-sans {
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
.text-2xl { .text-2xl {
font-size: 1.5rem; font-size: 1.5rem;
line-height: 2rem; line-height: 2rem;
} }
.text-3xl {
font-size: 1.875rem;
line-height: 2.25rem;
}
.text-lg { .text-lg {
font-size: 1.125rem; font-size: 1.125rem;
line-height: 1.75rem; line-height: 1.75rem;
@ -732,9 +738,9 @@ video {
line-height: 1.75rem; line-height: 1.75rem;
} }
.text-gray-700 { .text-purple-400 {
--tw-text-opacity: 1; --tw-text-opacity: 1;
color: rgb(55 65 81 / var(--tw-text-opacity)); color: rgb(192 132 252 / var(--tw-text-opacity));
} }
.text-teal-500 { .text-teal-500 {
@ -747,14 +753,9 @@ video {
color: rgb(255 255 255 / var(--tw-text-opacity)); color: rgb(255 255 255 / var(--tw-text-opacity));
} }
.text-purple-600 { .hover\:text-purple-200:hover {
--tw-text-opacity: 1; --tw-text-opacity: 1;
color: rgb(147 51 234 / var(--tw-text-opacity)); color: rgb(233 213 255 / var(--tw-text-opacity));
}
.text-purple-400 {
--tw-text-opacity: 1;
color: rgb(192 132 252 / var(--tw-text-opacity));
} }
.hover\:text-red-700:hover { .hover\:text-red-700:hover {
@ -762,16 +763,6 @@ video {
color: rgb(185 28 28 / var(--tw-text-opacity)); color: rgb(185 28 28 / var(--tw-text-opacity));
} }
.hover\:text-purple-700:hover {
--tw-text-opacity: 1;
color: rgb(126 34 206 / var(--tw-text-opacity));
}
.hover\:text-purple-200:hover {
--tw-text-opacity: 1;
color: rgb(233 213 255 / var(--tw-text-opacity));
}
.hover\:underline:hover { .hover\:underline:hover {
text-decoration-line: underline; text-decoration-line: underline;
} }

31
templates/index.html
View File

@ -5,9 +5,8 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>DWM APP</title> <title>DWM APP</title>
<link rel="stylesheet" href="../static/style/output.css" /> <link rel="stylesheet" href="../static/style/output.css" />
<script src="{{ url_for('static', filename='js/index.js') }}"></script>
</head> </head>
<body class="p-4 m-4 font-mono text-white bg-slate-700"> <body class="content-center p-4 m-4 font-mono text-white bg-slate-700" >
<h1 class="text-2xl font-black text-white"> <h1 class="text-2xl font-black text-white">
Welcome to the Dragon Warrior Monsters 2 App Welcome to the Dragon Warrior Monsters 2 App
</h1> </h1>
@ -18,7 +17,7 @@
</select> </select>
<label for="monsterDropdown">Select Monster:</label> <label for="monsterDropdown">Select Monster:</label>
<select id="monsterDropdown" class="p-2 rounded-md bg-slate-800"> <select id="monsterDropdown" class="p-2 rounded-md bg-slate-800" onchange="updateMonsterSprite()">
<option value="">All Monsters</option> <option value="">All Monsters</option>
</select> </select>
<div id="modules" class="flex mt-4"> <div id="modules" class="flex mt-4">
@ -27,31 +26,35 @@
src="" src=""
class="pl-2 pr-2 ml-4 border-2 border-teal-500 rounded-md" class="pl-2 pr-2 ml-4 border-2 border-teal-500 rounded-md"
height="456" height="456"
width="272" width="272">
></iframe> </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 <iframe
id="breedingIframe" id="breedingIframe"
src="" src=""
class="p-2 ml-4 border-2 border-teal-500 rounded-md" class="p-2 mt-4 border-2 border-teal-500 rounded-md"
height="200" height="200"
width="272" width="272">
>
</iframe> </iframe>
</div> </div>
</div>
<iframe <iframe
id="footerIframe" id="footerIframe"
src="https://dwm.happytavern.co/footer" src="https://dwm.happytavern.co/footer"
class="p-2 mt-4 ml-4 border-2 border-teal-500 rounded-md float-end" class="p-2 mt-4 ml-4 border-2 border-teal-500 rounded-md float-end"
height="240" height="240"
width="800" width="800">
>
</iframe> </iframe>
</div> </div>
<script src="{{ url_for('static', filename='js/index.js') }}"></script> <script src="{{ url_for('static', filename='js/index.js') }}"></script>
<script src="{{ url_for('static', filename='js/breeding.js') }}"></script> <script src="{{ url_for('static', filename='js/breeding.js') }}"></script>
<script src="{{ url_for('static', filename='js/sprite.js') }}"></script>
</body> </body>
</html> </html>