sprites added
This commit is contained in:
parent
8feea69190
commit
68127bf05c
30
static/js/sprite.js
Normal file
30
static/js/sprite.js
Normal 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();
|
||||||
|
}
|
||||||
@ -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;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -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>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user