AI Reaction Time Test - How Fast Are Your Reflexes - xelsed.ai

function preload() {
  // Load a custom font from Fontsource CDN.
  // We're using Roboto regular (400 weight).
  // The URL pattern is @fontsource/{slug}@latest/files/{slug}-latin-400-normal.woff
  myFont = loadFont('https://unpkg.com/@fontsource/roboto@latest/files/roboto-latin-400-normal.woff');
}

function setup() {
  // Create a canvas that fills the entire browser window.
  createCanvas(windowWidth, windowHeight);

  // Set the custom font for all text in the sketch.
  textFont(myFont);

  // Set text alignment to center horizontally and vertically.
  textAlign(CENTER, CENTER);

  // No outline around shapes (like the background rectangles).
  noStroke();

  // Initialize the game for the first round.
  resetGame();
}

function draw() {
  // Display the best score in the top-left corner.
  // If bestScore is Infinity (no successful tries yet), display "N/A".
  fill(0); // Black text for the score
  textSize(24);
  textAlign(LEFT, TOP);
  text(`Best: ${bestScore === Infinity ? 'N/A' : bestScore + ' ms'}`, 20, 20);

  // Reset text alignment for main messages.
  textAlign(CENTER, CENTER);

  // Use a switch statement to handle different game states.
  switch (gameState) {
    case "WAIT":
      // Red screen, waiting for the random delay to pass.
      background(255, 0, 0); // Red
      fill(255);             // White text
      textSize(64);
      text("Wait for green...", width / 2, height / 2);

      // Check if the target time has been reached.
      if (millis() >= targetTime) {
        gameState = "READY"; // Switch to the green "CLICK NOW!" state
        startTime = millis(); // Record the exact time green appears
      }
      break;

    case "READY":
      // Green screen, user should click now.
      background(0, 255, 0); // Green
      fill(0);               // Black text
      textSize(96);
      text("CLICK NOW!", width / 2, height / 2);
      break;

    case "RESULT":
      // White screen, showing the reaction time.
      background(255);       // White
      fill(0);               // Black text
      textSize(128);
      text(`${reactionTime} ms`, width / 2, height / 2 - 50);
      textSize(32);
      text("Click to try again", width / 2, height / 2 + 50);
      break;

    case "EARLY":
      // White screen, user clicked too early.
      background(255);       // White
      fill(0);               // Black text
      textSize(64);
      text("Too early!", width / 2, height / 2 - 50);
      textSize(32);
      text("Click to try again", width / 2, height / 2 + 50);
      break;
  }
}

function mousePressed() {
  switch (gameState) {
    case "WAIT":
      // User clicked while the screen was red.
      gameState = "EARLY"; // Transition to the "Too early!" state
      // We don't reset targetTime here, as the user might click again
      // after seeing "Too early!" to restart, which resetGame handles.
      break;

    case "READY":
      // User clicked while the screen was green.
      reactionTime = millis() - startTime; // Calculate reaction time
      bestScore = min(bestScore, reactionTime); // Update best score
      gameState = "RESULT"; // Transition to the "Result" state
      break;

    case "RESULT":
    case "EARLY":
      // User clicked after seeing the result or early message.
      resetGame(); // Start a new round
      break;
  }
}

function resetGame() {
  gameState = "WAIT"; // Set initial state to "WAIT" (red screen)
  // Calculate a new random target time between 2 and 5 seconds from now.
  targetTime = millis() + random(2000, 5000);
  reactionTime = 0;   // Clear previous reaction time
  startTime = 0;      // Clear previous start time
}

function windowResized() {
  // Resize the canvas to match the new window dimensions.
  resizeCanvas(windowWidth, windowHeight);
}