versie 1.3.0 - the 'feel' update

README.md

@@ -1,6 +1,13 @@
-# Wiv
+# WeetIkVeel
+
+## Changelog
+
+### - versie 1.3.0 - the 'feel' update:
+- tussenstand scherm toegevoegd
+- nieuw lettertype toegevoegd om de 'RTL feel' te geven
+- eindstand scherm aangepast
+- beginscherm aangepast
 
-This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 19.0.2.
 
 ## Development server
 

package-lock.json

@@ -1,14 +1,14 @@
 {
   "name": "wiv",
-  "version": "1.2.3",
+  "version": "1.3.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "wiv",
-      "version": "1.2.3",
+      "version": "1.3.0",
       "dependencies": {
-        "@angular/animations": "^19.0.0",
+        "@angular/animations": "^19.0.1",
         "@angular/cdk": "^19.0.0",
         "@angular/common": "^19.0.0",
         "@angular/compiler": "^19.0.0",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "wiv",
-  "version": "1.2.3",
+  "version": "1.3.0",
   "scripts": {
     "ng": "ng",
     "start": "ng serve",
@@ -11,7 +11,7 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^19.0.0",
+    "@angular/animations": "^19.0.1",
     "@angular/cdk": "^19.0.0",
     "@angular/common": "^19.0.0",
     "@angular/compiler": "^19.0.0",

src/app/current-score/current-score.component.css

@@ -0,0 +1,31 @@
+/* Algemene stijl voor de game-container */
+.game-container {
+  display: flex;
+  flex-direction: column;
+  justify-content: center; /* Verticaal centreren */
+  align-items: center; /* Horizontaal centreren */
+  height: 100vh; /* Volledige hoogte van het scherm */
+  padding: 20px;
+  max-width: 600px; /* Maximaliseer de breedte van de container */
+  margin: 0 auto;
+}
+
+button{
+  padding: 10px;
+  font-size: 1.2rem;
+  background-color: #ff561e;
+  color: white;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+  margin-top: 24px;
+}
+
+a{
+  color: white;
+  text-decoration: none;
+}
+
+h2{
+  font-weight: bold;
+}

src/app/current-score/current-score.component.html

@@ -0,0 +1,6 @@
+<div class="game-container ">
+  <h2>Ronde {{round}}</h2>
+
+  <h4>Tussenstand: {{localStorage.getItem('score')}}/{{round}}0</h4>
+  <button><a href="#/start">Volgende ronde</a></button>
+</div>

src/app/current-score/current-score.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CurrentScoreComponent } from './current-score.component';
+
+describe('CurrentScoreComponent', () => {
+  let component: CurrentScoreComponent;
+  let fixture: ComponentFixture<CurrentScoreComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [CurrentScoreComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(CurrentScoreComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/current-score/current-score.component.ts

@@ -0,0 +1,17 @@
+import {Component, OnInit} from '@angular/core';
+
+@Component({
+  selector: 'app-current-score',
+  imports: [],
+  templateUrl: './current-score.component.html',
+  styleUrl: './current-score.component.css'
+})
+export class CurrentScoreComponent implements OnInit{
+  round: string;
+
+  ngOnInit(): void {
+    this.round = localStorage.getItem('question')[0]
+  }
+
+  protected readonly localStorage = localStorage;
+}

src/app/final/final.component.html

@@ -4,7 +4,7 @@
     <h2 (click)="easterEgg()">Je cijfer is: {{ calculatedScore }}</h2>
     <h4>{{scoreMessage}}</h4>
     <br>
-    <h4>Aantal vragen goed: {{localStorage.getItem('score')}}/50</h4>
+    <h5>Aantal vragen goed: {{localStorage.getItem('score')}}/50</h5>
   </div>
 
   <a href="#" (click)="resetGame()"><button>Spel opnieuw spelen</button></a>

src/app/game/game.component.css

@@ -75,7 +75,6 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-top: 50px;
 }
 
 .left-column, .right-column {

src/app/game/game.component.html

@@ -1,160 +1,158 @@
 <app-menu></app-menu>
 
 <div>
-
+  <div class="game-container" *ngIf="currentQuestion.type == 0 && !confirmed">
-</div>
+    <div class="question">
-<div class="game-container" *ngIf="currentQuestion.type == 0 && !confirmed">
+      <p>Vraag {{ localStorage.getItem('question') }}</p>
-  <div class="question">
-    <p>Vraag {{ localStorage.getItem('question') }}</p>
-  </div>
-
-  <div class="question-type">
-    <p>Kies de soort vraag:</p>
-  </div>
-
-  <div class="buttons">
-    <button (click)="setQuestionType(1)">Meerkeuze</button>
-    <button (click)="setQuestionType(2)">Volgorde</button>
-    <button (click)="setQuestionType(3)">Waar / Niet Waar</button>
-  </div>
-</div>
-
-<div class="game-container" *ngIf="currentQuestion.type == 1 && !confirmed">
-  <div class="backButton">
-    <a (click)="currentQuestion.type = 0">← Vorige</a>
-  </div>
-  <div class="question">
-    <p>Vraag {{ localStorage.getItem('question') }}</p>
-  </div>
-
-  <div class="question-type">
-    <p>Kies het antwoord: </p>
-  </div>
-
-  <div class="buttons-questions">
-    <button *ngFor="let item of multipleChoices"
-            [class.selected]="item.selected"
-            (click)="toggleChoice(item.choice)">
-      {{ item.choice }}
-    </button>
-  </div>
-
-  <div class="buttons-confirm">
-    <button (click)="confirmAnswer()" [disabled]="answer.length === 0">Bevestigen</button>
-  </div>
-</div>
-
-<div class="game-container" *ngIf="currentQuestion.type == 2 && !confirmed">
-  <div class="backButton">
-    <a (click)="currentQuestion.type = 0">← Vorige</a>
-  </div>
-  <div class="question">
-    <p>Vraag {{ localStorage.getItem('question') }}</p>
-  </div>
-
-  <div class="drag-and-drop-container">
-    <div id="left" class="left-column" cdkDropList (cdkDropListDropped)="onDrop($event)">
-      <div *ngFor="let item of leftButtons; let i = index"
-           cdkDrag
-           [cdkDragData]="item"
-           class="draggable-button">
-        {{ item.label }}
-      </div>
     </div>
 
-    <div id="right" class="right-column" cdkDropList (cdkDropListDropped)="onDrop($event)">
+    <div class="question-type">
-      <div *ngFor="let item of rightButtons; let i = index"
+      <p>Kies de soort vraag:</p>
-           cdkDrag
-           [cdkDragData]="item"
-           class="draggable-button">
-        {{ item.label }}
-      </div>
-    </div>
-  </div>
-  <div class="buttons-confirm">
-    <button (click)="confirmAnswer()">Bevestigen</button>
-  </div>
-</div>
-
-<div class="game-container" *ngIf="currentQuestion.type == 3 && !confirmed">
-  <div class="backButton">
-    <a (click)="currentQuestion.type = 0">← Vorige</a>
-  </div>
-  <div class="question">
-    <p>Vraag {{ localStorage.getItem('question') }}</p>
-  </div>
-
-  <div class="question-type">
-    <p>Kies het antwoord: </p>
-  </div>
-
-  <div class="buttons-questions">
-    <button *ngFor="let item of trueFalseChoices"
-            [class.selected]="item.selected"
-            (click)="toggleChoiceTrueOrFalse(item.choice)">
-      {{ item.choice }}
-    </button>
-  </div>
-
-  <div class="buttons-confirm">
-    <button (click)="confirmAnswer()" [disabled]="answer.length === 0">Bevestigen</button>
-  </div>
-</div>
-
-<div class="game-container" *ngIf="(currentQuestion.type == 1 || currentQuestion.type == 3) && confirmed">
-  <div class="question">
-    <p>Vraag {{ localStorage.getItem('question') }}</p>
-  </div>
-
-  <div>
-    <p>Gekozen antwoord: {{ answer.toString() }} </p>
-  </div>
-
-  <div class="question-type">
-    <p>Klopt het antwoord?</p>
-  </div>
-
-  <div class="buttons-questions">
-    <button (click)="isAnswerCorrect(true)">Ja</button>
-    <button (click)="isAnswerCorrect(false)">Nee</button>
-  </div>
-</div>
-
-<div class="game-container" *ngIf="currentQuestion.type == 2 && confirmed">
-  <div class="question">
-    <p>Vraag {{ localStorage.getItem('question') }}</p>
-  </div>
-
-  <div>
-    <p>Gekozen antwoord:</p>
-  </div>
-
-  <div class="drag-and-drop-container">
-    <div id="leftConfirmed" class="left-column" cdkDropList (cdkDropListDropped)="onDrop($event)">
-      <div *ngFor="let item of leftButtons; let i = index"
-           cdkDrag
-           [cdkDragData]="item"
-           class="draggable-button">
-        {{ item.label }}
-      </div>
     </div>
 
-    <div id="rightConfirmed" class="right-column" cdkDropList (cdkDropListDropped)="onDrop($event)">
+    <div class="buttons">
-      <div *ngFor="let item of rightButtons; let i = index"
+      <button (click)="setQuestionType(1)">Meerkeuze</button>
-           cdkDrag
+      <button (click)="setQuestionType(2)">Volgorde</button>
-           [cdkDragData]="item"
+      <button (click)="setQuestionType(3)">Waar / Niet Waar</button>
-           class="draggable-button">
-        {{ item.label }}
-      </div>
     </div>
   </div>
-  <div class="question-type">
+
-    <p>Klopt het antwoord?</p>
+  <div class="game-container" *ngIf="currentQuestion.type == 1 && !confirmed">
+    <div class="backButton">
+      <a (click)="currentQuestion.type = 0">← Vorige</a>
+    </div>
+    <div class="question">
+      <p>Vraag {{ localStorage.getItem('question') }}</p>
+    </div>
+
+    <div class="question-type">
+      <p>Kies het antwoord: </p>
+    </div>
+
+    <div class="buttons-questions">
+      <button *ngFor="let item of multipleChoices"
+              [class.selected]="item.selected"
+              (click)="toggleChoice(item.choice)">
+        {{ item.choice }}
+      </button>
+    </div>
+
+    <div class="buttons-confirm">
+      <button (click)="confirmAnswer()" [disabled]="answer.length === 0">Bevestigen</button>
+    </div>
   </div>
 
-  <div class="buttons-questions">
+  <div class="game-container" *ngIf="currentQuestion.type == 2 && !confirmed">
-    <button (click)="isAnswerCorrect(true)">Ja</button>
+    <div class="backButton">
-    <button (click)="isAnswerCorrect(false)">Nee</button>
+      <a (click)="currentQuestion.type = 0">← Vorige</a>
+    </div>
+    <div class="question">
+      <p>Vraag {{ localStorage.getItem('question') }}</p>
+    </div>
+
+    <div class="drag-and-drop-container">
+      <div id="left" class="left-column" cdkDropList (cdkDropListDropped)="onDrop($event)">
+        <div *ngFor="let item of leftButtons; let i = index"
+             cdkDrag
+             [cdkDragData]="item"
+             class="draggable-button">
+          {{ item.label }}
+        </div>
+      </div>
+
+      <div id="right" class="right-column" cdkDropList (cdkDropListDropped)="onDrop($event)">
+        <div *ngFor="let item of rightButtons; let i = index"
+             cdkDrag
+             [cdkDragData]="item"
+             class="draggable-button">
+          {{ item.label }}
+        </div>
+      </div>
+    </div>
+    <div class="buttons-confirm">
+      <button (click)="confirmAnswer()">Bevestigen</button>
+    </div>
+  </div>
+
+  <div class="game-container" *ngIf="currentQuestion.type == 3 && !confirmed">
+    <div class="backButton">
+      <a (click)="currentQuestion.type = 0">← Vorige</a>
+    </div>
+    <div class="question">
+      <p>Vraag {{ localStorage.getItem('question') }}</p>
+    </div>
+
+    <div class="question-type">
+      <p>Kies het antwoord: </p>
+    </div>
+
+    <div class="buttons-questions">
+      <button *ngFor="let item of trueFalseChoices"
+              [class.selected]="item.selected"
+              (click)="toggleChoiceTrueOrFalse(item.choice)">
+        {{ item.choice }}
+      </button>
+    </div>
+
+    <div class="buttons-confirm">
+      <button (click)="confirmAnswer()" [disabled]="answer.length === 0">Bevestigen</button>
+    </div>
+  </div>
+
+  <div class="game-container" *ngIf="(currentQuestion.type == 1 || currentQuestion.type == 3) && confirmed">
+    <div class="question">
+      <p>Vraag {{ localStorage.getItem('question') }}</p>
+    </div>
+
+    <div>
+      <p>Gekozen antwoord: {{ answer.toString() }} </p>
+    </div>
+
+    <div class="question-type">
+      <p>Klopt het antwoord?</p>
+    </div>
+
+    <div class="buttons-questions">
+      <button (click)="isAnswerCorrect(true)">Ja</button>
+      <button (click)="isAnswerCorrect(false)">Nee</button>
+    </div>
+  </div>
+
+  <div class="game-container" *ngIf="currentQuestion.type == 2 && confirmed">
+    <div class="question">
+      <p>Vraag {{ localStorage.getItem('question') }}</p>
+    </div>
+
+    <div>
+      <p>Gekozen antwoord:</p>
+    </div>
+
+    <div class="drag-and-drop-container">
+      <div id="leftConfirmed" class="left-column" cdkDropList (cdkDropListDropped)="onDrop($event)">
+        <div *ngFor="let item of leftButtons; let i = index"
+             cdkDrag
+             [cdkDragData]="item"
+             class="draggable-button">
+          {{ item.label }}
+        </div>
+      </div>
+
+      <div id="rightConfirmed" class="right-column" cdkDropList (cdkDropListDropped)="onDrop($event)">
+        <div *ngFor="let item of rightButtons; let i = index"
+             cdkDrag
+             [cdkDragData]="item"
+             class="draggable-button">
+          {{ item.label }}
+        </div>
+      </div>
+    </div>
+    <div class="question-type">
+      <p>Klopt het antwoord?</p>
+    </div>
+
+    <div class="buttons-questions">
+      <button (click)="isAnswerCorrect(true)">Ja</button>
+      <button (click)="isAnswerCorrect(false)">Nee</button>
+    </div>
   </div>
 </div>
-

src/app/game/game.component.ts

@@ -95,6 +95,9 @@ export class GameComponent implements OnInit {
 
     let question = +localStorage.getItem('question')
     if (question < 50){
+      if (question % 10 == 0){
+        this.router.navigate(['currentScore'])
+      }
       this.confirmed = false
       this.setNewQuestion()
       this.resetAnswer()

src/app/welcome/welcome.component.css

@@ -25,6 +25,7 @@ body, html {
 
 .form {
   text-align: right;
+  margin-top: 12px;
 }
 
 .form p {
@@ -53,10 +54,64 @@ button {
   cursor: pointer;
 }
 
+button[disabled] {
+  background-color: #cccccc;
+  color: #666666;
+}
+
 a{
   color: #ff561e;
 }
 
+.input-container {
+  position: relative;
+  margin: 50px auto;
+  width: 300px;
+}
+
+.input-container input[type="text"] {
+  font-size: 20px;
+  width: 100%;
+  border: none;
+  border-bottom: 2px solid #ccc;
+  padding: 5px 0;
+  background-color: transparent;
+  outline: none;
+}
+
+.input-container .label {
+  position: absolute;
+  top: 0;
+  left: 0;
+  color: #ccc;
+  transition: all 0.3s ease;
+  pointer-events: none;
+}
+
+.input-container input[type="text"]:focus ~ .label,
+.input-container input[type="text"]:valid ~ .label {
+  top: -20px;
+  font-size: 16px;
+  color: #333;
+}
+
+.input-container .underline {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  height: 2px;
+  width: 100%;
+  background-color: #333;
+  transform: scaleX(0);
+  transition: all 0.3s ease;
+}
+
+.input-container input[type="text"]:focus ~ .underline,
+.input-container input[type="text"]:valid ~ .underline {
+  transform: scaleX(1);
+}
+
+
 
 @media (max-width: 600px) {
   .container {

src/app/welcome/welcome.component.html

@@ -2,10 +2,15 @@
   <div class="logo">
     <img src="Logo.png" alt="Logo">
   </div>
+  <h2>Weet ik Veel</h2>
   <div class="form" [formGroup]="form">
     <p>Voer hier je naam in om te beginnen</p>
-    <input type="text" placeholder="Naam" formControlName="naam">
+    <div class="input-container">
-    <button (click)="start()">Beginnen</button>
+      <input type="text" id="naam" formControlName="naam" required="">
+      <label for="naam" class="label">Naam</label>
+      <div class="underline"></div>
+    </div>
+    <button (click)="start()" [disabled]="form.get('naam').value == '' ">Beginnen</button>
   </div>
 
   <div *ngIf="localStorage.getItem('name') != undefined">

src/styles.css

@@ -4,3 +4,69 @@ html, body {
   padding: 0;
   height: 100%; /* Voor volledige pagina-centrering */
 }
+/* Definieer RTLUnitedTextBold */
+@font-face {
+  font-family: 'RTLUnitedText';
+  src: url('../public/rtl-united-text/RTLUnitedTextBold.ttf') format('truetype');
+  font-weight: bold;
+  font-style: normal;
+}
+
+/* Definieer RTLUnitedTextBoldItalic */
+@font-face {
+  font-family: 'RTLUnitedText';
+  src: url('../public/rtl-united-text/RTLUnitedTextBoldItalic.ttf') format('truetype');
+  font-weight: bold;
+  font-style: italic;
+}
+
+/* Definieer RTLUnitedTextLight */
+@font-face {
+  font-family: 'RTLUnitedText';
+  src: url('../public/rtl-united-text/RTLUnitedTextLight.ttf') format('truetype');
+  font-weight: 300; /* Licht gewicht */
+  font-style: normal;
+}
+
+/* Definieer RTLUnitedTextLightItalic */
+@font-face {
+  font-family: 'RTLUnitedText';
+  src: url('../public/rtl-united-text/RTLUnitedTextLightItalic.ttf') format('truetype');
+  font-weight: 300; /* Licht gewicht */
+  font-style: italic;
+}
+
+/* Definieer RTLUnitedTextRegular */
+@font-face {
+  font-family: 'RTLUnitedText';
+  src: url('../public/rtl-united-text/RTLUnitedTextRegular.ttf') format('truetype');
+  font-weight: normal;
+  font-style: normal;
+}
+
+/* Definieer RTLUnitedTextRegularItalic */
+@font-face {
+  font-family: 'RTLUnitedText';
+  src: url('../public/rtl-united-text/RTLUnitedTextRegularItalic.ttf') format('truetype');
+  font-weight: normal;
+  font-style: italic;
+}
+
+/* Voorbeeld van gebruik */
+body {
+  font-family: 'RTLUnitedText', sans-serif;
+}
+
+h1, h2, h3, h4{
+  font-weight: bold;
+}
+
+.container-background {
+  width: 100%;
+  height: 100%;
+  /* Add your background pattern here */
+  background-color: #ffffff;
+  background-image: radial-gradient(rgba(12, 12, 12, 0.171) 2px, transparent 0);
+  background-size: 30px 30px;
+  background-position: -5px -5px;
+}