121 lines
4.4 KiB
HTML
121 lines
4.4 KiB
HTML
<div class="container mx-auto px-4 py-8 space-y-8">
|
|
<h1 class="text-3xl font-bold text-white mb-6">Dice Game</h1>
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-4 gap-8">
|
|
<div class="lg:col-span-1 card p-8 space-y-6">
|
|
<form [formGroup]="diceForm" (ngSubmit)="roll()" class="space-y-6">
|
|
<div class="controls space-y-4">
|
|
<div>
|
|
<label for="betAmount" class="block text-text-secondary mb-2">Bet Amount:</label>
|
|
<input
|
|
id="betAmount"
|
|
type="number"
|
|
formControlName="betAmount"
|
|
min="0.01"
|
|
step="0.01"
|
|
class="w-full bg-deep-blue-light text-white rounded-lg p-2 focus:outline-none focus:ring-1 focus:ring-emerald"
|
|
/>
|
|
@if (hasError('betAmount', 'required')) {
|
|
<span class="text-accent-red text-sm mt-1 block">Bet Amount is required</span>
|
|
}
|
|
@if (hasError('betAmount', 'min')) {
|
|
<span class="text-accent-red text-sm mt-1 block"
|
|
>Bet Amount must be at least 0.01</span
|
|
>
|
|
}
|
|
</div>
|
|
|
|
<div>
|
|
<div class="block text-text-secondary mb-2">Roll Mode:</div>
|
|
<div class="roll-mode flex rounded-lg overflow-hidden">
|
|
<button
|
|
type="button"
|
|
(click)="toggleRollMode()"
|
|
[ngClass]="{
|
|
'bg-emerald text-white': diceForm.get('rollOver')?.value,
|
|
'bg-deep-blue-light text-text-secondary': !diceForm.get('rollOver')?.value,
|
|
}"
|
|
class="flex-1 py-2 text-center font-semibold transition-colors duration-200"
|
|
>
|
|
Roll Over
|
|
</button>
|
|
<button
|
|
type="button"
|
|
(click)="toggleRollMode()"
|
|
[ngClass]="{
|
|
'bg-emerald text-white': !diceForm.get('rollOver')?.value,
|
|
'bg-deep-blue-light text-text-secondary': diceForm.get('rollOver')?.value,
|
|
}"
|
|
class="flex-1 py-2 text-center font-semibold transition-colors duration-200"
|
|
>
|
|
Roll Under
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<label for="targetValue" class="block text-text-secondary mb-2"
|
|
>Target Value: {{ diceForm.get('targetValue')?.value | number: '1.0-2' }}</label
|
|
>
|
|
<input
|
|
id="targetValue"
|
|
type="range"
|
|
formControlName="targetValue"
|
|
min="1"
|
|
max="100"
|
|
step="0.01"
|
|
class="w-full h-2 bg-deep-blue-light rounded-lg appearance-none cursor-pointer range-lg accent-emerald"
|
|
/>
|
|
@if (hasError('targetValue', 'required')) {
|
|
<span class="text-accent-red text-sm mt-1 block">Target Value is required</span>
|
|
}
|
|
@if (hasError('targetValue', 'min')) {
|
|
<span class="text-accent-red text-sm mt-1 block"
|
|
>Target Value must be at least 1</span
|
|
>
|
|
}
|
|
@if (hasError('targetValue', 'max')) {
|
|
<span class="text-accent-red text-sm mt-1 block"
|
|
>Target Value must be at most 100</span
|
|
>
|
|
}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="info space-y-2 text-text-secondary">
|
|
<p>
|
|
Win Chance: <span class="text-white">{{ winChance() | number: '1.0-2' }}%</span>
|
|
</p>
|
|
<p>
|
|
Potential Win:
|
|
<span class="text-white">{{
|
|
potentialWin() | currency: 'EUR' : 'symbol' : '1.2-2'
|
|
}}</span>
|
|
</p>
|
|
</div>
|
|
|
|
<button type="submit" class="button-primary w-full py-2 font-bold">Roll Dice</button>
|
|
</form>
|
|
</div>
|
|
|
|
<div class="lg:col-span-3 card p-8 flex items-center justify-center">
|
|
@if (rolledValue() !== null) {
|
|
<div class="text-white text-center text-8xl font-bold">
|
|
{{ rolledValue() }}
|
|
</div>
|
|
}
|
|
</div>
|
|
</div>
|
|
|
|
@if (rolledValue() !== null) {
|
|
<div class="result max-w-sm mx-auto card p-6 mt-8 text-center">
|
|
@if (win()) {
|
|
<p class="text-emerald text-base font-semibold">
|
|
You Won! Payout: {{ payout() | currency: 'EUR' : 'symbol' : '1.2-2' }}
|
|
</p>
|
|
} @else {
|
|
<p class="text-accent-red text-base font-semibold">You Lost.</p>
|
|
}
|
|
</div>
|
|
}
|
|
</div>
|