​

// ----------------------

// 1. Global Variable Declarations

// ----------------------

let page = "start"; // Initial page

let howToPlayButton, mythologyButton, connectButton, fullscreenButton, backButton; // Buttons

let timer = 45; // Total game time in seconds

let countdown = timer;

let timerStart = false;

let gameOver = false;

let gameResult = "";

let score = 0;

​

let gameStartInitiated = false; // Flag for transitioning from gameStart to game

​

// Typewriter effect variables

let typewriterText = "Press the button to start your adventure!";

let currentText = ""; 

let textIndex = 0;  

let typewriterSpeed = 20; 

​

// Word display variables

let words = [

  "The", "Mowallis", "must", "enter", "the",

  "Sundarbans", "by", "boat:", "there", "are",

  "no", "roads", "in", "the", "mangrove",

  "forest", "that", "is", "dissected", "many",

  "times", "by", "river", "and", "tidal",

  "channels."

];

let currentWordIndex = 0;

let wordInterval = 4000; // first 5 words every 4s

let fastInterval = 2000; // subsequent words every 2s

let wordDisplay = "";

let wordColor = "white";

​

// Basket game variables

let basketX, basketY;

let flowers = [];

let vehicles = []; // Water particles for aesthetic effect in basket game

​

// Background Text for mythology and gameStart

let backgroundText = "The Mowallis must enter the Sundarbans by boat: there are no roads in the mangrove forest that is dissected many times by river and tidal channels.\n\nThe honey hunters work in groups of 5-8 people, spending their days venturing into the forest to seek out nests. Their nights are spent on their boats anchored as far as possible out into the river channels. The reason for this is the presence of tigers in the forest. Even the security of a boat is no guarantee of safety as tigers are reported to swim out at night and carry men away (Burton 1933).";

​

// Variables for serial communication

let latestData = "waiting for data";

​

// Images

let startBg, nightBg;

​

// Typewriter interval ID

let typewriterIntervalID;

​

// Variable to store the setTimeout ID for word transitions

let wordTimeoutID;

​

// Debugging Mode

let debugMode = false; // Set to false when using actual sensors

​

// Feedback Variables

let feedbackMessage = "";

let feedbackColor;

let feedbackTimeout;

let wordTouched = false;

​

// ----------------------

// 2. Function Declarations

// ----------------------

​

// Function to set the current page and manage button visibility

function setPage(newPage) {

  page = newPage;

​

  if (page === "start") {

    connectButton.show();

    howToPlayButton.show();

    mythologyButton.show();

    fullscreenButton.show(); // Show fullscreen button on Start page

    backButton.hide(); // Hide Back button on Start page

  } else if (page === "howToPlay" || page === "mythology") {

    connectButton.hide();

    howToPlayButton.hide();

    mythologyButton.hide();

    fullscreenButton.hide(); // Hide fullscreen button on How to Play and Mythology pages

    backButton.show(); // Show Back button on these pages

  } else if (page === "secondGameIntro") {

    connectButton.hide();

    howToPlayButton.hide();

    mythologyButton.hide();

    fullscreenButton.hide(); // Hide fullscreen button on secondGameIntro

    backButton.hide(); // Hide Back button on secondGameIntro

  } else {

    connectButton.hide();

    howToPlayButton.hide();

    mythologyButton.hide();

    fullscreenButton.hide();

    backButton.hide(); // Hide Back button on other pages

  }

}

​

// Function to toggle fullscreen mode

function toggleFullscreen() {

  let fs = fullscreen(); // Get the current fullscreen state

  fullscreen(!fs);       // Toggle fullscreen state

  console.log(fs ? "Exited fullscreen mode." : "Entered fullscreen mode.");

}

​

// Function to style buttons dynamically

