app.py

"""
Vibe Game Craft – NEW / BEST 탭을 ‘사이트 미러링’(iframe) 방식으로 보여주는 Gradio Space

● Gradio 4.x 공용 API만 사용 – set_event_trigger 제거
● Prev / Next 버튼으로 페이지 전환
● os.getenv("SVR_TOKEN") 필수
"""

import os
import time
import json
import requests
import datetime
import gradio as gr

# ────────────────────────────────────────────────────────────────────────────────
# 1. Vercel API 설정
VERCEL_API_TOKEN = os.getenv("SVR_TOKEN")          # ← 환경변수에서 읽음
if not VERCEL_API_TOKEN:
    raise EnvironmentError("환경 변수 'SVR_TOKEN'이 설정되어 있지 않습니다!")
VERCEL_API_URL  = "https://api.vercel.com/v9"
HEADERS = {
    "Authorization": f"Bearer {VERCEL_API_TOKEN}",
    "Content-Type": "application/json",
}

# ────────────────────────────────────────────────────────────────────────────────
# 2. 갤러리 설정
BEST_GAMES_FILE = "best_games.json"
GAMES_PER_PAGE  = 48

# ────────────────────────────────────────────────────────────────────────────────
# 3. BEST 탭 초기화 / 로드
def initialize_best_games() -> None:
    if not os.path.exists(BEST_GAMES_FILE):
        sample = [
            {
                "title": "테트리스",
                "description": "클래식 테트리스 게임",
                "url": "https://tmkdop.vercel.app",
                "timestamp": time.time(),
            },
            {
                "title": "스네이크",
                "description": "전통적인 스네이크 게임",
                "url": "https://tmkdop.vercel.app",
                "timestamp": time.time(),
            },
            {
                "title": "팩맨",
                "description": "고전 아케이드 게임",
                "url": "https://tmkdop.vercel.app",
                "timestamp": time.time(),
            },
        ]
        json.dump(sample, open(BEST_GAMES_FILE, "w"), ensure_ascii=False, indent=2)

def load_best_games() -> list:
    try:
        return json.load(open(BEST_GAMES_FILE))
    except Exception:
        return []

# ────────────────────────────────────────────────────────────────────────────────
# 4. Vercel 최신 배포 가져오기
def get_latest_deployments() -> list:
    try:
        resp = requests.get(
            f"{VERCEL_API_URL}/deployments",
            headers=HEADERS,
            params={"limit": 100},
            timeout=30,
        )
        resp.raise_for_status()
        games = []
        for d in resp.json().get("deployments", []):
            if d.get("state") != "READY":
                continue
            created_at = d.get("createdAt", time.time() * 1000)
            ts = int(created_at / 1000) if isinstance(created_at, (int, float)) else int(
                time.time()
            )
            games.append(
                {
                    "title": d.get("name", "게임"),
                    "description": f"배포된 게임: {d.get('name')}",
                    "url": f"https://{d.get('url')}",
                    "timestamp": ts,
                }
            )
        games.sort(key=lambda x: x["timestamp"], reverse=True)
        return games
    except Exception as e:
        print("Vercel API 오류:", e)
        return []

# ────────────────────────────────────────────────────────────────────────────────
# 5. 페이지네이션
def paginate(lst: list, page: int):
    start = (page - 1) * GAMES_PER_PAGE
    end   = start + GAMES_PER_PAGE
    total = (len(lst) + GAMES_PER_PAGE - 1) // GAMES_PER_PAGE
    return lst[start:end], total

