Complete rough refactor into modules

the-new-developers · Aug 6, 2021 · 76fb611 · 76fb611
2 parents a8fcbad + 1b68994
commit 76fb611
Show file tree

Hide file tree

Showing 19 changed files with 359 additions and 49 deletions.
diff --git a/assets/textures/CheatSheet.png b/assets/textures/CheatSheet.png
diff --git a/assets/textures/CheatSheet70.png b/assets/textures/CheatSheet70.png
diff --git a/assets/textures/CheatSheetBackButton.png b/assets/textures/CheatSheetBackButton.png
diff --git a/assets/textures/mainMenu/buttons.png b/assets/textures/mainMenu/buttons.png
diff --git a/index.html b/index.html
@@ -2,17 +2,13 @@
 <html lang="en">
     <head>
         <meta charset="UTF-8">
-        <link rel="stylesheet.css"/>
-        <title>gatehopper</title>
+        <link rel="stylesheet" type="text/css" href="stylesheet.css"/>
+        <title>Gatehopper</title>
         <script src="src/dependencies/p5.min.js" defer></script>
         <script type="module" src="src/index.js" defer></script>
     </head>
     <body>
-        <h1>
-            Hello World!
-        </h1>
         <main>
-
         </main>
     </body>
-</html>
+</html>
diff --git a/src/helperFunctions/imageFunctions.js b/src/helperFunctions/imageFunctions.js
@@ -0,0 +1,22 @@
+// The nearest neighbor algorithm as described by:
+// https://tech-algorithm.com/articles/nearest-neighbor-image-scaling/
+const scaleNearestNeighbor = function(image, targetWidth, targetHeight)
+{
+	image.loadPixels();
+	let tmp = createImage(targetWidth, targetHeight);
+	let wRatio = image.width/targetWidth;
+	let hRatio = image.height/targetHeight;
+	for (let i = 0; i < targetWidth; i++)
+	{
+		for (let j = 0; j < targetHeight; j++)
+		{
+			const x = Math.floor(i*wRatio);
+			const y = Math.floor(j*hRatio);
+			tmp.set(i, j, image.get(x, y));
+		}
+	}
+	tmp.updatePixels();
+	return tmp;
+}
+
+export { scaleNearestNeighbor }
diff --git a/src/index.js b/src/index.js
@@ -3,30 +3,20 @@
 //And if you haven't heard of Daniel Shiffman, watch his stuff. It is either
 //done in processing or p5.js of which one is a port of the other
 
-import mainMenu from './scenes/mainMenu.js';
+import { scenes, currentScene } from './scenes/scenes.js';
 
-//Add scenes from scene files here
-// const scenes = {
-//     "Challenge Mode": challengeMode, ///src/scenes/challengeMode.js
-//     "Cheat Sheet": cheatSheet, ///src/scenes/cheatSheet.js
-//     "Game Over": gameOver, ///src/scenes/gameOver.js
-//     "Instructions": instructions, ///src/scenes/instructions.js
-//     "Main Menu": mainMenu, ///src/scenes/mainMenu.js
-//     "Practice Mode": practiceMode, ///src/scenes/practiceMode.js
-//     "Settings": settings ///src/scenes/settings.js
-// };
+//dimensions of the canvas in pixels
+// TODO: Set these as the height and width of the window on load, and change them whenever the window is resized.
+const height = 480;
+const width = 640;
 
-const scenes = {
-    "Main Menu": mainMenu
-};
-
-//Change this to change the scene between the options above
-let currentScene = "Main Menu";
+let canvas = {};
 
 //P5.JS setup function
 window.setup = function()
 {
-    createCanvas(640,480);
+    canvas = createCanvas(width,height);
+    scenes[currentScene.value].setup();
 }
 
 //P5.JS draw function
