<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <meta name="description" content="A mobile physics game where you control a logo using device motion and orientation. Keep the logo within a 180x180 ring to build your high score and master the challenges of gravity.">
  <meta name="keywords" content="Viper Comics, mobile game, physics game, accelerometer, device orientation, HTML5 game, JavaScript game, high score">
  <meta name="author" content="Viper Comics">
  <meta name="robots" content="index, follow">

  <title>Viper Comics</title>
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap" rel="stylesheet">
  <!-- CSS Reset -->
  <link rel="stylesheet" href="css/reset.css">
  <!-- Main CSS -->
  <link rel="stylesheet" href="css/style.css?v=0.1.1">
  <!-- Firebase libraries (use the latest versions or the versions recommended by Firebase) -->
  <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>
  <!-- Firebase App Check -->
  <script src="https://www.gstatic.com/firebasejs/8.10.0/firebase-app-check.js"></script>
  <!-- Include jQuery from CDN -->
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <div id="permissionModal" class="modal">
    <div class="modal-content">
      <h2>Permission Request</h2>
      <p>Please allow motion and orientation access for the best experience.</p>
      <button id="grantPermissionBtn">Grant Permission</button>
    </div>
  </div>
  <!-- New Unsupported Device Modal (using the same CSS classes as the permission modal) -->
  <div id="unsupportedModal" class="modal" style="display: none;">
    <div class="modal-content">
      <p id="unsupportedMessage"></p>
      <!-- You might optionally add a button to close or acknowledge the message -->
    </div>
  </div>
  <!-- div id="orientationValues">
    <div id="alphaValue"></div>
    <div id="betaValue"></div>
    <div id="gammaValue"></div>
  </div -->
  <!-- Leaderboard Container -->
  <div id="leaderboard-container">
    <div id="leaderboard">
      <div class="leaderboard-entry"><span class="position">1.</span><span class="username">Username1</span><span class="time">00:00:00</span></div>
      <div class="leaderboard-entry"><span class="position">2.</span><span class="username">Username2</span><span class="time">00:00:00</span></div>
      <div class="leaderboard-entry"><span class="position">3.</span><span class="username">Username3</span><span class="time">00:00:00</span></div>
      <div class="leaderboard-entry"><span class="position">4.</span><span class="username">Username4</span><span class="time">00:00:00</span></div>
      <div class="leaderboard-entry"><span class="position">5.</span><span class="username">Username5</span><span class="time">00:00:00</span></div>
      <div class="leaderboard-entry"><span class="position">6.</span><span class="username">Username6</span><span class="time">00:00:00</span></div>
      <div class="leaderboard-entry"><span class="position">7.</span><span class="username">Username7</span><span class="time">00:00:00</span></div>
      <div class="leaderboard-entry"><span class="position">8.</span><span class="username">Username8</span><span class="time">00:00:00</span></div>
      <div class="leaderboard-entry"><span class="position">9.</span><span class="username">Username9</span><span class="time">00:00:00</span></div>
      <div class="leaderboard-entry"><span class="position">10.</span><span class="username">Username10</span><span class="time">00:00:00</span></div>
    </div>
  </div>
  <!-- User Info: Current Username and Time Score -->
  <div id="user-info">
    <div id="current-username"></div>
    <div id="current-time">00:00:00</div>
    <button id="startGameBtn">Start Game</button>
  </div>


  <!-- The Game Ring (180x180) -->
  <div id="ring"></div>

  <div id="logo" class="logo"></div>
  <!-- Your Firebase configuration snippet goes here -->
  <script>
      // Global variable to store the time of the last touchend event.
      let lastTouchEnd = 0;

      // Add an event listener for touchend events.
      document.addEventListener('touchend', function (event) {
        const now = Date.now();
        // If the time between two touchend events is less than or equal to 300ms, prevent default (i.e. disable zoom).
        if (now - lastTouchEnd <= 300) {
          event.preventDefault();
        }
        lastTouchEnd = now;
      }, false);

    // Your web app's Firebase configuration
    // For Firebase JS SDK v7.20.0 and later, measurementId is optional
    var firebaseConfig = {
      apiKey: "AIzaSyBr_1YZv4ybgSPHegAPl0LHKO0aNmBa-Kw",
      authDomain: "viper-comics.firebaseapp.com",
      databaseURL: "https://viper-comics-default-rtdb.firebaseio.com",
      projectId: "viper-comics",
      storageBucket: "viper-comics.firebasestorage.app",
      messagingSenderId: "893907805731",
      appId: "1:893907805731:web:e72585d716ccee9423b396",
      measurementId: "G-Y9L47KJ19Q"
    };

    // Initialize Firebase
    firebase.initializeApp(firebaseConfig);
    // Log to verify that Firebase and App Check have been initialized.
    console.log("Firebase has been initialized.");
    // second parameter is for debug mode, for production make it false
    firebase.appCheck().activate('6LcUku4qAAAAAFpLs35FlalXRjrrreZnVGfsJcdL', false);
    console.log("Firebase App Check activated.");

  //check to see if app check token is working
  /*  firebase.appCheck().getToken(true) //force refresh = true
    .then((tokenResponse) => {
      console.log("App Check token:", tokenResponse.token);
    })
    .catch((error) => {
      console.error("Error getting App Check token:", error);
    }); */
  </script>
  <script src="js/main.js?v=0.1.1"></script>
</body>
</html>
