Merge pull request #13 from Catz1301/with-ui

Completed UI milestone.

UI/Modal.js

@@ -0,0 +1,131 @@
+// The legendary modal component. Here we go.
+//make a modal class
+class Modal {
+  static ModalResult = {
+    POSITIVE: 0,
+    NEGATIVE: 1
+  };
+  constructor(modalTitle, modalText, showNegative = true) {
+    this.modalText = modalText;
+    // should be centered, and in the middle of the screen.
+    this.modalTitle = modalTitle;
+    this.x = width / 2;
+    this.y = height / 2;
+    this.showNegative = showNegative;
+    this.positiveButtonHover = false;
+    this.negativeButtonHover = false;
+
+  }
+
+  show() {
+    activeModal = this;
+    return new Promise((resolve, reject) => {
+      this.positiveButtonPressed = () => {
+        resolve(Modal.ModalResult.POSITIVE);
+        activeModal = undefined;
+      };
+      this.negativeButtonPressed = () => {
+        resolve(Modal.ModalResult.NEGATIVE);
+        activeModal = undefined;
+      };
+    });
+  }
+
+  draw() {
+    dim();
+    fill(250);
+    noStroke();
+    rect(this.x - 200, this.y - 100, 400, 200); // The modal box
+    fill(220)
+    rect(this.x - 200, this.y - 100, 400, 40); // The modal title bar
+    textSize(20);
+    textAlign(CENTER, CENTER);
+    //make the title bold.
+    textStyle(BOLD);
+    fill(0);
+    text(this.modalTitle, this.x, this.y - 100 + 20);
+    //make the text normal.
+    textStyle(NORMAL);
+    textAlign(LEFT, TOP);
+    textWrap(CHAR);
+    // split the text into lines if the text width is greater than 360.
+    if (textWidth(this.modalText) > 360) {
+      let lines = [];
+      let words = this.modalText.split(" ");
+      let currentLine = "";
+      for (let i = 0; i < words.length; i++) {
+        let word = words[i];
+        if (textWidth(currentLine + word) > 360) {
+          lines.push(currentLine);
+          currentLine = "";
+        }
+        currentLine += word + " ";
+      }
+      lines.push(currentLine);
+      for (let i = 0; i < lines.length; i++) {
+        let line = lines[i];
+        text(line, this.x - 180, this.y - 45 + (i * 20), this.x);
+      }
+    } else {
+      text(this.modalText, this.x - 180, this.y - 45, this.x);
+    }
+    // activeModal = this;
+    // draw the positive and negative buttons, with 10 pixels of margin, and 5 px of padding.
+    // negative button
+    if (this.showNegative) {
+      if (this.negativeButtonHover) {
+        fill(35, 154, 101);
+      } else {
+        fill(65, 184, 131);
+      }
+      rect(this.x - 25, this.y + 100 - 50 - 10, 100, 50);
+      fill(0);
+      textSize(20);
+      textAlign(CENTER, CENTER);
+      text("NO", this.x - 25 + 50, this.y + 100 - 50 - 9 + 25);
+    }
+    // positive button
+    if (this.positiveButtonHover) {
+      fill(35, 154, 101);
+    } else {
+      fill(65, 184, 131);
+    }
+    rect(this.x + 200 - 10 - 100, this.y + 100 - 50 - 10, 100, 50);
+    fill(0);
+    textSize(20);
+    textAlign(CENTER, CENTER);
+    text("YES", this.x + 200 - 10 - 100 + 50, this.y + 100 - 50 - 9 + 25);
+    this.handleEvents();
+  }
+
+
+  handleEvents() {
+    if (mouseX > this.x - 25 && mouseX < this.x + 75 && mouseY > this.y + 100 - 50 - 5 && mouseY < this.y + 100 - 5) {
+      // negative button was pressed.
+      this.negativeButtonHover = true;
+      if (mouseIsPressed) {
+        this.negativeButtonPressed();
+      }
+
+    } else {
+      this.negativeButtonHover = false;
+    }
+    if (mouseX > this.x + 200 - 10 - 100 && mouseX < this.x + 200 - 10 && mouseY > this.y + 100 - 50 - 5 && mouseY < this.y + 100 - 5) {
+      // positive button was pressed.
+      this.positiveButtonHover = true;
+      if (mouseIsPressed) {
+        this.positiveButtonPressed();
+      }
+    } else {
+      this.positiveButtonHover = false;
+    }
+  }
+
+  negativeButtonPressed() {
+    alert("negative button pressed");
+  }
+
+  positiveButtonPressed() {
+    alert("positive button pressed");
+  }
+}

