fix api web

web/src/components/Card.tsx

@@ -6,6 +6,7 @@ import '../styles/Card.css';
 interface CardProps {
   card: CardType;
   isRevealing?: boolean;
+  detailed?: boolean;
 }
 
 const CARD_INFO: Record<number, { name: string; color: string }> = {
@@ -27,8 +28,9 @@ const CARD_INFO: Record<number, { name: string; color: string }> = {
   15: { name: "世界", color: "#54a0ff" },
 };
 
-export const Card: React.FC<CardProps> = ({ card, isRevealing = false }) => {
+export const Card: React.FC<CardProps> = ({ card, isRevealing = false, detailed = false }) => {
   const cardInfo = CARD_INFO[card.id] || { name: "Unknown", color: "#666" };
+  const imageUrl = `https://git.syui.ai/ai/card/raw/branch/main/img/${card.id}.webp`;
   
   const getRarityClass = () => {
     switch (card.status) {
@@ -45,6 +47,30 @@ export const Card: React.FC<CardProps> = ({ card, isRevealing = false }) => {
     }
   };
 
+  if (!detailed) {
+    // Simple view - only image and frame
+    return (
+      <motion.div
+        className={`card card-simple ${getRarityClass()}`}
+        initial={isRevealing ? { rotateY: 180 } : {}}
+        animate={isRevealing ? { rotateY: 0 } : {}}
+        transition={{ duration: 0.8, type: "spring" }}
+      >
+        <div className="card-frame">
+          <img 
+            src={imageUrl} 
+            alt={cardInfo.name}
+            className="card-image-simple"
+            onError={(e) => {
+              (e.target as HTMLImageElement).style.display = 'none';
+            }}
+          />
+        </div>
+      </motion.div>
+    );
+  }
+
+  // Detailed view - all information
   return (
     <motion.div
       className={`card ${getRarityClass()}`}
@@ -61,6 +87,17 @@ export const Card: React.FC<CardProps> = ({ card, isRevealing = false }) => {
           <span className="card-cp">CP: {card.cp}</span>
         </div>
         
+        <div className="card-image-container">
+          <img 
+            src={imageUrl} 
+            alt={cardInfo.name}
+            className="card-image"
+            onError={(e) => {
+              (e.target as HTMLImageElement).style.display = 'none';
+            }}
+          />
+        </div>
+        
         <div className="card-content">
           <h3 className="card-name">{cardInfo.name}</h3>
           {card.is_unique && (