basic routing implemented

src/app/app.component.html

@@ -1,3 +1 @@
-<app-mario></app-mario>
-
 <router-outlet />

src/app/app.component.ts

@@ -1,14 +1,17 @@
 import { Component } from '@angular/core';
-import { RouterOutlet } from '@angular/router';
+import { RouterModule } from '@angular/router';
 import { MarioComponent } from "./mario/mario.component";
+import { WelcomeScreenComponent } from "./welcome-screen/welcome-screen.component";
 
 @Component({
   selector: 'app-root',
   standalone: true,
-  imports: [RouterOutlet, MarioComponent],
+  imports: [RouterModule, MarioComponent, WelcomeScreenComponent],
   templateUrl: './app.component.html',
   styleUrl: './app.component.scss'
 })
+
+
 export class AppComponent {
   title = 'silly-game-frontend'; 
 }

src/app/app.routes.ts

@@ -1,3 +1,12 @@
 import { Routes } from '@angular/router';
+import { SettingsComponent } from './settings/settings.component';
+import { MarioComponent } from './mario/mario.component';
+import { WelcomeScreenComponent } from './welcome-screen/welcome-screen.component';
 
-export const routes: Routes = [];
+export const routes: Routes = [
+    { path: 'home', component: WelcomeScreenComponent },
+    { path: 'game', component: MarioComponent },
+    { path: 'settings', component: SettingsComponent },
+    { path: '', redirectTo: 'home', pathMatch: 'full' },
+    { path: '**', component: WelcomeScreenComponent }
+  ];

src/app/mario/mario.component.html

@@ -6,6 +6,7 @@
       Jumps: {{ totalJumps }}
       <button (click)="restartGame()">Restart</button>
       <button (click)="showInvitePopup = true">Invite Friend</button>
+      <button (click)="navigateToSettings()">Settings</button>
     </div>
   </div>
 
@@ -23,4 +24,6 @@
       <button (click)="showInvitePopup = false">Cancel</button>
     </div>
   </div>
-</div>
+</div>
+
+<router-outlet></router-outlet>

src/app/mario/mario.component.scss

