Merge pull request #11 from Yareaj/dev

Created and enhanced the landing menu

assets/json/menuButtonStyles.json

@@ -0,0 +1,9 @@
+{
+    "background-color" : "#4a3429",
+    "border" : "none",
+    "border-radius" : "5px",
+    "font-family" : "Fredoka-Bold",
+    "font-size" : "35px",
+    "color" : "#ffdeb3",
+    "padding" : "5px 10px"
+}

functions/functions.js

@@ -92,6 +92,17 @@ function mapReload() {
     setup();
 }
 
+// Go to the menu
 function toMenu() {
-    window.location.href = "./menu.html";
+    window.location.href = "./index.html";
+}
+
+// Go to the level player!
+function initiateLevelPlay() {
+    window.location.href = "./play.html";
+}
+
+// Go to the custom landing page!
+function customLevelLoad() {
+    console.log('Here relies the custom level loader!');
 }

functions/levelHandler.js

@@ -32,7 +32,7 @@ function preload() {
     mapOutline = loadStrings(`./assets/levels/level${levelId}.txt`);
 
     // Load the buttonStyles JSON file
-    buttonStyles = loadJSON('./assets/json/buttonStyles.json');
+    buttonStyles = loadJSON('./assets/json/levelButtonStyles.json');
 }
 
 function setup() {

globalVariables.js

@@ -23,7 +23,7 @@ let mapOutline, columns, rows;
 let levelId = 0;
 
 // Define the button styles
-let buttonStyles;
+let levelButtonStyles, menuButtonStyles;
 
 // Define the step counter variable
 let stepsTaken = 0;

index.html

@@ -13,13 +13,8 @@
 
     <!-- Retrieve the variables used across the whole project --> 
     <script src="globalVariables.js"></script>
-
-    <!-- Import the distribution of functions --> 
-    <script src="functions/objects.js"></script>
-    <script src="functions/movement.js"></script>
     <script src="functions/functions.js"></script>
-
-    <!-- Retrieve the level processor --> 
-    <script src="functions/levelHandler.js"></script>
+    <script src="functions/objects.js"></script>
+    <script src="index.js"></script>
 </head>
 </html>

index.js

@@ -1,22 +1,31 @@
-let head;
+let backgroundImage, customLevelButton, levelListButton;
 
 function preload() {
-    head = loadImage('./assets/player/head.png');
-    loadFont('./assets/fonts/Fredoka-Medium.ttf');
+    // Load assets for render
+    backgroundImage = loadImage('./assets/images/menuBg.png');
+    menuButtonStyles = loadJSON('./assets/json/menuButtonStyles.json');
+    // Load buttons' fonts
+    loadFont('./assets/fonts/Fredoka-Bold.ttf');
 }
 
 function setup() {
     createCanvas(500, 500);
+    customLevelButton = createButton('Custom Level');
+    levelListButton = createButton('Play');
 }
 
 function draw() {
-    background('#6f6f');
-    image(head, 0, 0);
+    image(backgroundImage, 0, 0);
 
-    textFont('Fredoka-Medium');
-    textSize(40);
-    fill('#000');
-    const w = textWidth('Sokoban Worlds');
-    text(w, 100, 300);
-    text('Sokoban Worlds', 80, 100);
+    // Apply styles to the menu buttons
+    applyStyles(levelListButton, menuButtonStyles);
+    applyStyles(customLevelButton, menuButtonStyles);
+
+    // Position the buttons on the screen
+    levelListButton.position(width/2.4, height/1.93);
+    customLevelButton.position(width/3.6, height/1.5);
+
+    // Add listeners for button actions
+    levelListButton.mousePressed(initiateLevelPlay);
+    customLevelButton.mousePressed(customLevelLoad);
 }

menu.html → play.html

@@ -12,8 +12,14 @@
     <script src="https://cdn.jsdelivr.net/gh/objetos/p5.quadrille.js/p5.quadrille.min.js"></script>
 
     <!-- Retrieve the variables used across the whole project --> 
-    <script src="index.js"></script>
+    <script src="globalVariables.js"></script>
 
-    <h1>Welcome to the menu boys</h1>
+    <!-- Import the distribution of functions --> 
+    <script src="functions/objects.js"></script>
+    <script src="functions/movement.js"></script>
+    <script src="functions/functions.js"></script>
+
+    <!-- Retrieve the level processor --> 
+    <script src="functions/levelHandler.js"></script>
 </head>
 </html>