tutorial.js

class Tutorial {
  constructor(gameObjects) {
    this.active = false;
    this.step = 0;
    this.steps = [];
    this.skipButton = null;
    this.nextButton = null;
    this.prevButton = null;
    this.seenFlag = false;
    
    // Store references to game objects
    this.gameObjects = gameObjects;

    // Initialize tutorial steps
    this.initSteps();
  }
  
  initSteps() {
    this.steps = [
      {
        title: "Welcome!",
        text: "Welcome to your virtual pet game! This tutorial will show you the basics of taking care of your pet.",
        highlight: null, // No specific element to highlight
        position: "center"
      },
      {
        title: "Meet Your Pet",
        text: "This is your pet! Tap or click on it to interact. Your pet needs attention to stay happy.",
        highlight: "pet",
        position: "top"
      },
      {
        title: "Status Panel",
        text: "This panel shows your pet's health, energy, hunger and mood. Keep an eye on these stats to keep your pet healthy!",
        highlight: "status",
        position: "left"
      },
      {
        title: "Feed Your Pet",
        text: "Your pet gets hungry over time. The feed table in the bottom left contains food. Your pet will eat automatically when hungry.",
        highlight: "feed",
        position: "bottom"
      },
      {
        title: "Pet's House",
        text: "This is your pet's house. When your pet gets tired, tap the house to let them rest and recover energy.",
        highlight: "house",
        position: "right"
      },
      {
        title: "Shop",
        text: "Buy items for your pet in the Shop using coins you earn by interacting with your pet.",
        highlight: "shop",
        position: "bottom"
      },
      {
        title: "Inventory",
        text: "Access your purchased items in the Inventory. Use food items to feed your pet.",
        highlight: "inventory",
        position: "bottom"
      },
      {
        title: "Backgrounds",
        text: "Change your pet's environment with different background themes you can purchase in the shop.",
        highlight: "backgrounds",
        position: "bottom"
      },
      {
        title: "Settings",
        text: "Access game settings, save your progress, and more by tapping the gear icon in the top-right corner.",
        highlight: "settings",
        position: "top-right"
      },
      {
        title: "Ready to Play!",
        text: "You're all set! Remember to save your game regularly and take good care of your pet!",
        highlight: null,
        position: "center"
      }
    ];
  }

  start() {
    this.active = true;
    this.step = 0;
    
    // Create tutorial navigation buttons
    this.createButtons();
    
    // Pause pet movement during tutorial
    if (this.gameObjects.pet) {
      this.gameObjects.pet.pause();
    }
  }

  end() {
    this.active = false;
    this.step = 0;
    this.seenFlag = true; // Mark tutorial as seen
    
    // Remove tutorial buttons if they exist
    if (this.skipButton) {
      this.skipButton.remove();
      this.skipButton = null;
    }
    
    if (this.nextButton) {
      this.nextButton.remove();
      this.nextButton = null;
    }
    
    if (this.prevButton) {
      this.prevButton.remove();
      this.prevButton = null;
    }
    
    // Resume pet movement
    if (this.gameObjects.pet) {
      this.gameObjects.pet.resume();
    }
  }

  createButtons() {
    // Calculate responsive dimensions
    const buttonWidth = min(width * 0.2, 150); // Fixed button width based on screen size
    const buttonHeight = min(height * 0.05, 40);
    const buttonPadding = min(width, height) * 0.01;
    const bottomMargin = height * 0.08;
    const buttonFontSize = max(12, min(width, height) * 0.018) + "px";
    
    // Calculate positions to ensure equal spacing
    const totalWidth = buttonWidth * 3 + buttonWidth; // 3 buttons plus spacing
    const startX = (width - totalWidth) / 2;
    
    // Previous button
    this.prevButton = createButton("← Back");
    this.prevButton.position(startX, height - bottomMargin);
    this.prevButton.size(buttonWidth, buttonHeight);
    this.prevButton.mousePressed(() => {
      this.step = max(this.step - 1, 0);
      // Restore next button functionality if moved back from last step
      if (this.step < this.steps.length - 1) {
        this.nextButton.html("Next →");
        this.nextButton.mousePressed(() => {
          this.step = min(this.step + 1, this.steps.length - 1);
          if (this.step === this.steps.length - 1) {
            this.nextButton.html("Finish");
            this.nextButton.mousePressed(() => this.end());
          }
        });
      }
      this.updateButtonsVisibility();
    });
    this.prevButton.style("background-color", "#555555");
    this.prevButton.style("color", "white");
    this.prevButton.style("border", "none");
    this.prevButton.style("padding", buttonPadding + "px");
    this.prevButton.style("border-radius", "4px");
    this.prevButton.style("cursor", "pointer");
    this.prevButton.style("font-size", buttonFontSize);
    this.prevButton.style("text-align", "center");
    
    // Next button
    this.nextButton = createButton("Next →");
    this.nextButton.position(startX + buttonWidth * 1.5, height - bottomMargin);
    this.nextButton.size(buttonWidth, buttonHeight);
    this.nextButton.mousePressed(() => {
      this.step = min(this.step + 1, this.steps.length - 1);
      // If last step, change button text
      if (this.step === this.steps.length - 1) {
        this.nextButton.html("Finish");
        this.nextButton.mousePressed(() => this.end());
      }
      this.updateButtonsVisibility();
    });
    this.nextButton.style("background-color", "#4CAF50");
    this.nextButton.style("color", "white");
    this.nextButton.style("border", "none");
    this.nextButton.style("padding", buttonPadding + "px");
    this.nextButton.style("border-radius", "4px");
    this.nextButton.style("cursor", "pointer");
    this.nextButton.style("font-size", buttonFontSize);
    this.nextButton.style("text-align", "center");
    
    // Skip button
    this.skipButton = createButton("Skip Tutorial");
    this.skipButton.position(startX + buttonWidth * 3, height - bottomMargin);
    this.skipButton.size(buttonWidth, buttonHeight);
    this.skipButton.mousePressed(() => this.end());
    this.skipButton.style("background-color", "#ff5555");
    this.skipButton.style("color", "white");
    this.skipButton.style("border", "none");
    this.skipButton.style("padding", buttonPadding + "px");
    this.skipButton.style("border-radius", "4px");
    this.skipButton.style("cursor", "pointer");
    this.skipButton.style("font-size", buttonFontSize);
    this.skipButton.style("text-align", "center");
    
    // Hide previous button on first step
    this.updateButtonsVisibility();
  }

  updateButtonsVisibility() {
    if (!this.active) return;
    
    // Show/hide previous button based on current step
    if (this.step === 0) {
      this.prevButton.style("visibility", "hidden");
    } else {
      this.prevButton.style("visibility", "visible");
    }
    
    // Update next button text on last step
    if (this.step === this.steps.length - 1) {
      this.nextButton.html("Finish");
    } else {
      this.nextButton.html("Next →");
    }
  }

