first commit

2025-08-09 05:33:00 +02:00
commit d728abaa84
76 changed files with 1236 additions and 0 deletions
--- a/framework.js
+++ b/framework.js
@@ -0,0 +1,156 @@
+window.webBestiaryFW = window.webBestiaryFW || {};
+console.log("you stupid MANGO")
+
+webBestiaryFW.TemplateBestiaryElement =
+`<div class="inline-flex flex-col items-start bg-white p-[5px] overflow-hidden">
+    <div class="flex items-center justify-center w-24 h-24 bg-gray-300 border border-black overflow-hidden">
+        <span class="text-4xl font-bold text-white overflow-hidden">
+            <!--ReplaceMe:img-->
+        </span>
+    </div>
+    <p class="mt-2 font-[Source Sans 3] text-black" style="font-size: 10px; line-height: 1.2;">
+        <!--ReplaceMe:name-->
+    </p>
+</div>`;
+
+
+
+webBestiaryFW.TemplateSection = `<div class="text-lg font-bold">
+    <!--ReplaceMe:sectName-->:
+    <span class="text-white">
+        [N/A]
+    </span>
+    <div class="section-content flex flex-wrap gap-4">
+    </div>
+</div>`;
+
+webBestiaryFW.createHTMLElement = function (htmlString) {
+  var div = document.createElement('div');
+  div.innerHTML = htmlString.trim();
+
+  // Change this to div.childNodes to support multiple top-level nodes.
+  return div.firstChild;
+};
+
+webBestiaryFW.init = function() {
+    console.log("Initializing webBestiaryFW");
+    webBestiaryFW.titleElement = document.getElementById('PageTitle');
+    webBestiaryFW.contentElement = document.getElementById('PageContent');
+    webBestiaryFW.clickSound = new Audio("assets/ButtonClick.ogg");
+    webBestiaryFW.hoverSound = new Audio("assets/ButtonHover.ogg");
+};
+
+webBestiaryFW.updateTitle = function(newTitle) {
+    if (webBestiaryFW.titleElement) {
+        webBestiaryFW.titleElement.textContent = newTitle;
+    } else {
+        console.error("Title element not found. Maybe try running .init() first?");
+    }
+};
+
+webBestiaryFW.addSection = function(sectionName) {
+    const sectionHTML = webBestiaryFW.TemplateSection.replace(/<!--ReplaceMe:sectName-->/, sectionName);
+    if (webBestiaryFW.contentElement) {
+        const el = webBestiaryFW.createHTMLElement(sectionHTML);
+        webBestiaryFW.contentElement.appendChild(el);
+        return el.querySelector('.section-content');
+    } else {
+        console.error("Content element not found. Maybe try running .init() first?");
+    }
+};
+
+webBestiaryFW.createEntry = function(section, name, img,optionalHoverImg,openDescMenu) {
+    let imageTag;
+    if (optionalHoverImg) {
+        imageTag = `<img src="${img}" alt="${name}'s bestiary icon" onmouseover="this.src='${optionalHoverImg}'" onmouseout="this.src='${img}'">`;
+    } else {
+        imageTag = `<img src="${img}" alt="${name}'s bestiary icon">`;
+    }
+    const entryHTML = webBestiaryFW.TemplateBestiaryElement.replace(/<!--ReplaceMe:name-->/g, name.toUpperCase()).replace(/<!--ReplaceMe:img-->/g,imageTag);
+    const el = webBestiaryFW.createHTMLElement(entryHTML);
+    el.addEventListener("click",(function(){
+        webBestiaryFW.clickSound.play();
+        if (openDescMenu) {
+            webBestiaryFW.openDescMenu(name);
+        }
+    }))
+    el.addEventListener("mouseenter",(function(){
+        webBestiaryFW.hoverSound.currentTime = 0;
+        webBestiaryFW.hoverSound.play()
+    }))
+    section.appendChild(el);
+    webBestiaryFW.fullEntryE[name] = {
+        section:section,
+        name:name,
+        img:img
+    }
+};
+// Store full entry data
+webBestiaryFW.fullEntries = {};
+webBestiaryFW.fullEntryE = {};
+
+webBestiaryFW.setFullEntryForName = function(name, entryData) {
+    webBestiaryFW.fullEntries[name] = entryData;
+};
+
+// Open description menu
+webBestiaryFW.openDescMenu = function(name) {
+    const entryData = webBestiaryFW.fullEntries[name];
+    if (!entryData) {
+        console.warn("No entry data for:", name);
+        return;
+    }
+
+    // Show the panel
+    document.getElementById("DescMenu").classList.remove("hidden");
+
+    // Icon
+    const imgEl = document.getElementById("DescImage").querySelector(".pahah");
+    const imageTag = `<img src="${webBestiaryFW.fullEntryE[name]['img']}" alt="${name}'s bestiary icon">`;
+    const entryHTML = webBestiaryFW.TemplateBestiaryElement.replace(/<!--ReplaceMe:name-->/g, name.toUpperCase()).replace(/<!--ReplaceMe:img-->/g,imageTag);
+    const kurwaEl = webBestiaryFW.createHTMLElement(entryHTML);
+    imgEl.innerHTML = ''; // Clear
+    imgEl.appendChild(kurwaEl);
+
+    // Name display
+    const displayName = entryData.DisplayName || name;
+    const nameEl = document.getElementById("DescTitle");
+    nameEl.textContent = displayName;
+    nameEl.style.fontFamily = (displayName === "???") ? '"Source Sans 3", sans-serif' : '"Montserrat", sans-serif';
+
+    // Description parsing
+    const descContent = document.getElementById("DescContent");
+    descContent.innerHTML = "";
+
+    if (entryData.Description) {
+        entryData.Description.forEach(line => {
+            const text = line[0];
+            const type = line[1] || "Normal";
+
+            const p = document.createElement("p");
+            p.textContent = text;
+            if (text === "N/A") {
+                p.textContent = "N/A (Don't like how it's not available? Send a complaint to TZB Studio! I dont control this)"
+            }
+            p.style.fontSize = "18px";
+            p.style.lineHeight = "1.2";
+            if (type === "Title") p.style.fontWeight = "bold";
+
+            descContent.appendChild(p);
+        });
+    }
+
+    // Stats handling
+    const stats = document.getElementById("DescStats");
+    stats.innerHTML = `
+        <p>Activity Count: ${entryData.ActivityCount || 0}</p>
+        <p>Killed: ${entryData.Killed || 0}</p>
+        <p>Conversions: ${entryData.Conversions || 0}</p>
+    `;
+};
+
+// Close description
+webBestiaryFW.closeDescMenu = function() {
+    document.getElementById("DescMenu").classList.add("hidden");
+    webBestiaryFW.clickSound.play();
+};