diff --git a/assets/media/img/fase2/contenitori/alluminio.jpeg b/assets/media/img/fase2/contenitori/alluminio.jpeg new file mode 100644 index 0000000..c5f6400 Binary files /dev/null and b/assets/media/img/fase2/contenitori/alluminio.jpeg differ diff --git a/assets/media/img/fase2/contenitori/carta.jpeg b/assets/media/img/fase2/contenitori/carta.jpeg new file mode 100644 index 0000000..fde789b Binary files /dev/null and b/assets/media/img/fase2/contenitori/carta.jpeg differ diff --git a/assets/media/img/fase2/contenitori/indifferenziata.jpeg b/assets/media/img/fase2/contenitori/indifferenziata.jpeg new file mode 100644 index 0000000..61bbd26 Binary files /dev/null and b/assets/media/img/fase2/contenitori/indifferenziata.jpeg differ diff --git a/assets/media/img/fase2/contenitori/plastica.jpeg b/assets/media/img/fase2/contenitori/plastica.jpeg new file mode 100644 index 0000000..98e78d9 Binary files /dev/null and b/assets/media/img/fase2/contenitori/plastica.jpeg differ diff --git a/assets/media/img/fase2/contenitori/umido.jpeg b/assets/media/img/fase2/contenitori/umido.jpeg new file mode 100644 index 0000000..ef4a1bb Binary files /dev/null and b/assets/media/img/fase2/contenitori/umido.jpeg differ diff --git a/assets/media/img/fase2/contenitori/vetro.jpeg b/assets/media/img/fase2/contenitori/vetro.jpeg new file mode 100644 index 0000000..f2332f6 Binary files /dev/null and b/assets/media/img/fase2/contenitori/vetro.jpeg differ diff --git a/assets/media/img/fase2/rifiuti/bicchiereEbottiglia.webp b/assets/media/img/fase2/rifiuti/bicchiereEbottiglia.webp new file mode 100644 index 0000000..f39d9a7 Binary files /dev/null and b/assets/media/img/fase2/rifiuti/bicchiereEbottiglia.webp differ diff --git a/assets/media/img/fase2/rifiuti/bottiglie.webp b/assets/media/img/fase2/rifiuti/bottiglie.webp new file mode 100644 index 0000000..d0aa47e Binary files /dev/null and b/assets/media/img/fase2/rifiuti/bottiglie.webp differ diff --git a/assets/media/img/fase2/rifiuti/bucciaBanana.png b/assets/media/img/fase2/rifiuti/bucciaBanana.png new file mode 100644 index 0000000..d9ecfcd Binary files /dev/null and b/assets/media/img/fase2/rifiuti/bucciaBanana.png differ diff --git a/assets/media/img/fase2/rifiuti/giornale.png b/assets/media/img/fase2/rifiuti/giornale.png new file mode 100644 index 0000000..b4535b3 Binary files /dev/null and b/assets/media/img/fase2/rifiuti/giornale.png differ diff --git a/assets/media/img/fase2/rifiuti/lattina.png b/assets/media/img/fase2/rifiuti/lattina.png new file mode 100644 index 0000000..1ff743d Binary files /dev/null and b/assets/media/img/fase2/rifiuti/lattina.png differ diff --git a/assets/media/img/fase2/rifiuti/marmellata.png b/assets/media/img/fase2/rifiuti/marmellata.png new file mode 100644 index 0000000..a1a3322 Binary files /dev/null and b/assets/media/img/fase2/rifiuti/marmellata.png differ diff --git a/assets/media/img/fase2/rifiuti/mozziconiSigaretta.png b/assets/media/img/fase2/rifiuti/mozziconiSigaretta.png new file mode 100644 index 0000000..c1e9e73 Binary files /dev/null and b/assets/media/img/fase2/rifiuti/mozziconiSigaretta.png differ diff --git a/assets/media/img/fase2/rifiuti/pannolino.png b/assets/media/img/fase2/rifiuti/pannolino.png new file mode 100644 index 0000000..43fd9cd Binary files /dev/null and b/assets/media/img/fase2/rifiuti/pannolino.png differ diff --git a/assets/media/img/fase2/rifiuti/sacchettoPlastica.png b/assets/media/img/fase2/rifiuti/sacchettoPlastica.png new file mode 100644 index 0000000..fd320f7 Binary files /dev/null and b/assets/media/img/fase2/rifiuti/sacchettoPlastica.png differ diff --git a/assets/media/img/fase2/rifiuti/scatolaCartone.png b/assets/media/img/fase2/rifiuti/scatolaCartone.png new file mode 100644 index 0000000..00e652a Binary files /dev/null and b/assets/media/img/fase2/rifiuti/scatolaCartone.png differ diff --git a/assets/media/img/fase2/rifiuti/scatolaTonno.webp b/assets/media/img/fase2/rifiuti/scatolaTonno.webp new file mode 100644 index 0000000..2ce0d9e Binary files /dev/null and b/assets/media/img/fase2/rifiuti/scatolaTonno.webp differ diff --git a/assets/media/img/fase2/rifiuti/torsoloMela.webp b/assets/media/img/fase2/rifiuti/torsoloMela.webp new file mode 100644 index 0000000..441dbeb Binary files /dev/null and b/assets/media/img/fase2/rifiuti/torsoloMela.webp differ diff --git a/css/classifica.css b/css/classifica.css new file mode 100644 index 0000000..54275f3 --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/css/fase2.css b/css/fase2.css new file mode 100644 index 0000000..fa043fb --- /dev/null +++ b/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; +} + diff --git a/css/istruzioniFase2.css b/css/istruzioniFase2.css new file mode 100644 index 0000000..e69de29 diff --git a/css/risultatiFinali.css b/css/risultatiFinali.css new file mode 100644 index 0000000..e69de29 diff --git a/db_iniziale.sql b/db_iniziale.sql new file mode 100644 index 0000000..e69de29 diff --git a/js/fase2.js b/js/fase2.js new file mode 100644 index 0000000..7795024 --- /dev/null +++ b/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 = ` +

Tempo scaduto!

+

Il tuo punteggio finale è: ${punteggio}

+ + `; + 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(); + }); +} \ No newline at end of file diff --git a/materiale/STRUTTURA.md b/materiale/STRUTTURA.md index e7aec94..a300d69 100644 --- a/materiale/STRUTTURA.md +++ b/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 diff --git a/materiale/ideaRisultato.jpeg b/materiale/ideaRisultato.jpeg new file mode 100644 index 0000000..84c339d Binary files /dev/null and b/materiale/ideaRisultato.jpeg differ diff --git a/pages/classifica.php b/pages/classifica.php new file mode 100644 index 0000000..6464785 --- /dev/null +++ b/pages/classifica.php @@ -0,0 +1,32 @@ + + + + + + Classifica completa + + + +

