diff --git a/README.md b/README.md index f4b4154..4419d01 100644 --- a/README.md +++ b/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 diff --git a/package-lock.json b/package-lock.json index a9bb412..0defaa3 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index 847f388..ad394f7 100644 --- a/package.json +++ b/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", diff --git a/public/rtl-united-text.zip b/public/rtl-united-text.zip new file mode 100644 index 0000000..1e0ef85 Binary files /dev/null and b/public/rtl-united-text.zip differ diff --git a/public/rtl-united-text/RTLUnitedTextBold.ttf b/public/rtl-united-text/RTLUnitedTextBold.ttf new file mode 100644 index 0000000..e6319f6 Binary files /dev/null and b/public/rtl-united-text/RTLUnitedTextBold.ttf differ diff --git a/public/rtl-united-text/RTLUnitedTextBoldItalic.ttf b/public/rtl-united-text/RTLUnitedTextBoldItalic.ttf new file mode 100644 index 0000000..e6bb6ae Binary files /dev/null and b/public/rtl-united-text/RTLUnitedTextBoldItalic.ttf differ diff --git a/public/rtl-united-text/RTLUnitedTextLight.ttf b/public/rtl-united-text/RTLUnitedTextLight.ttf new file mode 100644 index 0000000..3614242 Binary files /dev/null and b/public/rtl-united-text/RTLUnitedTextLight.ttf differ diff --git a/public/rtl-united-text/RTLUnitedTextLightItalic.ttf b/public/rtl-united-text/RTLUnitedTextLightItalic.ttf new file mode 100644 index 0000000..f5b2b27 Binary files /dev/null and b/public/rtl-united-text/RTLUnitedTextLightItalic.ttf differ diff --git a/public/rtl-united-text/RTLUnitedTextRegular.ttf b/public/rtl-united-text/RTLUnitedTextRegular.ttf new file mode 100644 index 0000000..662a78e Binary files /dev/null and b/public/rtl-united-text/RTLUnitedTextRegular.ttf differ diff --git a/public/rtl-united-text/RTLUnitedTextRegularItalic.ttf b/public/rtl-united-text/RTLUnitedTextRegularItalic.ttf new file mode 100644 index 0000000..6b88fa2 Binary files /dev/null and b/public/rtl-united-text/RTLUnitedTextRegularItalic.ttf differ diff --git a/src/app/current-score/current-score.component.css b/src/app/current-score/current-score.component.css new file mode 100644 index 0000000..681a18e --- /dev/null +++ b/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; +} diff --git a/src/app/current-score/current-score.component.html b/src/app/current-score/current-score.component.html new file mode 100644 index 0000000..fd1b5ad --- /dev/null +++ b/src/app/current-score/current-score.component.html @@ -0,0 +1,6 @@ +
+

Ronde {{round}}

+ +

Tussenstand: {{localStorage.getItem('score')}}/{{round}}0

+ +
diff --git a/src/app/current-score/current-score.component.spec.ts b/src/app/current-score/current-score.component.spec.ts new file mode 100644 index 0000000..c302482 --- /dev/null +++ b/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; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [CurrentScoreComponent] + }) + .compileComponents(); + + fixture = TestBed.createComponent(CurrentScoreComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/current-score/current-score.component.ts b/src/app/current-score/current-score.component.ts new file mode 100644 index 0000000..c999748 --- /dev/null +++ b/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; +} diff --git a/src/app/final/final.component.html b/src/app/final/final.component.html index b447872..32338be 100644 --- a/src/app/final/final.component.html +++ b/src/app/final/final.component.html @@ -4,7 +4,7 @@

Je cijfer is: {{ calculatedScore }}

{{scoreMessage}}


-

Aantal vragen goed: {{localStorage.getItem('score')}}/50

+
Aantal vragen goed: {{localStorage.getItem('score')}}/50
diff --git a/src/app/game/game.component.css b/src/app/game/game.component.css index 64f8f55..0308ca1 100644 --- a/src/app/game/game.component.css +++ b/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 { diff --git a/src/app/game/game.component.html b/src/app/game/game.component.html index ef77673..7a8dc36 100644 --- a/src/app/game/game.component.html +++ b/src/app/game/game.component.html @@ -1,160 +1,158 @@
- -
-
-
-

Vraag {{ localStorage.getItem('question') }}

-
- -
-

Kies de soort vraag:

-
- -
- - - -
-
- -
-
- ← Vorige -
-
-

Vraag {{ localStorage.getItem('question') }}

-
- -
-

Kies het antwoord:

-
- -
- -
- -
- -
-
- -
-
- ← Vorige -
-
-

Vraag {{ localStorage.getItem('question') }}

-
- -
-
-
- {{ item.label }} -
+
+
+

Vraag {{ localStorage.getItem('question') }}

- -
-
- -
-
- -
-
- ← Vorige -
-
-

Vraag {{ localStorage.getItem('question') }}

-
- -
-

Kies het antwoord:

-
- -
- -
- -
- -
-
- -
-
-

Vraag {{ localStorage.getItem('question') }}

-
- -
-

Gekozen antwoord: {{ answer.toString() }}

-
- -
-

Klopt het antwoord?

-
- -
- - -
-
- -
-
-

Vraag {{ localStorage.getItem('question') }}

-
- -
-

Gekozen antwoord:

-
- -
-
-
- {{ item.label }} -
+
+

Kies de soort vraag:

-
-
- {{ item.label }} -
+
+ + +
-
-

Klopt het antwoord?

+ +
+
+ ← Vorige +
+
+

Vraag {{ localStorage.getItem('question') }}

+
+ +
+

Kies het antwoord:

+
+ +
+ +
+ +
+ +
-
- - +
+
+ ← Vorige +
+
+

Vraag {{ localStorage.getItem('question') }}

+
+ +
+
+
+ {{ item.label }} +
+
+ + +
+
+ +
+
+ +
+
+ ← Vorige +
+
+

Vraag {{ localStorage.getItem('question') }}

+
+ +
+

Kies het antwoord:

+
+ +
+ +
+ +
+ +
+
+ +
+
+

Vraag {{ localStorage.getItem('question') }}

+
+ +
+

Gekozen antwoord: {{ answer.toString() }}

+
+ +
+

Klopt het antwoord?

+
+ +
+ + +
+
+ +
+
+

Vraag {{ localStorage.getItem('question') }}

+
+ +
+

Gekozen antwoord:

+
+ +
+
+
+ {{ item.label }} +
+
+ +
+
+ {{ item.label }} +
+
+
+
+

Klopt het antwoord?

+
+ +
+ + +
- diff --git a/src/app/game/game.component.ts b/src/app/game/game.component.ts index f18e3cf..6082eec 100644 --- a/src/app/game/game.component.ts +++ b/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() diff --git a/src/app/welcome/welcome.component.css b/src/app/welcome/welcome.component.css index 552bdf6..244c42d 100644 --- a/src/app/welcome/welcome.component.css +++ b/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 { diff --git a/src/app/welcome/welcome.component.html b/src/app/welcome/welcome.component.html index 917fcf7..d4ab434 100644 --- a/src/app/welcome/welcome.component.html +++ b/src/app/welcome/welcome.component.html @@ -2,10 +2,15 @@ +

Weet ik Veel

Voer hier je naam in om te beginnen

- - +
+ + +
+
+
diff --git a/src/styles.css b/src/styles.css index be39b47..2cf7243 100644 --- a/src/styles.css +++ b/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; +}