Route /

La route rappresenta la homepage del “Gioco della Sfortuna”, il cui comportamento viene gestito dal componente HomePage.jsx.

Struttura e comportamento

La homepage è costituita da diverse sezioni che si adattano dinamicamente in base allo stato di autenticazione dell’utente:

• “Hero section”: sezione principale contenente titolo del gioco, descrizione e pulsanti di azione principali (”Prova la demo” e “Scopri di più” per utenti non autenticati e “Inizia una nuova partita” e “Scopri di più” per utenti autenticati”).
• Sezione “Come si gioca” (game features): contiene 3 card (non cliccabili) informative che spiegano le regole di base.
  • Ricevi carte con indici di sfortuna tra 1 e 100.
  • Devi valutare correttamente la posizione delle nuove carte.
  • Vinci quando arrivi a 6 carte o perdi dopo 3 errori.
• Call to action: sezione con pulsanti che cambiano in base allo stato di autenticazione.
  • Utenti autenticati: “Inizia una partita completa” e “Visualizza la tua cronologia”.
  • Utenti non autenticati: “Prova la Demo” e “Login per giocare”
• Footer: sezione con copyright e anno corrente calcolato con dayjs.

Logica di adattamento

Questo componente usa la funzione useUser() per determinare se l’utente è autenticato attraverso la proprietà loggedIn. In base a questo stato, i pulsanti e le opzioni visualizzati cambiano di conseguenza.

{loggedIn ? (
	...
) : (
	...
)}

Navigazione

La homepage fa uso di useNavigate di React Router per gestire la navigazione verso altre parti dell’applicazione quando l’utente clicca su un pulsante. Le destinazioni principali raggiungibili dalla homepage sono:

• /play: inizia una partita completa (utenti autenticati).
• /play/demo: prova la demo (utenti non autenticati).
• /instructions: visualizza istruzioni complete.
• /login: accesso al proprio account.
• /profile: visualizza le statistiche personali (utenti autenticati).

Route /login

La route /login gestisce il processo di autenticazione dell’utente nell’applicazione.