Fast Math Duel

h1 {
  text-align: center;
}

.game-container {
  text-align: center;
  max-width: 400px;
  margin: 0 auto;
}

.game-area {
  margin: 20px auto;
}

#question {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 20px;
}

button {
  padding: 10px 20px;
  font-size: 16px;
  background-color: #333;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  margin: 5px;
}

button:disabled {
  background-color: #aaa;
  cursor: not-allowed;
}

button:hover:not(:disabled) {
  background-color: #555;
}

<div class="game-container">
  <h1>Fast Math Duel</h1>
  <p>Score: <span id="score">0</span></p>
  <div class="game-area">
    <p id="question">Press Start to Begin!</p>
    <div id="buttons">
      <button id="trueBtn" disabled>True</button>
      <button id="falseBtn" disabled>False</button>
    </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 questionElement = document.getElementById("question");
const startBtn = document.getElementById("startBtn");
const trueBtn = document.getElementById("trueBtn");
const falseBtn = document.getElementById("falseBtn");

let score = 0;
let currentAnswer = false;
let gameRunning = false;

// Generate random math question
function generateQuestion() {
  const num1 = Math.floor(Math.random() * 10) + 1;
  const num2 = Math.floor(Math.random() * 10) + 1;
  const operator = ["+", "-", "*"][Math.floor(Math.random() * 3)];

  const correctAnswer = eval(`${num1} ${operator} ${num2}`);
  const displayedAnswer = Math.random() > 0.5 ? correctAnswer : correctAnswer + Math.floor(Math.random() * 3) - 1;

  questionElement.textContent = `${num1} ${operator} ${num2} = ${displayedAnswer}`;
  currentAnswer = (correctAnswer === displayedAnswer);
}

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

  gameRunning = true;
  score = 0;
  scoreElement.textContent = score;
  hiddenScore.value = score;
  document.querySelector(".share-buttons").style.display = "none"; // Hide share buttons

  trueBtn.disabled = false;
  falseBtn.disabled = false;

  generateQuestion();
}

// Handle player's answer
function handleAnswer(isTrue) {
  if (isTrue === currentAnswer) {
    score++;
    scoreElement.textContent = score;
    hiddenScore.value = score; // Update hidden score field
    generateQuestion();
  } else {
    endGame();
  }
}

// End the game
function endGame() {
  gameRunning = false;
  questionElement.textContent = "Game Over!";
  trueBtn.disabled = true;
  falseBtn.disabled = true;
  document.querySelector(".share-buttons").style.display = "flex"; // Show share buttons
}

// Attach event listeners
startBtn.addEventListener("click", startGame);
trueBtn.addEventListener("click", () => handleAnswer(true));
falseBtn.addEventListener("click", () => handleAnswer(false));