settings page added

src/app/mario/mario.component.scss

@@ -1,83 +1,135 @@
 body, html {
-    margin: 0;
+  margin: 0;
-    padding: 0;
+  padding: 0;
-    overflow: hidden;
+  overflow: hidden;
+  font-family: 'Comic Sans MS', 'Baloo 2', cursive;
+  background: linear-gradient(to bottom, #cce7ff, #e6f2ff);
+}
+
+canvas {
+  display: block;
+  background-color: var(--sky-color);
+  background-image: url('./cloud.png');
+  // background-size: cover;
+  border-top: 6px dashed #57b1ff;
+  border-bottom: 6px dashed #57b1ff;
+  box-shadow: inset 0 -6px 12px rgba(87, 177, 255, 0.3);
+}
+
+/* HUD Container */
+.hud {
+  position: fixed;
+  top: 10px;
+  right: 20px;
+  z-index: 100;
+  background: linear-gradient(to bottom right, #fdfbfb, #ebedee);
+  padding: 12px 18px;
+  border-radius: 20px;
+  border: 4px dashed #57b1ff;
+  box-shadow: 0 0 20px rgba(178, 219, 250, 0.5);
+  font-family: inherit;
+  display: flex;
+  align-items: center;
+  gap: 15px;
+}
+
+/* Jump Counter */
+.jump-counter {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  font-size: 1.4rem;
+  font-weight: 800;
+  color: #ff4f81;
+  text-shadow: 2px 2px rgba(178, 219, 250, 0.5);
+}
+
+/* Buttons (Restart, Invite) */
+button {
+  padding: 6px 14px;
+  font-size: 1rem;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: #ffffff;
+  border: 2px solid #57b1ff;
+  border-radius: 12px;
+  color: #3a3a3a;
+  box-shadow: 0 4px 8px rgba(87, 177, 255, 0.2);
+  transition: 0.2s ease;
+
+  &:hover {
+    background: rgba(178, 219, 250, 0.5);
+    box-shadow: 0 0 0 3px #97c9ff;
   }
 
-  canvas {
+  &:active {
-    display: block;
+    transform: scale(0.97);
-    background-color: var(--sky-color);
-    background-image: url("./cloud.png");
   }
+}
 
-  .hud {
+/* Modal Backdrop */
-    position: fixed;
+.modal-backdrop {
-    top: 10px;
+  position: fixed;
-    right: 20px;
+  top: 0;
-    z-index: 100;
+  left: 0;
-    background: rgba(255, 255, 255, 0.8);
+  width: 100%;
-    padding: 10px 15px;
+  height: 100%;
-    border-radius: 8px;
+  background: rgba(0,0,0,0.4);
-    box-shadow: 0 0 10px #999;
+  display: flex;
-    font-family: sans-serif;
+  justify-content: center;
-  }
+  align-items: center;
+  z-index: 999;
+}
 
-  .jump-counter {
+/* Modal Box */
-    display: flex;
+.modal {
-    align-items: center;
+  background: linear-gradient(to bottom right, #ffffff, #f1faff);
-    gap: 10px;
+  padding: 24px;
-  }
+  border-radius: 20px;
+  min-width: 300px;
+  border: 4px dashed #57b1ff;
+  box-shadow: 0 0 30px rgba(87, 177, 255, 0.7);
+  display: flex;
+  flex-direction: column;
+}
 
-  button {
+.modal input {
-    padding: 4px 10px;
+  width: 100%;
-    font-size: 14px;
+  padding: 10px;
-    cursor: pointer;
+  margin-top: 12px;
-  }
+  font-size: 1rem;
+  border-radius: 12px;
+  border: 2px solid #97c9ff;
+  background: #ffffff;
+  color: #3a3a3a;
 
-  .modal-backdrop {
+  &:focus {
-    position: fixed;
+    outline: none;
-    top: 0;
+    background: rgba(178, 219, 250, 0.3);
-    left: 0;
+    box-shadow: 0 0 0 3px #97c9ff;
-    width: 100%;
-    height: 100%;
-    background: rgba(0,0,0,0.5);
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    z-index: 999;
   }
+}
 
-  .modal {
+.modal-buttons {
-    background: white;
+  display: flex;
-    padding: 20px;
+  justify-content: flex-end;
-    border-radius: 10px;
+  margin-top: 15px;
-    min-width: 300px;
+  gap: 10px;
-    box-shadow: 0 0 20px rgba(0, 112, 177, 0.719);
+}
-  }
 
-  .modal input {
+/* Settings Icon/Button */
-    width: 100%;
+.settings {
-    padding: 8px;
+  padding: 8px;
-    margin-top: 10px;
+  position: fixed;
-    font-size: 16px;
+  top: 10px;
-  }
+  right: 10px;
-  
+  cursor: pointer;
-  .modal-buttons {
+  z-index: 101;
-    display: flex;
+  border-radius: 50%;
-    justify-content: flex-end;
+  background: #ffffffcc;
-    margin-top: 15px;
+  border: 2px dashed #57b1ff;
-    gap: 10px;
+  box-shadow: 0 0 10px rgba(87, 177, 255, 0.5);
-  }
+  display: flex;
-  
+  justify-content: center;
-  .settings {
+  align-items: center;
-    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,7 +4,8 @@ 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';
+import { ActivatedRoute, Router, RouterModule } from '@angular/router';
+import { Subscription } from 'rxjs';
 
 @Component({
   selector: 'app-mario',
@@ -25,6 +26,11 @@ import { Router, RouterModule } from '@angular/router';
 
     @HostBinding('style.--sky-color') skyBackground = this.pick(this.skyColors);
 
+    jumpingStrength: number = 21 ;
+    gravity: number = 0.8;
+    speed: number = 6;
+    private routeSubscription: Subscription | undefined;
+
       mario = {
         x: 50,
         y: 0,
@@ -32,9 +38,9 @@ import { Router, RouterModule } from '@angular/router';
         height: 60,
         dx: 0,
         dy: 0,
-        speed: 4,
+        speed: this.speed,
-        jumpStrength: 21,
+        jumpStrength: this.jumpingStrength,
-        gravity: 0.5,
+        gravity: this.gravity,
         onGround: false,
         color: this.pick(this.characterColors)
       };
@@ -81,10 +87,30 @@ import { Router, RouterModule } from '@angular/router';
         private jumpService: JumpService, 
         private logger: LoggerService,
         private http: HttpClient,
-        private router: Router
+        private router: Router,
+        private route: ActivatedRoute
       ) {}
 
       ngOnInit(): void {
+        this.route.queryParams.subscribe(params => {
+        const jump = Number(params['jump']);
+        if (!isNaN(jump) && jump >= 0 && jump <= 100) {
+          console.log(jump);
+          this.mario.jumpStrength = jump;
+        }
+
+        const gravity = Number(params['gravity']);
+        if (!isNaN(gravity) && gravity > 0 && gravity <= 1) {
+          console.log(gravity);
+          this.mario.gravity = gravity;
+        }
+
+        const speed = Number(params['speed']);
+        if (!isNaN(speed) && speed > 0 && speed <= 100) {
+          console.log(speed);
+          this.mario.speed = speed;
+        }
+        });
         this.canvas = document.getElementById('gameCanvas') as HTMLCanvasElement;
         this.ctx = this.canvas.getContext('2d')!;
         this.canvas.width = this.canvasWidth;

src/app/settings/settings.component.html

@@ -1 +1,22 @@
-<div>Main Settings</div>
+<div class="settings-container">
+    <div>Main Settings</div>
+  
+    <table>
+      <tbody>
+        <tr>
+          <td><p>Jumping strength (1-100):</p></td>
+          <td><input type="text" id="jump" value="22"/></td>
+        </tr>
+        <tr>
+          <td><p>Gravity (0.0-1.0):</p></td>
+          <td><input type="text" id="gravity" value="0.5" /></td>
+        </tr>
+        <tr>
+          <td><p>Speed (1-100):</p></td>
+          <td><input type="text" id="speed" value="6" /></td>
+        </tr>
+      </tbody>
+    </table>
+    <button (click)="navigateToTheGame()">Continue</button>
+  </div>
+  

src/app/settings/settings.component.scss

@@ -1 +1,75 @@
+.settings-container {
+    font-family: 'Comic Sans MS', 'Baloo 2', cursive;
+    padding: 2rem;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    background: linear-gradient(to bottom right, #fdfbfb, #ebedee);
+    border-radius: 25px;
+    box-shadow: 0 0 20px rgba(178, 219, 250, 0.5);
+    width: fit-content;
+    margin: 2rem auto;
+    border: 4px dashed #57b1ff;
+  }
+  
+  .settings-container > div {
+    font-size: 2.5rem;
+    font-weight: 800;
+    margin-bottom: 1.5rem;
+    color: #ff4f81;
+    text-shadow: 2px 2px rgba(178, 219, 250, 0.5);
+  }
+  
+  table {
+    width: 100%;
+    border-spacing: 12px;
+  }
+  
+  td {
+    vertical-align: middle;
+  }
+  
+  p {
+    margin: 0;
+    font-size: 1.2rem;
+    font-weight: bold;
+    color: #5e548e;
+  }
+  
+  input {
+    width: 160px;
+    padding: 0.6rem 1rem;
+    border: none;
+    border-radius: 12px;
+    font-size: 1rem;
+    background: #ffffff;
+    color: #3a3a3a;
+    box-shadow: 0 4px 8px rgba(255, 255, 255, 0.1);
+    transition: 0.2s ease;
+  
+    &:focus {
+      outline: none;
+      background: rgba(178, 219, 250, 0.5);
+      box-shadow: 0 0 0 3px #97c9ff;
+    }
+  }
+
+  button{
+    font-family: 'Comic Sans MS', 'Baloo 2', cursive;
+    width: 160px;
+    padding: 0.6rem 1rem;
+    border: none;
+    border-radius: 12px;
+    font-size: 1rem;
+    background: #ffffff;
+    color: #3a3a3a;
+    box-shadow: 0 4px 8px rgba(255, 255, 255, 0.1);
+    transition: 0.1s ease;
+  
+    &:focus {
+      outline: none;
+      background: rgba(178, 219, 250, 0.5);
+      box-shadow: 0 0 0 3px #97c9ff;
+    }
+  }
   

src/app/settings/settings.component.ts

@@ -1,4 +1,5 @@
 import { Component } from '@angular/core';
+import { Router } from '@angular/router';
 
 @Component({
   selector: 'app-settings',
@@ -9,4 +10,13 @@ import { Component } from '@angular/core';
 })
 export class SettingsComponent {
 
+  constructor(private router: Router) {}
+
+  navigateToTheGame(): void {
+    const inputJump = (document.getElementById('jump') as HTMLInputElement).value;
+    const inputGravity = (document.getElementById('gravity') as HTMLInputElement).value;
+    const inputSpeed = (document.getElementById('speed') as HTMLInputElement).value;
+    this.router.navigate(['/game'], { queryParams: { jump: inputJump, gravity: inputGravity, speed: inputSpeed } } );
+  }
+
 }