Front

<!---------- Header ------------->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<main>
    <div class="front-container">
        <!--------- Vocab card ---------->
        <div lang="ja" class="front-vocab" id="front-vocab-expression">{{Word}}</div>

        <!-- Hint -->
        {{#Hint}}
        <div id="hint">{{Hint}}</div>
        {{/Hint}}
    </div>
    <header style="visibility: hidden"></header>

<script>
    // Adjust font size dynamically for vocab (front) and store it
    function adjustVocabFontSize() {
        try {
            console.log("adjustVocabFontSize running on front...");
            const vocabElement = document.getElementById('front-vocab-expression');
            if (!vocabElement) {
                console.log("front-vocab-expression not found");
                return;
            }

            const containerWidth = window.innerWidth * 0.8; // 80vw consistently
            console.log("Front container width: " + containerWidth + "px");

            if (!containerWidth) {
                console.log("Container width not available on front");
                return;
            }

            let fontSize = 50; // Start with default font size
            vocabElement.style.fontSize = fontSize + 'px';

            // Measure the width of the text content only (exclude furigana if present)
            let textWidth = vocabElement.scrollWidth;
            console.log("Front initial text width: " + textWidth + "px");

            // Adjust font size until it fits
            let attempts = 0;
            while (textWidth > containerWidth && fontSize > 25 && attempts < 50) {
                fontSize -= 2;
                vocabElement.style.fontSize = fontSize + 'px';
                textWidth = vocabElement.scrollWidth;
                attempts++;
                console.log("Front adjusting font size: " + fontSize + "px, textWidth: " + textWidth + "px");
            }

            // Ensure minimum readability
            if (fontSize <= 25) {
                vocabElement.style.fontSize = '25px';
                fontSize = 25;
                console.log("Front minimum adjusted font size reached: 25px");
            }

            // Store the font size in a global variable for the back to use
            window.calculatedFontSize = fontSize;
            console.log("Front final font size stored: " + fontSize + "px");
        } catch (error) {
            console.error("Error in adjustVocabFontSize on front:", error);
        }
    }

    // Run immediately and poll until the element is available
    function ensureFontSizeAdjustment() {
        adjustVocabFontSize();
        // Poll every 50ms until the element is found or 2 seconds pass
        let attempts = 0;
        const interval = setInterval(() => {
            const vocabElement = document.getElementById('front-vocab-expression');
            if (vocabElement && vocabElement.scrollWidth > 0) {
                adjustVocabFontSize();
                clearInterval(interval);
                console.log("Font size adjusted successfully on front after polling");
            }
            attempts++;
            if (attempts > 40) { // 40 * 50ms = 2 seconds
                clearInterval(interval);
                console.log("Stopped polling: front-vocab-expression not found or not measurable");
            }
        }, 50);
    }

    // Run on load, resize, and as a fallback
    document.addEventListener('DOMContentLoaded', ensureFontSizeAdjustment);
    window.addEventListener('resize', adjustVocabFontSize);
    setTimeout(ensureFontSizeAdjustment, 0); // Immediate fallback
</script>
</main>