<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<body>
<div th:fragment="gameBody(gameTitle, canvasId)" class="game-body-wrapper">
    <h1 th:text="${gameTitle}" style="text-align:center; margin-bottom: 15px;">Game Title</h1>

    <div class="game-play-box wide" id="game-container"
         style="display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 600px; min-width: 320px; margin: 0 auto; background: #fff; box-shadow: 0 4px 10px rgba(0,0,0,0.1); border-radius: 8px; overflow: hidden;">

        <canvas th:id="${canvasId}" style="display: block; width: 100%; height: auto; flex-shrink: 0;"></canvas>

        <div id="ad-slot-container" style="display: block; width: 100%; min-width: 300px; min-height: 280px; background: #fafafa; border-top: 1px solid #eee; text-align: center; overflow: hidden; flex-shrink: 0;">
        </div>

        <script>
            document.addEventListener("DOMContentLoaded", function() {
                const adBox = document.getElementById('ad-slot-container');

                function injectAdSense() {
                    // 중복 주입 방지
                    if (adBox.querySelector('.adsbygoogle')) return;

                    // 너비가 너무 작으면(숨겨진 상태 등) 주입하지 않음
                    if (adBox.clientWidth < 200) return;

                    console.log("🚀 광고 주입 (너비 확보됨: " + adBox.clientWidth + "px)");

                    const ins = document.createElement('ins');
                    ins.className = 'adsbygoogle';
                    ins.style.display = 'block';
                    ins.setAttribute('data-ad-client', 'ca-pub-9504446465764716');
                    ins.setAttribute('data-ad-slot', '5334609005');
                    ins.setAttribute('data-ad-format', 'auto');
                    ins.setAttribute('data-full-width-responsive', 'true');

                    adBox.appendChild(ins);

                    try {
                        (adsbygoogle = window.adsbygoogle || []).push({});
                    } catch (e) {
                        console.error("AdSense Error:", e);
                    }
                }

                // 너비 감지 로직 (ResizeObserver)
                if ('ResizeObserver' in window) {
                    const observer = new ResizeObserver(entries => {
                        for (let entry of entries) {
                            // 테두리 제외한 내부 너비가 200px 이상일 때만 실행
                            if (entry.contentRect.width > 200) {
                                injectAdSense();
                                observer.disconnect(); // 한 번 넣으면 감시 종료
                            }
                        }
                    });
                    observer.observe(adBox);
                } else {
                    // 구형 브라우저 폴백
                    const interval = setInterval(() => {
                        if (adBox.clientWidth > 200) {
                            injectAdSense();
                            clearInterval(interval);
                        }
                    }, 500);
                }
            });
        </script>
    </div>
</div>
</body>
</html>