@@ -52,7 +52,7 @@ body, html {
     padding: 20px;
     border-radius: 10px;
     min-width: 300px;
-    box-shadow: 0 0 20px rgba(0,0,0,0.3);
+    box-shadow: 0 0 20px rgba(0, 112, 177, 0.719);
   }
   
   .modal input {
@@ -68,4 +68,16 @@ body, html {
     margin-top: 15px;
     gap: 10px;
   }
-  
+  
+  .settings {
+    padding: 4px 10px;
+    font-size: 14px;
+    position: fixed;
+    top: 0;
+    right: 5;
+    cursor: pointer;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 1;
+  }

src/app/mario/mario.component.ts

@@ -4,11 +4,12 @@ import { LoggerService } from '../logger.service';
 import { FormsModule } from '@angular/forms';
 import { HttpClient } from '@angular/common/http';
 import { CommonModule } from '@angular/common';
+import { Router, RouterModule } from '@angular/router';
 
 @Component({
   selector: 'app-mario',
   standalone: true,
-  imports: [FormsModule, CommonModule],
+  imports: [FormsModule, CommonModule, RouterModule],
   templateUrl: './mario.component.html',
   styleUrl: './mario.component.scss'
 })
@@ -20,8 +21,6 @@ import { CommonModule } from '@angular/common';
     characterColors = ['red', 'green', 'blue', 'orange', 'purple', '#7fb1b8', '#b00b66', 'pink', 'brown'];
     skyColors = ['#87CEEB', '#a0d8ef', '#c0e0ff', '#b0f0ff', '#00334f', '#ff6929'];
     groundColors = ['#654321', '#7c4f2c', '#5b3a1a', '#4a2c15', '#000000', '#32a852', '#386e46', '#657569'];
-    characterColor = 'red';
-    skyColor = '#87CEEB';
     groundColor = this.pick(this.groundColors);
 
     @HostBinding('style.--sky-color') skyBackground = this.pick(this.skyColors);
@@ -64,13 +63,25 @@ import { CommonModule } from '@angular/common';
         { x: 5200, y: 420, width: 180, height: 10 },
         { x: 5500, y: 460, width: 120, height: 10 },
         { x: 5800, y: 500, width: 160, height: 10 },
-        { x: 6100, y: 400, width: 140, height: 10 }
+        { x: 6100, y: 400, width: 140, height: 10 },
+        { x: 6400, y: 450, width: 120, height: 10 }, 
+        { x: 6750, y: 460, width: 180, height: 10 },
+        { x: 7150, y: 480, width: 40, height: 10 },
+        { x: 7300, y: 420, width: 40, height: 10 },
+        { x: 7600, y: 480, width: 30, height: 10 },
+        { x: 7900, y: 200, width: 30, height: 10 },
+        { x: 8250, y: 210, width: 40, height: 10 },
+        { x: 8500, y: 300, width: 30, height: 10 }, 
+        { x: 8800, y: 500, width: 20, height: 10 },
+        { x: 9150, y: 520, width: 10, height: 10 },
+        { x: 9500, y: 300, width: 10, height: 632 }
       ];
 
       constructor(
         private jumpService: JumpService, 
         private logger: LoggerService,
-        private http: HttpClient
+        private http: HttpClient,
+        private router: Router
       ) {}
 
       ngOnInit(): void {
@@ -81,7 +92,6 @@ import { CommonModule } from '@angular/common';
         this.mario.y = this.canvasHeight - 100;
         this.loop();
         this.logger.log('Game initialized');
-        this.logger.log(`New colors: character=${this.characterColor}, sky=${this.skyColor}, ground=${this.groundColor}`);
       }
 
       totalJumps = 0;
@@ -215,5 +225,9 @@ import { CommonModule } from '@angular/common';
           }
         });
       }
+
+      navigateToSettings(): void {
+        this.router.navigate(['/settings']);
+      }
       
     }

src/app/settings/settings.component.html

@@ -0,0 +1 @@
+<div>Main Settings</div>

src/app/settings/settings.component.scss

@@ -0,0 +1 @@
+

src/app/settings/settings.component.ts

@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-settings',
+  standalone: true,
+  imports: [],
+  templateUrl: './settings.component.html',
+  styleUrl: './settings.component.scss'
+})
+export class SettingsComponent {
+
+}

src/app/welcome-screen/welcome-screen.component.html

@@ -0,0 +1,2 @@
+<h1>HEllo</h1>
+<button (click)="navigateToTheGame()">Start a game</button>

src/app/welcome-screen/welcome-screen.component.ts

@@ -0,0 +1,19 @@
+import { Component } from '@angular/core';
+import { Router } from '@angular/router';
+import { routes } from '../app.routes';
+
+@Component({
+  selector: 'app-welcome-screen',
+  standalone: true,
+  imports: [],
+  templateUrl: './welcome-screen.component.html',
+  styleUrl: './welcome-screen.component.scss'
+})
+export class WelcomeScreenComponent {
+  constructor(private router: Router){}
+
+  navigateToTheGame() {
+    console.log(routes);
+    this.router.navigate(['/game']);
+  }
+}

src/main.ts

@@ -2,12 +2,15 @@ import { bootstrapApplication } from '@angular/platform-browser';
 import { appConfig } from './app/app.config';
 import { AppComponent } from './app/app.component';
 import { provideHttpClient } from '@angular/common/http';
+import { provideRouter } from '@angular/router';
+import { routes } from './app/app.routes';
 
 bootstrapApplication(AppComponent, appConfig)
   .catch((err) => console.error(err));
 
   bootstrapApplication(AppComponent, {
     providers: [
-      provideHttpClient()
+      provideHttpClient(),
+      provideRouter(routes)
     ]
   });