Skill C: Team Project Overview 1 MIN

Snakes & Ladders: Gamified AP CSP Learning
**Superpower:** Learn Computer Science by playing — bullets earned from lessons become ammo in boss battles and PvP duels.
5 LessonsCS Principles Topics
50 QuestionsMultiple Choice Bank
10-PlayerCo-op Boss Battle
1v1 PvPCompetitive Arena
Real-timeWebSocket Sync
4 CharactersPixel Art Sprites
4 PowerupsDamage/Speed/Rapidfire/Heal
Hall of ChampionsVictory Leaderboard

Complete Game Flow

Login/Guest → Character Select → 5 Lessons → 50 Questions → Mode Selection → Boss/PvP Battle → Victory Page → Hall of Champions

Data Flow Architecture

Frontend (Jekyll) → REST API (Flask:8306) → SQLite DB ↔ WebSocket (Socket.IO)

Individual Tasks (Skill A + Skill B)

Akhil

Scrum Master / Multiplayer & Victory System Developer
Superpower: Real-time Multiplayer Sync — connects players across the world in milliseconds

Skill A: Task — WebSocket Multiplayer & Victory System 1 MIN

**Problem Solved:** Enable real-time multiplayer gameplay with instant position sync, group chat, and persistent victory tracking in the Hall of Champions. **Demo Flow:** 1. Join boss battle → WebSocket connects → see other players appear 2. Move around → position broadcasts to all players every 50ms 3. Defeat boss → Victory page with confetti animation 4. Champions API records completion → Hall of Champions displays all winners

Skill B: Code Reference (PPR)

**Input:** Player position data, chat messages, game completion **Output:** Broadcast to all players, victory recording, champions list
# socketio_handlers/boss_battle.py @socketio.on('boss_player_move') def handle_player_move(data): room_id = data.get('room_id') boss_battles[room_id]['players'][request.sid]['x'] = data['x'] boss_battles[room_id]['players'][request.sid]['y'] = data['y'] emit('boss_player_position', {'sid': request.sid, 'x': data['x'], 'y': data['y']}, room=room_id, include_self=False)
**List Used:** `boss_battles[room_id]['players']` — dict tracking all players in each room; `champions[]` for leaderboard
# api/snakes_game.py - ChampionsAPI champions = SnakesGameData.query.filter_by(game_status='completed') .order_by(SnakesGameData.completed_at.asc()).all()
**Procedure:** `handle_player_move(data)` — extracts room_id, updates player position, broadcasts to all other players **Files:** `socketio_handlers/boss_battle.py`, `victory.html`, `api/snakes_game.py` (ChampionsAPI, CompleteGameAPI)

Moiz

DevOps / Authentication Lead
Superpower: Secure Sessions — JWT tokens keep your game data safe across devices

Skill A: Task — JWT Authentication & Guest Mode 1 MIN

**Problem Solved:** Secure user sessions without exposing credentials; provide guest mode for quick demos without signup. **Demo Flow:** 1. Login → JWT token stored in HttpOnly cookie 2. API call → `@token_required()` validates token 3. User ID extracted → correct game data loaded 4. Guest mode → sessionStorage fallback, no server persistence

Skill B: Code Reference (PPR)

**Input:** Login credentials (POST /api/authenticate) **Output:** JWT token + user session; or sessionStorage for guests
# api/jwt_authorize.py def token_required(): def decorator(f): @wraps(f) def decorated(*args, **kwargs): token = request.cookies.get('jwt') if not token: return {"message": "Token missing"}, 401 data = jwt.decode(token, SECRET_KEY, algorithms=["HS256"]) g.current_user = User.query.get(data['user_id']) return f(*args, **kwargs) return decorated return decorator
**List Used:** User roles/permissions stored in token payload
// Demo mode check (frontend) function isDemoMode() { return sessionStorage.getItem('snakes_demo_mode') === '1'; }
**Procedure:** `@token_required()` decorator — extracts user from JWT, attaches to request context **Files:** `api/jwt_authorize.py`, `api/authenticate.py`, `Dockerfile`, `docker-compose.yml`, `nginx.conf`

Samarth

Lesson System Developer
Superpower: Progressive Learning — turns CS education into unlockable game achievements

Skill A: Task — Interactive Lesson Completion & Section Unlocking 1 MIN

**Problem Solved:** Teach CS concepts and reward learning with in-game currency (bullets); enforce learning before playing. **Demo Flow:** 1. Open lesson → read content → complete quiz 2. POST /complete-lesson → server awards bullets 3. Progress bar fills → `unlocked_sections` updates 4. All 5 lessons done → boss section unlocks automatically

