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

fix: Fix claude mirrored text
Some checks failed
CI / Get Changed Files (pull_request) Successful in 18s
Details
CI / Checkstyle Main (pull_request) Has been skipped
Details
CI / Docker backend validation (pull_request) Has been skipped
Details
CI / eslint (pull_request) Successful in 49s
Details
CI / oxlint (pull_request) Successful in 47s
Details
CI / prettier (pull_request) Failing after 49s
Details
CI / Docker frontend validation (pull_request) Successful in 1m10s
Details
CI / test-build (pull_request) Successful in 38s
Details

Browse source
This commit is contained in:
Jan K9f 2025-05-21 10:52:10 +02:00
commit 0d9b0ad987
3 changed files with 82 additions and 64 deletions
Download patch file Download diff file Expand all files Collapse all files

41
frontend/src/app/feature/game/coinflip/coinflip.component.html
View file

@ -5,55 +5,62 @@
@if (gameResult()) {
<div class="mb-6 text-center result-text">
<h2 class="text-2xl font-bold mb-2" [class]="getResultClass()">
{{ (gameResult()?.isWin || gameResult()?.win) ? 'You Won!' : 'You Lost' }}
{{ gameResult()?.isWin ? 'You Won!' : 'You Lost' }}
</h2>
<p class="text-lg">
Coin landed on: <span class="font-bold">{{ gameResult()?.coinSide === 'HEAD' ? 'HEAD' : 'TAILS' }}</span>
Coin landed on:
<span class="font-bold">{{
gameResult()?.coinSide === 'HEAD' ? 'HEAD' : 'TAILS'
}}</span>
</p>
@if (gameResult()?.isWin || gameResult()?.win) {
@if (gameResult()?.isWin) {
<p class="text-xl mt-2">
<span class="text-emerald-500">+{{ gameResult()?.payout | currency: 'EUR' }}</span>
</p>
}
</div>
}
<!-- Error message display -->
@if (errorMessage()) {
<div class="mb-6 text-center">
<p class="text-accent-red font-bold">{{ errorMessage() }}</p>
</div>
}
<!-- Coin animation area -->
<div class="coin-container mx-auto mb-8">
<div #coinElement id="coin" class="coin">
<!-- Head side -->
<div
class="front coin-side bg-yellow-500 flex items-center justify-center text-2xl font-bold"
>
HEAD
<div class="coin-text">HEAD</div>
</div>
<!-- Tails side with non-mirrored text -->
<div
class="back coin-side bg-gray-700 flex items-center justify-center text-2xl font-bold text-white"
>
<span>TAILS</span>
<!-- Using direct inline transform to counter the mirroring effect -->
<span style="display: inline-block; transform: scaleX(1)">TAILS</span>
</div>
</div>
</div>
<!-- Game controls -->
<div class="flex gap-4 mt-3 mx-auto">
<button
(click)="betTails()"
[disabled]="gameInProgress()"
<button
(click)="betTails()"
[disabled]="gameInProgress()"
class="button-primary py-3 px-6 relative text-lg"
[class.opacity-50]="gameInProgress()"
>
Bet TAILS
</button>
<button
(click)="betHeads()"
[disabled]="gameInProgress()"
<button
(click)="betHeads()"
[disabled]="gameInProgress()"
class="button-primary py-3 px-6 relative text-lg"
[class.opacity-50]="gameInProgress()"
>
@ -61,7 +68,7 @@
</button>
</div>
</div>
<!-- Game information panel -->
<div class="col-span-1">
<div class="card p-4">
@ -74,7 +81,7 @@
<app-animated-number [value]="currentBet()" [duration]="0.5"></app-animated-number> €
</span>
</div>
<!-- Available balance -->
<div class="flex justify-between items-center">
<span class="text-text-secondary">Your Balance:</span>
@ -109,7 +116,7 @@
[placeholder]="balance() | currency: 'EUR'"
/>
</div>
<!-- Rules/info section -->
<div class="mt-6 pt-4 border-t border-gray-700">
<h4 class="text-lg font-semibold mb-2">How to Play</h4>