add commander color identity validation and improve deck validation logic

dev-dist/sw.js

@@ -82,7 +82,7 @@ define(['./workbox-ca84f546'], (function (workbox) { 'use strict';
     "revision": "3ca0b8505b4bec776b69afdba2768812"
   }, {
     "url": "index.html",
-    "revision": "0.bbuf8ja4298"
+    "revision": "0.ufhads5pjvs"
   }], {});
   workbox.cleanupOutdatedCaches();
   workbox.registerRoute(new workbox.NavigationRoute(workbox.createHandlerBoundToURL("index.html"), {

src/components/DeckEditor.tsx

@@ -42,6 +42,7 @@ export default function DeckEditor({ deckId, onClose }: DeckEditorProps) {
         const cards = cardEntities.map(entity => ({
           card: scryfallCards.find(c => c.id === entity.card_id) as Card,
           quantity: entity.quantity,
+          is_commander: entity.is_commander,
         }));
 
         setDeck({

src/components/DeckManager.tsx

@@ -442,11 +442,8 @@ export default function DeckManager({ initialDeck, onSave }: DeckManagerProps) {
 
   const validation = validateDeck(currentDeck);
 
-  // Commander color identity validation
+  // Commander color identity validation (for land suggestions)
   const commanderColors = deckFormat === 'commander' ? getCommanderColors(commander) : [];
-  const invalidCards = deckFormat === 'commander' && commander
-    ? selectedCards.filter(({ card }) => !isCardValidForCommander(card, commanderColors))
-    : [];
 
   const deckSize = selectedCards.reduce((acc, curr) => acc + curr.quantity, 0);
   const {
@@ -829,26 +826,6 @@ export default function DeckManager({ initialDeck, onSave }: DeckManagerProps) {
                 </div>
               )}
 
-              {/* Commander Color Identity Warning */}
-              {deckFormat === 'commander' && commander && invalidCards.length > 0 && (
-                <div className="bg-yellow-500/10 border border-yellow-500 rounded-lg p-3">
-                  <div className="flex items-start gap-2">
-                    <AlertCircle className="text-yellow-500 flex-shrink-0 mt-0.5" size={16} />
-                    <div className="text-sm">
-                      <p className="text-yellow-400 font-semibold mb-1">Commander Color Identity Warning</p>
-                      <p className="text-yellow-300 text-xs mb-2">
-                        The following cards don't match your commander's color identity:
-                      </p>
-                      <ul className="list-disc list-inside text-yellow-300 text-xs">
-                        {invalidCards.map(({ card }) => (
-                          <li key={card.id}>{card.name}</li>
-                        ))}
-                      </ul>
-                    </div>
-                  </div>
-                </div>
-              )}
-
               <div className="space-y-2">
                 <div className="flex items-center justify-between mb-4">
                   <h3 className="font-bold text-xl">

src/utils/deckValidation.ts

@@ -1,10 +1,23 @@
-import { Deck } from '../types';
+import { Card, Deck } from '../types';
 
 interface DeckValidation {
   isValid: boolean;
   errors: string[];
 }
 
+// Helper function to get commander color identity
+function getCommanderColors(commander: Card | null): string[] {
+  if (!commander) return [];
+  return commander.colors || [];
+}
+
+// Helper function to check if a card's colors are valid for the commander
+function isCardValidForCommander(card: Card, commanderColors: string[]): boolean {
+  if (commanderColors.length === 0) return true;
+  const cardColors = card.colors || [];
+  return cardColors.every(color => commanderColors.includes(color));
+}
+
 const FORMAT_RULES = {
   standard: {
     minCards: 60,
@@ -74,6 +87,25 @@ export function validateDeck(deck: Deck): DeckValidation {
     }
   });
 
+  // Commander-specific validations
+  if (deck.format === 'commander') {
+    const commander = deck.cards.find(card => card.is_commander)?.card;
+
+    if (!commander) {
+      errors.push('Commander deck must have a commander');
+    } else {
+      // Check commander color identity
+      const commanderColors = getCommanderColors(commander);
+      const invalidCards = deck.cards.filter(({ card, is_commander }) =>
+        !is_commander && !isCardValidForCommander(card, commanderColors)
+      );
+
+      if (invalidCards.length > 0) {
+        errors.push(`Some cards don't match commander's color identity`);
+      }
+    }
+  }
+
   return {
     isValid: errors.length === 0,
     errors,