LerningCSW/MainPage/stas/eigenerCode.js

let parsedArray = [];

document.getElementById('copyButton').addEventListener('click', () => {
    const text = document.getElementById('formatText').innerText;

    navigator.clipboard.writeText(text).then(() => {
        alert('Format wurde in die Zwischenablage kopiert!');
    }).catch(err => {
        console.error('Konnte nicht kopieren: ', err);
    });

    for (let i = 0; i < parsedArray.length; i += 8) {
        const pageFront = document.createElement("div");
        pageFront.className = "page_front";
        const pageBack = document.createElement("div");
        pageBack.className = "page_back";

        const currentSlice = parsedArray.slice(i, i + 8);
        currentSlice.forEach(karte => {
            const frontCard = document.createElement("div");
            frontCard.className = "card";
            frontCard.innerHTML = `<h2>${karte.englisch}</h2><div>${karte.ipa}</div><p>${karte.beispielEN}</p>`;
            pageFront.appendChild(frontCard);

            const backCard = document.createElement("div");
            backCard.className = "card";
            backCard.innerHTML = `<h2>${karte.deutsch}</h2><p>${karte.beispielDE}</p>`;
            pageBack.appendChild(backCard);
        });

        container.appendChild(pageFront);
        container.appendChild(pageBack);
    }
});

function parseWordText(inputText) {
    const wortBlocks = inputText.trim().split("\n\n");
    const wortListe = [];

    for (let block of wortBlocks) {
        const lines = block.trim().split("\n").map(line => line.trim());

        if (lines.length !== 5) {
            console.warn("Block übersprungen (falsches Format):", block);
            continue;
        }

        const wortObj = {
            englisch: lines[0],
            ipa: lines[1],
            beispielEN: lines[2],
            deutsch: lines[3],
            beispielDE: lines[4]
        };

        wortListe.push(wortObj);
    }

    return wortListe;
}

function createPagePair() {
    const frontPage = document.createElement("div");
    frontPage.className = "page page-front";

    const backPage = document.createElement("div");
    backPage.className = "page page-back";

    return { frontPage, backPage };
}

const button = document.getElementById("kartenErstellen");
const onlineContainer = document.getElementById("kartenContainer");
const frontPage = document.querySelector(".page_front");
const backPage = document.querySelector(".page_back");

button.addEventListener("click", () => {
    const inputText = document.getElementById("inputText").value;
    parsedArray = parseWordText(inputText);

    if(parsedArray.length === 0) {
        alert("Kein gültiges Format erkannt. Bitte überprüfe deine Eingabe.");
        return;
    }

    alert("Karten erfolgreich erstellt!");

    document.getElementById("title").style.display = "none";
    button.style.display = "none";
    

    document.getElementById("modusAuswahlSeite").style.display = "block";

  
});

document.querySelectorAll(".modus-btn").forEach(button => {
    button.addEventListener("click", () => {
        const modus = button.dataset.modus;

        if (modus === "druck") {
            createPDFPages(parsedArray);
        } else {
            console.log("Gewählter Modus:", modus);
        }
    });
});

function createPDFPages(wordArray) {
    const kartenContainer = document.getElementById("kartenContainer");

    kartenContainer.innerHTML = "";
    kartenContainer.style.display = "flex";
    kartenContainer.style.flexDirection = "column";

    for (let i = 0; i < parsedArray.length; i += 8) {

        const { frontPage, backPage } = createPagePair();

        parsedArray.slice(i, i + 8).forEach((karte) => {

            const frontCard = document.createElement("div");
            frontCard.className = "card card-en";
            frontCard.innerHTML = `
                <h2>${karte.englisch}</h2>
                <div class="ipa">${karte.ipa}</div>
                <div class="example">${karte.beispielEN}</div>
            `;
            frontPage.appendChild(frontCard);

            const backCard = document.createElement("div");
            backCard.className = "card card-de";
            backCard.innerHTML = `
                <h2>${karte.deutsch}</h2>
                <div class="example">${karte.beispielDE}</div>
            `;
            backPage.appendChild(backCard);
        });

        kartenContainer.appendChild(frontPage);
        kartenContainer.appendChild(backPage);
        document.getElementById("druckenBtn").style.display = "block";
    }
    alert("PDF-Seiten wurden erstellt! Du kannst sie jetzt druken.");
}

document.getElementById("druckenBtn").addEventListener("click", () => {
    window.print();
});