Merz leck Eier: MTG troll site

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

app/CardView.tsx

@@ -0,0 +1,40 @@
+import type { Card } from "./cards";
+
+function Symbol({ s }: { s: string }) {
+  return <span className={`mana mana-${s === "€" ? "E" : s}`}>{s}</span>;
+}
+
+function renderText(line: string) {
+  return line.split(/(\{[^}]+\})/g).map((part, i) =>
+    part.startsWith("{") ? <Symbol key={i} s={part.slice(1, -1)} /> : part,
+  );
+}
+
+export function CardView({ card, big = false }: { card: Card; big?: boolean }) {
+  return (
+    <div className={`card c-${card.color} ${big ? "big" : ""}`}>
+      <div className="card-inner">
+        <div className="bar title">
+          <span>{card.name}</span>
+          <span className="cost">
+            {card.cost.map((c, i) => (
+              <Symbol key={i} s={c} />
+            ))}
+          </span>
+        </div>
+        <div className="art">{card.art}</div>
+        <div className="bar type">
+          <span>{card.type}</span>
+          <span className={`rarity r-${card.rarity}`}>◆</span>
+        </div>
+        <div className="textbox">
+          {card.text.map((t, i) => (
+            <p key={i}>{renderText(t)}</p>
+          ))}
+          {card.flavor && <p className="flavor">{card.flavor}</p>}
+        </div>
+        {card.pt && <div className="pt">{card.pt}</div>}
+      </div>
+    </div>
+  );
+}