Realizza il gioco del solitario con React e Laravel: Parte 1

Posted on by lucio
Category: blog, laravel, react, redux
50 views Tempo di lettura: 4 minuti

Configurazione dell’Ambiente

In questo tutorial imparerai a creare il tuo gioco solitario con carte siciliane utilizzando React per il frontend e Laravel 11 per la gestione del backend. In questa prima parte configureremo l’ambiente di sviluppo, partendo dalla creazione del progetto con Vite e dalla preparazione della struttura delle cartelle.

Creazione del Progetto React con Vite

Vite è uno strumento moderno e veloce per avviare progetti React. Qui ti spieghiamo come fare:

 Installazione di React con Vite

  1. Apri il terminale e posizionati nella directory in cui vuoi creare il progetto.

  2. Crea il progetto eseguendo il comando seguente:

    npm create vite@latest sicilian-cards-game --template react

    Questo comando avvierà una procedura guidata.

  3. Seleziona una variante:
    Dopo aver eseguito il comando, Vite ti chiederà di scegliere una variante per il template.

    • Seleziona React se vuoi utilizzare il classico approccio a componenti.
    • Se preferisci utilizzare React + TypeScript per una tipizzazione più rigorosa, scegli l’apposita opzione.
      In questo tutorial useremo React (senza TypeScript) per semplificare il setup.
  4. Installa le dipendenze:
    Una volta creato il progetto, entra nella cartella e installa le dipendenze: 
    cd sicilian-cards-game
npm install

     

  5. Avvia il server di sviluppo:
    Per avviare il progetto, esegui: 
    npm run dev

    Ora apri il browser e visita http://localhost:5173 per vedere la tua nuova applicazione React in esecuzione.

Organizzazione della Struttura delle Cartelle

Una struttura ben organizzata facilita lo sviluppo e la manutenzione del progetto. Ecco come strutturare le cartelle per il gioco:

/sicilian-cards-game
│── /src
│   ├── /components      <-- Componenti React (es. Card.jsx, GameBoard.jsx, Menu.jsx)
│   ├── /assets          <-- Asset grafici, incluse le immagini scannerizzate delle carte
│   ├── /config          <-- File di configurazione per le carte (cardsConfig.js)
│   ├── /pages           <-- Pagine (es. Home.jsx, Game.jsx)
│   ├── App.jsx
│   ├── main.jsx
│── /public              <-- Risorse statiche accessibili dal browser
│── package.json
│── vite.config.js
│── index.html

Aggiunta delle Immagini delle Carte e Configurazione

 Organizzazione degli Asset

  • Scannerizza le carte siciliane( con molta pazienza e cerca di essere preciso 🙂 🙂 )
  • Inserisci le immagini delle carte
    Copia tutte le immagini scannerizzate nelle carte all’interno della cartella /src/assets/cards oppure, se preferisci, nella cartella /public/cards. Questo ti permetterà di accedere facilmente alle immagini tramite percorsi relativi.

Creazione del File di Configurazione

Per gestire dinamicamente le carte, crea un file di configurazione che mappi ogni carta con il suo nome, valore e percorso dell’immagine.

  1. Crea il file cardsConfig.js all’interno della cartella /src/config : 
    // src/config/cardsConfig.js
const cards = [
  {
    id: 1,
    name: "Asso di Coppe",
    value: 1,
    image: "/cards/asso_coppe.jpg"
  },
  {
    id: 2,
    name: "Due di Coppe",
    value: 2,
    image: "/cards/due_coppe.jpg"
  },
  // Aggiungi qui le altre carte
];

export default cards;

     

  2. Utilizzo in un componente:
    Potrai importare questo file in un componente React (es. Card.jsx) per visualizzare e gestire le carte nel gioco.

Configurazione del Backend con Laravel 11

Successivamente configureremo il backend utilizzando Laravel 11 per gestire i punteggi e lo stato del gioco.

Installazione di Laravel

  1. Apri un nuovo terminale e crea un nuovo progetto Laravel con Composer: 
    composer create-project laravel/laravel sicilian-cards-backend "11.*"
cd sicilian-cards-backend
php artisan serve

     

  2. Verifica il funzionamento aprendo il browser su http://localhost:8000.

Configurazione del Database

  1. Modifica il file .env: Configura DB_HOST, DB_DATABASE, DB_USERNAME e DB_PASSWORD per collegarti al database.
  2. Esegui le migrazioni: 
    php artisan migrate

     

Creazione delle API per il Salvataggio dei Punteggi

  1. Definisci le API Routes in routes/api.php: 
    use App\Http\Controllers\ScoreController;

Route::post('/score', [ScoreController::class, 'store']);
Route::get('/score', [ScoreController::class, 'index']);

     

  2. Crea il controller: 
    php artisan make:controller ScoreController

    Implementa i metodi store e index nel controller per gestire le richieste relative ai punteggi.

Conclusioni

In questa prima parte abbiamo configurato l’ambiente di sviluppo per il  gioco solitario con carte siciliane:

  • Frontend: Abbiamo creato un nuovo progetto React con Vite, selezionando la variante base React e organizzando la struttura delle cartelle.
  • Asset: Abbiamo inserito le immagini scannerizzate delle carte e creato un file di configurazione per gestirle.
  • Backend: Abbiamo avviato un nuovo progetto Laravel 11, configurato il database e predisposto le API per il salvataggio dei punteggi.

Nella prossima parte del tutorial approfondiremo la creazione della logica di gioco in React e come collegare il frontend al backend per interazioni dinamiche.

 

Potrebbero interessarti: