diff --git a/frontend/src/app/feature/game/dice/dice.component.html b/frontend/src/app/feature/game/dice/dice.component.html index 6cf5d12..5cc7a0e 100644 --- a/frontend/src/app/feature/game/dice/dice.component.html +++ b/frontend/src/app/feature/game/dice/dice.component.html @@ -1,305 +1,121 @@ -
-

Dice

-
-
-
-
-
-
-

- Zielwert: - {{ - diceForm.get('targetValue')?.value | number: '1.0-2' - }} -

-
+
+

Dice Game

-
-
- 0 - 25 - 50 - 75 - 100 -
- - - -
-
- - - -
-
- {{ potentialWin() | currency: 'EUR' : 'symbol' : '1.2-2' }} -
- - - {{ diceForm.get('rollOver')?.value ? '>' : '<' }} - -
- - - - @if (rolledValue() !== null) { -
-
-
- } -
- -
- @for (i of [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100]; track i) { -
- } -
-
- - @if ( - hasError('targetValue', 'required') || - hasError('targetValue', 'min') || - hasError('targetValue', 'max') - ) { -
- @if (hasError('targetValue', 'required')) { - Zielwert ist erforderlich - } - @if (hasError('targetValue', 'min')) { - Zielwert muss mindestens 1 sein - } - @if (hasError('targetValue', 'max')) { - Zielwert darf höchstens 99 sein - } -
- } -
- -
- - -
-
- - - @if (rolledValue() !== null) { -
-
- @if (win()) { - - - -

- Du hast gewonnen! Auszahlung: {{ payout() | currency: 'EUR' : 'symbol' : '1.2-2' }} -

- } @else { - - - -

Du hast verloren.

- } -
-
- } -
- -
-
-

Spielinformationen

-
-
- Möglicher Gewinn: - {{ - potentialWin() | currency: 'EUR' : 'symbol' : '1.2-2' - }} -
- -
- Gewinnchance: - {{ winChance() | number: '1.0-2' }}% -
- -
- - - - -
- -
-
- -
+
+
+ +
+
+ @if (hasError('betAmount', 'required')) { - Einsatz ist erforderlich + Bet Amount is required } @if (hasError('betAmount', 'min')) { - Einsatz muss mindestens 0.01 seinBet Amount must be at least 0.01 }
- - -
-

Spielanleitung

-
    -
  • • Setze deinen Einsatz und Zielwert
    • -
  • • Wähle "Über Zielwert" oder "Unter Zielwert"
    • -
  • • Gewinne, wenn der Würfel zu deinen Gunsten fällt
    • -
  • • Höheres Risiko = höhere Belohnung
    • -
+
+
Roll Mode:
+
+ + +
- -
+ +
+ + + @if (hasError('targetValue', 'required')) { + Target Value is required + } + @if (hasError('targetValue', 'min')) { + Target Value must be at least 1 + } + @if (hasError('targetValue', 'max')) { + Target Value must be at most 100 + } +
+
+ +
+

+ Win Chance: {{ winChance() | number: '1.0-2' }}% +

+

+ Potential Win: + {{ + potentialWin() | currency: 'EUR' : 'symbol' : '1.2-2' + }} +

