Merge pull request 'fix: Change lang to german' (!215) from fix/lang into main

Reviewed-on: #215 Reviewed-by: Constantin Simonis <constantin@simonis.lol>
fix: Change lang to german
2025-05-21 11:49:23 +00:00 · 2025-05-21 13:47:32 +02:00
7 changed files with 72 additions and 124 deletions
--- a/frontend/.docker/Dockerfile
+++ b/frontend/.docker/Dockerfile
@ -1,47 +1,23 @@
-# Build stage
+FROM oven/bun:debian AS build
 FROM oven/bun:latest as build
 WORKDIR /app
-# Copy package.json and bun.lock
+RUN apt-get update -y && apt-get install nodejs -y
 ENV NODE_ENV=production
 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
-# Production stage
+FROM nginx:alpine AS production
 FROM nginx:alpine
-# Copy custom nginx config if needed
+RUN rm /etc/nginx/conf.d/default.conf
-# COPY nginx.conf /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 the build output
+COPY --from=build /app/dist/casino /usr/share/nginx/html
 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"]
--- a/frontend/docker-entrypoint.sh
+++ b/frontend/docker-entrypoint.sh
@ -1,8 +0,0 @@
 #!/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;'
--- a/frontend/env.js
+++ b/frontend/env.js
@ -1,8 +0,0 @@
 // 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);
