Embed

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>Jeu à gratter - Eleven</title>
  <style>
    body {
      font-family: 'Arial', sans-serif;
      text-align: center;
      margin-top: 40px;
      background: #f5f5f5;
    }

    h1 {
      color: #111;
      margin-bottom: 20px;
    }

    #passwordSection, #gameSection {
      background: white;
      border-radius: 12px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
      width: 350px;
      margin: auto;
      padding: 20px;
    }

    input[type=password] {
      padding: 8px;
      font-size: 16px;
      border: 1px solid #ccc;
      border-radius: 6px;
      width: 70%;
      margin-bottom: 10px;
    }

    button {
      padding: 10px 20px;
      margin-top: 10px;
      cursor: pointer;
      font-size: 16px;
      border: none;
      border-radius: 6px;
      background: black;
      color: white;
      transition: 0.2s;
    }
    button:hover {
      background: #444;
    }

    #scratchArea {
      margin: 20px auto;
      width: 320px;
      height: 160px;
      position: relative;
      border: 2px solid #ddd;
      border-radius: 12px;
      background: white;
      overflow: hidden;
    }

    #hiddenMessage {
      font-size: 22px;
      font-weight: bold;
      color: #222;
      text-align: center;
      line-height: 160px;
      position: relative;
      z-index: 1;
    }

    canvas {
      position: absolute;
      top: 0;
      left: 0;
      border-radius: 12px;
      z-index: 2;
    }

    #result {
      font-size: 20px;
      margin-top: 15px;
      font-weight: bold;
      color: #111;
    }
  </style>
</head>
<body>
  <h1>🎉 Jeu à gratter - Eleven</h1>

  
  <div id="passwordSection">
    <p>Veuillez entrer le mot de passe :</p>
    <input type="password" id="passwordInput" placeholder="Mot de passe">
    <button onclick="checkPassword()">Entrer</button>
    <p id="passwordError" style="color:red;"></p>
    <div id="proceedSection" style="display:none;">
      <button onclick="startGame()">Commencer le jeu 🎲</button>
    </div>
  </div>

  
  <div id="gameSection" style="display:none;">
    <div id="scratchArea">
      <div id="hiddenMessage"></div>
      <canvas id="canvas" width="320" height="160"></canvas>
    </div>
    <div id="result"></div>
  </div>

  <script>
    const correctPassword = "ELEVEN2025";

    function checkPassword() {
      const input = document.getElementById("passwordInput").value;
      if (input === correctPassword) {
        document.getElementById("passwordError").textContent = "";
        document.getElementById("proceedSection").style.display = "block";
      } else {
        document.getElementById("passwordError").textContent = "Mot de passe incorrect.";
      }
    }

    function startGame() {
      document.getElementById("passwordSection").style.display = "none";
      document.getElementById("gameSection").style.display = "block";
      checkIP();
      initScratch();
    }

    // 🎟 Ticket distribution
    const tickets = [
      ...Array(5).fill("☕ Café gratuit"),
      ...Array(5).fill("🥤 Bissap gratuit"),
      ...Array(2).fill("🔟% de réduction"),
      ...Array(4).fill("🍸 Mojito gratuit"),
      ...Array(3).fill("🥞 Pancake gratuit"),
      ...Array(1).fill("🎉 -50%"),
      ...Array(80).fill("🙁 Bonne chance la prochaine fois !")
    ];

    let prize = "";

    function initScratch() {
      prize = tickets[Math.floor(Math.random() * tickets.length)];
      document.getElementById("hiddenMessage").textContent = prize;

      const canvas = document.getElementById("canvas");
      const ctx = canvas.getContext("2d");

      // Silver gradient effect
      const gradient = ctx.createLinearGradient(0, 0, canvas.width, canvas.height);
      gradient.addColorStop(0, "#dcdcdc");
      gradient.addColorStop(1, "#b0b0b0");
      ctx.fillStyle = gradient;
      ctx.fillRect(0, 0, canvas.width, canvas.height);

      let isDrawing = false;

      function getPosition(e) {
        const rect = canvas.getBoundingClientRect();
        if (e.touches) {
          return {
            x: e.touches[0].clientX - rect.left,
            y: e.touches[0].clientY - rect.top
          };
        }
        return {x: e.clientX - rect.left, y: e.clientY - rect.top};
      }

      function scratch(e) {
        if (!isDrawing) return;
        const pos = getPosition(e);
        ctx.globalCompositeOperation = "destination-out";
        ctx.beginPath();
        ctx.arc(pos.x, pos.y, 20, 0, Math.PI * 2);
        ctx.fill();
        checkScratchPercentage();
      }

      function checkScratchPercentage() {
        const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
        let cleared = 0;
        for (let i = 3; i < imageData.data.length; i += 4) {
          if (imageData.data[i] === 0) cleared++;
        }
        const percent = (cleared / (canvas.width * canvas.height)) * 100;
        if (percent > 50) {
          ctx.clearRect(0, 0, canvas.width, canvas.height);
          document.getElementById("result").textContent = "🎊 Résultat révélé : " + prize;
        }
      }

      // Desktop
      canvas.addEventListener("mousedown", () => isDrawing = true);
      canvas.addEventListener("mouseup", () => isDrawing = false);
      canvas.addEventListener("mousemove", scratch);

      // Mobile
      canvas.addEventListener("touchstart", () => isDrawing = true);
      canvas.addEventListener("touchend", () => isDrawing = false);
      canvas.addEventListener("touchmove", scratch);
    }

    // 🌍 One play per IP with daily reset
    async function checkIP() {
      try {
        const res = await fetch("https://api.ipify.org?format=json");
        const data = await res.json();
        const ip = data.ip;

        const today = new Date().toISOString().slice(0, 10);
        const playedKey = "played_" + ip + "_" + today;

        if (localStorage.getItem(playedKey)) {
          document.getElementById("gameSection").innerHTML =
            "<p style='color:red; font-size:20px;'>❌ Vous avez déjà joué aujourd'hui.</p>";
        } else {
          localStorage.setItem(playedKey, "true");
        }
      } catch (err) {
        console.error("Impossible de vérifier l'IP", err);
      }
    }
  </script>
</body>
</html>