  display() {
    if (!this.active || this.steps.length === 0) return;
    
    // Get current step data
    const step = this.steps[this.step];
    
    // Draw semi-transparent overlay
    fill(0, 150);
    noStroke();
    rect(0, 0, width, height);

    // Opacity for highlighted elements
    let opacity = 120;
    
    // Create cutout/highlight for the relevant element
    drawingContext.globalCompositeOperation = 'destination-out';
    
    // Highlight the appropriate element based on the current step
    if (step.highlight) {
      const { pet, border, feed, house } = this.gameObjects;
      const settingsButtonSize = 40;
      const settingsButtonPadding = 10;
      
      switch(step.highlight) {
        case "pet":
          // Highlight pet with a semi-transparent circle
          if (pet) {
            fill(255, 120);
            noStroke();
            ellipse(pet.x, pet.y, pet.size * 1.5);
          }
          break;
        case "status":
          // Highlight status panel with semi-transparency
          if (border) {
            fill(255, 120);
            noStroke();
            rect(0, height - border.panelHeight, border.statusSectionWidth, border.panelHeight, 10);
          }
          break;
        case "feed":
          // Calculate feed position
          if (border && feed) {
            let playArea = border.getPlayableArea();
            let feedX = playArea.x + playArea.width * 0.1;
            let feedY = playArea.y + playArea.height * 0.8;
            let feedWidth = playArea.width * feed.tableScale;
            let feedHeight = feedWidth * 0.3;
            
            // Highlight feed table with semi-transparency
            fill(255, 120);
            noStroke();
            rect(feedX - 20, feedY - 20, feedWidth + 40, feedHeight + 40, 10);
          }
          break;
        case "house":
          // Highlight house with semi-transparency
          if (house) {
            fill(255, 120);
            noStroke();
            let housePos = house.getPosition();
            rectMode(CENTER);
            rect(housePos.x, housePos.y * 0.90, house.width * 1.4, house.height * 1.4, 10);
            rectMode(CORNER);
          }
          break;
        case "shop":
          // Find shop button with semi-transparency
          if (border) {
            for (let button of border.buttons) {
              if (button.type === "shop") {
                fill(255, 120);
                noStroke();
                ellipse(button.x, button.y, button.width * 1.5);
                break;
              }
            }
          }
          break;
        case "inventory":
          // Find inventory button with semi-transparency
          if (border) {
            for (let button of border.buttons) {
              if (button.type === "inventory") {
                fill(255, 120);
                noStroke();
                ellipse(button.x, button.y, button.width * 1.5);
                break;
              }
            }
          }
          break;
        case "backgrounds":
          // Find backgrounds button with semi-transparency
          if (border) {
            for (let button of border.buttons) {
              if (button.type === "backgrounds") {
                fill(255, 120);
                noStroke();
                ellipse(button.x, button.y, button.width * 1.5);
                break;
              }
            }
          }
          break;
        case "settings":
          // Highlight settings gear with semi-transparency
          fill(255, 120);
          noStroke();
          ellipse(width - settingsButtonSize/2 - settingsButtonPadding, 
                  settingsButtonSize/2 + settingsButtonPadding, 
                  settingsButtonSize * 1.5);
          break;
        default:
          break;
      }
    }
    
    // Reset composite operation
    drawingContext.globalCompositeOperation = 'source-over';
    
    // Draw tutorial dialog
    let dialogWidth = min(width * 0.8, 500);
    let dialogHeight = 180;
    let dialogX = width / 2 - dialogWidth / 2;
    let dialogY;
    
    // Position dialog based on position property
    switch (step.position) {
      case "top":
        dialogY = 50;
        break;
      case "bottom":
        dialogY = height - dialogHeight - 100;
        break;
      case "left":
        dialogY = height / 2 - dialogHeight / 2;
        break;
      case "right":
        dialogY = height / 2 - dialogHeight / 2;
        break;
      case "top-right":
        dialogY = 50;
        dialogX = width - dialogWidth - 20;
        break;
      default: // center
        dialogY = height / 2 - dialogHeight / 2;
        break;
    }
    
    // Draw semi-transparent dialog box
    fill(255, 250, 240, 230);
    stroke(60, 100, 150, 200);
    strokeWeight(2);
    rect(dialogX, dialogY, dialogWidth, dialogHeight, 15);
    
    // Draw title
    noStroke();
    fill(60, 100, 150);
    textSize(22);
    textAlign(CENTER, TOP);
    text(step.title, dialogX + dialogWidth / 2, dialogY + 20);
    
    // Draw divider line
    stroke(200, 200, 200, 200);
    strokeWeight(1);
    line(dialogX + 20, dialogY + 55, dialogX + dialogWidth - 20, dialogY + 55);
    
    // Draw text
    fill(60, 60, 80);
    noStroke();
    textSize(18);
    textAlign(LEFT, TOP);
    textWrap(WORD);
    text(step.text, dialogX + 30, dialogY + 70, dialogWidth - 60);
  }

  resize() {
    if (!this.active) return;
    
    // Calculate new positions for tutorial buttons
    const buttonWidth = min(width * 0.2, 150);
    const buttonHeight = min(height * 0.05, 40);
    const bottomMargin = height * 0.08;
    const totalWidth = buttonWidth * 3 + buttonWidth;
    const startX = (width - totalWidth) / 2;
    
    if (this.skipButton) {
      this.skipButton.position(startX + buttonWidth * 3, height - bottomMargin);
      this.skipButton.size(buttonWidth, buttonHeight);
    }
    
    if (this.nextButton) {
      this.nextButton.position(startX + buttonWidth * 1.5, height - bottomMargin);
      this.nextButton.size(buttonWidth, buttonHeight);
    }
    
    if (this.prevButton) {
      this.prevButton.position(startX, height - bottomMargin);
      this.prevButton.size(buttonWidth, buttonHeight);
    }
  }
  
  // Getter for seen flag
  get hasSeenTutorial() {
    return this.seenFlag;
  }
  
  // Setter for seen flag
  set hasSeenTutorial(value) {
    this.seenFlag = value;
  }
}