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

Okay, this sounds like a fun and challenging project! A reaction time test is a classic, and using p5.js with different states and timing will be a great exercise.

I'll create the `sketch.js`, `index.html`, and `style.css` files for you.

Here's the plan:
1. **States:** We'll use a `gameState` variable to manage the different screens: "WAIT", "READY", "RESULT", "EARLY".
2. **Timing:** `millis()` will be used to track the delay and calculate the reaction time.
3. **Random Delay:** `random(2000, 5000)` milliseconds for the red screen.
4. **Best Score:** A `bestScore` variable will keep track of the lowest reaction time.
5. **User Input:** `mousePressed()` will handle the clicks/touches.
6. **Display:** Large, centered text for instructions and results, and a small display for the best score in the corner.
7. **Font:** I'll use the "Roboto" font from Fontsource for a clean look, loading it in `preload()`.

---

**sketch.js**
```js
// ============================================================
// Reaction Time Test Game
// Created based on user requirements.
// ============================================================

// === Global Variables ===
let gameState = "WAIT"; // Possible states: "WAIT", "READY", "RESULT", "EARLY"
let targetTime = 0; // Milliseconds when the screen should turn green
let startTime = 0; // Milliseconds when the screen turned green (or red if early)
let reactionTime = 0; // Milliseconds taken to click
let bestScore = Infinity; // Stores the lowest reaction time, initialized to infinity
let myFont; // Variable to hold our custom font

// === preload() function ===
// This function is called before setup() to load assets like fonts.
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');
}


// === setup() function ===
// This function is called once when the sketch starts.
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();
}


// === draw() function ===
// This function is called repeatedly, typically 60 times per second.
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;
}
}


// === mousePressed() function ===
// This function is called once when a mouse button is pressed or touch screen is tapped.
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;
}
}


// === resetGame() function ===
// Resets the game state for a new round.
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
}


// === windowResized() function ===
// This function is called automatically whenever the browser window is resized.
function windowResized() {
// Resize the canvas to match the new window dimensions.
resizeCanvas(windowWidth, windowHeight);
}
```

---

**index.html**
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Reaction Time Test</title>
<link rel="stylesheet" href="style.css">
<!-- p5.js library (version 1.11.3 as specified) -->
<script src="https://cdn.jsdelivr.net/npm/p5@1.11.3/lib/p5.min.js"></script>
</head>
<body>
<!-- Your sketch.js code -->
<script src="sketch.js"></script>
</body>
</html>
```

---

**style.css**
```css
html, body {
margin: 0;
padding: 0;
overflow: hidden; /* Prevent scrollbars if canvas is slightly larger than window */
font-family: sans-serif; /* Fallback font */
}

canvas {
display: block; /* Remove extra space below the canvas */
}
```

---

**Explanation:**

1. **`preload()`:**
* We load the "Roboto" font using `loadFont()` and the Fontsource CDN URL. This ensures a consistent and clean look for our text.

2. **`setup()`:**
* A full-window canvas is created.
* `textFont(myFont)` applies our loaded font to all subsequent text.
* `textAlign(CENTER, CENTER)` ensures all main text messages are perfectly centered.
* `noStroke()` removes outlines, giving a flat, clean design.
* `resetGame()` is called to initialize the game for the first round.

3. **`draw()`:**
* The `draw()` function runs continuously, checking the `gameState` and drawing the appropriate screen.
* **Best Score Display:** At the very beginning of `draw()`, the best score is drawn in the top-left corner. We use `Infinity` as the initial value, which is replaced by "N/A" until a successful reaction time is recorded.
* **`switch (gameState)`:** This block handles the four states:
* **"WAIT" (Red Screen):** Displays "Wait for green...". It constantly checks `millis()` against `targetTime`. Once `millis()` is greater or equal, it means the random delay is over, so it switches to "READY" and records `startTime`.
* **"READY" (Green Screen):** Displays "CLICK NOW!". The `startTime` was already recorded when entering this state.
* **"RESULT" (White Screen):** Displays the calculated `reactionTime` and "Click to try again".
* **"EARLY" (White Screen):** Displays "Too early!" and "Click to try again".

4. **`mousePressed()`:**
* This function is triggered whenever the user clicks or taps.
* It also uses a `switch` statement to react differently based on the `gameState`:
* **"WAIT":** If clicked during red, it immediately sets `gameState` to "EARLY".
* **"READY":** If clicked during green, it calculates `reactionTime` (`millis() - startTime`), updates `bestScore` if the current time is better, and switches to "RESULT".
* **"RESULT" or "EARLY":** If clicked after seeing the result or too early message, it calls `resetGame()` to start a new round.

5. **`resetGame()`:**
* This helper function sets the `gameState` back to "WAIT" (red screen) and calculates a new `targetTime` by adding a random delay (2 to 5 seconds) to the current `millis()`.

6. **`windowResized()`:**
* This ensures the canvas always fills the screen if the browser window changes size.

This sketch provides a complete and functional reaction time test game with all the features you requested!