Skill B: Code Reference (PPR)

**Input:** Lesson completion (lesson_number, bullets_earned) **Output:** Updated total_bullets, completed_lessons[], unlocked_sections[]
# api/snakes_extended.py @snakes_bp.route('/complete-lesson', methods=['POST']) def complete_lesson(): lesson_number = data.get('lesson_number') if lesson_number not in record.completed_lessons: record.completed_lessons.append(lesson_number) record.total_bullets += bullets_earned # Check if all lessons complete → unlock next section if len(record.completed_lessons) >= 5: if 'half2' not in record.unlocked_sections: record.unlocked_sections.append('half2')
**List Used:** `completed_lessons[]` — prevents re-completing same lesson; `unlocked_sections[]` — controls game progression **Procedure:** `completeLesson(lessonNum)` — validates completion, updates DB, returns new totals **Files:** `lessons/lesson1.html` - `lesson5.html`, `api/snakes_extended.py`

Arnav

Boss Battle & PvP Developer
Superpower: Combat Systems — brings intense boss AI and competitive PvP to educational gaming

Skill A: Task — Boss Battle Arena & PvP Combat 1 MIN

**Problem Solved:** Create engaging final challenges with smooth boss AI movement, powerup mechanics, and competitive 1v1 PvP duels. **Demo Flow:** 1. Enter boss arena → boss spawns with 1000 HP, slithering movement 2. WASD move, click to shoot → bullets reduce boss HP 3. Collect powerups → damage boost/speed/rapidfire/heal 4. PvP mode → 1v1 duel with center wall, first to eliminate wins

Skill B: Code Reference (PPR)

**Input:** Player position, shoot command, powerup collection **Output:** Boss damage, powerup effects, PvP hit detection
// boss-battle.html - Boss AI Movement function updateBossPosition() { if (pattern === 'chase') { const dx = targetPlayer.x - boss.x; const dy = targetPlayer.y - boss.y; boss.x += dx * 0.02; // Smooth interpolation boss.y += dy * 0.02; } else if (pattern === 'zigzag') { boss.x += Math.sin(Date.now() / 200) * 5; boss.y += bossSpeed; } }
**List Used:** `playerBullets[]`, `opponentBullets[]`, `powerups[]` — arrays tracking projectiles and collectibles
// Collision detection with distance formula function checkCollisions() { gameState.playerBullets = gameState.playerBullets.filter(bullet => { const distance = Math.hypot(bullet.x - boss.x, bullet.y - boss.y); if (distance < boss.size) { damageBoss(bullet.damage); return false; // Remove bullet } return true; }); }
**Procedure:** `applyPowerup(type)` — uses selection logic to apply correct buff; `checkCollisions()` iterates bullets for hit detection **Files:** `boss-battle.html`, `pvp-arena.html`, `api/boss_battle.py`, `model/boss_room.py`

Ethan

Question System Developer
Superpower: Knowledge Testing — 50 unique questions that make learning feel like a game

Skill A: Task — Question Bank & Answer Validation 1 MIN

**Problem Solved:** Test knowledge with 50 unique questions across 5 CS topics; reward correct answers with bullets; prevent re-answering. **Demo Flow:** 1. Land on square → question modal appears 2. Select answer → validation runs against correct index 3. Correct = +5 bullets + green feedback | Wrong = red feedback 4. Square added to `visited_squares` → can't answer again

Skill B: Code Reference (PPR)

**Input:** Answer selection (square, answer_index) **Output:** Bullet reward, updated visited_squares[], visual feedback
// questions/questions_bank.js const QUESTIONS = [ {square: 7, topic: "Programming Basics", question: "What keyword declares a variable in Python?", options: ["var", "let", "def", "None of these"], correct: 3, bullets: 5}, // ... 49 more questions across 5 topics ];
**List Used:** `QUESTIONS[]` — array of 50 question objects; `visited_squares[]` — prevents repeat answers
# api/snakes_extended.py @snakes_bp.route('/answer-question', methods=['POST']) def answer_question(): if correct: record.total_bullets += bullets_earned if square not in record.visited_squares: record.visited_squares.append(square) db.session.commit()
**Procedure:** `validateAnswer(squareNum, selectedIndex)` — compares to correct index, returns boolean; `checkAnswer()` updates backend **Files:** `questions/questions_bank.js`, `question_template.html`, `api/snakes_extended.py`

Aneesh

Game Board Lead
Superpower: User Experience — smooth navigation and satisfying dice mechanics that make the game addictive

Skill A: Task — Game Board UI, Dice Rolling & Mode Selection 1 MIN

