laminax/webbestiary-old
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
usernames122
2025-08-09 05:33:00 +02:00
commit d728abaa84
76 changed files with 1236 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

95
index.html Normal file
View File

@@ -0,0 +1,95 @@
<!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>&nbsp;&nbsp;&nbsp;
<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">
&lt;
</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>