oops

Add mobile-responsive admin view and disable dark mode
Improve mobile experience for admin interface with responsive layouts that stack on smaller screens, hamburger menu navigation, and force light mode across the app. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-18 16:22:43 -05:00 · 2026-01-18 14:49:03 -05:00 · 2026-01-18 13:01:11 -05:00
13 changed files with 1033 additions and 317 deletions
--- a/backend/models.py
+++ b/backend/models.py
@@ -113,13 +113,16 @@ class Game(db.Model):
    is_active = db.Column(db.Boolean, default=False)  # Only one game active at a time
    current_question_index = db.Column(db.Integer, default=0)  # Track current question
    is_template = db.Column(db.Boolean, default=False)  # Mark as reusable template
+    current_turn_team_id = db.Column(db.Integer, db.ForeignKey('teams.id'), nullable=True)  # Track whose turn it is

    # Relationships
-    teams = db.relationship('Team', back_populates='game', cascade='all, delete-orphan')
+    teams = db.relationship('Team', back_populates='game', cascade='all, delete-orphan',
+                           foreign_keys='Team.game_id')
    game_questions = db.relationship('GameQuestion', back_populates='game',
                                     cascade='all, delete-orphan',
                                     order_by='GameQuestion.order')
    scores = db.relationship('Score', back_populates='game', cascade='all, delete-orphan')
+    current_turn_team = db.relationship('Team', foreign_keys=[current_turn_team_id], post_update=True)

    @classmethod
    def get_active(cls):
@@ -141,7 +144,9 @@ class Game(db.Model):
            'is_active': self.is_active,
            'current_question_index': self.current_question_index,
            'total_questions': len(self.game_questions),
-            'is_template': self.is_template
+            'is_template': self.is_template,
+            'current_turn_team_id': self.current_turn_team_id,
+            'current_turn_team_name': self.current_turn_team.name if self.current_turn_team else None
        }

        if include_questions:
--- a/backend/routes/admin.py
+++ b/backend/routes/admin.py
@@ -302,3 +302,25 @@ def seek_audio(game_id):
        return jsonify({'message': f'Audio seeked to {position}s'}), 200
    except Exception as e:
        return jsonify({'error': str(e)}), 500
+
+
+@bp.route('/game/<int:game_id>/advance-turn', methods=['POST'])
+@require_auth
+def advance_turn(game_id):
+    """Advance to the next team's turn"""
+    game = Game.query.get_or_404(game_id)
+
+    try:
+        next_team = game_service.advance_turn(game, socketio)
+        if next_team:
+            return jsonify({
+                'message': 'Turn advanced',
+                'current_turn_team_id': next_team.id,
+                'current_turn_team_name': next_team.name
+            }), 200
+        else:
+            return jsonify({'error': 'No teams in game'}), 400
+
+    except Exception as e:
+        db.session.rollback()
+        return jsonify({'error': str(e)}), 500
--- a/backend/routes/questions.py
+++ b/backend/routes/questions.py
@@ -7,8 +7,65 @@ bp = Blueprint('questions', __name__, url_prefix='/api/questions')

@bp.route('', methods=['GET'])
 def list_questions():
-    """Get all questions"""
-    questions = Question.query.order_by(Question.created_at.desc()).all()
+    """Get all questions with optional filtering and sorting
+
+    Query parameters:
+    - search: Search in question content and answer (case-insensitive)
+    - category: Filter by category name (exact match, or 'none' for uncategorized)
+    - type: Filter by question type (text, image, youtube_audio)
+    - sort_by: Field to sort by (created_at, category, type, question_content, answer)
+    - sort_order: Sort direction (asc, desc) - default: desc
+    """
+    query = Question.query
+
+    # Search filter
+    search = request.args.get('search', '').strip()
+    if search:
+        search_pattern = f'%{search}%'
+        query = query.filter(
+            db.or_(
+                Question.question_content.ilike(search_pattern),
+                Question.answer.ilike(search_pattern)
+            )
+        )
+
+    # Category filter
+    category = request.args.get('category', '').strip()
+    if category:
+        if category.lower() == 'none':
+            query = query.filter(Question.category.is_(None))
+        else:
+            query = query.filter(Question.category == category)
+
+    # Type filter
+    question_type = request.args.get('type', '').strip()
+    if question_type:
+        try:
+            query = query.filter(Question.type == QuestionType(question_type))
+        except ValueError:
+            pass  # Invalid type, ignore filter
+
+    # Sorting
+    sort_by = request.args.get('sort_by', 'created_at').strip()
+    sort_order = request.args.get('sort_order', 'desc').strip().lower()
+
+    # Map sort_by to column
+    sort_columns = {
+        'created_at': Question.created_at,
+        'category': Question.category,
+        'type': Question.type,
+        'question_content': Question.question_content,
+        'answer': Question.answer,
+    }
+
+    sort_column = sort_columns.get(sort_by, Question.created_at)
+
+    if sort_order == 'asc':
+        query = query.order_by(sort_column.asc())
+    else:
+        query = query.order_by(sort_column.desc())
+
+    questions = query.all()
    return jsonify([q.to_dict(include_answer=True) for q in questions]), 200


--- a/backend/services/game_service.py
+++ b/backend/services/game_service.py
@@ -1,7 +1,12 @@
-from backend.models import db, Game, Score
+from backend.models import db, Game, Score, Team
 from flask_socketio import emit


+def get_ordered_teams(game):
+    """Get teams sorted by ID for consistent turn ordering"""
+    return sorted(game.teams, key=lambda t: t.id)
+
+
 def get_game_state(game):
    """Get current game state with all necessary information"""
    current_question = game.get_current_question()
@@ -12,7 +17,9 @@ def get_game_state(game):
        'current_question_index': game.current_question_index,
        'total_questions': len(game.game_questions),
        'is_active': game.is_active,
-        'teams': [team.to_dict() for team in game.teams]
+        'teams': [team.to_dict() for team in game.teams],
+        'current_turn_team_id': game.current_turn_team_id,
+        'current_turn_team_name': game.current_turn_team.name if game.current_turn_team else None
    }

    if current_question:
@@ -42,6 +49,14 @@ def start_game(game, socketio_instance):

    game.is_active = True
    game.current_question_index = 0
