frontend/src/app/app.routes.ts

@@ -38,6 +38,11 @@ export const routes: Routes = [
     loadComponent: () => import('./feature/game/blackjack/blackjack.component'),
     canActivate: [authGuard],
   },
+  {
+    path: 'game/coinflip',
+    loadComponent: () => import('./feature/game/coinflip/coinflip.component'),
+    canActivate: [authGuard],
+  },
   {
     path: 'game/slots',
     loadComponent: () => import('./feature/game/slots/slots.component'),

frontend/src/app/feature/game/coinflip/coinflip.component.html

@@ -0,0 +1,16 @@
+<p>Coinflip works!</p>
+
+<div class="container mx-auto">
+  <div class="grid grid-cols-4">
+    <div class="col-span-3"></div>
+    <div class="col-span-1">
+      <app-game-info
+        [balance]="balance()"
+        [currentBet]="currentBet()"
+        [gameInProgress]="gameInProgress()"
+        [isActionInProgress]="isActionInProgress()"
+        (newGame)="onNewGame($event)"
+      ></app-game-info>
+    </div>
+  </div>
+</div>

frontend/src/app/feature/game/coinflip/coinflip.component.ts

@@ -0,0 +1,34 @@
+import { ChangeDetectionStrategy, Component, inject, OnInit, signal } from '@angular/core';
+import { GameInfoComponent } from '@blackjack/components/game-info/game-info.component';
+import { AuthService } from '@service/auth.service';
+import { AudioService } from '@shared/services/audio.service';
+
+@Component({
+  selector: 'app-coinflip',
+  standalone: true,
+  imports: [GameInfoComponent],
+  templateUrl: './coinflip.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export default class CoinflipComponent implements OnInit {
+  currentBet = signal(0);
+  balance = signal(0);
+  gameInProgress = signal(false);
+  isActionInProgress = signal(false);
+  audioService = inject(AudioService);
+  authService = inject(AuthService);
+
+  onNewGame(bet: number): void {
+    this.isActionInProgress.set(true);
+    this.audioService.playBetSound();
+  }
+
+  ngOnInit(): void {
+    // Subscribe to user updates for real-time balance changes
+    this.authService.userSubject.subscribe((user) => {
+      if (user) {
+        this.balance.set(user.balance);
+      }
+    });
+  }
+}