**Problem Solved:** Players need intuitive navigation across 56 squares with visual feedback, character selection, and clear mode choices. **Demo Flow:** 1. Select character from carousel → pixel-art sprites 2. Click dice → animated roll → land on square 3. Square highlights → question modal opens 4. Reach square 56 → Mode Selection hub → choose Boss Battle or PvP

Skill B: Code Reference (PPR)

**Input:** Dice click event, character selection, mode choice **Output:** New square position, character assignment, navigation to battle
// game-board-part2.html - Dice Roll function rollDice() { const roll = Math.floor(Math.random() * 6) + 1; diceElement.classList.add('rolling'); setTimeout(() => { diceElement.textContent = roll; movePlayer(currentSquare + roll); }, 800); }
**List Used:** `['knight','wizard','archer','warrior']` — character array for carousel; `visitedSquares[]` — tracks progress
// mode-selection.html - Mode Selection function selectMode(mode) { if (mode === 'boss') { window.location.href = 'boss-battle.html'; } else if (mode === 'pvp') { window.location.href = 'pvp-arena.html'; } }
**Procedure:** `rollDice()` — generates random 1-6, animates, calls movePlayer; `selectMode(mode)` — navigates to chosen battle **Files:** `game-board-part1.html`, `game-board-part2.html`, `mode-selection.html`, `snakes-game.js`

Visual Demos

Character Selection
Game Board
Lesson Page
Question Modal
Mode Selection
Boss Battle
PvP Arena
Victory Page

Presentation Scripts

Team Overview Script (1 minute)

Speaker: Any team member

[0:00-0:15] "This is Snakes and Ladders, an educational game that teaches AP Computer Science Principles. The twist? Knowledge is power — bullets earned from lessons become ammo in boss battles and PvP duels."

[0:15-0:30] "Players complete 5 interactive lessons, then roll dice across 50 question squares. Each correct answer adds to their bullet count. When ready, they choose between a 10-player cooperative boss fight or a 1v1 PvP arena."

[0:30-0:45] "Winners reach the Victory page with confetti animation and join the Hall of Champions — a permanent leaderboard of everyone who's beaten the game."

[0:45-0:60] "Tech stack: Jekyll frontend, Flask backend, SQLite database, and Socket.IO for real-time multiplayer. Everything persists via JWT-authenticated APIs. Let me show you how it works..."

Akhil’s Script (1 minute)

Topic: Multiplayer & Victory System

[0:00-0:15] "I built the real-time multiplayer system. When you join a boss battle, WebSocket connects you to a room. Every 50 milliseconds, your position broadcasts to all other players."

[0:15-0:30] "The `boss_battles` dictionary tracks every room with its players. When `handle_player_move` fires, it updates your position and emits to everyone else in the room — instant sync."

[0:30-0:45] "I also built the Victory page. When you beat the boss or win PvP, confetti animates and your stats display. The `CompleteGameAPI` marks your game as finished and records your completion time."

[0:45-0:60] "The Hall of Champions queries all completed games sorted by completion date. Your username appears forever in the leaderboard — proof you mastered the game."

Moiz’s Script (1 minute)

Topic: Authentication & Deployment

[0:00-0:15] "I handled authentication and deployment. When you log in, the server generates a JWT token stored in an HttpOnly cookie — secure and invisible to JavaScript attacks."

[0:15-0:30] "Every API call passes through the `@token_required()` decorator. It decodes the JWT, extracts your user ID, and loads your specific game data from the database."

[0:30-0:45] "For deployment, I configured Docker containers, Nginx reverse proxy, and environment variables. The backend runs on port 8306 with integrated Socket.IO."

[0:45-0:60] "Guest mode bypasses auth using sessionStorage — no server calls, perfect for quick demos at N@tM, but progress doesn't persist across sessions."

Samarth’s Script (1 minute)

Topic: Lesson System & Progression

[0:00-0:15] "I created 5 interactive lessons covering AP CSP topics — programming basics, data structures, networking, cybersecurity, and ethics. Each has content plus a mini-quiz."

[0:15-0:30] "When you complete a lesson, POST `/complete-lesson` fires. The server checks `completed_lessons` array — if this lesson isn't already there, it gets appended and you earn 5 bullets."

[0:30-0:45] "The selection logic checks if all 5 lessons are done. If so, it adds 'half2' to `unlocked_sections`, opening the question gauntlet. Finish questions, and 'boss' unlocks."

[0:45-0:60] "This sequencing ensures players learn before they battle. The bullets they earn become real firepower against the boss."

Arnav’s Script (1 minute)

Topic: Boss Battle & PvP Combat