+
+    # Set initial turn to the first team (by ID order)
+    ordered_teams = get_ordered_teams(game)
+    if ordered_teams:
+        game.current_turn_team_id = ordered_teams[0].id
+    else:
+        game.current_turn_team_id = None
+
    db.session.commit()

    # Emit game_started event
@@ -60,6 +75,9 @@ def start_game(game, socketio_instance):
    # Emit first question
    broadcast_question_change(game, socketio_instance)

+    # Emit initial turn
+    broadcast_turn_change(game, socketio_instance)
+

 def next_question(game, socketio_instance):
    """Move to next question"""
@@ -209,6 +227,7 @@ def restart_game(game, socketio_instance):
    # Reset game state
    game.is_active = False
    game.current_question_index = 0
+    game.current_turn_team_id = None  # Reset turn

    # Reset phone-a-friend lifelines for all teams
    for team in game.teams:
@@ -283,3 +302,52 @@ def broadcast_audio_seek(game, position, socketio_instance):
        'game_id': game.id,
        'position': position
    }, room=f'game_{game.id}_contestant')
+
+
+def advance_turn(game, socketio_instance):
+    """Advance to the next team's turn (cycles through teams by ID order)"""
+    ordered_teams = get_ordered_teams(game)
+
+    if not ordered_teams:
+        return None
+
+    if game.current_turn_team_id is None:
+        # No current turn, set to first team
+        next_team = ordered_teams[0]
+    else:
+        # Find current team index and advance to next
+        current_index = None
+        for i, team in enumerate(ordered_teams):
+            if team.id == game.current_turn_team_id:
+                current_index = i
+                break
+
+        if current_index is None:
+            # Current team not found, set to first
+            next_team = ordered_teams[0]
+        else:
+            # Cycle to next team (modulo for wrap-around)
+            next_index = (current_index + 1) % len(ordered_teams)
+            next_team = ordered_teams[next_index]
+
+    game.current_turn_team_id = next_team.id
+    db.session.commit()
+
+    # Broadcast turn change to both rooms
+    broadcast_turn_change(game, socketio_instance)
+
+    return next_team
+
+
+def broadcast_turn_change(game, socketio_instance):
+    """Broadcast turn change to all connected clients"""
+    ordered_teams = get_ordered_teams(game)
+
+    turn_data = {
+        'current_turn_team_id': game.current_turn_team_id,
+        'current_turn_team_name': game.current_turn_team.name if game.current_turn_team else None,
+        'all_teams': [{'id': t.id, 'name': t.name} for t in ordered_teams]
+    }
+
+    socketio_instance.emit('turn_changed', turn_data, room=f'game_{game.id}_contestant')
+    socketio_instance.emit('turn_changed', turn_data, room=f'game_{game.id}_admin')
--- a/frontend/frontend/src/components/admin/GameAdminView.css
+++ b/frontend/frontend/src/components/admin/GameAdminView.css
@@ -0,0 +1,362 @@
+/* GameAdminView Mobile Styles */
+
+.admin-container {
+  padding: 1rem 2rem;
+  max-width: 1400px;
+  margin: 0 auto;
+  min-height: calc(100vh - 60px);
+}
+
+.admin-header {
+  margin-bottom: 1.5rem;
+  border-bottom: 2px solid #ccc;
+  padding-bottom: 1rem;
+}
+
+.admin-header h1 {
+  margin: 0 0 0.75rem 0;
+  font-size: 1.5rem;
+}
+
+.admin-header-controls {
+  display: flex;
+  gap: 1rem;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+.admin-main-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 2rem;
+}
+
+.question-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 1rem;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+
+.question-header h2 {
+  margin: 0;
+}
+
+.timer-controls {
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+.timer-display {
+  padding: 0.75rem 1rem;
+  border-radius: 4px;
+  font-weight: bold;
+  font-size: 1.2rem;
+  min-width: 120px;
+  text-align: center;
+}
+
+.question-card {
+  padding: 1.5rem;
+  border: 2px solid #2196F3;
+  border-radius: 8px;
+  background: #e3f2fd;
+}
+
+.question-text {
+  font-size: 1.3rem;
+  font-weight: bold;
+  margin-bottom: 1rem;
+}
+
+.answer-box {
+  padding: 1rem;
+  background: #4CAF50;
+  color: white;
+  border-radius: 4px;
+}
+
+.team-section h2 {
+  margin-top: 0;
+}
+
+.add-team-form {
+  display: flex;
+  gap: 0.5rem;
+  margin-bottom: 1rem;
+  flex-wrap: wrap;
+}
+
+.add-team-input {
+  padding: 0.5rem;
+  flex: 1;
+  min-width: 150px;
+  font-size: 1rem;
+  border-radius: 4px;
+  border: 1px solid #ccc;
+}
+
+.teams-list {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.team-card {
+  padding: 1rem;
+  border: 1px solid #ccc;
+  border-radius: 8px;
+  background: white;
+  transition: all 0.3s ease;
+}
+
+.team-card-active-turn {
+  border: 3px solid #673AB7;
+  background: #EDE7F6;
+  box-shadow: 0 0 10px rgba(103, 58, 183, 0.3);
+}
+
+.team-card-active-turn .team-name {
+  color: #673AB7;
+}
+
+.team-card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 0.5rem;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+
+.team-name-section {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.team-name {
+  font-size: 1.2rem;
+  font-weight: bold;
+}
+
+.team-score {
+  font-size: 1.5rem;
+  font-weight: bold;
+  color: #2196F3;
+}
+
+.team-buttons {
+  display: flex;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+}
+
+.team-buttons button {
+  padding: 0.5rem 1rem;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 0.9rem;
+  white-space: nowrap;
+}
+
+.btn-points {
+  background: #4CAF50;
+}
+
+.btn-minus {
+  background: #f44336;
+}
+
+.btn-lifeline-use {
+  background: #ff9800;
+}
+
+.btn-lifeline-use:disabled {
+  background: #ccc;
+  cursor: not-allowed;
+}
+
+.btn-lifeline-add {
+  background: #9C27B0;
+}
+
+.game-controls {
+  background: #f5f5f5;
+  border-radius: 8px;
+  padding: 1.5rem;
+  margin-top: 2rem;
+}
+
+.game-controls h2 {
+  margin-top: 0;
+  margin-bottom: 1rem;
+}
+
+.controls-header {
+  display: flex;
+  gap: 1rem;
+  margin-bottom: 1rem;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+.question-indicator {
+  padding: 0.75rem 1rem;
+  background: white;
+  border-radius: 4px;
+  font-weight: bold;
+}
+
+.controls-button-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 0.75rem;
+}
+
+.controls-button-grid button {
+  padding: 0.75rem 1.5rem;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 1rem;
+}
+
+/* Mobile styles */
+@media (max-width: 768px) {
+  .admin-container {
+    padding: 0.75rem 1rem;
+  }
+
+  .admin-header h1 {
+    font-size: 1.2rem;
+  }
+
+  .admin-main-grid {
+    grid-template-columns: 1fr;
+    gap: 1.5rem;
+  }
+
+  .question-header {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .timer-controls {
+    width: 100%;
+    justify-content: flex-start;
+  }
+
+  .timer-display {
+    font-size: 1rem;
+    padding: 0.5rem 0.75rem;
+    min-width: auto;
+    flex: 1;
+  }
+
+  .timer-controls button {
+    padding: 0.5rem 0.75rem;
+    font-size: 0.85rem;
+  }
+
+  .question-card {
+    padding: 1rem;
+  }
+
+  .question-text {
+    font-size: 1.1rem;
+  }
+
+  .team-card {
+    padding: 0.75rem;
+  }
+
+  .team-card-header {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .team-score {
+    font-size: 1.2rem;
+  }
+
+  .team-buttons {
+    width: 100%;
+  }
+
+  .team-buttons button {
+    padding: 0.4rem 0.6rem;
+    font-size: 0.85rem;
+    flex: 1;
+    min-width: 0;
+  }
+
+  .game-controls {
+    padding: 1rem;
+    margin-top: 1.5rem;
+  }
+
+  .controls-header {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 0.75rem;
+  }
+
+  .controls-button-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .controls-button-grid button {
+    padding: 0.75rem 1rem;
+  }
+}
+
+/* Very small screens */
+@media (max-width: 480px) {
+  .admin-container {
+    padding: 0.5rem;
+  }
+
+  .admin-header h1 {
+    font-size: 1rem;
+  }
+
+  .timer-display {
+    font-size: 0.9rem;
+  }
+
+  .question-text {
+    font-size: 1rem;
+  }
+
+  .team-name {
+    font-size: 1rem;
+  }
+
+  .team-buttons {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 0.4rem;
+  }
+
+  .team-buttons button {
+    padding: 0.5rem 0.3rem;
+    font-size: 0.8rem;
+  }
+
+  .add-team-form {
+    flex-direction: column;
+  }
+
+  .add-team-input {
+    width: 100%;
+  }
+}
--- a/frontend/frontend/src/components/admin/GameAdminView.jsx
+++ b/frontend/frontend/src/components/admin/GameAdminView.jsx
@@ -4,6 +4,7 @@ import { useSocket } from "../../hooks/useSocket";
 import { adminAPI, gamesAPI } from "../../services/api";
 import AdminNavbar from "../common/AdminNavbar";
 import AudioPlayer from "../audio/AudioPlayer";
+import "./GameAdminView.css";

 export default function GameAdminView() {
 	const { gameId } = useParams();
@@ -20,6 +21,8 @@ export default function GameAdminView() {
 	const [timerExpired, setTimerExpired] = useState(false);
 	const [timerPaused, setTimerPaused] = useState(false);
 	const [newTeamName, setNewTeamName] = useState("");
+	const [currentTurnTeamId, setCurrentTurnTeamId] = useState(null);
+	const [currentTurnTeamName, setCurrentTurnTeamName] = useState(null);

 	useEffect(() => {
 		loadGameState();
@@ -36,6 +39,8 @@ export default function GameAdminView() {
 			setCurrentQuestion(response.data.current_question);
 			setQuestionIndex(response.data.current_question_index);
 			setTotalQuestions(response.data.total_questions);
+			setCurrentTurnTeamId(response.data.current_turn_team_id);
+			setCurrentTurnTeamName(response.data.current_turn_team_name);
 		} catch (error) {
 			console.error("Error loading game state:", error);
 		}
@@ -76,12 +81,19 @@ export default function GameAdminView() {
 			setTimerPaused(false);
 		});

+		socket.on("turn_changed", (data) => {
+			console.log("Turn changed:", data);
+			setCurrentTurnTeamId(data.current_turn_team_id);
+			setCurrentTurnTeamName(data.current_turn_team_name);
+		});
+
 		return () => {
 			socket.off("question_with_answer");
 			socket.off("score_updated");
 			socket.off("timer_paused");
 			socket.off("lifeline_updated");
 			socket.off("timer_reset");
+			socket.off("turn_changed");
 		};
 	}, [socket]);

@@ -208,6 +220,15 @@ export default function GameAdminView() {
 		}
 	};

+	const handleAdvanceTurn = async () => {
+		try {
+			await adminAPI.advanceTurn(gameId);
+		} catch (error) {
+			console.error("Error advancing turn:", error);
+			alert("Error advancing turn");
+		}
+	};
+
 	const handleToggleAnswer = async () => {
 		const newShowAnswer = !showAnswer;
 		try {
@@ -261,26 +282,11 @@ export default function GameAdminView() {
 	return (
 		<>
 			<AdminNavbar />
-			<div
-				style={{
-					padding: "1rem 2rem",
-					maxWidth: "1400px",
-					margin: "0 auto",
-					minHeight: "calc(100vh - 60px)",
-				}}
-			>
+			<div className="admin-container">
 				{/* Header */}
-				<div
-					style={{
-						marginBottom: "1.5rem",
-						borderBottom: "2px solid #ccc",
-						paddingBottom: "1rem",
-					}}
-				>
-					<h1 style={{ margin: "0 0 0.75rem 0" }}>
-						Game Admin - {gameState?.game_name}
-					</h1>
-					<div style={{ display: "flex", gap: "1rem", alignItems: "center" }}>
+				<div className="admin-header">
+					<h1>Game Admin - {gameState?.game_name}</h1>
+					<div className="admin-header-controls">
 						<span>{isConnected ? "● Connected" : "○ Disconnected"}</span>
 						<button
 							onClick={() => window.open(contestantViewUrl, "_blank")}
@@ -291,45 +297,25 @@ export default function GameAdminView() {
 					</div>
 				</div>

-				<div
-					style={{
-						display: "grid",
-						gridTemplateColumns: "1fr 1fr",
-						gap: "2rem",
-					}}
-				>
+				<div className="admin-main-grid">
 					{/* Current Question with Answer */}
 					<div>
-						<div
-							style={{
-								display: "flex",
-								justifyContent: "space-between",
-								alignItems: "center",
-								marginBottom: "1rem",
-							}}
-						>
-							<h2 style={{ margin: 0 }}>Current Question</h2>
-							<div
-								style={{ display: "flex", gap: "0.5rem", alignItems: "center" }}
-							>
+						<div className="question-header">
+							<h2>Current Question</h2>
+							<div className="timer-controls">
 								<div
+									className="timer-display"
 									style={{
-										padding: "0.75rem 1rem",
 										background: timerExpired
 											? "#ffebee"
 											: timerSeconds <= 10
 												? "#fff3e0"
 												: "#e8f5e9",
-										borderRadius: "4px",
-										fontWeight: "bold",
-										fontSize: "1.2rem",
 										color: timerExpired
 											? "#c62828"
 											: timerSeconds <= 10
 												? "#e65100"
 												: "#2e7d32",
-										minWidth: "120px",
-										textAlign: "center",
 									}}
 								>
 									⏱️ {String(Math.floor(timerSeconds / 60)).padStart(2, "0")}:
@@ -385,14 +371,7 @@ export default function GameAdminView() {
 							</div>
 						</div>
 						{currentQuestion ? (
-							<div
-								style={{
-									padding: "1.5rem",
-									border: "2px solid #2196F3",
-									borderRadius: "8px",
-									background: "#e3f2fd",
-								}}
-							>
+							<div className="question-card">
 								{currentQuestion.type === "image" &&
 									currentQuestion.image_path && (
 										<img
@@ -414,23 +393,10 @@ export default function GameAdminView() {
 											gameId={gameId}
 										/>
 									)}
-								<p
-									style={{
-										fontSize: "1.3rem",
-										fontWeight: "bold",
-										marginBottom: "1rem",
-									}}
-								>
+								<p className="question-text">
 									{currentQuestion.question_content}
 								</p>
-								<div
-									style={{
-										padding: "1rem",
-										background: "#4CAF50",
-										color: "white",
-										borderRadius: "4px",
-									}}
-								>
+								<div className="answer-box">
 									<strong>Answer:</strong> {currentQuestion.answer}
 								</div>
 							</div>
@@ -440,24 +406,16 @@ export default function GameAdminView() {
 					</div>

 					{/* Team Scoring */}
-					<div>
+					<div className="team-section">
 						<h2>Team Scoring</h2>
-						<div
-							style={{ display: "flex", gap: "0.5rem", marginBottom: "1rem" }}
-						>
+						<div className="add-team-form">
 							<input
 								type="text"
 								value={newTeamName}
 								onChange={(e) => setNewTeamName(e.target.value)}
 								onKeyPress={(e) => e.key === "Enter" && handleAddTeam()}
 								placeholder="Enter team name"
-								style={{
-									padding: "0.5rem",
-									flex: 1,
-									fontSize: "1rem",
-									borderRadius: "4px",
-									border: "1px solid #ccc",
-								}}
+								className="add-team-input"
 							/>
 							<button
 								onClick={handleAddTeam}
@@ -477,42 +435,13 @@ export default function GameAdminView() {
 						{teams.length === 0 ? (
 							<p>No teams in this game</p>
 						) : (
-							<div
-								style={{
-									display: "flex",
-									flexDirection: "column",
-									gap: "1rem",
-								}}
-							>
+							<div className="teams-list">
 								{teams.map((team) => (
-									<div
-										key={team.id}
-										style={{
-											padding: "1rem",
-											border: "1px solid #ccc",
-											borderRadius: "8px",
-											background: "white",
-										}}
-									>
-										<div
-											style={{
-												display: "flex",
-												justifyContent: "space-between",
-												alignItems: "center",
-												marginBottom: "0.5rem",
-											}}
-										>
-											<div
-												style={{
-													display: "flex",
-													alignItems: "center",
-													gap: "0.5rem",
-												}}
-											>
-												<strong style={{ fontSize: "1.2rem" }}>
-													{team.name}
-												</strong>
-												<span style={{ fontSize: "1rem" }}>
+									<div key={team.id} className={`team-card ${team.id === currentTurnTeamId ? 'team-card-active-turn' : ''}`}>
+										<div className="team-card-header">
+											<div className="team-name-section">
+												<strong className="team-name">{team.name}</strong>
+												<span>
 													{Array.from({
 														length: team.phone_a_friend_count || 0,
 													}).map((_, i) => (
@@ -520,82 +449,46 @@ export default function GameAdminView() {
 													))}
 												</span>
 											</div>
-											<span
-												style={{
-													fontSize: "1.5rem",
-													fontWeight: "bold",
-													color: "#2196F3",
-												}}
-											>
+											<span className="team-score">
 												{team.total_score} pts
 											</span>
 										</div>
-										<div
-											style={{
-												display: "flex",
-												gap: "0.5rem",
-												flexWrap: "wrap",
-											}}
-										>
+										<div className="team-buttons">
 											{[1, 2, 3, 5, 10].map((points) => (
 												<button
 													key={points}
 													onClick={() => handleAwardPoints(team.id, points)}
-													style={{
-														padding: "0.5rem 1rem",
-														background: "#4CAF50",
-														color: "white",
-														border: "none",
-														borderRadius: "4px",
-														cursor: "pointer",
-													}}
+													className="btn-points"
 												>
 													+{points}
 												</button>
 											))}
 											<button
 												onClick={() => handleAwardPoints(team.id, -1)}
-												style={{
-													padding: "0.5rem 1rem",
-													background: "#f44336",
-													color: "white",
-													border: "none",
-													borderRadius: "4px",
-													cursor: "pointer",
-												}}
+												className="btn-minus"
 											>
 												-1
 											</button>
 											<button
 												onClick={() => handleUseLifeline(team.id)}
 												disabled={team.phone_a_friend_count <= 0}
+												className="btn-lifeline-use"
 												style={{
-													padding: "0.5rem 1rem",
 													background:
 														team.phone_a_friend_count <= 0 ? "#ccc" : "#ff9800",
-													color: "white",
-													border: "none",
-													borderRadius: "4px",
 													cursor:
 														team.phone_a_friend_count <= 0
 															? "not-allowed"
 															: "pointer",
 												}}
 											>
-												📞 Use Lifeline
+												📞 Use
 											</button>
 											<button
 												onClick={() => handleAddLifeline(team.id)}
-												style={{
-													padding: "0.5rem 1rem",
-													background: "#9C27B0",
-													color: "white",
-													border: "none",
-													borderRadius: "4px",
-													cursor: "pointer",
-												}}
+												className="btn-lifeline-add"
 											>
-												📞 Add Lifeline
+												📞 Add
 											</button>
 										</div>
 									</div>
@@ -606,57 +499,28 @@ export default function GameAdminView() {
 				</div>

 				{/* Game Controls */}
-				<div
-					style={{
-						background: "#f5f5f5",
-						borderRadius: "8px",
-						padding: "1.5rem",
-						marginTop: "2rem",
-					}}
-				>
-					<h2 style={{ marginTop: 0, marginBottom: "1rem" }}>Game Controls</h2>
+				<div className="game-controls">
+					<h2>Game Controls</h2>

 					{/* Question indicator and timer */}
-					<div
-						style={{
-							display: "flex",
-							gap: "1rem",
-							marginBottom: "1rem",
-							justifyContent: "space-between",
-							alignItems: "center",
-						}}
-					>
-						<div
-							style={{
-								padding: "0.75rem 1rem",
-								background: "white",
-								borderRadius: "4px",
-								fontWeight: "bold",
-							}}
-						>
+					<div className="controls-header">
+						<div className="question-indicator">
 							Question {questionIndex + 1} of {totalQuestions}
 						</div>
-						<div
-							style={{ display: "flex", gap: "0.5rem", alignItems: "center" }}
-						>
+						<div className="timer-controls">
 							<div
+								className="timer-display"
 								style={{
-									padding: "0.75rem 1rem",
 									background: timerExpired
 										? "#ffebee"
 										: timerSeconds <= 10
 											? "#fff3e0"
 											: "#e8f5e9",
-									borderRadius: "4px",
-									fontWeight: "bold",
-									fontSize: "1.2rem",
 									color: timerExpired
 										? "#c62828"
 										: timerSeconds <= 10
 											? "#e65100"
 											: "#2e7d32",
-									minWidth: "120px",
-									textAlign: "center",
 								}}
 							>
 								⏱️ {String(Math.floor(timerSeconds / 60)).padStart(2, "0")}:
@@ -692,14 +556,25 @@ export default function GameAdminView() {
 						</div>
 					</div>

-					{/* Button grid - 2 columns */}
-					<div
-						style={{
-							display: "grid",
-							gridTemplateColumns: "1fr 1fr",
-							gap: "0.75rem",
-						}}
-					>
+					{/* Button grid - 2 columns on desktop, 1 on mobile */}
+					<div className="controls-button-grid">
+						{gameState?.is_active && teams.length > 0 && (
+							<button
+								onClick={handleAdvanceTurn}
+								className="btn-next-turn"
+								style={{
+									padding: "0.75rem 1.5rem",
+									background: "#673AB7",
+									color: "white",
+									border: "none",
+									borderRadius: "4px",
+									cursor: "pointer",
+									fontSize: "1rem",
+								}}
+							>
+								Next Turn {currentTurnTeamName ? `(${currentTurnTeamName})` : ""}
+							</button>
+						)}
 						{currentQuestion && (
 							<button
 								onClick={handleToggleAnswer}
--- a/frontend/frontend/src/components/common/AdminNavbar.css
+++ b/frontend/frontend/src/components/common/AdminNavbar.css
@@ -0,0 +1,169 @@
+/* AdminNavbar Styles */
+
+.admin-navbar {
+  background: black;
+  padding: 1rem 2rem;
+  position: sticky;
+  top: 0;
+  z-index: 1000;
+}
+
+.navbar-container {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.navbar-brand {
+  font-size: 1.5rem;
+  font-weight: bold;
+  color: white;
+}
+
+.navbar-menu {
+  display: flex;
+  gap: 1rem;
+  align-items: center;
+}
+
+.navbar-links {
+  display: flex;
+  gap: 1rem;
+  align-items: center;
+}
+
+.navbar-link {
+  text-decoration: none;
+  padding: 0.5rem 1rem;
+  border-radius: 8px;
+  background: transparent;
+  color: white;
+  font-weight: normal;
+  transition: all 0.2s ease;
+}
+
+.navbar-link:hover {
+  background: #333;
+}
+
+.navbar-link.active {
+  background: white;
+  color: black;
+  font-weight: bold;
+}
+
+.navbar-link.active:hover {
+  background: white;
+}
+
+.navbar-user {
+  display: flex;
+  gap: 0.75rem;
+  align-items: center;
+  margin-left: 1rem;
+  padding-left: 1rem;
+  border-left: 1px solid #444;
+}
+
+.navbar-user-name {
+  color: white;
+  font-size: 0.9rem;
+}
+
+.navbar-logout {
+  padding: 0.5rem 1rem;
+  background: #e74c3c;
+  color: white;
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+  font-size: 0.9rem;
+  font-weight: 500;
+  transition: all 0.2s ease;
+}
+
+.navbar-logout:hover {
+  background: #c0392b;
+}
+
+/* Mobile menu button - hidden by default */
+.navbar-mobile-toggle {
+  display: none;
+  background: transparent;
+  border: none;
+  color: white;
+  font-size: 1.5rem;
+  cursor: pointer;
+  padding: 0.5rem;
+}
+
+/* Mobile styles */
+@media (max-width: 768px) {
+  .admin-navbar {
+    padding: 0.75rem 1rem;
+  }
+
+  .navbar-brand {
+    font-size: 1.2rem;
+  }
+
+  .navbar-mobile-toggle {
+    display: block;
+  }
+
+  .navbar-menu {
+    display: none;
+    position: absolute;
+    top: 100%;
+    left: 0;
+    right: 0;
+    background: black;
+    flex-direction: column;
+    padding: 1rem;
+    gap: 0.5rem;
+    border-top: 1px solid #333;
+  }
+
+  .navbar-menu.open {
+    display: flex;
+  }
+
+  .navbar-links {
+    flex-direction: column;
+    width: 100%;
+    gap: 0.5rem;
+  }
+
+  .navbar-link {
+    width: 100%;
+    text-align: center;
+    padding: 0.75rem 1rem;
+  }
+
+  .navbar-user {
+    flex-direction: column;
+    margin-left: 0;
+    padding-left: 0;
+    padding-top: 0.75rem;
+    border-left: none;
+    border-top: 1px solid #444;
+    width: 100%;
+    gap: 0.5rem;
+  }
+
+  .navbar-user-name {
+    text-align: center;
+  }
+
+  .navbar-logout {
+    width: 100%;
+    padding: 0.75rem 1rem;
+  }
+}
+
+/* Very small screens */
+@media (max-width: 480px) {
+  .navbar-brand {
+    font-size: 1rem;
+  }
+}
--- a/frontend/frontend/src/components/common/AdminNavbar.jsx
+++ b/frontend/frontend/src/components/common/AdminNavbar.jsx
@@ -1,9 +1,12 @@
+import { useState } from "react";
 import { Link, useLocation } from "react-router-dom";
 import { useAuth } from "../../contexts/AuthContext";
+import "./AdminNavbar.css";

 export default function AdminNavbar() {
 	const location = useLocation();
 	const { user, logout } = useAuth();
+	const [mobileMenuOpen, setMobileMenuOpen] = useState(false);

 	const navItems = [
 		{ path: "/", label: "Home" },
@@ -20,92 +23,45 @@ export default function AdminNavbar() {
 		return location.pathname.startsWith(path);
 	};

+	const handleLinkClick = () => {
+		setMobileMenuOpen(false);
+	};
+
 	return (
-		<nav
-			style={{
-				background: "black",
-				padding: "1rem 2rem",
-				position: "sticky",
-				top: 0,
-				zIndex: 1000,
-			}}
-		>
-			<div
-				style={{
-					display: "flex",
-					alignItems: "center",
-					justifyContent: "space-between",
-				}}
-			>
+		<nav className="admin-navbar">
+			<div className="navbar-container">
 				<div style={{ display: "flex", alignItems: "center", gap: "0.5rem" }}>
-					<span
-						style={{ fontSize: "1.5rem", fontWeight: "bold", color: "white" }}
-					>
-						🎮 Trivia Admin
-					</span>
+					<span className="navbar-brand">Trivia Admin</span>
 				</div>
-				<div style={{ display: "flex", gap: "1rem", alignItems: "center" }}>
-					{navItems.map((item) => (
-						<Link
-							key={item.path}
-							to={item.path}
-							style={{
-								textDecoration: "none",
-								padding: "0.5rem 1rem",
-								borderRadius: "8px",
-								background: isActive(item.path) ? "white" : "transparent",
-								color: isActive(item.path) ? "black" : "white",
-								fontWeight: isActive(item.path) ? "bold" : "normal",
-								transition: "all 0.2s ease",
-							}}
-							onMouseEnter={(e) => {
-								if (!isActive(item.path)) {
-									e.target.style.background = "#333";
-								}
-							}}
-							onMouseLeave={(e) => {
-								if (!isActive(item.path)) {
-									e.target.style.background = "transparent";
-								}
-							}}
-						>
-							{item.label}
-						</Link>
-					))}
+
+				{/* Mobile menu toggle */}
+				<button
+					className="navbar-mobile-toggle"
+					onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
+					aria-label="Toggle menu"
+				>
+					{mobileMenuOpen ? "✕" : "☰"}
+				</button>
+
+				<div className={`navbar-menu ${mobileMenuOpen ? "open" : ""}`}>
+					<div className="navbar-links">
+						{navItems.map((item) => (
+							<Link
+								key={item.path}
+								to={item.path}
+								className={`navbar-link ${isActive(item.path) ? "active" : ""}`}
+								onClick={handleLinkClick}
+							>
+								{item.label}
+							</Link>
+						))}
+					</div>
 					{/* User info and logout */}
-					<div
-						style={{
-							display: "flex",
-							gap: "0.75rem",
-							alignItems: "center",
-							marginLeft: "1rem",
-							paddingLeft: "1rem",
-							borderLeft: "1px solid #444",
-						}}
-					>
-						<span style={{ color: "white", fontSize: "0.9rem" }}>
+					<div className="navbar-user">
+						<span className="navbar-user-name">
 							{user?.profile?.name || user?.profile?.email}
 						</span>
-						<button
-							onClick={logout}
-							style={{
-								padding: "0.5rem 1rem",
-								background: "#e74c3c",
-								color: "white",
-								border: "none",
-								borderRadius: "6px",
-								cursor: "pointer",
-								fontSize: "0.9rem",
-								fontWeight: "500",
-								transition: "all 0.2s ease",
-							}}
-							onMouseEnter={(e) => {
-								e.target.style.background = "#c0392b";
-							}}
-							onMouseLeave={(e) => {
-								e.target.style.background = "#e74c3c";
-							}}
-						>
+						<button onClick={logout} className="navbar-logout">
 							Logout
 						</button>
 					</div>
--- a/frontend/frontend/src/components/contestant/ContestantView.jsx
+++ b/frontend/frontend/src/components/contestant/ContestantView.jsx
@@ -18,6 +18,8 @@ export default function ContestantView() {
  const [timerActive, setTimerActive] = useState(false);
  const [timerPaused, setTimerPaused] = useState(false);
  const [categories, setCategories] = useState([]);
+  const [currentTurnTeamId, setCurrentTurnTeamId] = useState(null);
+  const [currentTurnTeamName, setCurrentTurnTeamName] = useState(null);

  useEffect(() => {
    // Load initial game state
@@ -140,6 +142,8 @@ export default function ContestantView() {
      setTimerSeconds(30);
      setTimerActive(false);
      setTimerPaused(false);
+      setCurrentTurnTeamId(null);
+      setCurrentTurnTeamName(null);
    });

    socket.on("lifeline_updated", (data) => {
@@ -154,6 +158,12 @@ export default function ContestantView() {
      setTimerPaused(false);
    });

+    socket.on("turn_changed", (data) => {
+      console.log("Turn changed:", data);
+      setCurrentTurnTeamId(data.current_turn_team_id);
+      setCurrentTurnTeamName(data.current_turn_team_name);
+    });
+
    return () => {
      socket.off("game_started");
      socket.off("question_changed");
@@ -163,6 +173,7 @@ export default function ContestantView() {
      socket.off("game_ended");
      socket.off("lifeline_updated");
      socket.off("timer_reset");
+      socket.off("turn_changed");
    };
  }, [socket]);

@@ -283,6 +294,25 @@ export default function ContestantView() {
          >
            {currentQuestion ? (
              <div style={{ width: "100%", textAlign: "center" }}>
+                {/* Turn indicator */}
+                {currentTurnTeamName && (
+                  <div
+                    className="turn-indicator"
+                    style={{
+                      fontSize: "2rem",
+                      fontWeight: "bold",
+                      marginBottom: "1.5rem",
+                      padding: "1rem 2rem",
+                      background: "#673AB7",
+                      color: "white",
+                      borderRadius: "8px",
+                      display: "inline-block",
+                      animation: "pulse 2s infinite",
+                    }}
+                  >
+                    {currentTurnTeamName}'s Turn
+                  </div>
+                )}
                {/* Timer progress bar */}
                <div
                  style={{
@@ -476,6 +506,11 @@ export default function ContestantView() {
                    justifyContent: "space-between",
                    alignItems: "baseline",
                    fontSize: "1.8rem",
+                    padding: "0.5rem 1rem",
+                    borderRadius: "8px",
+                    background: (team.team_id || team.id) === currentTurnTeamId ? "#673AB7" : "transparent",
+                    color: (team.team_id || team.id) === currentTurnTeamId ? "white" : "inherit",
+                    transition: "all 0.3s ease",
                  }}
                >
                  <div
--- a/frontend/frontend/src/components/questionbank/QuestionBankView.jsx
+++ b/frontend/frontend/src/components/questionbank/QuestionBankView.jsx
@@ -29,14 +29,29 @@ export default function QuestionBankView() {
 	const [downloadJob, setDownloadJob] = useState(null);
 	const [downloadProgress, setDownloadProgress] = useState(0);

+	// Filter and sort state
+	const [searchTerm, setSearchTerm] = useState("");
+	const [filterCategory, setFilterCategory] = useState("");
+	const [filterType, setFilterType] = useState("");
+	const [sortBy, setSortBy] = useState("created_at");
+	const [sortOrder, setSortOrder] = useState("desc");
+
 	useEffect(() => {
 		loadQuestions();
 		loadCategories();
-	}, []);
+	}, [searchTerm, filterCategory, filterType, sortBy, sortOrder]);

 	const loadQuestions = async () => {
 		try {
-			const response = await questionsAPI.getAll();
+			const params = {
+				sort_by: sortBy,
+				sort_order: sortOrder,
+			};
+			if (searchTerm) params.search = searchTerm;
+			if (filterCategory) params.category = filterCategory;
+			if (filterType) params.type = filterType;
+
+			const response = await questionsAPI.getAll(params);
 			setQuestions(response.data);
 		} catch (error) {
 			console.error("Error loading questions:", error);
@@ -295,6 +310,28 @@ export default function QuestionBankView() {
 		}
 	};

+	const handleSort = (column) => {
+		if (sortBy === column) {
+			setSortOrder(sortOrder === "asc" ? "desc" : "asc");
+		} else {
+			setSortBy(column);
+			setSortOrder("asc");
+		}
+	};
+
+	const SortIndicator = ({ column }) => {
+		if (sortBy !== column) return <span style={{ opacity: 0.3, marginLeft: "0.25rem" }}>↕</span>;
+		return <span style={{ marginLeft: "0.25rem" }}>{sortOrder === "asc" ? "↑" : "↓"}</span>;
+	};
+
+	const sortableHeaderStyle = {
+		padding: "0.75rem",
+		textAlign: "left",
+		borderBottom: "2px solid #ddd",
+		cursor: "pointer",
+		userSelect: "none",
+	};
+
 	return (
 		<>
 			<AdminNavbar />
@@ -581,6 +618,101 @@ export default function QuestionBankView() {
 				)}

 				<div>
+					{/* Filter and Sort Controls */}
+					<div
+						style={{
+							marginBottom: "1rem",
+							padding: "1rem",
+							background: "#f9f9f9",
+							borderRadius: "8px",
+							display: "flex",
+							flexWrap: "wrap",
+							gap: "1rem",
+							alignItems: "center",
+						}}
+					>
+						{/* Search */}
+						<div style={{ flex: "1", minWidth: "200px" }}>
+							<input
+								type="text"
+								placeholder="Search questions or answers..."
+								value={searchTerm}
+								onChange={(e) => setSearchTerm(e.target.value)}
+								style={{
+									width: "100%",
+									padding: "0.5rem",
+									border: "1px solid #ddd",
+									borderRadius: "4px",
+								}}
+							/>
+						</div>
+
+						{/* Category Filter */}
+						<div>
+							<select
+								value={filterCategory}
+								onChange={(e) => setFilterCategory(e.target.value)}
+								style={{
+									padding: "0.5rem",
+									border: "1px solid #ddd",
+									borderRadius: "4px",
+									minWidth: "150px",
+								}}
+							>
+								<option value="">All Categories</option>
+								<option value="none">Uncategorized</option>
+								{categories.map((cat) => (
+									<option key={cat.id} value={cat.name}>
+										{cat.name}
+									</option>
+								))}
+							</select>
+						</div>
+
+						{/* Type Filter */}
+						<div>
+							<select
+								value={filterType}
+								onChange={(e) => setFilterType(e.target.value)}
+								style={{
+									padding: "0.5rem",
+									border: "1px solid #ddd",
+									borderRadius: "4px",
+									minWidth: "130px",
+								}}
+							>
+								<option value="">All Types</option>
+								<option value="text">Text</option>
+								<option value="image">Image</option>
+								<option value="youtube_audio">YouTube Audio</option>
+							</select>
+						</div>
+
+						{/* Clear Filters */}
+						{(searchTerm || filterCategory || filterType || sortBy !== "created_at" || sortOrder !== "desc") && (
+							<button
+								onClick={() => {
+									setSearchTerm("");
+									setFilterCategory("");
+									setFilterType("");
+									setSortBy("created_at");
+									setSortOrder("desc");
+								}}
+								style={{
+									padding: "0.5rem 1rem",
+									background: "#f44336",
+									color: "white",
+									border: "none",
+									borderRadius: "4px",
+									cursor: "pointer",
+									fontSize: "0.9rem",
+								}}
+							>
+								Clear Filters
+							</button>
+						)}
+					</div>
+
 					<div
 						style={{
 							display: "flex",
@@ -715,42 +847,38 @@ export default function QuestionBankView() {
 											/>
 										</th>
 										<th
+											onClick={() => handleSort("type")}
 											style={{
-												padding: "0.75rem",
-												textAlign: "left",
-												borderBottom: "2px solid #ddd",
+												...sortableHeaderStyle,
 												width: "80px",
 											}}
 										>
 											Type
+											<SortIndicator column="type" />
 										</th>
 										<th
+											onClick={() => handleSort("category")}
 											style={{
-												padding: "0.75rem",
-												textAlign: "left",
-												borderBottom: "2px solid #ddd",
+												...sortableHeaderStyle,
 												width: "120px",
 											}}
 										>
 											Category
+											<SortIndicator column="category" />
 										</th>
 										<th
-											style={{
-												padding: "0.75rem",
-												textAlign: "left",
-												borderBottom: "2px solid #ddd",
-											}}
+											onClick={() => handleSort("question_content")}
+											style={sortableHeaderStyle}
 										>
 											Question
+											<SortIndicator column="question_content" />
 										</th>
 										<th
-											style={{
-												padding: "0.75rem",
-												textAlign: "left",
-												borderBottom: "2px solid #ddd",
-											}}
+											onClick={() => handleSort("answer")}
+											style={sortableHeaderStyle}
 										>
 											Answer
+											<SortIndicator column="answer" />
 										</th>
 										<th
 											style={{
--- a/frontend/frontend/src/index.css
+++ b/frontend/frontend/src/index.css
@@ -3,9 +3,9 @@
 	line-height: 1.5;
 	font-weight: 400;

-	color-scheme: light dark;
-	color: rgba(255, 255, 255, 0.87);
-	background-color: #242424;
+	color-scheme: light;
+	color: #213547;
+	background-color: #ffffff;

 	font-synthesis: none;
 	text-rendering: optimizeLegibility;
@@ -43,7 +43,7 @@ button {
 	font-size: 1em;
 	font-weight: 500;
 	font-family: inherit;
-	background-color: #1a1a1a;
+	background-color: #f9f9f9;
 	cursor: pointer;
 	transition: border-color 0.25s;
 }
@@ -55,15 +55,19 @@ button:focus-visible {
 	outline: 4px auto -webkit-focus-ring-color;
 }

-@media (prefers-color-scheme: light) {
-	:root {
-		color: #213547;
-		background-color: #ffffff;
+/* Turn indicator pulse animation */
+@keyframes pulse {
+	0% {
+		box-shadow: 0 0 0 0 rgba(103, 58, 183, 0.4);
 	}
-	a:hover {
-		color: #747bff;
+	70% {
+		box-shadow: 0 0 0 15px rgba(103, 58, 183, 0);
 	}
-	button {
-		background-color: #f9f9f9;
+	100% {
+		box-shadow: 0 0 0 0 rgba(103, 58, 183, 0);
 	}
 }
+
+.turn-indicator {
+	animation: pulse 2s infinite;
+}
--- a/frontend/frontend/src/services/api.js
+++ b/frontend/frontend/src/services/api.js
@@ -48,7 +48,7 @@ api.interceptors.response.use(

 // Questions API
 export const questionsAPI = {
-	getAll: () => api.get("/questions"),
+	getAll: (params = {}) => api.get("/questions", { params }),
 	getOne: (id) => api.get(`/questions/${id}`),
 	create: (data) => api.post("/questions", data),
 	createWithImage: (formData) =>
@@ -106,6 +106,7 @@ export const adminAPI = {
 		api.post(`/admin/game/${gameId}/team/${teamId}/use-lifeline`),
 	addLifeline: (gameId, teamId) =>
 		api.post(`/admin/game/${gameId}/team/${teamId}/add-lifeline`),
+	advanceTurn: (id) => api.post(`/admin/game/${id}/advance-turn`),
 };

 // Categories API
--- a/migrations/versions/a1b2c3d4e5f6_add_current_turn_team_id_to_games.py
+++ b/migrations/versions/a1b2c3d4e5f6_add_current_turn_team_id_to_games.py
@@ -0,0 +1,34 @@
+"""Add current_turn_team_id to games
+
+Revision ID: a1b2c3d4e5f6
+Revises: 1252454a2589
+Create Date: 2026-01-18 15:00:00.000000
+
+"""
+from alembic import op
+import sqlalchemy as sa
+
+
+# revision identifiers, used by Alembic.
+revision = 'a1b2c3d4e5f6'
+down_revision = '90b81e097444'
+branch_labels = None
+depends_on = None
+
+
+def upgrade():
+    # ### commands auto generated by Alembic - please adjust! ###
+    with op.batch_alter_table('games', schema=None) as batch_op:
+        batch_op.add_column(sa.Column('current_turn_team_id', sa.Integer(), nullable=True))
+        batch_op.create_foreign_key('fk_games_current_turn_team_id', 'teams', ['current_turn_team_id'], ['id'])
+
+    # ### end Alembic commands ###
+
+
+def downgrade():
+    # ### commands auto generated by Alembic - please adjust! ###
+    with op.batch_alter_table('games', schema=None) as batch_op:
+        batch_op.drop_constraint('fk_games_current_turn_team_id', type_='foreignkey')
+        batch_op.drop_column('current_turn_team_id')
+
+    # ### end Alembic commands ###