let realWidth;

let menuState = 0;

let startButton;

let tutorialButton;

let instructionButton;

let baseFont;

​

function preload() {

  bgMainMenu = loadImage("bgCastle.jpg");

  baseFont = loadFont("font/Abaddon.ttf");

  titleFont = loadFont("font/arcade.ttf");

  menuTheme = loadSound("music/menutheme.mp3");

​

  //BUTTONS

  //START BUTTON

  startButton = new Sprite(

    windowWidth / 2,

    windowHeight / 2,

    windowWidth / 3,

    windowHeight / 8

  );

  startButton.opacity = 1;

  startButton.text = "Play";

  (startButton.textAlign = CENTER), CENTER;

  startButton.fill = "#cc912b";

  startButton.textFont = baseFont;

  startButton.textSize = (windowWidth / windowHeight) * 40;

​

  //TUTORIAL BUTTON

  tutorialButton = new Sprite(

    windowWidth / 2,

    windowHeight / 1.5,

    windowWidth / 3,

    windowHeight / 8

  );

  tutorialButton.opacity = 1;

  tutorialButton.text = "Tutorial";

  (tutorialButton.textAlign = CENTER), CENTER;

  tutorialButton.fill = "#f8cd74";

  tutorialButton.textSize = (windowWidth / windowHeight) * 40;

}

​

function placeholderText(dummyText) {

  //ANY TEXT DISPLAY - Function to draw the a placeholder text for testing

  push();

  textSize(windowWidth / 10);

  fill(255);

  stroke(0);

  text(dummyText, windowWidth / 2, windowHeight / 2 - 200);

  pop();

}

​

function gameTitle() {

  //TITLE TEXT DISPLAY - Function to draw the titlel text

  push();

  textFont(titleFont);

  textSize(windowWidth / 10);

  fill(255);

  stroke(0);

  text("PYRO DANCER", windowWidth / 2, windowHeight / 4);

  pop();

}

​

function setup() {

  new Canvas(windowWidth, windowHeight);

  imageRatio = bgMainMenu.height / bgMainMenu.width;

  print(imageRatio);

  realWidth = windowWidth;

  textAlign(CENTER, CENTER);

  //textFont(titleFont);

  //menuTheme.play();

  menuTheme.setVolume(0.2);

}

​

function draw() {

  var fontSize = (windowWidth / windowHeight) * 42;

  clear();

  background(255);

  textFont(baseFont);

​

  //BACKGROUND CASTLE

  image(bgMainMenu, 0, 0);

  var bgWidth;

  var bgHeight;

  bgWidth = bgMainMenu.width;

  bgHeight = bgMainMenu.height;

​

  if (windowWidth < realWidth) {

    bgWidth = windowWidth;

    bgHeight = bgWidth * imageRatio;

    print("w: " + bgWidth + ", h: " + bgHeight);

  }

​

  //BUTTON PROPERTIES

​

  //BUTTON UPDATE

  startButton.update();

  tutorialButton.update();

​

  //MOUSE INTERACTION

  if (tutorialButton.mouse.hovering()) mouse.cursor = "grab";

  else mouse.cursor = "default";

​

  if (menuState == 0) {

    image(bgMainMenu, 0, 0, bgWidth, bgHeight);

    gameTitle();

    if (startButton.mouse.pressed()) {

      menuState = 1;

      startButton.remove();

      tutorialButton.remove();

      clear();

    }

    else if (tutorialButton.mouse.pressed()) {

      menuState = 2;

      startButton.remove();

      tutorialButton.remove();

    }

  } else if (menuState == 1) {

    background(0);

    placeholderText("GAME SCREEN");

  } else if (menuState == 2) {

    background(30);

    placeholderText("TUTORIAL SCREEN");

  }

  if (startButton.mouse.hovering() || tutorialButton.mouse.hovering()) {

    mouse.cursor = "grab";

  } else mouse.cursor = "default";

}

​

function windowResized() {

  resizeCanvas(windowWidth, windowHeight);

}

​

function keyTyped() {

  //FULLSCREEN FUNCTION - PRESS F

  if (key === "f") {

    toggleFullscreen();

  }

}

​

//FUNCTION FOR FULLSCREEN

function toggleFullscreen() {

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

  fullscreen(!fs); // Flip it!

}

​