Shape Tap Challenge

.game-container {
  max-width: 400px;
  margin: 20px auto;
  padding: 10px;
  background: white;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

h1 {
  font-size: 24px;
  margin-bottom: 10px;
}

#instruction {
  font-size: 18px;
  margin: 10px 0;
}

.shape {
  width: 60px;
  height: 60px;
  margin: 6px;
  border: none;
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

#circle {
  background-color: red;
  border-radius: 50%;
}

#square {
  background-color: blue;
}

#triangle {
  background-color: transparent;
  width: 0;
  height: 0;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  border-bottom: 60px solid green;
  margin: auto; /* Centrage horizontal */
  padding: 0;
  display: inline-block;
  position: relative;
  top: -60px;
}

button.start-btn {
  font-size: 16px;
  padding: 10px 20px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

button.shape:hover {
  background-color: #0056b3;
}

.share-buttons {
  margin-top: 10px;
  display: none;
}

<div class="game-container">
  <h1>Shape Tap Challenge</h1>
  <p>Score: <span id="score">0</span></p>
  <p>Time Left: <span id="timer">2</span> seconds</p>
  <div class="game-area" id="gameArea">
    <p id="instruction">Tap the <span id="target-shape">Circle</span>!</p>
    <div id="shapes-container">
      <button class="shape" id="circle"/>
      <button class="shape" id="square"/>
      <button class="shape" id="triangle"/>
    </div>
  </div>
  <input type="hidden" id="hiddenScore" value="0">
  <button class="start-btn" id="startBtn">Start Game</button>  
</div>

const hiddenScore = document.getElementById("hiddenScore");
const scoreElement = document.getElementById("score");
const timerElement = document.getElementById("timer");
const startBtn = document.getElementById("startBtn");
const instructionElement = document.getElementById("instruction");
const targetShapeElement = document.getElementById("target-shape");
const shapes = document.querySelectorAll(".shape");

let score = 0;
const initialTime = 2;
let timeLeft = initialTime;
let gameRunning = false;
let timer = null;
let currentShape = "";

// List of shapes
const shapeNames = ["Circle", "Square", "Triangle"];

// Start the game
function startGame() {
  if (gameRunning) return;

  score = 0;
  timeLeft = initialTime;
  gameRunning = true;
  scoreElement.textContent = score;
  timerElement.textContent = timeLeft;
  hiddenScore.value = score;
  document.querySelector('.share-buttons').style.display = 'none'; // Hide share buttons when starting a new game
  startBtn.disabled = true;
  setNextShape();
  startTimer();
}

// Start the timer
function startTimer() {
  timer = setInterval(() => {
    timeLeft--;
    timerElement.textContent = timeLeft;

    if (timeLeft <= 0) {
      endGame();
    }
  }, 1000);
}

// End the game
function endGame() {
  gameRunning = false;
  clearInterval(timer);
  instructionElement.textContent = "Game Over!";
document.querySelector('.share-buttons').style.display = 'flex'; 
  startBtn.disabled = false;
}

// Set the next shape to tap
function setNextShape() {
  currentShape = shapeNames[Math.floor(Math.random() * shapeNames.length)];
  targetShapeElement.textContent = currentShape;
  instructionElement.textContent = `Tap the NULL!`;
}

// Handle shape tap
shapes.forEach((shape) => {
  shape.addEventListener("click", (e) => {
    if (!gameRunning) return;

    const clickedShape = e.target.id;

    if (clickedShape.toLowerCase() === currentShape.toLowerCase()) {
      score++;
      timeLeft = initialTime;
      scoreElement.textContent = score;
      hiddenScore.value = score; // Update hidden score field
      setNextShape();
    } else {
      endGame();
    }
  });
});

// Attach event listener to start button
startBtn.addEventListener("click", startGame);