fix: Claude fixed most issues
This commit is contained in:
parent
09677effe6
commit
9770ad3d8f
4 changed files with 328 additions and 75 deletions
|
|
@ -1,42 +1,89 @@
|
|||
<p>Coinflip works!</p>
|
||||
|
||||
<div class="container mx-auto">
|
||||
<div class="grid grid-cols-4">
|
||||
<div class="col-span-3 w-full flex flex-col">
|
||||
<div class="coin-container mx-auto">
|
||||
<div id="coin" class="coin animate-to-tails">
|
||||
<div class="container mx-auto py-6">
|
||||
<div class="grid grid-cols-1 md:grid-cols-4 gap-6">
|
||||
<div class="col-span-1 md:col-span-3 w-full flex flex-col items-center justify-center">
|
||||
<!-- Game Result Display -->
|
||||
@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' }}
|
||||
</h2>
|
||||
<p class="text-lg">
|
||||
Coin landed on: <span class="font-bold">{{ gameResult()?.coinSide === 'HEAD' ? 'HEAD' : 'TAILS' }}</span>
|
||||
</p>
|
||||
@if (gameResult()?.isWin || gameResult()?.win) {
|
||||
<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">
|
||||
<div
|
||||
class="front coin-side bg-yellow-500 flex items-center justify-center text-2xl font-bold"
|
||||
>
|
||||
Heads
|
||||
HEAD
|
||||
</div>
|
||||
<div
|
||||
class="back coin-side bg-gray-700 flex items-center justify-center text-2xl font-bold text-white"
|
||||
>
|
||||
Tails
|
||||
<span>TAILS</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex gap-3 mt-3 mx-auto">
|
||||
<button [disabled]="gameInProgress()" class="button-primary py-2 px-4 relative">
|
||||
Bet tails
|
||||
|
||||
<!-- Game controls -->
|
||||
<div class="flex gap-4 mt-3 mx-auto">
|
||||
<button
|
||||
(click)="betTails()"
|
||||
[disabled]="gameInProgress()"
|
||||
class="button-primary py-3 px-6 relative text-lg"
|
||||
[class.opacity-50]="gameInProgress()"
|
||||
>
|
||||
Bet TAILS
|
||||
</button>
|
||||
<button [disabled]="gameInProgress()" class="button-primary py-2 px-4 relative">
|
||||
Bet heads
|
||||
<button
|
||||
(click)="betHeads()"
|
||||
[disabled]="gameInProgress()"
|
||||
class="button-primary py-3 px-6 relative text-lg"
|
||||
[class.opacity-50]="gameInProgress()"
|
||||
>
|
||||
Bet HEAD
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Game information panel -->
|
||||
<div class="col-span-1">
|
||||
<div class="card p-4">
|
||||
<h3 class="section-heading text-xl mb-4">Spiel Informationen</h3>
|
||||
<h3 class="section-heading text-xl mb-4">Game Information</h3>
|
||||
<div class="space-y-4">
|
||||
<!-- Current bet display -->
|
||||
<div class="flex justify-between items-center">
|
||||
<span class="text-text-secondary">Aktuelle Wette:</span>
|
||||
<span class="text-text-secondary">Current Bet:</span>
|
||||
<span [class]="currentBet() > 0 ? 'text-accent-red' : 'text-text-secondary'">
|
||||
<app-animated-number [value]="currentBet()" [duration]="0.5"></app-animated-number>
|
||||
<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>
|
||||
<span class="text-white">
|
||||
{{ balance() | currency: 'EUR' }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- Bet amount percentage buttons -->
|
||||
@if (!gameInProgress()) {
|
||||
<div class="grid grid-cols-2 gap-2 mb-4">
|
||||
<button (click)="setBetAmount(0.1)" class="button-primary py-2 text-sm">10%</button>
|
||||
|
|
@ -46,22 +93,32 @@
|
|||
</div>
|
||||
}
|
||||
|
||||
<form class="space-y-2">
|
||||
<div class="space-y-1">
|
||||
<label for="bet" class="text-sm text-text-secondary">Einsatz</label>
|
||||
<input
|
||||
type="number"
|
||||
id="bet"
|
||||
class="w-full px-3 py-2 bg-deep-blue-light text-white rounded focus:outline-none focus:ring-2 focus:ring-emerald disabled:opacity-50"
|
||||
[min]="1"
|
||||
[max]="balance()"
|
||||
[value]="currentBet()"
|
||||
step="0.01"
|
||||
[disabled]="gameInProgress()"
|
||||
[placeholder]="balance() | currency: 'EUR'"
|
||||
/>
|
||||
</div>
|
||||
</form>
|
||||
<!-- Custom bet input -->
|
||||
<div class="space-y-1">
|
||||
<label for="bet" class="text-sm text-text-secondary">Bet Amount</label>
|
||||
<input
|
||||
type="number"
|
||||
id="bet"
|
||||
class="w-full px-3 py-2 bg-deep-blue-light text-white rounded focus:outline-none focus:ring-2 focus:ring-emerald disabled:opacity-50"
|
||||
[min]="1"
|
||||
[max]="balance()"
|
||||
[ngModel]="betInputValue()"
|
||||
(input)="updateBet($event)"
|
||||
step="1"
|
||||
[disabled]="gameInProgress()"
|
||||
[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>
|
||||
<ul class="text-sm text-text-secondary space-y-1">
|
||||
<li>• Choose your bet amount</li>
|
||||
<li>• Select Heads or Tails</li>
|
||||
<li>• Win double your bet if correct</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Reference in a new issue