From c0cba2f4b93032ede942856109ce87f6ac30d956 Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Sun, 15 Dec 2024 15:17:19 +0000
Subject: [PATCH] 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 | 7 +++++--
 src/pages/Index.tsx                | 3 ++-
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/components/game/ChoiceCard.tsx b/src/components/game/ChoiceCard.tsx
index 5474e8f..93e6623 100644
--- a/src/components/game/ChoiceCard.tsx
+++ b/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>
   );
-}; 
\ No newline at end of file
+};
\ No newline at end of file
diff --git a/src/pages/Index.tsx b/src/pages/Index.tsx
index c0561b2..8978ded 100644
--- a/src/pages/Index.tsx
+++ b/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>