95 lines
4.1 KiB
HTML
95 lines
4.1 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8" />
|
||
|
|
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
|
||
|
|
<title>
|
||
|
|
Bestiary
|
||
|
|
</title>
|
||
|
|
<script src="https://cdn.tailwindcss.com">
|
||
|
|
</script>
|
||
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||
|
|
<link
|
||
|
|
href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap"
|
||
|
|
rel="stylesheet">
|
||
|
|
<style>
|
||
|
|
/* global.css or main.css */
|
||
|
|
body {
|
||
|
|
font-family: 'Montserrat', sans-serif;
|
||
|
|
}
|
||
|
|
|
||
|
|
* {
|
||
|
|
font-family: 'Montserrat', sans-serif;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
<script src="framework.js"></script> <!--This contains the WebBestiary framework-->
|
||
|
|
<script src="data.js"></script> <!--This contains the bestiary data-->
|
||
|
|
<script>
|
||
|
|
const mus = new Audio("assets/mus.ogg");
|
||
|
|
mus.loop = true;
|
||
|
|
document.addEventListener('DOMContentLoaded', function () {
|
||
|
|
const jsdata = JSON.parse(window.__EXPDATA)
|
||
|
|
webBestiaryFW.init();
|
||
|
|
// old test code
|
||
|
|
/*webBestiaryFW.updateTitle('Bestiary');
|
||
|
|
const section = webBestiaryFW.addSection('Normal');
|
||
|
|
webBestiaryFW.createEntry(section, 'Wojak', 'assets/Wojak.jpg');
|
||
|
|
webBestiaryFW.createEntry(section, 'TEST', 'assets/2yvzhb (1).jpg','assets/2yvzhb (2).jpg');
|
||
|
|
*/
|
||
|
|
for (const [key, value] of Object.entries(jsdata)) { // Hover asset id is at assets/entry/[entryname]/normal.png or hover.png
|
||
|
|
const section = webBestiaryFW.addSection(key);
|
||
|
|
for (const [entryName, entryData] of Object.entries(value)) {
|
||
|
|
// Build asset paths (assuming your naming convention is consistent)
|
||
|
|
const normalImg = `assets/entry/${entryName}/normal.png`;
|
||
|
|
const hoverImg = `assets/entry/${entryName}/hover.png`;
|
||
|
|
|
||
|
|
webBestiaryFW.setFullEntryForName(entryName, entryData);
|
||
|
|
webBestiaryFW.createEntry(section, entryName, normalImg, hoverImg, true);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body class="bg-black text-white">
|
||
|
|
<div class="sticky top-0 w-full bg-gradient-to-b from-neutral-700 to-neutral-900 p-4 flex items-center">
|
||
|
|
<button class="text-2xl font-bold mr-2">
|
||
|
|
X
|
||
|
|
</button>
|
||
|
|
<h1 class="text-2xl font-bold" id="PageTitle">
|
||
|
|
Bestiary
|
||
|
|
</h1>
|
||
|
|
<button onclick="mus.play();this.classList.add('invisible')" class="bg-red-600">click me to start music (browser
|
||
|
|
restriction im sorry)</button>
|
||
|
|
</div>
|
||
|
|
<div class="p-4">
|
||
|
|
<div id="PageContent">
|
||
|
|
</div>
|
||
|
|
<div id="DescMenu"
|
||
|
|
class="fixed top-0 left-0 w-full h-full bg-black bg-opacity-90 flex items-center justify-center hidden z-50">
|
||
|
|
<div class="bg-neutral-900 w-full flex flex-col items-center h-full">
|
||
|
|
<div class="sticky top-0 w-full bg-gradient-to-b from-neutral-700 to-neutral-900 p-4 flex items-center">
|
||
|
|
<button onclick="webBestiaryFW.closeDescMenu()" class="text-2xl font-bold mr-2">
|
||
|
|
<
|
||
|
|
</button>
|
||
|
|
<h1 id="DescTitle" class="text-2xl font-bold">Creature Name</h1>
|
||
|
|
</div>
|
||
|
|
<div class="flex flex-row w-full gap-4">
|
||
|
|
<div class="w-48 h-48 items-center justify-center" id="DescImage">
|
||
|
|
<div class="bg-white border border-black flex pahah"></div>
|
||
|
|
<div class="w-full basis-full"></div>
|
||
|
|
<div id="DescStats" class="text-white text-sm leading-tight mt-4"></div>
|
||
|
|
</div><br>
|
||
|
|
<div class="flex flex-col justify-between w-full">
|
||
|
|
<div id="DescContent" class="text-white text-sm leading-tight"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
|
||
|
|
</html>
|