[0:00-0:15] "I built both battle systems. The boss has 1000 HP and moves with smooth AI patterns — chase, zigzag, dash, and circle. It targets the nearest player using the distance formula."

[0:15-0:30] "Collision detection iterates through `playerBullets[]` array. For each bullet, `Math.hypot(dx, dy)` calculates distance to the boss. If within hit radius, damage applies and the bullet is filtered out."

[0:30-0:45] "The `applyPowerup(type)` procedure uses selection — 'damage' doubles your bullets' power, 'speed' increases movement, 'rapidfire' adds ammo, 'heal' restores a life."

[0:45-0:60] "PvP arena is similar but 1v1 with a center wall. Players can't cross — they must shoot over it. First to deplete the opponent's lives wins."

Ethan’s Script (1 minute)

Topic: Question System

[0:00-0:15] "I built the question bank with 50 unique questions across 5 CS topics. Each question object has the prompt, four options, the correct index, and bullet reward."

[0:15-0:30] "When a player lands on a square, JavaScript iterates through the `QUESTIONS` array using a filter to find the matching square number. That question's modal appears."

[0:30-0:45] "Answer validation is simple selection: if `selectedIndex === correct`, award bullets. The backend POST to `/answer-question` records this and appends to `visited_squares`."

[0:45-0:60] "The list prevents farming — before showing a question, we check if the square exists in `visited_squares`. If it does, no repeat answer allowed."

Aneesh’s Script (1 minute)

Topic: Game Board & Navigation

[0:00-0:15] "I built the game board interface. Watch as I click the dice — it animates with a rolling effect, lands on 1-6, and my character moves to that square with smooth transitions."

[0:15-0:30] "Character selection uses an array of four pixel-art sprites — knight, wizard, archer, warrior. A `for` loop renders all 56 board squares with dynamic CSS classes based on visit state."

[0:30-0:45] "When you reach square 56, the Mode Selection hub appears. I built this page to show both options — Boss Battle for co-op or PvP Arena for 1v1 — with real-time player counts via Socket.IO."

[0:45-0:60] "The navigation flow connects all pages seamlessly — from login to character select to board to battle to victory. Every transition saves your progress."

Happy Moments / Eureka Events

Team Member Eureka Moment
Akhil “First time seeing 5 players move simultaneously in the boss arena — the WebSocket sync was flawless. Real multiplayer magic!”
Moiz “First successful authenticated request after fighting CORS for hours. Seeing my user data load from the JWT was relief and triumph.”
Samarth “Completing all 5 lessons and watching the boss section unlock automatically. The progression gating actually worked!”
Arnav “The boss slithering movement looked so realistic. Watching it chase players across the arena was terrifying and awesome.”
Ethan “Writing question #50 and seeing the entire bank render correctly. 50 unique CS questions validated in one test run.”
Aneesh “When the dice animation synced perfectly with the square highlighting and character movement — the game felt alive.”

Feature Lifecycle Example: Victory System

Stage Description
Origin Players needed a satisfying ending and permanent recognition
Early Visual Simple “You Win” alert box
Early Code Basic redirect after boss HP = 0
Polish Confetti animation, stats display, Hall of Champions API
Recent Auto-complete on first visit, play again with progress reset

Quick Reference: Key Files

Component Owner Frontend Backend
Game Board Aneesh game-board-part1.html, game-board-part2.html, mode-selection.html api/snakes_game.py
Lessons Samarth lessons/lesson1-5.html api/snakes_extended.py
Questions Ethan questions/questions_bank.js, question_template.html api/snakes_extended.py
Boss Battle & PvP Arnav boss-battle.html, pvp-arena.html api/boss_battle.py, model/boss_room.py
Multiplayer & Victory Akhil victory.html socketio_handlers/boss_battle.py, api/snakes_game.py
Auth & DevOps Moiz — api/jwt_authorize.py, Dockerfile, nginx.conf

Deployment Info

Service Local Port Production URL
Flask Backend + Socket.IO 8306 https://snakes.opencodingsociety.com
Frontend 4100 Jekyll GitHub Pages

N@tM Checklist

Requirement Status Owner
Team 1-min overview ✅ All
Individual 1-min videos (6) ✅ Each member
Input/Output demonstrated ✅ All tasks
List usage shown ✅ All tasks
Procedure with parameter ✅ All tasks
Algorithm (seq + sel + iter) ✅ Arnav (collision), Ethan (question lookup), Samarth (Game Flow/Progression)
Transactional data (CRUD) ✅ Samarth (lessons), Ethan (questions), Akhil (champions)
Deployment demo ready ✅ Moiz