SZUT/casino
SZUT/casino
Archived
3
1
Fork 0
Code Issues Pull requests 2 Releases 162 Packages 2 Wiki Activity Actions

style(blackjack): format code for better readability

Browse source
This commit is contained in:
Jan-Marlon Leibl 2025-03-27 15:47:16 +01:00
commit deac128935
Signed by: jleibl
GPG key ID: 300B2F906DC6F1D5
9 changed files with 139 additions and 121 deletions
Download patch file Download diff file Expand all files Collapse all files

58
frontend/src/app/feature/game/blackjack/components/playing-card/playing-card.component.ts
View file

@ -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) {
<span class="text-xl font-bold" [class]="isRedSuit ? 'text-accent-red' : 'text-black'">{{ getDisplayRank(rank) }}</span>
<span class="text-xl font-bold" [class]="isRedSuit ? 'text-accent-red' : 'text-black'">{{
getDisplayRank(rank)
}}</span>
}
@if (!hidden) {
<span
@ -24,25 +34,29 @@ import { gsap } from 'gsap';
>
}
@if (!hidden) {
<span class="text-xl font-bold self-end rotate-180" [class]="isRedSuit ? 'text-accent-red' : 'text-black'">{{
getDisplayRank(rank)
}}</span>
<span
class="text-xl font-bold self-end rotate-180"
[class]="isRedSuit ? 'text-accent-red' : 'text-black'"
>{{ getDisplayRank(rank) }}</span
>
}
</div>
`,
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 });
}
},
});
}