app.py

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

# ───────────────────── 1. 기본 설정 ─────────────────────
BEST_FILE, PER_PAGE = "best_games.json", 9          # ❶ 페이지당 9개 유지

# ───────────────────── 2. BEST 데이터 ────────────────────
def _init_best():
    if not os.path.exists(BEST_FILE):
        json.dump([], open(BEST_FILE, "w"), ensure_ascii=False)

def _load_best():
    try:
        raw = json.load(open(BEST_FILE))
        # URL 리스트만 반환
        if isinstance(raw, list):
            return [u if isinstance(u, str) else u.get("url") for u in raw]
        return []
    except Exception as e:
        print("BEST 로드 오류:", e)
        return []

def _save_best(lst):                                  # URL 리스트 저장
    try:
        json.dump(lst, open(BEST_FILE, "w"), ensure_ascii=False, indent=2)
        return True
    except Exception as e:
        print("BEST 저장 오류:", e)
        return False

def add_url_to_best(url: str):
    data = _load_best()
    if url in data:
        return False
    data.insert(0, url)
    return _save_best(data)

# ───────────────────── 3. 유틸 ──────────────────────────
def page(lst, pg):
    s, e = (pg-1)*PER_PAGE, (pg-1)*PER_PAGE+PER_PAGE
    total = (len(lst)+PER_PAGE-1)//PER_PAGE
    return lst[s:e], total

def process_url_for_iframe(url):
    # Hugging Face Spaces embed 우선
    if "huggingface.co/spaces" in url:
        owner, name = url.rstrip("/").split("/spaces/")[1].split("/")[:2]
        return f"https://huggingface.co/spaces/{owner}/{name}/embed", True, []
    return url, False, []

# ───────────────────── 4. 카드 그리드 HTML ───────────────
def html(urls, pg, total):
    if not urls:
        return '<div style="text-align:center;padding:70px;color:#555;">표시할 배포가 없습니다.</div>'

    css = r"""
    <style>
      body{margin:0;font-family:Poppins,sans-serif;background:#f4f5f7;}
      .container{padding:16px;}
      .grid{
          display:grid;
          grid-template-columns:repeat(auto-fill,minmax(340px,1fr));
          gap:16px;
      }
      .card{
          background:#fff;border-radius:10px;overflow:hidden;
          box-shadow:0 2px 10px rgba(0,0,0,.08);
          height:480px;                               /* ★ 기본 카드 높이 ↑ */
          transition:transform .2s;
      }
      @media (min-width:1400px){.card{height:640px;} }/* ★ 아주 큰 화면 */
      @media (max-width:992px) {.card{height:420px;} }/* 태블릿 */
      @media (max-width:600px) {.card{height:360px;} }/* 모바일 */

      .card:hover{transform:translateY(-4px);}
      .frame{position:relative;width:100%;height:100%;}
      .frame iframe{position:absolute;inset:0;width:100%;height:100%;border:none;}
      .page-info{text-align:center;color:#777;margin:12px 0;}
    </style>"""

    body = '<div class="container"><div class="grid">'
    for i, origin in enumerate(urls):
        src, is_hf, _ = process_url_for_iframe(origin)
        body += f"""
        <div class="card">
          <div class="frame{' huggingface' if is_hf else ''}">
            <iframe src="{src}" loading="lazy"></iframe>
          </div>
        </div>"""
    body += "</div></div>"
    page_info = f'<div class="page-info">Page {pg} / {total}</div>'
    return css + body + page_info

# ───────────────────── 5. Gradio UI ─────────────────────
def build():
    _init_best()

    header = """
    <style>
      .app-header{position:sticky;top:0;text-align:center;background:#fff;
                  padding:16px 0 8px;border-bottom:1px solid #eee;z-index:1100;}
      .badge-row{display:inline-flex;gap:8px;margin:8px 0;}
    </style>
    <div class="app-header">
        <h1 style="margin:0;font-size:28px;">🎮 Vibe Game Gallery</h1>
        <div class="badge-row">
          <a href="https://huggingface.co/spaces/openfree/Vibe-Game" target="_blank">
            <img src="https://img.shields.io/static/v1?label=huggingface&message=Vibe%20Game%20Craft&color=800080&labelColor=ffa500&logo=huggingface&logoColor=ffff00&style=for-the-badge">
          </a>
          <a href="https://huggingface.co/spaces/openfree/Game-Gallery" target="_blank">
            <img src="https://img.shields.io/static/v1?label=huggingface&message=Game%20Gallery&color=800080&labelColor=ffa500&logo=huggingface&logoColor=ffff00&style=for-the-badge">
          </a>
          <a href="https://discord.gg/openfreeai" target="_blank">
            <img src="https://img.shields.io/static/v1?label=Discord&message=Openfree%20AI&color=0000ff&labelColor=800080&logo=discord&logoColor=white&style=for-the-badge">
          </a>
        </div>
    </div>"""

    global_css = """
      footer{display:none !important;}
      .button-row{position:fixed;bottom:0;left:0;right:0;height:60px;
                  background:#f0f0f0;padding:10px;text-align:center;
                  box-shadow:0 -2px 10px rgba(0,0,0,.05);z-index:1000;}
      .button-row button{margin:0 10px;padding:10px 20px;font-size:16px;font-weight:bold;border-radius:50px;}
      #content-area{overflow-y:auto;height:calc(100vh - 60px - 120px);}
    """

    with gr.Blocks(title="Vibe Game Gallery", css=global_css) as demo:
        gr.HTML(header)
        out = gr.HTML(elem_id="content-area")
        with gr.Row(elem_classes="button-row"):
            b_prev = gr.Button("◀ 이전", size="lg")
            b_next = gr.Button("다음 ▶", size="lg")

        bp = gr.State(1)

        def render(p=1):
            data, tot = page(_load_best(), p)
            return html(data, p, tot), p

        b_prev.click(lambda p: render(max(1, p-1)), inputs=bp, outputs=[out, bp])
        b_next.click(lambda p: render(p+1),      inputs=bp, outputs=[out, bp])

        demo.load(render, outputs=[out, bp])

    return demo

app = build()

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