<?php
declare(strict_types=1);

header('X-Powered-By: HealingNest');

function envOrDefault(string $key, string $default): string
{
    $value = getenv($key);
    return is_string($value) && $value !== '' ? $value : $default;
}

function getPDO(): PDO
{
    static $pdo = null;
    if ($pdo instanceof PDO) {
        return $pdo;
    }

    $host = envOrDefault('DB_HOST', '127.0.0.1');
    $name = envOrDefault('DB_NAME', 'healing_nest');
    $user = envOrDefault('DB_USER', 'root');
    $pass = envOrDefault('DB_PASS', 'root');
    $dsn = sprintf('mysql:host=%s;dbname=%s;charset=utf8mb4', $host, $name);
    $pdo = new PDO($dsn, $user, $pass, [
        PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
        PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC,
        PDO::ATTR_EMULATE_PREPARES => false,
    ]);
    return $pdo;
}

function jsonResponse(array $data, int $code = 200): void
{
    http_response_code($code);
    header('Content-Type: application/json; charset=utf-8');
    echo json_encode($data, JSON_UNESCAPED_UNICODE | JSON_INVALID_UTF8_SUBSTITUTE);
    exit;
}

function jsonInput(): array
{
    $raw = file_get_contents('php://input');
    if (!is_string($raw) || trim($raw) === '') {
        return [];
    }
    $data = json_decode($raw, true, 512, JSON_INVALID_UTF8_SUBSTITUTE);
    return is_array($data) ? $data : [];
}

function hashToken(string $token): string
{
    return hash('sha256', $token);
}

$allowedCategories = ['学习压力', '工作烦恼', '今日开心', '情绪树洞', '日常分享'];

