​

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

// 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";

​

// 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 = true; // Set to false when using actual sensors

​

// Feedback Variables

let feedbackMessage = "";

let feedbackColor; // Removed initialization here

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 {

    connectButton.hide();

    howToPlayButton.hide();

    mythologyButton.hide();

    fullscreenButton.hide();

    backButton.hide(); // Hide Back button on other pages like gameStart, game, won, lost

  }

}

​

// Function to toggle fullscreen mode

function toggleFullscreen() {

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

  fullscreen(!fs);       // Toggle fullscreen state

  if (!fs) {

    console.log("Entered fullscreen mode.");

  } else {

    console.log("Exited fullscreen mode.");

  }

}

​

​

​

// Function to style buttons (applied to all buttons including backButton)

// Function to style buttons dynamically

function styleButtons(buttonColors = {}) {

  // Default colors if not provided

  const defaults = {

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

    howToPlay: '#B77607', // Default blue

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

    fullscreen: '#E1D8D8', // Default gray

    back: '#555555' // Default gray

  };

​

  // Merge provided colors with defaults

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

​

  // Common button styling

  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);

  `;

​

  // Apply styles to each button

  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};`);

​

  // Add hover effects dynamically

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

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

    btn.mouseOver(() => {

      btn.style('background-color', shadeColor(baseColor, -10)); // Darken color on hover

      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); // Reset to original color

      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() {

  // Load backgrounds

  startBg = loadImage('start.png', () => {

    console.log("start.png loaded successfully.");

  }, () => {

    console.error("Failed to load start.png.");

  });

  nightBg = loadImage('night.png', () => {

    console.log("night.png loaded successfully.");

  }, () => {

    console.error("Failed to load night.png.");

  });

}

​

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

// 4. setup() Function

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

function setup() {

  createCanvas(windowWidth, windowHeight);

  textAlign(CENTER, CENTER);

  // Creating Back Button first

  backButton = createButton('Back');

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

  backButton.mousePressed(() => {

    setPage("start"); // Navigate back to Start page

    console.log("Navigated back to Start page.");

  });

  backButton.hide(); // Hide initially since it's not needed on Start page

  // Create all other buttons

  createButtons();

  // Apply styles to all buttons including backButton

  styleButtons();

  // Set initial page to "start" to manage button visibility

  setPage("start");

  // Initialize feedbackColor inside setup()

  feedbackColor = color(255);

  // Start typewriter effect

  typewriterIntervalID = setInterval(() => {

    if (textIndex < typewriterText.length) {

      currentText += typewriterText[textIndex];

      textIndex++;

    }

  }, typewriterSpeed);

  // If in debug mode, ensure typewriter is complete for easier testing

  if (debugMode) {

    currentText = typewriterText;

    textIndex = typewriterText.length;

    clearInterval(typewriterIntervalID);

  }

}

​

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

// 5. draw() Function

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

function draw() {

  // Choose background based on page

  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") && nightBg && nightBg.width > 0) {

    imageMode(CORNER);

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

  } else {

    background(30); // dark fallback background for a professional look

  }

​

  switch(page) {

    case "start":

      handleStartPage();

      break;

    case "gameStart":

      handleGameStartPage();

      break;

    case "game":

      handleGamePage();

      break;

    case "howToPlay":

      handleHowToPlay();

      break;

    case "mythology":

      drawMythologyPage();

      break;

    case "won":

    case "lost":

      handleEndPage();

      break;

    default:

      break;

  }

  // Display feedback box

  if (feedbackMessage !== "") {

    push();

    // Define box dimensions and position

    let boxWidth = width * 0.3;

    let boxHeight = 50;

    let boxX = width / 2 - boxWidth / 2;

    let boxY = height - 80; // 80 pixels from bottom

    // Draw off-white rectangle

    fill(240); // off-white

    noStroke();

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

    // Draw feedback text

    fill(feedbackColor);

    textSize(24);

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

    pop();

  }

}

​

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

// 6. createButtons() Function

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