function styleButtons(buttonColors = {}) {

  const defaults = {

    connect: '#855D08', // Default green

    howToPlay: '#B77607', // Default blue

    mythology: '#8C5506', // Default red

    fullscreen: '#E1D8D8', // Default gray

    back: '#555555' // Default gray

  };

​

  const colors = { ...defaults, ...buttonColors };

​

  let buttonStyles = `

    color: rgb(255,255,255);

    font-size: 15px;

    border: none;

    border-radius: 5px;

    padding: 8px 20px;

    text-align: center;

    text-decoration: none;

    display: inline-block;

    margin: 5px;

    cursor: pointer;

    transition: all 0.3s ease;

    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

  `;

​

  connectButton.style(buttonStyles + `background-color: ${colors.connect};`);

  howToPlayButton.style(buttonStyles + `background-color: ${colors.howToPlay};`);

  mythologyButton.style(buttonStyles + `background-color: ${colors.mythology};`);

  fullscreenButton.style(buttonStyles + `background-color: ${colors.fullscreen};`);

  backButton.style(buttonStyles + `background-color: ${colors.back};`);

​

  [connectButton, howToPlayButton, mythologyButton, fullscreenButton, backButton].forEach((btn, index) => {

    const baseColor = Object.values(colors)[index];

    btn.mouseOver(() => {

      btn.style('background-color', shadeColor(baseColor, -10));

      btn.style('transform', 'translateY(-2px)');

      btn.style('box-shadow', '0 6px 8px rgba(0, 0, 0, 0.15)');

    });

    btn.mouseOut(() => {

      btn.style('background-color', baseColor);

      btn.style('transform', 'translateY(0px)');

      btn.style('box-shadow', '0 4px 6px rgba(0, 0, 0, 0.1)');

    });

  });

}

​

// Helper function to adjust color brightness

function shadeColor(color, percent) {

  let f = parseInt(color.slice(1), 16),

      t = percent < 0 ? 0 : 255,

      p = percent < 0 ? percent * -1 : percent,

      R = f >> 16,

      G = (f >> 8) & 0x00FF,

      B = f & 0x0000FF;

  return (

    '#' +

    (

      0x1000000 +

      (Math.round((t - R) * p) + R) * 0x10000 +

      (Math.round((t - G) * p) + G) * 0x100 +

      (Math.round((t - B) * p) + B)

    )

      .toString(16)

      .slice(1)

  );

}

​

// ----------------------

// 3. preload() Function

// ----------------------

function preload() {

  startBg = loadImage('start.png', () => console.log("start.png loaded."), () => console.error("Failed to load start.png."));

  nightBg = loadImage('night.png', () => console.log("night.png loaded."), () => console.error("Failed to load night.png."));

}

​

// ----------------------

// 4. setup() Function

// ----------------------

function setup() {

  createCanvas(windowWidth, windowHeight);

  textAlign(CENTER, CENTER);

​

  backButton = createButton('Back');

  backButton.position(width / 2 - backButton.width / 2, height - 100);

  backButton.mousePressed(() => setPage("start"));

  backButton.hide();

​

  createButtons();

  styleButtons();

  setPage("start");

​

  feedbackColor = color(255);

​

  typewriterIntervalID = setInterval(() => {

    if (textIndex < typewriterText.length) {

      currentText += typewriterText[textIndex];

      textIndex++;

    }

  }, typewriterSpeed);

}

​

// ----------------------

// 5. draw() Function

// ----------------------

function draw() {

  if (page === "start" && startBg && startBg.width > 0) {

    imageMode(CORNER);

    image(startBg, 0, 0, width, height);

  } else if ((page === "gameStart" || page === "game" || page === "won" || page === "lost" || page === "secondGameIntro" || page === "basketGame") && nightBg && nightBg.width > 0) {

    imageMode(CORNER);

    image(nightBg, 0, 0, width, height);

  } else {

    background(30); // Fallback background

  }

​

  switch(page) {

    case "start":

      handleStartPage();

      break;

    case "gameStart":

      handleGameStartPage();

      break;

    case "game":

      handleGamePage();

      break;

    case "basketGame":

      handleBasketGame();

      break;

    case "howToPlay":

      handleHowToPlay();

      break;

    case "mythology":

      drawMythologyPage();

      break;

    case "secondGameIntro":

      handleSecondGameIntro();

      break;

    case "won":

    case "lost":

      handleEndPage();

      break;

    default:

      break;

  }

​

  if (feedbackMessage !== "") {

    push();

    let boxWidth = width * 0.3;

    let boxHeight = 50;

    let boxX = width / 2 - boxWidth / 2;

    let boxY = height - 80;

​

    fill(240);

    noStroke();

    rect(boxX, boxY, boxWidth, boxHeight, 10);

​

    fill(feedbackColor);

    textSize(24);

    text(feedbackMessage, width / 2, boxY + boxHeight / 2);

    pop();

  }

}

​

// ----------------------

// 6. createButtons() Function

// ----------------------

