Merge branch 'main' of https://gitlab.fdmci.hva.nl/propedeuse-hbo-ict/onderwijs/2023-2024/out-a-se-ti/blok-2/cuujooceevii61

docs/.pages

@@ -20,4 +20,5 @@ nav:
         - SQL : documentatie/sql
         - P5.md : documentatie/p5
         - Feedback : documentatie/Feedback
-        - Documentatie : "documentatie/Documentatie game"
+        - Positioning : documentatie/positioning
+        - Documentatie game : "documentatie/Documentatie game"

docs/documentatie/positioning.md

@@ -0,0 +1,2 @@
+## fuck
+door gebruik te maken van rectMode center kunnen we gebruik maken van dingen als width/4 zodat het op alle schermgroottes mogelijk is.

web/game.js

@@ -75,6 +75,7 @@ function setup() {
     createCanvas(width, height);
     frameRate(framerate);
     angleMode(DEGREES);
+    rectMode(CENTER);
     // disable the outline of shapes
     noStroke();
 }
@@ -320,7 +321,7 @@ function draw() {
             stroke(205, 205, 205)
             strokeWeight(2)
             fill(0, 0, 0, 0)
-            rect(width / 2 - 90, height / 2, 200, 40)
+            rect(width / 2, height / 2, 200, 40)
             pop()
         }
         if (buttonSelectHome == 1) {
@@ -328,7 +329,7 @@ function draw() {
             stroke(205, 205, 205)
             strokeWeight(2)
             fill(0, 0, 0, 0)
-            rect(width / 2 - 90, height / 2 + 50, 200, 40)
+            rect(width / 2, height / 2 + 50, 200, 40)
             pop()
         }
     }
@@ -347,7 +348,8 @@ function draw() {
             stroke(205, 205, 205)
             strokeWeight(2)
             fill(0, 0, 0, 0)
-            rect(width / 2 - 100, height / 2, 200, 40)
+            rectMode(CENTER);
+            rect(width / 2, height / 2, 200, 40)
             pop()
         }
         if (buttonSelectPause == 1) {
@@ -355,7 +357,8 @@ function draw() {
             stroke(205, 205, 205)
             strokeWeight(2)
             fill(0, 0, 0, 0)
-            rect(width / 2 - 100, height / 2 + 50, 200, 40)
+            rectMode(CENTER);
+            rect(width / 2, height / 2 + 50, 200, 40)
             pop()
         }
     }