@@ -35,5 +25,16 @@ window.setup = function()
 //their respective files (as referenced above).
 window.draw = function()
 {
-    scenes[currentScene]();
-}
+    scenes[currentScene.value].draw();
+}
+
+//P5.JS mouseClicked function
+//This gets called on mouse click
+// window.mouseClicked(event)
+// {
+//     console.log("mouse clicked!")
+//     console.log({ event })
+// 	//imageButtons.forEach((e, i, a) => e.callback(event));
+// }
+
+export { canvas };
diff --git a/src/objects/imageButton.js b/src/objects/imageButton.js
@@ -0,0 +1,70 @@
+// let imageButtons = [];
+
+// const ImageButton = class
+// {
+// 	img;
+// 	x;
+// 	y;
+// 	callback;
+
+// 	constructor(img, x, y, callback)
+// 	{
+// 		this.img = img;
+// 		this.x = x;
+// 		this.y = y;
+// 		this.callback = function (event) {
+// 			if (mouseX > x && mouseX < x + img.width && mouseY > y && mouseY < y + img.height)
+// 			{
+// 				callback(event);
+// 			}
+// 		};
+// 	}
+
+// 	show()
+// 	{
+// 		image(this.img, this.x, this.y);
+// 	}
+
+// 	init()
+// 	{
+// 		if (imageButtons.indexOf(this) == -1)
+// 			imageButtons.push(this);
+// 	}
+
+// 	destroy()
+// 	{
+// 		imageButtons.splice(imageButtons.indexOf(this), 1);
+// 	}
+// }
+
+export default class ImageButton {
+
+	constructor(img, x, y, callback)
+	{
+		this.img = img;
+		this.x = x;
+		this.y = y;
+		this.callback = function (event) {
+			if (mouseX > x && mouseX < x + img.width && mouseY > y && mouseY < y + img.height)
+			{
+				callback(event);
+			}
+		};
+	}
+
+	show()
+	{
+		image(this.img, this.x, this.y);
+	}
+
+	init()
+	{
+		// if (imageButtons.indexOf(this) == -1)
+		// 	imageButtons.push(this);
+	}
+
+	destroy()
+	{
+		// imageButtons.splice(imageButtons.indexOf(this), 1);
+	}
+}
diff --git a/src/objects/scene.js b/src/objects/scene.js
@@ -0,0 +1,6 @@
+export default class Scene {
+    setup() {}
+    draw() {
+        background(0, 0, 0);
+    }
+}
diff --git a/src/scenes/challengeMode.js b/src/scenes/challengeMode.js
@@ -1,4 +1,10 @@
-const challengeMode = function()
-{
-    background(0, 0, 255);
+const challengeMode = {
+    "setup": function()
+    {
+
+    },
+    "draw": function()
+    {
+        background(0, 0, 255);
+    }
 }
diff --git a/src/scenes/cheatSheet.js b/src/scenes/cheatSheet.js
@@ -1,4 +1,34 @@
-const cheatSheet = function()
-{
-    background(0, 255, 0);
+import Scene from "../objects/scene.js";
+import { scaleNearestNeighbor } from "../helperFunctions/imageFunctions.js";
+import ImageButton from "../objects/imageButton.js";
+import { currentScene, scenes, MAIN_MENU } from "../scenes/scenes.js";
+
+export default class CheatSheet extends Scene {
+	constructor() {
+		super();
+		this.cheatSheetImg = {};
+		this.cheatSheetBtnImg = {};
+		this.cheatSheetBtn = {};
+	}
+
+	setup() {
+		this.cheatSheetImg = loadImage("assets/textures/CheatSheet.png",
+			() => this.cheatSheetImg = scaleNearestNeighbor(this.cheatSheetImg, 640, 480));
+		this.cheatSheetBtnImg = loadImage("assets/textures/CheatSheetBackButton.png",
+			() => {
+				this.cheatSheetBtnImg = scaleNearestNeighbor(this.cheatSheetBtnImg, 301, 103);
+				this.cheatSheetBtn = new ImageButton(this.cheatSheetBtnImg, 13, 359,
+					() => {
+						currentScene = MAIN_MENU;
+						this.cheatSheetBtn.destroy();
+						scenes[currentScene]["setup"]();
+					});
+				this.cheatSheetBtn.init();
+			});
+	}
+
+	draw() {
+		image(this.cheatSheetImg, 0, 0);
+		image(this.cheatSheetBtnImg, 13, 359);
+	}
 }
diff --git a/src/scenes/gameOver.js b/src/scenes/gameOver.js
@@ -1,4 +1,10 @@
-const gameOver = function()
-{
-    background(0, 255, 255);
+const gameOver = {
+    "setup": function()
+    {
+
+    },
+    "draw": function()
+    {
+        background(0, 255, 255);
+    }
 }
diff --git a/src/scenes/instructions.js b/src/scenes/instructions.js
@@ -1,4 +1,10 @@
-const instructions = function()
-{
-    background(255, 0, 0);
+const instructions = {
+    "setup": function()
+    {
+
+    },
+    "draw": function()
+    {
+        background(255, 0, 0);
+    }
 }
diff --git a/src/scenes/levelCountdown.js b/src/scenes/levelCountdown.js
@@ -0,0 +1,60 @@
+let timer = 3; //Countdown timer
+let midLine; //Horizontal line in the scene
+let midLine2; //Vertical line in the scene
+let animatedLine; //Line that will circle around during the countdown
+let angle=0; //Angle the animatedLine will use to circle around
+let finishedCountdown = false; //Boolean to stop the line from circling around when countdown stops
+
+const levelCountdown = function()
+{
+    background(130); //Setting up background color
+    textAlign(CENTER); //Aligning timer text to be in center  
+    textSize(100); //Changing size of text
+    text(timer, width/2, height/2); //Adding text to the scene
+
+    stroke('black'); //Setting up the color of the brush
+    fill('black'); //Setting the fill color of the shapes
+    strokeWeight(3); //Setting up the size of the brush
+
+    midLine = line(0,240,640,240); //Drawing the first middle line
+    midLine2 = line(320,0,320,480); //Drawing the second middle line
+
+    stroke('white');
+    noFill(); //Disabling filling
+    strokeWeight(4);
+
+    //Creating two circles
+    circle1 = circle(320,240, 300);
+    circle2 = circle(320,240, 350);
+
+    stroke('black');
+    fill('black');
+    strokeWeight(3);
+
+    //Condition to check if countdown is finished
+    if(!finishedCountdown){
+
+        //The next 4 lines add the animation to the line that should circle around
+        translate(width/2, height/2);
+        rotate(angle);
+        animatedLine = line(0, 0, 480, 0);
+        angle += 0.1;
+    }
+
+    /**
+     * (frameCount is a variable that keeps track of the number of frames that have been displayed since program started)
+     * The following condition checks if it's been 1 second and the timer bigger than 0:
+     * 1- It decreases the  timer if condition is satisfied.
+     * 2- If condition is satisfied and timer equals 0 after decreasing it, the word "Start" will be displayed and line that circles around will stop.
+     */
+    if(frameCount % 60 == 0 && timer > 0) {
+        timer --;
+
+        if (timer == 0){
+            timer = "Start";
+            animatedLine = line(0, 0, 0, 0);
+            finishedCountdown = true;
+        }
+    }
+
+}
diff --git a/src/scenes/mainMenu.js b/src/scenes/mainMenu.js
@@ -1,4 +1,51 @@
-export default function mainMenu()
-{
-    background(255, 0, 255);
-}
+import Scene from "../objects/scene.js";
+import { scaleNearestNeighbor } from "../helperFunctions/imageFunctions.js";
+import ImageButton from "../objects/imageButton.js";
+import { scenes, currentScene, CHALLENGE_MODE, PRACTICE_MODE, INSTRUCTIONS, CHEAT_SHEET, SETTINGS } from "./scenes.js";
+import { canvas } from "../index.js";
+
+export default class MainMenu extends Scene {
+    constructor() { 
+        super(); 
+        this.imageButtons = [];
+    }
+
+    setup() {
+        const btnImageSpritesheet = "assets/textures/mainMenu/buttons.png";
+        const btnScenes = [
+            CHALLENGE_MODE,
+            PRACTICE_MODE,
+            INSTRUCTIONS,
+            CHEAT_SHEET,
+            SETTINGS
+        ];
+        let btnImgs = [];
+        let img = loadImage(btnImageSpritesheet, () => {
+            img.loadPixels();
+            btnScenes.forEach((e, i, a) => {
+                let subImg = img.get(0, i*11, 75, 11);
+                btnImgs.push(scaleNearestNeighbor(subImg, 480, 70));
+            });
+            btnImgs.forEach((image, index) => {
+                let btn = new ImageButton(image, 0, index * 70, () => {
+                    currentScene.value = btnScenes[index];
+                    btns.forEach(button => {
+                        button.destroy();
+                    });
+                    scenes[currentScene.value].setup();
+                });
+                this.imageButtons.push(btn);
+            });
+        });
+        //canvas.mouseClicked(event => this.imageButtons.forEach(button => button.callback(event)));
+        canvas.mousePressed(() => { 
+            console.log({ currentScene })
+            currentScene.value = CHEAT_SHEET
+            scenes[currentScene.value].setup();
+        });
+    }
+
+    draw() {
+        this.imageButtons.forEach(button => button.show());
+    }
+ }