mcfarhat · HalaAkh · Jul 24, 2025 · Jul 25, 2025 · Jul 26, 2025 · Jul 29, 2025
diff --git a/assets/background.jpg b/assets/background.jpg
diff --git a/assets/start-background.jpg → assets/backgrounds/start-background.jpg b/assets/start-background.jpg → assets/backgrounds/start-background.jpg
diff --git a/assets/runner_run.png b/assets/runner_run.png
diff --git a/assets/sounds/level-complete.mp3 b/assets/sounds/level-complete.mp3
diff --git a/assets/sounds/new-character.mp3 b/assets/sounds/new-character.mp3
diff --git a/index.html b/index.html
@@ -201,6 +201,53 @@
         text-shadow: 0 0 5px rgba(205, 127, 50, 0.7);
       }
 
+       #telegram-auth-modal {
+            display: none;
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: rgba(0,0,0,0.7);
+            z-index: 1000;
+            justify-content: center;
+            align-items: center;
+        }
+        .telegram-auth-container {
+            background: white;
+            border-radius: 12px;
+            width: 320px;
+            padding: 24px;
+            text-align: center;
+            box-shadow: 0 4px 20px rgba(0,0,0,0.15);
+        }
+        .telegram-logo {
+            width: 64px;
+            margin-bottom: 16px;
+        }
+        .phone-input {
+            width: 100%;
+            padding: 12px;
+            margin: 16px 0;
+            border: 1px solid #ddd;
+            border-radius: 8px;
+            font-size: 16px;
+        }
+        .auth-button {
+            background: #0088cc;
+            color: white;
+            border: none;
+            padding: 12px 24px;
+            border-radius: 8px;
+            font-size: 16px;
+            cursor: pointer;
+            margin: 8px;
+        }
+        .auth-button.secondary {
+            background: transparent;
+            color: #0088cc;
+        }
+
     </style>
 </head>
 <body>
@@ -289,11 +336,157 @@
         font-family: 'Luckiest Guy', cursive;
     ">CLOSE</button>
 </div>
+    <!-- The div where Phaser will inject the game canvas -->
+    <div id="game-container"></div>
 
+    <!-- Telegram Login Overlay -->
+<div id="login-overlay" style="
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    backdrop-filter: blur(6px);
+    background-color: rgba(0,0,0,0.65);
+    z-index: 1000;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+">
+    <script async src="https://telegram.org/js/telegram-widget.js?22"
+        data-telegram-login="healthyhustlebot"
+        data-size="large"
+        data-userpic="false"
+        data-onauth="onTelegramAuth(user)"
+        data-request-access="write"
+        data-auth-url="https://1e5e6d33b607.ngrok-free.app/auth/check_authorization.php">
+    </script>
+</div>
 
+<script type="module">
+  import { supabase } from './src/supabaseClient.js';
+
+  async function handleLogin(user) {
+    const userId = user.id;
+
+    // Check if user already exists
+    const { data: existingUser, error } = await supabase
+      .from('leaderboard')
+      .select('*', { head: false })
+      .eq('telegram_id', userId)
+      .single();
+
+
+    let savedUser = existingUser;
+
+    if (!existingUser) {
+      // Insert new user
+      const displayName = `${user.first_name} ${user.last_name || ''}`.trim();
+      const { data: insertedUser, error: insertError } = await supabase
+        .from('leaderboard')
+        .insert([{
+          telegram_id: userId,
+          username: user.username || null,
+          display_name: displayName
+        }])
+        .select()
+        .single();
+
+      if (insertError) {
+        console.error('Insert error:', insertError);
+        alert('Could not save user. Try again.');
+        return;
+      }
+
+      savedUser = insertedUser;
+      console.log('User added to leaderboard.');
+
+  } else {
+    if (!existingUser.display_name || existingUser.display_name.trim() === '') {
+      const displayName = `${user.first_name} ${user.last_name || ''}`.trim();
+      const { data: updatedUser, error: updateError } = await supabase
+        .from('leaderboard')
+        .update({ display_name: displayName })
+        .eq('telegram_id', userId)
+        .select()
+        .single();
+
+      if (updateError) {
+        console.error('Error updating display_name:', updateError);
+      } else {
+        savedUser = updatedUser;
+      }
+    } else {
+      savedUser = existingUser;
+    }
+
+    console.log('User already exists.');
+  }
+    window.phaserUser = {
+      ...user,
+      display_name: savedUser.display_name,
+      telegram_id: savedUser.telegram_id
+    };
+    // Save telegram_id to localStorage
+    localStorage.setItem('telegram_id', savedUser.telegram_id);
+    localStorage.setItem('display_name', savedUser.display_name || '');
+    localStorage.setItem('username', savedUser.username || '');
+
+    // Hide login overlay
+    const loginOverlay = document.getElementById('login-overlay');
+    if (loginOverlay) loginOverlay.style.display = 'none';
+
+    // Start the game scene if Phaser is loaded
+    if (window.phaserGame) {
+      const bootScene = window.phaserGame.scene.getScene('BootScene');
+      if (bootScene) {
+        bootScene.scene.start('StartScene', {
+          telegramUser: window.phaserUser
+        });
+      }
+    }
+  }
+
+  // Function Telegram widget calls after login
+  window.onTelegramAuth = handleLogin;
+
+  // Auto-login if already stored in localStorage
+  window.addEventListener('DOMContentLoaded', async () => {
+    const storedId = localStorage.getItem('telegram_id');
+    if (!storedId) return;
+
+    const { data: existingUser } = await supabase
+      .from('leaderboard')
+      .select('*')
+      .eq('telegram_id', storedId)
+      .single();
+
+    if (existingUser) {
+      window.phaserUser = {
+        ...existingUser,
+        display_name: existingUser.display_name,
+        telegram_id: existingUser.telegram_id
+      };
+
+      const loginOverlay = document.getElementById('login-overlay');
+      if (loginOverlay) loginOverlay.style.display = 'none';
+
+      console.log('Auto-login as', existingUser.display_name);
+
+      // Start the game if ready
+      if (window.phaserGame) {
+        const bootScene = window.phaserGame.scene.getScene('BootScene');
+        if (bootScene) {
+          bootScene.scene.start('StartScene', {
+            telegramUser: window.phaserUser
+          });
+        }
+      }
+    }
+  });
+</script>
 
-    <!-- The div where Phaser will inject the game canvas -->
-    <div id="game-container"></div>
 
     <!-- Include Phaser library -->
     <!-- Using CDN for simplicity. For production, consider self-hosting or using a build tool -->
@@ -313,6 +506,12 @@
       const leaderboardPanel = document.getElementById('leaderboard-container');
     });
 
+    // This will be used by the Phaser game to control the modal
+        window.telegramAuthUI = {
+            show: () => document.getElementById('telegram-auth-modal').style.display = 'flex',
+            hide: () => document.getElementById('telegram-auth-modal').style.display = 'none'
+        };
+
     </script>
 </body>
 </html>
diff --git a/ngrok.exe b/ngrok.exe