Achievements

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",

src/app/app.component.html

@@ -5,12 +5,14 @@
         <ion-list id="inbox-list">
           <ion-list-header>Edu App</ion-list-header>
 
-          <ion-menu-toggle auto-hide="false" *ngFor="let p of appPages; let i = index">
-            <ion-item routerDirection="root" [routerLink]="[p.url]" lines="none" detail="false" routerLinkActive="selected">
-              <ion-icon aria-hidden="true" slot="start" [ios]="p.icon + '-outline'" [md]="p.icon + '-sharp'"></ion-icon>
-              <ion-label>{{ p.title }}</ion-label>
-            </ion-item>
-          </ion-menu-toggle>
+          @for (p of appPages; track p; let i = $index) {
+            <ion-menu-toggle auto-hide="false">
+              <ion-item routerDirection="root" [routerLink]="[p.url]" lines="none" detail="false" routerLinkActive="selected">
+                <ion-icon aria-hidden="true" slot="start" [ios]="p.icon + '-outline'" [md]="p.icon + '-sharp'"></ion-icon>
+                <ion-label>{{ p.title }}</ion-label>
+              </ion-item>
+            </ion-menu-toggle>
+          }
         </ion-list>
       </ion-content>
     </ion-menu>

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,19 +39,19 @@ 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 = [
     {title: 'Home', url: '/home', icon: 'mail'},
     {title: 'Inbox', url: '/folder/inbox', icon: 'mail'},
     {title: 'Outbox', url: '/folder/outbox', icon: 'paper-plane'},
-    {title: 'Favorites', url: '/folder/favorites', icon: 'heart'},
+    {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'},
     {title: 'Avatar Settings', url: '/avatar-settings', icon: 'warning'},
     {title: 'Login', url: '/login-screen', icon: 'warning'},
-
   ];
 
   constructor() {

src/app/app.routes.ts

@@ -25,6 +25,10 @@ export const routes: Routes = [
     path: 'home',
     loadComponent: () => import('./pages/home/home.page').then(m => m.HomePage)
   },
+  {
+    path: 'achievements',
+    loadComponent: () => import('./pages/achievements/achievements.page').then(m => m.AchievementsPage)
+  },
   {
     path: 'game',
     loadComponent: () => import('./pages/game/game.page').then(m => m.GamePage)

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)
+}
+

src/app/pages/achievements/achievements.page.html

@@ -0,0 +1,38 @@
+<ion-header>
+  <ion-toolbar>
+    <ion-title>Achievements</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content>
+  <div class="container">
+    <!-- Completion banner showing completion percentage -->
+    <div class="completion-banner">
+      <span class="banner-text">Complete (-%)</span>
+    </div>
+
+    <!-- Grid of achievements with 20 squares in a 5x4 layout -->
+    <div class="grid-container">
+      @for (square of squares; track square; let index = $index) {
+        <div
+          class="square"
+          (click)="toggleText(index)"
+          [class.expanded]="square.expanded">
+          @if (!square.expanded) {
+            <div class="svg-slot">
+              <!-- SVG for each square when it is not expanded -->
+              <img [src]="square['svg']" alt="AchievementsIcon" />
+            </div>
+          }
+          <!-- Expanded view showing title and description -->
+          @if (square.expanded) {
+            <div>
+              <div class="square-title">{{ square.title }}</div>
+              <div class="square-text">{{ square.text }}</div>
+            </div>
+          }
+        </div>
+      }
+    </div>
+  </div>
+</ion-content>