if (isset($_GET['endpoint']) && $_GET['endpoint'] === 'posts') {
    try {
        $pdo = getPDO();
    } catch (Throwable $e) {
        jsonResponse(['ok' => false, 'message' => '数据库连接失败，请检查配置。'], 500);
    }

    if ($_SERVER['REQUEST_METHOD'] === 'GET') {
        try {
            $page = max((int)($_GET['page'] ?? 1), 1);
            $pageSize = 10;
            $offset = ($page - 1) * $pageSize;
            $authorToken = trim((string)($_GET['author_token'] ?? ''));
            $tokenHash = $authorToken !== '' ? hashToken($authorToken) : '';

            $total = (int)$pdo->query('SELECT COUNT(*) FROM posts')->fetchColumn();
            $totalPages = max((int)ceil($total / $pageSize), 1);

            $stmt = $pdo->prepare(
                'SELECT id, nickname, category, content, reply_to_id, likes_count, author_token_hash, created_at
                 FROM posts ORDER BY created_at DESC LIMIT :limit OFFSET :offset'
            );
            $stmt->bindValue(':limit', $pageSize, PDO::PARAM_INT);
            $stmt->bindValue(':offset', $offset, PDO::PARAM_INT);
            $stmt->execute();
            $rows = $stmt->fetchAll();
            $posts = array_map(static function (array $row) use ($tokenHash): array {
                $row['can_delete'] = $tokenHash !== '' && hash_equals((string)$row['author_token_hash'], $tokenHash);
                unset($row['author_token_hash']);
                return $row;
            }, $rows);

            jsonResponse(['ok' => true, 'data' => $posts, 'pagination' => ['page' => $page, 'total_pages' => $totalPages]]);
        } catch (Throwable $e) {
            jsonResponse(['ok' => false, 'message' => '请先导入 SQL 脚本，或确认 posts 表存在。'], 500);
        }
    }

    if ($_SERVER['REQUEST_METHOD'] === 'POST') {
        $payload = jsonInput();
        $action = (string)($payload['action'] ?? 'create');

        if ($action === 'like') {
            $id = (int)($payload['id'] ?? 0);
            if ($id <= 0) {
                jsonResponse(['ok' => false, 'message' => '留言 ID 无效。'], 422);
            }
            $stmt = $pdo->prepare('UPDATE posts SET likes_count = likes_count + 1 WHERE id = :id');
            $stmt->execute([':id' => $id]);
            jsonResponse(['ok' => true, 'message' => '已点赞']);
        }

        if ($action === 'delete') {
            $id = (int)($payload['id'] ?? 0);
            $authorToken = trim((string)($payload['author_token'] ?? ''));
            if ($id <= 0 || $authorToken === '') {
                jsonResponse(['ok' => false, 'message' => '删除参数不完整。'], 422);
            }
            $stmt = $pdo->prepare('DELETE FROM posts WHERE id = :id AND author_token_hash = :token_hash');
            $stmt->execute([':id' => $id, ':token_hash' => hashToken($authorToken)]);
            if ($stmt->rowCount() === 0) {
                jsonResponse(['ok' => false, 'message' => '只能删除自己发布的留言。'], 403);
            }
            jsonResponse(['ok' => true, 'message' => '留言已删除']);
        }

        $nickname = trim((string)($payload['nickname'] ?? '匿名小狗'));
        $category = trim((string)($payload['category'] ?? '日常分享'));
        $content = trim((string)($payload['content'] ?? ''));
        $replyToId = isset($payload['reply_to_id']) ? (int)$payload['reply_to_id'] : null;
        $authorToken = trim((string)($payload['author_token'] ?? ''));

        if ($content === '') {
            jsonResponse(['ok' => false, 'message' => '留言内容不能为空。'], 422);
        }
        if (mb_strlen($nickname) > 20 || mb_strlen($nickname) < 1) {
            jsonResponse(['ok' => false, 'message' => '昵称长度需在 1-20 个字符。'], 422);
        }
        if (!in_array($category, $allowedCategories, true)) {
            jsonResponse(['ok' => false, 'message' => '留言分类不合法。'], 422);
        }
        if (mb_strlen($content) > 300) {
            jsonResponse(['ok' => false, 'message' => '留言内容最多 300 个字符。'], 422);
        }
        if ($authorToken === '' || mb_strlen($authorToken) > 64) {
            jsonResponse(['ok' => false, 'message' => '作者令牌无效。'], 422);
        }
        if ($replyToId !== null && $replyToId <= 0) {
            $replyToId = null;
        }

        $stmt = $pdo->prepare(
            'INSERT INTO posts (nickname, category, content, reply_to_id, likes_count, author_token_hash, created_at)
             VALUES (:nickname, :category, :content, :reply_to_id, 0, :author_token_hash, NOW())'
        );
        $stmt->execute([
            ':nickname' => $nickname,
            ':category' => $category,
            ':content' => $content,
            ':reply_to_id' => $replyToId,
            ':author_token_hash' => hashToken($authorToken),
        ]);
        jsonResponse(['ok' => true, 'message' => '留言发布成功！']);
    }

    jsonResponse(['ok' => false, 'message' => '不支持的请求方式。'], 405);
}
?>
<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>解压小窝</title>
    <style>
        :root {
            --bg: #eaf6ff;
            --primary: #5da9e9;
            --primary-hover: #4a95d4;
            --text: #2b3f57;
            --card: #ffffffcc;
            --danger: #ef7f9f;
            --danger-hover: #e06688;
            --success: #9fe2bf;
            --shadow: 0 10px 24px #90caf933;
        }

        * { box-sizing: border-box; margin: 0; padding: 0; }

        body {
            font-family: "Microsoft YaHei", system-ui, -apple-system, sans-serif;
            color: var(--text);
            background: linear-gradient(180deg, #dff2ff 0%, var(--bg) 100%);
            min-height: 100vh;
            line-height: 1.6;
        }

        .site-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 14px 22px;
            background: #ffffffb3;
            position: sticky;
            top: 0;
            border-bottom: 1px solid #c5e7ff;
            backdrop-filter: blur(8px);
            z-index: 100;
        }

        .brand { display: flex; align-items: center; gap: 8px; }
        .brand h1 { font-size: 1.4rem; }
        .dog { font-size: 30px; }

        nav { display: flex; gap: 8px; }
        nav a {
            padding: 6px 12px;
            text-decoration: none;
            color: var(--text);
            font-weight: 600;
            border-radius: 8px;
            transition: background 0.2s;
        }
        nav a:hover { background: #d8ecff; }

        main {
            width: min(1024px, 94vw);
            margin: 20px auto;
            display: grid;
            gap: 16px;
            padding-bottom: 40px;
        }

        .card {
            background: var(--card);
            border: 1px solid #b5ddff;
            border-radius: 14px;
            padding: 20px;
            box-shadow: var(--shadow);
        }

        .hero { text-align: center; }
        .hero h2 { margin-bottom: 8px; }
        .hint { color: #4f7fa8; font-size: 0.9rem; }

        input, textarea, select {
            width: 100%;
            margin-top: 6px;
            border: 1px solid #b0d8ff;
            border-radius: 8px;
            padding: 10px;
            font: inherit;
            transition: border-color 0.2s;
        }
        input:focus, textarea:focus, select:focus {
            outline: none;
            border-color: var(--primary);
            box-shadow: 0 0 0 3px rgba(93, 169, 233, 0.2);
        }

        form { display: grid; gap: 12px; }

        button {
            border: none;
            border-radius: 8px;
            padding: 9px 14px;
            background: var(--primary);
            color: white;
            cursor: pointer;
            font: inherit;
            font-weight: 600;
            transition: background 0.2s, transform 0.1s;
        }
        button:hover { background: var(--primary-hover); }
        button:active { transform: scale(0.97); }
        button:disabled { opacity: 0.6; cursor: not-allowed; }

        .danger { background: var(--danger); }
        .danger:hover { background: var(--danger-hover); }

        .social-list { display: grid; gap: 10px; }

        .post {
            border: 1px solid #bee2ff;
            background: #f4fbff;
            border-radius: 10px;
            padding: 12px;
            transition: box-shadow 0.2s;
        }
        .post:hover { box-shadow: 0 4px 12px rgba(93, 169, 233, 0.15); }

        .post-meta {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 12px;
            color: #5f86a6;
            margin-bottom: 4px;
        }

        .post-category, .reply-mention {
            display: inline-block;
            margin: 4px 0;
            padding: 2px 8px;
            border-radius: 999px;
            font-size: 12px;
        }
        .post-category { background: #d8ecff; color: #285e87; }
        .reply-mention { background: #d9eeff; color: #2f6289; }

        .post-actions { display: flex; gap: 8px; margin-top: 8px; }

        .filter-bar {
            display: flex;
            gap: 10px;
            align-items: center;
            margin-bottom: 10px;
            flex-wrap: wrap;
        }
        .filter-bar input, .filter-bar select { width: auto; flex: 1; min-width: 120px; }
        .filter-bar label { display: flex; align-items: center; gap: 4px; white-space: nowrap; }

        .games-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 14px;
        }

        .game-box {
            border: 1px solid #b8defd;
            border-radius: 10px;
            padding: 14px;
            background: #f2faff;
        }

        .runner-game {
            position: relative;
            height: 110px;
            border: 1px dashed #7eb9e7;
            border-radius: 10px;
            background: white;
            overflow: hidden;
            margin: 10px 0;
        }

        #dogRunner {
            position: absolute;
            left: 25px;
            bottom: 12px;
            font-size: 34px;
            transition: bottom 0.47s ease-out;
        }
        #dogRunner.jump { bottom: 56px; }

        #obstacle {
            position: absolute;
            right: -20px;
            bottom: 12px;
            width: 16px;
            height: 32px;
            background: #5ca6e8;
            border-radius: 6px;
        }

        .match-game {
            margin-top: 10px;
            display: grid;
            grid-template-columns: repeat(6, 1fr);
            gap: 6px;
        }

        .tile {
            width: 100%;
            aspect-ratio: 1/1;
            border-radius: 6px;
            border: 2px solid #ffffff88;
            cursor: pointer;
            transition: transform 0.15s, opacity 0.3s;
        }
        .tile:hover { transform: scale(1.08); }

        .pagination { display: flex; gap: 10px; align-items: center; justify-content: center; margin-top: 10px; }

        .toast-container {
            position: fixed;
            top: 20px;
            right: 20px;
            z-index: 1000;
            display: grid;
            gap: 8px;
        }

        .toast {
            padding: 12px 20px;
            border-radius: 8px;
            background: white;
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
            animation: slideIn 0.3s ease-out;
            max-width: 320px;
        }
        .toast.success { border-left: 4px solid var(--success); }
        .toast.error { border-left: 4px solid var(--danger); }
        .toast.info { border-left: 4px solid var(--primary); }

        @keyframes slideIn {
            from { transform: translateX(100%); opacity: 0; }
            to { transform: translateX(0); opacity: 1; }
        }

        .loading { text-align: center; padding: 20px; color: #5f86a6; }

        @media (max-width: 600px) {
            .site-header { flex-direction: column; gap: 10px; }
            nav { flex-wrap: wrap; justify-content: center; }
            .filter-bar { flex-direction: column; }
            .filter-bar input, .filter-bar select { width: 100%; }
        }
    </style>
</head>
<body>
<header class="site-header">
    <div class="brand"><span class="dog">🐶</span><h1>解压小窝</h1></div>
    <nav>
        <a href="#home">首页</a>
        <a href="#social">社交区</a>
        <a href="#message">留言区</a>
        <a href="#games">游戏区</a>
    </nav>
</header>
<main>
    <section id="home" class="hero card">
        <h2>欢迎来到你的治愈角落</h2>
        <p>淡蓝治愈风 + 小狗元素 + 互动交流 + 解压小游戏。</p>
        <button id="relaxBtn" type="button">点我解压</button>
        <p id="quote" style="margin-top: 10px; font-style: italic;">每一次停下来呼吸，都是在照顾自己。</p>
    </section>

    <section id="social" class="card">
        <h2>社交区</h2>
        <p class="hint">查看全部留言，点赞、回复、删除自己的留言。</p>
        <div class="filter-bar">
            <input id="postSearch" type="text" placeholder="搜索关键词或昵称">
            <select id="categoryFilter">
                <option value="">全部分类</option>
                <option value="学习压力">学习压力</option>
                <option value="工作烦恼">工作烦恼</option>
                <option value="今日开心">今日开心</option>
                <option value="情绪树洞">情绪树洞</option>
                <option value="日常分享">日常分享</option>
            </select>
            <label><input id="mineOnly" type="checkbox"> 只看我的</label>
            <button id="clearFilters" type="button">清空筛选</button>
        </div>
        <div id="socialList"><p class="loading">加载中...</p></div>
        <div id="pagination" class="pagination"></div>
    </section>

    <section id="message" class="card">
        <h2>留言区</h2>
        <form id="messageForm">
            <label>昵称<input type="text" id="nickname" maxlength="20" required></label>
            <label>留言分类
                <select id="category">
                    <option value="日常分享">日常分享</option>
                    <option value="学习压力">学习压力</option>
                    <option value="工作烦恼">工作烦恼</option>
                    <option value="今日开心">今日开心</option>
                    <option value="情绪树洞">情绪树洞</option>
                </select>
            </label>
            <label>留言内容<textarea id="content" maxlength="300" rows="4" required></textarea></label>
            <input type="hidden" id="replyToId" value="">
            <div style="display:flex;justify-content:space-between;align-items:center;">
                <span id="replyTip" style="color: #5f86a6;"></span>
                <button type="submit" id="submitBtn">发布留言</button>
            </div>
        </form>
    </section>

    <section id="games" class="card">
        <h2>游戏区</h2>
        <div class="games-grid">
            <article class="game-box">
                <h3>小狗跑跑</h3>
                <p>空格跳跃躲障碍。</p>
                <div id="runnerGame" class="runner-game">
                    <div id="dogRunner">🐶</div>
                    <div id="obstacle"></div>
                </div>
                <p>分数：<span id="runnerScore">0</span> ｜ 最高分：<span id="runnerBest">0</span></p>
            </article>
            <article class="game-box">
                <h3>治愈消消乐</h3>
                <p>点击同色连通块，3个以上消除。</p>
                <div id="matchGame" class="match-game"></div>
                <p>得分：<span id="matchScore">0</span> ｜ 最高分：<span id="matchBest">0</span></p>
            </article>
        </div>
    </section>
</main>

<div class="toast-container" id="toastContainer"></div>

<script>
const API = location.pathname + '?endpoint=posts';
const healingQuotes = [
    "你已经很棒了，慢一点也没有关系。",
    "把今天的小烦恼交给晚风。",
    "每个认真生活的人都值得被温柔对待。",
    "今天也要记得好好照顾自己哦。",
    "你的存在本身就是一种温暖。"
];

const $ = (sel) => document.querySelector(sel);
const $$ = (sel) => document.querySelectorAll(sel);

const quoteEl = $('#quote');
const relaxBtn = $('#relaxBtn');
const socialList = $('#socialList');
const paginationEl = $('#pagination');
const messageForm = $('#messageForm');
const replyToIdInput = $('#replyToId');
const replyTip = $('#replyTip');
const nicknameInput = $('#nickname');
const categoryInput = $('#category');
const contentInput = $('#content');
const postSearchInput = $('#postSearch');
const categoryFilterInput = $('#categoryFilter');
const mineOnlyInput = $('#mineOnly');
const clearFiltersBtn = $('#clearFilters');
const submitBtn = $('#submitBtn');
const toastContainer = $('#toastContainer');

let currentPage = 1;
let currentPosts = [];
let isLoading = false;

function showToast(message, type = 'info') {
    const toast = document.createElement('div');
    toast.className = `toast ${type}`;
    toast.textContent = message;
    toastContainer.appendChild(toast);
    setTimeout(() => {
        toast.style.opacity = '0';
        toast.style.transform = 'translateX(100%)';
        setTimeout(() => toast.remove(), 300);
    }, 3000);
}

function escapeHtml(str) {
    const div = document.createElement('div');
    div.textContent = str;
    return div.innerHTML;
}

function getAuthorToken() {
    let t = localStorage.getItem('healing_author_token');
    if (!t) {
        t = `${Date.now().toString(36)}_${Math.random().toString(36).slice(2)}`;
        localStorage.setItem('healing_author_token', t);
    }
    return t;
}

function getSavedNickname() {
    return localStorage.getItem('healing_nickname') || '';
}

async function requestJson(url, options = {}) {
    const res = await fetch(url, {
        ...options,
        headers: {
            'Content-Type': 'application/json',
            ...options.headers,
        },
    });
    const txt = await res.text();
    let json;
    try {
        json = JSON.parse(txt);
    } catch (e) {
        throw new Error('接口返回异常，请检查PHP日志');
    }
    if (!res.ok) throw new Error((json && json.message) ? json.message : `请求失败(${res.status})`);
    return json;
}

function renderPosts(posts) {
    const token = getAuthorToken();
    const kw = (postSearchInput.value || '').trim().toLowerCase();
    const cat = (categoryFilterInput.value || '').trim();
    const mine = mineOnlyInput.checked;

    const filtered = posts.filter(p => {
        if (mine && !p.can_delete) return false;
        if (cat && p.category !== cat) return false;
        if (!kw) return true;
        return String(p.nickname).toLowerCase().includes(kw) || String(p.content).toLowerCase().includes(kw);
    });

    if (!filtered.length) {
        socialList.innerHTML = '<p class="loading">当前筛选条件下没有留言。</p>';
        return;
    }

    socialList.innerHTML = filtered.map(p => `
        <article class="post">
            <div class="post-meta">
                <strong>${escapeHtml(p.nickname)}</strong>
                <time>${new Date(p.created_at.replace(' ', 'T')).toLocaleString('zh-CN')}</time>
            </div>
            <span class="post-category">${escapeHtml(p.category || '日常分享')}</span>
            ${p.reply_to_id ? `<span class="reply-mention">@回复 #${p.reply_to_id}</span>` : ''}
            <p style="margin-top: 6px;">${escapeHtml(p.content)}</p>
            <div class="post-actions">
                <button class="reply-btn" data-id="${p.id}" type="button">回复</button>
                <button class="like-btn" data-id="${p.id}" type="button">点赞(${p.likes_count})</button>
                ${p.can_delete ? `<button class="delete-btn danger" data-id="${p.id}" type="button">删除</button>` : ''}
            </div>
        </article>
    `).join('');

    socialList.querySelectorAll('.reply-btn').forEach(btn => {
        btn.addEventListener('click', () => {
            const id = btn.dataset.id;
            replyToIdInput.value = id;
            replyTip.textContent = `正在回复 #${id}`;
            contentInput.focus();
        });
    });

    socialList.querySelectorAll('.like-btn').forEach(btn => {
        btn.addEventListener('click', async () => {
            try {
                await requestJson(API, {
                    method: 'POST',
                    body: JSON.stringify({ action: 'like', id: Number(btn.dataset.id) }),
                });
                showToast('已点赞', 'success');
                loadPosts(currentPage);
            } catch (e) {
                showToast(e.message, 'error');
            }
        });
    });

    socialList.querySelectorAll('.delete-btn').forEach(btn => {
        btn.addEventListener('click', async () => {
            if (!confirm('确定删除这条留言吗？')) return;
            try {
                await requestJson(API, {
                    method: 'POST',
                    body: JSON.stringify({ action: 'delete', id: Number(btn.dataset.id), author_token: token }),
                });
                showToast('留言已删除', 'success');
                loadPosts(currentPage);
            } catch (e) {
                showToast(e.message, 'error');
            }
        });
    });
}

