PokeStack/index.html at master · SpliiT/PokeStack · 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
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
<!--
⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⡿⠁⢸⣿⣿⣿⡀⠙⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⡿⠋⡀⡀⢸⣿⣿⣿⡀⡀⡀⠻⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⠋⡀⡀⡀⡀⢸⣿⣿⣿⡀⡀⡀⡀⠈⢿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⠟⡀⡀⡀⡀⡀⡀⢸⣿⣿⣿⡀⡀⡀⡀⡀⡀⠙⢿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⡿⠁⡀⡀⡀⡀⡀⡀⡀⢸⣿⣿⣿⡀⡀⡀⡀⡀⡀⡀⡀⠙⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⡿⠁⡀⡀⡀⡀⢀⡆⡀⡀⡀⢸⣿⣿⣿⡀⡀⡀⡀⣆⡀⡀⡀⡀⡀⠻⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⠋⡀⡀⡀⡀⡀⣴⣿⡇⡀⡀⡀⢸⣿⠈⠛⡀⡀⡀⡀⣿⣿⣄⡀⡀⡀⡀⠈⢿⣿⣿⣿⣿⣿⣿⣿⣿⣿
⣿⣿⣿⣿⣿⣿⣿⣿⠟⡀⡀⡀⡀⡀⣠⣿⣿⣿⡇⡀⡀⡀⢸⣿⡀⡀⡀⡀⡀⡀⣿⣿⣿⣷⡀⡀⡀⡀⡀⠙⢿⣿⣿⣿⣿⣿⣿⣿
⣿⣿⣿⣿⣿⣿⠟⠁⡀⡀⡀⡀⣠⣾⣿⣿⣿⣿⡇⡀⡀⡀⢸⣿⡀⡀⡀⡀⡀⡀⣿⣿⣿⣿⣿⣦⡀⡀⡀⡀⡀⠙⣿⣿⣿⣿⣿⣿
⣿⣿⣿⣿⡿⠁⡀⡀⡀⡀⢀⣾⣿⣿⣿⣿⣿⣿⡇⡀⡀⡀⢸⣿⣷⡀⡀⡀⡀⡀⣿⣿⣿⣿⣿⣿⣿⣤⡀⡀⡀⡀⡀⠻⣿⣿⣿⣿
⣿⣿⣿⠋⡀⡀⡀⡀⡀⣴⣿⣿⣿⣿⣿⣿⣿⣿⡇⡀⡀⡀⡀⠙⣿⣿⣦⡀⡀⡀⣿⣿⣿⣿⣿⣿⣿⣿⣿⣄⡀⡀⡀⡀⠈⢿⣿⣿
⣿⠟⡀⡀⡀⡀⡀⣠⣿⣿⣿⣿⣿⡿⣿⣿⣿⣿⣿⣄⡀⡀⡀⡀⡀⠻⣿⣿⣄⡀⣿⣿⣿⣿⠻⣿⣿⣿⣿⣿⣷⡀⡀⡀⡀⡀⠈⢿
⣿⣄⡀⡀⡀⡀⡀⠻⣿⣿⣿⣿⠋⡀⣿⣿⣿⣿⡿⣿⣿⣄⡀⡀⡀⡀⠈⠻⣿⣷⣿⣿⣿⣿⡀⠈⢿⣿⣿⣿⡿⠉⡀⡀⡀⡀⢀⣾
⣿⣿⣷⡀⡀⡀⡀⡀⠈⢿⠟⡀⡀⡀⣿⣿⣿⣿⡇⠈⢿⣿⣷⡀⡀⡀⡀⡀⠈⢿⣿⣿⣿⣿⡀⡀⡀⠙⣿⠋⡀⡀⡀⡀⡀⣴⣿⣿
⣿⣿⣿⣿⣷⡀⡀⡀⡀⡀⡀⡀⡀⡀⣿⣿⣿⣿⡇⡀⡀⠙⣿⣿⣦⡀⡀⡀⡀⡀⣿⣿⣿⣿⡀⡀⡀⡀⡀⡀⡀⡀⡀⣴⣿⣿⣿⣿
⣿⣿⣿⣿⣿⣿⣦⡀⡀⡀⡀⡀⢀⣾⣿⣿⣿⣿⡇⡀⡀⡀⡀⠻⣿⣿⡀⡀⡀⡀⣿⣿⣿⣿⣿⣄⡀⡀⡀⡀⡀⣠⣿⣿⣿⣿⣿⣿
⣿⣿⣿⣿⣿⣿⣿⣿⣄⡀⢀⣴⣿⣿⣿⣿⣿⣿⡇⡀⡀⡀⡀⡀⣿⣿⡀⡀⡀⡀⣿⣿⣿⣿⣿⣿⣿⣄⡀⢀⣾⣿⣿⣿⣿⣿⣿⣿
⣿⣿⣿⣿⣿⣿⣿⣿⣿⣷⣿⣿⣿⣿⣿⣿⣿⣿⡇⡀⡀⡀⡀⡀⣿⣿⡀⡀⡀⡀⣿⣿⣿⣿⣿⣿⣿⣿⣷⣿⣿⣿⣿⣿⣿⣿⣿⣿
⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⡇⡀⡀⡀⢠⡀⣿⣿⡀⡀⡀⡀⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⡇⡀⡀⡀⢸⣿⣿⣿⡀⡀⡀⡀⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⡇⡀⡀⡀⢸⣿⣿⣿⡀⡀⡀⡀⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⡇⡀⡀⡀⢸⣿⣿⣿⡀⡀⡀⡀⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣷⡀⡀⡀⢸⣿⣿⣿⡀⡀⡀⣤⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣦⡀⢸⣿⣿⣿⡀⣠⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
-->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <meta name="theme-color" content="#6366F1">
  <meta name="description" content="PokeStacky - Le SuikaGame version pokémon !">
  <title>PokeStacky - SpliiT</title>

  <!-- Google Fonts -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;900&display=swap" rel="stylesheet">

  <link rel="stylesheet" href="css/style.css" />
  <link rel="icon" type="image/png" href="assets/img/favicon.png">