function createButtons() {

  // Create Connect Button

  connectButton = createButton('Connect to Serial');

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

  connectButton.mousePressed(() => {

    setUpSerial(); // Initialize serial connection via p5.web-serial.js

    connectButton.hide();

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

  });

  // Create How to Play button

  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.");

  });

  // Create Mythology Button

  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.");

  });

  // Create Fullscreen Button

  fullscreenButton = createButton('Fullscreen');

  fullscreenButton.mousePressed(toggleFullscreen); // Link to toggle function

​

  // Position buttons initially

  positionButtons();

  // Show or hide buttons based on the current page

  if (page === "start") {

    connectButton.show();

    howToPlayButton.show();

    mythologyButton.show();

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

  } else {

    connectButton.hide();

    howToPlayButton.hide();

    mythologyButton.hide();

    fullscreenButton.hide(); // Hide fullscreen button on other pages

  }

​

  console.log("Buttons created and positioned.");

}

​

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

// 7. positionButtons() Function

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

function positionButtons() {

  // Center X position

  let centerX = width / 2;

  // Calculate Y positions with relative offsets

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

  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); // Positioned below other buttons

}

​

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

// 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 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(); // Show Back button when on How to Play page

}

​

function drawMythologyPage() {

  clear();

  background(34, 139, 34);

  fill(255);

  textSize(28);

  textAlign(LEFT, TOP);

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

  backButton.show(); // Show Back button when on Mythology page

  textAlign(CENTER, CENTER);

}

​

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

// 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.");

  // Reset gameStartInitiated for next possible restart

  gameStartInitiated = false;

}

​

function setNextWord() {

  if (gameOver) return;

  if (currentWordIndex >= words.length) {

    // No more words => Win

    gameOver = true;

    gameResult = "You Escaped Successfully! You Win!";

    setPage("won");

    console.log("All words displayed. Player wins.");

    return;

  }

  wordDisplay = words[currentWordIndex];

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

  currentWordIndex++;

  wordTouched = false; // Reset touch flag

  if (currentWordIndex < 5) {

    wordInterval = 4000;

  } else {

    wordInterval = 2000;

  }

  // Clear any existing timeout to prevent overlaps

  if (wordTimeoutID) {

    clearTimeout(wordTimeoutID);

  }

  // Store the timeout ID to manage it later

  wordTimeoutID = setTimeout(setNextWord, wordInterval);

}

​