function renderPagination(total) {
    paginationEl.innerHTML = `
        <button id="prevPage" ${currentPage <= 1 ? 'disabled' : ''}>上一页</button>
        <span>第 ${currentPage}/${total} 页</span>
        <button id="nextPage" ${currentPage >= total ? 'disabled' : ''}>下一页</button>
    `;
    $('#prevPage')?.addEventListener('click', () => loadPosts(currentPage - 1));
    $('#nextPage')?.addEventListener('click', () => loadPosts(currentPage + 1));
}

async function loadPosts(page = 1) {
    if (isLoading) return;
    isLoading = true;
    socialList.innerHTML = '<p class="loading">加载中...</p>';

    try {
        const token = getAuthorToken();
        const json = await requestJson(`${API}&page=${page}&author_token=${encodeURIComponent(token)}`);
        if (!json.ok) {
            socialList.innerHTML = '<p class="loading">暂时无法加载留言。</p>';
            paginationEl.innerHTML = '';
            return;
        }
        if (json.data.length === 0) {
            socialList.innerHTML = '<p class="loading">还没有留言，来当第一个温暖发言的人吧！</p>';
            paginationEl.innerHTML = '';
            return;
        }
        currentPage = json.pagination.page;
        currentPosts = json.data;
        renderPosts(currentPosts);
        renderPagination(json.pagination.total_pages);
    } catch (e) {
        socialList.innerHTML = `<p class="loading">留言加载失败：${escapeHtml(e.message)}</p>`;
        paginationEl.innerHTML = '';
    } finally {
        isLoading = false;
    }
}