+
+ + + +
+ +
+ @if (rolledValue() !== null) { +
+ {{ rolledValue() }} +
+ }
+ + @if (rolledValue() !== null) { +
+ @if (win()) { +

+ You Won! Payout: {{ payout() | currency: 'EUR' : 'symbol' : '1.2-2' }} +

+ } @else { +

You Lost.

+ } +
+ }
diff --git a/frontend/src/app/feature/game/dice/dice.component.ts b/frontend/src/app/feature/game/dice/dice.component.ts index aaca5c5..b4ced3f 100644 --- a/frontend/src/app/feature/game/dice/dice.component.ts +++ b/frontend/src/app/feature/game/dice/dice.component.ts @@ -11,9 +11,6 @@ import { DiceService } from './dice.service'; import { DiceDto, DiceResult } from './dice.model'; import { tap } from 'rxjs/operators'; import { UserService } from '@service/user.service'; -import { PlaySoundDirective } from '@shared/directives/play-sound.directive'; -import { DragSoundDirective } from '@shared/directives/drag-sound.directive'; -import { AudioService } from '@shared/services/audio.service'; type DiceFormGroup = FormGroup<{ betAmount: FormControl; @@ -24,14 +21,13 @@ type DiceFormGroup = FormGroup<{ @Component({ selector: 'app-dice', standalone: true, - imports: [CommonModule, ReactiveFormsModule, PlaySoundDirective, DragSoundDirective], + imports: [CommonModule, ReactiveFormsModule], templateUrl: './dice.component.html', }) export default class DiceComponent implements OnInit { private readonly formBuilder = inject(FormBuilder); private readonly diceService = inject(DiceService); private readonly userService = inject(UserService); - private readonly audioService = inject(AudioService); rolledValue = signal(null); win = signal(null); @@ -53,23 +49,23 @@ export default class DiceComponent implements OnInit { createDiceForm(): DiceFormGroup { return this.formBuilder.group({ - betAmount: new FormControl(1, { - validators: [Validators.required, Validators.min(1)], + betAmount: new FormControl(1.0, { + validators: [Validators.required, Validators.min(0.01)], nonNullable: true, }), rollOver: new FormControl(true, { validators: [Validators.required], nonNullable: true, }), - targetValue: new FormControl(50, { - validators: [Validators.required, Validators.min(1), Validators.max(99)], + targetValue: new FormControl(50.5, { + validators: [Validators.required, Validators.min(1), Validators.max(100)], nonNullable: true, }), }); } toggleRollMode(): void { - const currentMode = this.diceForm.get('rollOver')?.value ?? true; + const currentMode = this.diceForm.get('rollOver')?.value; this.diceForm.get('rollOver')?.setValue(!currentMode); } @@ -108,11 +104,6 @@ export default class DiceComponent implements OnInit { this.rolledValue.set(result.rolledValue); this.win.set(result.win); this.payout.set(result.payout); - - if (result.win) { - this.audioService.playWinSound(); - } - this.userService.refreshCurrentUser(); }, error: (error) => { @@ -121,29 +112,6 @@ export default class DiceComponent implements OnInit { }); } - setBetAmount(percentage: number): void { - const user = this.userService['authService'].currentUserValue; - if (!user) return; - - const balance = user.balance || 0; - - const newBet = Math.max(1, Math.floor(balance * percentage * 100) / 100); - - this.diceForm.get('betAmount')?.setValue(newBet); - this.calculateWinChanceAndPotentialWin(); - } - - getTrackGradient(): string { - const targetValue = this.diceForm.get('targetValue')?.value ?? 50; - const isRollOver = this.diceForm.get('rollOver')?.value ?? true; - - if (isRollOver) { - return `linear-gradient(to right, var(--color-accent-red) ${targetValue}%, var(--color-emerald) ${targetValue}%)`; - } else { - return `linear-gradient(to right, var(--color-accent-red) ${targetValue}%, var(--color-emerald) ${targetValue}%)`; - } - } - hasError(controlName: string, errorName: string): boolean { const control = this.diceForm.get(controlName); return control !== null && control.touched && control.hasError(errorName); diff --git a/frontend/src/app/shared/directives/drag-sound.directive.ts b/frontend/src/app/shared/directives/drag-sound.directive.ts deleted file mode 100644 index 332cacc..0000000 --- a/frontend/src/app/shared/directives/drag-sound.directive.ts +++ /dev/null @@ -1,39 +0,0 @@ -import { Directive, ElementRef, HostListener, inject, Input, OnInit } from '@angular/core'; -import { AudioService } from '../services/audio.service'; -import { AbstractControl } from '@angular/forms'; - -@Directive({ - selector: '[appDragSound]', - standalone: true, -}) -export class DragSoundDirective implements OnInit { - private audioService = inject(AudioService); - private elementRef = inject(ElementRef); - private lastValue: number | null = null; - - @Input('appDragSound') formControl: AbstractControl | null = null; - - ngOnInit() { - if (this.formControl) { - this.lastValue = this.formControl.value; - - this.formControl.valueChanges.subscribe((newValue) => { - if (this.lastValue !== newValue) { - this.playSound(); - this.lastValue = newValue; - } - }); - } - } - - private playSound() { - this.audioService.playDragStepSound(); - } - - @HostListener('input') - onInput() { - if (!this.formControl) { - this.playSound(); - } - } -} diff --git a/frontend/src/app/shared/services/audio.service.ts b/frontend/src/app/shared/services/audio.service.ts index 53850c0..720658e 100644 --- a/frontend/src/app/shared/services/audio.service.ts +++ b/frontend/src/app/shared/services/audio.service.ts @@ -27,15 +27,4 @@ export class AudioService { audio.currentTime = 0; audio.play().catch((error) => console.error('Error playing win sound:', error)); } - - getDragSound(): HTMLAudioElement { - return this.getAudio('drag.mp3'); - } - - playDragStepSound(): void { - const audio = this.getAudio('drag.mp3'); - audio.currentTime = 0; - audio.volume = 0.5; - audio.play().catch((error) => console.error('Error playing drag step sound:', error)); - } }