From 9eb06d9f6f8208e868b48f173b443f393b5e2cd8 Mon Sep 17 00:00:00 2001
From: Mees Roelofsz <mees.roelofsz@hva.nl>
Date: Tue, 16 Jan 2024 10:21:52 +0100
Subject: [PATCH] experimenting with colors + changed main menu to change based
 on size

---
 web/game.js    | 10 ++++++----
 web/js/Menu.js | 26 +++++++++++++-------------
 2 files changed, 19 insertions(+), 17 deletions(-)

diff --git a/web/game.js b/web/game.js
index 5616dd5..261fe25 100644
--- a/web/game.js
+++ b/web/game.js
@@ -3,6 +3,8 @@
 const width = 1260;
 const height = 620;
 let requesteddata = [];	
+let buttonWidth = width/ 6
+let buttonHeight = buttonWidth/5
 // Menu variables
 let letters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('');
 let currentIndex = [0, 0, 0];
@@ -321,7 +323,7 @@ function draw() {
             stroke(205, 205, 205)
             strokeWeight(2)
             fill(0, 0, 0, 0)
-            rect(width / 2, height / 2, 200, 40)
+            rect(width / 2, height / 2, buttonWidth, buttonHeight)
             pop()
         }
         if (buttonSelectHome == 1) {
@@ -329,7 +331,7 @@ function draw() {
             stroke(205, 205, 205)
             strokeWeight(2)
             fill(0, 0, 0, 0)
-            rect(width / 2, height / 2 + 50, 200, 40)
+            rect(width / 2, height / 2 + height/12, buttonWidth, buttonHeight)
             pop()
         }
     }
@@ -349,7 +351,7 @@ function draw() {
             strokeWeight(2)
             fill(0, 0, 0, 0)
             rectMode(CENTER);
-            rect(width / 2, height / 2, 200, 40)
+            rect(width / 2, height / 2, buttonWidth, buttonHeight)
             pop()
         }
         if (buttonSelectPause == 1) {
@@ -358,7 +360,7 @@ function draw() {
             strokeWeight(2)
             fill(0, 0, 0, 0)
             rectMode(CENTER);
-            rect(width / 2, height / 2 + 50, 200, 40)
+            rect(width / 2, height / 2 + height/12, buttonWidth, buttonHeight)
             pop()
         }
     }
diff --git a/web/js/Menu.js b/web/js/Menu.js
index 1ade35d..a47e560 100644
--- a/web/js/Menu.js
+++ b/web/js/Menu.js
@@ -17,46 +17,46 @@ function keyPressed() {
 
 function homescreen() {
     textAlign(CENTER);
-    button(255, 255, 255, width / 2, height / 2, 200, 40, "Start Game")
-    button(255, 255, 255, width / 2, height / 2 + 50, 200, 40, "Scores")
+    button(255, 255, 255, width / 2, height / 2, "Start Game")
+    button(255, 255, 255, width / 2, height / 2 + height/12, "Scores")
     
     push()
-    stroke(255, 255, 255)
+    stroke(4,217,255)
     strokeWeight(5)
     fill(0, 255, 0, 0)
-    rect(width/4*3, height/2, 300, 400)
+    rect(width/5*4, height/2, width/4, height/1.5)
     pop()
     //highscores rectangle
     push()
     textSize(50)
     fill(255, 255, 255)
-    text("Highscores", width/4, 200)
+    text("Highscores", width/5, height/4)
     pop()
 
     push()
     fill(255, 255, 255)
     textSize(25)
-    textAlign(CENTER)
+    textAlign(CENTER, CENTER)
     for (let i = 0; i < requesteddata.length; i++) {
-        text(i + 1 + ". " + requesteddata[i].Naam + ": " + requesteddata[i].Score, width/4, 250 + (i * 30))
+        text(i + 1 + ". " + requesteddata[i].Naam + ": " + requesteddata[i].Score, width/5, height/3 + (i * 30))
     }
     pop()
 
     push()
-    stroke(255, 255, 255)
+    stroke(4,217,255)
     strokeWeight(5)
     fill(0, 255, 0, 0)
-    rect(width/4, height/2, 300, 400)
+    rect(width/5, height/2, width/4, height/1.5)
     pop()
 
     push()
     textSize(50)
     fill(255, 255, 255)
-    text("Controls", width/4*3, 200)
+    text("Controls", width/5*4, height/4)
     pop()
 }
 
-function button(r, g, b, buttonX, buttonY, buttonWidth, buttonHeight, buttonText) {
+function button(r, g, b, buttonX, buttonY, buttonText) {
     push()
     fill(0, 0, 50)
     rectMode(CENTER);
@@ -74,6 +74,6 @@ function pauseMenu(){
     textSize(50);
     fill(255, 255, 255);
     text("Paused", width / 2, height / 2 - 100);
-    button(255, 255, 255, width / 2, height / 2, 200, 40, "Resume");
-    button(255, 255, 255, width / 2, height / 2 + 50, 200, 40, "Main Menu");    
+    button(255, 255, 255, width / 2, height / 2, "Resume");
+    button(255, 255, 255, width / 2, height / 2 + height/12, "Main Menu");    
 }
\ No newline at end of file