board.js

@@ -69,12 +69,14 @@ function drawBoard(board) {
         // }
         board[x][y].drawSquare(); // eventually only draw squares that are not being held, then draw the held square on top of the others.
         if (doDebug) {
+          push();
           stroke(0);
           // strokeWeight(3);
           fill(255);
           textAlign(CENTER);
           textSize(16);
           text(board[x][y].id, board[x][y].x + gridCellSize / 2, board[x][y].y + 8 + gridCellSize / 2);
+          pop();
         }
       }
     }
@@ -358,13 +360,18 @@ function attemptSolve() {
     solved = true;
     const puzzleSolved = async () => {
       setTimeout(() => {
-        let advanceLevel = confirm("You solved the puzzle! Move on to level " + (level + 1) + "?");
-        if (advanceLevel) {
-          level++;
-          boardSet = false;
-          isFullScreen = false; 
-          storeItem("level", level);
-        }
+        let advanceLevelModal = new Modal("Puzzle Solved!", "You solved the puzzle! Move on to level " + (level + 1) + "?");
+        let advanceLevel = false;
+        advanceLevelModal.show().then((result) => {
+          if (result == Modal.ModalResult.POSITIVE) {
+            advanceLevel = true;
+            level++;
+            boardSet = false;
+            isFullScreen = false; 
+            storeItem("level", level);
+            solved = false;
+          }
+        });
       }, 1000);
     };
     puzzleSolved();

editor.js

@@ -1,4 +1,10 @@
 var addingSquares = false;
+var saveBoardBtnHover = false;
+var shareBoardBtnHover = false;
+var clearBoardBtnHover = false;
+var rotationLockBtnHover = false;
+var toggleSquareBtnHover = false;
+var holdSquareForButton = undefined;
 /**
  * @var
  * @name selectedSquare
@@ -7,6 +13,144 @@ var addingSquares = false;
 var selectedSquare = undefined;
 var fileInput = undefined;
 
+function setupEditor() {
+  // set up buttons and flags.
+
+  // That button column on the right side of the screen.
+  saveBoardButton = new Clickable(width - 155, 5);
+  saveBoardButton.resize(150, 50);
+  // (width - 155, 5, width - 5, 55)
+  saveBoardButton.text = "Save Board";
+  saveBoardButton.cornerRadius = 0;
+  saveBoardButton.textSize = 24;
+  saveBoardButton.textScaled = false;
+  saveBoardButton.textColor = color(250);
+  // saveBoardButton.color = color(65, 184, 131);
+  saveBoardButton.onPress = function() {
+    saveBoard();
+    holdSquareForButton = selectedSquare;
+  }
+  saveBoardButton.onOutside = function() {
+    this.color = color(65, 184, 131);
+    saveBoardBtnHover = false;
+  }
+  saveBoardButton.onHover = function() {
+    this.color = color(35, 154, 101);
+    saveBoardBtnHover = true;
+  }
+  shareBoardButton = new Clickable(width - 155, 60);
+  shareBoardButton.resize(150, 50);
+  // (width - 155, 60, width-5, 110)
+  shareBoardButton.text = "Share Board";
+  shareBoardButton.cornerRadius = 0;
+  shareBoardButton.textSize = 24;
+  shareBoardButton.textScaled = false;
+  shareBoardButton.textColor = color(250);
+  // shareBoardButton.color = color(65, 184, 131);
+  shareBoardButton.onPress = function() {
+    // shareBoard();
+    holdSquareForButton = selectedSquare;
+  }
+  shareBoardButton.onOutside = function() {
+    this.color = color(65, 184, 131);
+    shareBoardBtnHover = false;
+  }
+  shareBoardButton.onHover = function() {
+    this.color = color(35, 154, 101);
+    shareBoardBtnHover = true;
+  }
+  clearBoardButton = new Clickable(width - 155, 115);
+  clearBoardButton.resize(150, 50);
+  // (width - 155, 115, width-5, 165)
+  clearBoardButton.text = "Clear Board";
+  clearBoardButton.cornerRadius = 0;
+  clearBoardButton.textSize = 24;
+  clearBoardButton.textScaled = false;
+  clearBoardButton.textColor = color(250);
+  // clearBoardButton.color = color(65, 184, 131);
+  clearBoardButton.onPress = function() {
+
+    let clearBoardModal = new Modal("Clear Board", "Are you sure you want to clear the board?");
+    clearBoardModal.show().then(result => {
+      if (result == Modal.ModalResult.POSITIVE) {
+        clearBoard();
+      }
+    });
+    holdSquareForButton = selectedSquare;
+  }
+  clearBoardButton.onOutside = function() {
+    this.color = color(65, 184, 131);
+    clearBoardBtnHover = false;
+  }
+  clearBoardButton.onHover = function() {
+    this.color = color(35, 154, 101);
+    clearBoardBtnHover = true;
+  }
+  rotationLockButton = new Clickable(width - 155, 170);
+  rotationLockButton.resize(150, 50);
+  // (width - 155, 170, width-5, 220)
+  rotationLockButton.text = "Lock Rotation";
+  rotationLockButton.cornerRadius = 0;
+  rotationLockButton.textSize = 20;
+  rotationLockButton.textScaled = true;
+  rotationLockButton.textColor = color(250);
+  // rotationLockButton.color = color(65, 184, 131);
+  rotationLockButton.onPress = function() { // If this doesn't work, blame copilot. I didn't write a lick of this.
+    if (selectedSquare != undefined) {
+      selectedSquare.lockRotation = !selectedSquare.lockRotation;
+      if (selectedSquare.lockRotation) {
+        this.text = "Unlock Rotation";
+      } else {
+        this.text = "Lock Rotation";
+      }
+    }
+  }
+  rotationLockButton.onOutside = function() {
+    this.color = color(65, 184, 131);
+    rotationLockBtnHover = false;
+  }
+  rotationLockButton.onHover = function() {
+    this.color = color(35, 154, 101);
+    rotationLockBtnHover = true;
+    holdSquareForButton = selectedSquare;
+  }
+  toggleSquareButton = new Clickable(width - 155, 225);
+  toggleSquareButton.resize(150, 50);
+  // (width - 155, 225, width-5, 275)
+  toggleSquareButton.text = "Toggle Square";
+  toggleSquareButton.cornerRadius = 0;
+  toggleSquareButton.textSize = 20;
+  toggleSquareButton.textScaled = true;
+  toggleSquareButton.textColor = color(250);
+  // toggleSquareButton.color = color(65, 184, 131);
+  toggleSquareButton.onPress = function() {
+    if (selectedSquare != undefined) {
+      console.log(selectedSquare)
+      holdSquareForButton = selectedSquare;
+      //selectedSquare.toggleSquare();
+    }
+  }
+  toggleSquareButton.onOutside = function() {
+    this.color = color(65, 184, 131);
+    toggleSquareBtnHover = false;
+  }
+  toggleSquareButton.onHover = function() {
+    this.color = color(35, 154, 101);
+    toggleSquareBtnHover = true;
+  }
+}
+
+function drawEditorUI() {
+  // draw the buttons and stuff.
+  saveBoardButton.draw();
+  shareBoardButton.draw();
+  clearBoardButton.draw();
+  if (selectedSquare != undefined) {
+    rotationLockButton.draw();
+    toggleSquareButton.draw();
+  }
+}
+
 function saveBoard() {
   // get the board as json, then turn it into a blob.
   let fileHeaderData = '420690';