bethubMerge.js

let screen = 0
let img;
let sizeVar = 50
let sizeChange = 1
let myFont;
let votes1 = 0
let votes2 = 0

let betbutton;
let missionbutton;
let button1;
let button2;
let backbutton;


let screen0btns = []
let screen1btns = []

//mission section, Daniel's merge
let buttons = [];
let createMissionButton;
let resetTasksButton;
let baseYOffset = 100;
let buttonSpacing = 60;
let columns = 2;
let hubCoins = 0;

let missions = [
  "Finish Homework",
  "Study for Test",
  "Get an A on Test",
  "Sign up for a Job",
  "Daily Shower",
  "Wash Dishes",
  "Meet with Teacher",
  "Bethub is the Best"
];

let missionButtonsCreated = false;


//FONT
function preload(){
    myFont = loadFont("Casino3DLinesMarquee-Italic.ttf")
    img = loadImage('coins.jpg');
  }

function setup() {
    createCanvas(windowWidth, windowHeight);
    frameRate(30);
    textFont(myFont);
    fill(255)
    strokeWeight(5);
    textAlign(CENTER);
    imageMode(CENTER);
    console.log("screen = " + screen)
    //HOMESCREEN BUTTONS
        backbutton = createButton('Back')
        backbutton.style('width', '60px');
        backbutton.style('height', '20px')
        backbutton.position(30, 30)
        backbutton.mousePressed(screen0);

        betbutton = createButton('Place bets');
        betbutton.style('width', '300px');
        betbutton.style('height', '40px');
        betbutton.position(windowWidth*2/3, windowHeight*3/7);
        betbutton.mousePressed(screen1)
        screen0btns.push(betbutton)

        missionbutton = createButton('Missions');
        missionbutton.style('width', '300px');
        missionbutton.style('height', '40px');
        missionbutton.position(windowWidth*2/3, windowHeight*2/7)
        screen0btns.push(missionbutton)
        missionbutton.mousePressed(screen2)
   // }
    //QUESTION ONE BUTTONS
        button1 = createButton('Over');
        button1.position(100, 400);
        button1.mousePressed(VoteCount1);
        button2 = createButton('Under');
        button2.position(300, 400);
        button2.mousePressed(VoteCount2);

        screen1btns.push(button1)
        screen1btns.push(button2)

        // showOnly(screen0btns)

  //mission Buttons, Daniel's merge
        textSize(24);

  // "Create Mission" button
  createMissionButton = createButton("Create Your Own Mission");
  createMissionButton.style('font-size', '22px');
  createMissionButton.style('padding', '15px 30px');
  createMissionButton.style('margin', '10px');
  createMissionButton.style('background-color', '#3498db');
  createMissionButton.style('color', 'white');
  createMissionButton.style('border', 'none');
  createMissionButton.style('border-radius', '8px');
  createMissionButton.hide(); 

  createMissionButton.mousePressed(() => {
    let newMission = prompt("Enter your new mission:");
    if (newMission) {
      missions.push(newMission);
      updateMissionButtons();
    }
  });

  // "Reset All Tasks" button
  resetTasksButton = createButton("Reset All Tasks");
  resetTasksButton.style('font-size', '22px');
  resetTasksButton.style('padding', '15px 30px');
  resetTasksButton.style('margin', '10px');
  resetTasksButton.style('background-color', '#e74c3c');
  resetTasksButton.style('color', 'white');
  resetTasksButton.style('border', 'none');
  resetTasksButton.style('border-radius', '8px');
  resetTasksButton.hide()

  resetTasksButton.mousePressed(() => {
    resetAllTasks();
  });

  updateMissionButtons(); // Initial render
    
  }