@@ -363,10 +366,11 @@ function draw() {
         if (entered) {
             if (buttonSelectDead == 0) {
                 push()
+
                 stroke(205, 205, 205)
                 strokeWeight(2)
                 fill(0, 0, 0, 0)
-                rect(width / 2 - 45, height / 2 - 30, 90, 40)
+                rect(width / 2, height / 2 - 15, 90, 40)
                 pop()
             }
             if (buttonSelectDead == 1) {
@@ -374,7 +378,7 @@ function draw() {
                 stroke(205, 205, 205)
                 strokeWeight(2)
                 fill(0, 0, 0, 0)
-                rect(width / 2 - 55, height / 2 + 15, 110, 40)
+                rect(width / 2, height / 2 + 30, 110, 40)
                 pop()
             }
             if (buttonSelectDead == 2) {
@@ -382,7 +386,7 @@ function draw() {
                 stroke(205, 205, 205)
                 strokeWeight(2)
                 fill(0, 0, 0, 0)
-                rect(width / 2 - 80, height / 2 + 60, 160, 40)
+                rect(width / 2, height / 2 + 75, 160, 40)
                 pop()
             }
         }
@@ -392,7 +396,7 @@ function draw() {
                 stroke(205, 205, 205)
                 strokeWeight(2)
                 fill(0, 0, 0, 0)
-                rect(width / 2 - 45, height / 2 - 30, 30, 40)
+                rect(width / 2 - 30, height / 2 - 15, 30, 40)
                 pop()
             }
             if (iIndex == 1) {
@@ -400,7 +404,7 @@ function draw() {
                 stroke(205, 205, 205)
                 strokeWeight(2)
                 fill(0, 0, 0, 0)
-                rect(width / 2 - 15, height / 2 - 30, 30, 40)
+                rect(width / 2, height / 2 - 15, 30, 40)
                 pop()
             }
             if (iIndex == 2) {
@@ -408,7 +412,7 @@ function draw() {
                 stroke(205, 205, 205)
                 strokeWeight(2)
                 fill(0, 0, 0, 0)
-                rect(width / 2 + 15, height / 2 - 30, 30, 40)
+                rect(width / 2 + 30, height / 2 - 15, 30, 40)
                 pop()
             }
         }

web/js/Menu.js

@@ -17,31 +17,28 @@ function keyPressed() {
 
 function homescreen() {
     textAlign(CENTER);
-    button(255, 255, 255, width / 2 - 90, height / 2, 200, 40, "Start Game")
+    button(255, 255, 255, width / 2, height / 2, 200, 40, "Start Game")
-    button(255, 255, 255, width / 2 - 90, height / 2 + 50, 200, 40, "Scores")
+    button(255, 255, 255, width / 2, height / 2 + 50, 200, 40, "Scores")
     
     push()
     stroke(255, 255, 255)
     strokeWeight(5)
     fill(0, 255, 0, 0)
-    rect(100, 150, 300, 400)
+    rect(width/4*3, height/2, 300, 400)
     pop()
     //highscores rectangle
     push()
     textSize(50)
     fill(255, 255, 255)
-    text("Highscores", 250, 200)
+    text("Highscores", width/4, 200)
     pop()
 
     push()
     fill(255, 255, 255)
     textSize(25)
     textAlign(CENTER)
-    // if (requesteddata.length > 0) {
-    //     text("1. " + requesteddata[0].Naam + ": " + requesteddata[0].Score, 250, 250)
-    //     }    
     for (let i = 0; i < requesteddata.length; i++) {
-        text(i + 1 + ". " + requesteddata[i].Naam + ": " + requesteddata[i].Score, 250, 250 + (i * 30))
+        text(i + 1 + ". " + requesteddata[i].Naam + ": " + requesteddata[i].Score, width/4, 250 + (i * 30))
     }
     pop()
 
@@ -49,29 +46,26 @@ function homescreen() {
     stroke(255, 255, 255)
     strokeWeight(5)
     fill(0, 255, 0, 0)
-    rect(860, 150, 300, 400)
+    rect(width/4, height/2, 300, 400)
     pop()
 
     push()
     textSize(50)
     fill(255, 255, 255)
-    text("Controls", 1000, 200)
+    text("Controls", width/4*3, 200)
     pop()
 }
 
 function button(r, g, b, buttonX, buttonY, buttonWidth, buttonHeight, buttonText) {
     push()
     fill(0, 0, 50)
+    rectMode(CENTER);
     rect(buttonX, buttonY, buttonWidth, buttonHeight)
     textSize(25)
     fill(r, g, b)
-    text(buttonText, buttonX + 100, buttonY + 30)
     textAlign(CENTER);
-    // if (mouseX > buttonX - 90 && mouseX < width / 2 + 110 && mouseY > height / 2 && mouseY < buttonY + 40) {
+    text(buttonText, buttonX, buttonY + buttonHeight/4)
-    //     if (mouseIsPressed) {
+
-    //         homescreenOn = false;
-    //     }
-    // }
     pop()
 }
 
@@ -80,6 +74,6 @@ function pauseMenu(){
     textSize(50);
     fill(255, 255, 255);
     text("Paused", width / 2, height / 2 - 100);
-    button(255, 255, 255, width / 2 - 100, height / 2, 200, 40, "Resume");
+    button(255, 255, 255, width / 2, height / 2, 200, 40, "Resume");
-    button(255, 255, 255, width / 2 - 100, height / 2 + 50, 200, 40, "Main Menu");    
+    button(255, 255, 255, width / 2, height / 2 + 50, 200, 40, "Main Menu");    
 }