agritrust/leaderboard.html at master · mwatsimulamo/agritrust · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1" />
  <title>AgriTrust — Classement</title>

  <!-- Fonts & Icons -->
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" />

  <link rel="stylesheet" href="css/style.css">
  <link rel="manifest" href="/manifest.json">
  <meta name="theme-color" content="#4CAF50">
</head>
<body>
  <div id="app">
    <header class="header">
      <h1>Classement</h1>
      <a href="dashboard.html" class="icon-btn" aria-label="Accueil"><i class="fas fa-home"></i></a>
    </header>

    <main class="container leaderboard-container">

      <section class="card top3-card">
        <h2><i class="fas fa-trophy"></i> Top 3 Producteurs</h2>
        <div class="podium">
          <div class="podium-item second">
            <div class="avatar"><i class="fas fa-user-circle"></i></div>
            <p class="name">Jean K.</p>
            <p class="points">860 pts</p>
          </div>
          <div class="podium-item first">
            <div class="avatar crown"><i class="fas fa-user-circle"></i></div>
            <p class="name">Amina N.</p>
            <p class="points">1000 pts</p>
          </div>
          <div class="podium-item third">
            <div class="avatar"><i class="fas fa-user-circle"></i></div>
            <p class="name">Fatou D.</p>
            <p class="points">730 pts</p>
          </div>
        </div>
      </section>

      <section class="card leaderboard-list-card">
        <h2><i class="fas fa-list-ol"></i> Classement complet</h2>
        <ul id="leaderboard-list" class="leaderboard-list"></ul>
      </section>

      <section class="card reward-card">
        <h2><i class="fas fa-gift"></i> Récompenses</h2>
        <ul class="reward-list">
          <li><i class="fas fa-seedling"></i> 1000 pts → Kit semences premium</li>
          <li><i class="fas fa-tractor"></i> 800 pts → Bon d’entretien machine</li>
          <li><i class="fas fa-water"></i> 600 pts → Réduction irrigation</li>
        </ul>
      </section>

    </main>

    <div id="toast" class="toast hidden"></div>

  </div>
 <script src="js/gamification.js"></script>
<script>
document.addEventListener("DOMContentLoaded", () => {
  const tableBody = document.querySelector("#leaderboard-body");

  // Simule les membres enregistrés localement
  const mockPlayers = [
    { name: "Toi", points: gamification.getPoints() },
    { name: "Amina", points: 180 },
    { name: "Jean", points: 150 },
    { name: "Luc", points: 120 },
  ];

  function renderLeaderboard() {
    // Met à jour ton score
    mockPlayers[0].points = gamification.getPoints();

    // Trie par points
    mockPlayers.sort((a, b) => b.points - a.points);

    // Rendu HTML
    tableBody.innerHTML = mockPlayers
      .map((p, i) => `
        <tr class="${i === 0 ? 'top-player' : ''}">
          <td>${i + 1}</td>
          <td>${p.name}</td>
          <td>${p.points}</td>
        </tr>
      `).join('');
  }

  // Initial render
  renderLeaderboard();

  // Rafraîchit automatiquement quand les points changent
  window.addEventListener(gamification.EVENTS.POINTS_UPDATED, renderLeaderboard);
});
</script>

  <script src="js/gamification.js"></script>
  <script src="js/leaderboard.js"></script>

  <!-- PWA -->
  <script>
    if ('serviceWorker' in navigator) {
      navigator.serviceWorker.register('/sw.js').catch(console.warn);
    }
  </script>
</body>
</html>