@octo-cyber/sea-king 0.5.0

package/web/pages/DashboardPage.tsx

@@ -0,0 +1,281 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { useTranslations } from 'next-intl';
+import {
+  Crown,
+  MessageCircleHeart,
+  Flame,
+  Trophy,
+  Zap,
+  Play,
+  TrendingUp,
+  Shield,
+} from 'lucide-react';
+import { getAnalysis, getChatHistory } from '../services/sea-king-service';
+import type { PlayerAnalysis, ChatSession } from '../types/sea-king';
+
+const RANK_EMOJIS: Record<string, string> = {
+  bronze: '🥉',
+  silver: '🥈',
+  gold: '🥇',
+  platinum: '💎',
+  diamond: '💠',
+  master: '👑',
+  king: '🔱',
+};
+
+export default function DashboardPage() {
+  const t = useTranslations('seaKing.dashboard');
+  const tRanks = useTranslations('seaKing.ranks');
+
+  const [analysis, setAnalysis] = useState<PlayerAnalysis | null>(null);
+  const [recentSessions, setRecentSessions] = useState<ChatSession[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    Promise.allSettled([getAnalysis(), getChatHistory(1, 5)]).then(
+      ([analysisRes, historyRes]) => {
+        if (analysisRes.status === 'fulfilled') setAnalysis(analysisRes.value);
+        if (historyRes.status === 'fulfilled') setRecentSessions(historyRes.value.items);
+        setLoading(false);
+      },
+    );
+  }, []);
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center min-h-[400px]">
+        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-cyan-500" />
+      </div>
+    );
+  }
+
+  const rank = analysis?.profile.rank ?? 'bronze';
+  const rankEmoji = RANK_EMOJIS[rank] ?? '🥉';
+
+  return (
+    <div className="space-y-6 p-6">
+      {/* Hero Banner */}
+      <div className="bg-gradient-to-r from-cyan-500 via-blue-500 to-purple-600 rounded-2xl p-8 text-white relative overflow-hidden">
+        <div className="absolute top-0 right-0 opacity-10 text-[200px] leading-none select-none">
+          🌊
+        </div>
+        <div className="relative z-10">
+          <div className="flex items-center gap-3 mb-2">
+            <Crown className="h-8 w-8" />
+            <h1 className="text-3xl font-bold">{t('welcomeTitle')}</h1>
+          </div>
+          <p className="text-cyan-100 text-lg mt-2">{t('welcomeSubtitle')}</p>
+          <div className="mt-4 flex items-center gap-2">
+            <span className="text-4xl">{rankEmoji}</span>
+            <div>
+              <div className="text-sm opacity-80">{t('currentRank')}</div>
+              <div className="text-xl font-bold">{tRanks(rank)}</div>
+            </div>
+            {analysis?.rankInfo.nextRank && (
+              <div className="ml-6 bg-white/20 rounded-lg px-3 py-1 text-sm">
+                {t('pointsToNext', { points: analysis.rankInfo.pointsToNext })}
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+
+      {/* Stats Grid */}
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+        <StatCard
+          icon={<MessageCircleHeart className="h-5 w-5 text-pink-500" />}
+          label={t('totalFavor')}
+          value={`${analysis?.profile.totalFavorGained ?? 0}`}
+          bg="bg-pink-50"
+          border="border-pink-200"
+        />
+        <StatCard
+          icon={<Flame className="h-5 w-5 text-orange-500" />}
+          label={t('totalSessions')}
+          value={`${analysis?.profile.totalSessions ?? 0}`}
+          bg="bg-orange-50"
+          border="border-orange-200"
+        />
+        <StatCard
+          icon={<Shield className="h-5 w-5 text-green-500" />}
+          label={t('crisisResolved')}
+          value={`${analysis?.profile.crisisResolved ?? 0}`}
+          bg="bg-green-50"
+          border="border-green-200"
+        />
+        <StatCard
+          icon={<TrendingUp className="h-5 w-5 text-blue-500" />}
+          label={t('bestStreak')}
+          value={`${analysis?.profile.bestStreak ?? 0}`}
+          bg="bg-blue-50"
+          border="border-blue-200"
+        />
+      </div>
+
+      {/* Skill Radar Preview */}
+      {analysis && (
+        <div className="bg-white rounded-xl border p-6">
+          <h2 className="text-lg font-semibold mb-4 flex items-center gap-2">
+            <Zap className="h-5 w-5 text-amber-500" />
+            {t('skillRadar')}
+          </h2>
+          <div className="grid grid-cols-5 gap-4">
+            {analysis.radarData.map((d) => (
+              <div key={d.dimension} className="text-center">
+                <div className="relative w-16 h-16 mx-auto mb-2">
+                  <svg viewBox="0 0 36 36" className="w-16 h-16 transform -rotate-90">
+                    <path
+                      d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
+                      fill="none"
+                      stroke="#e5e7eb"
+                      strokeWidth="3"
+                    />
+                    <path
+                      d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
+                      fill="none"
+                      stroke="url(#gradient)"
+                      strokeWidth="3"
+                      strokeDasharray={`${d.score}, 100`}
+                      strokeLinecap="round"
+                    />
+                    <defs>
+                      <linearGradient id="gradient">
+                        <stop offset="0%" stopColor="#06b6d4" />
+                        <stop offset="100%" stopColor="#8b5cf6" />
+                      </linearGradient>
+                    </defs>
+                  </svg>
+                  <span className="absolute inset-0 flex items-center justify-center text-sm font-bold">
+                    {d.score}
+                  </span>
+                </div>
+                <div className="text-xs text-gray-600">{d.label}</div>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {/* Quick Start */}
+      <div>
+        <h2 className="text-lg font-semibold mb-4">{t('quickStart')}</h2>
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+          <QuickStartCard
+            href="/sea-king/chat"
+            emoji="💬"
+            title={t('startChat')}
+            description={t('startChatDesc')}
+            color="from-cyan-500 to-blue-500"
+          />
+          <QuickStartCard
+            href="/sea-king/phrases"
+            emoji="📚"
+            title={t('learnPhrases')}
+            description={t('learnPhrasesDesc')}
+            color="from-pink-500 to-rose-500"
+          />
+          <QuickStartCard
+            href="/sea-king/leaderboard"
+            emoji="🏆"
+            title={t('viewRanking')}
+            description={t('viewRankingDesc')}
+            color="from-amber-500 to-orange-500"
+          />
+        </div>
+      </div>
+
+      {/* Recent Sessions */}
+      {recentSessions.length > 0 && (
+        <div className="bg-white rounded-xl border p-6">
+          <h2 className="text-lg font-semibold mb-4">{t('recentSessions')}</h2>
+          <div className="space-y-3">
+            {recentSessions.map((session) => (
+              <div
+                key={session.id}
+                className="flex items-center justify-between p-3 bg-gray-50 rounded-lg"
+              >
+                <div className="flex items-center gap-3">
+                  <span className="text-2xl">
+                    {session.status === 'completed' ? '✅' : session.status === 'failed' ? '💔' : '⏳'}
+                  </span>
+                  <div>
+                    <div className="font-medium">
+                      {session.characterCount} {t('characters')} · {t('score')}: {session.totalFavorScore}
+                    </div>
+                    <div className="text-sm text-gray-500">
+                      {new Date(session.createdAt).toLocaleDateString()}
+                    </div>
+                  </div>
+                </div>
+                <div className="text-sm text-gray-400">
+                  {RANK_EMOJIS[session.rank] ?? '🥉'} {tRanks(session.rank)}
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+function StatCard({
+  icon,
+  label,
+  value,
+  bg,
+  border,
+}: {
+  icon: React.ReactNode;
+  label: string;
+  value: string;
+  bg: string;
+  border: string;
+}) {
+  return (
+    <div className={`${bg} ${border} border rounded-xl p-4`}>
+      <div className="flex items-center gap-2 mb-2">
+        {icon}
+        <span className="text-sm text-gray-600">{label}</span>
+      </div>
+      <div className="text-2xl font-bold">{value}</div>
+    </div>
+  );
+}
+
+function QuickStartCard({
+  href,
+  emoji,
+  title,
+  description,
+  color,
+}: {
+  href: string;
+  emoji: string;
+  title: string;
+  description: string;
+  color: string;
+}) {
+  return (
+    <a
+      href={href}
+      className="group block rounded-xl border p-5 hover:shadow-lg transition-all duration-300 hover:-translate-y-1"
+    >
+      <div className="flex items-center gap-3">
+        <div
+          className={`bg-gradient-to-br ${color} rounded-xl p-3 text-white shadow-lg`}
+        >
+          <span className="text-xl">{emoji}</span>
+        </div>
+        <div>
+          <h3 className="font-semibold group-hover:text-cyan-600 transition-colors">
+            {title}
+          </h3>
+          <p className="text-sm text-gray-500">{description}</p>
+        </div>
+      </div>
+    </a>
+  );
+}

package/web/pages/LeaderboardPage.tsx

@@ -0,0 +1,208 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { useTranslations } from 'next-intl';
+import { Trophy, Crown, Medal, Star, Users, Flame, Shield } from 'lucide-react';
+import { getLeaderboard } from '../services/sea-king-service';
+import type { LeaderboardEntry } from '../types/sea-king';
+
+const RANK_EMOJIS: Record<string, string> = {
+  bronze: '🥉',
+  silver: '🥈',
+  gold: '🥇',
+  platinum: '💎',
+  diamond: '💠',
+  master: '👑',
+  king: '🔱',
+};
+
+const TOP_3_STYLES = [
+  'bg-gradient-to-r from-amber-400 to-yellow-500 text-white',   // 1st
+  'bg-gradient-to-r from-gray-300 to-gray-400 text-white',      // 2nd
+  'bg-gradient-to-r from-orange-400 to-amber-500 text-white',   // 3rd
+];
+
+export default function LeaderboardPage() {
+  const t = useTranslations('seaKing.leaderboard');
+  const tRanks = useTranslations('seaKing.ranks');
+
+  const [entries, setEntries] = useState<LeaderboardEntry[]>([]);
+  const [total, setTotal] = useState(0);
+  const [loading, setLoading] = useState(true);
+  const [page, setPage] = useState(1);
+
+  useEffect(() => {
+    setLoading(true);
+    getLeaderboard({ page, pageSize: 20 })
+      .then((data) => {
+        setEntries(data.items);
+        setTotal(data.total);
+      })
+      .catch(() => {})
+      .finally(() => setLoading(false));
+  }, [page]);
+
+  return (
+    <div className="space-y-6 p-6">
+      {/* Header */}
+      <div className="bg-gradient-to-r from-amber-500 via-yellow-500 to-orange-500 rounded-2xl p-8 text-white relative overflow-hidden">
+        <div className="absolute top-0 right-0 opacity-10 text-[180px] leading-none select-none">
+          🏆
+        </div>
+        <div className="relative z-10">
+          <div className="flex items-center gap-3 mb-2">
+            <Trophy className="h-8 w-8" />
+            <h1 className="text-3xl font-bold">{t('title')}</h1>
+          </div>
+          <p className="text-amber-100 text-lg mt-2">{t('subtitle')}</p>
+        </div>
+      </div>
+
+      {/* Top 3 Podium */}
+      {entries.length >= 3 && (
+        <div className="grid grid-cols-3 gap-4">
+          {/* 2nd Place */}
+          <div className="text-center mt-8">
+            <div className="bg-white rounded-xl border shadow-lg p-4">
+              <div className="text-4xl mb-2">🥈</div>
+              <div className="font-bold text-lg">{entries[1]?.displayName}</div>
+              <div className="text-2xl font-bold text-gray-500">{entries[1]?.totalScore}</div>
+              <div className="text-xs text-gray-400 mt-1">
+                {RANK_EMOJIS[entries[1]?.rank ?? 'bronze']} {tRanks(entries[1]?.rank ?? 'bronze')}
+              </div>
+            </div>
+          </div>
+
+          {/* 1st Place */}
+          <div className="text-center">
+            <div className="bg-gradient-to-b from-amber-50 to-yellow-50 rounded-xl border-2 border-amber-300 shadow-xl p-4">
+              <div className="text-5xl mb-2 animate-bounce">👑</div>
+              <div className="font-bold text-xl">{entries[0]?.displayName}</div>
+              <div className="text-3xl font-bold text-amber-600">{entries[0]?.totalScore}</div>
+              <div className="text-xs text-amber-500 mt-1 font-medium">
+                {RANK_EMOJIS[entries[0]?.rank ?? 'bronze']} {tRanks(entries[0]?.rank ?? 'bronze')}
+              </div>
+            </div>
+          </div>
+
+          {/* 3rd Place */}
+          <div className="text-center mt-12">
+            <div className="bg-white rounded-xl border shadow-lg p-4">
+              <div className="text-3xl mb-2">🥉</div>
+              <div className="font-bold">{entries[2]?.displayName}</div>
+              <div className="text-xl font-bold text-orange-500">{entries[2]?.totalScore}</div>
+              <div className="text-xs text-gray-400 mt-1">
+                {RANK_EMOJIS[entries[2]?.rank ?? 'bronze']} {tRanks(entries[2]?.rank ?? 'bronze')}
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Full Ranking Table */}
+      <div className="bg-white rounded-xl border overflow-hidden">
+        <table className="w-full">
+          <thead className="bg-gray-50 border-b">
+            <tr>
+              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
+                {t('rankCol')}
+              </th>
+              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
+                {t('player')}
+              </th>
+              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
+                {t('tier')}
+              </th>
+              <th className="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase">
+                {t('score')}
+              </th>
+              <th className="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase">
+                {t('maxChats')}
+              </th>
+              <th className="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase">
+                {t('crisisRate')}
+              </th>
+            </tr>
+          </thead>
+          <tbody className="divide-y divide-gray-100">
+            {loading ? (
+              <tr>
+                <td colSpan={6} className="px-6 py-8 text-center">
+                  <div className="animate-spin rounded-full h-6 w-6 border-b-2 border-amber-500 mx-auto" />
+                </td>
+              </tr>
+            ) : entries.length === 0 ? (
+              <tr>
+                <td colSpan={6} className="px-6 py-12 text-center text-gray-400">
+                  <span className="text-4xl">🏜️</span>
+                  <p className="mt-2">{t('empty')}</p>
+                </td>
+              </tr>
+            ) : (
+              entries.map((entry, idx) => {
+                const position = (page - 1) * 20 + idx + 1;
+                return (
+                  <tr key={entry.id} className="hover:bg-gray-50 transition-colors">
+                    <td className="px-6 py-4">
+                      {position <= 3 ? (
+                        <span className="text-xl">
+                          {position === 1 ? '🥇' : position === 2 ? '🥈' : '🥉'}
+                        </span>
+                      ) : (
+                        <span className="text-gray-400 font-mono">#{position}</span>
+                      )}
+                    </td>
+                    <td className="px-6 py-4 font-medium">{entry.displayName}</td>
+                    <td className="px-6 py-4">
+                      <span className="text-sm">
+                        {RANK_EMOJIS[entry.rank] ?? '🥉'} {tRanks(entry.rank)}
+                      </span>
+                    </td>
+                    <td className="px-6 py-4 text-right font-bold text-amber-600">
+                      {entry.totalScore}
+                    </td>
+                    <td className="px-6 py-4 text-right">
+                      <span className="flex items-center justify-end gap-1 text-sm">
+                        <Users className="h-3 w-3 text-gray-400" />
+                        {entry.maxConcurrentChats}
+                      </span>
+                    </td>
+                    <td className="px-6 py-4 text-right">
+                      <span className="flex items-center justify-end gap-1 text-sm">
+                        <Shield className="h-3 w-3 text-gray-400" />
+                        {entry.crisisSuccessRate}%
+                      </span>
+                    </td>
+                  </tr>
+                );
+              })
+            )}
+          </tbody>
+        </table>
+      </div>
+
+      {/* Pagination */}
+      {total > 20 && (
+        <div className="flex justify-center gap-2">
+          <button
+            onClick={() => setPage((p) => Math.max(1, p - 1))}
+            disabled={page === 1}
+            className="px-4 py-2 rounded-lg border hover:bg-gray-50 disabled:opacity-30"
+          >
+            {t('prev')}
+          </button>
+          <span className="px-4 py-2 text-gray-500">
+            {page} / {Math.ceil(total / 20)}
+          </span>
+          <button
+            onClick={() => setPage((p) => p + 1)}
+            disabled={page >= Math.ceil(total / 20)}
+            className="px-4 py-2 rounded-lg border hover:bg-gray-50 disabled:opacity-30"
+          >
+            {t('next')}
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}