Merge pull request #14 from Yareaj/dev

feat: update quadrille to API v2
Yareaj · May 28, 2024 · f46d142 · f46d142
2 parents a444498 + 7ac232c
commit f46d142
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 20 deletions.
diff --git a/custom.html b/custom.html
@@ -7,9 +7,9 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="icon" type="image/x-icon" href="assets/player/head.png">
 
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.6.0/p5.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.6.0/addons/p5.sound.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/gh/objetos/p5.quadrille.js/p5.quadrille.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.4/p5.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.4/addons/p5.sound.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/gh/objetos/p5.quadrille.js@2.0.8/p5.quadrille.min.js"></script>
 
     <!-- Retrieve the variables used across the whole project --> 
     <script src="globalVariables.js"></script>

diff --git a/functions/levelHandler.js b/functions/levelHandler.js
@@ -48,7 +48,7 @@ function setup() {
     rows = mapOutline.length;
 
     // Adjust the canvas to the board's exact measurements
-    createCanvas(Quadrille.CELL_LENGTH * columns, Quadrille.CELL_LENGTH * rows);
+    createCanvas(Quadrille.cellLength * columns, Quadrille.cellLength * rows);
     background('#2f4f4f');
 
     // Define the level's map dimensions
@@ -85,25 +85,25 @@ function draw() {
     for (let arrayBlockIt=0; arrayBlockIt<renderBlocks.length; arrayBlockIt++) {
         for (let singleIt=0; singleIt<renderBlocks[arrayBlockIt].length; singleIt++) {
             drawQuadrille(renderBlocks[arrayBlockIt][singleIt][0], {
-                x: renderBlocks[arrayBlockIt][singleIt][1][0] * Quadrille.CELL_LENGTH,
-                y: renderBlocks[arrayBlockIt][singleIt][1][1] * Quadrille.CELL_LENGTH
+                x: renderBlocks[arrayBlockIt][singleIt][1][0] * Quadrille.cellLength,
+                y: renderBlocks[arrayBlockIt][singleIt][1][1] * Quadrille.cellLength
             });
         }
     }
 
     // Insert the player onto the main quadrille given a specific position
     drawQuadrille(playerQuad, {
-        x: playerPos.col * Quadrille.CELL_LENGTH,
-        y: playerPos.row * Quadrille.CELL_LENGTH,
+        x: playerPos.col * Quadrille.cellLength,
+        y: playerPos.row * Quadrille.cellLength,
         outline: 'green'
     });
 
     // Add the step counter
     fill('#ffdeb3');
     textFont('Fredoka-Medium');
-    textSize(Quadrille.CELL_LENGTH*0.5);
-    const xCordSteps = ((width+(Quadrille.CELL_LENGTH/2))/2)-(textWidth('Steps'));
-    text(`Steps: ${stepsTaken}`, xCordSteps, Quadrille.CELL_LENGTH/1.5);
+    textSize(Quadrille.cellLength*0.5);
+    const xCordSteps = ((width+(Quadrille.cellLength/2))/2)-(textWidth('Steps'));
+    text(`Steps: ${stepsTaken}`, xCordSteps, Quadrille.cellLength/1.5);
 
     // Add a level indicator top left corner
     textSize(10);
@@ -113,7 +113,7 @@ function draw() {
     if (levelPass) {
         // Create screening
         fill(color('rgba(36, 166, 91, 0.80)'));
-        rect(0,0, Quadrille.CELL_LENGTH*columns, Quadrille.CELL_LENGTH*rows);
+        rect(0,0, Quadrille.cellLength*columns, Quadrille.cellLength*rows);
         // Display the done level text
         textFont('Fredoka-Medium');
         textSize(40);

diff --git a/globalVariables.js b/globalVariables.js
@@ -13,8 +13,8 @@ const playerPos = {};
 let placedTargets = 0, levelPass = false, successAudio = true;
 
 // Redefine global variables for customization
-Quadrille.CELL_LENGTH = 50;
-Quadrille.OUTLINE_WEIGHT = 0;
+Quadrille.cellLength = 50;
+Quadrille.outlineWeight = 0;
 
 // Definition of the map and it's dimensions
 let mapOutline, columns, rows;

diff --git a/index.html b/index.html
@@ -7,9 +7,9 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="icon" type="image/x-icon" href="assets/player/head.png">
 
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.6.0/p5.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.6.0/addons/p5.sound.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/gh/objetos/p5.quadrille.js/p5.quadrille.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.4/p5.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.4/addons/p5.sound.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/gh/objetos/p5.quadrille.js@2.0.8/p5.quadrille.min.js"></script>
 
     <!-- Retrieve the variables used across the whole project --> 
     <script src="globalVariables.js"></script>

diff --git a/play.html b/play.html
@@ -7,9 +7,9 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="icon" type="image/x-icon" href="assets/player/head.png">
 
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.6.0/p5.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.6.0/addons/p5.sound.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/gh/objetos/p5.quadrille.js/p5.quadrille.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.4/p5.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.4/addons/p5.sound.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/gh/objetos/p5.quadrille.js@2.0.8/p5.quadrille.min.js"></script>
 
     <!-- Retrieve the variables used across the whole project --> 
     <script src="globalVariables.js"></script>