diff --git a/client/index.html b/client/index.html
index a07a8a5..214db0c 100644
--- a/client/index.html
+++ b/client/index.html
@@ -2,7 +2,7 @@
-
+
Liedkampf
diff --git a/client/public/logo.png b/client/public/logo.png
new file mode 100644
index 0000000..aecb39f
Binary files /dev/null and b/client/public/logo.png differ
diff --git a/client/public/logo.svg b/client/public/logo.svg
deleted file mode 100644
index ce928be..0000000
--- a/client/public/logo.svg
+++ /dev/null
@@ -1,24 +0,0 @@
-
diff --git a/client/src/App.jsx b/client/src/App.jsx
index 5f8354a..9b4d45d 100644
--- a/client/src/App.jsx
+++ b/client/src/App.jsx
@@ -1,9 +1,17 @@
-import {useEffect, useState} from "react";
-import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
-import {faDrum, faGuitar, faHeadphones, faMusic} from "@fortawesome/free-solid-svg-icons";
+import { useEffect, useState } from "react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faDrum, faGuitar, faHeadphones, faMusic } from "@fortawesome/free-solid-svg-icons";
+import { useGame, useSocket } from "./context/GameContext";
+import LobbyScreen from "./components/LobbyScreen";
+import HomeScreen from "./components/HomeScreen";
+import SongSubmissionScreen from "./components/SongSubmissionScreen";
+import VotingScreen from "./components/VotingScreen";
+import ResultsScreen from "./components/ResultsScreen";
const App = () => {
const [cursorPos, setCursorPos] = useState({x: 0, y: 0});
+ const { isConnected } = useSocket();
+ const { lobby, error } = useGame();
const musicNotes = [
{id: 1, top: "8%", left: "20%", icon: faMusic, scale: 1.2},
@@ -28,6 +36,26 @@ const App = () => {
return () => window.removeEventListener('mousemove', handleMouseMove);
}, []);
+ // Determine which screen to show based on game state
+ const renderGameScreen = () => {
+ if (!lobby) {
+ return ;
+ }
+
+ switch (lobby.state) {
+ case 'LOBBY':
+ return ;
+ case 'SONG_SUBMISSION':
+ return ;
+ case 'VOTING':
+ return ;
+ case 'FINISHED':
+ return ;
+ default:
+ return ;
+ }
+ };
+
return (
<>
@@ -54,6 +82,22 @@ const App = () => {
))}
+
+
+ {!isConnected && (
+
+
Connecting to server...
+
+ )}
+
+ {error && (
+
+ )}
+
+ {renderGameScreen()}
+
+
+
+
Song Battle
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Game Lobby
+
+
Game Code: {lobby.id}
+
+
+
+
+
+
Players ({lobby.players.length})
+
+ {lobby.players.map(player => (
+ -
+ {player.name} {player.id === lobby.hostId && '(Host)'} {player.id === currentPlayer.id && '(You)'}
+ {!player.isConnected && (Disconnected)}
+
+ ))}
+
+
+
+
+
+
Game Settings
+
Songs per player: {settings.songsPerPlayer}
+
Max players: {settings.maxPlayers}
+
YouTube links required: {settings.requireYoutubeLinks ? 'Yes' : 'No'}
+
+ {isHost && (
+
+ )}
+
+
+
+ {isHost && (
+
+ )}
+
+
+
+ {lobby.players.length < lobby.settings.minPlayers && isHost && (
+
Need at least {lobby.settings.minPlayers} players to start
+ )}
+
+
+
+ {showSettings && (
+
+
+
Game Settings
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )}
+
+
Calculating results...
+
+ );
+ }
+
+ return (
+
+
+
+
+
+
{winner.title}
+
by {winner.artist}
+
Submitted by: {winner.submittedByName}
+
+
+ {winnerVideoId ? (
+
+
+
+ ) : (
+
+
+
+ )}
+
+
+
+
+
+
+
+
+ {showBattleHistory && (
+
+
Battle History
+
+
+ {lobby?.battles?.map((battle, index) => {
+ const isWinner = (battle.song1.id === battle.winner);
+ const song1VideoId = getYouTubeId(battle.song1.youtubeLink);
+ const song2VideoId = getYouTubeId(battle.song2.youtubeLink);
+
+ return (
+
+
+
Round {battle.round + 1}, Battle {index + 1}
+
+
+
+
+
+
{battle.song1.title}
+
{battle.song1.artist}
+
{battle.song1Votes} votes
+
+
+
+
VS
+
+
+
+
{battle.song2.title}
+
{battle.song2.artist}
+
{battle.song2Votes} votes
+
+
+
+
+ );
+ })}
+
+
+ )}
+
+
+
+
+
+
{songs.length} / {lobby?.settings?.songsPerPlayer || 0} songs
+
+
+
+ {songs.map((song, index) => (
+
+
+ {getYoutubeThumbnail(song.youtubeLink) ? (
+
})
+ ) : (
+
+
+
+ )}
+
+
+
{song.title}
+
{song.artist}
+
+ {!isReady && (
+
+ )}
+
+ ))}
+
+ {canSubmitMoreSongs && !isFormVisible && !isReady && (
+
+ )}
+
+
+ {isFormVisible && (
+
+ )}
+
+
+ {!isReady && songs.length === lobby?.settings?.songsPerPlayer && (
+
+ )}
+
+
+ {isReady && (
+
+
Ready to Battle!
+
Waiting for other players to submit their songs...
+
+
+
Players Ready
+
+ {lobby && lobby.players.map(player => (
+ -
+ {player.name} {player.id === currentPlayer.id && '(You)'}
+ {player.isReady ? (
+
+ ) : (
+ {player.songCount}/{lobby?.settings?.songsPerPlayer}
+ )}
+
+ ))}
+
+
+
+ )}
+
+
Preparing the next battle...
+
+ );
+ }
+
+ const song1Id = getYouTubeId(battle.song1?.youtubeLink || '');
+ const song2Id = getYouTubeId(battle.song2?.youtubeLink || '');
+
+ return (
+
+
+
+
+
handleVoteSelect(battle.song1.id)}
+ >
+
+
+
{battle.song1.title}
+
{battle.song1.artist}
+
+ Submitted by: {battle.song1.submittedByName}
+
+
+
+ {song1Id ? (
+
+ ) : (
+
+
+ No video available
+
+ )}
+
+ {hasVoted && (
+
+ {battle.song1Votes}
+ votes
+
+ )}
+
+ {selectedSong === battle.song1.id && !hasVoted && (
+
+
+
+ )}
+
+
+
+
+
handleVoteSelect(battle.song2.id)}
+ >
+
+
+
{battle.song2.title}
+
{battle.song2.artist}
+
+ Submitted by: {battle.song2.submittedByName}
+
+
+
+ {song2Id ? (
+
+ ) : (
+
+
+ No video available
+
+ )}
+
+ {hasVoted && (
+
+ {battle.song2Votes}
+ votes
+
+ )}
+
+ {selectedSong === battle.song2.id && !hasVoted && (
+
+
+
+ )}
+
+
+
+ {!hasVoted && (
+
+
+
+ )}
+
+
+
{hasVoted ? 'Waiting for other players to vote...' : 'Choose your favorite!'}
+
+ {battle.voteCount || 0} of {lobby?.players?.filter(p => p.isConnected).length || 0} votes
+
+
+
+ {/* YouTube iframe will be inserted here */}
+
+ );
+};
+
+export default YouTubeEmbed;
diff --git a/client/src/context/GameContext.jsx b/client/src/context/GameContext.jsx
new file mode 100644
index 0000000..038d93d
--- /dev/null
+++ b/client/src/context/GameContext.jsx
@@ -0,0 +1,471 @@
+// Socket.IO client instance for real-time communication
+import { io } from 'socket.io-client';
+import { createContext, useContext, useEffect, useState } from 'react';
+
+// Create a Socket.IO context for use throughout the app
+const SocketContext = createContext(null);
+
+// Game context for sharing game state
+const GameContext = createContext(null);
+
+export function SocketProvider({ children }) {
+ const [socket, setSocket] = useState(null);
+ const [isConnected, setIsConnected] = useState(false);
+
+ useEffect(() => {
+ // Create socket connection on component mount
+ const socketInstance = io(import.meta.env.DEV ? 'http://localhost:5237' : window.location.origin, {
+ autoConnect: true,
+ reconnection: true,
+ reconnectionDelay: 1000,
+ reconnectionDelayMax: 5000,
+ reconnectionAttempts: 5
+ });
+
+ // Socket event listeners
+ socketInstance.on('connect', () => {
+ setIsConnected(true);
+ console.log('Connected to server');
+
+ // Try to reconnect to game if we have saved data
+ const savedGameData = localStorage.getItem('songBattleGame');
+ if (savedGameData) {
+ try {
+ const { lobbyId, playerName } = JSON.parse(savedGameData);
+ if (lobbyId && playerName) {
+ console.log(`Attempting to reconnect to lobby: ${lobbyId}`);
+ socketInstance.emit('reconnect_to_lobby', { lobbyId, playerName }, (response) => {
+ if (response.error) {
+ console.error('Reconnection failed:', response.error);
+ localStorage.removeItem('songBattleGame');
+ } else {
+ console.log('Successfully reconnected to lobby');
+ }
+ });
+ }
+ } catch (e) {
+ console.error('Error parsing saved game data:', e);
+ localStorage.removeItem('songBattleGame');
+ }
+ }
+ });
+
+ socketInstance.on('disconnect', () => {
+ setIsConnected(false);
+ console.log('Disconnected from server');
+ });
+
+ socketInstance.on('connect_error', (error) => {
+ console.error('Connection error:', error);
+ });
+
+ setSocket(socketInstance);
+
+ // Clean up socket connection on unmount
+ return () => {
+ socketInstance.disconnect();
+ };
+ }, []);
+
+ return (
+
+ {children}
+
+ );
+}
+
+/**
+ * Game state provider - manages game state and provides methods for game actions
+ */
+export function GameProvider({ children }) {
+ const { socket, isConnected } = useContext(SocketContext);
+ const [lobby, setLobby] = useState(null);
+ const [error, setError] = useState(null);
+ const [currentPlayer, setCurrentPlayer] = useState(null);
+
+ // Save game info when lobby is joined
+ useEffect(() => {
+ if (lobby && currentPlayer) {
+ localStorage.setItem('songBattleGame', JSON.stringify({
+ lobbyId: lobby.id,
+ playerName: currentPlayer.name
+ }));
+ }
+ }, [lobby, currentPlayer]);
+
+ // Clear error after 5 seconds
+ useEffect(() => {
+ if (error) {
+ const timer = setTimeout(() => {
+ setError(null);
+ }, 5000);
+ return () => clearTimeout(timer);
+ }
+ }, [error]);
+
+ // Socket event handlers for game updates
+ useEffect(() => {
+ if (!socket) return;
+
+ // Player joined the lobby
+ const handlePlayerJoined = (data) => {
+ setLobby(prevLobby => {
+ if (!prevLobby) return prevLobby;
+
+ // Update the lobby with the new player
+ const updatedPlayers = [...prevLobby.players, {
+ id: data.playerId,
+ name: data.playerName,
+ isConnected: true,
+ isReady: false,
+ songCount: 0
+ }];
+
+ return {
+ ...prevLobby,
+ players: updatedPlayers
+ };
+ });
+ };
+
+ // Player reconnected to the lobby
+ const handlePlayerReconnected = (data) => {
+ setLobby(prevLobby => {
+ if (!prevLobby) return prevLobby;
+
+ // Update the lobby with the reconnected player
+ const updatedPlayers = prevLobby.players.map(player => {
+ if (player.name === data.playerName && !player.isConnected) {
+ return { ...player, id: data.playerId, isConnected: true };
+ }
+ return player;
+ });
+
+ return {
+ ...prevLobby,
+ players: updatedPlayers
+ };
+ });
+ };
+
+ // Player disconnected from the lobby
+ const handlePlayerDisconnected = (data) => {
+ setLobby(data.lobby);
+ };
+
+ // Game settings were updated
+ const handleSettingsUpdated = (data) => {
+ setLobby(prevLobby => {
+ if (!prevLobby) return prevLobby;
+ return {
+ ...prevLobby,
+ settings: data.settings
+ };
+ });
+ };
+
+ // Game started
+ const handleGameStarted = (data) => {
+ setLobby(prevLobby => {
+ if (!prevLobby) return prevLobby;
+ return {
+ ...prevLobby,
+ state: data.state
+ };
+ });
+ };
+
+ // Songs were updated
+ const handleSongsUpdated = (data) => {
+ setLobby(data.lobby);
+ };
+
+ // Player status changed (ready/not ready)
+ const handlePlayerStatusChanged = (data) => {
+ console.log('Player status changed, new lobby state:', data.lobby.state);
+ setLobby(data.lobby);
+
+ // If the state is VOTING and we have a current battle, explicitly log it
+ if (data.lobby.state === 'VOTING' && data.lobby.currentBattle) {
+ console.log('Battle ready in player_status_changed:', data.lobby.currentBattle);
+ }
+ };
+
+ // Vote was submitted
+ const handleVoteSubmitted = (data) => {
+ console.log('Vote submitted, updating lobby');
+ setLobby(data.lobby);
+ };
+
+ // New battle started
+ const handleNewBattle = (data) => {
+ console.log('New battle received:', data.battle);
+ setLobby(prevLobby => {
+ if (!prevLobby) return prevLobby;
+
+ // Ensure we update both the currentBattle and the state
+ return {
+ ...prevLobby,
+ currentBattle: data.battle,
+ state: 'VOTING'
+ };
+ });
+ };
+
+ // Game finished
+ const handleGameFinished = (data) => {
+ setLobby(prevLobby => {
+ if (!prevLobby) return prevLobby;
+ return {
+ ...prevLobby,
+ state: 'FINISHED',
+ finalWinner: data.winner,
+ battles: data.battles
+ };
+ });
+ };
+
+ // Register socket event listeners
+ socket.on('player_joined', handlePlayerJoined);
+ socket.on('player_reconnected', handlePlayerReconnected);
+ socket.on('player_disconnected', handlePlayerDisconnected);
+ socket.on('settings_updated', handleSettingsUpdated);
+ socket.on('game_started', handleGameStarted);
+ socket.on('songs_updated', handleSongsUpdated);
+ socket.on('player_status_changed', handlePlayerStatusChanged);
+ socket.on('vote_submitted', handleVoteSubmitted);
+ socket.on('tournament_started', data => {
+ console.log('Tournament started event received:', data);
+ setLobby(prevLobby => prevLobby ? {...prevLobby, state: data.state} : prevLobby);
+ });
+ socket.on('new_battle', handleNewBattle);
+ socket.on('game_finished', handleGameFinished);
+
+ // Clean up listeners on unmount
+ return () => {
+ socket.off('player_joined', handlePlayerJoined);
+ socket.off('player_reconnected', handlePlayerReconnected);
+ socket.off('player_disconnected', handlePlayerDisconnected);
+ socket.off('settings_updated', handleSettingsUpdated);
+ socket.off('game_started', handleGameStarted);
+ socket.off('songs_updated', handleSongsUpdated);
+ socket.off('player_status_changed', handlePlayerStatusChanged);
+ socket.off('vote_submitted', handleVoteSubmitted);
+ socket.off('new_battle', handleNewBattle);
+ socket.off('game_finished', handleGameFinished);
+ };
+ }, [socket]);
+
+ // Create a lobby
+ const createLobby = (playerName) => {
+ if (!socket || !isConnected) {
+ setError('Not connected to server');
+ return;
+ }
+
+ socket.emit('create_lobby', { playerName }, (response) => {
+ if (response.error) {
+ setError(response.error);
+ } else {
+ setLobby(response.lobby);
+ setCurrentPlayer({
+ id: socket.id,
+ name: playerName,
+ isHost: true
+ });
+ }
+ });
+ };
+
+ // Join a lobby
+ const joinLobby = (lobbyId, playerName) => {
+ if (!socket || !isConnected) {
+ setError('Not connected to server');
+ return;
+ }
+
+ socket.emit('join_lobby', { lobbyId, playerName }, (response) => {
+ if (response.error) {
+ setError(response.error);
+ } else {
+ setLobby(response.lobby);
+ setCurrentPlayer({
+ id: socket.id,
+ name: playerName,
+ isHost: response.lobby.hostId === socket.id
+ });
+ }
+ });
+ };
+
+ // Update lobby settings
+ const updateSettings = (settings) => {
+ if (!socket || !isConnected || !lobby) {
+ setError('Not connected to server or no active lobby');
+ return;
+ }
+
+ socket.emit('update_settings', { settings }, (response) => {
+ if (response.error) {
+ setError(response.error);
+ }
+ });
+ };
+
+ // Start the game
+ const startGame = () => {
+ if (!socket || !isConnected || !lobby) {
+ setError('Not connected to server or no active lobby');
+ return;
+ }
+
+ socket.emit('start_game', {}, (response) => {
+ if (response.error) {
+ setError(response.error);
+ }
+ });
+ };
+
+ // Add a song
+ const addSong = (song) => {
+ if (!socket || !isConnected || !lobby) {
+ setError('Not connected to server or no active lobby');
+ return;
+ }
+
+ console.log('Attempting to add song:', song);
+ console.log('Current player state:', currentPlayer);
+ console.log('Current lobby state before adding song:', lobby);
+
+ socket.emit('add_song', { song }, (response) => {
+ console.log('Song addition response:', response);
+ if (response.error) {
+ console.error('Error adding song:', response.error);
+ setError(response.error);
+ } else if (response.lobby) {
+ // Log detailed lobby state for debugging
+ console.log('Song added successfully, full lobby response:', response.lobby);
+ console.log('Current player songs:', response.lobby.players.find(p => p.id === currentPlayer.id)?.songs);
+ console.log('All players song data:',
+ response.lobby.players.map(p => ({
+ name: p.name,
+ id: p.id,
+ songCount: p.songCount,
+ songs: p.songs ? p.songs.map(s => ({id: s.id, title: s.title})) : 'No songs'
+ }))
+ );
+
+ // Force a deep clone of the lobby to ensure React detects the change
+ const updatedLobby = JSON.parse(JSON.stringify(response.lobby));
+ setLobby(updatedLobby);
+
+ // Verify the state was updated correctly
+ setTimeout(() => {
+ // This won't show the updated state immediately due to React's state update mechanism
+ console.log('Lobby state after update (may not reflect immediate changes):', lobby);
+ console.log('Updated lobby that was set:', updatedLobby);
+ }, 0);
+ } else {
+ console.error('Song addition succeeded but no lobby data was returned');
+ setError('Failed to update song list');
+ }
+ });
+ };
+
+ // Search for songs on YouTube
+ const searchYouTube = (query) => {
+ return new Promise((resolve, reject) => {
+ if (!socket || !isConnected) {
+ setError('Not connected to server');
+ reject('Not connected to server');
+ return;
+ }
+
+ socket.emit('search_youtube', { query }, (response) => {
+ if (response.error) {
+ setError(response.error);
+ reject(response.error);
+ } else {
+ resolve(response.results);
+ }
+ });
+ });
+ };
+
+ // Remove a song
+ const removeSong = (songId) => {
+ if (!socket || !isConnected || !lobby) {
+ setError('Not connected to server or no active lobby');
+ return;
+ }
+
+ socket.emit('remove_song', { songId }, (response) => {
+ if (response.error) {
+ setError(response.error);
+ }
+ });
+ };
+
+ // Set player ready
+ const setPlayerReady = () => {
+ if (!socket || !isConnected || !lobby) {
+ setError('Not connected to server or no active lobby');
+ return;
+ }
+
+ socket.emit('player_ready', {}, (response) => {
+ if (response.error) {
+ setError(response.error);
+ }
+ });
+ };
+
+ // Submit a vote
+ const submitVote = (songId) => {
+ if (!socket || !isConnected || !lobby) {
+ setError('Not connected to server or no active lobby');
+ return;
+ }
+
+ socket.emit('submit_vote', { songId }, (response) => {
+ if (response.error) {
+ setError(response.error);
+ }
+ });
+ };
+
+ // Leave lobby and clear saved game state
+ const leaveLobby = () => {
+ localStorage.removeItem('songBattleGame');
+ setLobby(null);
+ setCurrentPlayer(null);
+ };
+
+ return (
+
+ {children}
+
+ );
+}
+
+// Custom hooks for using contexts
+export const useSocket = () => useContext(SocketContext);
+export const useGame = () => useContext(GameContext);
+
+// Re-export for better module compatibility
+export { SocketContext, GameContext };
diff --git a/client/src/main.jsx b/client/src/main.jsx
index 77ae9e5..e1fde98 100644
--- a/client/src/main.jsx
+++ b/client/src/main.jsx
@@ -2,14 +2,17 @@ import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App.jsx";
import "@fontsource/bangers";
-import "@/common/styles/main.sass";
+import "./common/styles/main.sass";
+import { SocketProvider, GameProvider } from "./context/GameContext.jsx";
ReactDOM.createRoot(document.getElementById("root")).render(
-
-
-
+
+
+
+
+
,
);
\ No newline at end of file
diff --git a/package.json b/package.json
index 04bb4be..ab13e34 100644
--- a/package.json
+++ b/package.json
@@ -1,20 +1,23 @@
{
- "name": "toneguessr",
- "version": "1.0.0-ALPHA",
- "description": "The server of the ToneGuessr game",
+ "name": "song-battle",
+ "version": "1.0.0",
+ "description": "Song Battle game with tournament-style voting for favorite songs",
"main": "server/index.js",
- "repository": "https://git.gnm.dev/WebsiteProjects/ToneGuessr",
"author": "Mathias Wagner",
"license": "MIT",
"scripts": {
"webui": "cd client && yarn dev",
"server": "nodemon server",
- "dev": "concurrently --kill-others \"yarn server\" \"yarn webui\""
+ "dev": "concurrently --kill-others \"yarn server\" \"yarn webui\"",
+ "build": "cd client && yarn build",
+ "start": "node server/index.js"
},
"dependencies": {
+ "axios": "^1.8.4",
"express": "^4.21.2",
- "googleapis": "^146.0.0",
- "socket.io": "^4.8.1"
+ "googleapis": "^148.0.0",
+ "socket.io": "^4.8.1",
+ "uuid": "^9.0.1"
},
"devDependencies": {
"concurrently": "^9.1.2",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 6d7fec9..d8003df 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -8,15 +8,21 @@ importers:
.:
dependencies:
+ axios:
+ specifier: ^1.8.4
+ version: 1.8.4
express:
specifier: ^4.21.2
version: 4.21.2
googleapis:
- specifier: ^146.0.0
- version: 146.0.0
+ specifier: ^148.0.0
+ version: 148.0.0
socket.io:
specifier: ^4.8.1
version: 4.8.1
+ uuid:
+ specifier: ^9.0.1
+ version: 9.0.1
devDependencies:
concurrently:
specifier: ^9.1.2
@@ -59,6 +65,12 @@ packages:
array-flatten@1.1.1:
resolution: {integrity: sha512-PCVAQswWemu6UdxsDFFX/+gVeYqKAod3D3UVm91jHwynguOwAvYPhx8nNlM++NqRcK6CxxpUafjmhIdKiHibqg==}
+ asynckit@0.4.0:
+ resolution: {integrity: sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==}
+
+ axios@1.8.4:
+ resolution: {integrity: sha512-eBSYY4Y68NNlHbHBMdeDmKNtDgXWhQsJcGqzO3iLUM0GraQFSS9cVgPX5I9b3lbdFKyYoAEGAZF1DwhTaljNAw==}
+
balanced-match@1.0.2:
resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
@@ -69,8 +81,8 @@ packages:
resolution: {integrity: sha512-lGe34o6EHj9y3Kts9R4ZYs/Gr+6N7MCaMlIFA3F1R2O5/m7K06AxfSeO5530PEERE6/WyEg3lsuyw4GHlPZHog==}
engines: {node: ^4.5.0 || >= 5.9}
- bignumber.js@9.1.2:
- resolution: {integrity: sha512-2/mKyZH9K85bzOEfhXDBFZTGd1CTs+5IHpeFQo9luiBG7hghdC851Pj2WAhb6E3R6b9tZj/XKhbg4fum+Kepug==}
+ bignumber.js@9.3.0:
+ resolution: {integrity: sha512-EM7aMFTXbptt/wZdMlBv2t8IViwQL+h6SLHosp8Yf0dqJMTnY6iL32opnAB6kAdL0SZPuvcAzFr31o0c/R3/RA==}
binary-extensions@2.3.0:
resolution: {integrity: sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==}
@@ -121,6 +133,10 @@ packages:
color-name@1.1.4:
resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==}
+ combined-stream@1.0.8:
+ resolution: {integrity: sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==}
+ engines: {node: '>= 0.8'}
+
concat-map@0.0.1:
resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==}
@@ -169,6 +185,10 @@ packages:
supports-color:
optional: true
+ delayed-stream@1.0.0:
+ resolution: {integrity: sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==}
+ engines: {node: '>=0.4.0'}
+
depd@2.0.0:
resolution: {integrity: sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==}
engines: {node: '>= 0.8'}
@@ -218,6 +238,10 @@ packages:
resolution: {integrity: sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==}
engines: {node: '>= 0.4'}
+ es-set-tostringtag@2.1.0:
+ resolution: {integrity: sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==}
+ engines: {node: '>= 0.4'}
+
escalade@3.2.0:
resolution: {integrity: sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==}
engines: {node: '>=6'}
@@ -244,6 +268,19 @@ packages:
resolution: {integrity: sha512-6BN9trH7bp3qvnrRyzsBz+g3lZxTNZTbVO2EV1CS0WIcDbawYVdYvGflME/9QP0h0pYlCDBCTjYa9nZzMDpyxQ==}
engines: {node: '>= 0.8'}
+ follow-redirects@1.15.9:
+ resolution: {integrity: sha512-gew4GsXizNgdoRyqmyfMHyAmXsZDk6mHkSxZFCzW9gwlbtOW44CDtYavM+y+72qD/Vq2l550kMF52DT8fOLJqQ==}
+ engines: {node: '>=4.0'}
+ peerDependencies:
+ debug: '*'
+ peerDependenciesMeta:
+ debug:
+ optional: true
+
+ form-data@4.0.2:
+ resolution: {integrity: sha512-hGfm/slu0ZabnNt4oaRZ6uREyfCj6P4fT/n6A1rGV+Z0VdGXjfOhVUpkn6qVQONHGIFwmveGXyDs75+nr6FM8w==}
+ engines: {node: '>= 6'}
+
forwarded@0.2.0:
resolution: {integrity: sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==}
engines: {node: '>= 0.6'}
@@ -296,8 +333,8 @@ packages:
resolution: {integrity: sha512-/fhDZEJZvOV3X5jmD+fKxMqma5q2Q9nZNSF3kn1F18tpxmA86BcTxAGBQdM0N89Z3bEaIs+HVznSmFJEAmMTjA==}
engines: {node: '>=14.0.0'}
- googleapis@146.0.0:
- resolution: {integrity: sha512-NewqvhnBZOJsugCAOo636O0BGE/xY7Cg/v8Rjm1+5LkJCjcqAzLleJ6igd5vrRExJLSKrY9uHy9iKE7r0PrfhQ==}
+ googleapis@148.0.0:
+ resolution: {integrity: sha512-8PDG5VItm6E1TdZWDqtRrUJSlBcNwz0/MwCa6AL81y/RxPGXJRUwKqGZfCoVX1ZBbfr3I4NkDxBmeTyOAZSWqw==}
engines: {node: '>=14.0.0'}
gopd@1.2.0:
@@ -320,6 +357,10 @@ packages:
resolution: {integrity: sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==}
engines: {node: '>= 0.4'}
+ has-tostringtag@1.0.2:
+ resolution: {integrity: sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==}
+ engines: {node: '>= 0.4'}
+
hasown@2.0.2:
resolution: {integrity: sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==}
engines: {node: '>= 0.4'}
@@ -468,6 +509,9 @@ packages:
resolution: {integrity: sha512-llQsMLSUDUPT44jdrU/O37qlnifitDP+ZwrmmZcoSKyLKvtZxpyV0n2/bD/N4tBAAZ/gJEdZU7KMraoK1+XYAg==}
engines: {node: '>= 0.10'}
+ proxy-from-env@1.1.0:
+ resolution: {integrity: sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==}
+
pstree.remy@1.1.8:
resolution: {integrity: sha512-77DZwxQmxKnu3aR542U+X8FypNzbfJ+C5XQDk3uWjWxn6151aIMGthWYRXTqT1E5oJvg+ljaa2OJi+VfvCOQ8w==}
@@ -692,13 +736,23 @@ snapshots:
array-flatten@1.1.1: {}
+ asynckit@0.4.0: {}
+
+ axios@1.8.4:
+ dependencies:
+ follow-redirects: 1.15.9
+ form-data: 4.0.2
+ proxy-from-env: 1.1.0
+ transitivePeerDependencies:
+ - debug
+
balanced-match@1.0.2: {}
base64-js@1.5.1: {}
base64id@2.0.0: {}
- bignumber.js@9.1.2: {}
+ bignumber.js@9.3.0: {}
binary-extensions@2.3.0: {}
@@ -771,6 +825,10 @@ snapshots:
color-name@1.1.4: {}
+ combined-stream@1.0.8:
+ dependencies:
+ delayed-stream: 1.0.0
+
concat-map@0.0.1: {}
concurrently@9.1.2:
@@ -810,6 +868,8 @@ snapshots:
optionalDependencies:
supports-color: 5.5.0
+ delayed-stream@1.0.0: {}
+
depd@2.0.0: {}
destroy@1.2.0: {}
@@ -858,6 +918,13 @@ snapshots:
dependencies:
es-errors: 1.3.0
+ es-set-tostringtag@2.1.0:
+ dependencies:
+ es-errors: 1.3.0
+ get-intrinsic: 1.3.0
+ has-tostringtag: 1.0.2
+ hasown: 2.0.2
+
escalade@3.2.0: {}
escape-html@1.0.3: {}
@@ -918,6 +985,15 @@ snapshots:
transitivePeerDependencies:
- supports-color
+ follow-redirects@1.15.9: {}
+
+ form-data@4.0.2:
+ dependencies:
+ asynckit: 0.4.0
+ combined-stream: 1.0.8
+ es-set-tostringtag: 2.1.0
+ mime-types: 2.1.35
+
forwarded@0.2.0: {}
fresh@0.5.2: {}
@@ -997,7 +1073,7 @@ snapshots:
- encoding
- supports-color
- googleapis@146.0.0:
+ googleapis@148.0.0:
dependencies:
google-auth-library: 9.15.1
googleapis-common: 7.2.0
@@ -1021,6 +1097,10 @@ snapshots:
has-symbols@1.1.0: {}
+ has-tostringtag@1.0.2:
+ dependencies:
+ has-symbols: 1.1.0
+
hasown@2.0.2:
dependencies:
function-bind: 1.1.2
@@ -1068,7 +1148,7 @@ snapshots:
json-bigint@1.0.0:
dependencies:
- bignumber.js: 9.1.2
+ bignumber.js: 9.3.0
jwa@2.0.0:
dependencies:
@@ -1147,6 +1227,8 @@ snapshots:
forwarded: 0.2.0
ipaddr.js: 1.9.1
+ proxy-from-env@1.1.0: {}
+
pstree.remy@1.1.8: {}
qs@6.13.0:
diff --git a/server/game.js b/server/game.js
new file mode 100644
index 0000000..425eed0
--- /dev/null
+++ b/server/game.js
@@ -0,0 +1,853 @@
+const { v4: uuidv4 } = require('uuid');
+const youtubeAPI = require('./youtube-api');
+
+/**
+ * Game state and logic manager for Song Battle application
+ */
+class GameManager {
+ constructor() {
+ this.lobbies = new Map(); // Map of lobbyId -> lobby object
+ this.playerToLobby = new Map(); // Map of playerId -> lobbyId for quick lookup
+ }
+
+ /**
+ * Create a new game lobby
+ * @param {string} hostId - ID of the host player
+ * @param {string} hostName - Name of the host player
+ * @returns {Object} New lobby data and ID
+ */
+ createLobby(hostId, hostName) {
+ // Generate a simple 6-character lobby code
+ const lobbyId = this._generateLobbyCode();
+
+ // Create lobby object
+ const lobby = {
+ id: lobbyId,
+ hostId: hostId,
+ state: 'LOBBY', // LOBBY -> SONG_SUBMISSION -> VOTING -> FINISHED
+ settings: {
+ songsPerPlayer: 3,
+ maxPlayers: 10,
+ minPlayers: 3,
+ requireYoutubeLinks: false
+ },
+ players: [{
+ id: hostId,
+ name: hostName,
+ isConnected: true,
+ isReady: false,
+ songs: [],
+ songCount: 0
+ }],
+ songs: [], // All submitted songs
+ currentBattle: null,
+ battles: [], // History of all battles
+ finalWinner: null
+ };
+
+ // Store lobby and player-to-lobby mapping
+ this.lobbies.set(lobbyId, lobby);
+ this.playerToLobby.set(hostId, lobbyId);
+
+ return { lobby, lobbyId };
+ }
+
+ /**
+ * Join an existing lobby
+ * @param {string} playerId - ID of joining player
+ * @param {string} playerName - Name of joining player
+ * @param {string} lobbyId - ID of lobby to join
+ * @returns {Object} Lobby data or error
+ */
+ joinLobby(playerId, playerName, lobbyId) {
+ // Check if lobby exists
+ if (!this.lobbies.has(lobbyId)) {
+ return { error: 'Lobby not found' };
+ }
+
+ const lobby = this.lobbies.get(lobbyId);
+
+ // Check if lobby is in correct state
+ if (lobby.state !== 'LOBBY') {
+ return { error: 'Cannot join: game already in progress' };
+ }
+
+ // Check if player limit is reached
+ if (lobby.players.length >= lobby.settings.maxPlayers) {
+ return { error: 'Lobby is full' };
+ }
+
+ // Check if player name is already taken
+ if (lobby.players.some(p => p.name === playerName && p.isConnected)) {
+ return { error: 'Name already taken' };
+ }
+
+ // Check if player is rejoining
+ const existingPlayerIndex = lobby.players.findIndex(p => p.name === playerName && !p.isConnected);
+ if (existingPlayerIndex >= 0) {
+ // Update player ID and connection status
+ lobby.players[existingPlayerIndex].id = playerId;
+ lobby.players[existingPlayerIndex].isConnected = true;
+ this.playerToLobby.set(playerId, lobbyId);
+ return { lobby, lobbyId };
+ }
+
+ // Add new player
+ lobby.players.push({
+ id: playerId,
+ name: playerName,
+ isConnected: true,
+ isReady: false,
+ songs: [],
+ songCount: 0
+ });
+
+ // Update map
+ this.playerToLobby.set(playerId, lobbyId);
+
+ return { lobby, lobbyId };
+ }
+
+ /**
+ * Handle player reconnection to a lobby
+ * @param {string} playerId - New ID of the reconnecting player
+ * @param {string} lobbyId - ID of the lobby
+ * @param {string} playerName - Name of the player
+ * @returns {Object} Lobby data or error
+ */
+ handleReconnect(playerId, lobbyId, playerName) {
+ // Check if lobby exists
+ if (!this.lobbies.has(lobbyId)) {
+ return { error: 'Lobby not found' };
+ }
+
+ const lobby = this.lobbies.get(lobbyId);
+
+ // Find player by name
+ const playerIndex = lobby.players.findIndex(p => p.name === playerName);
+ if (playerIndex === -1) {
+ return { error: 'Player not found in lobby' };
+ }
+
+ // Update player ID and connection status
+ lobby.players[playerIndex].id = playerId;
+ lobby.players[playerIndex].isConnected = true;
+
+ // Update map
+ this.playerToLobby.set(playerId, lobbyId);
+
+ return { lobby, lobbyId };
+ }
+
+ /**
+ * Update lobby settings
+ * @param {string} playerId - ID of the host player
+ * @param {Object} settings - New settings object
+ * @returns {Object} Updated lobby data or error
+ */
+ updateSettings(playerId, settings) {
+ const lobbyId = this.playerToLobby.get(playerId);
+ if (!lobbyId) {
+ return { error: 'Player not in a lobby' };
+ }
+
+ const lobby = this.lobbies.get(lobbyId);
+
+ // Check if player is the host
+ if (lobby.hostId !== playerId) {
+ return { error: 'Only the host can update settings' };
+ }
+
+ // Validate settings
+ if (settings.songsPerPlayer < 1 || settings.songsPerPlayer > 10) {
+ return { error: 'Songs per player must be between 1 and 10' };
+ }
+ if (settings.maxPlayers < 3 || settings.maxPlayers > 20) {
+ return { error: 'Max players must be between 3 and 20' };
+ }
+
+ // Update settings
+ lobby.settings = {
+ ...lobby.settings,
+ ...settings
+ };
+
+ return { lobby, lobbyId };
+ }
+
+ /**
+ * Start the game from lobby state
+ * @param {string} playerId - ID of the host player
+ * @returns {Object} Updated lobby data or error
+ */
+ startGame(playerId) {
+ const lobbyId = this.playerToLobby.get(playerId);
+ if (!lobbyId) {
+ return { error: 'Player not in a lobby' };
+ }
+
+ const lobby = this.lobbies.get(lobbyId);
+
+ // Check if player is the host
+ if (lobby.hostId !== playerId) {
+ return { error: 'Only the host can start the game' };
+ }
+
+ // Check if in correct state
+ if (lobby.state !== 'LOBBY') {
+ return { error: 'Game already started' };
+ }
+
+ // Check if enough players
+ if (lobby.players.length < lobby.settings.minPlayers) {
+ return { error: `Need at least ${lobby.settings.minPlayers} players to start` };
+ }
+
+ // Move to song submission state
+ lobby.state = 'SONG_SUBMISSION';
+
+ return { lobby, lobbyId };
+ }
+
+ /**
+ * Add a song for a player
+ * @param {string} playerId - ID of the player
+ * @param {Object} song - Song data (title, artist, youtubeLink)
+ * @returns {Object} Updated lobby data or error
+ */
+ async addSong(playerId, song) {
+ console.log(`[DEBUG] addSong called for player ID: ${playerId}`);
+
+ // Check if player is in a lobby
+ let lobbyId = this.playerToLobby.get(playerId);
+ if (!lobbyId) {
+ // If no mapping exists, try to find the player in any lobby
+ console.log(`[DEBUG] No lobby mapping found for player ID: ${playerId}, trying to locate player...`);
+
+ // Search all lobbies for this player
+ let foundLobby = null;
+ let foundPlayerIndex = -1;
+
+ for (const [id, lobby] of this.lobbies.entries()) {
+ const playerIndex = lobby.players.findIndex(p => p.id === playerId);
+ if (playerIndex !== -1) {
+ foundLobby = lobby;
+ lobbyId = id;
+ foundPlayerIndex = playerIndex;
+ console.log(`[DEBUG] Found player in lobby ${id} at index ${playerIndex}`);
+
+ // Fix the mapping for future requests
+ this.playerToLobby.set(playerId, id);
+ break;
+ }
+ }
+
+ if (!foundLobby) {
+ console.log(`[DEBUG] Player not found in any lobby. Available lobbies: ${Array.from(this.lobbies.keys())}`);
+ return { error: 'Player not in a lobby' };
+ }
+ }
+
+ const lobby = this.lobbies.get(lobbyId);
+ if (!lobby) {
+ console.log(`[DEBUG] Lobby ID ${lobbyId} not found`);
+ return { error: 'Lobby not found' };
+ }
+
+ // Log lobby state for debugging
+ console.log(`[DEBUG] Lobby ${lobbyId} state: ${lobby.state}`);
+ console.log(`[DEBUG] Lobby players: ${JSON.stringify(lobby.players.map(p => ({id: p.id, name: p.name})))}`);
+
+ // Check if in correct state
+ if (lobby.state !== 'SONG_SUBMISSION') {
+ return { error: 'Cannot add songs at this time' };
+ }
+
+ // Get player
+ const playerIndex = lobby.players.findIndex(p => p.id === playerId);
+ if (playerIndex === -1) {
+ console.log(`[DEBUG] Player ID ${playerId} not found in lobby ${lobbyId}.`);
+
+ // First try: Find the host if this is a host request
+ if (playerId === lobby.hostId || lobby.players.some(p => p.id === lobby.hostId)) {
+ console.log('[DEBUG] This appears to be the host. Looking for host player...');
+ const hostIndex = lobby.players.findIndex(p => p.id === lobby.hostId);
+ if (hostIndex !== -1) {
+ console.log(`[DEBUG] Found host at index ${hostIndex}`);
+ return this._addSongToPlayer(hostIndex, lobby, lobbyId, song, playerId);
+ }
+ }
+
+ // Second try: Match any connected player as fallback
+ console.log('[DEBUG] Trying to find any connected player...');
+ const connectedIndex = lobby.players.findIndex(p => p.isConnected);
+ if (connectedIndex !== -1) {
+ console.log(`[DEBUG] Found connected player at index ${connectedIndex}`);
+ return this._addSongToPlayer(connectedIndex, lobby, lobbyId, song, playerId);
+ }
+
+ // If we still can't find a match, use the first player as last resort
+ if (lobby.players.length > 0) {
+ console.log('[DEBUG] Using first player as last resort');
+ return this._addSongToPlayer(0, lobby, lobbyId, song, playerId);
+ }
+
+ return { error: 'Player not found in lobby' };
+ }
+
+ // Check if player can add more songs
+ if (lobby.players[playerIndex].songs.length >= lobby.settings.songsPerPlayer) {
+ return { error: 'Maximum number of songs reached' };
+ }
+
+ // We only require the YouTube link now
+ if (!song.youtubeLink) {
+ return { error: 'YouTube link is required' };
+ }
+
+ // If the YouTube link isn't valid, return an error
+ const videoId = await youtubeAPI.extractVideoId(song.youtubeLink);
+ if (!videoId) {
+ return { error: 'Invalid YouTube link' };
+ }
+
+ // Handle async metadata fetching
+ return this._addSongToPlayer(playerIndex, lobby, lobbyId, song, playerId);
+ }
+
+ /**
+ * Search for songs on YouTube
+ * @param {string} query - Search query
+ * @returns {Promise} Search results
+ */
+ async searchYouTube(query) {
+ try {
+ return await youtubeAPI.searchYouTube(query);
+ } catch (error) {
+ console.error('Error searching YouTube:', error);
+ return { error: 'Failed to search YouTube' };
+ }
+ }
+
+ /**
+ * Helper method to add a song to a player
+ * @param {number} playerIndex - Index of the player in the lobby
+ * @param {Object} lobby - The lobby object
+ * @param {string} lobbyId - ID of the lobby
+ * @param {Object} song - Song data to add
+ * @param {string} playerId - ID of the player adding the song
+ * @returns {Object|Promise