function createButtons() {

  connectButton = createButton('Connect to Serial');

  connectButton.position(width / 2 - connectButton.width / 2, height / 2 - 220);

  connectButton.mousePressed(() => {

    setUpSerial();

    connectButton.hide();

    console.log("Serial connection initiated.");

  });

​

  howToPlayButton = createButton('How to Play');

  howToPlayButton.position(width / 2 - howToPlayButton.width / 2, height / 2 + 205);

  howToPlayButton.mousePressed(() => {

    setPage("howToPlay");

    console.log("Navigated to How to Play page.");

  });

​

  mythologyButton = createButton('Read the Mythology');

  mythologyButton.position(width / 2 - mythologyButton.width / 2, height / 2 + 255);

  mythologyButton.mousePressed(() => {

    setPage("mythology");

    console.log("Navigated to Mythology page.");

  });

​

  fullscreenButton = createButton('Fullscreen');

  fullscreenButton.mousePressed(toggleFullscreen);

​

  positionButtons();

​

  if (page === "start") {

    connectButton.show();

    howToPlayButton.show();

    mythologyButton.show();

    fullscreenButton.show();

  } else {

    connectButton.hide();

    howToPlayButton.hide();

    mythologyButton.hide();

    fullscreenButton.hide();

  }

}

​

// ----------------------

// 7. positionButtons() Function

// ----------------------

function positionButtons() {

  let centerX = width / 2;

​

  connectButton.position(centerX - connectButton.width / 2, height / 2 - 220);

  howToPlayButton.position(centerX - howToPlayButton.width / 2, height / 2 + 205);

  mythologyButton.position(centerX - mythologyButton.width / 2, height / 2 + 255);

  fullscreenButton.position(centerX - fullscreenButton.width / 2, height / 2 + 275);

}

​

​

​

​

// ----------------------

// 8. Pages Handling Functions

// ----------------------

function handleStartPage() {

  fill(255);

  textSize(48);

  stroke(0);

  strokeWeight(2);

  text("Sundarban and Bonbibi", width / 2, height / 13);

​

  noStroke();

  drawInstructionBox(currentText);

}

​

function handleGameStartPage() {

  fill(255);

  textSize(36);

  stroke(0);

  strokeWeight(2);

  text("Get Ready!", width / 2, height / 2 - 50);

​

  noStroke();

  fill(255);

  textSize(24);

  text(backgroundText, width / 2, height / 2 + 50, width * 0.8);

}

​

function handleGamePage() {

  // Display timer and score at the top

  displayTimerAndScore();

​

  // Display latest data at the bottom-left for user reference

  displaySensorData();

​

  // Display current word with a glowing effect

  if (wordDisplay !== "") {

    push();

    textAlign(CENTER, CENTER);

    textSize(64);

    let glowColor = wordColor === "yellow" ? color(255, 255, 0) : color(255);

    strokeWeight(4);

    stroke(glowColor);

    fill(glowColor);

    text(wordDisplay, width / 2, height / 2);

    pop();

  }

}

​

function handleBasketGame() {

  // Display timer and score at the top

  displayTimerAndScore();

​

  // Display latest data at the bottom-left for user reference

  displaySensorData();

​

  // Draw water particles

  for (let i = 0; i < vehicles.length; i++) {

    vehicles[i].update();

    vehicles[i].show();

  }

​

  // Draw flowers

  for (let i = flowers.length - 1; i >= 0; i--) {

    flowers[i].update();

    flowers[i].show();

​

    // Check collision with basket

    if (dist(flowers[i].pos.x, flowers[i].pos.y, basketX, basketY) < 40) {

      score++; // Increment score

      flowers.splice(i, 1); // Remove collected flower

    }

​

    // Remove flowers out of bounds

    if (flowers[i].pos.y > height) {

      flowers.splice(i, 1);

    }

  }

​

  // Generate flowers every 30 frames from random positions

  if (frameCount % 30 === 0) {

    let f = new Flower(random(50, width - 50), -50, random(30, 60), random(TWO_PI), floor(random(6)));

    flowers.push(f);

  }

​

  // Draw basket

  drawBasket();

​

  // Check for game over condition

  if (countdown <= 0 && !gameOver) {

    gameOver = true;

    gameResult = "Time's Up! You Lose!";

    setPage("lost");

    console.log("Timer ended. Time's up!");

  }

}

​

