diff --git a/src/app/game/game.component.ts b/src/app/game/game.component.ts
index a10ca4a..8fb149b 100644
--- a/src/app/game/game.component.ts
+++ b/src/app/game/game.component.ts
@@ -1,5 +1,4 @@
import {Component, OnInit} from '@angular/core';
-import {MenuComponent} from '../menu/menu.component';
import {CommonModule, NgIf} from '@angular/common';
import {CdkDrag, CdkDragDrop, CdkDropList} from '@angular/cdk/drag-drop';
import {Router} from '@angular/router';
@@ -8,11 +7,10 @@ import {Router} from '@angular/router';
@Component({
selector: 'app-game',
imports: [
- MenuComponent,
NgIf,
CdkDrag,
CdkDropList,
- CommonModule
+ CommonModule,
],
templateUrl: './game.component.html',
styleUrl: './game.component.css'
@@ -95,7 +93,6 @@ export class GameComponent implements OnInit {
let question = +localStorage.getItem('question')
if (question < 50){
- console.log('AAAAAHHH')
if (question % 10 == 0){
this.router.navigate(['currentScore'])
}
diff --git a/src/app/settings/settings.component.css b/src/app/settings/settings.component.css
new file mode 100644
index 0000000..8a0d9fc
--- /dev/null
+++ b/src/app/settings/settings.component.css
@@ -0,0 +1,153 @@
+.buttons {
+ display: flex;
+ flex-direction: column;
+ gap: 10px;
+ margin-top: 24px;
+}
+
+.buttons button {
+ padding: 10px;
+ font-size: 1.2rem;
+ background-color: white;
+ color: #ff561e;
+ border: none;
+ border-radius: 5px;
+ cursor: pointer;
+ box-shadow: 0 0 1px 0 rgba(24, 94, 224, 0.15), 0 6px 12px 0 rgba(24, 94, 224, 0.15);
+ margin-top: 8px;
+}
+
+.card {
+ width: 300px;
+ height: fit-content;
+ background: rgb(255, 255, 255);
+ border-radius: 20px;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ gap: 20px;
+ padding: 30px;
+ position: relative;
+ box-shadow: 20px 20px 30px rgba(0, 0, 0, 0.068);
+}
+.card-content {
+ width: 100%;
+ height: fit-content;
+ display: flex;
+ flex-direction: column;
+ gap: 5px;
+}
+.card-heading {
+ font-size: 20px;
+ font-weight: 700;
+ color: rgb(27, 27, 27);
+}
+.card-description {
+ font-weight: 100;
+ color: rgb(102, 102, 102);
+}
+.card-button-wrapper {
+ width: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 10px;
+}
+.card-button {
+ width: 50%;
+ height: 35px;
+ border-radius: 10px;
+ border: none;
+ cursor: pointer;
+ font-weight: 600;
+}
+.primary {
+ background-color: #ff561e;
+ color: white;
+}
+.primary:hover {
+ background-color: rgb(255, 73, 66);
+}
+.secondary {
+ background-color: #ddd;
+}
+.secondary:hover {
+ background-color: rgb(197, 197, 197);
+}
+.exit-button {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ border: none;
+ background-color: transparent;
+ position: absolute;
+ top: 20px;
+ right: 20px;
+ cursor: pointer;
+}
+.exit-button:hover svg {
+ fill: black;
+}
+.exit-button svg {
+ fill: rgb(175, 175, 175);
+}
+.modal-overlay {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background-color: rgba(0, 0, 0, 0.5);
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ z-index: 1000;
+}
+.input-container {
+ position: relative;
+ margin: 50px auto;
+ width: auto;
+}
+
+.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);
+}
diff --git a/src/app/settings/settings.component.html b/src/app/settings/settings.component.html
new file mode 100644
index 0000000..5d23a3b
--- /dev/null
+++ b/src/app/settings/settings.component.html
@@ -0,0 +1,52 @@
+
+
Instellingen
+
+
+
+
+
+
+
+
+
+
+
Spel afsluiten
+
Weet je het zeker? Je zal je score kwijt raken.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/app/settings/settings.component.spec.ts b/src/app/settings/settings.component.spec.ts
new file mode 100644
index 0000000..82c748a
--- /dev/null
+++ b/src/app/settings/settings.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SettingsComponent } from './settings.component';
+
+describe('SettingsComponent', () => {
+ let component: SettingsComponent;
+ let fixture: ComponentFixture
;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ imports: [SettingsComponent]
+ })
+ .compileComponents();
+
+ fixture = TestBed.createComponent(SettingsComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/settings/settings.component.ts b/src/app/settings/settings.component.ts
new file mode 100644
index 0000000..3e7df89
--- /dev/null
+++ b/src/app/settings/settings.component.ts
@@ -0,0 +1,56 @@
+import {Component, OnInit} from '@angular/core';
+import {NgIf} from '@angular/common';
+import {Router} from '@angular/router';
+import {FormControl, FormGroup, FormsModule, ReactiveFormsModule} from '@angular/forms';
+
+@Component({
+ selector: 'app-settings',
+ imports: [
+ NgIf,
+ FormsModule,
+ ReactiveFormsModule
+ ],
+ templateUrl: './settings.component.html',
+ styleUrl: './settings.component.css'
+})
+export class SettingsComponent implements OnInit{
+
+ constructor(private router: Router) {
+ }
+
+ showModalClose: boolean = false;
+ showModalChange: boolean = false;
+ nameForm: FormGroup
+
+ ngOnInit(): void {
+ this.nameForm = new FormGroup({
+ naam: new FormControl(localStorage.getItem('name'))
+ })
+ }
+
+ openModal() {
+ this.showModalClose = true;
+ }
+
+ closeModalClose() {
+ this.showModalClose = false;
+ }
+
+ closeGame() {
+ this.router.navigate([''])
+ localStorage.clear()
+ }
+
+ openModalChange() {
+ this.showModalChange = true;
+ }
+
+ closeModalChange() {
+ this.showModalChange = false;
+ }
+
+ changeName() {
+ localStorage.setItem('name', this.nameForm.get('naam').value)
+ this.closeModalChange()
+ }
+}
diff --git a/src/styles.css b/src/styles.css
index 2cf7243..4f12041 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -70,3 +70,21 @@ h1, h2, h3, h4{
background-size: 30px 30px;
background-position: -5px -5px;
}
+
+button{
+ font-weight: bold;
+}
+button:active{
+ background-color: #eb4f1b;
+}
+
+.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;
+}