From c8918c940864caefda9d0f0c0f221ec07dea9a00 Mon Sep 17 00:00:00 2001 From: Victor Sohier <1sohiervic@gmail.com> Date: Fri, 20 Aug 2021 14:24:11 -0400 Subject: [PATCH 1/3] Added preloading --- src/index.js | 17 ++++++++-- src/objects/scene.js | 5 ++- src/objects/sceneManager.js | 21 +++++++++++-- src/scenes/cheatSheet.js | 46 ++++++++++++++++----------- src/scenes/mainMenu.js | 62 ++++++++++++++++++++++--------------- 5 files changed, 102 insertions(+), 49 deletions(-) diff --git a/src/index.js b/src/index.js index dd18d92..29533bf 100644 --- a/src/index.js +++ b/src/index.js @@ -14,8 +14,19 @@ import canvasManager from './objects/canvasManager.js'; */ window.setup = function() { - canvasManager.createCanvas(); - sceneManager.setCurrentScene(MAIN_MENU); + let promises = []; + for (let i of sceneManager + .getScenes() + .sceneIter()) + { + promises = [...promises, ...i.preload()]; + } + Promise + .all(promises) + .then(() => { + canvasManager.createCanvas(); + sceneManager.setCurrentScene(MAIN_MENU); + }); } /** @@ -25,4 +36,4 @@ window.setup = function() window.draw = function() { sceneManager.getCurrentScene().draw(); -} \ No newline at end of file +} diff --git a/src/objects/scene.js b/src/objects/scene.js index 6f975ae..bf9e0bc 100644 --- a/src/objects/scene.js +++ b/src/objects/scene.js @@ -4,8 +4,11 @@ * we never want to instantiate this class directly. */ export default class Scene { + preload() { + return []; + } setup() {} draw() { background(0, 0, 0); } -} \ No newline at end of file +} diff --git a/src/objects/sceneManager.js b/src/objects/sceneManager.js index 695aafa..b7864c2 100644 --- a/src/objects/sceneManager.js +++ b/src/objects/sceneManager.js @@ -27,7 +27,14 @@ class SceneManager { [GAME_OVER]: new GameOver(), [INSTRUCTIONS]: new Instructions(), [PRACTICE_MODE]: new PracticeMode(), - [SETTINGS]: new Settings() + [SETTINGS]: new Settings(), + sceneIter: function* () + { + for (let i of sceneManager.getValidScenes()) + { + yield this[i]; + } + } }; #valid_scenes = [ @@ -60,9 +67,19 @@ class SceneManager { this.#current_scene = sceneName; this.getCurrentScene().setup(); } + + getScenes() + { + return this.#scenes; + } + + getValidScenes() + { + return this.#valid_scenes; + } } // We only ever want one instance of this class (a singleton), so we will instantiate it here and then export that single instantiation. const sceneManager = new SceneManager(); -export default sceneManager; \ No newline at end of file +export default sceneManager; diff --git a/src/scenes/cheatSheet.js b/src/scenes/cheatSheet.js index 616eccc..cd287ba 100644 --- a/src/scenes/cheatSheet.js +++ b/src/scenes/cheatSheet.js @@ -13,24 +13,34 @@ export default class CheatSheet extends Scene { 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, - () => { - canvasManager.canvas.clear(); - sceneManager.setCurrentScene(MAIN_MENU); - } - ); - }); + preload() + { + let promiseA = new Promise((resolve, reject) => + { + this.cheatSheetImg = loadImage("assets/textures/CheatSheet.png", + () => this.cheatSheetImg = scaleNearestNeighbor(this.cheatSheetImg, 640, 480)); + resolve(true); + }); + let promiseB = new Promise((resolve, reject) => + { + this.cheatSheetBtnImg = loadImage("assets/textures/CheatSheetBackButton.png", + () => this.cheatSheetBtnImg = scaleNearestNeighbor(this.cheatSheetBtnImg, 301, 103)); + resolve(true); + }); + return [promiseA, promiseB]; + } - canvasManager.canvas.mouseClicked((event) => { + setup() { + this.cheatSheetBtn = new ImageButton( + this.cheatSheetBtnImg, + 13, + 359, + () => { + canvasManager.canvas.clear(); + sceneManager.setCurrentScene(MAIN_MENU); + } + ); + canvasManager.canvas.mouseClicked((event) => { this.cheatSheetBtn.callback(event); }); } @@ -39,4 +49,4 @@ export default class CheatSheet extends Scene { image(this.cheatSheetImg, 0, 0); image(this.cheatSheetBtnImg, 13, 359); } -} \ No newline at end of file +} diff --git a/src/scenes/mainMenu.js b/src/scenes/mainMenu.js index 83cfe51..3043fcd 100644 --- a/src/scenes/mainMenu.js +++ b/src/scenes/mainMenu.js @@ -9,6 +9,15 @@ export default class MainMenu extends Scene { constructor() { super(); this.imageButtons = []; + this.btnImgs = []; + this.img = null; + this.btnScenes = [ + CHALLENGE_MODE, + PRACTICE_MODE, + INSTRUCTIONS, + CHEAT_SHEET, + SETTINGS + ]; } /** @@ -20,35 +29,38 @@ export default class MainMenu extends Scene { sceneManager.setCurrentScene(sceneName); } + preload() + { + const btnImageSpriteSheet = "assets/textures/mainMenu/buttons.png"; + let promise = new Promise((resolve, reject) => { + this.img = loadImage(btnImageSpriteSheet, () => + { + this.img.loadPixels(); + this.btnScenes.forEach((e, i, a) => { + let subImg = this.img.get(0, i*11, 75, 11); + this.btnImgs.push(scaleNearestNeighbor(subImg, 480, 70)); + }); + resolve(true); + }) + }); + return [promise]; + } + 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, // The image to set - 0, // The x coordinate - index * 70, // The y coordinate - () => this.#changeScene(btnScenes[index]) // The function to call when this button is clicked on - ); - this.imageButtons.push(btn); - }); + + this.btnImgs.forEach((image, index) => { + let btn = new ImageButton( + image, // The image to set + 0, // The x coordinate + index * 70, // The y coordinate + () => this.#changeScene(this.btnScenes[index]) // The function to call when this button is clicked on + ); + this.imageButtons.push(btn); }); canvasManager.canvas.mouseClicked((event) => { - this.imageButtons.forEach(button => button.callback(event)); + for (let i of this.imageButtons) + i.callback(event); }); } From 8f03298bf88cec223461402051f3c1a12ff943fa Mon Sep 17 00:00:00 2001 From: Victor Sohier <1sohiervic@gmail.com> Date: Fri, 20 Aug 2021 14:29:18 -0400 Subject: [PATCH 2/3] Merged in gates --- assets/textures/gates/No Input Buffer.png | Bin 0 -> 5960 bytes src/index.js | 36 +++++++++++++--------- src/objects/andGate.js | 14 +++++++++ src/objects/constantGate.js | 15 +++++++++ src/objects/gate.js | 36 ++++++++++++++++++++++ src/objects/nandGate.js | 14 +++++++++ src/objects/norGate.js | 14 +++++++++ src/objects/notGate.js | 14 +++++++++ src/objects/oneInputGate.js | 14 +++++++++ src/objects/orGate.js | 14 +++++++++ src/objects/sceneManager.js | 8 ----- src/objects/twoInputGate.js | 16 ++++++++++ src/objects/xnorGate.js | 14 +++++++++ src/objects/xorGate.js | 14 +++++++++ src/scenes/challengeMode.js | 19 ++++++++++-- src/scenes/gameOver.js | 2 +- src/scenes/instructions.js | 2 +- src/scenes/practiceMode.js | 2 +- src/scenes/settings.js | 2 +- 19 files changed, 221 insertions(+), 29 deletions(-) create mode 100644 assets/textures/gates/No Input Buffer.png create mode 100644 src/objects/andGate.js create mode 100644 src/objects/constantGate.js create mode 100644 src/objects/gate.js create mode 100644 src/objects/nandGate.js create mode 100644 src/objects/norGate.js create mode 100644 src/objects/notGate.js create mode 100644 src/objects/oneInputGate.js create mode 100644 src/objects/orGate.js create mode 100644 src/objects/twoInputGate.js create mode 100644 src/objects/xnorGate.js create mode 100644 src/objects/xorGate.js diff --git a/assets/textures/gates/No Input Buffer.png b/assets/textures/gates/No Input Buffer.png new file mode 100644 index 0000000000000000000000000000000000000000..b525733c3b08a99bee9cb4a16d6b0b54242be128 GIT binary patch literal 5960 zcmeI0d0Z3M7RSS;JQM++R;4OK#0t_RGa&>LiC_als=MMMF$EN)c0h=iytYT>o;lqxN~6F{*W@;>c<1|~Ce?>XOl&hMUk znITgY8f;)l#Vc_gY9=1ckw@Z6BN}*U?UnGvyg`s*#tx?GcIS%QP)HsA2 z2pNT9__jPE>f^gphj%rN(ptL}W!#B|owTX?E&+TjuC1_jmEnz5L7R35ddxT;)&2Cl zDi^=mcUQO1<=d5-;xA3E*<4WfDc&KiYi>H%y5937=Y2SE#oS}K$z!4Gh1^E2aLUmK zZRsQCjPqJ{=3>&9IdMNR?GN8}-eQ}^zI?34VUKG==0(K=rqjy&A3liteD-DKs*WyB z=J@2i<}1^VA?ax+4<|VNa9~2LXKuP{iA{&&!w2teOv#LJEozRsl^*sa+YPHd=p#zI z7HR09zGI{nSX)EF>vN9>HhL<^^^6 zHO3!J+r$2DMeS!5uZe3{1W|`9Su=kAm$k7IupO2eSrJ)dKN%L;#EET{1a#=j~x#KYmkn&*bxcjVP{ImT_QWktMx#zU|m; zCvWqIrHQs8HoIhLo3jEIPTv-3k-9W3s;E?+Q(b0isiL*`J-+`qwnq7tuqf2Z)+u@M za#ss0_F99Tbdt6#)BS*PiWSFh?HK0Di;D{bE`_=+A1}5@zOyxipTkp0azBO6&01^w z!N=0I_i}@u1nwQe*-&g~Dt4H@=zo`*pdAsBwnzu&8=OghGFGzMd0y4j`?Yab3ib)K zCbuCMj?O8#kngcOw}EwDQ*m>gGl%iTMbm2~X_M)v@+XhUpA%o6Ba&SG`0c`X%f+KK z_TJ$KKWp3=o`3CrcuBf<;i)~|KKTpQH*QhwDBnZ-Jo!KDsAAdon@-+5a8K_ z@>K5(?3PgEADY}We09+zc;Ymxkl5DTsL4$yypHF6FuZkwcx6mp$F|(Jw;^zIxTL<> z*eY#xRaLZP8}7W*ID2pFzpFk8t+UrY{(={M@KI&n@QRtEw>XJC-TmDUY>CpA%&ebS zJ;y&;QNY=H;a2Oe4XSgjk`Iq0`J7j*Ij(%YB(u6}VFR=48w&ulHWx}0oXbLvQ< zgGpg%oTO$y*?vB0=%-23+9#H#IPCJbe`N314ktTA?|h_hK=)6iUg<6?JH3l?b%I^- zW5e;HS#Xl)x`nAHz1*Hm4b0wrEqj9efd_Irn7Di{a{JK6x1OFpP<-ogPSe$#l%yrK zg^!19Z+$wx`jDlzNY#FR)*U6Q-mdDGLci=2Kb76<9KG}SqqrYGY<<{W>G(@-Y4?dn zmqMGiTH~#j(-ewD8o}p_1blwq@&=1KcgZ?l$oYV=>GgZw{zyFS>ltOP{Di~MR8zrx z_qSGxJdfUw*0i{=5H}Bc){3~&((UE@Qa?IUIHGU`)M;gEY|L+_PF|WbYC)OdLcBxU zlD5h^{qidX%U-RA%oolq0@RXQ}D!DAncjlX$ zxREW<;cRb{z;t3?%Lc|>zi^H!{>DD<8>gl$L-X?(jQDLg9K#~dQr$8{BEHT1uS2dB zu9vv-n*=W1c@J_f?q0j!a%NVNJRtSqlhSUZUUkq^b|Pn#z_N~!)s75LOH7f~#h=NZ zus6xldV7jz@%QzylC1^zdU6MpN&V@T^qS7$oTW>Gae2d z^_IN-@7FJA@?AnXT)V%+UahuWy}^BPbyHnK&6%IyxqiRi!Nk@m_C~+{6WE5G39#Kp z3TJaMm4c2+RT7+TP^iInOriMs8`LNkhwC5-9z!U3)V9+lREUuBs1e>mSg7XXu|&us z4L)yCs2E!mhjFA-|LJyq1}*?7a2*O66mq4OYv57MTrRjKn;BHdY@&FhikW^!L!}f)W9wH=sZC(2BudEk+owRV8RJJSY)Y>L&F^NU>-B>I9A4oQ@P@ z;Bs66OtoNC*<((pe;~m98TSS2zTC~m zz)C3O2CA?GGCV;bk4lcum8vj8$~9jiY$hT>P=tn|Y?#L4z!Dk?b2v0_Cc=UxFzPKq zk$xzFQmaFi7*3)9oK66a3}fMJ3CD*ffiaxMLcF9j4vcxxFdrEc=12h-_3DS1qai?5 zqVoPxktiuZ;Rr{9;UF3oigRczOa`Dn90|=^B7vE{9HxxvgPT!Oj5|}MQJ`Qt2?ZL1 zGt|l$a|bCncZNv7qcZ96^A?dD)yaSZk2;%BCK#S~hzSKgPlu9f0x5i1UWhjfMp!-^ zg!SAg9M@<;C6Y`8rZanb$Z6q%WPq?JS*HMC_5itX`5GM6sWf7hO3tH_Awi_4xx692 zo=FKIw7?>XtoYuVpNGfy-1RI0IbrUCAamJrQLJYWEt-f+%>x0yo-QmFRmR|8efJhr zUpw&!lZAS7d|)OE1@k0j(O9?-ljbW!Fz|)RI2fCSW3c2!x>hCA=}`?nBL-v&vH=BT z&IWQfOX=~VwLTUnb%L1)4fX}UVg%;G-dq+;gIQb{rZRdHW{|78FJnK(?=$a!B=WqH11O#-G$6#^Rqyy==aN)u}Uo+(F*|QdX4S#hu14x6jXG3I{0RaO!{vp6>sdd08*jJn1E literal 0 HcmV?d00001 diff --git a/src/index.js b/src/index.js index 29533bf..f098e41 100644 --- a/src/index.js +++ b/src/index.js @@ -3,16 +3,22 @@ //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 sceneManager from './objects/sceneManager.js'; -import { MAIN_MENU } from './constants/sceneConstants.js'; -import canvasManager from './objects/canvasManager.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 +}; -/** - * Our index.js file serves as the gateway into the rest of our application, - * and this setup method hooks into the p5 setup function, which is the gateway to all - * things p5 in our application. - */ -window.setup = function() +//Change this to change the scene between the options above +let currentScene = "Main Menu"; + +//P5.JS setup function +function setup() { let promises = []; for (let i of sceneManager @@ -29,11 +35,11 @@ window.setup = function() }); } -/** - * This hooks into the p5 draw function, which gets called every frame. - * We are using this to pipe through the draw function of whichever scene is currently set. - */ -window.draw = function() +//P5.JS draw function +//This gets called every frame +//Unless there is something global, the draw functions should be changed in +//their respective files (as referenced above). +function draw() { - sceneManager.getCurrentScene().draw(); + scenes[currentScene](); } diff --git a/src/objects/andGate.js b/src/objects/andGate.js new file mode 100644 index 0000000..97653de --- /dev/null +++ b/src/objects/andGate.js @@ -0,0 +1,14 @@ +import TwoInputGate from "./twoInputGate.js"; + +export default class AndGate extends TwoInputGate +{ + constructor(input1, input2, img) + { + super(input1, input2, img); + } + + answer() + { + return this.input1.answer() & this.input2.answer(); + } +} diff --git a/src/objects/constantGate.js b/src/objects/constantGate.js new file mode 100644 index 0000000..a736e36 --- /dev/null +++ b/src/objects/constantGate.js @@ -0,0 +1,15 @@ +import Gate from "./gate.js"; + +export default class ConstantGate extends Gate +{ + constructor(value, img) + { + super(img); + this.value = value; + } + + answer() + { + return this.value; + } +} diff --git a/src/objects/gate.js b/src/objects/gate.js new file mode 100644 index 0000000..7c255d5 --- /dev/null +++ b/src/objects/gate.js @@ -0,0 +1,36 @@ +import { scaleNearestNeighbor } from "../helperFunctions/imageFunctions.js"; + +export default class Gate +{ + constructor(img) + { + if (this.constructor === Gate) + { + throw new TypeError("Abstract class \"Gate\" cannot be instantiated directly."); + } + this.img = img; + } + + answer() + { + if (this.schema === undefined) + { + throw new TypeError("Classes extending \"Gate\" must implement \"answer()\""); + } + } + + show(x, y) + { + if (this.answer()) + tint("#ffff00"); + image(this.img, x, y); + noTint(); + } + + // This function should be used only occasionally + // Scaling apparently is very intensive on + showScaled(x, y, width, height) + { + image(scaleNearestNeighbor(this.img, width, height), x, y); + } +} diff --git a/src/objects/nandGate.js b/src/objects/nandGate.js new file mode 100644 index 0000000..48f8146 --- /dev/null +++ b/src/objects/nandGate.js @@ -0,0 +1,14 @@ +import { AndGate } from "andGate.js"; + +export class NandGate extends AndGate +{ + constructor(input1, input2, img) + { + super(input1, input2, img); + } + + answer() + { + return !super.answer(); + } +} diff --git a/src/objects/norGate.js b/src/objects/norGate.js new file mode 100644 index 0000000..fa41a0b --- /dev/null +++ b/src/objects/norGate.js @@ -0,0 +1,14 @@ +import { OrGate } from "orGate.js"; + +export class NorGate extends OrGate +{ + constructor(input1, input2, img) + { + super(input1, input2, img); + } + + answer() + { + return !super.answer(); + } +} diff --git a/src/objects/notGate.js b/src/objects/notGate.js new file mode 100644 index 0000000..6fec01e --- /dev/null +++ b/src/objects/notGate.js @@ -0,0 +1,14 @@ +import { OneInputGate } from "OneInputGate.js"; + +export class NotGate extends OneInputGate +{ + constructor(input, img) + { + super(input, img); + } + + answer() + { + return !this.input1.answer(); + } +} diff --git a/src/objects/oneInputGate.js b/src/objects/oneInputGate.js new file mode 100644 index 0000000..c1353d8 --- /dev/null +++ b/src/objects/oneInputGate.js @@ -0,0 +1,14 @@ +import Gate from "./gate.js"; + +export default class OneInputGate extends Gate +{ + constructor(input, img) + { + super(img); + if (this.constructor === OneInputGate) + { + throw new TypeError("Abstract class \"OneInputGate\" cannot be instantiated directly."); + } + this.input1 = input; + } +} diff --git a/src/objects/orGate.js b/src/objects/orGate.js new file mode 100644 index 0000000..d8134f7 --- /dev/null +++ b/src/objects/orGate.js @@ -0,0 +1,14 @@ +import { TwoInputGate } from "twoInputGate.js"; + +export class OrGate extends TwoInputGate +{ + constructor(input1, input2, img) + { + super(input1, input2, img); + } + + answer() + { + return this.input1.answer() | this.input2.answer(); + } +} diff --git a/src/objects/sceneManager.js b/src/objects/sceneManager.js index b7864c2..d731321 100644 --- a/src/objects/sceneManager.js +++ b/src/objects/sceneManager.js @@ -1,11 +1,3 @@ -import { MAIN_MENU, CHEAT_SHEET, CHALLENGE_MODE, GAME_OVER, INSTRUCTIONS, PRACTICE_MODE, SETTINGS } from "../constants/sceneConstants.js"; -import MainMenu from "../scenes/mainMenu.js"; -import CheatSheet from "../scenes/cheatSheet.js"; -import GameOver from "../scenes/gameOver.js"; -import Instructions from "../scenes/instructions.js"; -import PracticeMode from "../scenes/practiceMode.js"; -import Settings from "../scenes/settings.js"; -import ChallengeMode from "../scenes/challengeMode.js"; /** * We'll use this class to help us manage our scenes; diff --git a/src/objects/twoInputGate.js b/src/objects/twoInputGate.js new file mode 100644 index 0000000..2740d81 --- /dev/null +++ b/src/objects/twoInputGate.js @@ -0,0 +1,16 @@ +import OneInputGate from "./oneInputGate.js"; + +export default class TwoInputGate extends OneInputGate +{ + input2; + + constructor(input1, input2, img) + { + super(input1, img); + if (this.constructor === TwoInputGate) + { + throw new TypeError("Abstract class \"TwoInputGate\" cannot be instantiated directly."); + } + this.input2 = input2; + } +} diff --git a/src/objects/xnorGate.js b/src/objects/xnorGate.js new file mode 100644 index 0000000..e83f166 --- /dev/null +++ b/src/objects/xnorGate.js @@ -0,0 +1,14 @@ +import { XorGate } from "xorGate.js"; + +export class XnorGate extends XorGate +{ + constructor(input1, input2, img) + { + super(input1, input2, img); + } + + answer() + { + return !super.answer(); + } +} diff --git a/src/objects/xorGate.js b/src/objects/xorGate.js new file mode 100644 index 0000000..753728d --- /dev/null +++ b/src/objects/xorGate.js @@ -0,0 +1,14 @@ +import { TwoInputGate } from "twoInputGate.js"; + +export class XorGate extends TwoInputGate +{ + constructor(input1, input2, img) + { + super(input1, input2, img); + } + + answer() + { + return this.input1.answer() ^ this.input2.answer(); + } +} diff --git a/src/scenes/challengeMode.js b/src/scenes/challengeMode.js index 1b03fe3..f6ce67f 100644 --- a/src/scenes/challengeMode.js +++ b/src/scenes/challengeMode.js @@ -1,4 +1,6 @@ import Scene from "../objects/scene.js"; +import ConstantGate from "../objects/constantGate.js"; +import AndGate from "../objects/andGate.js"; /** * This scene will manage the game's challenge mode. @@ -8,8 +10,21 @@ export default class ChallengeMode extends Scene { super(); } - setup() {} + setup() { + this.constant1; + this.constant2; + this.gate; + let img = loadImage("assets/textures/gates/No Input Buffer.png"); + this.constant1 = new ConstantGate(1, img); + this.constant2 = new ConstantGate(1, img); + img = loadImage("assets/textures/gates/AND Gate.png"); + this.gate = new AndGate(this.constant1, this.constant2, img); + } + draw() { background(0, 0, 255); + this.constant1.show(100, 100); + this.constant2.show(100, 200); + this.gate.show(150, 150); } -} \ No newline at end of file +} diff --git a/src/scenes/gameOver.js b/src/scenes/gameOver.js index 7b9b399..8e49600 100644 --- a/src/scenes/gameOver.js +++ b/src/scenes/gameOver.js @@ -12,4 +12,4 @@ export default class GameOver extends Scene { draw() { background(0, 255, 255); } -} \ No newline at end of file +} diff --git a/src/scenes/instructions.js b/src/scenes/instructions.js index 31f8a4d..bda3b5d 100644 --- a/src/scenes/instructions.js +++ b/src/scenes/instructions.js @@ -12,4 +12,4 @@ export default class Instructions extends Scene { draw() { background(255, 0, 0); } -} \ No newline at end of file +} diff --git a/src/scenes/practiceMode.js b/src/scenes/practiceMode.js index 7099869..860dd5b 100644 --- a/src/scenes/practiceMode.js +++ b/src/scenes/practiceMode.js @@ -12,4 +12,4 @@ export default class PracticeMode extends Scene { draw() { background(255, 255, 0); } -} \ No newline at end of file +} diff --git a/src/scenes/settings.js b/src/scenes/settings.js index e9b5d7f..a973041 100644 --- a/src/scenes/settings.js +++ b/src/scenes/settings.js @@ -12,4 +12,4 @@ export default class Settings extends Scene { draw() { background(123, 123, 123); } -} \ No newline at end of file +} From 74b94fe429929481cf407832fa3a657ea542f033 Mon Sep 17 00:00:00 2001 From: Victor Sohier <1sohiervic@gmail.com> Date: Fri, 20 Aug 2021 15:07:26 -0400 Subject: [PATCH 3/3] Implemented preloading in challenge mode as a test with a large number of images --- src/index.js | 36 +++++++++------------- src/objects/sceneManager.js | 8 +++++ src/scenes/challengeMode.js | 61 ++++++++++++++++++++++++++++++++----- 3 files changed, 76 insertions(+), 29 deletions(-) diff --git a/src/index.js b/src/index.js index f098e41..29533bf 100644 --- a/src/index.js +++ b/src/index.js @@ -3,22 +3,16 @@ //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 -//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 -}; +import sceneManager from './objects/sceneManager.js'; +import { MAIN_MENU } from './constants/sceneConstants.js'; +import canvasManager from './objects/canvasManager.js'; -//Change this to change the scene between the options above -let currentScene = "Main Menu"; - -//P5.JS setup function -function setup() +/** + * Our index.js file serves as the gateway into the rest of our application, + * and this setup method hooks into the p5 setup function, which is the gateway to all + * things p5 in our application. + */ +window.setup = function() { let promises = []; for (let i of sceneManager @@ -35,11 +29,11 @@ function setup() }); } -//P5.JS draw function -//This gets called every frame -//Unless there is something global, the draw functions should be changed in -//their respective files (as referenced above). -function draw() +/** + * This hooks into the p5 draw function, which gets called every frame. + * We are using this to pipe through the draw function of whichever scene is currently set. + */ +window.draw = function() { - scenes[currentScene](); + sceneManager.getCurrentScene().draw(); } diff --git a/src/objects/sceneManager.js b/src/objects/sceneManager.js index d731321..b7864c2 100644 --- a/src/objects/sceneManager.js +++ b/src/objects/sceneManager.js @@ -1,3 +1,11 @@ +import { MAIN_MENU, CHEAT_SHEET, CHALLENGE_MODE, GAME_OVER, INSTRUCTIONS, PRACTICE_MODE, SETTINGS } from "../constants/sceneConstants.js"; +import MainMenu from "../scenes/mainMenu.js"; +import CheatSheet from "../scenes/cheatSheet.js"; +import GameOver from "../scenes/gameOver.js"; +import Instructions from "../scenes/instructions.js"; +import PracticeMode from "../scenes/practiceMode.js"; +import Settings from "../scenes/settings.js"; +import ChallengeMode from "../scenes/challengeMode.js"; /** * We'll use this class to help us manage our scenes; diff --git a/src/scenes/challengeMode.js b/src/scenes/challengeMode.js index f6ce67f..dfd451d 100644 --- a/src/scenes/challengeMode.js +++ b/src/scenes/challengeMode.js @@ -8,17 +8,62 @@ import AndGate from "../objects/andGate.js"; export default class ChallengeMode extends Scene { constructor() { super(); + this.bufferImg = null; + this.notImg = null; + this.andImg = null; + this.orImg = null; + this.xorImg = null; + this.nandImg = null; + this.norImg = null; + this.xnorImg = null; + this.constant1 = null; + this.constant2 = null; + this.gate = null; + } + + preload() + { + let promises = [ + new Promise((resolve, reject) => { + this.bufferImg = loadImage("assets/textures/gates/No Input Buffer.png"); + resolve(true); + }), + new Promise((resolve, reject) => { + this.notImg = loadImage("assets/textures/gates/NOT Gate.png"); + resolve(true); + }), + new Promise((resolve, reject) => { + this.andImg = loadImage("assets/textures/gates/AND Gate.png"); + resolve(true); + }), + new Promise((resolve, reject) => { + this.orImg = loadImage("assets/textures/gates/OR Gate.png"); + resolve(true); + }), + new Promise((resolve, reject) => { + this.xorImg = loadImage("assets/textures/gates/XOR Gate.png"); + resolve(true); + }), + new Promise((resolve, reject) => { + this.nandImg = loadImage("assets/textures/gates/NAND Gate.png"); + resolve(true); + }), + new Promise((resolve, reject) => { + this.norImg = loadImage("assets/textures/gates/NOR Gate.png"); + resolve(true); + }), + new Promise((resolve, reject) => { + this.xnorImg = loadImage("assets/textures/gates/XNOR Gate.png"); + resolve(true); + }) + ]; + return promises; } setup() { - this.constant1; - this.constant2; - this.gate; - let img = loadImage("assets/textures/gates/No Input Buffer.png"); - this.constant1 = new ConstantGate(1, img); - this.constant2 = new ConstantGate(1, img); - img = loadImage("assets/textures/gates/AND Gate.png"); - this.gate = new AndGate(this.constant1, this.constant2, img); + this.constant1 = new ConstantGate(1, this.bufferImg); + this.constant2 = new ConstantGate(1, this.bufferImg); + this.gate = new AndGate(this.constant1, this.constant2, this.andImg); } draw() {