function handleEndPage() {

  fill(gameResult.includes("Win") ? color(0, 200, 0) : color(200, 0, 0));

  noStroke();

  textSize(48);

  text(gameResult, width / 2, height / 2 - 50);

​

  fill(255);

  textSize(32);

  text("Your Score: " + score, width / 2, height / 2);

​

  textSize(24);

  text("Press 'R' to Restart", width / 2, height / 2 + 50);

}

​

function handleHowToPlay() {

  clear();

  background(34, 139, 34);

  fill(255);

  textSize(32);

  text("How to Play:", width / 2, height / 5);

​

  textSize(24);

  text(

    "Words will appear in yellow or white.\n" +

    "If the word is yellow, use the yellow sensor.\n" +

    "If the word is white, use the white sensor.\n" +

    "Respond quickly and accurately to score points.",

    width / 2,

    height / 2

  );

​

  backButton.show();

}

​

function drawMythologyPage() {

  clear();

  background(34, 139, 34);

  fill(255);

  textSize(28);

  textAlign(LEFT, TOP);

​

  text(backgroundText, 50, 50, width - 100, height - 100);

​

  backButton.show();

  textAlign(CENTER, CENTER);

}

​

function handleSecondGameIntro() {

  fill(255);

  textSize(36);

  stroke(0);

  strokeWeight(2);

  text("Prepare for the Next Challenge!", width / 2, height / 4);

​

  noStroke();

  fill(255);

  textSize(24);

  text("Collect flowers using the basket. Press the button to start the basket game.", width / 2, height / 2);

​

  backButton.hide(); // Hide the back button on this page

}

​

// ----------------------

// 9. Instruction Box Function

// ----------------------

function drawInstructionBox(textContent) {

  textSize(18);

​

  let boxWidth = width * 0.4;

  let boxHeight = 60;

  let boxX = width / 2 - boxWidth / 2;

  let boxY = height / 1.5 - boxHeight / 12;

​

  noStroke();

  fill('rgb(165,88,8)');

  rect(boxX, boxY, boxWidth, boxHeight, 10);

​

  fill(255);

  text(textContent, width / 2, boxY + boxHeight /2);

}

​

// ----------------------

// 10. Display Timer and Score Function

// ----------------------

function displayTimerAndScore() {

  push();

  textAlign(CENTER, CENTER);

  textSize(24);

  noStroke();

  fill(0, 150);

  rectMode(CENTER);

  rect(width / 2, 50, 220, 60, 10);

  fill(255);

  text("Time: " + countdown + "s | Score: " + score, width / 2, 50);

  pop();

}

​

// ----------------------

// 11. Display Sensor Data Function

// ----------------------

function displaySensorData() {

  push();

  textAlign(LEFT, CENTER);

  textSize(16);

  noStroke();

  fill(0, 150);

  rectMode(CORNER);

  rect(20, height - 60, 320, 40, 10);

  fill(255);

  text("Latest Data: " + latestData, 40, height - 40);

  pop();

}

​

// ----------------------

// 12. Game Logic Functions

// ----------------------

function setupGameElements() {

  currentWordIndex = 0;

  wordDisplay = "";

  wordColor = "white";

  countdown = timer;

  gameOver = false;

  gameResult = "";

  score = 0;

​

  wordInterval = 4000;

  console.log("Game elements reset.");

​

  gameStartInitiated = false;

}

​

function setNextWord() {

  if (gameOver) return;

​

  if (currentWordIndex >= words.length) {

    // No more words in the first game => Transition to the second game intro

    gameOver = true;

    gameResult = "You Escaped Successfully! Get Ready for the Next Challenge!";

    setPage("secondGameIntro"); // Navigate to the second game intro page

    console.log("Transitioning to second game intro.");

    return;

  }

​

  wordDisplay = words[currentWordIndex];

  wordColor = random(['yellow', 'white']);

  currentWordIndex++;

​

  wordTouched = false;

​

  if (currentWordIndex < 5) {

    wordInterval = 4000;

  } else {

    wordInterval = 2000;

  }

​

  if (wordTimeoutID) {

    clearTimeout(wordTimeoutID);

  }

​

  wordTimeoutID = setTimeout(setNextWord, wordInterval);

}

​

// ----------------------

// 13. Timer Functions

// ----------------------

let timerInterval;

​

function startTimer() {

  if (timerStart) return;

​

  timerStart = true;

​

  timerInterval = setInterval(() => {

    if (page !== "game" && page !== "basketGame") {

      clearInterval(timerInterval);

      return;

    }

​

    if (countdown > 0) {

      countdown--;

      console.log(`Timer: ${countdown}s left.`);

    } else {

      if (!gameOver) {

        gameOver = true;

        gameResult = "Time's Up! You Lose!";

        setPage("lost");

        clearInterval(timerInterval);

        console.log("Timer ended. Time's up!");

      }

    }

  }, 1000);

}

