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;
|
||||
}
|
||||
|
||||
.m-4 {
|
||||
margin: 1rem;
|
||||
}
|
||||
|
||||
.m-2 {
|
||||
margin: 0.5rem;
|
||||
}
|
||||
|
||||
.m-4 {
|
||||
margin: 1rem;
|
||||
}
|
||||
|
||||
.mx-auto {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.mb-6 {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.ml-4 {
|
||||
margin-left: 1rem;
|
||||
}
|
||||
@ -611,8 +607,16 @@ video {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.mt-6 {
|
||||
margin-top: 1.5rem;
|
||||
.ml-6 {
|
||||
margin-left: 1.5rem;
|
||||
}
|
||||
|
||||
.ml-8 {
|
||||
margin-left: 2rem;
|
||||
}
|
||||
|
||||
.block {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.flex {
|
||||
@ -628,6 +632,10 @@ video {
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
.flex-1 {
|
||||
flex: 1 1 0%;
|
||||
}
|
||||
|
||||
.cursor-pointer {
|
||||
cursor: pointer;
|
||||
}
|
||||
@ -640,6 +648,18 @@ video {
|
||||
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: 0.25rem;
|
||||
}
|
||||
@ -675,11 +695,6 @@ video {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.py-10 {
|
||||
padding-top: 2.5rem;
|
||||
padding-bottom: 2.5rem;
|
||||
}
|
||||
|
||||
.pl-2 {
|
||||
padding-left: 0.5rem;
|
||||
}
|
||||
@ -696,20 +711,11 @@ video {
|
||||
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 {
|
||||
font-size: 1.5rem;
|
||||
line-height: 2rem;
|
||||
}
|
||||
|
||||
.text-3xl {
|
||||
font-size: 1.875rem;
|
||||
line-height: 2.25rem;
|
||||
}
|
||||
|
||||
.text-lg {
|
||||
font-size: 1.125rem;
|
||||
line-height: 1.75rem;
|
||||
@ -732,9 +738,9 @@ video {
|
||||
line-height: 1.75rem;
|
||||
}
|
||||
|
||||
.text-gray-700 {
|
||||
.text-purple-400 {
|
||||
--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 {
|
||||
@ -747,14 +753,9 @@ video {
|
||||
color: rgb(255 255 255 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.text-purple-600 {
|
||||
.hover\:text-purple-200:hover {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(147 51 234 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.text-purple-400 {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(192 132 252 / var(--tw-text-opacity));
|
||||
color: rgb(233 213 255 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.hover\:text-red-700:hover {
|
||||
@ -762,16 +763,6 @@ video {
|
||||
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 {
|
||||
text-decoration-line: underline;
|
||||
}
|
||||
|
||||
@ -5,9 +5,8 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>DWM APP</title>
|
||||
<link rel="stylesheet" href="../static/style/output.css" />
|
||||
<script src="{{ url_for('static', filename='js/index.js') }}"></script>
|
||||
</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">
|
||||
Welcome to the Dragon Warrior Monsters 2 App
|
||||
</h1>
|
||||
@ -18,7 +17,7 @@
|
||||
</select>
|
||||
|
||||
<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>
|
||||
</select>
|
||||
<div id="modules" class="flex mt-4">
|
||||
@ -27,31 +26,35 @@
|
||||
src=""
|
||||
class="pl-2 pr-2 ml-4 border-2 border-teal-500 rounded-md"
|
||||
height="456"
|
||||
width="272"
|
||||
></iframe>
|
||||
|
||||
<iframe
|
||||
id="breedingIframe"
|
||||
src=""
|
||||
class="p-2 ml-4 border-2 border-teal-500 rounded-md"
|
||||
height="200"
|
||||
width="272"
|
||||
>
|
||||
width="272">
|
||||
</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>
|
||||
|
||||
<iframe
|
||||
id="footerIframe"
|
||||
src="https://dwm.happytavern.co/footer"
|
||||
class="p-2 mt-4 ml-4 border-2 border-teal-500 rounded-md float-end"
|
||||
height="240"
|
||||
width="800"
|
||||
>
|
||||
</iframe>
|
||||
<iframe
|
||||
id="footerIframe"
|
||||
src="https://dwm.happytavern.co/footer"
|
||||
class="p-2 mt-4 ml-4 border-2 border-teal-500 rounded-md float-end"
|
||||
height="240"
|
||||
width="800">
|
||||
</iframe>
|
||||
</div>
|
||||
<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/sprite.js') }}"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user