Compare commits
1 commit
69af830829
...
657ce4ed40
| Author | SHA1 | Date | |
|---|---|---|---|
|
657ce4ed40 |
7 changed files with 124 additions and 72 deletions
|
|
@ -1,23 +1,47 @@
|
|||
FROM oven/bun:debian AS build
|
||||
# Build stage
|
||||
FROM oven/bun:latest as build
|
||||
|
||||
WORKDIR /app
|
||||
|
||||
RUN apt-get update -y && apt-get install nodejs -y
|
||||
|
||||
ENV NODE_ENV=production
|
||||
|
||||
# Copy package.json and bun.lock
|
||||
COPY package.json bun.lock ./
|
||||
RUN bun install --frozen-lockfile
|
||||
|
||||
# Install dependencies
|
||||
RUN bun install
|
||||
|
||||
# Copy the rest of the app
|
||||
COPY . .
|
||||
|
||||
# Build the app
|
||||
RUN bun run build
|
||||
|
||||
FROM nginx:alpine AS production
|
||||
# Production stage
|
||||
FROM nginx:alpine
|
||||
|
||||
RUN rm /etc/nginx/conf.d/default.conf
|
||||
COPY .docker/casino.conf /etc/nginx/templates/nginx.conf.template
|
||||
COPY .docker/entrypoint.sh /docker-entrypoint.d/40-custom-config-env.sh
|
||||
# Copy custom nginx config if needed
|
||||
# COPY nginx.conf /etc/nginx/conf.d/default.conf
|
||||
|
||||
COPY --from=build /app/dist/casino /usr/share/nginx/html
|
||||
# Copy the build output
|
||||
COPY --from=build /app/dist/browser /usr/share/nginx/html
|
||||
|
||||
# Copy the env.js file
|
||||
COPY --from=build /app/env.js /usr/share/nginx/html/env.js
|
||||
|
||||
# Copy the entrypoint script
|
||||
COPY docker-entrypoint.sh /docker-entrypoint.sh
|
||||
RUN chmod +x /docker-entrypoint.sh
|
||||
|
||||
# Install envsubst
|
||||
RUN apk add --no-cache gettext
|
||||
|
||||
# Update index.html to load env.js before the app
|
||||
RUN sed -i 's/<head>/<head><script src="env.js"><\/script>/' /usr/share/nginx/html/index.html
|
||||
|
||||
# Set environment variables (these are defaults and can be overridden at runtime)
|
||||
ENV STRIPE_KEY="pk_test_51QrePYIvCfqz7ANgMizBorPpVjJ8S6gcaL4yvcMQnVaKyReqcQ6jqaQEF7aDZbDu8rNVsTZrw8ABek4ToxQX7KZe00jpGh8naG"
|
||||
ENV API_URL="/backend"
|
||||
|
||||
EXPOSE 80
|
||||
CMD ["nginx", "-g", "daemon off;"]
|
||||
|
||||
# Use custom entrypoint to replace env vars at runtime
|
||||
ENTRYPOINT ["/docker-entrypoint.sh"]
|
||||
8
frontend/docker-entrypoint.sh
Normal file
8
frontend/docker-entrypoint.sh
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
#!/bin/sh
|
||||
|
||||
# Replace environment variables in env.js
|
||||
envsubst < /usr/share/nginx/html/env.js > /usr/share/nginx/html/env.js.tmp
|
||||
mv /usr/share/nginx/html/env.js.tmp /usr/share/nginx/html/env.js
|
||||
|
||||
# Start nginx
|
||||
exec nginx -g 'daemon off;'
|
||||
8
frontend/env.js
Normal file
8
frontend/env.js
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
// env.js - Script to replace environment variables at runtime
|
||||
(function(window) {
|
||||
window.__env = window.__env || {};
|
||||
|
||||
// Environment variables
|
||||
window.__env.STRIPE_KEY = '${STRIPE_KEY}';
|
||||
window.__env.API_URL = '${API_URL}';
|
||||
})(this);
|
||||
|
|
@ -5,11 +5,13 @@
|
|||
@if (gameResult()) {
|
||||
<div class="mb-6 text-center result-text">
|
||||
<h2 class="text-2xl font-bold mb-2" [class]="getResultClass()">
|
||||
{{ gameResult()?.isWin ? 'Du hast gewonnen!' : 'Du hast verloren' }}
|
||||
{{ gameResult()?.isWin ? 'You Won!' : 'You Lost' }}
|
||||
</h2>
|
||||
<p class="text-lg">
|
||||
Münze zeigt:
|
||||
<span class="font-bold">{{ gameResult()?.coinSide === 'HEAD' ? 'KOPF' : 'ZAHL' }}</span>
|
||||
Coin landed on:
|
||||
<span class="font-bold">{{
|
||||
gameResult()?.coinSide === 'HEAD' ? 'HEAD' : 'TAILS'
|
||||
}}</span>
|
||||
</p>
|
||||
@if (gameResult()?.isWin) {
|
||||
<p class="text-xl mt-2">
|
||||
|
|
@ -33,7 +35,7 @@
|
|||
<div
|
||||
class="front coin-side bg-yellow-500 flex items-center justify-center text-2xl font-bold"
|
||||
>
|
||||
<div class="coin-text">KOPF</div>
|
||||
<div class="coin-text">HEAD</div>
|
||||
</div>
|
||||
|
||||
<!-- Tails side with non-mirrored text -->
|
||||
|
|
@ -41,7 +43,7 @@
|
|||
class="back coin-side bg-gray-700 flex items-center justify-center text-2xl font-bold text-white"
|
||||
>
|
||||
<!-- Using direct inline transform to counter the mirroring effect -->
|
||||
<span style="display: inline-block; transform: scaleX(1)">ZAHL</span>
|
||||
<span style="display: inline-block; transform: scaleX(1)">TAILS</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -54,7 +56,7 @@
|
|||
class="button-primary py-3 px-6 relative text-lg"
|
||||
[class.opacity-50]="gameInProgress()"
|
||||
>
|
||||
Auf ZAHL setzen
|
||||
Bet TAILS
|
||||
</button>
|
||||
<button
|
||||
(click)="betHeads()"
|
||||
|
|
@ -62,7 +64,7 @@
|
|||
class="button-primary py-3 px-6 relative text-lg"
|
||||
[class.opacity-50]="gameInProgress()"
|
||||
>
|
||||
Auf KOPF setzen
|
||||
Bet HEAD
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -70,11 +72,11 @@
|
|||
<!-- Game information panel -->
|
||||
<div class="col-span-1">
|
||||
<div class="card p-4">
|
||||
<h3 class="section-heading text-xl mb-4">Spielinformationen</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">Aktueller Einsatz:</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> €
|
||||
</span>
|
||||
|
|
@ -82,7 +84,7 @@
|
|||
|
||||
<!-- Available balance -->
|
||||
<div class="flex justify-between items-center">
|
||||
<span class="text-text-secondary">Dein Guthaben:</span>
|
||||
<span class="text-text-secondary">Your Balance:</span>
|
||||
<span class="text-white">
|
||||
{{ balance() | currency: 'EUR' }}
|
||||
</span>
|
||||
|
|
@ -101,9 +103,9 @@
|
|||
<!-- Custom bet input -->
|
||||
<div class="space-y-1">
|
||||
<div class="flex justify-between">
|
||||
<label for="bet" class="text-sm text-text-secondary">Einsatzbetrag</label>
|
||||
<label for="bet" class="text-sm text-text-secondary">Bet Amount</label>
|
||||
<span *ngIf="isInvalidBet()" class="text-xs text-accent-red animate-pulse"
|
||||
>Darf Guthaben nicht überschreiten</span
|
||||
>Cannot exceed balance</span
|
||||
>
|
||||
</div>
|
||||
<input
|
||||
|
|
@ -127,11 +129,11 @@
|
|||
|
||||
<!-- Rules/info section -->
|
||||
<div class="mt-6 pt-4 border-t border-gray-700">
|
||||
<h4 class="text-lg font-semibold mb-2">Spielregeln</h4>
|
||||
<h4 class="text-lg font-semibold mb-2">How to Play</h4>
|
||||
<ul class="text-sm text-text-secondary space-y-1">
|
||||
<li>• Wähle deinen Einsatzbetrag</li>
|
||||
<li>• Wähle Kopf oder Zahl</li>
|
||||
<li>• Gewinne das Doppelte deines Einsatzes bei richtiger Wahl</li>
|
||||
<li>• Choose your bet amount</li>
|
||||
<li>• Select Heads or Tails</li>
|
||||
<li>• Win double your bet if correct</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -44,14 +44,14 @@ export default class CoinflipComponent implements OnInit {
|
|||
private coinflipSound?: HTMLAudioElement;
|
||||
|
||||
ngOnInit(): void {
|
||||
// Abonniere Benutzerupdates für Echtzeitaktualisierungen des Guthabens
|
||||
// Subscribe to user updates for real-time balance changes
|
||||
this.authService.userSubject.subscribe((user) => {
|
||||
if (user) {
|
||||
this.balance.set(user.balance);
|
||||
}
|
||||
});
|
||||
|
||||
// Initialisiere Münzwurf-Sound
|
||||
// Initialize coinflip sound
|
||||
this.coinflipSound = new Audio('/sounds/coinflip.mp3');
|
||||
}
|
||||
|
||||
|
|
@ -65,26 +65,26 @@ export default class CoinflipComponent implements OnInit {
|
|||
const inputElement = event.target as HTMLInputElement;
|
||||
let value = Number(inputElement.value);
|
||||
|
||||
// Setze ungültigen Einsatz-Status zurück
|
||||
// Reset invalid bet state
|
||||
this.isInvalidBet.set(false);
|
||||
|
||||
// Erzwinge Mindesteinsatz von 1
|
||||
// Enforce minimum bet of 1
|
||||
if (value <= 0) {
|
||||
value = 1;
|
||||
}
|
||||
|
||||
// Begrenze Einsatz auf verfügbares Guthaben und zeige Feedback
|
||||
// Cap bet at available balance and show feedback
|
||||
if (value > this.balance()) {
|
||||
value = this.balance();
|
||||
// Visuelles Feedback anzeigen
|
||||
// Show visual feedback
|
||||
this.isInvalidBet.set(true);
|
||||
// Zeige den Fehler kurz an
|
||||
// Indicate the error briefly
|
||||
setTimeout(() => this.isInvalidBet.set(false), 800);
|
||||
// Aktualisiere das Eingabefeld direkt, um dem Benutzer den maximalen Wert anzuzeigen
|
||||
// Update the input field directly to show the user the max value
|
||||
inputElement.value = String(value);
|
||||
}
|
||||
|
||||
// Aktualisiere Signale
|
||||
// Update signals
|
||||
this.betInputValue.set(value);
|
||||
this.currentBet.set(value);
|
||||
}
|
||||
|
|
@ -100,34 +100,34 @@ export default class CoinflipComponent implements OnInit {
|
|||
private placeBet(side: 'HEAD' | 'TAILS') {
|
||||
if (this.gameInProgress() || this.isActionInProgress()) return;
|
||||
|
||||
// Setze vorheriges Ergebnis zurück
|
||||
// Reset previous result
|
||||
this.gameResult.set(null);
|
||||
this.errorMessage.set('');
|
||||
|
||||
// Setze Spielstatus
|
||||
// Set game state
|
||||
this.gameInProgress.set(true);
|
||||
this.isActionInProgress.set(true);
|
||||
|
||||
// Spiele Einsatz-Sound
|
||||
// Play bet sound
|
||||
this.audioService.playBetSound();
|
||||
|
||||
// Erstelle Einsatz-Anfrage
|
||||
// Create bet request
|
||||
const request: CoinflipRequest = {
|
||||
betAmount: this.currentBet(),
|
||||
coinSide: side,
|
||||
};
|
||||
|
||||
// API aufrufen
|
||||
// Call API
|
||||
this.http
|
||||
.post<CoinflipGame>('/backend/coinflip', request)
|
||||
.pipe(
|
||||
catchError((error) => {
|
||||
console.error('Fehler beim Spielen von Coinflip:', error);
|
||||
console.error('Error playing coinflip:', error);
|
||||
|
||||
if (error.status === 400 && error.error.message.includes('insufficient')) {
|
||||
this.errorMessage.set('Unzureichendes Guthaben');
|
||||
this.errorMessage.set('Insufficient funds');
|
||||
} else {
|
||||
this.errorMessage.set('Ein Fehler ist aufgetreten. Bitte versuche es erneut.');
|
||||
this.errorMessage.set('An error occurred. Please try again.');
|
||||
}
|
||||
|
||||
this.gameInProgress.set(false);
|
||||
|
|
@ -140,37 +140,37 @@ export default class CoinflipComponent implements OnInit {
|
|||
.subscribe((result) => {
|
||||
if (!result) return;
|
||||
|
||||
console.log('API-Antwort:', result);
|
||||
console.log('API response:', result);
|
||||
|
||||
// Behebe mögliche Inkonsistenzen bei der Eigenschaftenbenennung vom Backend
|
||||
// Fix potential property naming inconsistency from the backend
|
||||
const fixedResult: CoinflipGame = {
|
||||
isWin: result.isWin ?? result.win,
|
||||
payout: result.payout,
|
||||
coinSide: result.coinSide,
|
||||
};
|
||||
|
||||
console.log('Korrigiertes Ergebnis:', fixedResult);
|
||||
console.log('Fixed result:', fixedResult);
|
||||
|
||||
// Spiele Münzwurf-Animation und -Sound
|
||||
// Play coin flip animation and sound
|
||||
this.playCoinFlipAnimation(fixedResult.coinSide);
|
||||
|
||||
// Setze Ergebnis nach Abschluss der Animation
|
||||
// Set result after animation completes
|
||||
setTimeout(() => {
|
||||
this.gameResult.set(fixedResult);
|
||||
|
||||
// Aktualisiere Guthaben mit neuem Wert vom Auth-Service
|
||||
// Update balance with new value from auth service
|
||||
this.authService.loadCurrentUser();
|
||||
|
||||
// Spiele Gewinn-Sound, wenn der Spieler gewonnen hat
|
||||
// Play win sound if player won
|
||||
if (fixedResult.isWin) {
|
||||
this.audioService.playWinSound();
|
||||
}
|
||||
|
||||
// Setze Spielstatus nach Anzeigen des Ergebnisses zurück
|
||||
// Reset game state after showing result
|
||||
setTimeout(() => {
|
||||
this.gameInProgress.set(false);
|
||||
}, 1500);
|
||||
}, 1100); // Kurz nach Ende der Animation
|
||||
}, 1100); // Just after animation ends
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -179,50 +179,48 @@ export default class CoinflipComponent implements OnInit {
|
|||
|
||||
const coinEl = this.coinElement.nativeElement;
|
||||
|
||||
// Setze bestehende Animationen zurück
|
||||
// Reset any existing animations
|
||||
coinEl.classList.remove('animate-to-heads', 'animate-to-tails');
|
||||
|
||||
// Setze alle Inline-Styles von vorherigen Animationen zurück
|
||||
// Reset any inline styles from previous animations
|
||||
coinEl.style.transform = '';
|
||||
|
||||
// Erzwinge Reflow, um Animation neu zu starten
|
||||
// Force a reflow to restart animation
|
||||
void coinEl.offsetWidth;
|
||||
|
||||
// Spiele Münzwurf-Sound
|
||||
// Play flip sound
|
||||
if (this.coinflipSound) {
|
||||
this.coinflipSound.currentTime = 0;
|
||||
this.coinflipSound
|
||||
.play()
|
||||
.catch((err) => console.error('Fehler beim Abspielen des Sounds:', err));
|
||||
this.coinflipSound.play().catch((err) => console.error('Error playing sound:', err));
|
||||
}
|
||||
|
||||
// Füge passende Animationsklasse basierend auf dem Ergebnis hinzu
|
||||
// Add appropriate animation class based on result
|
||||
if (result === 'HEAD') {
|
||||
coinEl.classList.add('animate-to-heads');
|
||||
} else {
|
||||
coinEl.classList.add('animate-to-tails');
|
||||
}
|
||||
|
||||
console.log(`Animation angewendet für Ergebnis: ${result}`);
|
||||
console.log(`Animation applied for result: ${result}`);
|
||||
}
|
||||
|
||||
/**
|
||||
* Validiert Eingabe während der Benutzer tippt, um ungültige Werte zu verhindern
|
||||
* Validates input as the user types to prevent invalid values
|
||||
*/
|
||||
validateBetInput(event: KeyboardEvent) {
|
||||
// Erlaube Navigationstasten (Pfeile, Entf, Rücktaste, Tab)
|
||||
// Allow navigation keys (arrows, delete, backspace, tab)
|
||||
const navigationKeys = ['ArrowLeft', 'ArrowRight', 'Delete', 'Backspace', 'Tab'];
|
||||
if (navigationKeys.includes(event.key)) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Erlaube nur Zahlen
|
||||
// Only allow numbers
|
||||
if (!/^\d$/.test(event.key)) {
|
||||
event.preventDefault();
|
||||
return;
|
||||
}
|
||||
|
||||
// Ermittle den Wert, der nach dem Tastendruck entstehen würde
|
||||
// Get the value that would result after the keypress
|
||||
const input = event.target as HTMLInputElement;
|
||||
const currentValue = input.value;
|
||||
const cursorPosition = input.selectionStart || 0;
|
||||
|
|
@ -232,14 +230,14 @@ export default class CoinflipComponent implements OnInit {
|
|||
currentValue.substring(input.selectionEnd || cursorPosition);
|
||||
const numValue = Number(newValue);
|
||||
|
||||
// Verhindere Werte, die größer als das Guthaben sind
|
||||
// Prevent values greater than balance
|
||||
if (numValue > this.balance()) {
|
||||
event.preventDefault();
|
||||
}
|
||||
}
|
||||
|
||||
// Der Paste-Handler wurde der Einfachheit halber entfernt, da die updateBet-Methode
|
||||
// jeden Wert behandelt, der in das Eingabefeld gelangt
|
||||
// We removed the paste handler for simplicity since the updateBet method
|
||||
// will handle any value that gets into the input field
|
||||
|
||||
getResultClass() {
|
||||
if (!this.gameResult()) return '';
|
||||
|
|
|
|||
|
|
@ -1,5 +1,16 @@
|
|||
// Dynamic environment configuration that can be overridden by Docker
|
||||
declare global {
|
||||
interface Window {
|
||||
__env?: {
|
||||
STRIPE_KEY?: string;
|
||||
API_URL?: string;
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
export const environment = {
|
||||
STRIPE_KEY:
|
||||
window.__env?.STRIPE_KEY ||
|
||||
'pk_test_51QrePYIvCfqz7ANgMizBorPpVjJ8S6gcaL4yvcMQnVaKyReqcQ6jqaQEF7aDZbDu8rNVsTZrw8ABek4ToxQX7KZe00jpGh8naG',
|
||||
apiUrl: window.location.origin + '/backend',
|
||||
apiUrl: window.__env?.API_URL || window.location.origin + '/backend',
|
||||
};
|
||||
|
|
@ -2,6 +2,7 @@
|
|||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<script src="env.js"></script>
|
||||
<title>Trustworthy Casino</title>
|
||||
<base href="/" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
|
|
|
|||
Reference in a new issue