add claude

2025-06-01 21:39:53 +09:00
parent 3459231bba
commit 4246f718ef
80 changed files with 7249 additions and 0 deletions
--- a/web/Dockerfile
+++ b/web/Dockerfile
@@ -0,0 +1,26 @@
+FROM node:20-alpine AS builder
+
+WORKDIR /app
+
+# Copy package files
+COPY package*.json ./
+RUN npm ci
+
+# Copy source files
+COPY . .
+
+# Build application
+RUN npm run build
+
+# Production stage
+FROM nginx:alpine
+
+# Copy built files
+COPY --from=builder /app/dist /usr/share/nginx/html
+
+# Copy nginx config
+COPY nginx.conf /etc/nginx/conf.d/default.conf
+
+EXPOSE 3000
+
+CMD ["nginx", "-g", "daemon off;"]
--- a/web/index.html
+++ b/web/index.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="ja">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>ai.card</title>
+    <style>
+      body {
+        margin: 0;
+        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+        background-color: #0a0a0a;
+        color: #ffffff;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
--- a/web/nginx.conf
+++ b/web/nginx.conf
@@ -0,0 +1,19 @@
+server {
+    listen 3000;
+    server_name localhost;
+    root /usr/share/nginx/html;
+    index index.html;
+
+    location / {
+        try_files $uri $uri/ /index.html;
+    }
+
+    location /api {
+        proxy_pass http://api:8000;
+        proxy_http_version 1.1;
+        proxy_set_header Upgrade $http_upgrade;
+        proxy_set_header Connection 'upgrade';
+        proxy_set_header Host $host;
+        proxy_cache_bypass $http_upgrade;
+    }
+}
--- a/web/package.json
+++ b/web/package.json
@@ -0,0 +1,23 @@
+{
+  "name": "ai-card-web",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "axios": "^1.6.2",
+    "framer-motion": "^10.16.16"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.45",
+    "@types/react-dom": "^18.2.18",
+    "@vitejs/plugin-react": "^4.2.1",
+    "vite": "^5.0.10",
+    "typescript": "^5.3.3"
+  }
+}
--- a/web/src/App.css
+++ b/web/src/App.css
@@ -0,0 +1,174 @@
+.app {
+  min-height: 100vh;
+  background: linear-gradient(180deg, #0a0a0a 0%, #1a1a1a 100%);
+}
+
+.app-header {
+  text-align: center;
+  padding: 40px 20px;
+  border-bottom: 1px solid #333;
+}
+
+.app-header h1 {
+  font-size: 48px;
+  margin: 0;
+  background: linear-gradient(90deg, #fff700 0%, #ff00ff 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+.app-header p {
+  color: #888;
+  margin-top: 10px;
+}
+
+.user-info {
+  position: absolute;
+  top: 20px;
+  right: 20px;
+  display: flex;
+  align-items: center;
+  gap: 15px;
+}
+
+.user-handle {
+  color: #fff700;
+  font-weight: bold;
+}
+
+.login-button,
+.logout-button {
+  padding: 8px 20px;
+  border: none;
+  border-radius: 8px;
+  font-size: 14px;
+  font-weight: bold;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.login-button {
+  background: linear-gradient(135deg, #fff700 0%, #ffd700 100%);
+  color: #000;
+}
+
+.logout-button {
+  background: rgba(255, 255, 255, 0.1);
+  color: white;
+  border: 1px solid #444;
+}
+
+.login-button:hover,
+.logout-button:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+}
+
+.loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100vh;
+  font-size: 24px;
+  color: #fff700;
+}
+
+.app-main {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 40px 20px;
+}
+
+.gacha-section {
+  text-align: center;
+  margin-bottom: 60px;
+}
+
+.gacha-section h2 {
+  font-size: 32px;
+  margin-bottom: 30px;
+}
+
+.gacha-buttons {
+  display: flex;
+  gap: 20px;
+  justify-content: center;
+  flex-wrap: wrap;
+}
+
+.gacha-button {
+  padding: 20px 40px;
+  font-size: 18px;
+  font-weight: bold;
+  border: none;
+  border-radius: 12px;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: white;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
+}
+
+.gacha-button:hover:not(:disabled) {
+  transform: translateY(-2px);
+  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
+}
+
+.gacha-button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.gacha-button-premium {
+  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
+  position: relative;
+  overflow: hidden;
+}
+
+.gacha-button-premium::before {
+  content: '';
+  position: absolute;
+  top: -50%;
+  left: -50%;
+  width: 200%;
+  height: 200%;
+  background: linear-gradient(
+    45deg,
+    transparent 30%,
+    rgba(255, 255, 255, 0.2) 50%,
+    transparent 70%
+  );
+  animation: shimmer 3s infinite;
+}
+
+.collection-section h2 {
+  font-size: 32px;
+  text-align: center;
+  margin-bottom: 30px;
+}
+
+.card-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+  gap: 30px;
+  justify-items: center;
+}
+
+.empty-message {
+  text-align: center;
+  color: #666;
+  font-size: 18px;
+  margin-top: 40px;
+}
+
+.error {
+  color: #ff4757;
+  text-align: center;
+  margin-top: 20px;
+}
+
+@keyframes shimmer {
+  0% { transform: translateX(-100%) rotate(45deg); }
+  100% { transform: translateX(100%) rotate(45deg); }
+}
--- a/web/src/App.tsx
+++ b/web/src/App.tsx
@@ -0,0 +1,161 @@
+import React, { useState, useEffect } from 'react';
+import { Card } from './components/Card';
+import { GachaAnimation } from './components/GachaAnimation';
+import { Login } from './components/Login';
+import { cardApi } from './services/api';
+import { authService, User } from './services/auth';
+import { Card as CardType, CardDrawResult } from './types/card';
+import './App.css';
+
+function App() {
+  const [isDrawing, setIsDrawing] = useState(false);
+  const [currentDraw, setCurrentDraw] = useState<CardDrawResult | null>(null);
+  const [userCards, setUserCards] = useState<CardType[]>([]);
+  const [error, setError] = useState<string | null>(null);
+  const [user, setUser] = useState<User | null>(null);
+  const [showLogin, setShowLogin] = useState(false);
+  const [isLoading, setIsLoading] = useState(true);
+
+  useEffect(() => {
+    // Check if user is logged in
+    authService.verify().then(verifiedUser => {
+      if (verifiedUser) {
+        setUser(verifiedUser);
+        loadUserCards(verifiedUser.did);
+      }
+      setIsLoading(false);
+    });
+  }, []);
+
+  const loadUserCards = async (did: string) => {
+    try {
+      const cards = await cardApi.getUserCards(did);
+      setUserCards(cards);
+    } catch (err) {
+      console.error('Failed to load cards:', err);
+    }
+  };
+
+  const handleLogin = (did: string, handle: string) => {
+    setUser({ did, handle });
+    setShowLogin(false);
+    loadUserCards(did);
+  };
+
+  const handleLogout = async () => {
+    await authService.logout();
+    setUser(null);
+    setUserCards([]);
+  };
+
+  const handleDraw = async (isPaid: boolean = false) => {
+    if (!user) {
+      setShowLogin(true);
+      return;
+    }
+
+    setIsDrawing(true);
+    setError(null);
+
+    try {
+      const result = await cardApi.drawCard(user.did, isPaid);
+      setCurrentDraw(result);
+    } catch (err) {
+      setError('カードの抽選に失敗しました');
+      setIsDrawing(false);
+    }
+  };
+
+  const handleAnimationComplete = () => {
+    if (currentDraw) {
+      setUserCards([...userCards, currentDraw.card]);
+      setCurrentDraw(null);
+      setIsDrawing(false);
+    }
+  };
+
+  if (isLoading) {
+    return (
+      <div className="app">
+        <div className="loading">Loading...</div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="app">
+      <header className="app-header">
+        <h1>ai.card</h1>
+        <p>atprotoベースカードゲーム</p>
+        <div className="user-info">
+          {user ? (
+            <>
+              <span className="user-handle">@{user.handle}</span>
+              <button onClick={handleLogout} className="logout-button">
+                ログアウト
+              </button>
+            </>
+          ) : (
+            <button onClick={() => setShowLogin(true)} className="login-button">
+              ログイン
+            </button>
+          )}
+        </div>
+      </header>
+
+      <main className="app-main">
+        <section className="gacha-section">
+          <h2>カードを引く</h2>
+          <div className="gacha-buttons">
+            <button 
+              onClick={() => handleDraw(false)} 
+              disabled={isDrawing}
+              className="gacha-button"
+            >
+              通常ガチャ
+            </button>
+            <button 
+              onClick={() => handleDraw(true)} 
+              disabled={isDrawing}
+              className="gacha-button gacha-button-premium"
+            >
+              プレミアムガチャ
+            </button>
+          </div>
+          {error && <p className="error">{error}</p>}
+        </section>
+
+        <section className="collection-section">
+          <h2>コレクション</h2>
+          <div className="card-grid">
+            {userCards.map((card, index) => (
+              <Card key={index} card={card} />
+            ))}
+          </div>
+          {userCards.length === 0 && (
+            <p className="empty-message">
+              {user ? 'まだカードを持っていません' : 'ログインしてカードを集めよう'}
+            </p>
+          )}
+        </section>
+      </main>
+
+      {currentDraw && (
+        <GachaAnimation
+          card={currentDraw.card}
+          animationType={currentDraw.animation_type}
+          onComplete={handleAnimationComplete}
+        />
+      )}
+
+      {showLogin && (
+        <Login
+          onLogin={handleLogin}
+          onClose={() => setShowLogin(false)}
+        />
+      )}
+    </div>
+  );
+}
+
+export default App;
--- a/web/src/components/Card.tsx
+++ b/web/src/components/Card.tsx
@@ -0,0 +1,83 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+import { Card as CardType, CardRarity } from '../types/card';
+import '../styles/Card.css';
+
+interface CardProps {
+  card: CardType;
+  isRevealing?: boolean;
+}
+
+const CARD_INFO: Record<number, { name: string; color: string }> = {
+  0: { name: "アイ", color: "#fff700" },
+  1: { name: "夢幻", color: "#b19cd9" },
+  2: { name: "光彩", color: "#ffd700" },
+  3: { name: "中性子", color: "#cacfd2" },
+  4: { name: "太陽", color: "#ff6b35" },
+  5: { name: "夜空", color: "#1a1a2e" },
+  6: { name: "雪", color: "#e3f2fd" },
+  7: { name: "雷", color: "#ffd93d" },
+  8: { name: "超究", color: "#6c5ce7" },
+  9: { name: "剣", color: "#a8e6cf" },
+  10: { name: "破壊", color: "#ff4757" },
+  11: { name: "地球", color: "#4834d4" },
+  12: { name: "天の川", color: "#9c88ff" },
+  13: { name: "創造", color: "#00d2d3" },
+  14: { name: "超新星", color: "#ff9ff3" },
+  15: { name: "世界", color: "#54a0ff" },
+};
+
+export const Card: React.FC<CardProps> = ({ card, isRevealing = false }) => {
+  const cardInfo = CARD_INFO[card.id] || { name: "Unknown", color: "#666" };
+  
+  const getRarityClass = () => {
+    switch (card.status) {
+      case CardRarity.UNIQUE:
+        return 'card-unique';
+      case CardRarity.KIRA:
+        return 'card-kira';
+      case CardRarity.SUPER_RARE:
+        return 'card-super-rare';
+      case CardRarity.RARE:
+        return 'card-rare';
+      default:
+        return 'card-normal';
+    }
+  };
+
+  return (
+    <motion.div
+      className={`card ${getRarityClass()}`}
+      initial={isRevealing ? { rotateY: 180 } : {}}
+      animate={isRevealing ? { rotateY: 0 } : {}}
+      transition={{ duration: 0.8, type: "spring" }}
+      style={{
+        '--card-color': cardInfo.color,
+      } as React.CSSProperties}
+    >
+      <div className="card-inner">
+        <div className="card-header">
+          <span className="card-id">#{card.id}</span>
+          <span className="card-cp">CP: {card.cp}</span>
+        </div>
+        
+        <div className="card-content">
+          <h3 className="card-name">{cardInfo.name}</h3>
+          {card.is_unique && (
+            <div className="unique-badge">UNIQUE</div>
+          )}
+        </div>
+        
+        {card.skill && (
+          <div className="card-skill">
+            <p>{card.skill}</p>
+          </div>
+        )}
+        
+        <div className="card-footer">
+          <span className="card-rarity">{card.status.toUpperCase()}</span>
+        </div>
+      </div>
+    </motion.div>
+  );
+};
--- a/web/src/components/GachaAnimation.tsx
+++ b/web/src/components/GachaAnimation.tsx
@@ -0,0 +1,84 @@
+import React, { useState, useEffect } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { Card } from './Card';
+import { Card as CardType } from '../types/card';
+import '../styles/GachaAnimation.css';
+
+interface GachaAnimationProps {
+  card: CardType;
+  animationType: string;
+  onComplete: () => void;
+}
+
+export const GachaAnimation: React.FC<GachaAnimationProps> = ({
+  card,
+  animationType,
+  onComplete
+}) => {
+  const [phase, setPhase] = useState<'opening' | 'revealing' | 'complete'>('opening');
+
+  useEffect(() => {
+    const timer1 = setTimeout(() => setPhase('revealing'), 1500);
+    const timer2 = setTimeout(() => {
+      setPhase('complete');
+      onComplete();
+    }, 3000);
+
+    return () => {
+      clearTimeout(timer1);
+      clearTimeout(timer2);
+    };
+  }, [onComplete]);
+
+  const getEffectClass = () => {
+    switch (animationType) {
+      case 'unique':
+        return 'effect-unique';
+      case 'kira':
+        return 'effect-kira';
+      case 'rare':
+        return 'effect-rare';
+      default:
+        return 'effect-normal';
+    }
+  };
+
+  return (
+    <div className={`gacha-container ${getEffectClass()}`}>
+      <AnimatePresence mode="wait">
+        {phase === 'opening' && (
+          <motion.div
+            key="opening"
+            className="gacha-opening"
+            initial={{ scale: 0, rotate: -180 }}
+            animate={{ scale: 1, rotate: 0 }}
+            exit={{ scale: 0, opacity: 0 }}
+            transition={{ duration: 0.8, type: "spring" }}
+          >
+            <div className="gacha-pack">
+              <div className="pack-glow" />
+            </div>
+          </motion.div>
+        )}
+
+        {phase === 'revealing' && (
+          <motion.div
+            key="revealing"
+            initial={{ scale: 0 }}
+            animate={{ scale: 1 }}
+            transition={{ duration: 0.5, type: "spring" }}
+          >
+            <Card card={card} isRevealing={true} />
+          </motion.div>
+        )}
+      </AnimatePresence>
+
+      {animationType === 'unique' && (
+        <div className="unique-effect">
+          <div className="unique-particles" />
+          <div className="unique-burst" />
+        </div>
+      )}
+    </div>
+  );
+};
--- a/web/src/components/Login.tsx
+++ b/web/src/components/Login.tsx
@@ -0,0 +1,115 @@
+import React, { useState } from 'react';
+import { motion } from 'framer-motion';
+import { authService } from '../services/auth';
+import '../styles/Login.css';
+
+interface LoginProps {
+  onLogin: (did: string, handle: string) => void;
+  onClose: () => void;
+}
+
+export const Login: React.FC<LoginProps> = ({ onLogin, onClose }) => {
+  const [identifier, setIdentifier] = useState('');
+  const [password, setPassword] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError(null);
+    setIsLoading(true);
+
+    try {
+      const response = await authService.login(identifier, password);
+      onLogin(response.did, response.handle);
+    } catch (err) {
+      setError('ログインに失敗しました。認証情報を確認してください。');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <motion.div
+      className="login-overlay"
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 1 }}
+      exit={{ opacity: 0 }}
+      onClick={onClose}
+    >
+      <motion.div
+        className="login-modal"
+        initial={{ scale: 0.9, opacity: 0 }}
+        animate={{ scale: 1, opacity: 1 }}
+        transition={{ type: "spring", duration: 0.5 }}
+        onClick={(e) => e.stopPropagation()}
+      >
+        <h2>atprotoログイン</h2>
+        
+        <form onSubmit={handleSubmit}>
+          <div className="form-group">
+            <label htmlFor="identifier">ハンドル または DID</label>
+            <input
+              id="identifier"
+              type="text"
+              value={identifier}
+              onChange={(e) => setIdentifier(e.target.value)}
+              placeholder="your.handle または did:plc:..."
+              required
+              disabled={isLoading}
+            />
+          </div>
+
+          <div className="form-group">
+            <label htmlFor="password">アプリパスワード</label>
+            <input
+              id="password"
+              type="password"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              placeholder="アプリパスワード"
+              required
+              disabled={isLoading}
+            />
+            <small>
+              メインパスワードではなく、
+              <a href="https://bsky.app/settings/app-passwords" target="_blank" rel="noopener noreferrer">
+                アプリパスワード
+              </a>
+              を使用してください
+            </small>
+          </div>
+
+          {error && (
+            <div className="error-message">{error}</div>
+          )}
+
+          <div className="button-group">
+            <button
+              type="submit"
+              className="login-button"
+              disabled={isLoading}
+            >
+              {isLoading ? 'ログイン中...' : 'ログイン'}
+            </button>
+            <button
+              type="button"
+              className="cancel-button"
+              onClick={onClose}
+              disabled={isLoading}
+            >
+              キャンセル
+            </button>
+          </div>
+        </form>
+
+        <div className="login-info">
+          <p>
+            ai.cardはatprotoアカウントを使用します。
+            データはあなたのPDSに保存されます。
+          </p>
+        </div>
+      </motion.div>
+    </motion.div>
+  );
+};
--- a/web/src/main.tsx
+++ b/web/src/main.tsx
@@ -0,0 +1,9 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from './App'
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+)
--- a/web/src/services/api.ts
+++ b/web/src/services/api.ts
@@ -0,0 +1,31 @@
+import axios from 'axios';
+import { CardDrawResult } from '../types/card';
+
+const API_BASE = '/api/v1';
+
+const api = axios.create({
+  baseURL: API_BASE,
+  headers: {
+    'Content-Type': 'application/json',
+  },
+});
+
+export const cardApi = {
+  drawCard: async (userDid: string, isPaid: boolean = false): Promise<CardDrawResult> => {
+    const response = await api.post('/cards/draw', {
+      user_did: userDid,
+      is_paid: isPaid,
+    });
+    return response.data;
+  },
+
+  getUserCards: async (userDid: string) => {
+    const response = await api.get(`/cards/user/${userDid}`);
+    return response.data;
+  },
+
+  getUniqueCards: async () => {
+    const response = await api.get('/cards/unique');
+    return response.data;
+  },
+};
--- a/web/src/services/auth.ts
+++ b/web/src/services/auth.ts
@@ -0,0 +1,107 @@
+import axios from 'axios';
+
+const API_BASE = '/api/v1';
+
+interface LoginRequest {
+  identifier: string;  // Handle or DID
+  password: string;    // App password
+}
+
+interface LoginResponse {
+  access_token: string;
+  token_type: string;
+  did: string;
+  handle: string;
+}
+
+interface User {
+  did: string;
+  handle: string;
+}
+
+class AuthService {
+  private token: string | null = null;
+  private user: User | null = null;
+
+  constructor() {
+    // Load token from localStorage
+    this.token = localStorage.getItem('ai_card_token');
+    
+    // Set default auth header if token exists
+    if (this.token) {
+      axios.defaults.headers.common['Authorization'] = `Bearer ${this.token}`;
+    }
+  }
+
+  async login(identifier: string, password: string): Promise<LoginResponse> {
+    try {
+      const response = await axios.post<LoginResponse>(`${API_BASE}/auth/login`, {
+        identifier,
+        password
+      });
+
+      const { access_token, did, handle } = response.data;
+
+      // Store token
+      this.token = access_token;
+      localStorage.setItem('ai_card_token', access_token);
+      
+      // Set auth header
+      axios.defaults.headers.common['Authorization'] = `Bearer ${access_token}`;
+
+      // Store user info
+      this.user = { did, handle };
+
+      return response.data;
+    } catch (error) {
+      throw new Error('Login failed');
+    }
+  }
+
+  async logout(): Promise<void> {
+    try {
+      await axios.post(`${API_BASE}/auth/logout`);
+    } catch (error) {
+      // Ignore errors
+    }
+
+    // Clear token
+    this.token = null;
+    this.user = null;
+    localStorage.removeItem('ai_card_token');
+    delete axios.defaults.headers.common['Authorization'];
+  }
+
+  async verify(): Promise<User | null> {
+    if (!this.token) {
+      return null;
+    }
+
+    try {
+      const response = await axios.get<User & { valid: boolean }>(`${API_BASE}/auth/verify`);
+      if (response.data.valid) {
+        this.user = {
+          did: response.data.did,
+          handle: response.data.handle
+        };
+        return this.user;
+      }
+    } catch (error) {
+      // Token is invalid
+      this.logout();
+    }
+
+    return null;
+  }
+
+  getUser(): User | null {
+    return this.user;
+  }
+
+  isAuthenticated(): boolean {
+    return this.token !== null;
+  }
+}
+
+export const authService = new AuthService();
+export type { User, LoginRequest, LoginResponse };
--- a/web/src/styles/Card.css
+++ b/web/src/styles/Card.css
@@ -0,0 +1,151 @@
+.card {
+  width: 250px;
+  height: 350px;
+  border-radius: 12px;
+  background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
+  border: 2px solid #333;
+  overflow: hidden;
+  position: relative;
+  cursor: pointer;
+  transition: transform 0.3s ease;
+}
+
+.card:hover {
+  transform: translateY(-5px);
+}
+
+.card-inner {
+  padding: 20px;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  z-index: 1;
+}
+
+/* Rarity effects */
+.card-normal {
+  border-color: #666;
+}
+
+.card-rare {
+  border-color: #4a90e2;
+  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
+}
+
+.card-super-rare {
+  border-color: #9c27b0;
+  background: linear-gradient(135deg, #2d1b69 0%, #0f0c29 100%);
+}
+
+.card-kira {
+  border-color: #ffd700;
+  background: linear-gradient(135deg, #232526 0%, #414345 100%);
+  position: relative;
+}
+
+.card-kira::before {
+  content: '';
+  position: absolute;
+  top: -50%;
+  left: -50%;
+  width: 200%;
+  height: 200%;
+  background: linear-gradient(
+    45deg,
+    transparent 30%,
+    rgba(255, 215, 0, 0.1) 50%,
+    transparent 70%
+  );
+  animation: shimmer 3s infinite;
+}
+
+.card-unique {
+  border-color: #ff00ff;
+  background: linear-gradient(135deg, #000000 0%, #1a0033 100%);
+  box-shadow: 0 0 30px rgba(255, 0, 255, 0.5);
+}
+
+.card-unique::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: radial-gradient(
+    circle at center,
+    transparent 0%,
+    rgba(255, 0, 255, 0.2) 100%
+  );
+  animation: pulse 2s infinite;
+}
+
+/* Card content */
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  font-size: 14px;
+  color: #888;
+  margin-bottom: 20px;
+}
+
+.card-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.card-name {
+  font-size: 28px;
+  margin: 0;
+  color: var(--card-color, #fff);
+  text-align: center;
+  font-weight: bold;
+}
+
+.unique-badge {
+  margin-top: 10px;
+  padding: 5px 15px;
+  background: linear-gradient(90deg, #ff00ff, #00ffff);
+  border-radius: 20px;
+  font-size: 12px;
+  font-weight: bold;
+  animation: glow 2s ease-in-out infinite;
+}
+
+.card-skill {
+  margin-top: 20px;
+  padding: 10px;
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 8px;
+  font-size: 12px;
+}
+
+.card-footer {
+  text-align: center;
+  font-size: 12px;
+  color: #666;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+}
+
+/* Animations */
+@keyframes shimmer {
+  0% { transform: translateX(-100%); }
+  100% { transform: translateX(100%); }
+}
+
+@keyframes pulse {
+  0% { opacity: 0.5; }
+  50% { opacity: 1; }
+  100% { opacity: 0.5; }
+}
+
+@keyframes glow {
+  0% { box-shadow: 0 0 5px rgba(255, 0, 255, 0.5); }
+  50% { box-shadow: 0 0 20px rgba(255, 0, 255, 0.8); }
+  100% { box-shadow: 0 0 5px rgba(255, 0, 255, 0.5); }
+}
--- a/web/src/styles/GachaAnimation.css
+++ b/web/src/styles/GachaAnimation.css
@@ -0,0 +1,120 @@
+.gacha-container {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(0, 0, 0, 0.9);
+  z-index: 1000;
+}
+
+.gacha-opening {
+  position: relative;
+}
+
+.gacha-pack {
+  width: 200px;
+  height: 280px;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  border-radius: 16px;
+  position: relative;
+  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
+}
+
+.pack-glow {
+  position: absolute;
+  top: -20px;
+  left: -20px;
+  right: -20px;
+  bottom: -20px;
+  background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, transparent 70%);
+  animation: glow-pulse 2s ease-in-out infinite;
+}
+
+/* Effect variations */
+.effect-normal {
+  background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
+}
+
+.effect-rare {
+  background: radial-gradient(circle, rgba(74, 144, 226, 0.2) 0%, transparent 50%);
+}
+
+.effect-kira {
+  background: radial-gradient(circle, rgba(255, 215, 0, 0.3) 0%, transparent 50%);
+}
+
+.effect-kira::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><polygon points="50,0 60,40 100,50 60,60 50,100 40,60 0,50 40,40" fill="rgba(255,215,0,0.1)"/></svg>');
+  background-size: 50px 50px;
+  animation: sparkle 3s linear infinite;
+}
+
+.effect-unique {
+  background: radial-gradient(circle, rgba(255, 0, 255, 0.4) 0%, transparent 50%);
+  overflow: hidden;
+}
+
+.unique-effect {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  pointer-events: none;
+}
+
+.unique-particles {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-image: 
+    radial-gradient(circle, #ff00ff 1px, transparent 1px),
+    radial-gradient(circle, #00ffff 1px, transparent 1px);
+  background-size: 50px 50px, 30px 30px;
+  background-position: 0 0, 25px 25px;
+  animation: particle-float 20s linear infinite;
+}
+
+.unique-burst {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 300px;
+  height: 300px;
+  transform: translate(-50%, -50%);
+  background: radial-gradient(circle, rgba(255, 0, 255, 0.8) 0%, transparent 70%);
+  animation: burst 1s ease-out;
+}
+
+/* Animations */
+@keyframes glow-pulse {
+  0%, 100% { opacity: 0.5; transform: scale(1); }
+  50% { opacity: 1; transform: scale(1.1); }
+}
+
+@keyframes sparkle {
+  0% { transform: translateY(0) rotate(0deg); }
+  100% { transform: translateY(-100vh) rotate(360deg); }
+}
+
+@keyframes particle-float {
+  0% { transform: translate(0, 0); }
+  100% { transform: translate(-50px, -100px); }
+}
+
+@keyframes burst {
+  0% { transform: translate(-50%, -50%) scale(0); opacity: 1; }
+  100% { transform: translate(-50%, -50%) scale(3); opacity: 0; }
+}
--- a/web/src/styles/Login.css
+++ b/web/src/styles/Login.css
@@ -0,0 +1,152 @@
+.login-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.8);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+  backdrop-filter: blur(5px);
+}
+
+.login-modal {
+  background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
+  border: 1px solid #444;
+  border-radius: 16px;
+  padding: 40px;
+  max-width: 400px;
+  width: 90%;
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
+}
+
+.login-modal h2 {
+  margin: 0 0 30px 0;
+  font-size: 28px;
+  text-align: center;
+  background: linear-gradient(90deg, #fff700 0%, #ff00ff 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+.form-group {
+  margin-bottom: 20px;
+}
+
+.form-group label {
+  display: block;
+  margin-bottom: 8px;
+  color: #ccc;
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.form-group input {
+  width: 100%;
+  padding: 12px 16px;
+  background: rgba(255, 255, 255, 0.1);
+  border: 1px solid #444;
+  border-radius: 8px;
+  color: white;
+  font-size: 16px;
+  transition: all 0.3s ease;
+}
+
+.form-group input:focus {
+  outline: none;
+  border-color: #fff700;
+  background: rgba(255, 255, 255, 0.15);
+  box-shadow: 0 0 0 2px rgba(255, 247, 0, 0.2);
+}
+
+.form-group input:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.form-group small {
+  display: block;
+  margin-top: 6px;
+  color: #888;
+  font-size: 12px;
+}
+
+.form-group small a {
+  color: #fff700;
+  text-decoration: none;
+}
+
+.form-group small a:hover {
+  text-decoration: underline;
+}
+
+.error-message {
+  background: rgba(255, 71, 87, 0.1);
+  border: 1px solid rgba(255, 71, 87, 0.3);
+  border-radius: 8px;
+  padding: 12px;
+  margin-bottom: 20px;
+  color: #ff4757;
+  font-size: 14px;
+}
+
+.button-group {
+  display: flex;
+  gap: 12px;
+  margin-top: 30px;
+}
+
+.login-button,
+.cancel-button {
+  flex: 1;
+  padding: 14px 24px;
+  border: none;
+  border-radius: 8px;
+  font-size: 16px;
+  font-weight: bold;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.login-button {
+  background: linear-gradient(135deg, #fff700 0%, #ffd700 100%);
+  color: #000;
+}
+
+.login-button:hover:not(:disabled) {
+  transform: translateY(-2px);
+  box-shadow: 0 6px 20px rgba(255, 247, 0, 0.4);
+}
+
+.login-button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.cancel-button {
+  background: rgba(255, 255, 255, 0.1);
+  color: white;
+  border: 1px solid #444;
+}
+
+.cancel-button:hover:not(:disabled) {
+  background: rgba(255, 255, 255, 0.15);
+  border-color: #666;
+}
+
+.login-info {
+  margin-top: 30px;
+  padding-top: 20px;
+  border-top: 1px solid #333;
+  text-align: center;
+}
+
+.login-info p {
+  color: #888;
+  font-size: 14px;
+  line-height: 1.6;
+  margin: 0;
+}
--- a/web/src/types/card.ts
+++ b/web/src/types/card.ts
@@ -0,0 +1,24 @@
+export enum CardRarity {
+  NORMAL = "normal",
+  RARE = "rare",
+  SUPER_RARE = "super_rare",
+  KIRA = "kira",
+  UNIQUE = "unique"
+}
+
+export interface Card {
+  id: number;
+  cp: number;
+  status: CardRarity;
+  skill?: string;
+  owner_did: string;
+  obtained_at: string;
+  is_unique: boolean;
+  unique_id?: string;
+}
+
+export interface CardDrawResult {
+  card: Card;
+  is_new: boolean;
+  animation_type: string;
+}
--- a/web/tsconfig.json
+++ b/web/tsconfig.json
@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}
--- a/web/tsconfig.node.json
+++ b/web/tsconfig.node.json
@@ -0,0 +1,11 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true,
+    "strict": true
+  },
+  "include": ["vite.config.ts"]
+}
--- a/web/vite.config.ts
+++ b/web/vite.config.ts
@@ -0,0 +1,15 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+export default defineConfig({
+  plugins: [react()],
+  server: {
+    port: 3000,
+    proxy: {
+      '/api': {
+        target: 'http://localhost:8000',
+        changeOrigin: true,
+      }
+    }
+  }
+})