From deac1289351f8c302a87157cf5f6eb9f27f1eb5e Mon Sep 17 00:00:00 2001 From: Jan-Marlon Leibl Date: Thu, 27 Mar 2025 15:47:16 +0100 Subject: [PATCH] style(blackjack): format code for better readability --- .../game/blackjack/blackjack.component.html | 12 ++- .../game/blackjack/blackjack.component.ts | 33 ++++--- .../dealer-hand/dealer-hand.component.ts | 14 +-- .../game-controls/game-controls.component.ts | 32 ++++--- .../game-info/game-info.component.ts | 4 +- .../game-result/game-result.component.spec.ts | 5 +- .../game-result/game-result.component.ts | 88 +++++++++---------- .../player-hand/player-hand.component.ts | 14 +-- .../playing-card/playing-card.component.ts | 58 +++++++----- 9 files changed, 139 insertions(+), 121 deletions(-) diff --git a/frontend/src/app/feature/game/blackjack/blackjack.component.html b/frontend/src/app/feature/game/blackjack/blackjack.component.html index 62d5489..1a6b8d3 100644 --- a/frontend/src/app/feature/game/blackjack/blackjack.component.html +++ b/frontend/src/app/feature/game/blackjack/blackjack.component.html @@ -5,17 +5,21 @@
- + @if (isActionInProgress()) {
-
-
+
+
{{ currentAction() }}
} - + @if (gameInProgress()) { ('IN_PROGRESS'); showGameResult = signal(false); - + // Add loading state trackers isActionInProgress = signal(false); currentAction = signal(''); @@ -66,7 +66,7 @@ export default class BlackjackComponent { // When game ends, make sure all dealer cards are visible const isGameOver = game.state !== 'IN_PROGRESS'; - + this.dealerCards.set( game.dealerCards.map((card, index) => ({ ...card, @@ -85,7 +85,7 @@ export default class BlackjackComponent { if (isGameOver) { console.log('Game is over, state:', game.state); this.refreshUserBalance(); - + // Show result immediately without resetting first this.showGameResult.set(true); console.log('Game result dialog should be shown now'); @@ -95,7 +95,7 @@ export default class BlackjackComponent { onNewGame(bet: number): void { this.isActionInProgress.set(true); this.currentAction.set('Spiel wird gestartet...'); - + this.blackjackService.startGame(bet).subscribe({ next: (game) => { this.updateGameState(game); @@ -114,7 +114,7 @@ export default class BlackjackComponent { this.isActionInProgress.set(true); this.currentAction.set('Karte wird gezogen...'); - + this.blackjackService.hit(this.currentGameId()!).subscribe({ next: (game) => { this.updateGameState(game); @@ -130,7 +130,7 @@ export default class BlackjackComponent { onStand(): void { if (!this.currentGameId() || this.isActionInProgress()) return; - + if (this.gameState() !== 'IN_PROGRESS') { console.log('Cannot stand: game is not in progress'); return; @@ -138,7 +138,7 @@ export default class BlackjackComponent { this.isActionInProgress.set(true); this.currentAction.set('Dealer zieht Karten...'); - + this.blackjackService.stand(this.currentGameId()!).subscribe({ next: (game) => { this.updateGameState(game); @@ -154,7 +154,7 @@ export default class BlackjackComponent { onDoubleDown(): void { if (!this.currentGameId() || this.isActionInProgress()) return; - + if (this.gameState() !== 'IN_PROGRESS' || this.playerCards().length !== 2) { console.log('Cannot double down: game is not in progress or more than 2 cards'); return; @@ -162,7 +162,7 @@ export default class BlackjackComponent { this.isActionInProgress.set(true); this.currentAction.set('Einsatz wird verdoppelt...'); - + this.blackjackService.doubleDown(this.currentGameId()!).subscribe({ next: (game) => { this.updateGameState(game); @@ -181,20 +181,19 @@ export default class BlackjackComponent { this.showGameResult.set(false); } - private handleGameError(error: any): void { + private handleGameError(error: HttpErrorResponse): void { if (error instanceof HttpErrorResponse) { if (error.status === 400 && error.error?.error === 'Invalid state') { this.gameInProgress.set(false); - + this.refreshUserBalance(); - } - else if (error.status === 500) { + } else if (error.status === 500) { console.log('Server error occurred. The game may have been updated in another session.'); - + this.gameInProgress.set(false); - + this.refreshUserBalance(); - + if (this.currentGameId()) { this.refreshGameState(this.currentGameId()!); } @@ -209,7 +208,7 @@ export default class BlackjackComponent { }, error: (err) => { console.error('Failed to refresh game state:', err); - } + }, }); } diff --git a/frontend/src/app/feature/game/blackjack/components/dealer-hand/dealer-hand.component.ts b/frontend/src/app/feature/game/blackjack/components/dealer-hand/dealer-hand.component.ts index 990b3c8..6d77f60 100644 --- a/frontend/src/app/feature/game/blackjack/components/dealer-hand/dealer-hand.component.ts +++ b/frontend/src/app/feature/game/blackjack/components/dealer-hand/dealer-hand.component.ts @@ -35,30 +35,30 @@ import { Card } from '../../models/blackjack.model'; export class DealerHandComponent implements OnChanges { @Input() cards: Card[] = []; cardsWithState: (Card & { isNew: boolean; id: string })[] = []; - + private lastCardCount = 0; - + ngOnChanges(changes: SimpleChanges): void { if (changes['cards']) { this.updateCardsWithState(); } } - + private updateCardsWithState(): void { const newCards = this.cards.length > this.lastCardCount; - + this.cardsWithState = this.cards.map((card, index) => { // Consider a card new if it's added after the initial state and is the latest card const isNew = newCards && index >= this.lastCardCount; - + return { ...card, isNew, // Generate a unique ID to help Angular track the cards - id: `${card.suit}-${card.rank}-${index}` + id: `${card.suit}-${card.rank}-${index}`, }; }); - + this.lastCardCount = this.cards.length; } } 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 899417f..9922309 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 @@ -10,7 +10,9 @@ import { Card } from '../../models/blackjack.model';
-
Deine Punkte: {{ calculateHandValue(playerCards) }}
+
+ Deine Punkte: {{ calculateHandValue(playerCards) }} +
Status: {{ getStatusText(gameState) }}
@@ -26,7 +28,9 @@ import { Card } from '../../models/blackjack.model'; Ziehen @if (isActionInProgress) {
-
+
} @@ -39,7 +43,9 @@ import { Card } from '../../models/blackjack.model'; Halten @if (isActionInProgress) {
-
+
} @@ -52,7 +58,9 @@ import { Card } from '../../models/blackjack.model'; Verdoppeln @if (isActionInProgress) {
-
+
} @@ -71,9 +79,9 @@ import { Card } from '../../models/blackjack.model'; }) export class GameControlsComponent { @Input() playerCards: Card[] = []; - @Input() gameState: string = 'IN_PROGRESS'; - @Input() isActionInProgress: boolean = false; - + @Input() gameState = 'IN_PROGRESS'; + @Input() isActionInProgress = false; + @Output() hit = new EventEmitter(); @Output() stand = new EventEmitter(); @Output() doubleDown = new EventEmitter(); @@ -82,7 +90,7 @@ export class GameControlsComponent { calculateHandValue(cards: Card[]): number { let sum = 0; let aceCount = 0; - + const rankValues: Record = { TWO: 2, THREE: 3, @@ -96,9 +104,9 @@ export class GameControlsComponent { JACK: 10, QUEEN: 10, KING: 10, - ACE: 11 + ACE: 11, }; - + for (const card of cards) { if (!card.hidden) { const value = rankValues[card.rank] || 0; @@ -108,12 +116,12 @@ export class GameControlsComponent { } } } - + while (sum > 21 && aceCount > 0) { sum -= 10; aceCount--; } - + return sum; } 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 f6b6091..6219b98 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 @@ -92,7 +92,9 @@ import { FormBuilder, FormGroup, ReactiveFormsModule, Validators } from '@angula Neues Spiel @if (isActionInProgress) {
-
+
} diff --git a/frontend/src/app/feature/game/blackjack/components/game-result/game-result.component.spec.ts b/frontend/src/app/feature/game/blackjack/components/game-result/game-result.component.spec.ts index fbc1d3d..81ac70d 100644 --- a/frontend/src/app/feature/game/blackjack/components/game-result/game-result.component.spec.ts +++ b/frontend/src/app/feature/game/blackjack/components/game-result/game-result.component.spec.ts @@ -8,9 +8,8 @@ describe('GameResultComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - imports: [GameResultComponent] - }) - .compileComponents(); + imports: [GameResultComponent], + }).compileComponents(); fixture = TestBed.createComponent(GameResultComponent); component = fixture.componentInstance; 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 48021c7..e84a7ce 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 @@ -7,55 +7,49 @@ import { animate, style, transition, trigger } from '@angular/animations'; standalone: true, imports: [CommonModule, CurrencyPipe], template: ` -
-
+
+

{{ getResultTitle() }}

{{ getResultMessage() }}

- -
+ +
Einsatz:
{{ amount }} €
- -
{{ isDraw ? 'Zurückgegeben:' : (isWin ? 'Gewonnen:' : 'Verloren:') }}
-
+ {{ isDraw ? 'Zurückgegeben:' : isWin ? 'Gewonnen:' : 'Verloren:' }} +
+
{{ isLoss ? '-' : '+' }}{{ amount }} €
- -
Gesamt:
-
+ Gesamt: +
+
- {{ isWin ? '+' : (isLoss ? '-' : '') }}{{ amount }} € + {{ isWin ? '+' : isLoss ? '-' : '' }}{{ amount }} €
- -
@@ -67,68 +61,66 @@ import { animate, style, transition, trigger } from '@angular/animations'; trigger('fadeInOut', [ transition(':enter', [ style({ opacity: 0 }), - animate('150ms ease-out', style({ opacity: 1 })) + animate('150ms ease-out', style({ opacity: 1 })), ]), - transition(':leave', [ - animate('150ms ease-in', style({ opacity: 0 })) - ]) + transition(':leave', [animate('150ms ease-in', style({ opacity: 0 }))]), ]), trigger('cardAnimation', [ transition(':enter', [ style({ opacity: 0, transform: 'scale(0.95)' }), - animate('200ms ease-out', style({ opacity: 1, transform: 'scale(1)' })) - ]) - ]) - ] + animate('200ms ease-out', style({ opacity: 1, transform: 'scale(1)' })), + ]), + ]), + ], }) export class GameResultComponent { - @Input() gameState: string = ''; - @Input() amount: number = 0; + @Input() gameState = ''; + @Input() amount = 0; @Input() set show(value: boolean) { console.log('GameResultComponent show input changed:', value, 'gameState:', this.gameState); this.visible = value; } - - @Output() close = new EventEmitter(); - + + @Output() gameResultClosed = new EventEmitter(); + visible = false; - + get isWin(): boolean { return this.gameState === 'PLAYER_WON'; } - + get isLoss(): boolean { return this.gameState === 'PLAYER_LOST'; } - + get isDraw(): boolean { return this.gameState === 'DRAW'; } - + getResultTitle(): string { if (this.isWin) return 'Gewonnen!'; if (this.isLoss) return 'Verloren!'; if (this.isDraw) return 'Unentschieden!'; return ''; } - + getResultMessage(): string { if (this.isWin) return 'Glückwunsch! Du hast diese Runde gewonnen.'; if (this.isLoss) return 'Schade! Du hast diese Runde verloren.'; if (this.isDraw) return 'Diese Runde endet unentschieden. Dein Einsatz wurde zurückgegeben.'; return ''; } - + getResultClass(): string { if (this.isWin) return 'text-emerald'; if (this.isLoss) return 'text-accent-red'; if (this.isDraw) return 'text-yellow-400'; return ''; } - + closeDialog(): void { this.visible = false; - this.close.emit(); + this.gameResultClosed.emit(); console.log('Dialog closed by user'); } } diff --git a/frontend/src/app/feature/game/blackjack/components/player-hand/player-hand.component.ts b/frontend/src/app/feature/game/blackjack/components/player-hand/player-hand.component.ts index 2b27fee..33bf547 100644 --- a/frontend/src/app/feature/game/blackjack/components/player-hand/player-hand.component.ts +++ b/frontend/src/app/feature/game/blackjack/components/player-hand/player-hand.component.ts @@ -37,30 +37,30 @@ import { Card } from '../../models/blackjack.model'; export class PlayerHandComponent implements OnChanges { @Input() cards: Card[] = []; cardsWithState: (Card & { isNew: boolean; id: string })[] = []; - + private lastCardCount = 0; - + ngOnChanges(changes: SimpleChanges): void { if (changes['cards']) { this.updateCardsWithState(); } } - + private updateCardsWithState(): void { const newCards = this.cards.length > this.lastCardCount; - + this.cardsWithState = this.cards.map((card, index) => { // Consider a card new if it's added after the initial state and is the latest card const isNew = newCards && index >= this.lastCardCount; - + return { ...card, isNew, // Generate a unique ID to help Angular track the cards - id: `${card.suit}-${card.rank}-${index}` + id: `${card.suit}-${card.rank}-${index}`, }; }); - + this.lastCardCount = this.cards.length; } } diff --git a/frontend/src/app/feature/game/blackjack/components/playing-card/playing-card.component.ts b/frontend/src/app/feature/game/blackjack/components/playing-card/playing-card.component.ts index e006bd4..662ddc6 100644 --- a/frontend/src/app/feature/game/blackjack/components/playing-card/playing-card.component.ts +++ b/frontend/src/app/feature/game/blackjack/components/playing-card/playing-card.component.ts @@ -1,4 +1,12 @@ -import { ChangeDetectionStrategy, Component, Input, AfterViewInit, ElementRef, OnChanges, SimpleChanges } from '@angular/core'; +import { + ChangeDetectionStrategy, + Component, + Input, + AfterViewInit, + ElementRef, + OnChanges, + SimpleChanges, +} from '@angular/core'; import { CommonModule } from '@angular/common'; import { suitSymbols, Suit } from '../../models/blackjack.model'; import { gsap } from 'gsap'; @@ -14,7 +22,9 @@ import { gsap } from 'gsap'; [class]="hidden ? 'bg-red-800' : 'bg-white'" > @if (!hidden) { - {{ getDisplayRank(rank) }} + {{ + getDisplayRank(rank) + }} } @if (!hidden) { } @if (!hidden) { - {{ - getDisplayRank(rank) - }} + {{ getDisplayRank(rank) }} }
`, - styles: [` - .card-element { - transform-style: preserve-3d; - backface-visibility: hidden; - } - `], + styles: [ + ` + .card-element { + transform-style: preserve-3d; + backface-visibility: hidden; + } + `, + ], changeDetection: ChangeDetectionStrategy.OnPush, }) export class PlayingCardComponent implements AfterViewInit, OnChanges { @Input({ required: true }) rank!: string; @Input({ required: true }) suit!: Suit; @Input({ required: true }) hidden!: boolean; - @Input() isNew: boolean = false; + @Input() isNew = false; constructor(private elementRef: ElementRef) {} @@ -66,31 +80,31 @@ export class PlayingCardComponent implements AfterViewInit, OnChanges { const cardElement = this.elementRef.nativeElement.querySelector('.card-element'); gsap.fromTo( cardElement, - { - y: -100, + { + y: -100, opacity: 0, rotation: -10, - scale: 0.7 + scale: 0.7, }, - { - y: 0, + { + y: 0, opacity: 1, rotation: 0, scale: 1, - duration: 0.5, - ease: 'power2.out' + duration: 0.5, + ease: 'power2.out', } ); } private animateCardFlip(): void { const cardElement = this.elementRef.nativeElement.querySelector('.card-element'); - gsap.to(cardElement, { - rotationY: 180, + gsap.to(cardElement, { + rotationY: 180, duration: 0.3, onComplete: () => { gsap.set(cardElement, { rotationY: 0 }); - } + }, }); }