From 3e1e1b5c7974caadbd23844b64812679b14530f9 Mon Sep 17 00:00:00 2001
From: Mees Roelofsz <mees.roelofsz@hva.nl>
Date: Wed, 24 Jan 2024 11:43:28 +0100
Subject: [PATCH] user interface documentatie

---
 docs/documentatie/User Interface.md | 95 ++++++++++++++++++++++++++++-
 1 file changed, 94 insertions(+), 1 deletion(-)

diff --git a/docs/documentatie/User Interface.md b/docs/documentatie/User Interface.md
index 72154ef..0f5fb65 100644
--- a/docs/documentatie/User Interface.md	
+++ b/docs/documentatie/User Interface.md	
@@ -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
\ No newline at end of file
+## 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.
\ No newline at end of file