user interface documentatie

2024-01-24 11:43:28 +01:00
parent 3b9ce4e756
commit 3e1e1b5c79
1 changed files with 94 additions and 1 deletions
--- a/docs/documentatie/User
+++ b/docs/documentatie/User
@@ -8,4 +8,97 @@ De kleuren die we gebruiken zijn felle kleuren op een donkere achtergrond, dit h
 ## positionering
 Door gebruik te maken van rectMode(CENTER) en textAllign(CENTER, CENTER) kunnen we de positionering doen gebaseerd op de width en length van het scherm. Hierdoor is de UI semi-responsive en kan het op elke scherm grootte goed worden weergegeven. 

-## code
+## belangrijke code
+het belangrijkste stuk code van de UI is de buttonselect variabele. Deze variabele wordt gebruikt om te bepalen welke button geselecteerd is en waar je naartoe gaat als je op enter drukt.
+
+```js
+if (keyCode == UP_ARROW) {
+    buttonSelect -= 1;
+    keyReleasedFlag = false;
+    console.log(buttonSelect)
+}
+if (keyCode == DOWN_ARROW) {
+    buttonSelect += 1;
+    keyReleasedFlag = false;
+    console.log(buttonSelect)
+}
+if (buttonSelect == 0) {
+    if (keyCode == ENTER) {
+        console.log("resume");
+        pausescreenOn = false;
+        keyReleasedFlag = false;
+        escaped = false;
+    }
+}
+if (buttonSelect == 1) {
+    if (keyCode == ENTER) {
+        console.log("main menu");
+        homescreenOn = true;
+        pausescreenOn = false;
+        escaped = false;
+        reset();
+        keyReleasedFlag = false;
+    }
+}
+```
+Hier wordt de buttonSelect variabele aangepast als je op de pijltjes toetsen drukt. Vervolgens, gebaseerd op wat de waarde is van de buttonselect variabele, wordt er een actie uitgevoerd als je op enter drukt.
+Deze acties maken gebruik van een ander belangrijk iets wat we hebben gemaakt, de screenOn variabelen.
+```js
+if (scorescreenOn) {
+    scoremenu();
+```
+we hebben gebaseerd op de booleans homescreenOn, pausescreenOn en scorescreenOn de functies homescreen(), pausescreen() en scoremenu() gemaakt. Deze functies worden aangeroepen in de draw() functie en worden alleen uitgevoerd als de bijbehorende boolean true is. Hierdoor kunnen we makkelijk switchen tussen de verschillende schermen.
+```js
+function gameOver() {
+    if (lives <= 0) {
+        //game over screen
+        iIndex = constrain(iIndex, 0, 2);
+        isDead = true;
+        push();
+        fill(255, 0, 0);
+        textSize(60);
+        textAlign(CENTER, CENTER);
+        text("Game Over", width / 2, height / 2 - height / 5);
+
+        fill(255, 255, 255)
+        textSize(18);
+        text("Score: " + int(time), width / 2, height / 2 - height / 8);
+
+        textSize(32);
+        textAlign(CENTER, CENTER);
+        text(letters[currentIndex[0]], width / 2 - 30, height / 2);
+        text(letters[currentIndex[1]], width / 2, height / 2);
+        text(letters[currentIndex[2]], width / 2 + 30, height / 2);
+
+        
+        text("Restart", width / 2, height / 2 + height / 12);
+
+        text("Main Menu", width / 2, height / 2 + height / 6);
+        pop();
+    }
+}
+```
+Deze functies hebben allemaal hun eigen opbouw maar ook een constrain gebaseerd op het aantal knoppen, dit zorgt ervoor dat je niet oneindig door kan blijven gaan met de pijltjes intoetsen en dat je niet onder de 0 kan komen. Dit is nodig zodat de eerder benoemde buttonSelect variabele niet out of bounds gaat en de knoppen dus ook echt iets doen.
+
+Als laatste hebben we ook nog dit stukje code:
+```js
+if (buttonSelect == 0) {
+    push()
+    stroke(205, 205, 205)
+    strokeWeight(2)
+    fill(0, 0, 0, 0)
+    rectMode(CENTER);
+    rect(width / 2, height / 2, buttonWidth, buttonHeight)
+    pop()
+}
+if (buttonSelect == 1) {
+    push()
+    stroke(205, 205, 205)
+    strokeWeight(2)
+    fill(0, 0, 0, 0)
+    rectMode(CENTER);
+    rect(width / 2, height / 2 + height / 12, buttonWidth, buttonHeight)
+    pop()
+        }
+```
+Dit stuk code zorgt ervoor dat er een witte rand om de geselecteerde knop komt. Dit is hoe wij duidelijk maken welke knop geselecteerd is.