style: Format code for readability and consistency
Some checks failed
Some checks failed
This commit is contained in:
parent
775205b54c
commit
7bec17dd52
3 changed files with 67 additions and 26 deletions
|
@ -13,28 +13,35 @@ import { GameState } from '../../enum/gameState';
|
||||||
<h2 class="modal-heading" [class]="getResultClass()">{{ getResultTitle() }}</h2>
|
<h2 class="modal-heading" [class]="getResultClass()">{{ getResultTitle() }}</h2>
|
||||||
<p class="py-2 text-text-secondary mb-4">{{ getResultMessage() }}</p>
|
<p class="py-2 text-text-secondary mb-4">{{ getResultMessage() }}</p>
|
||||||
|
|
||||||
<div class="bg-deep-blue-light/50 rounded-lg p-5 mb-6 shadow-inner border border-deep-blue-light/30">
|
<div
|
||||||
|
class="bg-deep-blue-light/50 rounded-lg p-5 mb-6 shadow-inner border border-deep-blue-light/30"
|
||||||
|
>
|
||||||
<div class="grid grid-cols-2 gap-4">
|
<div class="grid grid-cols-2 gap-4">
|
||||||
<div class="text-text-secondary">Einsatz:</div>
|
<div class="text-text-secondary">Einsatz:</div>
|
||||||
<div class="font-medium text-right">{{ amount | currency:'EUR' }}</div>
|
<div class="font-medium text-right">{{ amount | currency: 'EUR' }}</div>
|
||||||
|
|
||||||
<div class="text-text-secondary">
|
<div class="text-text-secondary">
|
||||||
{{ isDraw ? 'Zurückgegeben:' : isWin ? 'Gewonnen:' : 'Verloren:' }}
|
{{ isDraw ? 'Zurückgegeben:' : isWin ? 'Gewonnen:' : 'Verloren:' }}
|
||||||
</div>
|
</div>
|
||||||
<div class="font-medium text-right" [ngClass]="{
|
<div
|
||||||
'text-emerald': isWin,
|
class="font-medium text-right"
|
||||||
'text-accent-red': isLoss,
|
[ngClass]="{
|
||||||
'text-yellow-400': isDraw
|
'text-emerald': isWin,
|
||||||
}">
|
'text-accent-red': isLoss,
|
||||||
{{ isLoss ? '-' : '+' }}{{ isWin ? (amount * 2) : amount | currency:'EUR' }}
|
'text-yellow-400': isDraw,
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
{{ isLoss ? '-' : '+' }}{{ isWin ? amount * 2 : (amount | currency: 'EUR') }}
|
||||||
<div *ngIf="isWin" class="text-xs text-text-secondary">
|
<div *ngIf="isWin" class="text-xs text-text-secondary">
|
||||||
(Einsatz {{ amount | currency:'EUR' }} × 2)
|
(Einsatz {{ amount | currency: 'EUR' }} × 2)
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="text-text-secondary border-t border-text-secondary/20 pt-3 font-medium">Kontostand:</div>
|
<div class="text-text-secondary border-t border-text-secondary/20 pt-3 font-medium">
|
||||||
|
Kontostand:
|
||||||
|
</div>
|
||||||
<div class="font-medium text-right border-t border-text-secondary/20 pt-3">
|
<div class="font-medium text-right border-t border-text-secondary/20 pt-3">
|
||||||
{{ balance | currency:'EUR' }}
|
{{ balance | currency: 'EUR' }}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -1,4 +1,13 @@
|
||||||
import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnDestroy, OnInit, Output, signal } from '@angular/core';
|
import {
|
||||||
|
ChangeDetectionStrategy,
|
||||||
|
Component,
|
||||||
|
EventEmitter,
|
||||||
|
Input,
|
||||||
|
OnDestroy,
|
||||||
|
OnInit,
|
||||||
|
Output,
|
||||||
|
signal,
|
||||||
|
} from '@angular/core';
|
||||||
import { CommonModule } from '@angular/common';
|
import { CommonModule } from '@angular/common';
|
||||||
import { animate, style, transition, trigger } from '@angular/animations';
|
import { animate, style, transition, trigger } from '@angular/animations';
|
||||||
import { interval, takeWhile } from 'rxjs';
|
import { interval, takeWhile } from 'rxjs';
|
||||||
|
@ -12,15 +21,18 @@ import { interval, takeWhile } from 'rxjs';
|
||||||
<div class="modal-card" [@cardAnimation]>
|
<div class="modal-card" [@cardAnimation]>
|
||||||
<h2 class="modal-heading text-accent-red">WARNUNG!</h2>
|
<h2 class="modal-heading text-accent-red">WARNUNG!</h2>
|
||||||
<p class="py-2 text-text-secondary mb-4">
|
<p class="py-2 text-text-secondary mb-4">
|
||||||
Du hast nicht genug Geld für den Double Down. Du bist jetzt im Minus und schuldest uns {{ amount | currency:'EUR' }}.
|
Du hast nicht genug Geld für den Double Down. Du bist jetzt im Minus und schuldest uns
|
||||||
|
{{ amount | currency: 'EUR' }}.
|
||||||
</p>
|
</p>
|
||||||
<p class="py-2 text-accent-red mb-4 font-bold">
|
<p class="py-2 text-accent-red mb-4 font-bold">
|
||||||
Liefer das Geld sofort an den Dead Drop oder es wird unangenehme Konsequenzen geben!
|
Liefer das Geld sofort an den Dead Drop oder es wird unangenehme Konsequenzen geben!
|
||||||
</p>
|
</p>
|
||||||
<div class="bg-deep-blue-light/50 rounded-lg p-5 mb-6 shadow-inner border border-deep-blue-light/30">
|
<div
|
||||||
|
class="bg-deep-blue-light/50 rounded-lg p-5 mb-6 shadow-inner border border-deep-blue-light/30"
|
||||||
|
>
|
||||||
<div class="grid grid-cols-2 gap-4">
|
<div class="grid grid-cols-2 gap-4">
|
||||||
<div class="text-text-secondary">Schulden:</div>
|
<div class="text-text-secondary">Schulden:</div>
|
||||||
<div class="font-medium text-right text-accent-red">{{ amount | currency:'EUR' }}</div>
|
<div class="font-medium text-right text-accent-red">{{ amount | currency: 'EUR' }}</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="text-center mb-6">
|
<div class="text-center mb-6">
|
||||||
|
@ -38,19 +50,39 @@ import { interval, takeWhile } from 'rxjs';
|
||||||
<div class="text-center mb-6">
|
<div class="text-center mb-6">
|
||||||
<div class="relative">
|
<div class="relative">
|
||||||
<div class="absolute inset-0 bg-accent-red/20 blur-xl rounded-full"></div>
|
<div class="absolute inset-0 bg-accent-red/20 blur-xl rounded-full"></div>
|
||||||
<div class="relative bg-gradient-to-b from-accent-red to-red-900 p-8 rounded-lg border-2 border-accent-red shadow-lg">
|
<div
|
||||||
|
class="relative bg-gradient-to-b from-accent-red to-red-900 p-8 rounded-lg border-2 border-accent-red shadow-lg"
|
||||||
|
>
|
||||||
<div class="flex items-center justify-center gap-4 mb-4">
|
<div class="flex items-center justify-center gap-4 mb-4">
|
||||||
<svg class="w-12 h-12 text-accent-red animate-[spin_2s_linear_infinite]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
|
<svg
|
||||||
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-1-13h2v6h-2zm0 8h2v2h-2z"/>
|
class="w-12 h-12 text-accent-red animate-[spin_2s_linear_infinite]"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
fill="currentColor"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-1-13h2v6h-2zm0 8h2v2h-2z"
|
||||||
|
/>
|
||||||
</svg>
|
</svg>
|
||||||
<span class="text-4xl font-black tracking-wider text-white animate-[pulse_1s_ease-in-out_infinite]">
|
<span
|
||||||
|
class="text-4xl font-black tracking-wider text-white animate-[pulse_1s_ease-in-out_infinite]"
|
||||||
|
>
|
||||||
ZEIT ABGELAUFEN
|
ZEIT ABGELAUFEN
|
||||||
</span>
|
</span>
|
||||||
<svg class="w-12 h-12 text-accent-red animate-[spin_2s_linear_infinite]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
|
<svg
|
||||||
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-1-13h2v6h-2zm0 8h2v2h-2z"/>
|
class="w-12 h-12 text-accent-red animate-[spin_2s_linear_infinite]"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
fill="currentColor"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-1-13h2v6h-2zm0 8h2v2h-2z"
|
||||||
|
/>
|
||||||
</svg>
|
</svg>
|
||||||
</div>
|
</div>
|
||||||
<div class="text-2xl font-bold text-white/90 tracking-wider animate-[pulse_1s_ease-in-out_infinite]">
|
<div
|
||||||
|
class="text-2xl font-bold text-white/90 tracking-wider animate-[pulse_1s_ease-in-out_infinite]"
|
||||||
|
>
|
||||||
KONSEQUENZEN FOLGEN
|
KONSEQUENZEN FOLGEN
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -117,7 +149,7 @@ export class DebtDialogComponent implements OnInit, OnDestroy {
|
||||||
this.timerSubscription = interval(1000)
|
this.timerSubscription = interval(1000)
|
||||||
.pipe(takeWhile(() => this.timeLeft() > 0))
|
.pipe(takeWhile(() => this.timeLeft() > 0))
|
||||||
.subscribe(() => {
|
.subscribe(() => {
|
||||||
this.timeLeft.update(value => value - 1);
|
this.timeLeft.update((value) => value - 1);
|
||||||
if (this.timeLeft() <= 5) {
|
if (this.timeLeft() <= 5) {
|
||||||
this.warningSound.play();
|
this.warningSound.play();
|
||||||
}
|
}
|
||||||
|
|
|
@ -19,7 +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"
|
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"
|
routerLink="/home"
|
||||||
>
|
>
|
||||||
<span [class]="balance() < 0 ? 'text-accent-red' : ''">{{ balance() | currency: 'EUR' : 'symbol' : '1.2-2' }}</span>
|
<span [class]="balance() < 0 ? 'text-accent-red' : ''">{{
|
||||||
|
balance() | currency: 'EUR' : 'symbol' : '1.2-2'
|
||||||
|
}}</span>
|
||||||
</div>
|
</div>
|
||||||
<button (click)="logout()" class="button-primary px-4 py-1.5">Abmelden</button>
|
<button (click)="logout()" class="button-primary px-4 py-1.5">Abmelden</button>
|
||||||
}
|
}
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue