refactoring ui into separate components, updating ui, adding color scheme

apps/web/src/components/game/QuestionCard.tsx

@@ -0,0 +1,66 @@
+import type { GameQuestion, AnswerResult } from "@glossa/shared";
+import { OptionButton } from "./OptionButton";
+
+type QuestionCardProps = {
+  question: GameQuestion;
+  questionNumber: number;
+  totalQuestions: number;
+  currentResult: AnswerResult | null;
+  onAnswer: (optionId: number) => void;
+  onNext: () => void;
+};
+
+export const QuestionCard = ({
+  question,
+  questionNumber,
+  totalQuestions,
+  currentResult,
+  onAnswer,
+  onNext,
+}: QuestionCardProps) => {
+  const getOptionState = (optionId: number) => {
+    if (!currentResult) return "idle" as const;
+    if (optionId === currentResult.correctOptionId) return "correct" as const;
+    if (optionId === currentResult.selectedOptionId) return "wrong" as const;
+    return "disabled" as const;
+  };
+
+  return (
+    <div className="flex flex-col items-center gap-6 w-full max-w-md mx-auto">
+      <div className="flex items-center gap-2 text-sm font-medium text-purple-400">
+        <span>
+          {questionNumber} / {totalQuestions}
+        </span>
+      </div>
+
+      <div className="bg-white rounded-3xl shadow-lg p-8 w-full text-center">
+        <h2 className="text-3xl font-bold text-purple-900 mb-2">
+          {question.prompt}
+        </h2>
+        {question.gloss && (
+          <p className="text-sm text-gray-400 italic">{question.gloss}</p>
+        )}
+      </div>
+
+      <div className="flex flex-col gap-3 w-full">
+        {question.options.map((option) => (
+          <OptionButton
+            key={option.optionId}
+            text={option.text}
+            state={getOptionState(option.optionId)}
+            onSelect={() => onAnswer(option.optionId)}
+          />
+        ))}
+      </div>
+
+      {currentResult && (
+        <button
+          onClick={onNext}
+          className="mt-2 py-3 px-10 rounded-2xl text-lg font-bold bg-purple-600 text-white border-b-4 border-purple-800 hover:bg-purple-500 hover:-translate-y-0.5 active:translate-y-0 active:border-b-2 transition-all duration-200 cursor-pointer"
+        >
+          {questionNumber === totalQuestions ? "See Results" : "Next"}
+        </button>
+      )}
+    </div>
+  );
+};