</head>

<body>

  <!-- Username Modal -->
  <div id="username-modal" class="modal" style="display: none;">
    <div class="modern-modal">
      <div class="modal-glow"></div>
      <h1 id="modal-title">Bienvenue sur PokeStack</h1>
      <p id="modal-subtitle">Entre ton pseudo pour commencer ton aventure</p>

      <div class="modern-input-wrapper">
        <input type="text" id="username-input" placeholder="Ton pseudo..." maxlength="15" autocomplete="off" />
      </div>

      <p id="username-error" class="modern-error"></p>

      <button id="username-submit" class="modern-btn">
        <span>Commencer</span>
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
          <path d="M5 12h14M12 5l7 7-7 7" stroke="currentColor" stroke-width="2" stroke-linecap="round"
            stroke-linejoin="round" />
        </svg>
      </button>
    </div>
  </div>

  <!-- General Menu Container -->
  <div id="menu-container" style="display: none;">
    <div class="menu-content">
      <div class="menu-header">
        <h2>Menu</h2>
        <button id="close-menu" class="btn-close">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M18 6L6 18M6 6L18 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
          </svg>
        </button>
      </div>

      <!-- Menu Sections Container -->
      <div id="menu-sections">
        <!-- Main Menu Section -->
        <div id="main-menu-section" class="menu-section active">
          <div class="menu-buttons">
            <button id="restart-game-btn" class="menu-btn">
              <svg width="32" height="32" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path
                  d="M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C14.8273 3 17.35 4.30367 19 6.34315M12 7V12L15 15"
                  stroke="currentColor" stroke-width="2" stroke-linecap="round" />
              </svg>
              <span>Recommencer</span>
            </button>

            <button id="show-leaderboard-btn" class="menu-btn">
              <svg width="32" height="32" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path
                  d="M6 9H4.5C3.67157 9 3 8.32843 3 7.5V6C3 5.44772 3.44772 5 4 5H6M18 9H19.5C20.3284 9 21 8.32843 21 7.5V6C21 5.44772 20.5523 5 20 5H18M12 15V19M8 22H16M6 5H18V11C18 13.7614 15.7614 16 13 16H11C8.23858 16 6 13.7614 6 11V5Z"
                  stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
              </svg>
              <span>Leaderboard</span>
            </button>

            <button id="toggle-sound-btn" class="menu-btn">
              <svg id="sound-on-icon" width="32" height="32" viewBox="0 0 24 24" fill="none"
                xmlns="http://www.w3.org/2000/svg">
                <path d="M11 5L6 9H2V15H6L11 19V5Z" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                  stroke-linejoin="round" />
                <path
                  d="M15.54 8.46C16.4774 9.39764 17.0039 10.6692 17.0039 11.995C17.0039 13.3208 16.4774 14.5924 15.54 15.53M19.07 4.93C20.9447 6.80528 21.9979 9.34836 21.9979 12C21.9979 14.6516 20.9447 17.1947 19.07 19.07"
                  stroke="currentColor" stroke-width="2" stroke-linecap="round" />
              </svg>
              <svg id="sound-off-icon" width="32" height="32" viewBox="0 0 24 24" fill="none"
                xmlns="http://www.w3.org/2000/svg" style="display: none;">
                <path d="M11 5L6 9H2V15H6L11 19V5Z" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                  stroke-linejoin="round" />
                <path d="M23 9L17 15M17 9L23 15" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
              </svg>
              <span id="sound-status-text">Son: ON</span>
            </button>

            <!-- Buy me a coffee button -->
            <a href="https://www.buymeacoffee.com/spliitdev" target="_blank" class="menu-btn"
              style="text-decoration: none;">
              <svg width="32" height="32" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path
                  d="M2 21H22M4 3H18C18.5304 3 19.0391 3.21071 19.4142 3.58579C19.7893 3.96086 20 4.46957 20 5V8C20 9.06087 19.5786 10.0783 18.8284 10.8284C18.0783 11.5786 17.0609 12 16 12H18L17 21H7L6 12H8C6.93913 12 5.92172 11.5786 5.17157 10.8284C4.42143 10.0783 4 9.06087 4 8V5C4 4.46957 4.21071 3.96086 4.58579 3.58579C4.96086 3.21071 5.46957 3 6 3H4Z"
                  stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
              </svg>
              <span>Buy me a coffee</span>
            </a>
          </div>

          <!-- Credit Line -->
          <div
            style="text-align: center; padding-top: 30px; margin-top: 30px; border-top: 1px solid rgba(255, 255, 255, 0.1); color: red; font-size: 13px;">
            <p style="margin: 0;">fait avec ❤ par <a href="https://spliitdev.com" target="_blank"
                rel="noopener noreferrer"
                style="color: red; text-decoration: none; font-weight: 600; transition: all 0.3s ease;">SpliiT
                Dev</a></p>
          </div>
        </div>

        <!-- Leaderboard Section -->
        <div id="leaderboard-section" class="menu-section">
          <button id="back-to-menu" class="back-btn">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M19 12H5M5 12L12 19M5 12L12 5" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                stroke-linejoin="round" />
            </svg>
            Retour
          </button>
          <h3 class="section-title">
            <svg class="section-icon" width="28" height="28" viewBox="0 0 24 24" fill="none"
              xmlns="http://www.w3.org/2000/svg">
              <path
                d="M6 9H4.5C3.67157 9 3 8.32843 3 7.5V6C3 5.44772 3.44772 5 4 5H6M18 9H19.5C20.3284 9 21 8.32843 21 7.5V6C21 5.44772 20.5523 5 20 5H18M12 15V19M8 22H16M6 5H18V11C18 13.7614 15.7614 16 13 16H11C8.23858 16 6 13.7614 6 11V5Z"
                stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
            </svg>
            Leaderboard
          </h3>
          <div id="leaderboard-list"></div>
          <div class="leaderboard-footer">
            <p id="user-rank"></p>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="container">
    <!-- Pokédex Frame with LED -->
    <div id="pokedex-frame">
      <div id="pokedex-led"></div>

      <div id="game-canvas">
        <!-- BOUTON START HARDCODÉ -->
        <div id="start-button-overlay">
          <button id="start-game-button" class="start-btn">START</button>
        </div>

        <!-- Header Game Info (similaire au footer) -->
        <div id="game-header">
          <div class="header-info">
            <span class="header-label">Score:</span>
            <span id="game-score">0</span>
          </div>
          <div class="header-info next-ball-header">
            <span class="header-label">Next:</span>
            <img id="game-next-ball" src="./assets/img/circle0.png" />
          </div>
        </div>

        <div id="game-ui">
          <!-- Barre de limite de défaite -->
          <div id="lose-bar"></div>

          <!-- Game Over Modal -->
          <div id="game-end-container">
            <div id="game-end">
              <div id="game-end-title">Game Over!</div>
              <div id="game-end-score">Score: <span id="final-score">0</span></div>
              <div id="game-end-message"></div>
              <button id="game-end-link" onclick="Game.restartGame()">Rejouer</button>
              <button id="view-leaderboard-btn" class="btn-secondary">Voir le Classement</button>
            </div>
          </div>

          <!-- Status Bar - Bottom -->
          <div id="game-status">
            <div class="status-info">
              <span class="status-label">Dresseur:</span>
              <span id="player-name">Joueur</span>
            </div>
            <div class="status-info">
              <span class="status-label">Record:</span>
              <span id="game-highscore-value">0</span>
            </div>
            <button id="leaderboard-btn" class="pokeball-btn" title="Voir le classement"></button>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Credit Line -->
  <div style="text-align: center; padding: 20px; font-family: 'Inter', sans-serif; color: #64748b; font-size: 14px;">
    <p>jeu réalisé par <a href="https://spliitdev.com" target="_blank" rel="noopener noreferrer"
        style="color: #6366f1; text-decoration: none; font-weight: 600; transition: color 0.3s ease;">SpliiT Dev</a></p>
  </div>

  <!-- Firebase SDK first -->
  <script src="https://www.gstatic.com/firebasejs/8.10.0/firebase-app.js"></script>
  <script src="https://www.gstatic.com/firebasejs/8.10.0/firebase-database.js"></script>

  <!-- Then our scripts -->
  <script type="text/javascript" src="js/matter.js"></script>
  <script type="text/javascript" src="js/firebase-config.js"></script>
  <script type="text/javascript" src="js/index.js"></script>
  <script type="text/javascript" src="js/menu.js"></script>
</body>

</html>