消消乐

export default {
  async fetch(request, env) {
    const url = new URL(request.url);

    // API routes
    if (url.pathname.startsWith('/api/')) {
      if (url.pathname === '/api/score' && request.method === 'POST') {
        try {
          const { score, level } = await request.json();
          
          // Save high score to database
          const scoreId = crypto.randomUUID();
          await env.DB.prepare(`
            INSERT INTO high_scores (id, score, level, created_at)
            VALUES (?1, ?2, ?3, datetime('now'))
          `).bind(scoreId, score, level).run();

          return new Response(JSON.stringify({ ok: true, id: scoreId }), {
            headers: { 'Content-Type': 'application/json' }
          });
        } catch (error) {
          return new Response(JSON.stringify({ error: 'Failed to save score' }), {
            status: 500,
            headers: { 'Content-Type': 'application/json' }
          });
        }
      }

      if (url.pathname === '/api/leaderboard') {
        try {
          const { results } = await env.DB.prepare(`
            SELECT score, level, created_at
            FROM high_scores
            ORDER BY score DESC, level DESC
            LIMIT 10
          `).all();

          return new Response(JSON.stringify({ data: results }), {
            headers: { 'Content-Type': 'application/json' }
          });
        } catch (error) {
          return new Response(JSON.stringify({ error: 'Failed to get leaderboard' }), {
            status: 500,
            headers: { 'Content-Type': 'application/json' }
          });
        }
      }

      return new Response(JSON.stringify({ error: 'Not found' }), {
        status: 404,
        headers: { 'Content-Type': 'application/json' }
      });
    }

    // Serve HTML
    return new Response(getHTML(), {
      headers: { 'Content-Type': 'text/html' }
    });
  }
};

function getHTML() {
  return `<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>三消大作战 | 趣味消消乐</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
  <style>
    body { font-family: 'Inter', sans-serif; }
    .gem-grid {
      display: grid;
      grid-template-columns: repeat(8, 1fr);
      gap: 2px;
      background: rgba(255, 255, 255, 0.1);
      border-radius: 16px;
      padding: 8px;
    }
    .gem {
      aspect-ratio: 1;
      border-radius: 12px;
      cursor: pointer;
      transition: all 0.3s ease;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
      font-weight: bold;
      user-select: none;
      background: linear-gradient(135deg, var(--gem-color-1), var(--gem-color-2));
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    }
    .gem:hover {
      transform: scale(1.05);
      box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
    }
    .gem.selected {
      transform: scale(1.1);
      box-shadow: 0 0 20px rgba(167, 139, 250, 0.8);
    }
    .gem.matched {
      animation: pop 0.5s ease;
    }
    @keyframes pop {
      0% { transform: scale(1); }
      50% { transform: scale(1.2); opacity: 0.5; }
      100% { transform: scale(0); opacity: 0; }
    }
    .gem-type-0 { --gem-color-1: #ef4444; --gem-color-2: #dc2626; }
    .gem-type-1 { --gem-color-1: #3b82f6; --gem-color-2: #2563eb; }
    .gem-type-2 { --gem-color-1: #10b981; --gem-color-2: #059669; }
    .gem-type-3 { --gem-color-1: #f59e0b; --gem-color-2: #d97706; }
    .gem-type-4 { --gem-color-1: #8b5cf6; --gem-color-2: #7c3aed; }
    .gem-type-5 { --gem-color-1: #ec4899; --gem-color-2: #db2777; }
  </style>
</head>
<body class="bg-gradient-to-br from-gray-900 to-purple-900 text-white min-h-screen">
  <div class="container mx-auto px-4 py-6 max-w-md">
    <!-- Header -->
    <div class="text-center mb-6">
      <h1 class="text-3xl font-bold bg-gradient-to-r from-violet-400 to-pink-400 bg-clip-text text-transparent mb-2">
        三消大作战 ✨
      </h1>
      <p class="text-gray-300 text-sm">连接三个或更多相同宝石来消除它们！</p>
    </div>

    <!-- Game Stats -->
    <div class="grid grid-cols-3 gap-3 mb-6">
      <div class="bg-white/10 backdrop-blur border border-white/20 rounded-xl p-3 text-center">
        <div class="text-xs text-gray-400">得分</div>
        <div id="score" class="text-xl font-bold text-violet-400">0</div>
      </div>
      <div class="bg-white/10 backdrop-blur border border-white/20 rounded-xl p-3 text-center">
        <div class="text-xs text-gray-400">等级</div>
        <div id="level" class="text-xl font-bold text-blue-400">1</div>
      </div>
      <div class="bg-white/10 backdrop-blur border border-white/20 rounded-xl p-3 text-center">
        <div class="text-xs text-gray-400">移动</div>
        <div id="moves" class="text-xl font-bold text-pink-400">30</div>
      </div>
    </div>

    <!-- Progress Bar -->
   
...