Aggiunta utlimi file per rifinire la struttura finale del gioco. (mancano alcuni file perche' sono vuoti e manca tutta la parte del database, della classifica, dei punteggi, delle schermate e del nome della squadra)

css/classifica.css

@@ -0,0 +1,19 @@
+body {
+    font-family: "Arial";
+}
+table, h1 {
+    margin: auto;
+}
+h1 {
+    text-align: center;
+    padding: 15px;
+}
+table {
+    width: 75vw;
+    text-align: center;
+    border-collapse: collapse;
+}
+th, td {
+    padding: 10px;
+    border: 1px solid black;
+}

css/fase2.css

@@ -0,0 +1,123 @@
+body {
+    margin: 0;
+    font-family: Arial, sans-serif;
+    background-color: #f0f0f0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+#game-container {
+    width: 1000px;
+    height: 600px; 
+    background-color: #000;
+    position: relative;
+    overflow: hidden;
+    border: 5px solid #333;
+    margin: 0 auto;
+    cursor: default;
+}
+
+/* Area dei bidoni */
+#bins-container {
+    display: flex;
+    justify-content: space-between;
+    padding: 20px 10px;
+    width: 100%;
+    box-sizing: border-box;
+}
+
+/* Effetto bagliore per risposta corretta (Verde) */
+.glow-success {
+    box-shadow: 0 0 30px 15px rgba(0, 255, 0, 0.6);
+    border-radius: 50%; /* Rende l'effetto ovale/circolare */
+    transition: box-shadow 0.2s ease-in-out;
+}
+
+/* Effetto bagliore per risposta errata (Rosso) */
+.glow-error {
+    box-shadow: 0 0 30px 15px rgba(255, 0, 0, 0.6);
+    border-radius: 50%;
+    transition: box-shadow 0.2s ease-in-out;
+}
+
+.bin img {
+    width: 100%;
+    height: auto;
+    pointer-events: none;
+    
+    /* Questa riga è la magia: */
+    mix-blend-mode: screen; 
+    
+    /* 'screen' mantiene i colori chiari e rende invisibile il nero.
+       In questo modo il bagliore dietro passerà attraverso le zone nere. */
+}
+
+
+/* Modifica leggera al bagliore per renderlo più visibile sotto il bidone */
+.bin::after {
+    content: "";
+    position: absolute;
+    top: 60%; /* Abbassato un po' per centrarsi meglio sulla base del bidone */
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 150px; 
+    height: 100px; /* Più largo che alto per un effetto ovale perfetto */
+    border-radius: 50%;
+    opacity: 0;
+    filter: blur(10px); /* Sfuma i bordi della luce */
+    transition: opacity 0.3s;
+    z-index: -1;
+}
+
+/* Stato Successo (Verde) */
+.glow-success::after {
+    opacity: 1;
+    box-shadow: 0 0 40px 20px rgba(0, 255, 0, 0.7);
+    background-color: rgba(0, 255, 0, 0.2); /* Opzionale: un leggero centro colorato */
+}
+
+/* Stato Errore (Rosso) */
+.glow-error::after {
+    opacity: 1;
+    box-shadow: 0 0 40px 20px rgba(255, 0, 0, 0.7);
+    background-color: rgba(255, 0, 0, 0.2);
+}
+
+.bin img {
+    width: 100%;
+    height: auto;
+    pointer-events: none; /* Impedisce che il mouse "prenda" l'immagine del bidone */
+}
+
+/* I rifiuti */
+.trash {
+    width: 100px;
+    height: 100px;
+    object-fit: contain;
+    position: absolute;
+    z-index: 100;
+}
+.trash:active {
+    cursor: grabbing;
+}
+/* Il bancone marrone in basso */
+#counter {
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    height: 100px;
+    background-color: #5d4037;
+    /* Colore marrone bancone */
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+/* Area UI (Punti e Tempo) */
+#ui {
+    margin-top: 10px;
+    font-size: 24px;
+    font-weight: bold;
+}
+

js/fase2.js

@@ -0,0 +1,271 @@
+// PASSO 1: Lista di tutti i rifiuti con la loro categoria
+const listaRifiuti = [
+    { img: 'assets/media/img/fase2/rifiuti/bicchiereEbottiglia.webp', tipo: 'vetro' },
+    { img: 'assets/media/img/fase2/rifiuti/bottiglie.webp', tipo: 'plastica' },
+    { img: 'assets/media/img/fase2/rifiuti/bucciaBanana.png', tipo: 'umido' },
+    { img: 'assets/media/img/fase2/rifiuti/torsoloMela.webp', tipo: 'umido' },
+    { img: 'assets/media/img/fase2/rifiuti/giornale.png', tipo: 'carta' },
+    { img: 'assets/media/img/fase2/rifiuti/scatolaCartone.png', tipo: 'carta' },
+    { img: 'assets/media/img/fase2/rifiuti/lattina.png', tipo: 'alluminio' },
+    { img: 'assets/media/img/fase2/rifiuti/scatolaTonno.webp', tipo: 'alluminio' },
+    { img: 'assets/media/img/fase2/rifiuti/sacchettoPlastica.png', tipo: 'plastica' },
+    { img: 'assets/media/img/fase2/rifiuti/marmellata.png', tipo: 'vetro' },
+    { img: 'assets/media/img/fase2/rifiuti/mozziconiSigaretta.png', tipo: 'indifferenziata' },
+    { img: 'assets/media/img/fase2/rifiuti/pannolino.png', tipo: 'indifferenziata' }
+];
+
+let punteggio = 0;
+let tempo = 60;
+const counter = document.getElementById('counter');
+const scoreDisplay = document.getElementById('score');
+
+// PASSO 2:Funzione per creare un rifiuto casuale sul bancone
+function generaRifiuto() {
+    const indiceRandom = Math.floor(Math.random() * listaRifiuti.length);
+    const rifiutoScelto = listaRifiuti[indiceRandom];
+
+    const imgElement = document.createElement('img');
+    imgElement.src = rifiutoScelto.img;
+    imgElement.classList.add('trash');
+    imgElement.dataset.tipo = rifiutoScelto.tipo;
+
+    counter.appendChild(imgElement);
+    attivaDragAndDrop(imgElement);
+}
+// Avviamo la prima generazione
+window.onload = () => {
+    generaRifiuto();
+    // Qui faremo partire anche il timer in futuro
+};
+
+
+//PASSO 3: Funzione per rendere un elemento trascinabile
+function attivaDragAndDrop(elemento) {
+    let staTrascinando = false;
+
+    elemento.addEventListener('mousedown', (e) => {
+        staTrascinando = true;
+
+        elemento.style.mixBlendMode = "normal";
+
+        // 1. IMPORTANTE: Spostiamo l'elemento dal "counter" al "game-container"
+        // Questo evita che l'oggetto scompaia per conflitti di posizionamento
+        const container = document.getElementById('game-container');
+        if (elemento.parentElement.id === 'counter') {
+            container.appendChild(elemento);
+        }
+
+        elemento.style.position = 'absolute';
+        elemento.style.zIndex = 1000;
+        elemento.style.cursor = 'grabbing';
+
+        // Chiamiamo subito la funzione di movimento per posizionarlo sotto il mouse
+        muoviOggetto(e);
+
+        e.preventDefault();
+    });
+
+    function muoviOggetto(e) {
+        if (!staTrascinando) return;
+
+        const container = document.getElementById('game-container');
+        const rect = container.getBoundingClientRect();
+
+        // Calcolo posizione
+        let x = e.clientX - rect.left - (elemento.offsetWidth / 2);
+        let y = e.clientY - rect.top - (elemento.offsetHeight / 2);
+
+        // Applichiamo le coordinate e resettiamo gli stili del bancone
+        elemento.style.left = x + 'px';
+        elemento.style.top = y + 'px';
+        elemento.style.bottom = 'auto';
+        elemento.style.transform = 'none';
+    }
+
+    document.addEventListener('mousemove', (e) => {
+        if (staTrascinando) {
+            muoviOggetto(e);
+            evidenziaBidoneSotto(elemento);
+        }
+    });
+
+    function evidenziaBidoneSotto(rifiuto) {
+        const bidoni = document.querySelectorAll('.bin');
+
+        bidoni.forEach(bidone => {
+            const rectB = bidone.getBoundingClientRect();
+            const rectR = rifiuto.getBoundingClientRect();
+
+            const sovrapposti = !(rectR.right < rectB.left ||
+                                rectR.left > rectB.right ||
+                                rectR.bottom < rectB.top ||
+                                rectR.top > rectB.bottom);
+
+            if (sovrapposti) {
+                bidone.classList.add('highlight');
+            } else {
+                bidone.classList.remove('highlight');
+            }
+        });
+    }
+
+
+
+    document.addEventListener('mouseup', () => {
+        if (staTrascinando) {
+            staTrascinando = false;
+            elemento.style.cursor = 'grab';
+
+            // Ora puoi chiamare la funzione del Punto 4
+            controllaCollisione(elemento);
+        }
+    });
+}
+
+
+//PUNTO 4: Funzione per controllare se il rifiuto è stato depositato correttamente
+function controllaCollisione(rifiuto) {
+    const bidoni = document.querySelectorAll('.bin');
+    let depositato = false;
+
+    bidoni.forEach(bidone => {
+        const rectB = bidone.getBoundingClientRect();
+        const rectR = rifiuto.getBoundingClientRect();
+
+        const sovrapposti = !(rectR.right < rectB.left ||
+            rectR.left > rectB.right ||
+            rectR.bottom < rectB.top ||
+            rectR.top > rectB.bottom);
+
+        if (sovrapposti) {
+            depositato = true;
+
+            // PORTIAMO IL BIDONE IN PRIMO PIANO
+            bidone.style.zIndex = "2000";
+
+            if (rifiuto.dataset.tipo === bidone.dataset.type) {
+                // CORRETTO
+                punteggio += 1;
+                bidone.classList.add('glow-success');
+                bidone.style.transform = "scale(1.1)";
+
+                setTimeout(() => {
+                    bidone.classList.remove('glow-success');
+                    bidone.style.transform = "scale(1)";
+                    bidone.style.zIndex = "1"; // Ritorna al suo posto dopo l'effetto
+                }, 400);
+            } else {
+                // SBAGLIATO
+                punteggio = punteggio;
+                bidone.classList.add('glow-error');
+
+                setTimeout(() => {
+                    bidone.classList.remove('glow-error');
+                    bidone.style.zIndex = "1"; // Ritorna al suo posto dopo l'effetto
+                }, 400);
+            }
+
+            document.getElementById('score').innerText = punteggio;
+            rifiuto.remove();
+            setTimeout(generaRifiuto, 500);
+        }
+    });
+
+    if (!depositato) {
+        riposizionaSulBancone(rifiuto);
+    }
+}
+
+// Usiamo nomi diversi per non confondere il browser
+let timerIntervallo;
+let tempoRimanente;
+
+function avviaTimer(secondiIniziali) {
+    const displayTimer = document.getElementById('timer');
+
+    // Inizializziamo la variabile globale con il valore ricevuto
+    tempoRimanente = secondiIniziali;
+    displayTimer.innerText = tempoRimanente;
+
+    // Puliamo timer precedenti
+    clearInterval(timerIntervallo);
+
+    timerIntervallo = setInterval(() => {
+        tempoRimanente--; // Sottraiamo un secondo alla variabile globale
+        displayTimer.innerText = tempoRimanente; // Aggiorniamo lo schermo
+
+        if (tempoRimanente <= 0) {
+            clearInterval(timerIntervallo);
+            tempoRimanente = 0;
+            displayTimer.innerText = "0";
+            mostraFineGioco();//LISA E' COMPITO TUO!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!1
+        }
+    }, 1000);
+}
+
+window.onload = () => {
+    punteggio = 0;
+    scoreDisplay.innerText = punteggio;
+
+
+    // Recuperiamo il valore dal localStorage (se vuoto mettiamo 10 come base)
+    let puntiSalvati = localStorage.getItem('punteggioFase1');
+    let tempoDaImpostare = puntiSalvati * 5;
+
+    generaRifiuto();
+
+    // Facciamo partire il timer con il valore calcolato
+    avviaTimer(tempoDaImpostare);
+};
+
+function riposizionaSulBancone(rifiuto) {
+    const counter = document.getElementById('counter');
+    counter.appendChild(rifiuto);
+
+    // Ripristiniamo l'effetto per ignorare lo sfondo nero sul bancone marrone
+    rifiuto.style.mixBlendMode = "screen";
+
+    // Resettiamo le posizioni per rimetterlo al centro del bancone
+    rifiuto.style.position = 'relative';
+    rifiuto.style.left = "auto";
+    rifiuto.style.top = "auto";
+    rifiuto.style.bottom = "auto";
+    rifiuto.style.transform = "none";
+}
+
+function mostraFineGioco() {
+    // Blocca la generazione di nuovi rifiuti
+    clearInterval(timerIntervallo);
+
+    // Mostra un messaggio finale più gradevole
+    const messaggio = document.createElement('div');
+    messaggio.id = 'fine-gioco';
+    messaggio.innerHTML = `
+        <h2>Tempo scaduto!</h2>
+        <p>Il tuo punteggio finale è: <strong>${punteggio}</strong></p>
+        <button id="restart-btn">Gioca di nuovo</button>
+    `;
+    messaggio.style.position = 'absolute';
+    messaggio.style.top = '50%';
+    messaggio.style.left = '50%';
+    messaggio.style.transform = 'translate(-50%, -50%)';
+    messaggio.style.backgroundColor = 'rgba(255, 255, 255, 0.9)';
+    messaggio.style.padding = '20px';
+    messaggio.style.borderRadius = '10px';
+    messaggio.style.textAlign = 'center';
+    messaggio.style.zIndex = '3000';
+
+    document.body.appendChild(messaggio);
+
+    // Salva il punteggio nel localStorage
+    localStorage.setItem('punteggioFase2', punteggio);
+
+    // Aggiunge il pulsante per ricominciare
+    document.getElementById('restart-btn').addEventListener('click', () => {
+        document.body.removeChild(messaggio);
+        punteggio = 0;
+        scoreDisplay.innerText = punteggio;
+        avviaTimer(60); // o il tempo che vuoi
+        generaRifiuto();
+    });
+}

materiale/STRUTTURA.md

@@ -52,19 +52,21 @@ Struttura della cartella del progetto: (temporanea e mmodificabile)
 │   ├── idea gioco.png
 │   ├── ideaRisultato.jpeg
 │   ├── progetto.txt
+│   ├── schermata finale.png
 │   ├── schermata iniziale.png
 │   ├── STRUTTURA.md
 │   └── TODO.txt
 ├── pages/
 │   ├── classifica.php
+│   ├── error.html
 │   ├── fase1.html
 │   ├── fase2.html
 │   ├── istruzioniFase2.html
 │   └── risultatiFinali.html
 ├── php/
 │   ├── db.php
-│   ├── save_score.php
 │   └── leaderboard_utils.php
+│   ├── save_score.php
 ├── .gitignore
 ├── db_iniziale.sql
 ├── index.php

pages/classifica.php

@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="it">
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>Classifica completa</title>
+        <link rel="stylesheet" href="classifica.css">
+    </head>
+    <body>
+        <h1>Classifica</h1>
+        <table>
+            <thead>
+                <tr>
+                    <th>Posizione</th>
+                    <th>Nome</th>
+                    <th>Punteggio 1° fase</th>
+                    <th>Punteggio 2° fase</th>
+                    <th>Punteggio totale</th>
+                    <th>Data di gioco</th>
+                </tr>
+            </thead>
+            <tbody>
+                <?php
+                require 'db.php';
+                foreach ($db_test as $posizione => $record) {
+                    riga($posizione, $record);
+                }
+                ?>
+            </tbody>
+        </table>
+    </body>
+</html>

pages/fase2.html

@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="it">
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>Eco-Game: Differenziata</title>
+        <link rel="stylesheet" href="css/fase2.css">
+    </head>
+    <body>
+        <div id="ui">
+            Punti: <span id="score">0</span> | Tempo: <span id="timer"></span>s
+        </div>
+
+        <div id="game-container">
+            <div id="bins-container">
+                <div class="bin" data-type="alluminio"><img src="assets/media/img/fase2/contenitori/alluminio.jpeg" alt="Alluminio"></div>
+                <div class="bin" data-type="umido"><img src="assets/media/img/fase2/contenitori/umido.jpeg" alt="Umido"></div>
+                <div class="bin" data-type="plastica"><img src="assets/media/img/fase2/contenitori/plastica.jpeg" alt="Plastica"></div>
+                <div class="bin" data-type="vetro"><img src="assets/media/img/fase2/contenitori/vetro.jpeg" alt="Vetro"></div>
+                <div class="bin" data-type="carta"><img src="assets/media/img/fase2/contenitori/carta.jpeg" alt="Carta"></div>
+                <div class="bin" data-type="indifferenziata"><img src="assets/media/img/fase2/contenitori/indifferenziata.jpeg" alt="Indifferenziata"></div>
+            </div>
+            <div id="counter"></div>
+        </div>
+        <script src="js/fase2.js"></script>
+    </body>
+</html>

php/db.php

@@ -0,0 +1,35 @@
+<?php
+$debug = false;
+function setDebug($val) {
+    $debug = $val;
+    if ($debug) {
+        echo "db";
+    }
+}
+$db_test = [
+    [
+        'nome' => 's1',
+        'p1' => 95,
+        'p2' => 90,
+        'pt' => 50,
+        'g' => '24-11-2025'
+    ],
+    [
+        'nome' => 's1',
+        'p1' => 95,
+        'p2' => 90,
+        'pt' => 50,
+        'g' => '24-11-2025'
+    ]
+];
+$classifica = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
+function riga($pos, $data) {
+    $pos++;
+    $nome = $data['nome'];
+    $p1 = $data['p1'];
+    $p2 = $data['p2'];
+    $pt = $data['pt'];
+    $g = $data['g'];
+    echo '<tr><td>'.$pos.'</td><td>'.$nome.'</td><td>'.$p1.'</td><td>'.$p2.'</td><td>'.$pt.'</td><td>'.$g.'</td></tr>';
+}
+?>