fix: Use type for type imports and literal types

Refactor `types.ts` to use `as const` for `GamePhase` and explicitly define the `GamePhase` type. This improves type safety and clarity. Additionally, update imports in other files to use `type` for type-only imports, further enhancing type safety and preventing potential runtime issues.

components/HostView.tsx

@@ -1,8 +1,9 @@
 import React, { useState } from 'react';
 import { useGame } from '../context/GameContext';
-import { GamePhase, Game, Question } from '../types';
+import { GamePhase } from '../types';
+import type { Question } from '../types';
 import { Soundboard } from './Soundboard';
-import { Play, SkipForward, CheckCircle, XCircle, Users, Library, Sparkles, Plus, Trash2, Edit, Save, ArrowLeft, Upload, RefreshCw, Image as ImageIcon, List, Trophy, RotateCcw } from 'lucide-react';
+import { Play, SkipForward, CheckCircle, XCircle, Users, Library, Sparkles, Plus, Trash2, Edit, ArrowLeft, Upload, RefreshCw, Image as ImageIcon, List, Trophy, RotateCcw } from 'lucide-react';
 import { generateQuestions } from '../services/geminiService';
 
 export const HostView: React.FC = () => {

components/PlayerView.tsx

@@ -1,7 +1,8 @@
 import React, { useState, useEffect } from 'react';
 import { useGame } from '../context/GameContext';
 import { GamePhase } from '../types';
-import { Trophy, Zap, Target, LogOut, Image as ImageIcon } from 'lucide-react';
+import type { Player } from '../types';
+import { Trophy, Zap, LogOut } from 'lucide-react';
 
 export const PlayerView: React.FC = () => {
   const { gameState, players, teams, currentPlayerId, addPlayer, removePlayer, buzzQueue, handleBuzz, questions } = useGame();
@@ -149,7 +150,7 @@ export const PlayerView: React.FC = () => {
   if (gameState.phase === GamePhase.FINAL_STATS) {
       const winningTeam = sortedTeams[0];
       
-      let fastestPlayer = null;
+      let fastestPlayer: Player | null = null;
       let fastestTime = Infinity;
       players.forEach(p => {
           if (p.stats.bestReactionTime && p.stats.bestReactionTime < fastestTime) {
@@ -188,7 +189,7 @@ export const PlayerView: React.FC = () => {
                         </div>
                         <div>
                             <div className="text-slate-400 text-xs font-bold uppercase">Fastest Buzzer</div>
-                            <div className="text-white font-bold text-lg">{fastestPlayer.name}</div>
+                            <div className="text-white font-bold text-lg">{(fastestPlayer as Player).name}</div>
                             <div className="text-blue-400 font-mono text-sm">{(fastestTime / 1000).toFixed(2)}s reaction</div>
                         </div>
                     </div>
@@ -227,6 +228,8 @@ export const PlayerView: React.FC = () => {
       );
   }
 
+  const isGameActive = gameState.phase !== GamePhase.LOBBY && gameState.phase !== GamePhase.LEADERBOARD;
+
   // --- REGULAR GAMEPLAY UI ---
   return (
     <div className="h-full bg-slate-800 flex flex-col overflow-y-auto">
@@ -259,7 +262,7 @@ export const PlayerView: React.FC = () => {
       <div className="flex-1 flex flex-col items-center justify-center p-6 relative">
         
         {/* Dynamic Question Text & Media on Mobile */}
-        {gameState.phase !== GamePhase.LOBBY && gameState.phase !== GamePhase.LEADERBOARD && gameState.phase !== GamePhase.FINAL_STATS && currentQ && (
+        {isGameActive && currentQ && (
            <div className="absolute top-4 left-4 right-4 text-center">
               <p className="text-slate-300 text-sm uppercase tracking-widest mb-2">Current Question</p>
               

components/SpectatorView.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { useGame } from '../context/GameContext';
 import { GamePhase } from '../types';
+import type { Player } from '../types';
 import { BarChart, Bar, XAxis, YAxis, Tooltip, ResponsiveContainer, Cell } from 'recharts';
 import { Trophy, Zap, Users } from 'lucide-react';
 
@@ -126,7 +127,7 @@ export const SpectatorView: React.FC = () => {
                     <YAxis dataKey="name" type="category" width={150} tick={{fill: 'white', fontSize: 20}} />
                     <Tooltip cursor={{fill: 'transparent'}} contentStyle={{backgroundColor: '#1e293b', color: '#fff', border: 'none'}} />
                     <Bar dataKey="score" radius={[0, 10, 10, 0]}>
-                      {leaderboardData.map((entry, index) => (
+                      {leaderboardData.map((_entry, index) => (
                         <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
                       ))}
                     </Bar>
@@ -145,7 +146,7 @@ export const SpectatorView: React.FC = () => {
         const topPlayers = [...players].sort((a,b) => b.score - a.score).slice(0, 5);
 
         // Fastest Buzzer Calculation
-        let fastestPlayer = null;
+        let fastestPlayer: Player | null = null;
         let fastestTime = Infinity;
         players.forEach(p => {
             if (p.stats.bestReactionTime && p.stats.bestReactionTime < fastestTime) {
@@ -202,7 +203,7 @@ export const SpectatorView: React.FC = () => {
                              </div>
                              <div className="text-left">
                                  <div className="text-blue-300 font-bold uppercase tracking-wider text-sm">Fastest Finger</div>
-                                 <div className="text-2xl font-bold text-white">{fastestPlayer?.name || '-'}</div>
+                                 <div className="text-2xl font-bold text-white">{(fastestPlayer as Player)?.name || '-'}</div>
                              </div>
                          </div>
                          <div className="text-4xl font-mono font-bold text-blue-400">

context/GameContext.tsx

@@ -1,5 +1,6 @@
-import React, { createContext, useContext, useState, useEffect, useCallback } from 'react';
+import React, { createContext, useContext, useState, useEffect } from 'react';
-import { GamePhase, Player, Team, Question, BuzzerLog, GameState, Game } from '../types';
+import { GamePhase } from '../types';
+import type { Player, Team, Question, BuzzerLog, GameState, Game } from '../types';
 
 interface GameContextType {
   // State

services/geminiService.ts

@@ -1,5 +1,5 @@
 import { GoogleGenAI, Type } from "@google/genai";
-import { Question } from "../types";
+import type { Question } from "../types";
 
 const generateQuestions = async (topic: string, count: number = 5): Promise<Question[]> => {
   // Use process.env.API_KEY as per guidelines.

types.ts

@@ -1,13 +1,15 @@
-export enum GamePhase {
+export const GamePhase = {
-  LOBBY = 'LOBBY',
+  LOBBY: 'LOBBY',
-  COUNTDOWN = 'COUNTDOWN',
+  COUNTDOWN: 'COUNTDOWN',
-  QUESTION_DISPLAY = 'QUESTION_DISPLAY',
+  QUESTION_DISPLAY: 'QUESTION_DISPLAY',
-  BUZZER_OPEN = 'BUZZER_OPEN',
+  BUZZER_OPEN: 'BUZZER_OPEN',
-  ADJUDICATION = 'ADJUDICATION',
+  ADJUDICATION: 'ADJUDICATION',
-  ANSWER_REVEAL = 'ANSWER_REVEAL',
+  ANSWER_REVEAL: 'ANSWER_REVEAL',
-  LEADERBOARD = 'LEADERBOARD',
+  LEADERBOARD: 'LEADERBOARD',
-  FINAL_STATS = 'FINAL_STATS'
+  FINAL_STATS: 'FINAL_STATS'
-}
+} as const;
+
+export type GamePhase = typeof GamePhase[keyof typeof GamePhase];
 
 export interface PlayerStats {
   correctAnswers: number;