Classifica

+ + + + + + + + + + + + + $record) { + riga($posizione, $record); + } + ?> + +
PosizioneNomePunteggio 1° fasePunteggio 2° fasePunteggio totaleData di gioco
+ + \ No newline at end of file diff --git a/pages/fase2.html b/pages/fase2.html new file mode 100644 index 0000000..cb85c98 --- /dev/null +++ b/pages/fase2.html @@ -0,0 +1,27 @@ + + + + + + Eco-Game: Differenziata + + + +
+ Punti: 0 | Tempo: s +
+ +
+
+
Alluminio
+
Umido
+
Plastica
+
Vetro
+
Carta
+
Indifferenziata
+
+
+
+ + + \ No newline at end of file diff --git a/pages/istruzioniFase2.html b/pages/istruzioniFase2.html new file mode 100644 index 0000000..e69de29 diff --git a/pages/risultatiFinali.html b/pages/risultatiFinali.html new file mode 100644 index 0000000..e69de29 diff --git a/php/db.php b/php/db.php new file mode 100644 index 0000000..11123ae --- /dev/null +++ b/php/db.php @@ -0,0 +1,35 @@ + '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 ''.$pos.''.$nome.''.$p1.''.$p2.''.$pt.''.$g.''; +} +?> \ No newline at end of file diff --git a/php/leaderboard_utils.php b/php/leaderboard_utils.php new file mode 100644 index 0000000..e69de29 diff --git a/php/save_score.php b/php/save_score.php new file mode 100644 index 0000000..e69de29