style: Format code for readability and consistency
Some checks failed
Some checks failed
This commit is contained in:
parent
775205b54c
commit
7bec17dd52
GPG key ID:
300B2F906DC6F1D5
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>
|
||||
<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="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">
|
||||
{{ isDraw ? 'Zurückgegeben:' : isWin ? 'Gewonnen:' : 'Verloren:' }}
|
||||
</div>
|
||||
<div class="font-medium text-right" [ngClass]="{
|
||||
'text-emerald': isWin,
|
||||
'text-accent-red': isLoss,
|
||||
'text-yellow-400': isDraw
|
||||
}">
|
||||
{{ isLoss ? '-' : '+' }}{{ isWin ? (amount * 2) : amount | currency:'EUR' }}
|
||||
<div
|
||||
class="font-medium text-right"
|
||||
[ngClass]="{
|
||||
'text-emerald': isWin,
|
||||
'text-accent-red': isLoss,
|
||||
'text-yellow-400': isDraw,
|
||||
}"
|
||||
>
|
||||
{{ isLoss ? '-' : '+' }}{{ isWin ? amount * 2 : (amount | currency: 'EUR') }}
|
||||
<div *ngIf="isWin" class="text-xs text-text-secondary">
|
||||
(Einsatz {{ amount | currency:'EUR' }} × 2)
|
||||
(Einsatz {{ amount | currency: 'EUR' }} × 2)
|
||||
</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">
|
||||
{{ balance | currency:'EUR' }}
|
||||
{{ balance | currency: 'EUR' }}
|
||||
</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 { animate, style, transition, trigger } from '@angular/animations';
|
||||
import { interval, takeWhile } from 'rxjs';
|
||||
|
|
@ -12,19 +21,22 @@ import { interval, takeWhile } from 'rxjs';
|
|||
<div class="modal-card" [@cardAnimation]>
|
||||
<h2 class="modal-heading text-accent-red">WARNUNG!</h2>
|
||||
<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 class="py-2 text-accent-red mb-4 font-bold">
|
||||
Liefer das Geld sofort an den Dead Drop oder es wird unangenehme Konsequenzen geben!
|
||||
</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="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 class="text-center mb-6">
|
||||
<div
|
||||
<div
|
||||
class="text-8xl font-bold text-accent-red"
|
||||
[class.animate-pulse]="timeLeft() <= 10"
|
||||
[class.animate-bounce]="timeLeft() <= 5"
|
||||
|
|
@ -38,19 +50,39 @@ import { interval, takeWhile } from 'rxjs';
|
|||
<div class="text-center mb-6">
|
||||
<div class="relative">
|
||||
<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">
|
||||
<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">
|
||||
<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
|
||||
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>
|
||||
<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
|
||||
</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">
|
||||
<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
|
||||
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>
|
||||
</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
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -117,7 +149,7 @@ export class DebtDialogComponent implements OnInit, OnDestroy {
|
|||
this.timerSubscription = interval(1000)
|
||||
.pipe(takeWhile(() => this.timeLeft() > 0))
|
||||
.subscribe(() => {
|
||||
this.timeLeft.update(value => value - 1);
|
||||
this.timeLeft.update((value) => value - 1);
|
||||
if (this.timeLeft() <= 5) {
|
||||
this.warningSound.play();
|
||||
}
|
||||
|
|
@ -138,4 +170,4 @@ export class DebtDialogComponent implements OnInit, OnDestroy {
|
|||
this.visible = false;
|
||||
this.dialogClosed.emit();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
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>
|
||||
<button (click)="logout()" class="button-primary px-4 py-1.5">Abmelden</button>
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue