src/app/app.component.html

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

src/app/app.component.ts

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

src/app/app.routes.ts

@@ -1,12 +1,3 @@
 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,7 +6,6 @@
       Jumps: {{ totalJumps }}
       <button (click)="restartGame()">Restart</button>
       <button (click)="showInvitePopup = true">Invite Friend</button>
-      <button (click)="navigateToSettings()">Settings</button>
     </div>
   </div>
 
@@ -24,6 +23,4 @@
       <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, 112, 177, 0.719);
+    box-shadow: 0 0 20px rgba(0,0,0,0.3);
   }
   
   .modal input {
@@ -68,16 +68,4 @@ 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,12 +4,11 @@ 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, RouterModule],
+  imports: [FormsModule, CommonModule],
   templateUrl: './mario.component.html',
   styleUrl: './mario.component.scss'
 })
@@ -21,6 +20,8 @@ import { Router, RouterModule } from '@angular/router';
     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);
@@ -63,25 +64,13 @@ import { Router, RouterModule } from '@angular/router';
         { 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 {
@@ -92,6 +81,7 @@ import { Router, RouterModule } from '@angular/router';
         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;
@@ -225,9 +215,5 @@ import { Router, RouterModule } from '@angular/router';
           }
         });
       }
-
-      navigateToSettings(): void {
-        this.router.navigate(['/settings']);
-      }
       
     }

src/app/settings/settings.component.html

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

src/app/settings/settings.component.scss

@@ -1 +0,0 @@
-

src/app/settings/settings.component.ts

@@ -1,12 +0,0 @@
-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

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

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

@@ -1,19 +0,0 @@
-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,15 +2,12 @@ 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)
     ]
   });