relaxBtn.addEventListener('click', () => {
    quoteEl.textContent = healingQuotes[Math.floor(Math.random() * healingQuotes.length)];
});

postSearchInput.addEventListener('input', () => renderPosts(currentPosts));
categoryFilterInput.addEventListener('change', () => renderPosts(currentPosts));
mineOnlyInput.addEventListener('change', () => renderPosts(currentPosts));
clearFiltersBtn.addEventListener('click', () => {
    postSearchInput.value = '';
    categoryFilterInput.value = '';
    mineOnlyInput.checked = false;
    renderPosts(currentPosts);
});

messageForm.addEventListener('submit', async (e) => {
    e.preventDefault();
    if (isLoading) return;

    const nickname = nicknameInput.value.trim();
    const category = categoryInput.value;
    const content = contentInput.value.trim();
    const replyToId = replyToIdInput.value ? Number(replyToIdInput.value) : null;
    const token = getAuthorToken();

    submitBtn.disabled = true;
    try {
        const json = await requestJson(API, {
            method: 'POST',
            body: JSON.stringify({ nickname, category, content, reply_to_id: replyToId, author_token: token }),
        });
        if (!json.ok) {
            showToast(json.message || '发布失败', 'error');
            return;
        }
        messageForm.reset();
        replyToIdInput.value = '';
        replyTip.textContent = '';
        nicknameInput.value = nickname;
        localStorage.setItem('healing_nickname', nickname);
        showToast('留言发布成功！', 'success');
        await loadPosts(1);
    } catch (e) {
        showToast(e.message || '发布失败', 'error');
    } finally {
        submitBtn.disabled = false;
    }
});

