finalizzazione del progetto
This commit is contained in:
+74
-29
@@ -1,32 +1,77 @@
|
||||
<!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>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Classifica completa</title>
|
||||
<link rel="stylesheet" href="css/classifica.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>Classifica</h1>
|
||||
|
||||
<?php
|
||||
require 'php/leaderboard_utils.php';
|
||||
$sort = $_GET['sort'] ?? 'score';
|
||||
|
||||
// Carico la mappa delle posizioni (logica ID -> Posizione)
|
||||
$rankMap = getRankMap();
|
||||
|
||||
// Carico i dati in base all'ordinamento scelto
|
||||
if ($sort === 'data') {
|
||||
$leaderboard = getSortedLeaderboardByDate();
|
||||
} else {
|
||||
$leaderboard = getSortedLeaderboardByScore();
|
||||
}
|
||||
?>
|
||||
|
||||
<div class="sorting-buttons">
|
||||
<a href="?pagina=leaderboard&sort=data" class="sort-button <?php echo $sort === 'data' ? 'active' : ''; ?>">Ordina per data</a>
|
||||
<a href="?pagina=leaderboard&sort=score" class="sort-button <?php echo $sort === 'score' ? 'active' : ''; ?>">Ordina per punteggio</a>
|
||||
</div>
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Posizione</th>
|
||||
<th>Nome</th>
|
||||
<th>1° Fase (RPS)</th>
|
||||
<th>2° Fase (%)</th>
|
||||
<th>Punteggio Totale (% isola pulita)</th>
|
||||
<th>Data</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<?php if (empty($leaderboard)): ?>
|
||||
<tr><td colspan="6" style="text-align:center;">Nessun punteggio registrato.</td></tr>
|
||||
<?php else: ?>
|
||||
<?php foreach ($leaderboard as $entry): ?>
|
||||
<?php
|
||||
// Recupero la posizione reale (1, 2, 3...)
|
||||
$posizioneReale = $rankMap[$entry['id']] + 1;
|
||||
|
||||
// Determiniamo la classe del podio
|
||||
$classePodio = '';
|
||||
if ($posizioneReale === 1) $classePodio = 'rank-gold';
|
||||
elseif ($posizioneReale === 2) $classePodio = 'rank-silver';
|
||||
elseif ($posizioneReale === 3) $classePodio = 'rank-bronze';
|
||||
|
||||
// Formattazione dati (tua logica esistente)
|
||||
$rps = number_format(intval($entry['score1']) / 60, 2);
|
||||
$fase2_perc = (intval($entry['score1']) > 0) ? intval(intval($entry['score2']) / intval($entry['score1']) * 100) : 0;
|
||||
$punteggio_finale = number_format(intval($entry['scoreT']) / 100, 2);
|
||||
$data_formattata = date("d/m/Y", strtotime($entry['data_partita']));
|
||||
?>
|
||||
<tr class="<?php echo $classePodio; ?>">
|
||||
<td><strong><?php echo $posizioneReale; ?>°</strong></td>
|
||||
<td><?php echo htmlspecialchars($entry['nome']); ?></td>
|
||||
<td><?php echo $rps; ?> rps</td>
|
||||
<td><?php echo $fase2_perc; ?>%</td>
|
||||
<td><?php echo $punteggio_finale; ?>%</td>
|
||||
<td><?php echo $data_formattata; ?></td>
|
||||
</tr>
|
||||
<?php endforeach; ?>
|
||||
<?php endif; ?>
|
||||
</tbody>
|
||||
</table>
|
||||
</body>
|
||||
</html>
|
||||
+43
-28
@@ -7,52 +7,66 @@
|
||||
</head>
|
||||
<body>
|
||||
<!-- SCHERMATA DI CARICAMENTO -->
|
||||
<div id="loading-screen" style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #000; display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 9999;">
|
||||
<div style="width: 80%; max-width: 600px; background: #222; height: 20px; border-radius: 10px; overflow: hidden; margin-bottom: 10px;">
|
||||
<div id="loading-bar" style="width: 0%; height: 100%; background: #4CAF50; transition: width 0.3s;"></div>
|
||||
<div id="loading-screen">
|
||||
<canvas id="matrix-canvas"></canvas>
|
||||
<div class="loader-content">
|
||||
<div class="eco-title">SAVE THE ISLAND</div>
|
||||
<div class="bar-container">
|
||||
<div id="loading-bar"></div>
|
||||
</div>
|
||||
<div id="loading-text">Caricamento delle risorse...</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- POPUP INSERIMENTO USERNAME -->
|
||||
<div id="name-popup-overlay">
|
||||
<div class="name-popup">
|
||||
<h3>IDENTIFICAZIONE GIOCATORE</h3>
|
||||
<p>Inserisci il tuo nome per iniziare a giocare:</p>
|
||||
<input type="text" id="username-input" placeholder="Nome Giocatore..." maxlength="15">
|
||||
<button id="confirm-name-btn">ACCEDI AL GIOCO</button>
|
||||
</div>
|
||||
<div id="loading-text" style="color: #fff; font-family: monospace; font-size: 14px;">Loading...</div>
|
||||
</div>
|
||||
|
||||
<!-- SCHERMATA INIZIALE -->
|
||||
<div id="start">
|
||||
<video autoplay muted loop id="bg-video">
|
||||
<source src="assets/media/video/background.mp4" type="video/mp4">
|
||||
</video>
|
||||
<img src="assets/media/img/sfondo_iniziale.png" alt="Sfondo Isola" id="bg-island">
|
||||
<div class="overlay"></div>
|
||||
<div class="content">
|
||||
<div class="top-section">
|
||||
<img src="assets/media/img/titolo.png" alt="titolo" class="main-title" />
|
||||
</div>
|
||||
<div class="container bottom-section">
|
||||
<div class="item left">
|
||||
<div class="controls-box">
|
||||
<header class="top-section">
|
||||
<img src="assets/media/img/titolo.png" alt="Eco-Mission" class="main-title" />
|
||||
</header>
|
||||
<main class="bottom-section">
|
||||
<section class="item side-panel">
|
||||
<div class="glass-box">
|
||||
<h3>Controlli</h3>
|
||||
<p>Movimento</p>
|
||||
<p><kbd>Freccia su / W</kbd> Avanti</p>
|
||||
<p><kbd>Freccia giù / S</kbd> Indietro</p>
|
||||
<p><kbd>Freccia destra / D</kbd> Destra</p>
|
||||
<p><kbd>Freccia sinistra / A</kbd> Sinistra</p>
|
||||
<p><kbd>Mouse</kbd> Punto di vista</p>
|
||||
<div class="control-list">
|
||||
<p><kbd>Freccia su / W</kbd> Avanti</p>
|
||||
<p><kbd>Freccia giù / S</kbd> Indietro</p>
|
||||
<p><kbd>Freccia destra / D</kbd> Destra</p>
|
||||
<p><kbd>Freccia sinistra / A</kbd> Sinistra</p>
|
||||
<p><kbd>Mouse</kbd> Punto di vista</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item center">
|
||||
<span class="pulse-text">Clicca per giocare</span>
|
||||
</div>
|
||||
<div class="item right">
|
||||
<div class="instructions-box">
|
||||
</section>
|
||||
<section class="item center-panel">
|
||||
<div class="pulse-text" id="btn-start">Clicca per giocare</div>
|
||||
</section>
|
||||
<section class="item side-panel">
|
||||
<div class="glass-box">
|
||||
<h3>Istruzioni</h3>
|
||||
<p>Obiettivo: raccogliere tutti i rifiuti sull’isola</p>
|
||||
<p><strong>Obiettivo:</strong> raccogliere tutti i rifiuti sull’isola</p>
|
||||
<p>Attenzione allo scadere del tempo!</p>
|
||||
<p>Usa i comandi per esplorare e ripulire</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- INTERFACCIA GRAFICA DEL GIOCO -->
|
||||
<div id="punti">Rifiuti: <span id="score">0</span></div>
|
||||
<div id="fps-counter">FPS: 0</div>
|
||||
<div id="tempo">Tempo: <span id="minuti">XX</span>:<span id="secondi">XX</span></div>
|
||||
<div id="crosshair">+</div>
|
||||
<script type="importmap">
|
||||
@@ -64,5 +78,6 @@
|
||||
}
|
||||
</script>
|
||||
<script type="module" src="js/fase1.js"></script>
|
||||
<script src="js/loadingScreen.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
+1
-1
@@ -8,7 +8,7 @@
|
||||
</head>
|
||||
<body>
|
||||
<div id="ui">
|
||||
Punti: <span id="score">0</span> | Tempo: <span id="timer"></span>s
|
||||
Punti: <span id="score">0</span> | Tempo: <span id="minuti"></span>:<span id="secondi"></span>
|
||||
</div>
|
||||
|
||||
<div id="game-container">
|
||||
|
||||
@@ -0,0 +1,60 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="it">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Istruzioni fase 2</title>
|
||||
<link rel="stylesheet" href="css/istruzioniFase2.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="start-fase2">
|
||||
<div class="overlay-gradient"></div>
|
||||
<div class="content">
|
||||
<div class="top-section">
|
||||
<h1>Istruzioni fase 2</h1>
|
||||
</div>
|
||||
<div class="container bottom-section">
|
||||
<div class="item left">
|
||||
<div class="controls-box">
|
||||
<h3>Controlli</h3>
|
||||
<p><kbd>Mouse</kbd> Per trascinare i rifiuti nei cestini</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item center">
|
||||
<span class="pulse-text" id="btn-start-f2">Clicca per giocare</span>
|
||||
</div>
|
||||
<div class="item right">
|
||||
<div class="instructions-box">
|
||||
<h3>Istruzioni</h3>
|
||||
<p>
|
||||
Hai <b><i id="tempo-f2-val">--</i></b> secondi per completare il livello
|
||||
<br>
|
||||
Hai raccolto <b><i id="punti-f2-val">--</i></b> rifiuti nella fase precedente
|
||||
<br>
|
||||
<b>Obiettivo:</b> separare correttamente i rifiuti nei cestini corrispondenti
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script defer>
|
||||
const punti = localStorage.getItem('punteggioFase1') || 0;
|
||||
document.getElementById('punti-f2-val').textContent = punti;
|
||||
document.getElementById('tempo-f2-val').textContent = punti * 5; // 5 secondi per ogni rifiuto raccolto nella fase 1
|
||||
document.getElementById('btn-start-f2').style.cursor = 'pointer';
|
||||
const schermata = document.getElementById('start-fase2');
|
||||
schermata.style.display = 'flex';
|
||||
|
||||
// Listener per il pulsante centrale
|
||||
document.getElementById('btn-start-f2').onclick = function() {
|
||||
schermata.style.opacity = '0';
|
||||
schermata.style.transition = 'opacity 0.5s ease';
|
||||
setTimeout(() => {
|
||||
schermata.style.display = 'none';
|
||||
window.location = '?pagina=sep';
|
||||
}, 500);
|
||||
};
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,88 @@
|
||||
<?php
|
||||
require 'php/leaderboard_utils.php';
|
||||
$sort = $_GET['sort'] ?? 'data';
|
||||
|
||||
// Carico la mappa delle posizioni (logica ID -> Posizione)
|
||||
$rankMap = getRankMap();
|
||||
// Carico i dati in base all'ordinamento scelto
|
||||
$leaderboard = getTop10byScore();
|
||||
?>
|
||||
<!DOCTYPE html>
|
||||
<html lang="it">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Schermata Finale</title>
|
||||
<link rel="stylesheet" href="css/risultatiFinali.css">
|
||||
</head>
|
||||
<body>
|
||||
<!-- Fase 2: separazione dei rifiuti tramite drag&drop -->
|
||||
<!-- Layout simile a div#start in pages/fase1.html -->
|
||||
<div id="start">
|
||||
<div class="overlay"></div>
|
||||
<div class="content">
|
||||
<div class="left1">
|
||||
<div class="top">
|
||||
<h1>MISSIONE COMPIUTA</h1>
|
||||
</div>
|
||||
<div class="bottom">
|
||||
<div class="left2">
|
||||
<button type="button" onclick="window.open('?pagina=leaderboard', '_blank')">Classifica Completa</button>
|
||||
<button type="button" onclick="localStorage.clear(); window.location = '?pagina=start'">Gioca Ancora</button>
|
||||
</div>
|
||||
<div class="right2">
|
||||
<p>
|
||||
<b>Punteggi:</b>
|
||||
<br>
|
||||
Prima fase: <i><span id="score1a"></span>/180</i>
|
||||
<br>
|
||||
Seconda fase: <i><span id="score2"></span>/<span id="score1b"></span></i>
|
||||
<br>
|
||||
Totale: <i><span id="scoreTotale"></span>/100</i>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right1">
|
||||
<h2>Top 10</h2>
|
||||
<table class="container">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>N°</th>
|
||||
<th>Nome</th>
|
||||
<th>Punteggio</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<?php if (empty($leaderboard)): ?>
|
||||
<tr><td colspan="3" style="text-align:center;">Nessun punteggio registrato.</td></tr>
|
||||
<?php else: ?>
|
||||
<?php foreach ($leaderboard as $entry): ?>
|
||||
<?php
|
||||
// Recupero la posizione reale dalla mappa tramite l'ID
|
||||
$posizioneReale = $rankMap[$entry['id']] + 1;
|
||||
$punteggio_finale = number_format(intval($entry['scoreT']) / 100, 2);
|
||||
?>
|
||||
<tr>
|
||||
<td><strong><?php echo $posizioneReale; ?>°</strong></td>
|
||||
<td><?php echo htmlspecialchars($entry['nome']); ?></td>
|
||||
<td><?php echo $punteggio_finale; ?>%</td>
|
||||
</tr>
|
||||
<?php endforeach; ?>
|
||||
<?php endif; ?>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script defer>
|
||||
const score1 = localStorage.getItem('punteggioFase1') || 0;
|
||||
const score2 = localStorage.getItem('punteggioFase2') || 0;
|
||||
const scoreT = 10_000 * ((score1 / MAX_SCORE) + (score2 / MAX_SCORE)) / 2;
|
||||
document.getElementById('score1a').textContent = score1;
|
||||
document.getElementById('score1b').textContent = score1;
|
||||
document.getElementById('score2').textContent = score2;
|
||||
document.getElementById('scoreTotale').textContent = scoreT.toFixed(0) / 100;
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user