diff --git a/frontend/bun.lock b/frontend/bun.lock index e51c957..7112f3e 100644 --- a/frontend/bun.lock +++ b/frontend/bun.lock @@ -21,7 +21,6 @@ "@tailwindcss/postcss": "^4.0.3", "ajv": "8.17.1", "ajv-formats": "3.0.1", - "countup.js": "^2.8.0", "gsap": "^3.12.7", "keycloak-angular": "^19.0.0", "keycloak-js": "^26.0.0", @@ -898,13 +897,6 @@ "cosmiconfig": ["cosmiconfig@9.0.0", "", { "dependencies": { "env-paths": "^2.2.1", "import-fresh": "^3.3.0", "js-yaml": "^4.1.0", "parse-json": "^5.2.0" }, "peerDependencies": { "typescript": ">=4.9.5" }, "optionalPeers": ["typescript"] }, "sha512-itvL5h8RETACmOTFc4UfIyB2RfEHi71Ax6E/PivVxq9NseKbOWpeyHEOIbmAw1rs8Ak0VursQNww7lf7YtUwzg=="], -<<<<<<< HEAD -======= - "countup.js": ["countup.js@2.8.0", "", {}, "sha512-f7xEhX0awl4NOElHulrl4XRfKoNH3rB+qfNSZZyjSZhaAoUk6elvhH+MNxMmlmuUJ2/QNTWPSA7U4mNtIAKljQ=="], - - "critters": ["critters@0.0.24", "", { "dependencies": { "chalk": "^4.1.0", "css-select": "^5.1.0", "dom-serializer": "^2.0.0", "domhandler": "^5.0.2", "htmlparser2": "^8.0.2", "postcss": "^8.4.23", "postcss-media-query-parser": "^0.2.3" } }, "sha512-Oyqew0FGM0wYUSNqR0L6AteO5MpMoUU0rhKRieXeiKs+PmRTxiJMyaunYB2KF6fQ3dzChXKCpbFOEJx3OQ1v/Q=="], - ->>>>>>> f2d447a (feat(blackjack): add animated number component and usage) "cross-spawn": ["cross-spawn@7.0.6", "", { "dependencies": { "path-key": "^3.1.0", "shebang-command": "^2.0.0", "which": "^2.0.1" } }, "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA=="], "css-loader": ["css-loader@7.1.2", "", { "dependencies": { "icss-utils": "^5.1.0", "postcss": "^8.4.33", "postcss-modules-extract-imports": "^3.1.0", "postcss-modules-local-by-default": "^4.0.5", "postcss-modules-scope": "^3.2.0", "postcss-modules-values": "^4.0.0", "postcss-value-parser": "^4.2.0", "semver": "^7.5.4" }, "peerDependencies": { "@rspack/core": "0.x || 1.x", "webpack": "^5.27.0" }, "optionalPeers": ["@rspack/core", "webpack"] }, "sha512-6WvYYn7l/XEGN8Xu2vWFt9nVzrCn39vKyTEFf/ExEyoksJjjSZV/0/35XPlMbpnr6VGhZIUg5yJrL8tGfes/FA=="], diff --git a/frontend/package.json b/frontend/package.json index 2ee7ed0..4775e66 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -30,7 +30,6 @@ "@tailwindcss/postcss": "^4.0.3", "ajv": "8.17.1", "ajv-formats": "3.0.1", - "countup.js": "^2.8.0", "gsap": "^3.12.7", "keycloak-angular": "^19.0.0", "keycloak-js": "^26.0.0", diff --git a/frontend/src/app/feature/game/blackjack/blackjack.component.html b/frontend/src/app/feature/game/blackjack/blackjack.component.html index aa7426a..93328a3 100644 --- a/frontend/src/app/feature/game/blackjack/blackjack.component.html +++ b/frontend/src/app/feature/game/blackjack/blackjack.component.html @@ -6,6 +6,19 @@ + @if (isActionInProgress()) { +
+
+
+ {{ currentAction() }} +
+
+ } + @if (gameInProgress()) { (''); showDebtDialog = signal(false); debtAmount = signal(0); @@ -95,6 +96,7 @@ export default class BlackjackComponent implements OnInit { onNewGame(bet: number): void { this.isActionInProgress.set(true); + this.currentAction.set('Spiel wird gestartet...'); this.blackjackService.startGame(bet).subscribe({ next: (game) => { @@ -113,6 +115,7 @@ export default class BlackjackComponent implements OnInit { if (!this.currentGameId() || this.isActionInProgress()) return; this.isActionInProgress.set(true); + this.currentAction.set('Karte wird gezogen...'); this.blackjackService.hit(this.currentGameId()!).subscribe({ next: (game) => { @@ -139,6 +142,7 @@ export default class BlackjackComponent implements OnInit { } this.isActionInProgress.set(true); + this.currentAction.set('Dealer zieht Karten...'); this.blackjackService.stand(this.currentGameId()!).subscribe({ next: (game) => { @@ -163,6 +167,7 @@ export default class BlackjackComponent implements OnInit { } this.isActionInProgress.set(true); + this.currentAction.set('Einsatz wird verdoppelt...'); this.blackjackService.doubleDown(this.currentGameId()!).subscribe({ next: (game) => { diff --git a/frontend/src/app/feature/game/blackjack/components/animated-number/animated-number.component.ts b/frontend/src/app/feature/game/blackjack/components/animated-number/animated-number.component.ts deleted file mode 100644 index 25ea0e4..0000000 --- a/frontend/src/app/feature/game/blackjack/components/animated-number/animated-number.component.ts +++ /dev/null @@ -1,83 +0,0 @@ -import { - ChangeDetectionStrategy, - Component, - Input, - OnChanges, - SimpleChanges, - ElementRef, - ViewChild, - AfterViewInit, -} from '@angular/core'; -import { CommonModule, CurrencyPipe } from '@angular/common'; -import { CountUp } from 'countup.js'; - -@Component({ - selector: 'app-animated-number', - standalone: true, - imports: [CommonModule, CurrencyPipe], - template: ` {{ formattedValue }} `, - changeDetection: ChangeDetectionStrategy.OnPush, -}) -export class AnimatedNumberComponent implements OnChanges, AfterViewInit { - @Input() value = 0; - @Input() duration = 1; - @Input() ease = 'power1.out'; - - @ViewChild('numberElement') numberElement!: ElementRef; - - private countUp: CountUp | null = null; - private previousValue = 0; - formattedValue = '0,00 €'; - - ngAfterViewInit(): void { - this.initializeCountUp(); - if (this.countUp && this.value !== 0) { - this.countUp.start(() => { - this.previousValue = this.value; - }); - } - } - - ngOnChanges(changes: SimpleChanges): void { - if (changes['value']) { - if (this.countUp) { - const endVal = this.value; - - this.countUp.update(endVal); - this.previousValue = endVal; - } else { - this.formattedValue = new Intl.NumberFormat('de-DE', { - style: 'currency', - currency: 'EUR', - minimumFractionDigits: 2, - maximumFractionDigits: 2, - }).format(this.value); - } - } - } - - private initializeCountUp(): void { - if (this.numberElement) { - this.countUp = new CountUp(this.numberElement.nativeElement, this.value, { - startVal: this.previousValue, - duration: this.duration, - easingFn: (t, b, c, d) => { - if (this.ease === 'power1.out') { - return c * (1 - Math.pow(1 - t / d, 1)) + b; - } - return c * (t / d) + b; - }, - formattingFn: (value) => { - const formatted = new Intl.NumberFormat('de-DE', { - style: 'currency', - currency: 'EUR', - minimumFractionDigits: 2, - maximumFractionDigits: 2, - }).format(value); - this.formattedValue = formatted; - return formatted; - }, - }); - } - } -} diff --git a/frontend/src/app/feature/game/blackjack/components/game-controls/game-controls.component.ts b/frontend/src/app/feature/game/blackjack/components/game-controls/game-controls.component.ts index 9799b08..d01adc6 100644 --- a/frontend/src/app/feature/game/blackjack/components/game-controls/game-controls.component.ts +++ b/frontend/src/app/feature/game/blackjack/components/game-controls/game-controls.component.ts @@ -28,27 +28,54 @@ import { GameControlsService } from '@blackjack/services/game-controls.service'; (click)="hit.emit()" class="button-primary px-8 py-4 text-lg font-medium min-w-[120px] relative" [disabled]="gameState !== GameState.IN_PROGRESS || isActionInProgress" + [class.opacity-50]="isActionInProgress" > - Ziehen + Ziehen + @if (isActionInProgress) { +
+
+
+ } @@ -70,12 +97,4 @@ export class GameControlsComponent { protected readonly GameState = GameState; constructor(protected gameControlsService: GameControlsService) {} - - get canDoubleDown(): boolean { - return ( - this.gameState === GameState.IN_PROGRESS && - this.playerCards.length === 2 && - !this.isActionInProgress - ); - } } diff --git a/frontend/src/app/feature/game/blackjack/components/game-info/game-info.component.ts b/frontend/src/app/feature/game/blackjack/components/game-info/game-info.component.ts index ecd1fad..df29e81 100644 --- a/frontend/src/app/feature/game/blackjack/components/game-info/game-info.component.ts +++ b/frontend/src/app/feature/game/blackjack/components/game-info/game-info.component.ts @@ -11,12 +11,11 @@ import { import { CommonModule, CurrencyPipe } from '@angular/common'; import { FormGroup, ReactiveFormsModule } from '@angular/forms'; import { BettingService } from '@blackjack/services/betting.service'; -import { AnimatedNumberComponent } from '../animated-number/animated-number.component'; @Component({ selector: 'app-game-info', standalone: true, - imports: [CommonModule, CurrencyPipe, ReactiveFormsModule, AnimatedNumberComponent], + imports: [CommonModule, CurrencyPipe, ReactiveFormsModule], template: `

Spiel Informationen

@@ -24,7 +23,7 @@ import { AnimatedNumberComponent } from '../animated-number/animated-number.comp
Aktuelle Wette: - + {{ currentBet | currency: 'EUR' }}
diff --git a/frontend/src/app/feature/game/blackjack/components/game-result/game-result.component.ts b/frontend/src/app/feature/game/blackjack/components/game-result/game-result.component.ts index b841ee8..63ca955 100644 --- a/frontend/src/app/feature/game/blackjack/components/game-result/game-result.component.ts +++ b/frontend/src/app/feature/game/blackjack/components/game-result/game-result.component.ts @@ -2,12 +2,11 @@ import { ChangeDetectionStrategy, Component, Input, Output, EventEmitter } from import { CommonModule, CurrencyPipe } from '@angular/common'; import { animate, style, transition, trigger } from '@angular/animations'; import { GameState } from '../../enum/gameState'; -import { AnimatedNumberComponent } from '../animated-number/animated-number.component'; @Component({ selector: 'app-game-result', standalone: true, - imports: [CommonModule, CurrencyPipe, AnimatedNumberComponent], + imports: [CommonModule, CurrencyPipe], template: `
@@ -19,9 +18,7 @@ import { AnimatedNumberComponent } from '../animated-number/animated-number.comp >
Einsatz:
-
- -
+
{{ amount | currency: 'EUR' }}
{{ isDraw ? 'Zurückgegeben:' : isWin ? 'Gewonnen:' : 'Verloren:' }} @@ -34,14 +31,9 @@ import { AnimatedNumberComponent } from '../animated-number/animated-number.comp 'text-yellow-400': isDraw, }" > - {{ isLoss ? '-' : '+' }} - + {{ isLoss ? '-' : '+' }}{{ isWin ? amount * 2 : (amount | currency: 'EUR') }}
- (Einsatz - × 2) + (Einsatz {{ amount | currency: 'EUR' }} × 2)
@@ -49,7 +41,7 @@ import { AnimatedNumberComponent } from '../animated-number/animated-number.comp Kontostand:
- + {{ balance | currency: 'EUR' }}
diff --git a/frontend/src/app/service/user.service.ts b/frontend/src/app/service/user.service.ts index 1e801c6..2ad53ce 100644 --- a/frontend/src/app/service/user.service.ts +++ b/frontend/src/app/service/user.service.ts @@ -13,6 +13,7 @@ export class UserService { public currentUser$ = this.currentUserSubject.asObservable(); constructor() { + // Initialize with current user data this.getCurrentUser().subscribe(); } diff --git a/frontend/src/app/shared/components/debt-dialog/debt-dialog.component.ts b/frontend/src/app/shared/components/debt-dialog/debt-dialog.component.ts index a97f431..dd60fdc 100644 --- a/frontend/src/app/shared/components/debt-dialog/debt-dialog.component.ts +++ b/frontend/src/app/shared/components/debt-dialog/debt-dialog.component.ts @@ -11,19 +11,18 @@ import { import { CommonModule } from '@angular/common'; import { animate, style, transition, trigger } from '@angular/animations'; import { interval, Subscription, takeWhile } from 'rxjs'; -import { AnimatedNumberComponent } from '@blackjack/components/animated-number/animated-number.component'; @Component({ selector: 'app-debt-dialog', standalone: true, - imports: [CommonModule, AnimatedNumberComponent], + imports: [CommonModule], template: `

WARNUNG!

Du hast nicht genug Geld für den Double Down. Du bist jetzt im Minus und schuldest uns - . + {{ amount | currency: 'EUR' }}.

Liefer das Geld sofort an den Dead Drop oder es wird unangenehme Konsequenzen geben! @@ -33,9 +32,7 @@ import { AnimatedNumberComponent } from '@blackjack/components/animated-number/a >

Schulden:
-
- -
+
{{ amount | currency: 'EUR' }}
diff --git a/frontend/src/app/shared/components/navbar/navbar.component.html b/frontend/src/app/shared/components/navbar/navbar.component.html index e9f8e91..b34aea5 100644 --- a/frontend/src/app/shared/components/navbar/navbar.component.html +++ b/frontend/src/app/shared/components/navbar/navbar.component.html @@ -19,9 +19,9 @@ class="text-white font-bold bg-deep-blue-contrast rounded-full px-4 py-2 text-sm hover:bg-deep-blue-contrast/80 hover:cursor-pointer hover:scale-105 transition-all active:scale-95 select-none duration-300" routerLink="/home" > - - - + {{ + balance() | currency: 'EUR' : 'symbol' : '1.2-2' + }}
} diff --git a/frontend/src/app/shared/components/navbar/navbar.component.ts b/frontend/src/app/shared/components/navbar/navbar.component.ts index f1fffba..6b972ac 100644 --- a/frontend/src/app/shared/components/navbar/navbar.component.ts +++ b/frontend/src/app/shared/components/navbar/navbar.component.ts @@ -11,13 +11,12 @@ import { KeycloakService } from 'keycloak-angular'; import { CurrencyPipe } from '@angular/common'; import { UserService } from '@service/user.service'; import { Subscription } from 'rxjs'; -import { AnimatedNumberComponent } from '@blackjack/components/animated-number/animated-number.component'; @Component({ selector: 'app-navbar', templateUrl: './navbar.component.html', standalone: true, - imports: [RouterModule, CurrencyPipe, AnimatedNumberComponent], + imports: [RouterModule, CurrencyPipe], changeDetection: ChangeDetectionStrategy.OnPush, }) export class NavbarComponent implements OnInit, OnDestroy {