function draw() {

  console.log("screen = "+screen)

  if(screen==0){

    createMissionButton.hide();
resetTasksButton.hide();
for (let btn of buttons) {
  btn.hide();
}
    backbutton.hide()
    screen1btns[0].hide()
    screen1btns[1].hide()
    screen0btns[0].show()
    screen0btns[1].show()
    textSize(80)
    background(100, 68, 227);
    image(img, windowWidth/4, windowHeight/2);
    text("BetHub", 140, 430, 400);

  }

  if(screen==1){

    createMissionButton.hide();
resetTasksButton.hide();
for (let btn of buttons) {
  btn.hide();
}
    backbutton.show()
    screen0btns[0].hide()
    screen0btns[1].hide()
    screen1btns[0].show()
    screen1btns[1].show()
    background(100, 68, 227);
    fill(255)
    strokeWeight(5);
    textAlign(CENTER)
    //BETS! SIGN
    textSize(sizeVar)
    sizeVar = sizeVar + sizeChange
    if(sizeVar == 70){
        sizeChange = -1
    }

    if(sizeVar == 50){
        sizeChange = 1
    }
  
    text("Bets!", windowWidth/2, 100);

    //QUESTION ONE TEXT
    textSize(30);
    textAlign(CENTER)
    text('Over/Under 35.5 sandwiches on Friday?', windowWidth/13, 250, 250)

    text(votes1, 160, 450);
    text(votes2, 360, 450);
    }

    //missions screen
  if(screen==2){
    backbutton.show()
    screen0btns[0].hide()
    screen0btns[1].hide()
    screen1btns[0].hide()
    screen1btns[1].hide()

    createMissionButton.show(); 
    resetTasksButton.show()

if (!missionButtonsCreated) {
  updateMissionButtons();
  missionButtonsCreated = true;
}
    background(100, 68, 227);
// Display HubCoins
  fill(255, 223, 0); // gold color
  textSize(28);
  textAlign(CENTER);
text(`💰 HubCoins: ${hubCoins}`, windowWidth / 2, 50);


    }
}
  
function VoteCount1() {
    votes1 = votes1 + 1
    console.log(votes1);
    fill(255)
   
  }
function VoteCount2() {
    votes2 = votes2 + 1
    console.log(votes2)
}

function hideGroup(group) {
  for (n = 0; n < length.group; n += 1){
    console.log(group)
    group[n].hide()

  }
    
}

function showGroup(group) {
  for (n = 0; n < length.group; n += 1){
group[n].show()
}

}

function screen0() {
  screen = 0
}

function screen1() {
  screen = 1
}

function screen2() {
  screen = 2
}

function updateMissionButtons() {
  // Clear old buttons
  for (let btn of buttons) {
    btn.remove();
  }
  buttons = [];

  let perColumn = Math.ceil(missions.length / columns);

  for (let i = 0; i < missions.length; i++) {
    let col = i < perColumn ? 0 : 1;
    let row = i % perColumn;

    let x = col === 0 ? windowWidth / 10 : windowWidth / 2;
    let y = baseYOffset + row * buttonSpacing;

    let btn = createButton(missions[i]);
    btn.style('font-size', '18px');
    btn.style('padding', '10px 20px');
    btn.style('margin', '5px');
    btn.style('background-color', '#444');
    btn.style('color', 'white');
    btn.style('border', 'none');
    btn.style('border-radius', '5px');
    btn.position(x, y);

    btn.completed = false;

    btn.mousePressed(() => {
      if (!btn.completed) {
        btn.completed = true;
        hubCoins += 1;
        btn.style('background-color', '#2ecc71');
        btn.style('opacity', '0.6');
      } else {
        if (hubCoins > 0) hubCoins -= 1;
        btn.completed = false;
        btn.style('background-color', '#444');
        btn.style('opacity', '1');
      }
    });

    buttons.push(btn);
  }

  // Move buttons below the last row
  let totalRows = Math.ceil(missions.length / columns);
  let controlBtnY = baseYOffset + totalRows * buttonSpacing + 20;
  createMissionButton.position(windowWidth / 2 - 320, controlBtnY);
  resetTasksButton.position(windowWidth / 2 + 50, controlBtnY);
}

function resetAllTasks() {
  for (let btn of buttons) {
    if (btn.completed) {
      btn.completed = false;
      btn.style('background-color', '#444');
      btn.style('opacity', '1');
    }
  }
}