--- a/frontend/src/app/feature/game/coinflip/coinflip.component.html
+++ b/frontend/src/app/feature/game/coinflip/coinflip.component.html
@ -5,13 +5,11 @@
      @if (gameResult()) {
        <div class="mb-6 text-center result-text">
          <h2 class="text-2xl font-bold mb-2" [class]="getResultClass()">
-            {{ gameResult()?.isWin ? 'You Won!' : 'You Lost' }}
+            {{ gameResult()?.isWin ? 'Du hast gewonnen!' : 'Du hast verloren' }}
          </h2>
          <p class="text-lg">
-            Coin landed on:
+            Münze zeigt:
-            <span class="font-bold">{{
+            <span class="font-bold">{{ gameResult()?.coinSide === 'HEAD' ? 'KOPF' : 'ZAHL' }}</span>
              gameResult()?.coinSide === 'HEAD' ? 'HEAD' : 'TAILS'
            }}</span>
          </p>
          @if (gameResult()?.isWin) {
            <p class="text-xl mt-2">
@ -35,7 +33,7 @@
          <div
            class="front coin-side bg-yellow-500 flex items-center justify-center text-2xl font-bold"
          >
-            <div class="coin-text">HEAD</div>
+            <div class="coin-text">KOPF</div>
          </div>
          <!-- Tails side with non-mirrored text -->
@ -43,7 +41,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)">TAILS</span>
+            <span style="display: inline-block; transform: scaleX(1)">ZAHL</span>
          </div>
        </div>
      </div>
@ -56,7 +54,7 @@
          class="button-primary py-3 px-6 relative text-lg"
          [class.opacity-50]="gameInProgress()"
        >
-          Bet TAILS
+          Auf ZAHL setzen
        </button>
        <button
          (click)="betHeads()"
@ -64,7 +62,7 @@
          class="button-primary py-3 px-6 relative text-lg"
          [class.opacity-50]="gameInProgress()"
        >
-          Bet HEAD
+          Auf KOPF setzen
        </button>
      </div>
    </div>
@ -72,11 +70,11 @@
    <!-- Game information panel -->
    <div class="col-span-1">
      <div class="card p-4">
-        <h3 class="section-heading text-xl mb-4">Game Information</h3>
+        <h3 class="section-heading text-xl mb-4">Spielinformationen</h3>
        <div class="space-y-4">
          <!-- Current bet display -->
          <div class="flex justify-between items-center">
-            <span class="text-text-secondary">Current Bet:</span>
+            <span class="text-text-secondary">Aktueller Einsatz:</span>
            <span [class]="currentBet() > 0 ? 'text-accent-red' : 'text-text-secondary'">
              <app-animated-number [value]="currentBet()" [duration]="0.5"></app-animated-number> €
            </span>
@ -84,7 +82,7 @@
          <!-- Available balance -->
          <div class="flex justify-between items-center">
-            <span class="text-text-secondary">Your Balance:</span>
+            <span class="text-text-secondary">Dein Guthaben:</span>
            <span class="text-white">
              {{ balance() | currency: 'EUR' }}
            </span>
@ -103,9 +101,9 @@
          <!-- Custom bet input -->
          <div class="space-y-1">
            <div class="flex justify-between">
-              <label for="bet" class="text-sm text-text-secondary">Bet Amount</label>
+              <label for="bet" class="text-sm text-text-secondary">Einsatzbetrag</label>
              <span *ngIf="isInvalidBet()" class="text-xs text-accent-red animate-pulse"
-                >Cannot exceed balance</span
+                >Darf Guthaben nicht überschreiten</span
              >
            </div>
            <input
@ -129,11 +127,11 @@
          <!-- 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>
+            <h4 class="text-lg font-semibold mb-2">Spielregeln</h4>
            <ul class="text-sm text-text-secondary space-y-1">
-              <li>• Choose your bet amount</li>
+              <li>• Wähle deinen Einsatzbetrag</li>
-              <li>• Select Heads or Tails</li>
+              <li>• Wähle Kopf oder Zahl</li>
-              <li>• Win double your bet if correct</li>
+              <li>• Gewinne das Doppelte deines Einsatzes bei richtiger Wahl</li>
            </ul>
          </div>
        </div>
--- a/frontend/src/app/feature/game/coinflip/coinflip.component.ts
+++ b/frontend/src/app/feature/game/coinflip/coinflip.component.ts
@ -44,14 +44,14 @@ export default class CoinflipComponent implements OnInit {
  private coinflipSound?: HTMLAudioElement;
  ngOnInit(): void {
-    // Subscribe to user updates for real-time balance changes
+    // Abonniere Benutzerupdates für Echtzeitaktualisierungen des Guthabens
    this.authService.userSubject.subscribe((user) => {
      if (user) {
        this.balance.set(user.balance);
      }
    });
-    // Initialize coinflip sound
+    // Initialisiere Münzwurf-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);
-    // Reset invalid bet state
+    // Setze ungültigen Einsatz-Status zurück
    this.isInvalidBet.set(false);
-    // Enforce minimum bet of 1
+    // Erzwinge Mindesteinsatz von 1
    if (value <= 0) {
      value = 1;
    }
-    // Cap bet at available balance and show feedback
+    // Begrenze Einsatz auf verfügbares Guthaben und zeige Feedback
    if (value > this.balance()) {
      value = this.balance();
-      // Show visual feedback
+      // Visuelles Feedback anzeigen
      this.isInvalidBet.set(true);
-      // Indicate the error briefly
+      // Zeige den Fehler kurz an
      setTimeout(() => this.isInvalidBet.set(false), 800);
-      // Update the input field directly to show the user the max value
+      // Aktualisiere das Eingabefeld direkt, um dem Benutzer den maximalen Wert anzuzeigen
      inputElement.value = String(value);
    }
-    // Update signals
+    // Aktualisiere Signale
    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;
-    // Reset previous result
+    // Setze vorheriges Ergebnis zurück
    this.gameResult.set(null);
    this.errorMessage.set('');
-    // Set game state
+    // Setze Spielstatus
    this.gameInProgress.set(true);
    this.isActionInProgress.set(true);
-    // Play bet sound
+    // Spiele Einsatz-Sound
    this.audioService.playBetSound();
-    // Create bet request
+    // Erstelle Einsatz-Anfrage
    const request: CoinflipRequest = {
      betAmount: this.currentBet(),
      coinSide: side,
    };
-    // Call API
+    // API aufrufen
    this.http
      .post<CoinflipGame>('/backend/coinflip', request)
      .pipe(
        catchError((error) => {
-          console.error('Error playing coinflip:', error);
+          console.error('Fehler beim Spielen von Coinflip:', error);
          if (error.status === 400 && error.error.message.includes('insufficient')) {
-            this.errorMessage.set('Insufficient funds');
+            this.errorMessage.set('Unzureichendes Guthaben');
          } else {
-            this.errorMessage.set('An error occurred. Please try again.');
+            this.errorMessage.set('Ein Fehler ist aufgetreten. Bitte versuche es erneut.');
          }
          this.gameInProgress.set(false);
@ -140,37 +140,37 @@ export default class CoinflipComponent implements OnInit {
      .subscribe((result) => {
        if (!result) return;
-        console.log('API response:', result);
+        console.log('API-Antwort:', result);
-        // Fix potential property naming inconsistency from the backend
+        // Behebe mögliche Inkonsistenzen bei der Eigenschaftenbenennung vom Backend
        const fixedResult: CoinflipGame = {
          isWin: result.isWin ?? result.win,
          payout: result.payout,
          coinSide: result.coinSide,
        };
-        console.log('Fixed result:', fixedResult);
+        console.log('Korrigiertes Ergebnis:', fixedResult);
-        // Play coin flip animation and sound
+        // Spiele Münzwurf-Animation und -Sound
        this.playCoinFlipAnimation(fixedResult.coinSide);
-        // Set result after animation completes
+        // Setze Ergebnis nach Abschluss der Animation
        setTimeout(() => {
          this.gameResult.set(fixedResult);
-          // Update balance with new value from auth service
+          // Aktualisiere Guthaben mit neuem Wert vom Auth-Service
          this.authService.loadCurrentUser();
-          // Play win sound if player won
+          // Spiele Gewinn-Sound, wenn der Spieler gewonnen hat
          if (fixedResult.isWin) {
            this.audioService.playWinSound();
          }
-          // Reset game state after showing result
+          // Setze Spielstatus nach Anzeigen des Ergebnisses zurück
          setTimeout(() => {
            this.gameInProgress.set(false);
          }, 1500);
-        }, 1100); // Just after animation ends
+        }, 1100); // Kurz nach Ende der Animation
      });
  }
@ -179,48 +179,50 @@ export default class CoinflipComponent implements OnInit {
    const coinEl = this.coinElement.nativeElement;
-    // Reset any existing animations
+    // Setze bestehende Animationen zurück
    coinEl.classList.remove('animate-to-heads', 'animate-to-tails');
-    // Reset any inline styles from previous animations
+    // Setze alle Inline-Styles von vorherigen Animationen zurück
    coinEl.style.transform = '';
-    // Force a reflow to restart animation
+    // Erzwinge Reflow, um Animation neu zu starten
    void coinEl.offsetWidth;
-    // Play flip sound
+    // Spiele Münzwurf-Sound
    if (this.coinflipSound) {
      this.coinflipSound.currentTime = 0;
-      this.coinflipSound.play().catch((err) => console.error('Error playing sound:', err));
+      this.coinflipSound
        .play()
        .catch((err) => console.error('Fehler beim Abspielen des Sounds:', err));
    }
-    // Add appropriate animation class based on result
+    // Füge passende Animationsklasse basierend auf dem Ergebnis hinzu
    if (result === 'HEAD') {
      coinEl.classList.add('animate-to-heads');
    } else {
      coinEl.classList.add('animate-to-tails');
    }
-    console.log(`Animation applied for result: ${result}`);
+    console.log(`Animation angewendet für Ergebnis: ${result}`);
  }
  /**
-   * Validates input as the user types to prevent invalid values
+   * Validiert Eingabe während der Benutzer tippt, um ungültige Werte zu verhindern
   */
  validateBetInput(event: KeyboardEvent) {
-    // Allow navigation keys (arrows, delete, backspace, tab)
+    // Erlaube Navigationstasten (Pfeile, Entf, Rücktaste, Tab)
    const navigationKeys = ['ArrowLeft', 'ArrowRight', 'Delete', 'Backspace', 'Tab'];
    if (navigationKeys.includes(event.key)) {
      return;
    }
-    // Only allow numbers
+    // Erlaube nur Zahlen
    if (!/^\d$/.test(event.key)) {
      event.preventDefault();
      return;
    }
-    // Get the value that would result after the keypress
+    // Ermittle den Wert, der nach dem Tastendruck entstehen würde
    const input = event.target as HTMLInputElement;
    const currentValue = input.value;
    const cursorPosition = input.selectionStart || 0;
@ -230,14 +232,14 @@ export default class CoinflipComponent implements OnInit {
      currentValue.substring(input.selectionEnd || cursorPosition);
    const numValue = Number(newValue);
-    // Prevent values greater than balance
+    // Verhindere Werte, die größer als das Guthaben sind
    if (numValue > this.balance()) {
      event.preventDefault();
    }
  }
-  // We removed the paste handler for simplicity since the updateBet method
+  // Der Paste-Handler wurde der Einfachheit halber entfernt, da die updateBet-Methode
-  // will handle any value that gets into the input field
+  // jeden Wert behandelt, der in das Eingabefeld gelangt
  getResultClass() {
    if (!this.gameResult()) return '';
--- a/frontend/src/environments/environment.ts
+++ b/frontend/src/environments/environment.ts
@ -1,16 +1,5 @@
 // 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.__env?.API_URL || window.location.origin + '/backend',
+  apiUrl: window.location.origin + '/backend',
-};
+};
--- a/frontend/src/index.html
+++ b/frontend/src/index.html
@ -2,7 +2,6 @@
 <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" />
Author	SHA1	Message	Date
Jan K9f	69af830829	Merge pull request 'fix: Change lang to german' (!215) from fix/lang into main All checks were successful Release / Release (push) Successful in 59s Details Release / Build Backend Image (push) Successful in 24s Details Release / Build Frontend Image (push) Successful in 28s Details Reviewed-on: #215 Reviewed-by: Constantin Simonis <constantin@simonis.lol>	2025-05-21 11:49:23 +00:00
Jan K9f	7762048ee1	fix: Change lang to german All checks were successful CI / Get Changed Files (pull_request) Successful in 8s Details CI / Checkstyle Main (pull_request) Has been skipped Details CI / Docker backend validation (pull_request) Has been skipped Details CI / oxlint (pull_request) Successful in 25s Details CI / eslint (pull_request) Successful in 27s Details CI / prettier (pull_request) Successful in 31s Details CI / Docker frontend validation (pull_request) Successful in 42s Details CI / test-build (pull_request) Successful in 44s Details	2025-05-21 13:47:32 +02:00