app.py

import gradio as gr
import random
import time

# =========================
# 🎮 GAME STATE
# =========================
def new_game():
    emojis = ["🍎","🍌","🍇","🍉","🍒","🥝","🍍","🥑"]
    cards = emojis * 2
    random.shuffle(cards)
    return {
        "board": cards,
        "revealed": [False]*16,
        "first": None,
        "lock": False,
        "moves": 0
    }

state = new_game()

# =========================
# 🧠 RENDER
# =========================
def render():
    return [
        state["board"][i] if state["revealed"][i] else "❓"
        for i in range(16)
    ]

def check_win():
    return all(state["revealed"])

# =========================
# 🎯 LOGIC
# =========================
def click(i):
    if state["lock"] or state["revealed"][i]:
        return render(), f"🎯 Moves: {state['moves']}"

    state["revealed"][i] = True

    if state["first"] is None:
        state["first"] = i
    else:
        state["lock"] = True
        state["moves"] += 1

        time.sleep(0.5)

        if state["board"][state["first"]] != state["board"][i]:
            state["revealed"][state["first"]] = False
            state["revealed"][i] = False

        state["first"] = None
        state["lock"] = False

    if check_win():
        return render(), f"🏆 YOU WIN in {state['moves']} moves!"

    return render(), f"🎯 Moves: {state['moves']}"

# =========================
# 🔄 RESET
# =========================
def reset():
    global state
    state = new_game()
    return render(), "🎮 New Game Started!"

# =========================
# 🎨 UI MODERN
# =========================
with gr.Blocks(css="""
body {
    background: linear-gradient(135deg, #0f172a, #1e293b);
    font-family: 'Segoe UI', sans-serif;
}

h1 {
    text-align: center;
    color: white;
    font-size: 32px;
}

p {
    text-align: center;
    color: #cbd5f5;
}

.gr-textbox textarea {
    text-align: center;
    font-size: 18px;
    background: #020617;
    color: #38bdf8;
    border: none;
}

/* CARD */
button {
    font-size: 28px !important;
    height: 80px;
    border-radius: 16px !important;
    background: linear-gradient(145deg, #1e293b, #0f172a) !important;
    color: white !important;
    border: 1px solid #334155 !important;
    transition: all 0.2s ease;
    box-shadow: 0 4px 15px rgba(0,0,0,0.4);
}

button:hover {
    transform: scale(1.08);
    box-shadow: 0 0 15px #38bdf8;
}

/* RESET BUTTON */
#reset {
    background: linear-gradient(90deg, #38bdf8, #6366f1) !important;
    color: white !important;
    font-weight: bold;
}
""") as demo:

    gr.Markdown("# 🧠 Memory Game Pro")
    gr.Markdown("Match all pairs as fast as possible!")

    status = gr.Textbox(value="🎮 Ready?", label="Status")

    buttons = []

    for r in range(4):
        with gr.Row():
            for c in range(4):
                i = r*4 + c
                btn = gr.Button("❓")
                buttons.append(btn)

    reset_btn = gr.Button("🔄 New Game", elem_id="reset")

    # =========================
    # 🔄 UPDATE UI
    # =========================
    def update_ui(values, text):
        updates = [gr.update(value=values[i]) for i in range(16)]
        return updates + [gr.update(value=text)]

    def handle_click(i):
        values, text = click(i)
        return update_ui(values, text)

    def make_fn(i):
        return lambda: handle_click(i)

    for i in range(16):
        buttons[i].click(make_fn(i), outputs=buttons + [status])

    reset_btn.click(lambda: update_ui(*reset()), outputs=buttons + [status])

demo.launch()