From efade0fcc884629d90fd61afbe6e5ed20e48ba2a Mon Sep 17 00:00:00 2001 From: Kernepult1 Date: Tue, 15 Oct 2024 11:59:27 +0200 Subject: [PATCH 01/16] update --- angular.json | 5 ++- src/app/achievements/achievements.page.html | 19 +++++++++++ src/app/achievements/achievements.page.scss | 24 ++++++++++++++ .../achievements/achievements.page.spec.ts | 17 ++++++++++ src/app/achievements/achievements.page.ts | 33 +++++++++++++++++++ src/app/app.component.ts | 1 + src/app/app.routes.ts | 5 +++ 7 files changed, 103 insertions(+), 1 deletion(-) create mode 100644 src/app/achievements/achievements.page.html create mode 100644 src/app/achievements/achievements.page.scss create mode 100644 src/app/achievements/achievements.page.spec.ts create mode 100644 src/app/achievements/achievements.page.ts diff --git a/angular.json b/angular.json index 454190c..e523c20 100644 --- a/angular.json +++ b/angular.json @@ -126,7 +126,10 @@ } }, "cli": { - "schematicCollections": ["@ionic/angular-toolkit"] + "schematicCollections": [ + "@ionic/angular-toolkit" + ], + "analytics": false }, "schematics": { "@ionic/angular-toolkit:component": { diff --git a/src/app/achievements/achievements.page.html b/src/app/achievements/achievements.page.html new file mode 100644 index 0000000..09f780f --- /dev/null +++ b/src/app/achievements/achievements.page.html @@ -0,0 +1,19 @@ + + + Achievements + + + + +
+ @for (square of squares; track $index) { +
+
+ + +
+
+ } +
+ + diff --git a/src/app/achievements/achievements.page.scss b/src/app/achievements/achievements.page.scss new file mode 100644 index 0000000..692e060 --- /dev/null +++ b/src/app/achievements/achievements.page.scss @@ -0,0 +1,24 @@ +.container { + display: flex; + flex-wrap: wrap; + gap: 16px; // Nastavení mezery mezi čtverci + justify-content: center; +} + +.square { + width: 164px; + height: 121px; + background-color: #598BC8; + border-radius: 10px; + display: flex; + align-items: center; + justify-content: center; +} + +.svg-slot { + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; +} diff --git a/src/app/achievements/achievements.page.spec.ts b/src/app/achievements/achievements.page.spec.ts new file mode 100644 index 0000000..081086c --- /dev/null +++ b/src/app/achievements/achievements.page.spec.ts @@ -0,0 +1,17 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; +import { AchievementsPage } from './achievements.page'; + +describe('AchievementsPage', () => { + let component: AchievementsPage; + let fixture: ComponentFixture; + + beforeEach(() => { + fixture = TestBed.createComponent(AchievementsPage); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/achievements/achievements.page.ts b/src/app/achievements/achievements.page.ts new file mode 100644 index 0000000..e9a91d2 --- /dev/null +++ b/src/app/achievements/achievements.page.ts @@ -0,0 +1,33 @@ +import { Component, OnInit } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { FormsModule } from '@angular/forms'; +import { + IonContent, + IonHeader, + IonTitle, + IonToolbar +} from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-achievements', + templateUrl: './achievements.page.html', + styleUrls: ['./achievements.page.scss'], + standalone: true, + imports: [ + IonContent, + IonHeader, + IonTitle, + IonToolbar, + CommonModule, + FormsModule + ] +}) +export class AchievementsPage implements OnInit { + squares: any[] = Array(20).fill(0); // Vytvoříme pole s 20 čtverci + + constructor() { } + + ngOnInit() { + // Můžeš přidat další logiku, pokud bude potřeba při inicializaci komponenty + } +} diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 9111c49..c4b1c4b 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -17,6 +17,7 @@ export class AppComponent { { title: 'Home', url: '/home', icon: 'mail' }, { title: 'Inbox', url: '/folder/inbox', icon: 'mail' }, { title: 'Outbox', url: '/folder/outbox', icon: 'paper-plane' }, + { title: 'Achievments', url: '/achievements', icon: 'paper-plane' }, { title: 'Favorites', url: '/folder/favorites', icon: 'heart' }, { title: 'Archived', url: '/folder/archived', icon: 'archive' }, { title: 'Trash', url: '/folder/trash', icon: 'trash' }, diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts index 0b1c057..4cb2925 100644 --- a/src/app/app.routes.ts +++ b/src/app/app.routes.ts @@ -15,4 +15,9 @@ export const routes: Routes = [ path: 'home', loadComponent: () => import('./pages/home/home.page').then( m => m.HomePage) }, + { + path: 'achievements', + loadComponent: () => import('./achievements/achievements.page').then( m => m.AchievementsPage) + }, + ]; From 8d84f05c4ee79cde6b5566beab4ed7a3ecb9b467 Mon Sep 17 00:00:00 2001 From: Kernepult1 Date: Wed, 16 Oct 2024 12:26:31 +0200 Subject: [PATCH 02/16] =?UTF-8?q?=C4=8Dtverec=20s=20textem=20complete=20re?= =?UTF-8?q?sponzivn=C3=AD=20=C4=8Dtverce=20s=20textem?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/achievements/achievements.page.html | 23 +++++--- src/app/achievements/achievements.page.scss | 59 +++++++++++++++++---- src/app/achievements/achievements.page.ts | 10 ++++ 3 files changed, 74 insertions(+), 18 deletions(-) diff --git a/src/app/achievements/achievements.page.html b/src/app/achievements/achievements.page.html index 09f780f..373a04c 100644 --- a/src/app/achievements/achievements.page.html +++ b/src/app/achievements/achievements.page.html @@ -6,14 +6,21 @@
- @for (square of squares; track $index) { -
-
- - + +
+ Complete (0%) +
+ + + +
+ @for (square of squares; track $index) { +
+
+
Text for Square {{$index + 1}}
+
-
- } + } +
- diff --git a/src/app/achievements/achievements.page.scss b/src/app/achievements/achievements.page.scss index 692e060..d1baa11 100644 --- a/src/app/achievements/achievements.page.scss +++ b/src/app/achievements/achievements.page.scss @@ -1,18 +1,51 @@ .container { display: flex; - flex-wrap: wrap; - gap: 16px; // Nastavení mezery mezi čtverci - justify-content: center; + flex-direction: column; + align-items: center; /* Horizontální zarovnání velkého čtverce a gridu */ + margin-top: 20px; /* Posun celého obsahu o 5 pixelů dolů */ } -.square { - width: 164px; - height: 121px; - background-color: #598BC8; +.new-square { + width: 324.13px; + height: 86.44px; + background-color: #5B6CB2; border-radius: 10px; - display: flex; - align-items: center; - justify-content: center; + margin-bottom: 16px; /* Mezera mezi velkým čtvercem a gridem */ + display: flex; /* Použijeme flex pro zarovnání textu */ + align-items: center; /* Vertikální zarovnání textu na střed */ + justify-content: center; /* Horizontální zarovnání textu na střed */ + color: white; /* Barva textu, aby byla dobře viditelná */ + font-size: 32px; /* Velikost textu zvětšena na dvojnásobek */ + text-align: center; /* Zarovnání textu na střed */ + padding: 10px; /* Vnitřní okraje pro lepší vzhled */ +} + +.grid-container { + display: grid; + grid-template-columns: repeat(5, 1fr); /* Pět sloupců, flexibilní šířka */ + grid-template-rows: repeat(4, auto); /* Čtyři řady s automatickou výškou */ + gap: 8px; /* Mezera mezi čtverci */ + justify-content: center; /* Horizontální zarovnání gridu */ + width: 100%; /* Celá šířka kontejneru */ + max-width: 800px; /* Maximální šířka pro lepší responsivitu */ + margin: 0 auto; /* Centrum gridu */ +} + +.square { + width: 164px; // Pevná šířka + height: 121px; // Pevná výška + background-color: #598BC8; // Barva pozadí pro jednotlivé čtverce + border-radius: 10px; // Zaoblení rohů + display: flex; // Použijeme flex pro zarovnání obsahu + align-items: center; // Vertikální zarovnání obsahu na střed + justify-content: center; // Horizontální zarovnání obsahu na střed + color: white; // Barva textu + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); // Měkký stín pro efekt + transition: transform 0.3s ease; // Plynulý přechod pro efekt zvětšení + + &:hover { + transform: scale(1.5); // Zvětšení čtverce o 10% při hoveru + } } .svg-slot { @@ -22,3 +55,9 @@ align-items: center; justify-content: center; } + +.square-text { + color: white; /* Barva textu */ + font-size: 32px; /* Velikost textu zvětšena na dvojnásobek */ +} + diff --git a/src/app/achievements/achievements.page.ts b/src/app/achievements/achievements.page.ts index e9a91d2..03e3b08 100644 --- a/src/app/achievements/achievements.page.ts +++ b/src/app/achievements/achievements.page.ts @@ -24,10 +24,20 @@ import { }) export class AchievementsPage implements OnInit { squares: any[] = Array(20).fill(0); // Vytvoříme pole s 20 čtverci + clickedSquare: number | null = null; // Sledování, který čtverec byl kliknut constructor() { } ngOnInit() { // Můžeš přidat další logiku, pokud bude potřeba při inicializaci komponenty } + + toggleText(index: number): void { + // Přepínání mezi zobrazením a skrytím textu + if (this.clickedSquare === index) { + this.clickedSquare = null; // Skryj text, pokud je znovu kliknuto + } else { + this.clickedSquare = index; // Nastav kliknutý čtverec + } + } } From 540adca4f40aad13d383eb45a3c95c4a4d440abb Mon Sep 17 00:00:00 2001 From: Kernepult1 Date: Wed, 16 Oct 2024 12:33:17 +0200 Subject: [PATCH 03/16] =?UTF-8?q?=C4=8Dtverec=20s=20textem=20complete=20re?= =?UTF-8?q?sponzivn=C3=AD=20=C4=8Dtverce=20s=20textem?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/achievements/achievements.page.ts | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/src/app/achievements/achievements.page.ts b/src/app/achievements/achievements.page.ts index 03e3b08..94497c5 100644 --- a/src/app/achievements/achievements.page.ts +++ b/src/app/achievements/achievements.page.ts @@ -1,4 +1,4 @@ -import { Component, OnInit } from '@angular/core'; +import { Component } from '@angular/core'; import { CommonModule } from '@angular/common'; import { FormsModule } from '@angular/forms'; import { @@ -22,15 +22,13 @@ import { FormsModule ] }) -export class AchievementsPage implements OnInit { +export class AchievementsPage { squares: any[] = Array(20).fill(0); // Vytvoříme pole s 20 čtverci clickedSquare: number | null = null; // Sledování, který čtverec byl kliknut constructor() { } - ngOnInit() { - // Můžeš přidat další logiku, pokud bude potřeba při inicializaci komponenty - } + toggleText(index: number): void { // Přepínání mezi zobrazením a skrytím textu From cfcad8d414a089837944293d47ace1c9ae55389b Mon Sep 17 00:00:00 2001 From: Kernepult1 Date: Thu, 17 Oct 2024 14:42:01 +0200 Subject: [PATCH 04/16] =?UTF-8?q?p=C5=99id=C3=A1n=C3=AD=20SVG=20slot=C5=AF?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/achievements/achievements.page.html | 18 +++--- src/app/achievements/achievements.page.scss | 61 ++++++++++----------- src/app/achievements/achievements.page.ts | 44 ++++++++++----- 3 files changed, 69 insertions(+), 54 deletions(-) diff --git a/src/app/achievements/achievements.page.html b/src/app/achievements/achievements.page.html index 373a04c..b38a4af 100644 --- a/src/app/achievements/achievements.page.html +++ b/src/app/achievements/achievements.page.html @@ -8,19 +8,21 @@
- Complete (0%) + Complete (-%)
-
- @for (square of squares; track $index) { -
-
-
Text for Square {{$index + 1}}
-
+
+
+ + SVG Icon
- } +
{{ square.text }}
+
diff --git a/src/app/achievements/achievements.page.scss b/src/app/achievements/achievements.page.scss index d1baa11..1166afa 100644 --- a/src/app/achievements/achievements.page.scss +++ b/src/app/achievements/achievements.page.scss @@ -1,8 +1,8 @@ .container { display: flex; flex-direction: column; - align-items: center; /* Horizontální zarovnání velkého čtverce a gridu */ - margin-top: 20px; /* Posun celého obsahu o 5 pixelů dolů */ + align-items: center; + margin-top: 5px; } .new-square { @@ -10,42 +10,36 @@ height: 86.44px; background-color: #5B6CB2; border-radius: 10px; - margin-bottom: 16px; /* Mezera mezi velkým čtvercem a gridem */ - display: flex; /* Použijeme flex pro zarovnání textu */ - align-items: center; /* Vertikální zarovnání textu na střed */ - justify-content: center; /* Horizontální zarovnání textu na střed */ - color: white; /* Barva textu, aby byla dobře viditelná */ - font-size: 32px; /* Velikost textu zvětšena na dvojnásobek */ - text-align: center; /* Zarovnání textu na střed */ - padding: 10px; /* Vnitřní okraje pro lepší vzhled */ + margin-bottom: 16px; + display: flex; + align-items: center; + justify-content: center; + color: white; } .grid-container { display: grid; - grid-template-columns: repeat(5, 1fr); /* Pět sloupců, flexibilní šířka */ - grid-template-rows: repeat(4, auto); /* Čtyři řady s automatickou výškou */ - gap: 8px; /* Mezera mezi čtverci */ - justify-content: center; /* Horizontální zarovnání gridu */ - width: 100%; /* Celá šířka kontejneru */ - max-width: 800px; /* Maximální šířka pro lepší responsivitu */ - margin: 0 auto; /* Centrum gridu */ + grid-template-columns: repeat(5, 164px); + grid-template-rows: repeat(4, 121px); + gap: 8px; + justify-content: center; } .square { - width: 164px; // Pevná šířka - height: 121px; // Pevná výška - background-color: #598BC8; // Barva pozadí pro jednotlivé čtverce - border-radius: 10px; // Zaoblení rohů - display: flex; // Použijeme flex pro zarovnání obsahu - align-items: center; // Vertikální zarovnání obsahu na střed - justify-content: center; // Horizontální zarovnání obsahu na střed - color: white; // Barva textu - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); // Měkký stín pro efekt - transition: transform 0.3s ease; // Plynulý přechod pro efekt zvětšení + background-color: #598BC8; + border-radius: 10px; + display: flex; + align-items: center; + justify-content: center; + width: 164px; + height: 121px; + cursor: pointer; + transition: transform 0.3s; +} - &:hover { - transform: scale(1.5); // Zvětšení čtverce o 10% při hoveru - } +.square.expanded { + transform: scale(1.2); /* Zvětšení čtverce při kliknutí */ + background-color: #4A76B1; /* Mírná změna barvy pro efekt */ } .svg-slot { @@ -57,7 +51,8 @@ } .square-text { - color: white; /* Barva textu */ - font-size: 32px; /* Velikost textu zvětšena na dvojnásobek */ + color: white; + font-size: 16px; + text-align: center; + font-size: 32px; /* Zvětšeno na dvojnásobek (původně 32px) */ } - diff --git a/src/app/achievements/achievements.page.ts b/src/app/achievements/achievements.page.ts index 94497c5..6ee1fec 100644 --- a/src/app/achievements/achievements.page.ts +++ b/src/app/achievements/achievements.page.ts @@ -1,4 +1,4 @@ -import { Component } from '@angular/core'; +import { Component, OnInit } from '@angular/core'; import { CommonModule } from '@angular/common'; import { FormsModule } from '@angular/forms'; import { @@ -22,20 +22,38 @@ import { FormsModule ] }) -export class AchievementsPage { - squares: any[] = Array(20).fill(0); // Vytvoříme pole s 20 čtverci - clickedSquare: number | null = null; // Sledování, který čtverec byl kliknut - - constructor() { } +export class AchievementsPage implements OnInit { + squares: { svg: string; text: string; expanded: boolean }[] = []; // Přidáme pole s informací, zda je čtverec rozbalený + constructor() {} + ngOnInit() { + // Inicializujeme pole s objekty, které obsahují cestu k SVG, text a stav rozbalení pro každý čtverec + this.squares = [ + { svg: 'assets/svgs/icon1.svg', text: 'Text for Square 1', expanded: false }, + { svg: 'assets/svgs/icon2.svg', text: 'Text for Square 2', expanded: false }, + { svg: 'assets/svgs/icon3.svg', text: 'Text for Square 3', expanded: false }, + { svg: 'assets/svgs/icon4.svg', text: 'Text for Square 4', expanded: false }, + { svg: 'assets/svgs/icon5.svg', text: 'Text for Square 5', expanded: false }, + { svg: 'assets/svgs/icon6.svg', text: 'Text for Square 6', expanded: false }, + { svg: 'assets/svgs/icon7.svg', text: 'Text for Square 7', expanded: false }, + { svg: 'assets/svgs/icon8.svg', text: 'Text for Square 8', expanded: false }, + { svg: 'assets/svgs/icon9.svg', text: 'Text for Square 9', expanded: false }, + { svg: 'assets/svgs/icon10.svg', text: 'Text for Square 10', expanded: false }, + { svg: 'assets/svgs/icon11.svg', text: 'Text for Square 11', expanded: false }, + { svg: 'assets/svgs/icon12.svg', text: 'Text for Square 12', expanded: false }, + { svg: 'assets/svgs/icon13.svg', text: 'Text for Square 13', expanded: false }, + { svg: 'assets/svgs/icon14.svg', text: 'Text for Square 14', expanded: false }, + { svg: 'assets/svgs/icon15.svg', text: 'Text for Square 15', expanded: false }, + { svg: 'assets/svgs/icon16.svg', text: 'Text for Square 16', expanded: false }, + { svg: 'assets/svgs/icon17.svg', text: 'Text for Square 17', expanded: false }, + { svg: 'assets/svgs/icon18.svg', text: 'Text for Square 18', expanded: false }, + { svg: 'assets/svgs/icon19.svg', text: 'Text for Square 19', expanded: false }, + { svg: 'assets/svgs/icon20.svg', text: 'Text for Square 20', expanded: false }, + ]; + } - toggleText(index: number): void { - // Přepínání mezi zobrazením a skrytím textu - if (this.clickedSquare === index) { - this.clickedSquare = null; // Skryj text, pokud je znovu kliknuto - } else { - this.clickedSquare = index; // Nastav kliknutý čtverec - } + toggleText(index: number) { + this.squares[index].expanded = !this.squares[index].expanded; } } From 9b69ac5878485656df1a40d97182bf4159206ff5 Mon Sep 17 00:00:00 2001 From: Kernepult1 Date: Thu, 17 Oct 2024 15:00:11 +0200 Subject: [PATCH 05/16] =?UTF-8?q?p=C5=99id=C3=A1n=C3=AD=20SVG=20slot=C5=AF?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/achievements/achievements.page.ts | 20 +++++++++++++++++--- 1 file changed, 17 insertions(+), 3 deletions(-) diff --git a/src/app/achievements/achievements.page.ts b/src/app/achievements/achievements.page.ts index 6ee1fec..f0e11f4 100644 --- a/src/app/achievements/achievements.page.ts +++ b/src/app/achievements/achievements.page.ts @@ -23,12 +23,13 @@ import { ] }) export class AchievementsPage implements OnInit { - squares: { svg: string; text: string; expanded: boolean }[] = []; // Přidáme pole s informací, zda je čtverec rozbalený + squares: { svg: string; text: string; expanded: boolean }[] = []; + clickedSquare: number | null = null; // Pro sledování kliknutého čtverce constructor() {} ngOnInit() { - // Inicializujeme pole s objekty, které obsahují cestu k SVG, text a stav rozbalení pro každý čtverec + // Inicializace pole s objekty pro každý čtverec this.squares = [ { svg: 'assets/svgs/icon1.svg', text: 'Text for Square 1', expanded: false }, { svg: 'assets/svgs/icon2.svg', text: 'Text for Square 2', expanded: false }, @@ -54,6 +55,19 @@ export class AchievementsPage implements OnInit { } toggleText(index: number) { - this.squares[index].expanded = !this.squares[index].expanded; + // Pokud kliknutý čtverec je stejný jako ten, který byl již kliknutý, zavři ho + if (this.clickedSquare === index) { + this.squares[index].expanded = false; + this.clickedSquare = null; + } else { + // Zavři všechny ostatní čtverce + this.squares.forEach((square, i) => { + square.expanded = false; // Zavři všechny čtverce + }); + + // Otevři aktuálně kliknutý čtverec + this.squares[index].expanded = true; + this.clickedSquare = index; // Ulož index kliknutého čtverce + } } } From 33f91d61cc77ddca948c4663f55d2bb3d7f0ce10 Mon Sep 17 00:00:00 2001 From: Kernepult1 Date: Wed, 30 Oct 2024 18:16:08 +0100 Subject: [PATCH 06/16] added svg --- package-lock.json | 130 +++++++++++++++++--- package.json | 2 +- src/app/achievements/achievements.page.scss | 4 + src/app/achievements/achievements.page.ts | 40 +++--- src/assets/svg/icon1.svg | 4 + src/assets/svg/icon10.svg | 4 + src/assets/svg/icon11.svg | 4 + src/assets/svg/icon12.svg | 6 + src/assets/svg/icon13.svg | 4 + src/assets/svg/icon14.svg | 4 + src/assets/svg/icon15.svg | 4 + src/assets/svg/icon16.svg | 5 + src/assets/svg/icon17.svg | 8 ++ src/assets/svg/icon18.svg | 4 + src/assets/svg/icon19.svg | 9 ++ src/assets/svg/icon2.svg | 4 + src/assets/svg/icon20.svg | 4 + src/assets/svg/icon3.svg | 4 + src/assets/svg/icon4.svg | 4 + src/assets/svg/icon5.svg | 6 + src/assets/svg/icon6.svg | 4 + src/assets/svg/icon7.svg | 4 + src/assets/svg/icon8.svg | 4 + src/assets/svg/icon9.svg | 4 + 24 files changed, 232 insertions(+), 38 deletions(-) create mode 100644 src/assets/svg/icon1.svg create mode 100644 src/assets/svg/icon10.svg create mode 100644 src/assets/svg/icon11.svg create mode 100644 src/assets/svg/icon12.svg create mode 100644 src/assets/svg/icon13.svg create mode 100644 src/assets/svg/icon14.svg create mode 100644 src/assets/svg/icon15.svg create mode 100644 src/assets/svg/icon16.svg create mode 100644 src/assets/svg/icon17.svg create mode 100644 src/assets/svg/icon18.svg create mode 100644 src/assets/svg/icon19.svg create mode 100644 src/assets/svg/icon2.svg create mode 100644 src/assets/svg/icon20.svg create mode 100644 src/assets/svg/icon3.svg create mode 100644 src/assets/svg/icon4.svg create mode 100644 src/assets/svg/icon5.svg create mode 100644 src/assets/svg/icon6.svg create mode 100644 src/assets/svg/icon7.svg create mode 100644 src/assets/svg/icon8.svg create mode 100644 src/assets/svg/icon9.svg diff --git a/package-lock.json b/package-lock.json index 5d672fc..564c59c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -34,7 +34,7 @@ "@angular-eslint/eslint-plugin-template": "^18.0.0", "@angular-eslint/schematics": "^18.0.0", "@angular-eslint/template-parser": "^18.0.0", - "@angular/cli": "^18.0.0", + "@angular/cli": "18.2.10", "@angular/compiler-cli": "^18.0.0", "@angular/language-service": "^18.0.0", "@capacitor/cli": "6.1.2", @@ -265,12 +265,12 @@ } }, "node_modules/@angular-devkit/schematics": { - "version": "18.2.7", - "resolved": "https://registry.npmjs.org/@angular-devkit/schematics/-/schematics-18.2.7.tgz", - "integrity": "sha512-j7198lpkOXMG+Gyfln/5aDgBZV7m4pWMzHFhkO3+w3cbCNUN1TVZW0SyJcF+CYaxANzTbuumfvpsYc/fTeAGLw==", + "version": "18.2.10", + "resolved": "https://registry.npmjs.org/@angular-devkit/schematics/-/schematics-18.2.10.tgz", + "integrity": "sha512-EIm/yCYg3ZYPsPYJxXRX5F6PofJCbNQ5rZEuQEY09vy+ZRTqGezH0qoUP5WxlYeJrjiRLYqADI9WtVNzDyaD4w==", "dev": true, "dependencies": { - "@angular-devkit/core": "18.2.7", + "@angular-devkit/core": "18.2.10", "jsonc-parser": "3.3.1", "magic-string": "0.30.11", "ora": "5.4.1", @@ -282,6 +282,33 @@ "yarn": ">= 1.13.0" } }, + "node_modules/@angular-devkit/schematics/node_modules/@angular-devkit/core": { + "version": "18.2.10", + "resolved": "https://registry.npmjs.org/@angular-devkit/core/-/core-18.2.10.tgz", + "integrity": "sha512-LFqiNdraBujg8e1lhuB0bkFVAoIbVbeXXwfoeROKH60OPbP8tHdgV6sFTqU7UGBKA+b+bYye70KFTG2Ys8QzKQ==", + "dev": true, + "dependencies": { + "ajv": "8.17.1", + "ajv-formats": "3.0.1", + "jsonc-parser": "3.3.1", + "picomatch": "4.0.2", + "rxjs": "7.8.1", + "source-map": "0.7.4" + }, + "engines": { + "node": "^18.19.1 || ^20.11.1 || >=22.0.0", + "npm": "^6.11.0 || ^7.5.6 || >=8.0.0", + "yarn": ">= 1.13.0" + }, + "peerDependencies": { + "chokidar": "^3.5.2" + }, + "peerDependenciesMeta": { + "chokidar": { + "optional": true + } + } + }, "node_modules/@angular-eslint/builder": { "version": "18.3.1", "resolved": "https://registry.npmjs.org/@angular-eslint/builder/-/builder-18.3.1.tgz", @@ -458,17 +485,17 @@ } }, "node_modules/@angular/cli": { - "version": "18.2.7", - "resolved": "https://registry.npmjs.org/@angular/cli/-/cli-18.2.7.tgz", - "integrity": "sha512-KoWgSvhRsU05A2m6B7jw1kdpyoS+Ce5GGLW6xcnX7VF2AckW54vYd/8ZkgpzQrKfvIpVblYd4KJGizKoaLZ5jA==", + "version": "18.2.10", + "resolved": "https://registry.npmjs.org/@angular/cli/-/cli-18.2.10.tgz", + "integrity": "sha512-qW/F3XVZMzzenFzbn+7FGpw8GOt9qW8UxBtYya7gUNdWlcsgGUk+ZaGC2OLbfI5gX6pchW4TOPMsDSMeaCEI2Q==", "dev": true, "dependencies": { - "@angular-devkit/architect": "0.1802.7", - "@angular-devkit/core": "18.2.7", - "@angular-devkit/schematics": "18.2.7", + "@angular-devkit/architect": "0.1802.10", + "@angular-devkit/core": "18.2.10", + "@angular-devkit/schematics": "18.2.10", "@inquirer/prompts": "5.3.8", "@listr2/prompt-adapter-inquirer": "2.0.15", - "@schematics/angular": "18.2.7", + "@schematics/angular": "18.2.10", "@yarnpkg/lockfile": "1.1.0", "ini": "4.1.3", "jsonc-parser": "3.3.1", @@ -490,6 +517,48 @@ "yarn": ">= 1.13.0" } }, + "node_modules/@angular/cli/node_modules/@angular-devkit/architect": { + "version": "0.1802.10", + "resolved": "https://registry.npmjs.org/@angular-devkit/architect/-/architect-0.1802.10.tgz", + "integrity": "sha512-/xudcHK2s4J/GcL6qyobmGaWMHQcYLSMqCaWMT+nK6I6tu9VEAj/p3R83Tzx8B/eKi31Pz499uHw9pmqdtbafg==", + "dev": true, + "dependencies": { + "@angular-devkit/core": "18.2.10", + "rxjs": "7.8.1" + }, + "engines": { + "node": "^18.19.1 || ^20.11.1 || >=22.0.0", + "npm": "^6.11.0 || ^7.5.6 || >=8.0.0", + "yarn": ">= 1.13.0" + } + }, + "node_modules/@angular/cli/node_modules/@angular-devkit/core": { + "version": "18.2.10", + "resolved": "https://registry.npmjs.org/@angular-devkit/core/-/core-18.2.10.tgz", + "integrity": "sha512-LFqiNdraBujg8e1lhuB0bkFVAoIbVbeXXwfoeROKH60OPbP8tHdgV6sFTqU7UGBKA+b+bYye70KFTG2Ys8QzKQ==", + "dev": true, + "dependencies": { + "ajv": "8.17.1", + "ajv-formats": "3.0.1", + "jsonc-parser": "3.3.1", + "picomatch": "4.0.2", + "rxjs": "7.8.1", + "source-map": "0.7.4" + }, + "engines": { + "node": "^18.19.1 || ^20.11.1 || >=22.0.0", + "npm": "^6.11.0 || ^7.5.6 || >=8.0.0", + "yarn": ">= 1.13.0" + }, + "peerDependencies": { + "chokidar": "^3.5.2" + }, + "peerDependenciesMeta": { + "chokidar": { + "optional": true + } + } + }, "node_modules/@angular/common": { "version": "18.2.7", "resolved": "https://registry.npmjs.org/@angular/common/-/common-18.2.7.tgz", @@ -5056,13 +5125,13 @@ "dev": true }, "node_modules/@schematics/angular": { - "version": "18.2.7", - "resolved": "https://registry.npmjs.org/@schematics/angular/-/angular-18.2.7.tgz", - "integrity": "sha512-WOBzO11qstznHbC9tZXQf6/8+PqmaRI6QYcdTspqXNh9q9nNglvi43Xn4tSIpEhW8aSHea9hgWZV8sG+i/4W9Q==", + "version": "18.2.10", + "resolved": "https://registry.npmjs.org/@schematics/angular/-/angular-18.2.10.tgz", + "integrity": "sha512-2pDHT4aSzfs8Up4RQmHHuFd5FeuUebS1ZJwyt46MfXzRMFtzUZV/JKsIvDqyMwnkvFfLvgJyTCkl8JGw5jQObg==", "dev": true, "dependencies": { - "@angular-devkit/core": "18.2.7", - "@angular-devkit/schematics": "18.2.7", + "@angular-devkit/core": "18.2.10", + "@angular-devkit/schematics": "18.2.10", "jsonc-parser": "3.3.1" }, "engines": { @@ -5071,6 +5140,33 @@ "yarn": ">= 1.13.0" } }, + "node_modules/@schematics/angular/node_modules/@angular-devkit/core": { + "version": "18.2.10", + "resolved": "https://registry.npmjs.org/@angular-devkit/core/-/core-18.2.10.tgz", + "integrity": "sha512-LFqiNdraBujg8e1lhuB0bkFVAoIbVbeXXwfoeROKH60OPbP8tHdgV6sFTqU7UGBKA+b+bYye70KFTG2Ys8QzKQ==", + "dev": true, + "dependencies": { + "ajv": "8.17.1", + "ajv-formats": "3.0.1", + "jsonc-parser": "3.3.1", + "picomatch": "4.0.2", + "rxjs": "7.8.1", + "source-map": "0.7.4" + }, + "engines": { + "node": "^18.19.1 || ^20.11.1 || >=22.0.0", + "npm": "^6.11.0 || ^7.5.6 || >=8.0.0", + "yarn": ">= 1.13.0" + }, + "peerDependencies": { + "chokidar": "^3.5.2" + }, + "peerDependenciesMeta": { + "chokidar": { + "optional": true + } + } + }, "node_modules/@sigstore/bundle": { "version": "2.3.2", "resolved": "https://registry.npmjs.org/@sigstore/bundle/-/bundle-2.3.2.tgz", diff --git a/package.json b/package.json index 04ac038..8f3da1c 100644 --- a/package.json +++ b/package.json @@ -39,7 +39,7 @@ "@angular-eslint/eslint-plugin-template": "^18.0.0", "@angular-eslint/schematics": "^18.0.0", "@angular-eslint/template-parser": "^18.0.0", - "@angular/cli": "^18.0.0", + "@angular/cli": "18.2.10", "@angular/compiler-cli": "^18.0.0", "@angular/language-service": "^18.0.0", "@capacitor/cli": "6.1.2", diff --git a/src/app/achievements/achievements.page.scss b/src/app/achievements/achievements.page.scss index 1166afa..8c83a95 100644 --- a/src/app/achievements/achievements.page.scss +++ b/src/app/achievements/achievements.page.scss @@ -56,3 +56,7 @@ text-align: center; font-size: 32px; /* Zvětšeno na dvojnásobek (původně 32px) */ } +.svg-slot img { + width: 50px; /* Nastavte požadovanou šířku */ + height: 50px; /* Nastavte požadovanou výšku */ +} diff --git a/src/app/achievements/achievements.page.ts b/src/app/achievements/achievements.page.ts index f0e11f4..7ff8d04 100644 --- a/src/app/achievements/achievements.page.ts +++ b/src/app/achievements/achievements.page.ts @@ -31,26 +31,26 @@ export class AchievementsPage implements OnInit { ngOnInit() { // Inicializace pole s objekty pro každý čtverec this.squares = [ - { svg: 'assets/svgs/icon1.svg', text: 'Text for Square 1', expanded: false }, - { svg: 'assets/svgs/icon2.svg', text: 'Text for Square 2', expanded: false }, - { svg: 'assets/svgs/icon3.svg', text: 'Text for Square 3', expanded: false }, - { svg: 'assets/svgs/icon4.svg', text: 'Text for Square 4', expanded: false }, - { svg: 'assets/svgs/icon5.svg', text: 'Text for Square 5', expanded: false }, - { svg: 'assets/svgs/icon6.svg', text: 'Text for Square 6', expanded: false }, - { svg: 'assets/svgs/icon7.svg', text: 'Text for Square 7', expanded: false }, - { svg: 'assets/svgs/icon8.svg', text: 'Text for Square 8', expanded: false }, - { svg: 'assets/svgs/icon9.svg', text: 'Text for Square 9', expanded: false }, - { svg: 'assets/svgs/icon10.svg', text: 'Text for Square 10', expanded: false }, - { svg: 'assets/svgs/icon11.svg', text: 'Text for Square 11', expanded: false }, - { svg: 'assets/svgs/icon12.svg', text: 'Text for Square 12', expanded: false }, - { svg: 'assets/svgs/icon13.svg', text: 'Text for Square 13', expanded: false }, - { svg: 'assets/svgs/icon14.svg', text: 'Text for Square 14', expanded: false }, - { svg: 'assets/svgs/icon15.svg', text: 'Text for Square 15', expanded: false }, - { svg: 'assets/svgs/icon16.svg', text: 'Text for Square 16', expanded: false }, - { svg: 'assets/svgs/icon17.svg', text: 'Text for Square 17', expanded: false }, - { svg: 'assets/svgs/icon18.svg', text: 'Text for Square 18', expanded: false }, - { svg: 'assets/svgs/icon19.svg', text: 'Text for Square 19', expanded: false }, - { svg: 'assets/svgs/icon20.svg', text: 'Text for Square 20', expanded: false }, + { svg: 'assets/svg/icon1.svg', text: 'Text for Square 1', expanded: false }, + { svg: 'assets/svg/icon2.svg', text: 'Text for Square 2', expanded: false }, + { svg: 'assets/svg/icon3.svg', text: 'Text for Square 3', expanded: false }, + { svg: 'assets/svg/icon4.svg', text: 'Text for Square 4', expanded: false }, + { svg: 'assets/svg/icon5.svg', text: 'Text for Square 5', expanded: false }, + { svg: 'assets/svg/icon6.svg', text: 'Text for Square 6', expanded: false }, + { svg: 'assets/svg/icon7.svg', text: 'Text for Square 7', expanded: false }, + { svg: 'assets/svg/icon8.svg', text: 'Text for Square 8', expanded: false }, + { svg: 'assets/svg/icon9.svg', text: 'Text for Square 9', expanded: false }, + { svg: 'assets/svg/icon10.svg', text: 'Text for Square 10', expanded: false }, + { svg: 'assets/svg/icon11.svg', text: 'Text for Square 11', expanded: false }, + { svg: 'assets/svg/icon12.svg', text: 'Text for Square 12', expanded: false }, + { svg: 'assets/svg/icon13.svg', text: 'Text for Square 13', expanded: false }, + { svg: 'assets/svg/icon14.svg', text: 'Text for Square 14', expanded: false }, + { svg: 'assets/svg/icon15.svg', text: 'Text for Square 15', expanded: false }, + { svg: 'assets/svg/icon16.svg', text: 'Text for Square 16', expanded: false }, + { svg: 'assets/svg/icon17.svg', text: 'Text for Square 17', expanded: false }, + { svg: 'assets/svg/icon18.svg', text: 'Text for Square 18', expanded: false }, + { svg: 'assets/svg/icon19.svg', text: 'Text for Square 19', expanded: false }, + { svg: 'assets/svg/icon20.svg', text: 'Text for Square 20', expanded: false }, ]; } diff --git a/src/assets/svg/icon1.svg b/src/assets/svg/icon1.svg new file mode 100644 index 0000000..4ade7a8 --- /dev/null +++ b/src/assets/svg/icon1.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/src/assets/svg/icon10.svg b/src/assets/svg/icon10.svg new file mode 100644 index 0000000..26e0468 --- /dev/null +++ b/src/assets/svg/icon10.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/src/assets/svg/icon11.svg b/src/assets/svg/icon11.svg new file mode 100644 index 0000000..fa11020 --- /dev/null +++ b/src/assets/svg/icon11.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/src/assets/svg/icon12.svg b/src/assets/svg/icon12.svg new file mode 100644 index 0000000..660a46a --- /dev/null +++ b/src/assets/svg/icon12.svg @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/src/assets/svg/icon13.svg b/src/assets/svg/icon13.svg new file mode 100644 index 0000000..e1b2e96 --- /dev/null +++ b/src/assets/svg/icon13.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/src/assets/svg/icon14.svg b/src/assets/svg/icon14.svg new file mode 100644 index 0000000..899b87e --- /dev/null +++ b/src/assets/svg/icon14.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/src/assets/svg/icon15.svg b/src/assets/svg/icon15.svg new file mode 100644 index 0000000..4db3020 --- /dev/null +++ b/src/assets/svg/icon15.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/src/assets/svg/icon16.svg b/src/assets/svg/icon16.svg new file mode 100644 index 0000000..0bbac7a --- /dev/null +++ b/src/assets/svg/icon16.svg @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/src/assets/svg/icon17.svg b/src/assets/svg/icon17.svg new file mode 100644 index 0000000..765bcbe --- /dev/null +++ b/src/assets/svg/icon17.svg @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/src/assets/svg/icon18.svg b/src/assets/svg/icon18.svg new file mode 100644 index 0000000..166e10a --- /dev/null +++ b/src/assets/svg/icon18.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/src/assets/svg/icon19.svg b/src/assets/svg/icon19.svg new file mode 100644 index 0000000..cc2a854 --- /dev/null +++ b/src/assets/svg/icon19.svg @@ -0,0 +1,9 @@ + + + + + + + + + \ No newline at end of file diff --git a/src/assets/svg/icon2.svg b/src/assets/svg/icon2.svg new file mode 100644 index 0000000..1a9dfcb --- /dev/null +++ b/src/assets/svg/icon2.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/src/assets/svg/icon20.svg b/src/assets/svg/icon20.svg new file mode 100644 index 0000000..dc8440e --- /dev/null +++ b/src/assets/svg/icon20.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/src/assets/svg/icon3.svg b/src/assets/svg/icon3.svg new file mode 100644 index 0000000..737d4c3 --- /dev/null +++ b/src/assets/svg/icon3.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/src/assets/svg/icon4.svg b/src/assets/svg/icon4.svg new file mode 100644 index 0000000..3ceddf5 --- /dev/null +++ b/src/assets/svg/icon4.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/src/assets/svg/icon5.svg b/src/assets/svg/icon5.svg new file mode 100644 index 0000000..94b503d --- /dev/null +++ b/src/assets/svg/icon5.svg @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/src/assets/svg/icon6.svg b/src/assets/svg/icon6.svg new file mode 100644 index 0000000..43456a1 --- /dev/null +++ b/src/assets/svg/icon6.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/src/assets/svg/icon7.svg b/src/assets/svg/icon7.svg new file mode 100644 index 0000000..0293dea --- /dev/null +++ b/src/assets/svg/icon7.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/src/assets/svg/icon8.svg b/src/assets/svg/icon8.svg new file mode 100644 index 0000000..767248d --- /dev/null +++ b/src/assets/svg/icon8.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/src/assets/svg/icon9.svg b/src/assets/svg/icon9.svg new file mode 100644 index 0000000..2af68dd --- /dev/null +++ b/src/assets/svg/icon9.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file From 65f01ab06c3c18f552bdfdf3a18b9ce5ed391bb3 Mon Sep 17 00:00:00 2001 From: Kernepult1 Date: Tue, 5 Nov 2024 11:12:33 +0100 Subject: [PATCH 07/16] 5.11 addded text to svg --- src/app/achievements/achievements.page.html | 13 ++++-- src/app/achievements/achievements.page.scss | 14 ++++++- src/app/achievements/achievements.page.ts | 46 +++++++++++---------- 3 files changed, 45 insertions(+), 28 deletions(-) diff --git a/src/app/achievements/achievements.page.html b/src/app/achievements/achievements.page.html index b38a4af..4b05abf 100644 --- a/src/app/achievements/achievements.page.html +++ b/src/app/achievements/achievements.page.html @@ -6,22 +6,27 @@
- +
Complete (-%)
- +
- + SVG Icon
-
{{ square.text }}
+ + +
+
{{ square.title }}
+
{{ square.text }}
+
diff --git a/src/app/achievements/achievements.page.scss b/src/app/achievements/achievements.page.scss index 8c83a95..3fa60bc 100644 --- a/src/app/achievements/achievements.page.scss +++ b/src/app/achievements/achievements.page.scss @@ -36,9 +36,12 @@ cursor: pointer; transition: transform 0.3s; } +.new-square .square-text { + font-size: 38px; +} .square.expanded { - transform: scale(1.2); /* Zvětšení čtverce při kliknutí */ + transform: scale(1.5); /* Zvětšení čtverce při kliknutí */ background-color: #4A76B1; /* Mírná změna barvy pro efekt */ } @@ -49,12 +52,19 @@ align-items: center; justify-content: center; } +.square-title { + font-size: 20px; /* Adjust as needed */ + font-weight: bold; + color: white; + text-align: center; + margin-bottom: 5px; +} .square-text { color: white; font-size: 16px; text-align: center; - font-size: 32px; /* Zvětšeno na dvojnásobek (původně 32px) */ + font-size: 18px; /* Zvětšeno na dvojnásobek (původně 32px) */ } .svg-slot img { width: 50px; /* Nastavte požadovanou šířku */ diff --git a/src/app/achievements/achievements.page.ts b/src/app/achievements/achievements.page.ts index 7ff8d04..05dc33c 100644 --- a/src/app/achievements/achievements.page.ts +++ b/src/app/achievements/achievements.page.ts @@ -23,7 +23,9 @@ import { ] }) export class AchievementsPage implements OnInit { - squares: { svg: string; text: string; expanded: boolean }[] = []; + squares: { + title: string; + svg: string; text: string; expanded: boolean }[] = []; clickedSquare: number | null = null; // Pro sledování kliknutého čtverce constructor() {} @@ -31,27 +33,27 @@ export class AchievementsPage implements OnInit { ngOnInit() { // Inicializace pole s objekty pro každý čtverec this.squares = [ - { svg: 'assets/svg/icon1.svg', text: 'Text for Square 1', expanded: false }, - { svg: 'assets/svg/icon2.svg', text: 'Text for Square 2', expanded: false }, - { svg: 'assets/svg/icon3.svg', text: 'Text for Square 3', expanded: false }, - { svg: 'assets/svg/icon4.svg', text: 'Text for Square 4', expanded: false }, - { svg: 'assets/svg/icon5.svg', text: 'Text for Square 5', expanded: false }, - { svg: 'assets/svg/icon6.svg', text: 'Text for Square 6', expanded: false }, - { svg: 'assets/svg/icon7.svg', text: 'Text for Square 7', expanded: false }, - { svg: 'assets/svg/icon8.svg', text: 'Text for Square 8', expanded: false }, - { svg: 'assets/svg/icon9.svg', text: 'Text for Square 9', expanded: false }, - { svg: 'assets/svg/icon10.svg', text: 'Text for Square 10', expanded: false }, - { svg: 'assets/svg/icon11.svg', text: 'Text for Square 11', expanded: false }, - { svg: 'assets/svg/icon12.svg', text: 'Text for Square 12', expanded: false }, - { svg: 'assets/svg/icon13.svg', text: 'Text for Square 13', expanded: false }, - { svg: 'assets/svg/icon14.svg', text: 'Text for Square 14', expanded: false }, - { svg: 'assets/svg/icon15.svg', text: 'Text for Square 15', expanded: false }, - { svg: 'assets/svg/icon16.svg', text: 'Text for Square 16', expanded: false }, - { svg: 'assets/svg/icon17.svg', text: 'Text for Square 17', expanded: false }, - { svg: 'assets/svg/icon18.svg', text: 'Text for Square 18', expanded: false }, - { svg: 'assets/svg/icon19.svg', text: 'Text for Square 19', expanded: false }, - { svg: 'assets/svg/icon20.svg', text: 'Text for Square 20', expanded: false }, - ]; + { svg: 'assets/svg/icon1.svg', title: 'Game Winner', text: 'Win the game', expanded: false }, + { svg: 'assets/svg/icon2.svg', title: 'Field Stealer', text: 'Steal your opponent\'s field', expanded: false }, + { svg: 'assets/svg/icon3.svg', title: 'Blank Field Conqueror', text: 'Acquire blank field', expanded: false }, + { svg: 'assets/svg/icon4.svg', title: 'Five-Time Winner', text: 'Win 5 games in a row', expanded: false }, + { svg: 'assets/svg/icon5.svg', title: 'Opponent Destroyer', text: 'Destroy your opponent', expanded: false }, + { svg: 'assets/svg/icon6.svg', title: 'Row Master', text: 'Acquire 10 fields in a row', expanded: false }, + { svg: 'assets/svg/icon7.svg', title: 'Veteran Winner', text: 'Win 25 games', expanded: false }, + { svg: 'assets/svg/icon8.svg', title: 'Top Answerer', text: 'Most questions answered', expanded: false }, + { svg: 'assets/svg/icon9.svg', title: 'Center Conqueror', text: 'Acquire center of the map', expanded: false }, + { svg: 'assets/svg/icon10.svg', title: 'Field Collector', text: 'Acquire 500 fields', expanded: false }, + { svg: 'assets/svg/icon11.svg', title: 'Champion', text: 'Became best player 10 times', expanded: false }, + { svg: 'assets/svg/icon12.svg', title: 'Mystery Gift', text: 'Acquire mystery gift', expanded: false }, + { svg: 'assets/svg/icon13.svg', title: 'Ultimate Winner', text: 'Win 100 games', expanded: false }, + { svg: 'assets/svg/icon14.svg', title: 'Silent Genius', text: 'Nobody answered your question', expanded: false }, + { svg: 'assets/svg/icon15.svg', title: 'Mountain Conqueror', text: 'Acquire all mountains', expanded: false }, + { svg: 'assets/svg/icon16.svg', title: '???', text: 'Nobody knows how to achieve it', expanded: false }, + { svg: 'assets/svg/icon17.svg', title: 'Question Master', text: 'Create 100 questions', expanded: false }, + { svg: 'assets/svg/icon18.svg', title: 'Field Protector', text: 'Protect your field', expanded: false }, + { svg: 'assets/svg/icon19.svg', title: 'Map Controller', text: 'Control the whole map', expanded: false }, + { svg: 'assets/svg/icon20.svg', title: 'Achievement Completer', text: 'Complete all achievements', expanded: false }, + ]; } toggleText(index: number) { From 6deee0deec50293099a9853bdf3c147d517d6f01 Mon Sep 17 00:00:00 2001 From: Kernepult1 Date: Thu, 7 Nov 2024 15:05:56 +0100 Subject: [PATCH 08/16] 7.11 adding an outline to a square --- src/app/achievements/achievements.page.scss | 55 ++++++++++++++------- src/app/achievements/achievements.page.ts | 12 ++--- 2 files changed, 44 insertions(+), 23 deletions(-) diff --git a/src/app/achievements/achievements.page.scss b/src/app/achievements/achievements.page.scss index 3fa60bc..0a9f394 100644 --- a/src/app/achievements/achievements.page.scss +++ b/src/app/achievements/achievements.page.scss @@ -8,13 +8,17 @@ .new-square { width: 324.13px; height: 86.44px; - background-color: #5B6CB2; + background-color: var(--ion-color-secondary); border-radius: 10px; margin-bottom: 16px; display: flex; align-items: center; justify-content: center; - color: white; + color: var(--ion-color-secondary-contrast); +} + +.new-square .square-text { + font-size: 38px; } .grid-container { @@ -26,7 +30,8 @@ } .square { - background-color: #598BC8; + position: relative; /* Pro pseudo-element */ + background-color: var(--ion-color-primary); border-radius: 10px; display: flex; align-items: center; @@ -34,15 +39,26 @@ width: 164px; height: 121px; cursor: pointer; - transition: transform 0.3s; -} -.new-square .square-text { - font-size: 38px; + transition: transform 0.3s, background-color 0.3s; + z-index: 1; /* Běžný čtverec má základní prioritu */ } .square.expanded { transform: scale(1.5); /* Zvětšení čtverce při kliknutí */ - background-color: #4A76B1; /* Mírná změna barvy pro efekt */ + background-color: var(--ion-color-secondary); /* Vnější barva (výplň) */ + z-index: 10; /* Zajišťuje, že rozšířený čtverec bude nad ostatními */ +} + +.square.expanded::before { + content: ''; + position: absolute; + top: 5%; + left: 5%; + width: 90%; + height: 90%; + background-color: var(--ion-color-primary); /* Vnitřní barva (cesta) */ + border-radius: 5px; /* Zachování zaoblení */ + z-index: 0; /* Pseudo-element je pod textem a ikony */ } .svg-slot { @@ -52,21 +68,26 @@ align-items: center; justify-content: center; } + +.svg-slot img { + width: 50px; + height: 50px; +} + .square-title { - font-size: 20px; /* Adjust as needed */ + font-size: 18px; font-weight: bold; - color: white; + color: var(--ion-color-secondary-contrast); text-align: center; margin-bottom: 5px; + position: relative; /* Zajištění, že text zůstane nad pseudo-elementem */ + z-index: 2; /* Text bude nad pseudo-elementem */ } .square-text { - color: white; - font-size: 16px; + color: var(--ion-color-secondary-contrast); + font-size: 15px; text-align: center; - font-size: 18px; /* Zvětšeno na dvojnásobek (původně 32px) */ -} -.svg-slot img { - width: 50px; /* Nastavte požadovanou šířku */ - height: 50px; /* Nastavte požadovanou výšku */ + position: relative; /* Zajištění viditelnosti nad pseudo-elementem */ + z-index: 2; /* Text bude nad pseudo-elementem */ } diff --git a/src/app/achievements/achievements.page.ts b/src/app/achievements/achievements.page.ts index 05dc33c..155d798 100644 --- a/src/app/achievements/achievements.page.ts +++ b/src/app/achievements/achievements.page.ts @@ -35,9 +35,9 @@ export class AchievementsPage implements OnInit { this.squares = [ { svg: 'assets/svg/icon1.svg', title: 'Game Winner', text: 'Win the game', expanded: false }, { svg: 'assets/svg/icon2.svg', title: 'Field Stealer', text: 'Steal your opponent\'s field', expanded: false }, - { svg: 'assets/svg/icon3.svg', title: 'Blank Field Conqueror', text: 'Acquire blank field', expanded: false }, - { svg: 'assets/svg/icon4.svg', title: 'Five-Time Winner', text: 'Win 5 games in a row', expanded: false }, - { svg: 'assets/svg/icon5.svg', title: 'Opponent Destroyer', text: 'Destroy your opponent', expanded: false }, + { svg: 'assets/svg/icon3.svg', title: 'Field Conqueror', text: 'Acquire blank field', expanded: false }, + { svg: 'assets/svg/icon4.svg', title: 'Master', text: 'Win 5 games in a row', expanded: false }, + { svg: 'assets/svg/icon5.svg', title: 'Destroyer', text: 'Steal from your opponents 50 times ', expanded: false }, { svg: 'assets/svg/icon6.svg', title: 'Row Master', text: 'Acquire 10 fields in a row', expanded: false }, { svg: 'assets/svg/icon7.svg', title: 'Veteran Winner', text: 'Win 25 games', expanded: false }, { svg: 'assets/svg/icon8.svg', title: 'Top Answerer', text: 'Most questions answered', expanded: false }, @@ -46,13 +46,13 @@ export class AchievementsPage implements OnInit { { svg: 'assets/svg/icon11.svg', title: 'Champion', text: 'Became best player 10 times', expanded: false }, { svg: 'assets/svg/icon12.svg', title: 'Mystery Gift', text: 'Acquire mystery gift', expanded: false }, { svg: 'assets/svg/icon13.svg', title: 'Ultimate Winner', text: 'Win 100 games', expanded: false }, - { svg: 'assets/svg/icon14.svg', title: 'Silent Genius', text: 'Nobody answered your question', expanded: false }, + { svg: 'assets/svg/icon14.svg', title: 'Silent Genius', text: 'All question answered', expanded: false }, { svg: 'assets/svg/icon15.svg', title: 'Mountain Conqueror', text: 'Acquire all mountains', expanded: false }, { svg: 'assets/svg/icon16.svg', title: '???', text: 'Nobody knows how to achieve it', expanded: false }, { svg: 'assets/svg/icon17.svg', title: 'Question Master', text: 'Create 100 questions', expanded: false }, { svg: 'assets/svg/icon18.svg', title: 'Field Protector', text: 'Protect your field', expanded: false }, - { svg: 'assets/svg/icon19.svg', title: 'Map Controller', text: 'Control the whole map', expanded: false }, - { svg: 'assets/svg/icon20.svg', title: 'Achievement Completer', text: 'Complete all achievements', expanded: false }, + { svg: 'assets/svg/icon19.svg', title: 'Defender', text: 'Protect your field 500 times', expanded: false }, + { svg: 'assets/svg/icon20.svg', title: 'Complete', text: 'Complete all achievements', expanded: false }, ]; } From 1dc1685a878e438c3db91837876d5ecdbb2ac5e9 Mon Sep 17 00:00:00 2001 From: Kernepult1 Date: Thu, 7 Nov 2024 15:10:36 +0100 Subject: [PATCH 09/16] 7.11 added comments --- src/app/achievements/achievements.page.scss | 24 ++++----- src/app/achievements/achievements.page.ts | 56 ++++++++++----------- 2 files changed, 40 insertions(+), 40 deletions(-) diff --git a/src/app/achievements/achievements.page.scss b/src/app/achievements/achievements.page.scss index 0a9f394..314e560 100644 --- a/src/app/achievements/achievements.page.scss +++ b/src/app/achievements/achievements.page.scss @@ -30,7 +30,7 @@ } .square { - position: relative; /* Pro pseudo-element */ + position: relative; /* For the pseudo-element */ background-color: var(--ion-color-primary); border-radius: 10px; display: flex; @@ -40,13 +40,13 @@ height: 121px; cursor: pointer; transition: transform 0.3s, background-color 0.3s; - z-index: 1; /* Běžný čtverec má základní prioritu */ + z-index: 1; /* Normal square has basic priority */ } .square.expanded { - transform: scale(1.5); /* Zvětšení čtverce při kliknutí */ - background-color: var(--ion-color-secondary); /* Vnější barva (výplň) */ - z-index: 10; /* Zajišťuje, že rozšířený čtverec bude nad ostatními */ + transform: scale(1.5); /* Enlarges the square on click */ + background-color: var(--ion-color-secondary); /* Outer color (fill) */ + z-index: 10; /* Ensures the expanded square is above the others */ } .square.expanded::before { @@ -56,9 +56,9 @@ left: 5%; width: 90%; height: 90%; - background-color: var(--ion-color-primary); /* Vnitřní barva (cesta) */ - border-radius: 5px; /* Zachování zaoblení */ - z-index: 0; /* Pseudo-element je pod textem a ikony */ + background-color: var(--ion-color-primary); /* Inner color (path) */ + border-radius: 5px; /* Maintains rounding */ + z-index: 0; /* The pseudo-element is below text and icons */ } .svg-slot { @@ -80,14 +80,14 @@ color: var(--ion-color-secondary-contrast); text-align: center; margin-bottom: 5px; - position: relative; /* Zajištění, že text zůstane nad pseudo-elementem */ - z-index: 2; /* Text bude nad pseudo-elementem */ + position: relative; /* Ensures the text stays above the pseudo-element */ + z-index: 2; /* Text will be above the pseudo-element */ } .square-text { color: var(--ion-color-secondary-contrast); font-size: 15px; text-align: center; - position: relative; /* Zajištění viditelnosti nad pseudo-elementem */ - z-index: 2; /* Text bude nad pseudo-elementem */ + position: relative; /* Ensures visibility above the pseudo-element */ + z-index: 2; /* Text will be above the pseudo-element */ } diff --git a/src/app/achievements/achievements.page.ts b/src/app/achievements/achievements.page.ts index 155d798..f10ca67 100644 --- a/src/app/achievements/achievements.page.ts +++ b/src/app/achievements/achievements.page.ts @@ -26,50 +26,50 @@ export class AchievementsPage implements OnInit { squares: { title: string; svg: string; text: string; expanded: boolean }[] = []; - clickedSquare: number | null = null; // Pro sledování kliknutého čtverce + clickedSquare: number | null = null; // To track the clicked square constructor() {} ngOnInit() { - // Inicializace pole s objekty pro každý čtverec + // Initialize the array with objects for each square this.squares = [ - { svg: 'assets/svg/icon1.svg', title: 'Game Winner', text: 'Win the game', expanded: false }, - { svg: 'assets/svg/icon2.svg', title: 'Field Stealer', text: 'Steal your opponent\'s field', expanded: false }, - { svg: 'assets/svg/icon3.svg', title: 'Field Conqueror', text: 'Acquire blank field', expanded: false }, - { svg: 'assets/svg/icon4.svg', title: 'Master', text: 'Win 5 games in a row', expanded: false }, - { svg: 'assets/svg/icon5.svg', title: 'Destroyer', text: 'Steal from your opponents 50 times ', expanded: false }, - { svg: 'assets/svg/icon6.svg', title: 'Row Master', text: 'Acquire 10 fields in a row', expanded: false }, - { svg: 'assets/svg/icon7.svg', title: 'Veteran Winner', text: 'Win 25 games', expanded: false }, - { svg: 'assets/svg/icon8.svg', title: 'Top Answerer', text: 'Most questions answered', expanded: false }, - { svg: 'assets/svg/icon9.svg', title: 'Center Conqueror', text: 'Acquire center of the map', expanded: false }, - { svg: 'assets/svg/icon10.svg', title: 'Field Collector', text: 'Acquire 500 fields', expanded: false }, - { svg: 'assets/svg/icon11.svg', title: 'Champion', text: 'Became best player 10 times', expanded: false }, - { svg: 'assets/svg/icon12.svg', title: 'Mystery Gift', text: 'Acquire mystery gift', expanded: false }, - { svg: 'assets/svg/icon13.svg', title: 'Ultimate Winner', text: 'Win 100 games', expanded: false }, - { svg: 'assets/svg/icon14.svg', title: 'Silent Genius', text: 'All question answered', expanded: false }, - { svg: 'assets/svg/icon15.svg', title: 'Mountain Conqueror', text: 'Acquire all mountains', expanded: false }, - { svg: 'assets/svg/icon16.svg', title: '???', text: 'Nobody knows how to achieve it', expanded: false }, - { svg: 'assets/svg/icon17.svg', title: 'Question Master', text: 'Create 100 questions', expanded: false }, - { svg: 'assets/svg/icon18.svg', title: 'Field Protector', text: 'Protect your field', expanded: false }, - { svg: 'assets/svg/icon19.svg', title: 'Defender', text: 'Protect your field 500 times', expanded: false }, - { svg: 'assets/svg/icon20.svg', title: 'Complete', text: 'Complete all achievements', expanded: false }, - ]; + { svg: 'assets/svg/icon1.svg', title: 'Game Winner', text: 'Win the game', expanded: false }, + { svg: 'assets/svg/icon2.svg', title: 'Field Stealer', text: 'Steal your opponent\'s field', expanded: false }, + { svg: 'assets/svg/icon3.svg', title: 'Field Conqueror', text: 'Acquire blank field', expanded: false }, + { svg: 'assets/svg/icon4.svg', title: 'Master', text: 'Win 5 games in a row', expanded: false }, + { svg: 'assets/svg/icon5.svg', title: 'Destroyer', text: 'Steal from your opponents 50 times ', expanded: false }, + { svg: 'assets/svg/icon6.svg', title: 'Row Master', text: 'Acquire 10 fields in a row', expanded: false }, + { svg: 'assets/svg/icon7.svg', title: 'Veteran Winner', text: 'Win 25 games', expanded: false }, + { svg: 'assets/svg/icon8.svg', title: 'Top Answerer', text: 'Most questions answered', expanded: false }, + { svg: 'assets/svg/icon9.svg', title: 'Center Conqueror', text: 'Acquire center of the map', expanded: false }, + { svg: 'assets/svg/icon10.svg', title: 'Field Collector', text: 'Acquire 500 fields', expanded: false }, + { svg: 'assets/svg/icon11.svg', title: 'Champion', text: 'Became best player 10 times', expanded: false }, + { svg: 'assets/svg/icon12.svg', title: 'Mystery Gift', text: 'Acquire mystery gift', expanded: false }, + { svg: 'assets/svg/icon13.svg', title: 'Ultimate Winner', text: 'Win 100 games', expanded: false }, + { svg: 'assets/svg/icon14.svg', title: 'Silent Genius', text: 'All question answered', expanded: false }, + { svg: 'assets/svg/icon15.svg', title: 'Mountain Conqueror', text: 'Acquire all mountains', expanded: false }, + { svg: 'assets/svg/icon16.svg', title: '???', text: 'Nobody knows how to achieve it', expanded: false }, + { svg: 'assets/svg/icon17.svg', title: 'Question Master', text: 'Create 100 questions', expanded: false }, + { svg: 'assets/svg/icon18.svg', title: 'Field Protector', text: 'Protect your field', expanded: false }, + { svg: 'assets/svg/icon19.svg', title: 'Defender', text: 'Protect your field 500 times', expanded: false }, + { svg: 'assets/svg/icon20.svg', title: 'Complete', text: 'Complete all achievements', expanded: false }, + ]; } toggleText(index: number) { - // Pokud kliknutý čtverec je stejný jako ten, který byl již kliknutý, zavři ho + // If the clicked square is the same as the one that was clicked before, close it if (this.clickedSquare === index) { this.squares[index].expanded = false; this.clickedSquare = null; } else { - // Zavři všechny ostatní čtverce + // Close all other squares this.squares.forEach((square, i) => { - square.expanded = false; // Zavři všechny čtverce + square.expanded = false; // Close all squares }); - // Otevři aktuálně kliknutý čtverec + // Open the currently clicked square this.squares[index].expanded = true; - this.clickedSquare = index; // Ulož index kliknutého čtverce + this.clickedSquare = index; // Store the index of the clicked square } } } From ba2bc6f47297128559a7e36cdacebe8d8931f6e0 Mon Sep 17 00:00:00 2001 From: Kernepult1 Date: Thu, 7 Nov 2024 15:13:57 +0100 Subject: [PATCH 10/16] 7.11 added comments --- src/app/achievements/achievements.page.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/achievements/achievements.page.ts b/src/app/achievements/achievements.page.ts index f10ca67..fd1fb21 100644 --- a/src/app/achievements/achievements.page.ts +++ b/src/app/achievements/achievements.page.ts @@ -57,7 +57,7 @@ export class AchievementsPage implements OnInit { } toggleText(index: number) { - // If the clicked square is the same as the one that was clicked before, close it + // If the clicked square is the same as the one that was clicked before, close it. if (this.clickedSquare === index) { this.squares[index].expanded = false; this.clickedSquare = null; From 98538ed9147ce33ed9188bc8d4c556232c0e2b4d Mon Sep 17 00:00:00 2001 From: Kernepult1 Date: Thu, 14 Nov 2024 15:05:00 +0100 Subject: [PATCH 11/16] assets/svg/ changed folder name to AchievmentsIcon icons in assets/svg/ renamed to tittle names --- .../{svg/icon9.svg => AchievementsIcon/CenterConqueror.svg} | 0 src/assets/{svg/icon11.svg => AchievementsIcon/Champion.svg} | 0 src/assets/{svg/icon20.svg => AchievementsIcon/Complete.svg} | 0 src/assets/{svg/icon19.svg => AchievementsIcon/Defender.svg} | 0 src/assets/{svg/icon5.svg => AchievementsIcon/Destroyer.svg} | 0 .../{svg/icon10.svg => AchievementsIcon/FieldCollector.svg} | 0 src/assets/{svg/icon3.svg => AchievementsIcon/FieldConqueror.svg} | 0 .../{svg/icon18.svg => AchievementsIcon/FieldProtector.svg} | 0 src/assets/{svg/icon2.svg => AchievementsIcon/FieldStealer.svg} | 0 src/assets/{svg/icon1.svg => AchievementsIcon/GameWinner.svg} | 0 src/assets/{svg/icon4.svg => AchievementsIcon/Master.svg} | 0 .../{svg/icon15.svg => AchievementsIcon/MountainConqueror.svg} | 0 src/assets/{svg/icon12.svg => AchievementsIcon/MysteryGift.svg} | 0 .../{svg/icon17.svg => AchievementsIcon/QuestionMaster.svg} | 0 src/assets/{svg/icon6.svg => AchievementsIcon/RowMaster.svg} | 0 src/assets/{svg/icon16.svg => AchievementsIcon/Secret.svg} | 0 src/assets/{svg/icon14.svg => AchievementsIcon/SilentGenius.svg} | 0 src/assets/{svg/icon8.svg => AchievementsIcon/TopAnswerer.svg} | 0 .../{svg/icon13.svg => AchievementsIcon/UltimateWinner.svg} | 0 src/assets/{svg/icon7.svg => AchievementsIcon/VeteranWinner.svg} | 0 20 files changed, 0 insertions(+), 0 deletions(-) rename src/assets/{svg/icon9.svg => AchievementsIcon/CenterConqueror.svg} (100%) rename src/assets/{svg/icon11.svg => AchievementsIcon/Champion.svg} (100%) rename src/assets/{svg/icon20.svg => AchievementsIcon/Complete.svg} (100%) rename src/assets/{svg/icon19.svg => AchievementsIcon/Defender.svg} (100%) rename src/assets/{svg/icon5.svg => AchievementsIcon/Destroyer.svg} (100%) rename src/assets/{svg/icon10.svg => AchievementsIcon/FieldCollector.svg} (100%) rename src/assets/{svg/icon3.svg => AchievementsIcon/FieldConqueror.svg} (100%) rename src/assets/{svg/icon18.svg => AchievementsIcon/FieldProtector.svg} (100%) rename src/assets/{svg/icon2.svg => AchievementsIcon/FieldStealer.svg} (100%) rename src/assets/{svg/icon1.svg => AchievementsIcon/GameWinner.svg} (100%) rename src/assets/{svg/icon4.svg => AchievementsIcon/Master.svg} (100%) rename src/assets/{svg/icon15.svg => AchievementsIcon/MountainConqueror.svg} (100%) rename src/assets/{svg/icon12.svg => AchievementsIcon/MysteryGift.svg} (100%) rename src/assets/{svg/icon17.svg => AchievementsIcon/QuestionMaster.svg} (100%) rename src/assets/{svg/icon6.svg => AchievementsIcon/RowMaster.svg} (100%) rename src/assets/{svg/icon16.svg => AchievementsIcon/Secret.svg} (100%) rename src/assets/{svg/icon14.svg => AchievementsIcon/SilentGenius.svg} (100%) rename src/assets/{svg/icon8.svg => AchievementsIcon/TopAnswerer.svg} (100%) rename src/assets/{svg/icon13.svg => AchievementsIcon/UltimateWinner.svg} (100%) rename src/assets/{svg/icon7.svg => AchievementsIcon/VeteranWinner.svg} (100%) diff --git a/src/assets/svg/icon9.svg b/src/assets/AchievementsIcon/CenterConqueror.svg similarity index 100% rename from src/assets/svg/icon9.svg rename to src/assets/AchievementsIcon/CenterConqueror.svg diff --git a/src/assets/svg/icon11.svg b/src/assets/AchievementsIcon/Champion.svg similarity index 100% rename from src/assets/svg/icon11.svg rename to src/assets/AchievementsIcon/Champion.svg diff --git a/src/assets/svg/icon20.svg b/src/assets/AchievementsIcon/Complete.svg similarity index 100% rename from src/assets/svg/icon20.svg rename to src/assets/AchievementsIcon/Complete.svg diff --git a/src/assets/svg/icon19.svg b/src/assets/AchievementsIcon/Defender.svg similarity index 100% rename from src/assets/svg/icon19.svg rename to src/assets/AchievementsIcon/Defender.svg diff --git a/src/assets/svg/icon5.svg b/src/assets/AchievementsIcon/Destroyer.svg similarity index 100% rename from src/assets/svg/icon5.svg rename to src/assets/AchievementsIcon/Destroyer.svg diff --git a/src/assets/svg/icon10.svg b/src/assets/AchievementsIcon/FieldCollector.svg similarity index 100% rename from src/assets/svg/icon10.svg rename to src/assets/AchievementsIcon/FieldCollector.svg diff --git a/src/assets/svg/icon3.svg b/src/assets/AchievementsIcon/FieldConqueror.svg similarity index 100% rename from src/assets/svg/icon3.svg rename to src/assets/AchievementsIcon/FieldConqueror.svg diff --git a/src/assets/svg/icon18.svg b/src/assets/AchievementsIcon/FieldProtector.svg similarity index 100% rename from src/assets/svg/icon18.svg rename to src/assets/AchievementsIcon/FieldProtector.svg diff --git a/src/assets/svg/icon2.svg b/src/assets/AchievementsIcon/FieldStealer.svg similarity index 100% rename from src/assets/svg/icon2.svg rename to src/assets/AchievementsIcon/FieldStealer.svg diff --git a/src/assets/svg/icon1.svg b/src/assets/AchievementsIcon/GameWinner.svg similarity index 100% rename from src/assets/svg/icon1.svg rename to src/assets/AchievementsIcon/GameWinner.svg diff --git a/src/assets/svg/icon4.svg b/src/assets/AchievementsIcon/Master.svg similarity index 100% rename from src/assets/svg/icon4.svg rename to src/assets/AchievementsIcon/Master.svg diff --git a/src/assets/svg/icon15.svg b/src/assets/AchievementsIcon/MountainConqueror.svg similarity index 100% rename from src/assets/svg/icon15.svg rename to src/assets/AchievementsIcon/MountainConqueror.svg diff --git a/src/assets/svg/icon12.svg b/src/assets/AchievementsIcon/MysteryGift.svg similarity index 100% rename from src/assets/svg/icon12.svg rename to src/assets/AchievementsIcon/MysteryGift.svg diff --git a/src/assets/svg/icon17.svg b/src/assets/AchievementsIcon/QuestionMaster.svg similarity index 100% rename from src/assets/svg/icon17.svg rename to src/assets/AchievementsIcon/QuestionMaster.svg diff --git a/src/assets/svg/icon6.svg b/src/assets/AchievementsIcon/RowMaster.svg similarity index 100% rename from src/assets/svg/icon6.svg rename to src/assets/AchievementsIcon/RowMaster.svg diff --git a/src/assets/svg/icon16.svg b/src/assets/AchievementsIcon/Secret.svg similarity index 100% rename from src/assets/svg/icon16.svg rename to src/assets/AchievementsIcon/Secret.svg diff --git a/src/assets/svg/icon14.svg b/src/assets/AchievementsIcon/SilentGenius.svg similarity index 100% rename from src/assets/svg/icon14.svg rename to src/assets/AchievementsIcon/SilentGenius.svg diff --git a/src/assets/svg/icon8.svg b/src/assets/AchievementsIcon/TopAnswerer.svg similarity index 100% rename from src/assets/svg/icon8.svg rename to src/assets/AchievementsIcon/TopAnswerer.svg diff --git a/src/assets/svg/icon13.svg b/src/assets/AchievementsIcon/UltimateWinner.svg similarity index 100% rename from src/assets/svg/icon13.svg rename to src/assets/AchievementsIcon/UltimateWinner.svg diff --git a/src/assets/svg/icon7.svg b/src/assets/AchievementsIcon/VeteranWinner.svg similarity index 100% rename from src/assets/svg/icon7.svg rename to src/assets/AchievementsIcon/VeteranWinner.svg From 659e1cb3f2d2a3103d1c081fb09a0e54411d3afb Mon Sep 17 00:00:00 2001 From: Kernepult1 Date: Thu, 14 Nov 2024 15:13:50 +0100 Subject: [PATCH 12/16] achievements page tranferred to pages class new-square rename to completion-banner width and height - change to pixels --- src/app/achievements/achievements.page.html | 33 -------- src/app/achievements/achievements.page.ts | 75 ------------------- .../pages/achievements/achievements.page.html | 38 ++++++++++ .../achievements/achievements.page.scss | 16 +++- .../achievements/achievements.page.spec.ts | 0 .../pages/achievements/achievements.page.ts | 74 ++++++++++++++++++ 6 files changed, 124 insertions(+), 112 deletions(-) delete mode 100644 src/app/achievements/achievements.page.html delete mode 100644 src/app/achievements/achievements.page.ts create mode 100644 src/app/pages/achievements/achievements.page.html rename src/app/{ => pages}/achievements/achievements.page.scss (82%) rename src/app/{ => pages}/achievements/achievements.page.spec.ts (100%) create mode 100644 src/app/pages/achievements/achievements.page.ts diff --git a/src/app/achievements/achievements.page.html b/src/app/achievements/achievements.page.html deleted file mode 100644 index 4b05abf..0000000 --- a/src/app/achievements/achievements.page.html +++ /dev/null @@ -1,33 +0,0 @@ - - - Achievements - - - - -
- -
- Complete (-%) -
- - -
-
-
- - SVG Icon -
- - -
-
{{ square.title }}
-
{{ square.text }}
-
-
-
-
- diff --git a/src/app/achievements/achievements.page.ts b/src/app/achievements/achievements.page.ts deleted file mode 100644 index fd1fb21..0000000 --- a/src/app/achievements/achievements.page.ts +++ /dev/null @@ -1,75 +0,0 @@ -import { Component, OnInit } from '@angular/core'; -import { CommonModule } from '@angular/common'; -import { FormsModule } from '@angular/forms'; -import { - IonContent, - IonHeader, - IonTitle, - IonToolbar -} from '@ionic/angular/standalone'; - -@Component({ - selector: 'app-achievements', - templateUrl: './achievements.page.html', - styleUrls: ['./achievements.page.scss'], - standalone: true, - imports: [ - IonContent, - IonHeader, - IonTitle, - IonToolbar, - CommonModule, - FormsModule - ] -}) -export class AchievementsPage implements OnInit { - squares: { - title: string; - svg: string; text: string; expanded: boolean }[] = []; - clickedSquare: number | null = null; // To track the clicked square - - constructor() {} - - ngOnInit() { - // Initialize the array with objects for each square - this.squares = [ - { svg: 'assets/svg/icon1.svg', title: 'Game Winner', text: 'Win the game', expanded: false }, - { svg: 'assets/svg/icon2.svg', title: 'Field Stealer', text: 'Steal your opponent\'s field', expanded: false }, - { svg: 'assets/svg/icon3.svg', title: 'Field Conqueror', text: 'Acquire blank field', expanded: false }, - { svg: 'assets/svg/icon4.svg', title: 'Master', text: 'Win 5 games in a row', expanded: false }, - { svg: 'assets/svg/icon5.svg', title: 'Destroyer', text: 'Steal from your opponents 50 times ', expanded: false }, - { svg: 'assets/svg/icon6.svg', title: 'Row Master', text: 'Acquire 10 fields in a row', expanded: false }, - { svg: 'assets/svg/icon7.svg', title: 'Veteran Winner', text: 'Win 25 games', expanded: false }, - { svg: 'assets/svg/icon8.svg', title: 'Top Answerer', text: 'Most questions answered', expanded: false }, - { svg: 'assets/svg/icon9.svg', title: 'Center Conqueror', text: 'Acquire center of the map', expanded: false }, - { svg: 'assets/svg/icon10.svg', title: 'Field Collector', text: 'Acquire 500 fields', expanded: false }, - { svg: 'assets/svg/icon11.svg', title: 'Champion', text: 'Became best player 10 times', expanded: false }, - { svg: 'assets/svg/icon12.svg', title: 'Mystery Gift', text: 'Acquire mystery gift', expanded: false }, - { svg: 'assets/svg/icon13.svg', title: 'Ultimate Winner', text: 'Win 100 games', expanded: false }, - { svg: 'assets/svg/icon14.svg', title: 'Silent Genius', text: 'All question answered', expanded: false }, - { svg: 'assets/svg/icon15.svg', title: 'Mountain Conqueror', text: 'Acquire all mountains', expanded: false }, - { svg: 'assets/svg/icon16.svg', title: '???', text: 'Nobody knows how to achieve it', expanded: false }, - { svg: 'assets/svg/icon17.svg', title: 'Question Master', text: 'Create 100 questions', expanded: false }, - { svg: 'assets/svg/icon18.svg', title: 'Field Protector', text: 'Protect your field', expanded: false }, - { svg: 'assets/svg/icon19.svg', title: 'Defender', text: 'Protect your field 500 times', expanded: false }, - { svg: 'assets/svg/icon20.svg', title: 'Complete', text: 'Complete all achievements', expanded: false }, - ]; - } - - toggleText(index: number) { - // If the clicked square is the same as the one that was clicked before, close it. - if (this.clickedSquare === index) { - this.squares[index].expanded = false; - this.clickedSquare = null; - } else { - // Close all other squares - this.squares.forEach((square, i) => { - square.expanded = false; // Close all squares - }); - - // Open the currently clicked square - this.squares[index].expanded = true; - this.clickedSquare = index; // Store the index of the clicked square - } - } -} diff --git a/src/app/pages/achievements/achievements.page.html b/src/app/pages/achievements/achievements.page.html new file mode 100644 index 0000000..0acd854 --- /dev/null +++ b/src/app/pages/achievements/achievements.page.html @@ -0,0 +1,38 @@ + + + Achievements + + + + +
+ +
+ +
+ + +
+ @for (square of squares; track square; let index = $index) { +
+ @if (!square.expanded) { +
+ + AchievementsIcon +
+ } + + @if (square.expanded) { +
+
{{ square.title }}
+
{{ square.text }}
+
+ } +
+ } +
+
+ diff --git a/src/app/achievements/achievements.page.scss b/src/app/pages/achievements/achievements.page.scss similarity index 82% rename from src/app/achievements/achievements.page.scss rename to src/app/pages/achievements/achievements.page.scss index 314e560..3ef4ef3 100644 --- a/src/app/achievements/achievements.page.scss +++ b/src/app/pages/achievements/achievements.page.scss @@ -1,3 +1,4 @@ +/* Container for centering content */ .container { display: flex; flex-direction: column; @@ -5,9 +6,10 @@ margin-top: 5px; } -.new-square { - width: 324.13px; - height: 86.44px; +/* Completion banner for achievement progress */ +.completion-banner { + width: 324px; + height: 86px; background-color: var(--ion-color-secondary); border-radius: 10px; margin-bottom: 16px; @@ -17,10 +19,11 @@ color: var(--ion-color-secondary-contrast); } -.new-square .square-text { +.completion-banner .banner-text { font-size: 38px; } +/* Grid layout for achievement squares */ .grid-container { display: grid; grid-template-columns: repeat(5, 164px); @@ -29,6 +32,7 @@ justify-content: center; } +/* Styles for each square in the grid */ .square { position: relative; /* For the pseudo-element */ background-color: var(--ion-color-primary); @@ -43,6 +47,7 @@ z-index: 1; /* Normal square has basic priority */ } +/* Styles when a square is expanded */ .square.expanded { transform: scale(1.5); /* Enlarges the square on click */ background-color: var(--ion-color-secondary); /* Outer color (fill) */ @@ -61,6 +66,7 @@ z-index: 0; /* The pseudo-element is below text and icons */ } +/* Container for the SVG icons inside squares */ .svg-slot { width: 100%; height: 100%; @@ -74,6 +80,7 @@ height: 50px; } +/* Title inside the expanded square */ .square-title { font-size: 18px; font-weight: bold; @@ -84,6 +91,7 @@ z-index: 2; /* Text will be above the pseudo-element */ } +/* Text inside the expanded square */ .square-text { color: var(--ion-color-secondary-contrast); font-size: 15px; diff --git a/src/app/achievements/achievements.page.spec.ts b/src/app/pages/achievements/achievements.page.spec.ts similarity index 100% rename from src/app/achievements/achievements.page.spec.ts rename to src/app/pages/achievements/achievements.page.spec.ts diff --git a/src/app/pages/achievements/achievements.page.ts b/src/app/pages/achievements/achievements.page.ts new file mode 100644 index 0000000..609a070 --- /dev/null +++ b/src/app/pages/achievements/achievements.page.ts @@ -0,0 +1,74 @@ +import { Component, OnInit } from '@angular/core'; + +import { FormsModule } from '@angular/forms'; +import { + IonContent, + IonHeader, + IonTitle, + IonToolbar +} from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-achievements', + templateUrl: './achievements.page.html', + styleUrls: ['./achievements.page.scss'], + standalone: true, + imports: [ + IonContent, + IonHeader, + IonTitle, + IonToolbar, + FormsModule +] +}) +export class AchievementsPage implements OnInit { + squares: { + title: string; + svg: string; text: string; expanded: boolean }[] = []; + clickedSquare: number | null = null; // To track the clicked square + + constructor() {} + + ngOnInit() { + // Initialize the array with objects for each square + this.squares = [ + { svg: '/assets/AchievementsIcon/GameWinner.svg', title: 'Game Winner', text: 'Win the game', expanded: false }, + { svg: 'assets/AchievementsIcon/FieldStealer.svg', title: 'Field Stealer', text: 'Steal your opponent\'s field', expanded: false }, + { svg: 'assets/AchievementsIcon/FieldConqueror.svg', title: 'Field Conqueror', text: 'Acquire blank field', expanded: false }, + { svg: 'assets/AchievementsIcon/Master.svg', title: 'Master', text: 'Win 5 games in a row', expanded: false }, + { svg: 'assets/AchievementsIcon/Destroyer.svg', title: 'Destroyer', text: 'Steal from your opponents 50 times ', expanded: false }, + { svg: 'assets/AchievementsIcon/RowMaster.svg', title: 'Row Master', text: 'Acquire 10 fields in a row', expanded: false }, + { svg: 'assets/AchievementsIcon/VeteranWinner.svg', title: 'Veteran Winner', text: 'Win 25 games', expanded: false }, + { svg: 'assets/AchievementsIcon/TopAnswerer.svg', title: 'Top Answerer', text: 'Most questions answered', expanded: false }, + { svg: 'assets/AchievementsIcon/CenterConqueror.svg', title: 'Center Conqueror', text: 'Acquire center of the map', expanded: false }, + { svg: 'assets/AchievementsIcon/FieldCollector.svg', title: 'Field Collector', text: 'Acquire 500 fields', expanded: false }, + { svg: 'assets/AchievementsIcon/Champion.svg', title: 'Champion', text: 'Became best player 10 times', expanded: false }, + { svg: 'assets/AchievementsIcon/MysteryGift.svg', title: 'Mystery Gift', text: 'Acquire mystery gift', expanded: false }, + { svg: 'assets/AchievementsIcon/UltimateWinner.svg', title: 'Ultimate Winner', text: 'Win 100 games', expanded: false }, + { svg: 'assets/AchievementsIcon/SilentGenius.svg', title: 'Silent Genius', text: 'All question answered', expanded: false }, + { svg: 'assets/AchievementsIcon/MountainConqueror.svg', title: 'Mountain Conqueror', text: 'Acquire all mountains', expanded: false }, + { svg: 'assets/AchievementsIcon/Secret.svg', title: '???', text: 'Nobody knows how to achieve it', expanded: false }, + { svg: 'assets/AchievementsIcon/QuestionMaster.svg', title: 'Question Master', text: 'Create 100 questions', expanded: false }, + { svg: 'assets/AchievementsIcon/FieldProtector.svg', title: 'Field Protector', text: 'Protect your field', expanded: false }, + { svg: 'assets/AchievementsIcon/Defender.svg', title: 'Defender', text: 'Protect your field 500 times', expanded: false }, + { svg: 'assets/AchievementsIcon/Complete.svg', title: 'Complete', text: 'Complete all achievements', expanded: false }, + ]; + } + + toggleText(index: number) { + // If the clicked square is the same as the one that was clicked before, close it. + if (this.clickedSquare === index) { + this.squares[index].expanded = false; + this.clickedSquare = null; + } else { + // Close all other squares + this.squares.forEach((square, i) => { + square.expanded = false; // Close all squares + }); + + // Open the currently clicked square + this.squares[index].expanded = true; + this.clickedSquare = index; // Store the index of the clicked square + } + } +} From 3ec012cddb30d21559ea074521330976c540b073 Mon Sep 17 00:00:00 2001 From: Kernepult1 Date: Thu, 14 Nov 2024 15:15:07 +0100 Subject: [PATCH 13/16] ngFor replaced with @for ngIf e replaced with @if --- src/app/app.component.html | 14 ++++++++------ src/app/app.component.ts | 4 ++-- src/app/app.routes.ts | 2 +- .../pages/avatar-settings/avatar-settings.page.ts | 4 ++-- src/app/pages/game/game.page.ts | 4 ++-- src/app/pages/home/home.page.ts | 4 ++-- src/app/pages/login-screen/login-screen.page.ts | 4 ++-- 7 files changed, 19 insertions(+), 17 deletions(-) diff --git a/src/app/app.component.html b/src/app/app.component.html index 8304967..95f98b8 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -5,12 +5,14 @@ Edu App - - - - {{ p.title }} - - + @for (p of appPages; track p; let i = $index) { + + + + {{ p.title }} + + + } diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 99c32f6..baadc02 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -1,4 +1,4 @@ -import {CommonModule} from '@angular/common'; + import {Component} from '@angular/core'; import {RouterLink, RouterLinkActive} from '@angular/router'; import { @@ -39,7 +39,7 @@ import { templateUrl: 'app.component.html', styleUrls: ['app.component.scss'], standalone: true, - imports: [RouterLink, RouterLinkActive, CommonModule, IonApp, IonSplitPane, IonMenu, IonContent, IonList, IonListHeader, IonNote, IonMenuToggle, IonItem, IonIcon, IonLabel, IonRouterLink, IonRouterOutlet], + imports: [RouterLink, RouterLinkActive, IonApp, IonSplitPane, IonMenu, IonContent, IonList, IonListHeader, IonNote, IonMenuToggle, IonItem, IonIcon, IonLabel, IonRouterLink, IonRouterOutlet], }) export class AppComponent { public appPages = [ diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts index 42ddb28..cd24426 100644 --- a/src/app/app.routes.ts +++ b/src/app/app.routes.ts @@ -27,7 +27,7 @@ export const routes: Routes = [ }, { path: 'achievements', - loadComponent: () => import('./achievements/achievements.page').then( m => m.AchievementsPage) + loadComponent: () => import('./pages/achievements/achievements.page').then(m => m.AchievementsPage) }, { path: 'game', diff --git a/src/app/pages/avatar-settings/avatar-settings.page.ts b/src/app/pages/avatar-settings/avatar-settings.page.ts index edb7788..80eac01 100644 --- a/src/app/pages/avatar-settings/avatar-settings.page.ts +++ b/src/app/pages/avatar-settings/avatar-settings.page.ts @@ -1,5 +1,5 @@ import {Component, OnInit} from '@angular/core'; -import {CommonModule} from '@angular/common'; + import {FormControl, FormsModule, ReactiveFormsModule, Validators} from '@angular/forms'; import {Avatar, User} from "../../models/user.model"; import { @@ -19,7 +19,7 @@ import {debounceTime} from "rxjs"; templateUrl: './avatar-settings.page.html', styleUrls: ['./avatar-settings.page.scss'], standalone: true, - imports: [IonContent, IonHeader, IonTitle, IonToolbar, CommonModule, FormsModule, IonButtons, IonMenuButton, IonGrid, IonCol, IonRow, IonButton, IonInput, ReactiveFormsModule] + imports: [IonContent, IonHeader, IonTitle, IonToolbar, FormsModule, IonButtons, IonMenuButton, IonGrid, IonCol, IonRow, IonButton, IonInput, ReactiveFormsModule] }) export class AvatarSettingsPage implements OnInit { diff --git a/src/app/pages/game/game.page.ts b/src/app/pages/game/game.page.ts index 421bc05..5cabb33 100644 --- a/src/app/pages/game/game.page.ts +++ b/src/app/pages/game/game.page.ts @@ -1,5 +1,5 @@ import { Component, OnInit } from '@angular/core'; -import { CommonModule } from '@angular/common'; + import { FormsModule } from '@angular/forms'; import { IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/angular/standalone'; @@ -8,7 +8,7 @@ import { IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/angular/stan templateUrl: './game.page.html', styleUrls: ['./game.page.scss'], standalone: true, - imports: [IonContent, IonHeader, IonTitle, IonToolbar, CommonModule, FormsModule] + imports: [IonContent, IonHeader, IonTitle, IonToolbar, FormsModule] }) export class GamePage implements OnInit { diff --git a/src/app/pages/home/home.page.ts b/src/app/pages/home/home.page.ts index e886d0c..e08b7b7 100644 --- a/src/app/pages/home/home.page.ts +++ b/src/app/pages/home/home.page.ts @@ -1,5 +1,5 @@ import { Component, OnInit } from '@angular/core'; -import { CommonModule } from '@angular/common'; + import { FormsModule } from '@angular/forms'; import { IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/angular/standalone'; @@ -8,7 +8,7 @@ import { IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/angular/stan templateUrl: './home.page.html', styleUrls: ['./home.page.scss'], standalone: true, - imports: [IonContent, IonHeader, IonTitle, IonToolbar, CommonModule, FormsModule] + imports: [IonContent, IonHeader, IonTitle, IonToolbar, FormsModule] }) export class HomePage implements OnInit { diff --git a/src/app/pages/login-screen/login-screen.page.ts b/src/app/pages/login-screen/login-screen.page.ts index 0aa8e9d..5d01acc 100644 --- a/src/app/pages/login-screen/login-screen.page.ts +++ b/src/app/pages/login-screen/login-screen.page.ts @@ -1,5 +1,5 @@ import { Component, OnInit } from '@angular/core'; -import { CommonModule } from '@angular/common'; + import { FormsModule } from '@angular/forms'; import { IonAlert, @@ -18,7 +18,7 @@ import { templateUrl: './login-screen.page.html', styleUrls: ['./login-screen.page.scss'], standalone: true, - imports: [IonContent, IonHeader, IonTitle, IonToolbar, CommonModule, FormsModule, IonButton, IonGrid, IonCol, IonRow, IonAlert] + imports: [IonContent, IonHeader, IonTitle, IonToolbar, FormsModule, IonButton, IonGrid, IonCol, IonRow, IonAlert] }) export class LoginScreenPage implements OnInit { public alertButtons = ['Action']; From 218be40a288c0d2dbcb659a836d4df32bd37fd80 Mon Sep 17 00:00:00 2001 From: Kernepult1 <145328256+Kernepult1@users.noreply.github.com> Date: Thu, 14 Nov 2024 15:36:01 +0100 Subject: [PATCH 14/16] Update avatar-settings.page.ts repaired mistake --- src/app/pages/avatar-settings/avatar-settings.page.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/src/app/pages/avatar-settings/avatar-settings.page.ts b/src/app/pages/avatar-settings/avatar-settings.page.ts index bb139f6..7ce3221 100644 --- a/src/app/pages/avatar-settings/avatar-settings.page.ts +++ b/src/app/pages/avatar-settings/avatar-settings.page.ts @@ -21,7 +21,6 @@ import {createOutline} from "ionicons/icons"; templateUrl: './avatar-settings.page.html', styleUrls: ['./avatar-settings.page.scss'], standalone: true, - imports: [IonContent, IonHeader, IonTitle, IonToolbar, FormsModule, IonButtons, IonMenuButton, IonGrid, IonCol, IonRow, IonButton, IonInput, ReactiveFormsModule], imports: [IonContent, IonHeader, IonTitle, IonToolbar, CommonModule, FormsModule, IonButtons, IonMenuButton, IonGrid, IonCol, IonRow, IonButton, IonInput, ReactiveFormsModule, IonIcon, IonFab, IonFabButton, IonModal, IonRadioGroup, IonRadio] }) export class AvatarSettingsPage implements OnInit { From 554bb738e854d49968fadcf62320a036172443f1 Mon Sep 17 00:00:00 2001 From: Kernepult1 Date: Tue, 19 Nov 2024 11:39:23 +0100 Subject: [PATCH 15/16] added services --- .../pages/achievements/achievements.page.scss | 5 + .../pages/achievements/achievements.page.ts | 59 ++------- .../service/achievements.service.ts | 122 ++++++++++++++++++ .../service/achievments.service.spec.ts | 43 ++++++ .../avatar-settings/avatar-settings.page.ts | 1 + 5 files changed, 183 insertions(+), 47 deletions(-) create mode 100644 src/app/pages/achievements/service/achievements.service.ts create mode 100644 src/app/pages/achievements/service/achievments.service.spec.ts diff --git a/src/app/pages/achievements/achievements.page.scss b/src/app/pages/achievements/achievements.page.scss index 3ef4ef3..0d5961a 100644 --- a/src/app/pages/achievements/achievements.page.scss +++ b/src/app/pages/achievements/achievements.page.scss @@ -90,6 +90,11 @@ position: relative; /* Ensures the text stays above the pseudo-element */ z-index: 2; /* Text will be above the pseudo-element */ } +.square.unlocked { + background-color: var(--ion-color-success) !important; /* This green color is used for completed achievements */ + border: 2px solid var(--ion-color-primary); /* Darker green edge for better contrast */ + +} /* Text inside the expanded square */ .square-text { diff --git a/src/app/pages/achievements/achievements.page.ts b/src/app/pages/achievements/achievements.page.ts index 609a070..def0f04 100644 --- a/src/app/pages/achievements/achievements.page.ts +++ b/src/app/pages/achievements/achievements.page.ts @@ -1,6 +1,5 @@ import { Component, OnInit } from '@angular/core'; - -import { FormsModule } from '@angular/forms'; +import { AchievementsService } from './service/achievements.service'; // Fixed import service import { IonContent, IonHeader, @@ -17,58 +16,24 @@ import { IonContent, IonHeader, IonTitle, - IonToolbar, - FormsModule -] + IonToolbar + ] }) export class AchievementsPage implements OnInit { - squares: { - title: string; - svg: string; text: string; expanded: boolean }[] = []; - clickedSquare: number | null = null; // To track the clicked square + squares: { title: string; svg: string; text: string; expanded: boolean }[] = []; + clickedSquare: number | null = null; // To track which square was clicked - constructor() {} + constructor(private achievementsService: AchievementsService) {} // Dependence on the service ngOnInit() { - // Initialize the array with objects for each square - this.squares = [ - { svg: '/assets/AchievementsIcon/GameWinner.svg', title: 'Game Winner', text: 'Win the game', expanded: false }, - { svg: 'assets/AchievementsIcon/FieldStealer.svg', title: 'Field Stealer', text: 'Steal your opponent\'s field', expanded: false }, - { svg: 'assets/AchievementsIcon/FieldConqueror.svg', title: 'Field Conqueror', text: 'Acquire blank field', expanded: false }, - { svg: 'assets/AchievementsIcon/Master.svg', title: 'Master', text: 'Win 5 games in a row', expanded: false }, - { svg: 'assets/AchievementsIcon/Destroyer.svg', title: 'Destroyer', text: 'Steal from your opponents 50 times ', expanded: false }, - { svg: 'assets/AchievementsIcon/RowMaster.svg', title: 'Row Master', text: 'Acquire 10 fields in a row', expanded: false }, - { svg: 'assets/AchievementsIcon/VeteranWinner.svg', title: 'Veteran Winner', text: 'Win 25 games', expanded: false }, - { svg: 'assets/AchievementsIcon/TopAnswerer.svg', title: 'Top Answerer', text: 'Most questions answered', expanded: false }, - { svg: 'assets/AchievementsIcon/CenterConqueror.svg', title: 'Center Conqueror', text: 'Acquire center of the map', expanded: false }, - { svg: 'assets/AchievementsIcon/FieldCollector.svg', title: 'Field Collector', text: 'Acquire 500 fields', expanded: false }, - { svg: 'assets/AchievementsIcon/Champion.svg', title: 'Champion', text: 'Became best player 10 times', expanded: false }, - { svg: 'assets/AchievementsIcon/MysteryGift.svg', title: 'Mystery Gift', text: 'Acquire mystery gift', expanded: false }, - { svg: 'assets/AchievementsIcon/UltimateWinner.svg', title: 'Ultimate Winner', text: 'Win 100 games', expanded: false }, - { svg: 'assets/AchievementsIcon/SilentGenius.svg', title: 'Silent Genius', text: 'All question answered', expanded: false }, - { svg: 'assets/AchievementsIcon/MountainConqueror.svg', title: 'Mountain Conqueror', text: 'Acquire all mountains', expanded: false }, - { svg: 'assets/AchievementsIcon/Secret.svg', title: '???', text: 'Nobody knows how to achieve it', expanded: false }, - { svg: 'assets/AchievementsIcon/QuestionMaster.svg', title: 'Question Master', text: 'Create 100 questions', expanded: false }, - { svg: 'assets/AchievementsIcon/FieldProtector.svg', title: 'Field Protector', text: 'Protect your field', expanded: false }, - { svg: 'assets/AchievementsIcon/Defender.svg', title: 'Defender', text: 'Protect your field 500 times', expanded: false }, - { svg: 'assets/AchievementsIcon/Complete.svg', title: 'Complete', text: 'Complete all achievements', expanded: false }, - ]; + // Retrieve a list of achievements from the service + this.squares = this.achievementsService.getAchievements(); } toggleText(index: number) { - // If the clicked square is the same as the one that was clicked before, close it. - if (this.clickedSquare === index) { - this.squares[index].expanded = false; - this.clickedSquare = null; - } else { - // Close all other squares - this.squares.forEach((square, i) => { - square.expanded = false; // Close all squares - }); - - // Open the currently clicked square - this.squares[index].expanded = true; - this.clickedSquare = index; // Store the index of the clicked square - } + // Call the service to toggle the 'expanded' state for the selected achievement + this.achievementsService.toggleAchievementExpansion(index); + this.squares = this.achievementsService.getAchievements(); // Aktualizujeme stav po změně } } + diff --git a/src/app/pages/achievements/service/achievements.service.ts b/src/app/pages/achievements/service/achievements.service.ts new file mode 100644 index 0000000..f484b79 --- /dev/null +++ b/src/app/pages/achievements/service/achievements.service.ts @@ -0,0 +1,122 @@ +import { Injectable } from '@angular/core'; + +@Injectable({ + providedIn: 'root', // This service will be available globally +}) +export class AchievementsService { + private achievements: { + title: string; + svg: string; + text: string; + expanded: boolean; + unlocked: boolean; // Achievement Unlock Status + }[] = [ + { svg: '/assets/AchievementsIcon/GameWinner.svg', title: 'Game Winner', text: 'Win the game', expanded: false, unlocked: false }, + { svg: 'assets/AchievementsIcon/FieldStealer.svg', title: 'Field Stealer', text: 'Steal your opponent\'s field', expanded: false, unlocked: false }, + { svg: 'assets/AchievementsIcon/FieldConqueror.svg', title: 'Field Conqueror', text: 'Acquire blank field', expanded: false, unlocked: false }, + { svg: 'assets/AchievementsIcon/Master.svg', title: 'Master', text: 'Win 5 games in a row', expanded: false, unlocked: false }, + { svg: 'assets/AchievementsIcon/Destroyer.svg', title: 'Destroyer', text: 'Steal from your opponents 50 times', expanded: false, unlocked: false }, + { svg: 'assets/AchievementsIcon/RowMaster.svg', title: 'Row Master', text: 'Acquire 10 fields in a row', expanded: false, unlocked: false }, + { svg: 'assets/AchievementsIcon/VeteranWinner.svg', title: 'Veteran Winner', text: 'Win 25 games', expanded: false, unlocked: false }, + { svg: 'assets/AchievementsIcon/TopAnswerer.svg', title: 'Top Answerer', text: 'Most questions answered', expanded: false, unlocked: false }, + { svg: 'assets/AchievementsIcon/CenterConqueror.svg', title: 'Center Conqueror', text: 'Acquire center of the map', expanded: false, unlocked: false }, + { svg: 'assets/AchievementsIcon/FieldCollector.svg', title: 'Field Collector', text: 'Acquire 500 fields', expanded: false, unlocked: false }, + { svg: 'assets/AchievementsIcon/Champion.svg', title: 'Champion', text: 'Became best player 10 times', expanded: false, unlocked: false }, + { svg: 'assets/AchievementsIcon/MysteryGift.svg', title: 'Mystery Gift', text: 'Acquire mystery gift', expanded: false, unlocked: false }, + { svg: 'assets/AchievementsIcon/UltimateWinner.svg', title: 'Ultimate Winner', text: 'Win 100 games', expanded: false, unlocked: false }, + { svg: 'assets/AchievementsIcon/SilentGenius.svg', title: 'Silent Genius', text: 'All questions answered', expanded: false, unlocked: false }, + { svg: 'assets/AchievementsIcon/MountainConqueror.svg', title: 'Mountain Conqueror', text: 'Acquire all mountains', expanded: false, unlocked: false }, + { svg: 'assets/AchievementsIcon/Secret.svg', title: '???', text: 'Nobody knows how to achieve it', expanded: false, unlocked: false }, + { svg: 'assets/AchievementsIcon/QuestionMaster.svg', title: 'Question Master', text: 'Create 100 questions', expanded: false, unlocked: false }, + { svg: 'assets/AchievementsIcon/FieldProtector.svg', title: 'Field Protector', text: 'Protect your field', expanded: false, unlocked: false }, + { svg: 'assets/AchievementsIcon/Defender.svg', title: 'Defender', text: 'Protect your field 500 times', expanded: false, unlocked: false }, + { svg: 'assets/AchievementsIcon/Complete.svg', title: 'Complete', text: 'Complete all achievements', expanded: false, unlocked: false }, + ]; + + constructor() { } + + // Method to get a list of all achievements + getAchievements() { + return [...this.achievements]; + } + + // Method to toggle the 'expanded' state for a specific achievement + toggleAchievementExpansion(index: number) { + this.achievements.forEach((achievement, i) => { + if (i === index) { + achievement.expanded = !achievement.expanded; + } else { + achievement.expanded = false; + } + }); + } + + // Method for unlocking success + unlockAchievement(title: string) { + const achievement = this.achievements.find(a => a.title === title); + if (achievement && !achievement.unlocked) { + achievement.unlocked = true; + } + } + + // Method for checking success and unlocking + checkAndUnlockAchievements(gameResult: { won: boolean, stolenField: boolean, winStreak: number, answeredQuestions: number, createdQuestions: number }) { + if (gameResult.won && !this.achievements[0].unlocked) { + this.unlockAchievement('Game Winner'); // Unlocked "Game Winner" + } + if (gameResult.stolenField && !this.achievements[1].unlocked) { + this.unlockAchievement('Field Stealer'); // Unlocked "Field Stealer" + } + if (gameResult.winStreak >= 5 && !this.achievements[3].unlocked) { + this.unlockAchievement('Master'); // Unlocked "Master" + } + if (gameResult.winStreak >= 50 && !this.achievements[4].unlocked) { + this.unlockAchievement('Destroyer'); // Unlocked "Destroyer" + } + if (gameResult.winStreak >= 10 && !this.achievements[5].unlocked) { + this.unlockAchievement('Row Master'); // Unlocked "Row Master" + } + if (gameResult.won && !this.achievements[6].unlocked) { + this.unlockAchievement('Veteran Winner'); // Unlocked "Veteran Winner" + } + if (gameResult.answeredQuestions >= 100 && !this.achievements[7].unlocked) { + this.unlockAchievement('Top Answerer'); // Unlocked "Top Answerer" + } + if (gameResult.stolenField && !this.achievements[8].unlocked) { + this.unlockAchievement('Center Conqueror'); // Unlocked "Center Conqueror" + } + if (gameResult.winStreak >= 500 && !this.achievements[9].unlocked) { + this.unlockAchievement('Field Collector'); // Unlocked "Field Collector" + } + if (gameResult.winStreak >= 10 && !this.achievements[10].unlocked) { + this.unlockAchievement('Champion'); // Unlocked "Champion" + } + if (gameResult.stolenField && !this.achievements[11].unlocked) { + this.unlockAchievement('Mystery Gift'); // Unlocked "Mystery Gift" + } + if (gameResult.won && gameResult.winStreak >= 100 && !this.achievements[12].unlocked) { + this.unlockAchievement('Ultimate Winner'); // Unlocked "Ultimate Winner" + } + if (gameResult.answeredQuestions >= 1000 && !this.achievements[13].unlocked) { + this.unlockAchievement('Silent Genius'); // Unlocked "Silent Genius" + } + if (gameResult.winStreak >= 500 && !this.achievements[14].unlocked) { + this.unlockAchievement('Mountain Conqueror'); // Unlocked "Mountain Conqueror" + } + if (gameResult.stolenField && !this.achievements[15].unlocked) { + this.unlockAchievement('Secret'); // Unlocked "???" + } + if (gameResult.createdQuestions >= 100 && !this.achievements[16].unlocked) { + this.unlockAchievement('Question Master'); // Unlocked "Question Master" + } + if (gameResult.winStreak >= 500 && !this.achievements[17].unlocked) { + this.unlockAchievement('Field Protector'); // Unlocked "Field Protector" + } + if (gameResult.winStreak >= 500 && !this.achievements[18].unlocked) { + this.unlockAchievement('Defender'); // Unlocked "Defender" + } + if (this.achievements.every(a => a.unlocked) && !this.achievements[19].unlocked) { + this.unlockAchievement('Complete'); // Unlocked "Complete" + } + } +} diff --git a/src/app/pages/achievements/service/achievments.service.spec.ts b/src/app/pages/achievements/service/achievments.service.spec.ts new file mode 100644 index 0000000..d270c28 --- /dev/null +++ b/src/app/pages/achievements/service/achievments.service.spec.ts @@ -0,0 +1,43 @@ + +import { TestBed } from '@angular/core/testing'; +import { AchievementsService } from './achievements.service'; + +describe('AchievementsService', () => { + let service: AchievementsService; + + beforeEach(() => { + TestBed.configureTestingModule({}); + service = TestBed.inject(AchievementsService); + }); + + it('should be created', () => { + expect(service).toBeTruthy(); + }); + + it('should return a list of achievements', () => { + const achievements = service.getAchievements(); + expect(achievements.length).toBeGreaterThan(0); + }); + + it('should toggle expanded state of an achievement', () => { + const index = 0; + service.toggleAchievementExpansion(index); + const achievements = service.getAchievements(); + expect(achievements[index].expanded).toBeTrue(); + + service.toggleAchievementExpansion(index); + expect(achievements[index].expanded).toBeFalse(); + }); + + it('should close all achievements when toggling a new one', () => { + const index1 = 0; + const index2 = 1; + + service.toggleAchievementExpansion(index1); + service.toggleAchievementExpansion(index2); + + const achievements = service.getAchievements(); + expect(achievements[index1].expanded).toBeFalse(); + expect(achievements[index2].expanded).toBeTrue(); + }); +}); diff --git a/src/app/pages/avatar-settings/avatar-settings.page.ts b/src/app/pages/avatar-settings/avatar-settings.page.ts index 7ce3221..f1fa9c8 100644 --- a/src/app/pages/avatar-settings/avatar-settings.page.ts +++ b/src/app/pages/avatar-settings/avatar-settings.page.ts @@ -15,6 +15,7 @@ import { import {debounceTime} from "rxjs"; import {addIcons} from "ionicons"; import {createOutline} from "ionicons/icons"; +import {CommonModule} from "@angular/common"; @Component({ selector: 'app-avatar-settings', From a33b437dcfc23988cff931bfc62af54e3053b929 Mon Sep 17 00:00:00 2001 From: Kernepult1 Date: Tue, 3 Dec 2024 10:21:13 +0100 Subject: [PATCH 16/16] added model --- src/app/models/achievemets.model.ts | 8 ++++++++ src/app/pages/achievements/achievements.page.scss | 2 +- src/app/pages/achievements/achievements.page.ts | 6 +++++- .../achievements/service/achievements.service.ts | 11 +++-------- 4 files changed, 17 insertions(+), 10 deletions(-) create mode 100644 src/app/models/achievemets.model.ts diff --git a/src/app/models/achievemets.model.ts b/src/app/models/achievemets.model.ts new file mode 100644 index 0000000..e1a62c4 --- /dev/null +++ b/src/app/models/achievemets.model.ts @@ -0,0 +1,8 @@ +export interface Achievement { + title: string, // Name of Achievement + svg: string, // Icon or image path + text: string, // Description of success + expanded: boolean, // Unpacking status (true = unpacked) + unlocked: boolean, // Unlock status (true = unlocked) +} + diff --git a/src/app/pages/achievements/achievements.page.scss b/src/app/pages/achievements/achievements.page.scss index 0d5961a..355cc9b 100644 --- a/src/app/pages/achievements/achievements.page.scss +++ b/src/app/pages/achievements/achievements.page.scss @@ -92,7 +92,7 @@ } .square.unlocked { background-color: var(--ion-color-success) !important; /* This green color is used for completed achievements */ - border: 2px solid var(--ion-color-primary); /* Darker green edge for better contrast */ + border: 2px solid var(--ion-color-primary); } diff --git a/src/app/pages/achievements/achievements.page.ts b/src/app/pages/achievements/achievements.page.ts index def0f04..4ead730 100644 --- a/src/app/pages/achievements/achievements.page.ts +++ b/src/app/pages/achievements/achievements.page.ts @@ -6,6 +6,8 @@ import { IonTitle, IonToolbar } from '@ionic/angular/standalone'; +import {Achievement} from "../../models/achievemets.model"; + @Component({ selector: 'app-achievements', @@ -20,7 +22,9 @@ import { ] }) export class AchievementsPage implements OnInit { - squares: { title: string; svg: string; text: string; expanded: boolean }[] = []; + squares:Achievement[] = []; + + clickedSquare: number | null = null; // To track which square was clicked constructor(private achievementsService: AchievementsService) {} // Dependence on the service diff --git a/src/app/pages/achievements/service/achievements.service.ts b/src/app/pages/achievements/service/achievements.service.ts index f484b79..ebf8d38 100644 --- a/src/app/pages/achievements/service/achievements.service.ts +++ b/src/app/pages/achievements/service/achievements.service.ts @@ -1,16 +1,11 @@ import { Injectable } from '@angular/core'; +import { Achievement } from "../../../models/achievemets.model"; @Injectable({ providedIn: 'root', // This service will be available globally }) export class AchievementsService { - private achievements: { - title: string; - svg: string; - text: string; - expanded: boolean; - unlocked: boolean; // Achievement Unlock Status - }[] = [ + private achievements: Achievement [] = [ { svg: '/assets/AchievementsIcon/GameWinner.svg', title: 'Game Winner', text: 'Win the game', expanded: false, unlocked: false }, { svg: 'assets/AchievementsIcon/FieldStealer.svg', title: 'Field Stealer', text: 'Steal your opponent\'s field', expanded: false, unlocked: false }, { svg: 'assets/AchievementsIcon/FieldConqueror.svg', title: 'Field Conqueror', text: 'Acquire blank field', expanded: false, unlocked: false }, @@ -36,7 +31,7 @@ export class AchievementsService { constructor() { } // Method to get a list of all achievements - getAchievements() { + getAchievements(): Achievement[] { return [...this.achievements]; }