nicknameInput.value = getSavedNickname();
loadPosts(1);

const dogRunner = $('#dogRunner');
const obstacle = $('#obstacle');
const runnerScoreEl = $('#runnerScore');
const runnerBestEl = $('#runnerBest');

let obstacleX = 360;
let isJumping = false;
let runnerScore = 0;
let runnerSpeed = 6;
let runnerBest = Number(localStorage.getItem('runner_best') || 0);
let runnerAnimId = null;

runnerBestEl.textContent = String(runnerBest);

function jumpDog() {
    if (isJumping) return;
    isJumping = true;
    dogRunner.classList.add('jump');
    setTimeout(() => {
        dogRunner.classList.remove('jump');
        isJumping = false;
    }, 470);
}

document.addEventListener('keydown', (e) => {
    if (e.code === 'Space') {
        e.preventDefault();
        jumpDog();
    }
});

function runnerLoop() {
    obstacleX -= runnerSpeed;
    if (obstacleX < -20) {
        obstacleX = 360;
        runnerScore += 1;
        if (runnerScore % 5 === 0) runnerSpeed = Math.min(13, runnerSpeed + 0.8);
        runnerScoreEl.textContent = String(runnerScore);
        if (runnerScore > runnerBest) {
            runnerBest = runnerScore;
            localStorage.setItem('runner_best', String(runnerBest));
            runnerBestEl.textContent = String(runnerBest);
        }
    }
    obstacle.style.right = `${360 - obstacleX}px`;
    if (obstacleX > 20 && obstacleX < 60 && !isJumping) {
        showToast(`撞到障碍，本次得分 ${runnerScore}`, 'error');
        runnerScore = 0;
        runnerSpeed = 6;
        runnerScoreEl.textContent = '0';
        obstacleX = 360;
    }
    runnerAnimId = requestAnimationFrame(runnerLoop);
}
runnerAnimId = requestAnimationFrame(runnerLoop);