​

// ----------------------

// 14. Restart Functionality

// ----------------------

function keyPressed() {

  if (debugMode) {

    // Simulate yellow sensor activation with 'Y' key

    if (key === 'Y' || key === 'y') {

      let simulatedData = "5,15";

      console.log("Simulated Yellow Sensor Activation:", simulatedData);

      readSerial(simulatedData);

    }

​

    // Simulate white sensor activation with 'W' key

    if (key === 'W' || key === 'w') {

      let simulatedData = "15,5";

      console.log("Simulated White Sensor Activation:", simulatedData);

      readSerial(simulatedData);

    }

​

    // Simulate button press with 'B' key for second game

    if (key === 'B' || key === 'b') {

      let simulatedData = "ButtonPressed";

      console.log("Simulated Button Press:", simulatedData);

      readSerial(simulatedData);

    }

​

    // Simulate potentiometer values with 'P' key for basket game

    if (key === 'P' || key === 'p') {

      let simulatedData = "600";

      console.log("Simulated Potentiometer Activation:", simulatedData);

      readSerial(simulatedData);

    }

  } else {

    // Restart functionality

    if (key === 'r' || key === 'R') {

      if (page === "secondGameIntro" || page === "won") {

        // If on secondGameIntro or won page, reset to start

        setupGameElements();

        setPage("start");

        console.log("Game restarted to Start page.");

        currentText = "";

        textIndex = 0;

​

        clearInterval(typewriterIntervalID);

​

        typewriterIntervalID = setInterval(() => {

          if (textIndex < typewriterText.length) {

            currentText += typewriterText[textIndex];

            textIndex++;

          }

        }, typewriterSpeed);

      } else {

        // For other pages, reset game elements and go to start

        setupGameElements();

        setPage("start");

        console.log("Game restarted to Start page.");

        currentText = "";

        textIndex = 0;

​

        clearInterval(typewriterIntervalID);

​

        typewriterIntervalID = setInterval(() => {

          if (textIndex < typewriterText.length) {

            currentText += typewriterText[textIndex];

            textIndex++;

          }

        }, typewriterSpeed);

      }

    }

  }

}

​

// ----------------------

// 15. Window Resizing Function

// ----------------------

function windowResized() {

  resizeCanvas(windowWidth, windowHeight);

  positionButtons();

  backButton.position(width / 2 - backButton.width / 2, height - 100);

}

​

// ----------------------

// 16. Helper Functions (Optional Enhancements)

// ----------------------

function calcTextSize(baseSize) {

  return min(windowWidth, windowHeight) / 800 * baseSize;

}

​

function updateTextSizes() {

  // Can be expanded for global text size adjustments

}

​

// ----------------------

// 17. Basket Game Classes and Functions

// ----------------------

class Vehicle {

  constructor(x, y) {

    this.pos = createVector(x, y);

    this.vel = createVector(0, random(1, 3));

    this.acc = createVector(0, 0);

  }

​

  update() {

    this.vel.add(this.acc);

    this.pos.add(this.vel);

    this.acc.mult(0);

​

    if (this.pos.y > height) {

      this.pos.y = 0;

      this.pos.x = random(width);

    }

  }

​

  show() {

    stroke(173, 216, 230, 150);

    strokeWeight(2);

    point(this.pos.x, this.pos.y);

  }

}

​

class Flower {

  constructor(x, y, size, rotation, type) {

    this.pos = createVector(x, y);

    this.size = size;

    this.rotation = rotation;

    this.type = type;

  }

​

  update() {

    this.pos.y += 3;

  }

​

  show() {

    push();

    translate(this.pos.x, this.pos.y);

    rotate(this.rotation);

    drawFlower(0, 0, this.size, this.type);

    pop();

  }

}

​

function drawFlower(x, y, size, type) {

  switch (type) {

    case 0:

      drawDaisy(x, y, size);

      break;

    case 1:

      drawTulip(x, y, size);

      break;

    case 2:

      drawRose(x, y, size);

      break;

    case 3:

      drawSunflower(x, y, size);

      break;

    case 4:

      drawLily(x, y, size);

      break;

    case 5:

      drawMarigold(x, y, size);

      break;

    default:

      drawDaisy(x, y, size); // Default to daisy if type is undefined

      break;

  }

}

