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

Compare commits

base: OceanSlim:8feea6919006da1e16cf85edcb86f60ff68356d9
Branches Tags
OceanSlim:main
...
compare: OceanSlim:1d62aed1c29f02aaa5ff91f7fac79e6a5018b01c
Branches Tags
OceanSlim:main

2 Commits
8feea69190 ... 1d62aed1c2

Author SHA1 Message Date
0ceanSlim
1d62aed1c2 app screenshot updated 2024-02-01 12:41:31 -05:00
0ceanSlim
68127bf05c sprites added 2024-02-01 12:40:14 -05:00
4 changed files with 91 additions and 67 deletions
Show Stats Expand all files Collapse all files

BIN
static/img/appScreen.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 25 KiB

After

Width:  |  Height:  |  Size: 66 KiB

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;
} }

51
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
id="breedingIframe"
src=""
class="p-2 ml-4 border-2 border-teal-500 rounded-md"
height="200"
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
id="breedingIframe"
src=""
class="p-2 mt-4 border-2 border-teal-500 rounded-md"
height="200"
width="272">
</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>