webbestiary-old/framework.js

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();
};