​

function drawDaisy(x, y, size) {

  let petalCount = 9;

  let petalLength = size;

  let petalWidth = size / 3;

​

  stroke(0);

  fill('#D9E4E6');

  push();

  translate(x, y);

  for (let i = 0; i < petalCount; i++) {

    rotate(TWO_PI / petalCount);

    ellipse(0, -size / 2, petalWidth, petalLength);

  }

  pop();

​

  fill('#F2F2F2');

  noStroke();

  ellipse(x, y, size / 2);

}

​

function drawTulip(x, y, size) {

  let petalCount = 6;

  let petalWidth = size / 2;

​

  stroke(0);

  fill('#AEB7FE');

  push();

  translate(x, y);

  for (let i = 0; i < petalCount; i++) {

    rotate(TWO_PI / petalCount);

    ellipse(0, -size / 2, petalWidth, size);

  }

  pop();

​

  fill('#EDEAE6');

  noStroke();

  ellipse(x, y, size / 3);

}

​

function drawRose(x, y, size) {

  let petalCount = 10;

  let petalWidth = size / 3;

​

  stroke(0);

  fill('#D87373');

  push();

  translate(x, y);

  for (let i = 0; i < petalCount; i++) {

    rotate(TWO_PI / petalCount);

    ellipse(0, -size / 2, petalWidth, size / 1.5);

  }

  pop();

​

  fill('#F5E6E8');

  noStroke();

  ellipse(x, y, size / 4);

}

​

function drawSunflower(x, y, size) {

  let petalCount = 20;

  let petalLength = size * 1.5;

  let petalWidth = size / 2;

​

  stroke(0);

  fill('#FACA49');

  push();

  translate(x, y);

  for (let i = 0; i < petalCount; i++) {

    rotate(TWO_PI / petalCount);

    ellipse(0, -size / 2, petalWidth, petalLength);

  }

  pop();

​

  fill('#6E4B1B');

  noStroke();

  ellipse(x, y, size);

}

​

function drawLily(x, y, size) {

  let petalCount = 6;

  let petalWidth = size / 2;

​

  stroke(0);

  fill('#998D30');

  push();

  translate(x, y);

  for (let i = 0; i < petalCount; i++) {

    rotate(TWO_PI / petalCount);

    ellipse(0, -size / 2, petalWidth, size);

  }

  pop();

​

  fill('#FBE7E7');

  noStroke();

  ellipse(x, y, size / 4);

}

​

function drawMarigold(x, y, size) {

  let petalCount = 12;

  let petalLength = size;

  let petalWidth = size / 2;

​

  stroke(0);

  fill('#F4A263');

  push();

  translate(x, y);

  for (let i = 0; i < petalCount; i++) {

    rotate(TWO_PI / petalCount);

    ellipse(0, -size / 2, petalWidth, petalLength);

  }

  pop();

​

  fill('#FFC107');

  noStroke();

  ellipse(x, y, size / 3);

}

​

// Draw basket based on basketX and basketY

function drawBasket() {

  fill("#FFD700"); // Gold color for basket

  rectMode(CENTER);

  rect(basketX, basketY - 10, 60, 20, 5); // Basket rectangle

}

​

// ----------------------

// 18. Serial-Controlled Basket Movement

// ----------------------

​

// Handle serial events and update game based on data

function handleSerialEvent(event) {

  console.log("Handling Serial Event:", event);

​

  // If the event is "ButtonPressed" and on secondGameIntro, start basket game

  if (event === "ButtonPressed" && page === "secondGameIntro") {

    setPage("basketGame");

    setupBasketGameElements();

    startTimer();

    console.log("Basket game started.");

    return;

  }

​

  // If the event is "ButtonPressed" and on start page, start word game

  if (event === "ButtonPressed" && page === "start") {

    setPage("gameStart");

    console.log("Word game is starting...");

​

    setPage("game");

    setupGameElements();

    setNextWord();

    startTimer();

    console.log("Word game started without delay.");

​

    gameStartInitiated = false;

    return;

  }

​

  // Handle sensor data for word game

  if (page === "game" && !gameOver && !wordTouched) {

    let trimmedEvent = event.trim();

    let values = trimmedEvent.split(',');

    console.log("Parsed values:", values);

​

    if (values.length >= 2) {

      let distanceYellow = parseFloat(values[0].trim());