Multiplayer Pong Arena

Una rivisitazione moderna, multiplayer e in tempo reale del classico arcade Pong, sviluppata come progetto per il corso di Programmazione Web.

Questa Web App permette agli utenti di registrarsi, sfidare altri giocatori online tramite un sistema di matchmaking istantaneo, scalare la classifica globale e consultare il proprio storico delle partite, il tutto in un'estetica in stile dark-neon.

Funzionalità Principali:

• Autenticazione Sicura: Sistema di Login e Registrazione con password criptate (bcrypt).
• Matchmaking Istantaneo: Ricerca automatica degli avversari in coda e creazione dinamica delle stanze.
• Gameplay Real-Time: Fisica della pallina e gestione delle collisioni calcolate lato server (Authoritative Server) a 60 FPS tramite WebSockets.
• Interfaccia Dinamica: HUD in gioco, countdown sincronizzati, animazioni CSS e indicatori spaziali.
• Gestione Rivincite: Sistema di votazione a fine partita con timer condiviso e disconnessione sicura in caso di abbandono.
• Statistiche e Classifiche: Tracciamento automatico di vittorie/sconfitte, leaderboard globale (Top 10) e storico personale delle ultime 20 partite giocate.

Screenshot dell'Applicazione:

Accesso e Registrazione

Prima Schermata della webapp. I moduli di accesso e registrazione gestiscono validazione dei campi, feedback visivi a colori e gestione sicura delle password tramite bcrypt.

La Lobby Principale

Schermata principale della webapp. Da qui è possibile visualizzare le proprie statistiche, confrontarle con altri giocatori, cosi come aggiornare il tema del campo di gioco.

Gameplay

Il campo di gioco in azione. L'interfaccia mostra i punteggi aggiornati in tempo reale, con colori coordinati per ogni giocatore.

Riepilogo Partita

Riepilogo della partita. L'interfaccia mostra i punti segnati per ogni giocatore, con la possibilità di ritornare alla home, giocare ancora contro lo stesso avversario, o cercarne un altro.

Web Stack:

Il progetto è diviso nettamente tra client (Front-End) e server (Back-End):

• Front-End: HTML5, CSS3, JavaScript.
• Back-End: Node.js, Express.js.
• Comunicazione Real-Time: Socket.IO.
• Database: SQLite3.
• Sicurezza: express-session (gestione sessioni), bcrypt (hashing password).

Comunicazione Client-Server:

Di seguito è illustrato il diagramma che descrive l'architettura logica e lo scambio di eventi tra il client e il server durante tutte le fasi dell'applicazione:

Configurazione Variabili d'Ambiente:

Per far funzionare correttamente il server locale e gestire in sicurezza le sessioni degli utenti, è necessario configurare le variabili d'ambiente.

1. Vai nella cartella principale del server (esattamente dove si trova il file server.js).
2. Crea un nuovo file e chiamalo .env.
3. Apri il file e inserisci i seguenti parametri:

SESSION_SECRET = "inserisci_qui_una_tua_chiave_segreta"
PORT = "NUM_SERVER_PORT"

Come avviare il progetto in locale:

Se desideri clonare e testare il progetto sul tuo computer, segui questi passaggi:

1. Clona la repository:

   git clone https://github.com/UniCT-WebDevelopment/PongArena
   

2. Spostati nella cartella del server:

   cd PongProject/server
   

3. Installa le dipendenze:

   npm install dotenv bcrypt express express-session socket.io sqlite sqlite3
   

4. Avvia il server:

   npm start 127.0.0.1 || npm start 0.0.0.0
   

5. Gioca! Apri il tuo browser e vai all'indirizzo http://localhost:8080 oppure http://ip_macchina_server:8080.

Attualmente configurabile e pensato per usarlo dentro la rete LAN [system link], oppure in localhost per testing personale.

Autori

• [Capobianco Francesco Massimo] - Front-End, Logica Client e stili CSS.
• [Cona Francesco] - Back-End, Database, Fisica del Gioco e Logica WebSockets.