const matchGame = $('#matchGame');
const matchScoreEl = $('#matchScore');
const matchBestEl = $('#matchBest');
const colors = ['#8ecbff', '#9fe2bf', '#ffd6a5', '#ffc8dd', '#cdb4db'];
const size = 6;
let board = [];
let matchScore = 0;
let matchBest = Number(localStorage.getItem('match_best') || 0);
matchBestEl.textContent = String(matchBest);

function createBoard() {
    board = Array.from({ length: size * size }, () => colors[Math.floor(Math.random() * colors.length)]);
}

function renderBoard() {
    matchGame.innerHTML = '';
    board.forEach((c, i) => {
        if (c === null) return;
        const t = document.createElement('button');
        t.className = 'tile';
        t.style.background = c;
        t.addEventListener('click', () => clearCluster(i));
        matchGame.appendChild(t);
    });
}

function neighbors(i) {
    const r = Math.floor(i / size);
    const c = i % size;
    const out = [];
    if (r > 0) out.push(i - size);
    if (r < size - 1) out.push(i + size);
    if (c > 0) out.push(i - 1);
    if (c < size - 1) out.push(i + 1);
    return out;
}

function clearCluster(start) {
    const target = board[start];
    if (!target) return;
    const stack = [start];
    const vis = new Set();
    while (stack.length) {
        const idx = stack.pop();
        if (vis.has(idx) || board[idx] !== target) continue;
        vis.add(idx);
        neighbors(idx).forEach(n => {
            if (!vis.has(n) && board[n] === target) stack.push(n);
        });
    }
    if (vis.size < 3) return;
    vis.forEach(i => board[i] = null);
    for (let c = 0; c < size; c += 1) {
        const col = [];
        for (let r = size - 1; r >= 0; r -= 1) {
            const i = r * size + c;
            if (board[i] !== null) col.push(board[i]);
        }
        for (let r = size - 1; r >= 0; r -= 1) {
            const i = r * size + c;
            board[i] = col[size - 1 - r] ?? colors[Math.floor(Math.random() * colors.length)];
        }
    }
    matchScore += vis.size;
    matchScoreEl.textContent = String(matchScore);
    if (matchScore > matchBest) {
        matchBest = matchScore;
        localStorage.setItem('match_best', String(matchBest));
        matchBestEl.textContent = String(matchBest);
    }
    renderBoard();
}

createBoard();
renderBoard();
</script>
</body>
</html>