# ────────────────────────────────────────────────────────────────────────────────
# 6. 갤러리 HTML (iframe 미러링)
def generate_gallery_html(games: list, page: int, total_pages: int, tab_name: str) -> str:
    if not games:
        return "<div style='text-align:center;padding:60px;'>표시할 게임이 없습니다.</div>"

    css = """
    <style>
    .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:24px;margin-bottom:40px}
    .item{background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 4px 15px rgba(0,0,0,.1);transition:.3s}
    .item:hover{transform:translateY(-6px);box-shadow:0 12px 30px rgba(0,0,0,.15)}
    .hdr{padding:14px 18px;background:rgba(255,255,255,.8);backdrop-filter:blur(6px);border-bottom:1px solid #eee}
    .ttl{margin:0;font-size:1.1rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .meta{font-size:.85rem;color:#666;margin-top:4px}
    .iframe-box{position:relative;width:100%;padding-top:60%;overflow:hidden}
    .iframe-box iframe{position:absolute;top:0;left:0;width:142.857%;height:142.857%;
                       transform:scale(.7);transform-origin:top left;border:0}
    .footer{padding:10px 16px;background:rgba(255,255,255,.85);backdrop-filter:blur(6px);text-align:right}
    .footer a{font-size:.85rem;font-weight:600;color:#2c5282;text-decoration:none}
    .pg{display:flex;justify-content:center;gap:10px;margin-top:10px}
    .pg button{border:1px solid #ddd;background:#fff;padding:6px 14px;border-radius:8px;cursor:pointer}
    .pg button.active,.pg button:hover{background:#9c89b8;color:#fff;border-color:#9c89b8}
    </style>
    """
    html = css + "<div class='grid'>"
    for g in games:
        date = datetime.datetime.fromtimestamp(g["timestamp"]).strftime("%Y-%m-%d")
        html += f"""
        <div class='item'>
          <div class='hdr'>
            <p class='ttl'>{g['title']}</p>
            <div class='meta'>{date}</div>
          </div>
          <div class='iframe-box'><iframe src="{g['url']}" loading="lazy"
            allow="accelerometer; camera; encrypted-media; gyroscope;"></iframe></div>
          <div class='footer'><a href="{g['url']}" target="_blank">원본 사이트 열기 ↗</a></div>
        </div>
        """
    html += "</div>"
    # 페이지 번호(읽기 전용) – Prev/Next 는 Gradio에서 처리
    html += f"<div style='text-align:center;margin-top:4px;font-size:.85rem;color:#666;'>Page {page} / {total_pages}</div>"
    return html

# ────────────────────────────────────────────────────────────────────────────────
# 7. Gradio UI
def create_gallery_interface():
    initialize_best_games()

    with gr.Blocks(title="Vibe Game Craft") as demo:
        gr.HTML("<h1 style='text-align:center;'>🎮 Vibe Game Craft</h1>")

        with gr.Row():
            new_btn  = gr.Button("NEW", elem_id="new-btn")
            best_btn = gr.Button("BEST", elem_id="best-btn")
            refresh  = gr.Button("🔄 새로고침")
            prev_btn = gr.Button("⬅️ Prev")
            next_btn = gr.Button("Next ➡️")

        # 상태
        current_tab   = gr.State("new")   # "new" or "best"
        new_page      = gr.State(1)
        best_page     = gr.State(1)
        gallery_html  = gr.HTML()

        # NEW / BEST 렌더 함수
        def render_new(page=1):
            games, total = paginate(get_latest_deployments(), page)
            return generate_gallery_html(games, page, total, "new"), "new", page

        def render_best(page=1):
            games, total = paginate(load_best_games(), page)
            return generate_gallery_html(games, page, total, "best"), "best", page

        # 버튼 이벤트
        new_btn.click(fn=render_new,
                      outputs=[gallery_html, current_tab, new_page])

        best_btn.click(fn=render_best,
                       outputs=[gallery_html, current_tab, best_page])

        def refresh_gallery(tab, p_new, p_best):
            if tab == "new":
                return render_new(p_new)[0]
            return render_best(p_best)[0]

        refresh.click(fn=refresh_gallery,
                      inputs=[current_tab, new_page, best_page],
                      outputs=[gallery_html])

        # Prev / Next
        def prev_page(tab, p_new, p_best):
            if tab == "new":
                p_new = max(1, p_new - 1)
                html, _, _ = render_new(p_new)
                return html, p_new, p_best
            p_best = max(1, p_best - 1)
            html, _, _ = render_best(p_best)
            return html, p_new, p_best

        def next_page(tab, p_new, p_best):
            if tab == "new":
                games_total = len(get_latest_deployments())
                max_pages   = (games_total + GAMES_PER_PAGE - 1) // GAMES_PER_PAGE
                p_new = min(max_pages, p_new + 1)
                html, _, _ = render_new(p_new)
                return html, p_new, p_best
            games_total = len(load_best_games())
            max_pages   = (games_total + GAMES_PER_PAGE - 1) // GAMES_PER_PAGE
            p_best = min(max_pages, p_best + 1)
            html, _, _ = render_best(p_best)
            return html, p_new, p_best

        prev_btn.click(fn=prev_page,
                       inputs=[current_tab, new_page, best_page],
                       outputs=[gallery_html, new_page, best_page])

        next_btn.click(fn=next_page,
                       inputs=[current_tab, new_page, best_page],
                       outputs=[gallery_html, new_page, best_page])

        # 초기 NEW 탭 표시
        demo.load(fn=render_new,
                  outputs=[gallery_html, current_tab, new_page])

    return demo

# ────────────────────────────────────────────────────────────────────────────────
# 8. 전역 app (Spaces 자동 감지)
app = create_gallery_interface()

if __name__ == "__main__":
    app.launch()