function handleSerialEvent(event) {

  console.log("Received event:", event);

​

  // If the event is "ButtonPressed", start the game

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

    setPage("gameStart");

    console.log("Game is starting...");

    // Proceed to game page immediately to eliminate lag

    setPage("game");

    setupGameElements();

    setNextWord();

    startTimer();

    console.log("Game started without delay.");

    gameStartInitiated = false; // Reset the flag for potential future games

    return;

  }

  // Handle sensor data

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

    let trimmedEvent = event.trim();

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

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

    if (values.length >= 2) { // Expecting at least two values

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

      let distanceWhite = parseFloat(values[1].trim());

      // Optionally log the third value if present

      if (values.length > 2) {

        console.warn("Extra sensor data received and ignored:", values.slice(2));

      }

      if (!isNaN(distanceYellow) && !isNaN(distanceWhite)) {

        console.log(`Sensor Readings - Yellow: ${distanceYellow}cm, White: ${distanceWhite}cm`);

​

        // Define touch threshold

        let touchThreshold = 10; // in centimeters

        if (wordColor === "yellow") {

          if (distanceYellow > 0 && distanceYellow < touchThreshold) {

            // Correct touch

            score++;

            console.log("Yellow sensor touched correctly! Score:", score);

            wordDisplay = "";

            clearTimeout(wordTimeoutID); // Clear the existing setTimeout

            setNextWord(); // Proceed to the next word

            // Set feedback

            feedbackMessage = "Correct!";

            feedbackColor = color(0, 200, 0); // green

            wordTouched = true;

            // Clear previous feedback timeout

            if (feedbackTimeout) {

              clearTimeout(feedbackTimeout);

            }

            // Clear feedback after 2 seconds

            feedbackTimeout = setTimeout(() => {

              feedbackMessage = "";

            }, 2000);

          } else if (distanceWhite > 0 && distanceWhite < touchThreshold) {

            // Incorrect sensor touched

            console.log("White sensor touched incorrectly.");

            feedbackMessage = "Incorrect!";

            feedbackColor = color(200, 0, 0); // red

            wordTouched = true;

            // Clear previous feedback timeout

            if (feedbackTimeout) {

              clearTimeout(feedbackTimeout);

            }

            // Clear feedback after 2 seconds

            feedbackTimeout = setTimeout(() => {

              feedbackMessage = "";

            }, 2000);

          }

        } else if (wordColor === "white") {

          if (distanceWhite > 0 && distanceWhite < touchThreshold) {

            // Correct touch

            score++;

            console.log("White sensor touched correctly! Score:", score);

            wordDisplay = "";

            clearTimeout(wordTimeoutID); // Clear the existing setTimeout

            setNextWord(); // Proceed to the next word

            // Set feedback

            feedbackMessage = "Correct!";

            feedbackColor = color(0, 200, 0); // green

            wordTouched = true;

            // Clear previous feedback timeout

            if (feedbackTimeout) {

              clearTimeout(feedbackTimeout);

            }

            // Clear feedback after 2 seconds

            feedbackTimeout = setTimeout(() => {

              feedbackMessage = "";

            }, 2000);

          } else if (distanceYellow > 0 && distanceYellow < touchThreshold) {

            // Incorrect sensor touched

            console.log("Yellow sensor touched incorrectly.");

            feedbackMessage = "Incorrect!";

            feedbackColor = color(200, 0, 0); // red

            wordTouched = true;

            // Clear previous feedback timeout

            if (feedbackTimeout) {

              clearTimeout(feedbackTimeout);

            }

            // Clear feedback after 2 seconds

            feedbackTimeout = setTimeout(() => {

              feedbackMessage = "";

            }, 2000);

          }

        }

      } else {

        console.log("Invalid sensor data received.");

      }

    } else {

      console.log("Unexpected sensor data format.");

    }

  }

}

​

function startTimer() {

  if (timerStart) return; // Prevent multiple timers

  timerStart = true;

  // Start countdown timer

  timerInterval = setInterval(() => {

    if (page !== "game") {

      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);

}

​

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

// 13. Restart Functionality

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

function keyPressed() {

  if (debugMode) {

    // Simulate yellow sensor activation with 'Y' key

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

      let simulatedData = "5,15"; // distanceYellow = 5cm (active), distanceWhite = 15cm (inactive)

      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"; // distanceYellow = 15cm (inactive), distanceWhite = 5cm (active)

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

      readSerial(simulatedData);

    }

  } else {

    // Existing restart functionality

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

      setupGameElements();

      setPage("start");

      console.log("Game restarted.");

      currentText = "";

      textIndex = 0;

      clearInterval(typewriterIntervalID); // Clear existing interval

      typewriterIntervalID = setInterval(() => {

        if (textIndex < typewriterText.length) {

          currentText += typewriterText[textIndex];

          textIndex++;

        }

      }, typewriterSpeed);

    }

  }

}

​

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

// 14. Window Resizing Function

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

function windowResized() {

  resizeCanvas(windowWidth, windowHeight);

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

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

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

  fullscreenButton.position(width / 2 - fullscreenButton.width / 2, height / 2 + 275); // Positioned below other buttons

  backButton.position(width / 2 - backButton.width / 2, height - 100); // Reposition Back button if visible

}

​

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

// 15. Helper Functions (Optional Enhancements)

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

​

// Function to calculate responsive text size (optional enhancement)

function calcTextSize(baseSize) {

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

}

​

// Function to update text sizes when window is resized (optional enhancement)

function updateTextSizes() {

  // Currently, text sizes are set in individual page handlers using calcTextSize()

  // This function can be expanded if you have global text sizes

}

​

​

function readSerial(data) {

  if (data.trim().length > 0) {

    latestData = data.trim();

    handleSerialEvent(latestData);

  }

}

​