From bc26cd4c42ca10f19972076a3fbe8c034113dceb Mon Sep 17 00:00:00 2001 From: miwr Date: Thu, 10 Apr 2025 15:47:56 +0200 Subject: [PATCH] settings page added --- src/app/mario/mario.component.scss | 206 ++++++++++++++--------- src/app/mario/mario.component.ts | 36 +++- src/app/settings/settings.component.html | 23 ++- src/app/settings/settings.component.scss | 74 ++++++++ src/app/settings/settings.component.ts | 10 ++ 5 files changed, 266 insertions(+), 83 deletions(-) diff --git a/src/app/mario/mario.component.scss b/src/app/mario/mario.component.scss index 333c909..8189b88 100644 --- a/src/app/mario/mario.component.scss +++ b/src/app/mario/mario.component.scss @@ -1,83 +1,135 @@ body, html { - margin: 0; - padding: 0; - overflow: hidden; - } - - canvas { - display: block; - background-color: var(--sky-color); - background-image: url("./cloud.png"); + margin: 0; + padding: 0; + 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; } - .hud { - position: fixed; - top: 10px; - right: 20px; - z-index: 100; - background: rgba(255, 255, 255, 0.8); - padding: 10px 15px; - border-radius: 8px; - box-shadow: 0 0 10px #999; - font-family: sans-serif; - } - - .jump-counter { - display: flex; - align-items: center; - gap: 10px; - } - - button { - padding: 4px 10px; - font-size: 14px; - cursor: pointer; + &:active { + transform: scale(0.97); } +} - .modal-backdrop { - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100%; - background: rgba(0,0,0,0.5); - display: flex; - justify-content: center; - align-items: center; - z-index: 999; +/* Modal Backdrop */ +.modal-backdrop { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: rgba(0,0,0,0.4); + display: flex; + justify-content: center; + align-items: center; + z-index: 999; +} + +/* Modal Box */ +.modal { + background: linear-gradient(to bottom right, #ffffff, #f1faff); + 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; +} + +.modal input { + width: 100%; + padding: 10px; + margin-top: 12px; + font-size: 1rem; + border-radius: 12px; + border: 2px solid #97c9ff; + background: #ffffff; + color: #3a3a3a; + + &:focus { + outline: none; + background: rgba(178, 219, 250, 0.3); + box-shadow: 0 0 0 3px #97c9ff; } - - .modal { - background: white; - padding: 20px; - border-radius: 10px; - min-width: 300px; - box-shadow: 0 0 20px rgba(0, 112, 177, 0.719); - } - - .modal input { - width: 100%; - padding: 8px; - margin-top: 10px; - font-size: 16px; - } - - .modal-buttons { - display: flex; - justify-content: flex-end; - 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; - } \ No newline at end of file +} + +.modal-buttons { + display: flex; + justify-content: flex-end; + margin-top: 15px; + gap: 10px; +} + +/* Settings Icon/Button */ +.settings { + padding: 8px; + position: fixed; + top: 10px; + right: 10px; + cursor: pointer; + z-index: 101; + border-radius: 50%; + background: #ffffffcc; + border: 2px dashed #57b1ff; + box-shadow: 0 0 10px rgba(87, 177, 255, 0.5); + display: flex; + justify-content: center; + align-items: center; +} diff --git a/src/app/mario/mario.component.ts b/src/app/mario/mario.component.ts index 9413fda..4ddecc6 100644 --- a/src/app/mario/mario.component.ts +++ b/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, - jumpStrength: 21, - gravity: 0.5, + speed: this.speed, + jumpStrength: this.jumpingStrength, + 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; diff --git a/src/app/settings/settings.component.html b/src/app/settings/settings.component.html index 69f0626..a0db910 100644 --- a/src/app/settings/settings.component.html +++ b/src/app/settings/settings.component.html @@ -1 +1,22 @@ -
Main Settings
\ No newline at end of file +
+
Main Settings
+ + + + + + + + + + + + + + + + +

Jumping strength (1-100):

Gravity (0.0-1.0):

Speed (1-100):

+ +
+ \ No newline at end of file diff --git a/src/app/settings/settings.component.scss b/src/app/settings/settings.component.scss index 8b13789..a6d7318 100644 --- a/src/app/settings/settings.component.scss +++ b/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; + } + } + \ No newline at end of file diff --git a/src/app/settings/settings.component.ts b/src/app/settings/settings.component.ts index e873abe..c31a1aa 100644 --- a/src/app/settings/settings.component.ts +++ b/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 } } ); + } + }