Add option labels to choices

Prepend each stratagem choice with "Option 1", "Option 2", etc., to clearly indicate the available options for users. This change enhances the user experience by making the choices more explicit.
[skip gpt_engineer]

src/components/game/ChoiceCard.tsx

@@ -10,13 +10,15 @@ interface ChoiceCardProps {
   previousChoices: string[];
   onClick: () => void;
   disabled?: boolean;
+  optionNumber: number;
 }
 
 export const ChoiceCard: React.FC<ChoiceCardProps> = ({ 
   choice, 
   previousChoices, 
   onClick,
-  disabled = false 
+  disabled = false,
+  optionNumber
 }) => {
   const strengtheningChoices = choice.strengthenedBy?.filter(c => previousChoices.includes(c)) || [];
   const weakeningChoices = choice.weakenedBy?.filter(c => previousChoices.includes(c)) || [];
@@ -45,6 +47,7 @@ export const ChoiceCard: React.FC<ChoiceCardProps> = ({
       <CardHeader className="space-y-1">
         <div className="flex justify-between items-start">
           <CardTitle className="text-lg">
+            <span className="text-yellow-500 mr-2">Option {optionNumber}:</span>
             {choice.text}
           </CardTitle>
           <div className="flex gap-2">
@@ -112,4 +115,4 @@ export const ChoiceCard: React.FC<ChoiceCardProps> = ({
       </CardContent>
     </Card>
   );
-}; 
+};

src/pages/Index.tsx

@@ -395,13 +395,14 @@ const Index = () => {
               </div>
             </CardHeader>
             <CardContent className="space-y-4">
-              {currentStageData.choices.map((choice) => (
+              {currentStageData.choices.map((choice, index) => (
                 <ChoiceCard
                   key={choice.id}
                   choice={choice}
                   previousChoices={previousChoices}
                   onClick={() => handleStrategyClick(choice)}
                   disabled={showingResult || isLoading}
+                  optionNumber={index + 1}
                 />
               ))}
             </CardContent>