Merge pull request 'Version 1.0' (#102) from develop into master

Reviewed-on: https://gitea.fernandovideira.com/SyntaxSquad/DADProject/pulls/102
Reviewed-by: Afonso Clerigo Mendes de Sousa <[email protected]>
Reviewed-by: KZix <[email protected]>
Reviewed-by: Edd <[email protected]>

.gitignore

@@ -80,6 +80,7 @@ frontend/.env.*.local
 # Websockets: NodeJs (in websockets)
 # -------------------------
 /websockets/node_modules/
+/websockets/.env
 # -------------------------
 # Other useful ignores
 # -------------------------
@@ -99,3 +100,9 @@ Desktop.ini
 
 # If you have any local secrets or files not to track, add them here:
 # /path/to/some/file
+
+/frontend/package-lock.json
+/websockets/package-lock.json
+/api/package-lock.json
+
+.vscode

api/.gitignore

@@ -22,3 +22,5 @@
 Homestead.json
 Homestead.yaml
 Thumbs.db
+
+composer.lock

api/app/Http/Controllers/AuthController.php

@@ -2,6 +2,8 @@
 
 namespace App\Http\Controllers;
 
+use App\Http\Requests\RegisterRequest;
+use App\Models\User;
 use Illuminate\Http\Request;
 use Illuminate\Support\Facades\Auth;
 use Illuminate\Validation\ValidationException;
@@ -22,6 +24,13 @@ class AuthController extends Controller
         }
 
         $user = Auth::user();
+
+        if ($user->blocked) {
+            Auth::logout();
+
+            return response()->json(['message' => 'Your account is blocked. Please contact support.'], 403);
+        }
+
         $token = $user->createToken('auth-token')->plainTextToken;
 
         return response()->json([
@@ -38,4 +47,42 @@ class AuthController extends Controller
             'message' => 'Logged out successfully',
         ]);
     }
+
+    public function register(RegisterRequest $request)
+    {
+        if (User::where('email', $request->email)->exists()) {
+            return response()->json(['message' => 'Email already registered'], 409);
+        }
+        
+        if (User::where('nickname', $request->nickname)->exists()) {
+            return response()->json(['message' => 'Nickname already registered'], 409);
+        }
+
+        $avatarFilename = null;
+
+        if ($request->hasFile('photo_avatar_filename')) {
+            $file = $request->file('photo_avatar_filename');
+            $path = $file->store('photos_avatars', 'public');
+            $avatarFilename = basename($path);
+        }
+
+        $user = User::create([
+            'email' => $request->email,
+            'nickname' => $request->nickname,
+            'name' => $request->name,
+            'password' => bcrypt($request->password),
+            'photo_avatar_filename' => $avatarFilename,
+            'type' => 'P',
+            'blocked' => false,
+            'coins_balance' => 10,
+        ]);
+
+        $token = $user->createToken('auth-token')->plainTextToken;
+
+        return response()->json([
+            'message' => 'User registered successfully',
+            'user' => $user,
+            'token' => $token,
+        ], 201);
+    }
 }

api/app/Http/Controllers/CoinPurchaseController.php

@@ -0,0 +1,76 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Http\Controllers\Controller;
+use App\Models\CoinPurchase;
+use App\Models\CoinTransaction;
+use App\Models\CoinTransactionType;
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\DB;
+
+class CoinPurchaseController extends Controller
+{
+    public function store(Request $request)
+    {
+        $validated = $request->validate([
+            'euros' => 'required|numeric|min:1|max:100',
+            'payment_type' => 'required|in:MBWAY,MB,VISA,PAYPAL',
+            'payment_reference' => [
+                'required',
+                function ($attribute, $value, $fail) use ($request) {
+                    $type = $request->payment_type;
+                    $regex = null;
+
+                    switch ($type) {
+                        case 'MBWAY': $regex = '/^9[0-9]{8}$/'; break;
+                        case 'MB':    $regex = '/^[0-9]{5}-[0-9]{9}$/'; break;
+                        case 'VISA':  $regex = '/^4[0-9]{15}$/'; break;
+                        case 'PAYPAL':
+                            if (!filter_var($value, FILTER_VALIDATE_EMAIL)) {
+                                $fail("Invalid PayPal email.");
+                            }
+                            return;
+                    }
+
+                    if ($regex && !preg_match($regex, $value)) {
+                        $fail("Invalid format for $type.");
+                    }
+                },
+            ],
+        ]);
+
+        $user = $request->user();
+        $coinsAmount = $validated['euros'] * 10; 
+
+        return DB::transaction(function () use ($user, $validated, $coinsAmount) {
+            
+            $type = CoinTransactionType::firstOrCreate(['name' => 'Coin purchase'], ['type' => 'C']);
+
+            $transaction = CoinTransaction::create([
+                'user_id' => $user->id,
+                'coin_transaction_type_id' => $type->id,
+                'transaction_datetime' => now(),
+                'coins' => $coinsAmount,
+            ]);
+
+            $purchase = CoinPurchase::create([
+                'purchase_datetime' => now(),
+                'user_id' => $user->id,
+                'coin_transaction_id' => $transaction->id,
+                'euros' => $validated['euros'],
+                'payment_type' => $validated['payment_type'],
+                'payment_reference' => $validated['payment_reference'],
+            ]);
+
+            $user->increment('coins_balance', $coinsAmount);
+
+            return response()->json([
+                'message' => 'Purchase successful',
+                'balance' => $user->coins_balance,
+                'transaction_id' => $transaction->id,
+                'purchase' => $purchase,
+            ], 201);
+        });
+    }
+}

api/app/Http/Controllers/Controller.php

@@ -2,7 +2,10 @@
 
 namespace App\Http\Controllers;
 
-abstract class Controller
+use Illuminate\Foundation\Auth\Access\AuthorizesRequests;
+use Illuminate\Routing\Controller as BaseController;
+
+abstract class Controller extends BaseController
 {
-    //
+    use AuthorizesRequests;
 }

api/app/Http/Controllers/GameController.php

@@ -4,84 +4,247 @@ namespace App\Http\Controllers;
 
 use App\Models\Game;
 use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Auth;
 
 class GameController extends Controller
 {
-    /**
+    const GHOST_ID = 1;
-     * Display a listing of the resource.
+
-     */
     public function index(Request $request)
     {
-        $query = Game::query()->with(['winner']);
+        $this->authorize('viewAny', Game::class);
 
-        if ($request->has('type') && in_array($request->type, ['3', '9'])) {
+        $user = Auth::user();
-            $query->where('type', $request->type);
+        $query = Game::query()->with(["winner", "player1", "player2"]);
+
+        if ($user->type !== 'A') {
+            $query->where(function ($q) use ($user) {
+                $q->where('player1_user_id', $user->id)
+                  ->orWhere('player2_user_id', $user->id);
+            });
         }
 
-        if ($request->has('status') && in_array($request->status, ['Pending', 'Playing', 'Ended', 'Interrupted'])) {
+        if ($request->has("type") && in_array($request->type, ["3", "9"])) {
-            $query->where('status', $request->status);
+            $query->where("type", $request->type);
         }
 
-        // Sorting
+        if (
-        $sortField = $request->input('sort_by', 'began_at');
+            $request->has("status") &&
-        $sortDirection = $request->input('sort_direction', 'desc');
+            in_array($request->status, [
-
+                "Pending",
-        $allowedSortFields = [
+                "Playing",
-            'began_at',
+                "Ended",
-            'ended_at',
+                "Interrupted",
-            'total_time',
+            ])
-            'type',
+        ) {
-            'status'
+            $query->where("status", $request->status);
-        ];
-
-        if (in_array($sortField, $allowedSortFields)) {
-            $query->orderBy($sortField, $sortDirection === 'asc' ? 'asc' : 'desc');
         }
 
-        // Pagination
+        if ($request->has("sort_direction") && in_array($request->sort_direction, ["asc", "desc"])) {
-        $perPage = $request->input('per_page', 15);
+            $query->orderBy("began_at", $request->sort_direction);
-        $games = $query->paginate($perPage);
+        } else {
+            $query->orderBy("began_at", "desc");
+        }
+
+        return response()->json($query->paginate(15));
+    }
+
+    public function host(Request $request)
+    {
+        $request->validate([
+            'type' => 'required|in:3,9'
+        ]);
+
+        $user = $request->user();
+
+        $activeGame = Game::where(function ($q) use ($user) {
+             $q->where("player1_user_id", $user->id)
+               ->orWhere("player2_user_id", $user->id);
+        })
+        ->whereIn("status", ["Pending", "Playing"])
+        ->exists();
+
+        if ($activeGame) {
+             return response()->json(["message" => "You already have an active game."], 400);
+        }
+
+        $game = Game::create([
+            'type' => $request->type,
+            'status' => 'Pending',
+            'player1_user_id' => $user->id,
+            'player2_user_id' => self::GHOST_ID,
+            'began_at' => now(),
+            'player1_points' => 0,
+            'player2_points' => 0,
+        ]);
+
+        return response()->json($game, 201);
+    }
+
+    public function open(Request $request)
+    {
+        $type = $request->query('type', '9');
+        $GHOST_ID = 1;
+
+        $games = Game::where('status', 'Pending')
+            ->where('player2_user_id', $GHOST_ID) 
+            ->where('type', $type)
+            ->with('player1')
+            ->orderBy('began_at', 'asc')
+            ->paginate(10);
+
+        return response()->json($games);
+    }
+
+    public function store(Request $request)
+    {
+        $this->authorize('create', Game::class);
+
+        $validated = $request->validate([
+            "type" => "required|in:3,9",
+            "player2_user_id" => "nullable|integer|exists:users,id",
+            "match_id" => "nullable|integer|exists:matches,id",
+            "status" => "nullable|in:Pending,Playing",
+            "began_at" => "nullable|date"
+        ]);
+
+        $user = Auth::user();
+
+        $activeGame = Game::where(function ($q) use ($user) {
+             $q->where("player1_user_id", $user->id)
+               ->orWhere("player2_user_id", $user->id);
+        })
+        ->whereIn("status", ["Pending", "Playing"])
+        ->exists();
+
+        if ($activeGame) {
+             return response()->json(["message" => "You already have an active game."], 400);
+        }
+
+        $player2Id = $request->input('player2_user_id', self::GHOST_ID);
+
+        $initialStatus = $request->input('status', 'Pending');
+
+        if ($player2Id !== self::GHOST_ID && !$request->has('status')) {
+            $initialStatus = 'Playing';
+        }
+
+        $game = Game::create([
+            "type" => $validated["type"],
+            "status" => $initialStatus,
+            "player1_user_id" => $user->id,
+            "player2_user_id" => $player2Id,
+            "winner_user_id" => null,
+            "loser_user_id" => null,
+            "match_id" => $request->input('match_id', null),
+            "began_at" => $request->input('began_at', now()),
+            "player1_points" => 0,
+            "player2_points" => 0,
+            "custom" => null,
+        ]);
 
         return response()->json([
-            'data' => $games->items(),
+            "message" => "Game created",
-            'meta' => [
+            "game" => $game,
-                'current_page' => $games->currentPage(),
+        ], 201);
-                'last_page' => $games->lastPage(),
+    }
-                'per_page' => $games->perPage(),
+
-                'total' => $games->total()
+    public function join(Request $request, Game $game)
-            ]
+    {
+        if ($game->status !== 'Pending' || $game->player2_user_id !== self::GHOST_ID) {
+            return response()->json(['message' => 'Game is not available'], 400);
+        }
+
+        if ($game->player1_user_id === $request->user()->id) {
+            return response()->json(['message' => 'Cannot join your own game'], 400);
+        }
+
+        $activeGame = Game::where(function ($q) use ($request) {
+             $q->where("player1_user_id", $request->user()->id)
+               ->orWhere("player2_user_id", $request->user()->id);
+        })
+        ->whereIn("status", ["Pending", "Playing"])
+        ->exists();
+
+        if ($activeGame) {
+             return response()->json(["message" => "You already have an active game."], 400);
+        }
+
+        $game->update([
+            'player2_user_id' => $request->user()->id,
+            'status' => 'Playing',
+        ]);
+
+        return response()->json($game);
+    }
+
+    public function show(Game $game)
+    {
+        $this->authorize('view', $game);
+
+        $game->load(["player1", "player2", "winner"]);
+        return response()->json($game);
+    }
+
+    public function update(Request $request, Game $game)
+    {
+        $this->authorize('update', $game);
+
+        if ($game->status == "Ended") {
+            return response()->json(["message" => "Game already ended"], 400);
+        }
+
+        $data = $request->validate([
+            "status" => "in:Playing,Ended,Interrupted",
+            "winner_user_id" => "exists:users,id",
+            "loser_user_id" => "exists:users,id",
+            "player1_points" => "integer",
+            "player2_points" => "integer",
+            "is_draw" => "boolean",
+            "total_time" => "numeric",
+        ]);
+
+        if (isset($data["status"]) && $data["status"] === "Ended") {
+            $data["ended_at"] = now();
+        }
+
+        $game->update($data);
+
+        return response()->json($game);
+    }
+
+    public function resign(Game $game)
+    {
+        $this->authorize('resign', $game);
+
+        $user = Auth::user();
+
+        $game->update([
+            'status' => 'Ended',
+            'winner_user_id' => $game->player1_user_id === $user->id
+                ? $game->player2_user_id
+                : $game->player1_user_id,
+            'loser_user_id' => $user->id,
+            'ended_at' => now(),
+        ]);
+
+        return response()->json([
+            'message' => 'You have resigned from the game',
+            'game' => $game->fresh(),
         ]);
     }
 
-    /**
-     * Store a newly created resource in storage.
-     */
-    public function store(Request $request)
-    {
-        //
-    }
-
-    /**
-     * Display the specified resource.
-     */
-    public function show(Game $game)
-    {
-        //
-    }
-
-    /**
-     * Update the specified resource in storage.
-     */
-    public function update(Request $request, Game $game)
-    {
-        //
-    }
-
-    /**
-     * Remove the specified resource from storage.
-     */
     public function destroy(Game $game)
     {
-        //
+        if ($game->player1_user_id !== auth()->id()) {
+            return response()->json(['message' => 'Unauthorized'], 403);
+        }
+
+        if ($game->status !== 'Pending') {
+            return response()->json(['message' => 'Cannot delete a game in progress'], 400);
+        }
+
+        $game->delete();
+        return response()->noContent();
     }
 }

api/app/Http/Controllers/MatchController.php

@@ -0,0 +1,367 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Models\MatchGame;
+use App\Models\CoinTransaction;
+use App\Models\CoinTransactionType;
+use Illuminate\Http\Request;
+use App\Http\Requests\StoreMatchRequest;
+use Illuminate\Support\Facades\DB;
+
+class MatchController extends Controller
+{
+    public function index(Request $request)
+    {
+        $query = MatchGame::query()->with(["winner", "player1", "player2"]);
+
+        if ($request->has("type")) {
+            $query->where("type", $request->type);
+        }
+
+        if ($request->has("status")) {
+            $query->where("status", $request->status);
+        }
+
+        if ($request->has("pot") && in_array($request->pot, ["asc", "desc"])) {
+            $query->orderBy("stake", $request->pot);
+        } elseif (
+            $request->has("sort_direction") &&
+            in_array($request->sort_direction, ["asc", "desc"])
+        ) {
+            $query->orderBy("began_at", $request->sort_direction);
+        } else {
+            $query->orderBy("began_at", "desc");
+        }
+
+        return response()->json($query->paginate(15));
+    }
+
+    public function store(StoreMatchRequest $request)
+    {
+        $validated = $request->validated();
+        $user = $request->user();
+        $stake = $validated['stake'];
+
+        if ($user->coins_balance < $stake) {
+            return response()->json(
+                ["message" => "Insufficient coin balance"],
+                400,
+            );
+        }
+
+        $activeMatch = MatchGame::where(function ($q) use ($user) {
+            $q->where("player1_user_id", $user->id)->orWhere(
+                "player2_user_id",
+                $user->id,
+            );
+        })
+            ->whereIn("status", ["Pending", "Playing"])
+            ->exists();
+
+        if ($activeMatch) {
+            return response()->json(['message' => 'You already have an active match.'], 400);
+        }
+
+        return DB::transaction(function () use ($validated, $user, $stake) {
+            $GHOST_ID = 1;
+
+            $user->decrement("coins_balance", $stake);
+
+            $stakeType = CoinTransactionType::firstOrCreate(
+                ["name" => "Match stake"],
+                ["type" => "D"], 
+            );
+
+            $match = MatchGame::create([
+                "type" => $validated["type"],
+                "status" => "Pending",
+                "player1_user_id" => $user->id,
+                "player2_user_id" => $GHOST_ID,
+                "winner_user_id" => $GHOST_ID,
+                "loser_user_id" => $GHOST_ID,
+                "stake" => $stake,
+                "began_at" => now(),
+                "player1_marks" => 0,
+                "player2_marks" => 0,
+                "player1_points" => 0,
+                "player2_points" => 0,
+            ]);
+
+            CoinTransaction::create([
+                "user_id" => $user->id,
+                "match_id" => $match->id,
+                "coin_transaction_type_id" => $stakeType->id,
+                "transaction_datetime" => now(),
+                "coins" => -$stake,
+            ]);
+
+            return response()->json(
+                [
+                    "message" => "Match created successfully",
+                    "match" => $match,
+                    "balance" => $user->coins_balance,
+                ],
+                201,
+            );
+        });
+    }
+
+    public function show(MatchGame $match)
+    {
+        $match->load(["player1", "player2", "winner"]);
+        return response()->json($match);
+    }
+
+    public function join(MatchGame $match)
+    {
+        $user = request()->user();
+
+        if ($match->player1_user_id == $user->id) {
+            return response()->json(
+                ["message" => "You cannot join your own match"],
+                400,
+            );
+        }
+        if ($match->status !== "Pending") {
+            return response()->json(
+                ["message" => "Match is full or started"],
+                400,
+            );
+        }
+
+        if ($user->coins_balance < $match->stake) {
+            return response()->json(
+                ["message" => "Insufficient coin balance to join this match"],
+                400,
+            );
+        }
+
+        $activeMatch = MatchGame::where(function ($q) use ($user) {
+            $q->where("player1_user_id", $user->id)->orWhere(
+                "player2_user_id",
+                $user->id,
+            );
+        })
+            ->whereIn("status", ["Pending", "Playing"])
+            ->exists();
+
+        if ($activeMatch) {
+            return response()->json(
+                ["message" => "You are already in another active match."],
+                400,
+            );
+        }
+
+        return DB::transaction(function () use ($match, $user) {
+            $user->decrement("coins_balance", $match->stake);
+
+            $stakeType = CoinTransactionType::firstOrCreate(
+                ["name" => "Match stake"],
+                ["type" => "D"],
+            );
+
+            CoinTransaction::create([
+                'user_id' => $user->id,
+                'match_id' => $match->id,
+                'coin_transaction_type_id' => $stakeType->id,
+                'transaction_datetime' => now(),
+                'coins' => -$match->stake,
+            ]);
+
+            $match->update([
+                "status" => "Playing",
+                "player2_user_id" => $user->id,
+            ]);
+
+            return response()->json([
+                "message" => "Joined match successfully!",
+                "match" => $match,
+                "balance" => $user->coins_balance,
+            ]);
+        });
+    }
+
+    public function update(Request $request, MatchGame $match)
+    {
+        if ($match->status == "Ended") {
+            return response()->json(["message" => "Match already ended"], 400);
+        }
+
+        $data = $request->validate([
+            "status" => "in:Playing,Ended,Interrupted",
+            "winner_user_id" => "exists:users,id",
+            "loser_user_id" => "exists:users,id",
+            "player1_marks" => "integer",
+            "player2_marks" => "integer",
+            "player1_points" => "integer",
+            "player2_points" => "integer",
+            "total_time" => "numeric",
+        ]);
+
+        return DB::transaction(function () use ($match, $data) {
+            if (isset($data['status']) && $data['status'] === 'Ended') {
+                $data['ended_at'] = now();
+            }
+
+            $match->update($data);
+
+            if (
+                $match->status === "Ended" &&
+                $match->stake > 0 &&
+                $match->winner_user_id
+            ) {
+                $payoutType = CoinTransactionType::firstOrCreate(
+                    ["name" => "Match payout"],
+                    ["type" => "C"], 
+                );
+
+                $totalPrize = $match->stake * 2;
+
+                CoinTransaction::create([
+                    "user_id" => $match->winner_user_id,
+                    "match_id" => $match->id,
+                    "coin_transaction_type_id" => $payoutType->id,
+                    "transaction_datetime" => now(),
+                    "coins" => $totalPrize,
+                ]);
+
+                $match->winner->increment("coins_balance", $totalPrize);
+            }
+
+            return response()->json($match);
+        });
+    }
+
+    public function host(Request $request)
+    {
+        $request->validate([
+            "type" => "required|in:3,9",
+            "stake" => "required|integer|min:0",
+        ]);
+
+        $user = $request->user();
+        $stake = $request->stake;
+
+        if ($user->coins_balance < $stake) {
+            return response()->json(
+                ["message" => "Insufficient coin balance"],
+                400,
+            );
+        }
+
+        $activeMatch = MatchGame::where(function ($q) use ($user) {
+            $q->where("player1_user_id", $user->id)->orWhere(
+                "player2_user_id",
+                $user->id,
+            );
+        })
+            ->whereIn("status", ["Pending", "Playing"])
+            ->exists();
+
+        if ($activeMatch) {
+            return response()->json(
+                ["message" => "You already have an active match."],
+                400,
+            );
+        }
+
+        return DB::transaction(function () use ($request, $user, $stake) {
+            $GHOST_ID = 1;
+
+            $user->decrement("coins_balance", $stake);
+
+            $stakeType = CoinTransactionType::firstOrCreate(
+                ["name" => "Match stake"],
+                ["type" => "D"],
+            );
+
+            $match = MatchGame::create([
+                'type' => $request->type,
+                'status' => 'Pending',
+                'player1_user_id' => $user->id,
+                'player2_user_id' => $GHOST_ID,
+                'winner_user_id' => null,
+                'loser_user_id' => null,
+                'stake' => $stake,
+                'began_at' => now(),
+                'player1_marks' => 0, 'player2_marks' => 0,
+                'player1_points' => 0, 'player2_points' => 0,
+
+            ]);
+
+            CoinTransaction::create([
+                "user_id" => $user->id,
+                "match_id" => $match->id,
+                "coin_transaction_type_id" => $stakeType->id,
+                "transaction_datetime" => now(),
+                "coins" => -$stake,
+            ]);
+
+            return response()->json($match, 201);
+        });
+    }
+
+    public function open(Request $request)
+    {
+        $query = MatchGame::where('status', 'Pending')
+            ->where(function($q) {
+                $q->whereNull('player2_user_id')
+                  ->orWhere('player2_user_id', 1); 
+            });
+
+        if ($request->has('type')) {
+            $query->where('type', $request->type);
+        }
+
+        $matches = $query->with('player1:id,nickname')
+            ->orderBy('began_at', 'desc')
+            ->paginate(10);
+
+        return response()->json($matches);
+    }
+
+    public function destroy(MatchGame $match)
+    {
+        $user = request()->user();
+
+        if ($match->player1_user_id !== $user->id) {
+            return response()->json(['message' => 'Unauthorized'], 403);
+        }
+
+        if ($match->status !== 'Pending') {
+            return response()->json(['message' => 'Cannot cancel a match that has already started'], 400);
+        }
+
+        return DB::transaction(function () use ($match, $user) {
+            DB::table('games')->where('match_id', $match->id)->delete();
+
+            CoinTransaction::where('match_id', $match->id)->update(['match_id' => null]);
+
+            if ($match->stake > 0) {
+                 $user->increment('coins_balance', $match->stake);
+
+                 $refundType = CoinTransactionType::firstOrCreate(
+                     ['name' => 'Refund'],
+                     ['type' => 'C']
+                 );
+
+                 CoinTransaction::create([
+                     'user_id' => $user->id,
+                     'match_id' => null, 
+                     'coin_transaction_type_id' => $refundType->id,
+                     'transaction_datetime' => now(),
+                     'coins' => $match->stake,
+                     'custom' => "Refund for Match #{$match->id}"
+                 ]);
+            }
+
+            $match->delete();
+
+            return response()->json([
+                'message' => 'Match canceled and refunded',
+                'balance' => $user->coins_balance
+            ]);
+        });
+    }
+}

api/app/Http/Controllers/ProfileController.php

@@ -0,0 +1,113 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use Illuminate\Http\Request;
+use App\Models\User;
+use Illuminate\Support\Facades\Auth;
+use Illuminate\Support\Facades\Hash;
+use Illuminate\Support\Facades\Storage;
+use Illuminate\Support\Str;
+
+
+class ProfileController extends Controller
+{
+    public function show(Request $request)
+    {
+        $user = $request->user();
+
+        return response()->json($user);
+    }
+
+    public function update(Request $request)
+    {
+        $request->validate([
+            "name" => "required|string|max:255",
+            "nickname" =>
+                "required|string|max:255|unique:users,nickname," .
+                $request->user()->id,
+        ]);
+
+        $user = $request->user();
+        $user->name = $request->name;
+        $user->nickname = $request->nickname;
+        $user->save();
+
+        return response()->json($user);
+    }
+
+    public function destroy(User $user)
+    {
+        $currentUser = Auth::user();
+
+        if ($currentUser->id !== $user->id && $currentUser->type !== "A") {
+            return response()->json(["message" => "Unauthorized"], 403);
+        }
+
+        $user->delete();
+
+        return response()->json(["message" => "User deleted successfully"]);
+    }
+
+    public function updatePassword(Request $request)
+    {
+        $request->validate([
+            "current_password" => "required",
+            "new_password" => "required|min:8|confirmed",
+        ]);
+
+        $user = $request->user();
+
+        if (!Hash::check($request->current_password, $user->password)) {
+            return response()->json(
+                [
+                    "message" => "Current password is incorrect",
+                ],
+                422,
+            );
+        }
+
+        $user->password = Hash::make($request->new_password);
+        $user->save();
+
+        return response()->json([
+            "message" => "Password changed successfully",
+        ]);
+    }
+
+    public function getCoins(Request $request)
+    {
+        return response()->json([
+            'coins' => $request->user()->coins_balance
+        ]);
+    }
+
+    public function uploadAvatar(Request $request)
+    {
+        $request->validate([
+            "avatar" => "required|image|mimes:jpeg,png,jpg,gif|max:2048",
+        ]);
+
+        $user = $request->user();
+
+        if ($user->photo_avatar_filename) {
+            Storage::disk("public")->delete(
+                "photos_avatars/" . $user->photo_avatar_filename,
+            );
+        }
+
+        $file = $request->file("avatar");
+        $filename =
+            str_pad($user->id, 5, "0", STR_PAD_LEFT) .
+            "_" .
+            Str::random(10) .
+            "." .
+            $file->extension();
+        $file->storeAs("photos_avatars", $filename, "public");
+
+        $user->photo_avatar_filename = $filename;
+        $user->save();
+
+        return response()->json($user);
+    }
+}

api/app/Http/Controllers/StatisticsController.php

@@ -0,0 +1,136 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Http\Controllers\Controller;
+use App\Models\Game;
+use App\Models\User;
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\DB;
+use App\Models\CoinTransaction;
+
+class StatisticsController extends Controller
+{
+    public function getPublicStats()
+    {
+        $totalPlayers = User::where('type', 'P')->count();
+
+        $totalGames = Game::where('status', 'Ended')->count();
+        $activeGames = Game::where('status', 'Playing')->count();
+
+        return response()->json([
+            'total_players' => $totalPlayers,
+            'total_games' => $totalGames,
+            'active_games' => $activeGames,
+        ]);
+    }
+
+    public function getLeaderboard(Request $request)
+    {
+        $type = $request->query('type');
+
+        $leaderboard = User::where('type', 'P')
+            ->withCount(['wonGames' => function ($query) use ($type) {
+                if ($type) {
+                    $query->where('type', $type);
+                }
+            }])
+            ->orderBy('won_games_count', 'desc')
+            ->paginate(10);
+
+        $leaderboard->through(function ($user) {
+            return [
+                'id' => $user->id,
+                'nickname' => $user->nickname,
+                'photo_avatar_filename' => $user->photo_avatar_filename,
+                'won_games_count' => $user->won_games_count,
+            ];
+        });
+
+        return response()->json($leaderboard);
+    }
+
+    public function getPersonalStats(Request $request)
+    {
+        $user = $request->user();
+
+        $totalGames = Game::where('status', 'Ended')
+            ->where(function ($q) use ($user) {
+                $q->where('player1_user_id', $user->id)
+                  ->orWhere('player2_user_id', $user->id);
+            })
+            ->count();
+
+        $totalWins = Game::where('status', 'Ended')
+            ->where('winner_user_id', $user->id)
+            ->count();
+
+        $totalLosses = $totalGames - $totalWins; 
+
+        $winRate = 0;
+        if ($totalGames > 0) {
+            $winRate = round(($totalWins / $totalGames) * 100, 1);
+        }
+
+        return response()->json([
+            'nickname' => $user->nickname,
+            'total_games' => $totalGames,
+            'total_wins' => $totalWins,
+            'total_losses' => $totalLosses,
+            'win_rate' => $winRate . '%',
+            'current_balance' => $user->coins_balance, 
+        ]);
+    }
+
+    public function getAdminStats()
+    {
+        $totalPlayers = User::where('type', 'P')->count();
+        $totalGames = Game::count();
+        $totalBlockedUsers = User::where('blocked', true)->count();
+        
+        $gamesByType = Game::select('type', DB::raw('count(*) as total'))
+            ->groupBy('type')
+            ->get();
+
+
+        $gamesPerMonth = Game::select(
+                DB::raw("strftime('%Y-%m', began_at) as month"), 
+                DB::raw('count(*) as total')
+            )
+            ->whereNotNull('began_at')
+            ->groupBy('month')
+            ->orderBy('month', 'desc')
+            ->limit(12)
+            ->get();
+
+        $totalCoinsPurchased = \App\Models\CoinTransaction::whereHas('type', function($q) {
+                $q->where('name', 'Coin purchase');
+            })
+            ->sum('coins');
+
+        $purchasesPerMonth = \App\Models\CoinTransaction::join('coin_transaction_types', 'coin_transactions.coin_transaction_type_id', '=', 'coin_transaction_types.id')
+            ->where('coin_transaction_types.name', 'Coin purchase')
+            ->select(
+                DB::raw("strftime('%Y-%m', coin_transactions.transaction_datetime) as month"), 
+                DB::raw('SUM(coin_transactions.coins) as total_coins')
+            )
+            ->groupBy('month')
+            ->orderBy('month', 'desc')
+            ->limit(12)
+            ->get();
+
+        return response()->json([
+            'global_counters' => [
+                'total_players' => $totalPlayers,
+                'total_games' => $totalGames,
+                'blocked_users' => $totalBlockedUsers,
+                'total_coins_purchased' => (int) $totalCoinsPurchased,
+            ],
+            'charts' => [
+                'games_by_type' => $gamesByType,
+                'games_per_month' => $gamesPerMonth,
+                'purchases_per_month' => $purchasesPerMonth,
+            ]
+        ]);
+    }
+}

api/app/Http/Controllers/TransactionController.php

@@ -0,0 +1,31 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Models\CoinTransaction;
+use Illuminate\Http\Request;
+
+class TransactionController extends Controller
+{
+    
+    public function index(Request $request)
+    {
+
+        $this->authorize('viewAny', CoinTransaction::class);
+
+        $query = CoinTransaction::with('user:id,nickname,email', 'type:id,name');
+        
+        if ($request->has('sort_coins')) {
+            $direction = $request->get('sort_coins') === 'asc' ? 'asc' : 'desc';
+            $query->orderBy('coins', $direction);
+        } 
+        
+        $dateDirection = $request->get('sort_datetime') === 'asc' ? 'asc' : 'desc';
+        $query->orderBy('transaction_datetime', $dateDirection);
+
+       
+        $transactions = $query->paginate(15);
+
+        return response()->json($transactions);
+    }
+}

api/app/Http/Controllers/UserController.php

@@ -0,0 +1,331 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Models\Game;
+use App\Models\User;
+use App\Models\MatchGame;
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Auth;
+use Illuminate\Support\Facades\Hash;
+use Illuminate\Validation\Rule;
+
+class UserController extends Controller
+{
+    public function index(Request $request)
+    {
+        $this->authorize("viewAny", User::class);
+
+        $query = User::query();
+
+        if ($request->has("type")) {
+            $query->where("type", $request->type);
+        }
+
+        if ($request->has("blocked")) {
+            $query->where("blocked", $request->type);
+        }
+
+        if ($request->has("search")) {
+            $query->where(function ($q) use ($request) {
+                $q->where("name", "like", "%" . $request->search . "%")
+                    ->orWhere("email", "like", "%" . $request->search . "%")
+                    ->orWhere("nickname", "like", "%" . $request->search . "%");
+            });
+        }
+
+        return response()->json($query->paginate(15));
+    }
+
+    public function store(Request $request)
+    {
+        $this->authorize("create", User::class);
+
+        $validated = $request->validate([
+            "name" => "required|string|max:255",
+            "email" => "required|email|unique:users,email",
+            "password" => "required|string|min:3",
+            "type" => "required|in:A,U",
+        ]);
+
+        $validated["password"] = Hash::make($validated["password"]);
+
+        $user = User::create($validated);
+
+        return response()->json($user, 201);
+    }
+
+    public function me(Request $request)
+    {
+        return response()->json($request->user());
+    }
+
+    public function show(User $user)
+    {
+        $currentUser = Auth::user();
+
+        if ($currentUser->type === "A" || $currentUser->id === $user->id) {
+            return response()->json($user);
+        } else {
+            return response()->json([
+                "id" => $user->id,
+                "name" => $user->name,
+                "nickname" => $user->nickname,
+                "photo_avatar_filename" => $user->photo_avatar_filename,
+                "type" => $user->type,
+            ]);
+        }
+    }
+
+    public function update(Request $request, User $user)
+    {
+        $this->authorize("update", $user);
+
+        $validated = $request->validate([
+            "name" => "sometimes|string|max:255",
+            "nickname" => [
+                "sometimes",
+                "string",
+                "max:20",
+                Rule::unique("users")->ignore($user->id),
+            ],
+            "email" => [
+                "sometimes",
+                "email",
+                Rule::unique("users")->ignore($user->id),
+            ],
+            "password" => "sometimes|string|min:3",
+        ]);
+
+        $user->update($validated);
+
+        return response()->json($user);
+    }
+
+    public function updatePassword(Request $request, User $user)
+    {
+        $this->authorize("update", $user);
+
+        $validated = $request->validate([
+            "current_password" => "required|string",
+            "new_password" => "required|string|min:3|confirmed",
+        ]);
+
+        if (!Hash::check($validated["current_password"], $user->password)) {
+            return response()->json(
+                ["message" => "Current password is incorrect"],
+                403,
+            );
+        }
+
+        $user->password = Hash::make($validated["new_password"]);
+        $user->save();
+
+        return response()->json(["message" => "Password updated successfully"]);
+    }
+
+    public function destroy(User $user)
+    {
+        $this->authorize("delete", $user);
+
+        $hasTransactions = $user->transactions()->exists();
+        $hasGames = Game::where(function ($q) use ($user) {
+            $q->where("player1_user_id", $user->id)->orWhere(
+                "player2_user_id",
+                $user->id,
+            );
+        })->exists();
+
+        if ($hasTransactions || $hasGames) {
+            $user->delete(); 
+            $message =
+                "User account deactivated (soft-deleted due to transaction/game history)";
+        } else {
+            $user->forceDelete(); 
+            $message = "User permanently deleted";
+        }
+
+        return response()->json(["message" => $message]);
+    }
+
+    public function getGames(Request $request, User $user)
+    {
+        $this->authorize("view", $user);
+
+        $query = \App\Models\Game::query()
+            ->where(function ($q) use ($user) {
+                $q->where("player1_user_id", $user->id)->orWhere(
+                    "player2_user_id",
+                    $user->id,
+                );
+            })
+            ->with(["winner", "player1", "player2"]);
+
+        if ($request->has("type")) {
+            $query->where("type", $request->type);
+        }
+
+        if ($request->has("status")) {
+            $query->where("status", $request->status);
+        }
+
+        if ($request->has("date_from")) {
+            $query->whereDate("began_at", ">=", $request->date_from);
+        }
+
+        if ($request->has("date_to")) {
+            $query->whereDate("began_at", "<=", $request->date_to);
+        }
+
+        $sortColumn = $request->get("sort_by", "began_at");
+        $sortDirection = $request->get("sort_direction", "desc");
+
+        $allowedColumns = [
+            "began_at",
+            "ended_at",
+            "total_time",
+            "total_points",
+        ];
+        if (in_array($sortColumn, $allowedColumns)) {
+            $query->orderBy($sortColumn, $sortDirection);
+        } else {
+            $query->orderBy("began_at", $sortDirection);
+        }
+
+        $games = $query->paginate(10);
+
+        $games->getCollection()->transform(function ($game) use ($user) {
+            if ($game->winner_user_id == $user->id) {
+                $game->outcome = "win";
+            } elseif ($game->is_draw) {
+                $game->outcome = "draw";
+            } else {
+                $game->outcome = "loss";
+            }
+            return $game;
+        });
+
+        return response()->json($games);
+    }
+
+    public function getMatches(Request $request, User $user)
+    {
+        $this->authorize("view", $user);
+
+        $query = MatchGame::query()
+            ->where(function ($q) use ($user) {
+                $q->where("player1_user_id", $user->id)->orWhere(
+                    "player2_user_id",
+                    $user->id,
+                );
+            })
+            ->with(["winner", "player1", "player2"]);
+
+        if ($request->has("type")) {
+            $query->where("type", $request->type);
+        }
+
+        if ($request->has("status")) {
+            $query->where("status", $request->status);
+        }
+
+        if ($request->has("date_from")) {
+            $query->whereDate("began_at", ">=", $request->date_from);
+        }
+
+        if ($request->has("date_to")) {
+            $query->whereDate("began_at", "<=", $request->date_to);
+        }
+
+        $sortColumn = $request->get("sort_by", "began_at");
+        $sortDirection = $request->get("sort_direction", "desc");
+
+        $allowedColumns = ["began_at", "ended_at", "stake", "total_time"];
+        if (in_array($sortColumn, $allowedColumns)) {
+            $query->orderBy($sortColumn, $sortDirection);
+        } else {
+            $query->orderBy("began_at", $sortDirection);
+        }
+
+        $matches = $query->paginate(10);
+
+        $matches->getCollection()->transform(function ($match) use ($user) {
+            if ($match->winner_user_id == $user->id) {
+                $match->outcome = "win";
+            } elseif (
+                $match->winner_user_id &&
+                $match->winner_user_id != $user->id
+            ) {
+                $match->outcome = "loss";
+            } else {
+                $match->outcome = "interrupted"; 
+            }
+            return $match;
+        });
+
+        return response()->json($matches);
+    }
+
+    public function block(User $user)
+    {
+        $this->authorize("block", $user);
+
+        $user->blocked = true;
+        $user->save();
+
+        $user->tokens()->delete();
+
+        return response()->json(["message" => "User blocked successfully"]);
+    }
+
+    public function unblock(User $user)
+    {
+        $this->authorize("unblock", $user);
+
+        $user->blocked = false;
+        $user->save();
+
+        return response()->json(["message" => "User unblocked successfully"]);
+    }
+
+    public function getTransactions(Request $request, User $user)
+    {
+        if (
+            $request->user()->id !== $user->id &&
+            $request->user()->type !== "A"
+        ) {
+            return response()->json(["message" => "Forbidden"], 403);
+        }
+
+        $query = $user->transactions()->with("type");
+
+        if ($request->has("type")) {
+            $query->whereHas("type", function ($q) use ($request) {
+                $q->where("type", $request->type);
+            });
+        }
+
+        if ($request->has("date_from")) {
+            $query->whereDate(
+                "transaction_datetime",
+                ">=",
+                $request->date_from,
+            );
+        }
+
+        if ($request->has("date_to")) {
+            $query->whereDate("transaction_datetime", "<=", $request->date_to);
+        }
+
+        $transactions = $query
+            ->orderBy("transaction_datetime", "desc")
+            ->paginate(10);
+
+        return response()->json($transactions);
+    }
+
+    public function getMyTransactions(Request $request)
+    {
+        return $this->getTransactions($request, $request->user());
+    }
+}

api/app/Http/Middleware/CheckUserType.php

@@ -0,0 +1,32 @@
+<?php
+
+namespace App\Http\Middleware;
+
+use Closure;
+use Illuminate\Http\Request;
+use Symfony\Component\HttpFoundation\Response;
+
+class CheckUserType
+{
+    /**
+     * Handle an incoming request.
+     *
+     * @param  \Closure(\Illuminate\Http\Request): (\Symfony\Component\HttpFoundation\Response)  $next
+     */
+    public function handle(
+        Request $request,
+        Closure $next,
+        string $type,
+    ): Response {
+        $user = $request->user();
+
+        if (!$user || $user->type !== $type) {
+            return response()->json(
+                ["message" => "Unauthorized. User type {$type} required."],
+                403,
+            );
+        }
+
+        return $next($request);
+    }
+}

api/app/Http/Requests/RegisterRequest.php

@@ -0,0 +1,32 @@
+<?php
+
+namespace App\Http\Requests;
+
+use Illuminate\Foundation\Http\FormRequest;
+
+class RegisterRequest extends FormRequest
+{
+    /**
+     * Determine if the user is authorized to make this request.
+     */
+    public function authorize(): bool
+    {
+        return true;
+    }
+
+    /**
+     * Get the validation rules that apply to the request.
+     *
+     * @return array<string, \Illuminate\Contracts\Validation\ValidationRule|array<mixed>|string>
+     */
+    public function rules(): array
+    {
+        return [
+            'email' => 'required|email|unique:users,email',
+            'nickname' => 'required|string|max:255',
+            'name' => 'required|string|max:255',
+            'password' => 'required|string|min:3',
+            'photo' => 'nullable|image|mimes:jpeg,png,jpg,gif|max:2048',
+        ];
+    }
+}

api/app/Http/Requests/StoreGameRequest.php

@@ -0,0 +1,29 @@
+<?php
+
+namespace App\Http\Requests;
+
+use Illuminate\Foundation\Http\FormRequest;
+use Illuminate\Support\Facades\Auth;
+
+class StoreGameRequest extends FormRequest
+{
+    public function authorize(): bool
+    {
+        return Auth::check();
+    }
+
+    public function rules(): array
+    {
+        return [
+            'type' => 'required|in:3,9',
+        ];
+    }
+
+    public function messages(): array
+    {
+        return [
+            'type.required' => 'You must choose a game type (Bisca de 3 or 9).',
+            'type.in' => 'Invalid game type. Choose 3 or 9.',
+        ];
+    }
+}

api/app/Http/Requests/StoreMatchRequest.php

@@ -0,0 +1,22 @@
+<?php
+
+namespace App\Http\Requests;
+
+use Illuminate\Foundation\Http\FormRequest;
+use Illuminate\Support\Facades\Auth;
+
+class StoreMatchRequest extends FormRequest
+{
+    public function authorize(): bool
+    {
+        return Auth::check();
+    }
+
+    public function rules(): array
+    {
+        return [
+            'type' => 'required|in:3,9',
+            'stake' => 'required|integer|min:1',
+        ];
+    }
+}

api/app/Models/CoinPurchase.php

@@ -0,0 +1,34 @@
+<?php
+
+namespace App\Models;
+
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+
+class CoinPurchase extends Model
+{
+    use HasFactory;
+    
+    protected $table = 'coin_purchases';
+    public $timestamps = false;
+
+    protected $fillable = [
+        'purchase_datetime',
+        'user_id',
+        'coin_transaction_id',
+        'euros',
+        'payment_type',
+        'payment_reference',
+        'custom'
+    ];
+
+    protected $casts = [
+        'purchase_datetime' => 'datetime',
+        'custom' => 'array',
+    ];
+
+    public function transaction()
+    {
+        return $this->belongsTo(CoinTransaction::class, 'coin_transaction_id');
+    }
+}

api/app/Models/CoinTransaction.php

@@ -0,0 +1,40 @@
+<?php
+
+namespace App\Models;
+
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+
+class CoinTransaction extends Model
+{
+    use HasFactory;
+
+    protected $table = 'coin_transactions';
+    
+    public $timestamps = false; 
+
+    protected $fillable = [
+        'transaction_datetime',
+        'user_id',
+        'match_id',
+        'game_id',
+        'coin_transaction_type_id',
+        'coins',
+        'custom'
+    ];
+
+    protected $casts = [
+        'transaction_datetime' => 'datetime',
+        'custom' => 'array',
+    ];
+
+    public function type()
+    {
+        return $this->belongsTo(CoinTransactionType::class, 'coin_transaction_type_id');
+    }
+
+    public function user()
+    {
+        return $this->belongsTo(User::class);
+    }
+}

api/app/Models/CoinTransactionType.php

@@ -0,0 +1,20 @@
+<?php
+
+namespace App\Models;
+
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+
+class CoinTransactionType extends Model
+{
+    use HasFactory;
+
+    // FIX: Disable auto-timestamps because the table doesn't have updated_at/created_at columns
+    public $timestamps = false;
+
+    protected $fillable = [
+        'name',
+        'type',
+        'description' // Include description if your table has it
+    ];
+}

api/app/Models/Game.php

@@ -3,11 +3,55 @@
 namespace App\Models;
 
 use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+
 
 class Game extends Model
 {
+    use HasFactory;
+
+    public $timestamps = false;
+
+    protected $fillable = [
+        'type',
+        'status',
+        'player1_user_id',
+        'player2_user_id',
+        'winner_user_id',
+        'loser_user_id',
+        'began_at',
+        'ended_at',
+        'total_time',
+        'player1_points',
+        'player2_points',
+        'custom',
+        'is_draw',
+        'match_id'
+    ];
+
+    protected $casts = [
+        'began_at' => 'datetime',
+        'ended_at' => 'datetime',
+        'is_draw' => 'boolean',
+    ];
+
     public function winner()
     {
         return $this->belongsTo(User::class, "winner_user_id");
     }
+
+    public function loser()
+    {
+        return $this->belongsTo(User::class, "loser_user_id");
+    }
+
+    public function player1()
+    {
+        return $this->belongsTo(User::class, 'player1_user_id');
+    }
+
+    public function player2()
+    {
+        return $this->belongsTo(User::class, 'player2_user_id');
+    }
 }

api/app/Models/MatchGame.php

@@ -0,0 +1,58 @@
+<?php
+
+namespace App\Models;
+
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+
+class MatchGame extends Model
+{
+    use HasFactory;
+
+    protected $table = 'matches';
+
+    public $timestamps = false;
+
+    protected $fillable = [
+        'type',
+        'status',
+        'player1_user_id',
+        'player2_user_id',
+        'winner_user_id',
+        'loser_user_id',
+        'began_at',
+        'ended_at',
+        'total_time',
+        'player1_marks',
+        'player2_marks',
+        'player1_points',
+        'player2_points',
+        'stake',
+        'custom'
+    ];
+
+    protected $casts = [
+        'began_at' => 'datetime',
+        'ended_at' => 'datetime',
+        'player1_marks' => 'integer',
+        'player2_marks' => 'integer',
+        'player1_points' => 'integer',
+        'player2_points' => 'integer',
+        'stake' => 'integer',
+    ];
+
+    public function player1()
+    {
+        return $this->belongsTo(User::class, 'player1_user_id');
+    }
+
+    public function player2()
+    {
+        return $this->belongsTo(User::class, 'player2_user_id');
+    }
+
+    public function winner()
+    {
+        return $this->belongsTo(User::class, 'winner_user_id');
+    }
+}

api/app/Models/User.php

@@ -2,32 +2,35 @@
 
 namespace App\Models;
 
-// use Illuminate\Contracts\Auth\MustVerifyEmail;
 use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\SoftDeletes;
 use Illuminate\Foundation\Auth\User as Authenticatable;
 use Illuminate\Notifications\Notifiable;
 use Laravel\Sanctum\HasApiTokens;
 
 class User extends Authenticatable
 {
-    /** @use HasFactory<\Database\Factories\UserFactory> */
+    use HasApiTokens, HasFactory, Notifiable, SoftDeletes;
-    use HasFactory, Notifiable, HasApiTokens;
 
     /**
      * The attributes that are mass assignable.
      *
-     * @var list<string>
+     * @var array<int, string>
      */
     protected $fillable = [
         'name',
         'email',
         'password',
+        'nickname',
+        'type',
+        'photo_avatar_filename',
+        'coins_balance',
     ];
 
     /**
      * The attributes that should be hidden for serialization.
      *
-     * @var list<string>
+     * @var array<int, string>
      */
     protected $hidden = [
         'password',
@@ -35,15 +38,29 @@ class User extends Authenticatable
     ];
 
     /**
-     * Get the attributes that should be cast.
+     * The attributes that should be cast.
      *
-     * @return array<string, string>
+     * @var array<string, string>
      */
-    protected function casts(): array
+    protected $casts = [
-    {
-        return [
         'email_verified_at' => 'datetime',
         'password' => 'hashed',
+        'blocked' => 'boolean',
+        'deleted_at' => 'datetime',
     ];
+
+    public function wonGames()
+    {
+        return $this->hasMany(Game::class, 'winner_user_id');
+    }
+
+    public function games()
+    {
+        return $this->hasMany(Game::class, 'player1_user_id')->orWhere('player2_user_id', $this->id);
+    }
+
+    public function transactions()
+    {
+        return $this->hasMany(CoinTransaction::class);
     }
 }

api/app/Policies/CoinTransactionPolicy.php

@@ -0,0 +1,18 @@
+<?php
+
+namespace App\Policies;
+
+use App\Models\CoinTransaction;
+use App\Models\User;
+use Illuminate\Auth\Access\Response;
+
+class CoinTransactionPolicy
+{
+    /**
+     * Determine whether the user can view any models.
+     */
+    public function viewAny(User $user): bool
+    {
+        return $user->type === 'A' ? true : false;
+    }
+}

api/app/Policies/GamePolicy.php

@@ -0,0 +1,112 @@
+<?php
+
+namespace App\Policies;
+
+use App\Models\Game;
+use App\Models\User;
+
+class GamePolicy
+{
+    public function viewAny(User $user): bool
+    {
+        return true;
+    }
+
+    public function view(User $user, Game $game): bool
+    {
+        if ($user->type === "A") {
+            return true;
+        }
+
+        if (
+            $game->player1_user_id === $user->id ||
+            $game->player2_user_id === $user->id
+        ) {
+            return true;
+        }
+
+        if ($game->status === "Pending") {
+            return true;
+        }
+
+        return false;
+    }
+
+    public function create(User $user): bool
+    {
+        if ($user->type === "A") {
+            return false;
+        }
+
+        return true;
+    }
+
+    public function join(User $user, Game $game): bool
+    {
+        if ($user->type === "A") {
+            return false;
+        }
+
+        if (
+            $game->status !== "Pending" ||
+            $game->player1_user_id === $user->id
+        ) {
+            return false;
+        }
+
+        if ($game->player2_user_id !== null && $game->player2_user_id !== 1) {
+            return false;
+        }
+
+        return true;
+    }
+
+    public function resign(User $user, Game $game): bool
+    {
+        if ($user->type === "A") {
+            return false;
+        }
+
+        if (
+            $game->status !== "Playing" ||
+            ($game->player1_user_id !== $user->id &&
+                $game->player2_user_id !== $user->id)
+        ) {
+            return false;
+        }
+
+        return true;
+    }
+
+    public function update(User $user, Game $game): bool
+    {
+        if ($user->type === "A") {
+            return false;
+        }
+
+        if (!in_array($game->status, ['Playing', 'Pending'])) {
+            return false;
+        }
+
+        if ($game->player1_user_id !== $user->id && $game->player2_user_id !== $user->id) {
+            return false;
+        }
+
+        return true;
+    }
+
+    public function delete(User $user, Game $game): bool
+    {
+        return $user->type === "A";
+    }
+
+    public function restore(User $user, Game $game): bool
+    {
+        return false;
+    }
+
+    public function forceDelete(User $user, Game $game): bool
+    {
+        return false;
+    }
+}

api/app/Policies/UserPolicy.php

@@ -0,0 +1,74 @@
+<?php
+
+namespace App\Policies;
+
+use App\Models\User;
+
+class UserPolicy
+{
+    /**
+     * Determine whether the user can view any models.
+     */
+    public function viewAny(User $user): bool
+    {
+        return $user->type === 'A';
+    }
+
+    /**
+     * Determine whether the user can view the model.
+     */
+    public function view(User $user, User $model): bool
+    {
+        return $user->id === $model->id || $user->type === 'A';
+    }
+
+    /**
+     * Determine whether the user can create models.
+     */
+    public function create(User $user): bool
+    {
+        return $user->type === 'A';
+    }
+
+    /**
+     * Determine whether the user can update the model.
+     */
+    public function update(User $user, User $model): bool
+    {
+        return $user->id === $model->id;
+    }
+
+    /**
+     * Determine whether the user can delete the model.
+     */
+    public function delete(User $user, User $model): bool
+    {
+        return ($user->type === 'A' && $user->id !== $model->id) || ($user->type === 'P' && $user->id === $model->id);
+    }
+
+    public function block(User $user, User $model): bool
+    {
+        return $user->type === 'A' && $user->id !== $model->id && $model->type === 'P';
+    }
+
+    public function unblock(User $user, User $model): bool
+    {
+        return $user->type === 'A' && $user->id !== $model->id && $model->type === 'P';
+    }
+
+    /**
+     * Determine whether the user can restore the model.
+     */
+    public function restore(User $user, User $model): bool
+    {
+        return false;
+    }
+
+    /**
+     * Determine whether the user can permanently delete the model.
+     */
+    public function forceDelete(User $user, User $model): bool
+    {
+        return false;
+    }
+}

api/bootstrap/app.php

@@ -6,14 +6,16 @@ use Illuminate\Foundation\Configuration\Middleware;
 
 return Application::configure(basePath: dirname(__DIR__))
     ->withRouting(
-        web: __DIR__.'/../routes/web.php',
+        web: __DIR__ . "/../routes/web.php",
-        api: __DIR__.'/../routes/api.php',
+        api: __DIR__ . "/../routes/api.php",
-        commands: __DIR__.'/../routes/console.php',
+        commands: __DIR__ . "/../routes/console.php",
-        health: '/up',
+        health: "/up",
     )
     ->withMiddleware(function (Middleware $middleware): void {
-        //
+        $middleware->alias([
+            "user.type" => App\Http\Middleware\CheckUserType::class,
+        ]);
     })
     ->withExceptions(function (Exceptions $exceptions): void {
-        //
+    })
-    })->create();
+    ->create();

api/bootstrap/cache/services.php

@@ -102,12 +102,15 @@
     'Illuminate\\Queue\\Console\\ForgetFailedCommand' => 'Illuminate\\Foundation\\Providers\\ConsoleSupportServiceProvider',
     'Illuminate\\Queue\\Console\\ListenCommand' => 'Illuminate\\Foundation\\Providers\\ConsoleSupportServiceProvider',
     'Illuminate\\Queue\\Console\\MonitorCommand' => 'Illuminate\\Foundation\\Providers\\ConsoleSupportServiceProvider',
+    'Illuminate\\Queue\\Console\\PauseCommand' => 'Illuminate\\Foundation\\Providers\\ConsoleSupportServiceProvider',
     'Illuminate\\Queue\\Console\\PruneBatchesCommand' => 'Illuminate\\Foundation\\Providers\\ConsoleSupportServiceProvider',
     'Illuminate\\Queue\\Console\\PruneFailedJobsCommand' => 'Illuminate\\Foundation\\Providers\\ConsoleSupportServiceProvider',
     'Illuminate\\Queue\\Console\\RestartCommand' => 'Illuminate\\Foundation\\Providers\\ConsoleSupportServiceProvider',
+    'Illuminate\\Queue\\Console\\ResumeCommand' => 'Illuminate\\Foundation\\Providers\\ConsoleSupportServiceProvider',
     'Illuminate\\Queue\\Console\\RetryCommand' => 'Illuminate\\Foundation\\Providers\\ConsoleSupportServiceProvider',
     'Illuminate\\Queue\\Console\\RetryBatchCommand' => 'Illuminate\\Foundation\\Providers\\ConsoleSupportServiceProvider',
     'Illuminate\\Queue\\Console\\WorkCommand' => 'Illuminate\\Foundation\\Providers\\ConsoleSupportServiceProvider',
+    'Illuminate\\Foundation\\Console\\ReloadCommand' => 'Illuminate\\Foundation\\Providers\\ConsoleSupportServiceProvider',
     'Illuminate\\Foundation\\Console\\RouteCacheCommand' => 'Illuminate\\Foundation\\Providers\\ConsoleSupportServiceProvider',
     'Illuminate\\Foundation\\Console\\RouteClearCommand' => 'Illuminate\\Foundation\\Providers\\ConsoleSupportServiceProvider',
     'Illuminate\\Foundation\\Console\\RouteListCommand' => 'Illuminate\\Foundation\\Providers\\ConsoleSupportServiceProvider',

api/composer.json

@@ -17,7 +17,7 @@
     "require-dev": {
         "fakerphp/faker": "^1.23",
         "laravel/pail": "^1.2.2",
-        "laravel/pint": "^1.24",
+        "laravel/pint": "^1.26",
         "laravel/sail": "^1.48",
         "mockery/mockery": "^1.6",
         "nunomaduro/collision": "^8.6",

api/config/auth.php

@@ -64,11 +64,6 @@ return [
             'driver' => 'eloquent',
             'model' => env('AUTH_MODEL', App\Models\User::class),
         ],
-
-        // 'users' => [
-        //     'driver' => 'database',
-        //     'table' => 'users',
-        // ],
     ],
 
     /*

api/config/cache.php

@@ -61,7 +61,6 @@ return [
                 env('MEMCACHED_PASSWORD'),
             ],
             'options' => [
-                // Memcached::OPT_CONNECT_TIMEOUT => 2000,
             ],
             'servers' => [
                 [

api/package-lock.json

@@ -6,7 +6,7 @@
         "": {
             "devDependencies": {
                 "@tailwindcss/vite": "^4.0.0",
-                "axios": "^1.11.0",
+                "axios": "^1.13.2",
                 "concurrently": "^9.0.1",
                 "laravel-vite-plugin": "^2.0.0",
                 "tailwindcss": "^4.0.0",

api/package.json

@@ -8,7 +8,7 @@
     },
     "devDependencies": {
         "@tailwindcss/vite": "^4.0.0",
-        "axios": "^1.11.0",
+        "axios": "^1.13.2",
         "concurrently": "^9.0.1",
         "laravel-vite-plugin": "^2.0.0",
         "tailwindcss": "^4.0.0",

api/routes/api.php

@@ -2,18 +2,91 @@
 
 use App\Http\Controllers\AuthController;
 use App\Http\Controllers\GameController;
-use Illuminate\Http\Request;
+use App\Http\Controllers\MatchController;
+use App\Http\Controllers\ProfileController;
+use App\Http\Controllers\StatisticsController;
+use App\Http\Controllers\UserController;
+use App\Http\Controllers\CoinPurchaseController;
+use App\Http\Controllers\TransactionController;
 use Illuminate\Support\Facades\Route;
 
+Route::prefix('v1')->group(function () {
+    Route::post('/login', [AuthController::class, 'login']);
+    Route::post('/register', [AuthController::class, 'register']);
 
+    Route::get('/statistics/public', [StatisticsController::class, 'getPublicStats']);
+    Route::get('/leaderboard', [StatisticsController::class, 'getLeaderboard']);
 
-Route::post('/login', [AuthController::class, 'login']);
+    Route::middleware(['auth:sanctum', 'throttle:60,1'])->group(function () {
-
+        Route::post('/logout', [AuthController::class, 'logout']);
-Route::middleware('auth:sanctum')->group(function () {
+        Route::post('/coin-purchases', [CoinPurchaseController::class, 'store']);
-    Route::get('/users/me', function (Request $request) {
+        Route::get('/statistics/me', [StatisticsController::class, 'getPersonalStats']);
-        return $request->user();
+        Route::prefix('users/me')->group(function () {
+            Route::get('/', [ProfileController::class, 'show']);
+            Route::put('/', [ProfileController::class, 'update']);
+            Route::patch('/password', [ProfileController::class, 'updatePassword']);
+            Route::delete('/', [ProfileController::class, 'destroy']);
+            Route::get('/coins', [ProfileController::class, 'getCoins']);
+            Route::put('/password', [
+                ProfileController::class,
+                'updatePassword',
+            ]);
+            Route::post('/avatar', [ProfileController::class, 'uploadAvatar']);
+            Route::get('/transactions', [UserController::class, 'getMyTransactions']);
         });
-    Route::post('logout', [AuthController::class, 'logout']);
-});
 
-Route::apiResource('games', GameController::class);
+        Route::prefix('/users')->group(function () {
+            Route::get('/{user}', [UserController::class, 'show']);
+            Route::get('/{user}/transactions', [UserController::class, 'getTransactions']);
+            Route::get('/{user}/games', [UserController::class, 'getGames']);
+            Route::get('/{user}/matches', [UserController::class, 'getMatches']);
+        });
+
+        Route::prefix('games')->group(function () {
+            Route::post('host', [GameController::class, 'host']);
+            Route::get('open', [GameController::class, 'open']);
+            Route::get('/', [GameController::class, 'index']);
+            Route::get('/{game}', [GameController::class, 'show']);
+            Route::post('/', [GameController::class, 'store']);
+            Route::put('/{game}', [GameController::class, 'update']);
+            Route::delete('/{game}', [GameController::class, 'destroy']);
+            Route::post('/{game}/resign', [GameController::class, 'resign']);
+            Route::post('/{game}/join', [GameController::class, 'join']);
+        });
+
+        Route::prefix('matches')->group(function () {
+            Route::post('host', [MatchController::class, 'host']);
+            Route::get('open', [MatchController::class, 'open']);
+            Route::post('/{match}/join', [MatchController::class, 'join']);
+            Route::post('/{match}/start', [MatchController::class, 'start']); 
+            Route::delete('/{match}', [MatchController::class, 'destroy']);
+            Route::apiResource('/', MatchController::class)->parameters(['' => 'match']);
+        });
+
+        Route::middleware('user.type:A')
+            ->prefix('admin')
+            ->group(function () {
+                Route::get('/statistics', [StatisticsController::class, 'getAdminStats']);
+                Route::get('/transactions', [TransactionController::class, 'index']);
+                Route::get('/games', [GameController::class, 'index']);
+                Route::get('/matches', [MatchController::class, 'index']);
+                Route::prefix('users')->group(function () {
+                    Route::get('/', [UserController::class, 'index']);
+                    Route::post('/', [UserController::class, 'store']);
+                    Route::put('/{user}', [UserController::class, 'update']);
+                    Route::delete('/{user}', [
+                        UserController::class,
+                        'destroy',
+                    ]);
+                    Route::post('/{user}/block', [
+                        UserController::class,
+                        'block',
+                    ]);
+                    Route::post('/{user}/unblock', [
+                        UserController::class,
+                        'unblock',
+                    ]);
+                });
+            });
+    });
+});

api/sample-requests.http

@@ -0,0 +1,84 @@
+### Get All Students (Login)
+# @name login
+POST http://localhost:8000/api/v1/login
+Content-Type: application/json
+Accept: application/json
+
+{
+    "email": "[email protected]",
+    "password": "123"
+}
+
+### Capture the token & id
+@token = {{login.response.body.token}}
+@id = {{login.response.body.user.id}}
+
+### Get All matches
+GET http://localhost:8000/api/v1/games
+Content-Type: application/json
+Accept: application/json
+Authorization: Bearer {{token}}
+
+### Get me user
+GET http://localhost:8000/api/v1/users/me
+Content-Type: application/json
+Accept: application/json
+Authorization: Bearer {{token}}
+
+### Get me coins
+GET http://localhost:8000/api/v1/users/me/coins
+Content-Type: application/json
+Accept: application/json
+Authorization: Bearer {{token}}
+
+### Get me matches
+GET http://localhost:8000/api/v1/users/{{id}}/matches
+Content-Type: application/json
+Accept: application/json
+Authorization: Bearer {{token}}
+
+### Get me transactions
+GET http://localhost:8000/api/v1/users/{{id}}/transactions?type=C
+Content-Type: application/json
+Accept: application/json
+Authorization: Bearer {{token}}
+
+### post coin-purchases
+POST http://localhost:8000/api/v1/coin-purchases
+Content-Type: application/json
+Accept: application/json
+Authorization: Bearer {{token}}
+
+{
+    "euros": 1,
+    "payment_type": "MBWAY",
+    "payment_reference": "912345678"
+}
+
+### Get leaderboard
+GET http://localhost:8000/api/v1/leaderboard
+Content-Type: application/json
+Accept: application/json
+
+### Get me stats
+GET http://localhost:8000/api/v1/statistics/me
+Content-Type: application/json
+Accept: application/json
+Authorization: Bearer {{token}}
+
+### Get public stats
+GET http://localhost:8000/api/v1/statistics/public
+Content-Type: application/json
+Accept: application/json
+
+### Get admin stats
+GET http://localhost:8000/api/v1/admin/statistics
+Content-Type: application/json
+Accept: application/json
+Authorization: Bearer {{token}}
+
+### Get admin stats
+GET http://localhost:8000/api/v1/admin/users
+Content-Type: application/json
+Accept: application/json
+Authorization: Bearer {{token}}

bruno_collection/Admin/Get Users.bru

@@ -0,0 +1,20 @@
+meta {
+  name: Get Users
+  type: http
+  seq: 1
+}
+
+get {
+  url: {{api_url}}/admin/users/
+  body: none
+  auth: inherit
+}
+
+headers {
+  Authorization: Bearer {{token}}
+}
+
+settings {
+  encodeUrl: true
+  timeout: 0
+}

bruno_collection/Admin/folder.bru

@@ -0,0 +1,8 @@
+meta {
+  name: Admin
+  seq: 4
+}
+
+auth {
+  mode: inherit
+}

bruno_collection/Auth/Login.bru

@@ -5,14 +5,14 @@ meta {
 }
 
 post {
-  url: {{api_url}}/auth/login
+  url: {{api_url}}/login
   body: json
   auth: none
 }
 
 body:json {
   {
-    "email":"a1@mail.pt",
+    "email":"p[email protected]",
     "password":"123"
   }
 }

bruno_collection/Auth/Patch Password.bru

@@ -0,0 +1,23 @@
+meta {
+  name: Patch Password
+  type: http
+  seq: 3
+}
+
+patch {
+  url: {{api_url}}/users/me
+  body: json
+  auth: none
+}
+
+headers {
+  Accept: application/json
+  Authorization: Bearer {{token}}
+}
+
+body:json {
+  {
+    "current_password":"123",
+    "new_password": "456"
+  }
+}

bruno_collection/Games/Create Game.bru

@@ -0,0 +1,15 @@
+meta {
+  name: Create Game
+  type: http
+  seq: 3
+}
+
+post {
+  url: {{api_url}}/games
+  body: none
+  auth: inherit
+}
+
+settings {
+  encodeUrl: true
+}

bruno_collection/Games/Get Games.bru

@@ -5,7 +5,7 @@ meta {
 }
 
 get {
-  url: {{api_url}}/games
+  url: {{api_url}}/games/1
   body: none
   auth: none
 }

bruno_collection/environments/Local Development.bru

@@ -1,5 +1,5 @@
 vars {
-  base_url: http://localhost:8085
+  base_url: http://localhost:8000
-  api_url: http://localhost:8085/api
+  api_url: http://localhost:8000/api/v1
   token: 
 }

deployment/kubernetes-vue.yml

@@ -17,7 +17,7 @@ spec:
       priorityClassName: low-priority
       containers:
         - name: web
-          image: registry-172.22.21.115.sslip.io/dad-group-x/web:v1.0.0
+          image: registry-172.22.21.115.sslip.io/dad-group-46/web:v1.0.1
           resources:
             requests:
               memory: "64Mi"

frontend/.env.example

@@ -1,2 +1,2 @@
 VITE_API_DOMAIN=localhost:8000
-VITE_WS_CONNECTION=ws://localhost:3000
+VITE_WS_CONNECTION=ws://localhost:3001

frontend/components.json

@@ -9,13 +9,12 @@
     "cssVariables": true,
     "prefix": ""
   },
-  "iconLibrary": "lucide",
   "aliases": {
     "components": "@/components",
+    "composables": "@/composables",
     "utils": "@/lib/utils",
     "ui": "@/components/ui",
-    "lib": "@/lib",
+    "lib": "@/lib"
-    "composables": "@/composables"
   },
-  "registries": {}
+  "iconLibrary": "lucide"
 }

frontend/index.html

@@ -5,7 +5,7 @@
     <link rel="icon" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="stylesheet" href="/src/index.css" />
-    <title>Vite App</title>
+    <title>Bisca</title>
   </head>
   <body>
     <div id="app"></div>

frontend/package.json

@@ -16,14 +16,15 @@
   "dependencies": {
     "@tailwindcss/vite": "^4.1.17",
     "@tanstack/vue-table": "^8.21.3",
-    "@vueuse/core": "^14.0.0",
+    "@vueuse/core": "^14.1.0",
     "axios": "^1.13.2",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "date-fns": "^4.1.0",
+    "lucide-react": "^0.562.0",
     "lucide-vue-next": "^0.554.0",
     "pinia": "^3.0.3",
-    "reka-ui": "^2.6.0",
+    "reka-ui": "^2.7.0",
     "socket.io-client": "^4.8.1",
     "tailwind-merge": "^3.4.0",
     "tailwindcss": "^4.1.17",

frontend/src/App.vue

@@ -3,8 +3,7 @@
   <nav class="max-w-full p-5 flex flex-row justify-between align-middle">
     <div class="align-middle text-xl">
       <RouterLink to="/"> {{ pageTitle }} </RouterLink>
-      <span class="text-xs" v-if="authStore.currentUser">&nbsp;&nbsp;&nbsp;
+      <span class="text-xs" v-if="authStore.currentUser">&nbsp;&nbsp;&nbsp; ({{ authStore.currentUser?.name }})
-        ({{ authStore.currentUser?.name }})
       </span>
     </div>
     <NavBar @logout="logout" :userLoggedIn="authStore.isLoggedIn" />
@@ -17,41 +16,33 @@
 </template>
 
 <script setup>
-import { RouterLink, RouterView } from 'vue-router';
+import { RouterLink, RouterView } from 'vue-router'
-import { toast } from 'vue-sonner';
+import { toast } from 'vue-sonner'
 import 'vue-sonner/style.css'
-import { ref, onMounted } from 'vue';
+import { ref, onMounted } from 'vue'
 import { Toaster } from '@/components/ui/sonner'
-import NavBar from './components/layout/NavBar.vue';
+import NavBar from './components/layout/NavBar.vue'
-import { useAuthStore } from './stores/auth';
+import { useAuthStore } from './stores/auth'
-import { useSocketStore } from './stores/socket';
+import { useSocketStore } from './stores/socket'
 
 const authStore = useAuthStore()
 const socketStore = useSocketStore()
 
-
+const pageTitle = ref(`DAD 2025/26`)
-const year = new Date().getFullYear()
-const pageTitle = ref(`DAD ${year}/${String(year + 1).slice(-2)}`)
-
-
 
 const logout = () => {
-
   toast.promise(authStore.logout(), {
     loading: 'Calling API',
     success: () => {
       return 'Logout Sucessfull '
     },
-    error: (data) => `[API] Error saving game - ${data?.response?.data?.message}`,
+    error: (data) => `[API] Error - ${data?.response?.data?.message}`,
   })
-
 }
 
-onMounted(() => {
+onMounted(async () => {
-  socketStore.handleConnection()
+  await authStore.restoreSession()
 })
-
-
 </script>
 
-<style></style>`
+<style></style>

frontend/src/components/game/DeckArea.vue

@@ -0,0 +1,112 @@
+<template>
+  <div class="relative flex items-center justify-center w-64 h-48">
+    <div
+      v-if="trumpCard"
+      class="absolute rotate-90 origin-center transition-all duration-700"
+      :class="[trumpReveal && 'scale-110']"
+    >
+      <div
+        class="ring-2 ring-amber-400/60 ring-offset-2 rounded-lg transition-all duration-700"
+        :class="[
+          trumpReveal &&
+            'ring-4 ring-amber-400 shadow-[0_0_30px_rgba(251,191,36,0.8)] animate-pulse',
+        ]"
+      >
+        <GameCard :suit="trumpCard.suit" :rank="trumpCard.rank" />
+      </div>
+      <div
+        v-if="trumpReveal"
+        class="absolute -bottom-8 left-1/2 -translate-x-1/2 bg-amber-500/90 text-white text-[10px] font-bold px-3 py-1 rounded-full whitespace-nowrap animate-pulse"
+      >
+        TRUMP
+      </div>
+    </div>
+
+    <div
+      v-if="!isEmpty && cardsRemaining > 0"
+      class="absolute -translate-x-8 -translate-y-4 transition-all duration-300"
+      :class="[cardsRemaining === 0 && 'opacity-0 scale-95', deckPulse && 'scale-105']"
+    >
+      <div class="relative">
+        <div
+          class="absolute inset-0 bg-gray-800 rounded-lg opacity-20 translate-x-1 translate-y-1"
+        ></div>
+        <div
+          class="absolute inset-0 bg-gray-800 rounded-lg opacity-15 translate-x-2 translate-y-2"
+        ></div>
+        <div
+          class="absolute inset-0 bg-gray-800 rounded-lg opacity-10 translate-x-3 translate-y-3"
+        ></div>
+
+        <div class="relative">
+          <GameCard suit="c" :rank="1" :face-down="true" />
+
+          <div
+            class="absolute -top-2 -right-2 bg-blue-600 text-white text-xs font-bold rounded-full w-8 h-8 flex items-center justify-center shadow-lg border-2 border-white transition-all duration-300"
+          >
+            <Transition
+              enter-active-class="transition-all duration-200"
+              enter-from-class="scale-150 opacity-0"
+              enter-to-class="scale-100 opacity-100"
+              leave-active-class="transition-all duration-200"
+              leave-from-class="scale-100 opacity-100"
+              leave-to-class="scale-50 opacity-0"
+              mode="out-in"
+            >
+              <span :key="cardsRemaining">{{ cardsRemaining }}</span>
+            </Transition>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, watch } from 'vue'
+import GameCard from './GameCard.vue'
+
+const props = defineProps({
+  trumpCard: {
+    type: Object,
+    default: null,
+  },
+  cardsRemaining: {
+    type: Number,
+    required: true,
+  },
+  isEmpty: {
+    type: Boolean,
+    required: true,
+  },
+  revealTrump: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+const deckPulse = ref(false)
+const trumpReveal = ref(false)
+
+watch(
+  () => props.cardsRemaining,
+  () => {
+    deckPulse.value = true
+    setTimeout(() => {
+      deckPulse.value = false
+    }, 300)
+  },
+)
+
+watch(
+  () => props.revealTrump,
+  (newValue) => {
+    if (newValue) {
+      trumpReveal.value = true
+      setTimeout(() => {
+        trumpReveal.value = false
+      }, 3000) 
+    }
+  },
+)
+</script>

frontend/src/components/game/FlyingCard.vue

@@ -0,0 +1,72 @@
+<template>
+  <Teleport to="body">
+    <div
+      v-if="isVisible"
+      class="fixed pointer-events-none z-[9999]"
+      :style="{
+        left: currentPosition.x + 'px',
+        top: currentPosition.y + 'px',
+        transition: isAnimating ? `all ${duration}ms ease-out` : 'none',
+      }"
+    >
+      <GameCard :suit="card.suit" :rank="card.rank" :face-down="faceDown" />
+    </div>
+  </Teleport>
+</template>
+
+<script setup>
+import { ref, onMounted, watch } from 'vue'
+import GameCard from './GameCard.vue'
+
+const props = defineProps({
+  card: {
+    type: Object,
+    required: true,
+  },
+  startPosition: {
+    type: Object,
+    required: true,
+    validator: (value) => 'x' in value && 'y' in value,
+  },
+  endPosition: {
+    type: Object,
+    required: true,
+    validator: (value) => 'x' in value && 'y' in value,
+  },
+  duration: {
+    type: Number,
+    default: 500,
+  },
+  faceDown: {
+    type: Boolean,
+    default: true,
+  },
+  delay: {
+    type: Number,
+    default: 0,
+  },
+})
+
+const emit = defineEmits(['complete'])
+
+const isVisible = ref(false)
+const isAnimating = ref(false)
+const currentPosition = ref({ x: 0, y: 0 })
+
+onMounted(() => {
+  currentPosition.value = { ...props.startPosition }
+  isVisible.value = true
+
+  setTimeout(() => {
+    requestAnimationFrame(() => {
+      isAnimating.value = true
+      currentPosition.value = { ...props.endPosition }
+
+      setTimeout(() => {
+        emit('complete')
+        isVisible.value = false
+      }, props.duration)
+    })
+  }, props.delay)
+})
+</script>

frontend/src/components/game/GameBoard.vue

@@ -0,0 +1,82 @@
+<template>
+  <div
+    class="min-h-screen bg-linear-to-br from-green-700 via-green-800 to-green-900 grid grid-rows-[auto_auto_1fr_auto] grid-cols-[1fr_3fr_1fr] gap-6 p-8"
+  >
+    <div class="col-start-1 col-end-4 row-start-1 flex justify-start items-start">
+      <ScoreDisplay
+        :player-score="playerScore"
+        :opponent-score="opponentScore"
+        :current-turn="currentTurn"
+        :player-name="playerName"
+        :opponent-name="opponentName"
+        :round-number="1"
+      />
+    </div>
+
+    <div class="col-start-2 col-end-3 row-start-2 flex justify-center">
+      <PlayerHand
+        :cards="opponentHand"
+        :face-down="true"
+        :max-cards="maxCards"
+      />
+    </div>
+
+    <div class="col-start-2 col-end-3 row-start-3 flex items-center justify-center">
+      <PlayArea
+        :player-card="currentTrick.playerCard"
+        :opponent-card="currentTrick.opponentCard"
+        :winner="currentTrick.winner"
+      />
+    </div>
+
+    <div class="col-start-3 col-end-4 row-start-3 flex items-center justify-center">
+      <DeckArea :trump-card="trumpCard" :cards-remaining="cardsRemaining" :is-empty="deckIsEmpty" />
+    </div>
+
+    <div class="col-start-2 col-end-3 row-start-4 flex justify-center">
+      <PlayerHand
+        :cards="playerHand"
+        :face-down="false"
+        :max-cards="maxCards"
+        @card-clicked="handleCardClick"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import PlayerHand from './PlayerHand.vue'
+import PlayArea from './PlayArea.vue'
+import DeckArea from './DeckArea.vue'
+import ScoreDisplay from './ScoreDisplay.vue'
+
+const props = defineProps({
+  playerHand: { type: Array, default: () => [] },
+  opponentHand: { type: Array, default: () => [] },
+  currentTrick: {
+    type: Object,
+    default: () => ({ playerCard: null, opponentCard: null, winner: null }),
+  },
+  trumpCard: { type: Object, required: true },
+  cardsRemaining: { type: Number, default: 0 },
+  deckIsEmpty: { type: Boolean, default: false },
+  maxCards: { type: Number, default: 3 },
+  playerScore: { type: Number, default: 0 },
+  opponentScore: { type: Number, default: 0 },
+  playerName: { type: String, default: 'You' },
+  opponentName: { type: String, default: 'Bot' },
+  currentTurn: {
+    type: String,
+    default: 'player',
+    validator: (value) => ['player', 'opponent'].includes(value),
+  },
+  isMyTurn: { type: Boolean, default: false },
+})
+
+const emit = defineEmits(['play-card'])
+
+const handleCardClick = (payload) => {
+  if (!props.isMyTurn) return
+  emit('play-card', payload.card)
+}
+</script>

frontend/src/components/game/GameCard.vue

@@ -0,0 +1,39 @@
+<template>
+  <div
+    class="relative w-32 aspect-[2.5/3.5] cursor-pointer transition-all duration-300 ease-in-out hover:scale-105 hover:-translate-y-2 hover:shadow-2xl"
+  >
+    <img
+      :src="cardImage"
+      :alt="faceDown ? 'Card back' : `${suit} ${rank}`"
+      class="w-full h-full object-cover rounded-lg shadow-lg select-none"
+      draggable="false"
+    />
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+
+const props = defineProps({
+  suit: {
+    type: String,
+    required: true,
+  },
+  rank: {
+    type: Number,
+    required: true,
+  },
+  faceDown: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+const cardImage = computed(() => {
+  if (props.faceDown) {
+    return '/cards/semFace.png'
+  } else {
+    return `/cards/${props.suit}${props.rank}.png`
+  }
+})
+</script>

frontend/src/components/game/GameOver.vue

@@ -0,0 +1,302 @@
+<template>
+  <Teleport to="body">
+    <Transition
+      enter-active-class="transition-all duration-500 ease-out"
+      enter-from-class="opacity-0"
+      enter-to-class="opacity-100"
+      leave-active-class="transition-all duration-300 ease-in"
+      leave-from-class="opacity-100"
+      leave-to-class="opacity-0"
+    >
+      <div
+        v-if="isVisible"
+        class="fixed inset-0 bg-black/70 backdrop-blur-sm z-[9998] flex items-center justify-center p-4"
+        @click.self="handleClose"
+      >
+        <Transition
+          enter-active-class="transition-all duration-500 ease-out delay-100"
+          enter-from-class="opacity-0 scale-75 -translate-y-10"
+          enter-to-class="opacity-100 scale-100 translate-y-0"
+          leave-active-class="transition-all duration-300 ease-in"
+          leave-from-class="opacity-100 scale-100"
+          leave-to-class="opacity-0 scale-90"
+        >
+          <div
+            v-if="isVisible"
+            class="bg-gradient-to-br from-gray-900 via-gray-800 to-gray-900 rounded-2xl shadow-2xl border-2 max-w-md w-full p-8 relative overflow-hidden"
+            :class="[
+              winner === 'player'
+                ? 'border-emerald-500/50'
+                : winner === 'opponent'
+                  ? 'border-rose-500/50'
+                  : 'border-gray-600/50',
+            ]"
+          >
+            <!-- Confetti Effect (if player wins) -->
+            <div
+              v-if="winner === 'player' && showConfetti"
+              class="absolute inset-0 pointer-events-none"
+            >
+              <div
+                v-for="i in 30"
+                :key="i"
+                class="absolute w-2 h-2 animate-confetti"
+                :style="{
+                  left: Math.random() * 100 + '%',
+                  top: '-10px',
+                  backgroundColor: ['#fbbf24', '#34d399', '#60a5fa', '#f472b6', '#a78bfa'][
+                    Math.floor(Math.random() * 5)
+                  ],
+                  animationDelay: Math.random() * 2 + 's',
+                  animationDuration: 3 + Math.random() * 2 + 's',
+                }"
+              ></div>
+            </div>
+
+            <!-- Winner Icon/Badge -->
+            <div class="flex justify-center mb-6">
+              <div
+                class="relative"
+                :class="[winner === 'player' ? 'animate-bounce' : 'animate-pulse']"
+              >
+                <div
+                  v-if="winner === 'player'"
+                  class="w-24 h-24 rounded-full bg-gradient-to-br from-emerald-400 to-emerald-600 flex items-center justify-center shadow-lg shadow-emerald-500/50"
+                >
+                  <span class="text-5xl">🏆</span>
+                </div>
+                <div
+                  v-else-if="winner === 'opponent'"
+                  class="w-24 h-24 rounded-full bg-gradient-to-br from-rose-400 to-rose-600 flex items-center justify-center shadow-lg shadow-rose-500/50"
+                >
+                  <span class="text-5xl">😔</span>
+                </div>
+                <div
+                  v-else
+                  class="w-24 h-24 rounded-full bg-gradient-to-br from-gray-400 to-gray-600 flex items-center justify-center shadow-lg"
+                >
+                  <span class="text-5xl">🤝</span>
+                </div>
+              </div>
+            </div>
+
+            <!-- Title -->
+            <h2
+              class="text-4xl font-black text-center mb-2 bg-clip-text text-transparent bg-gradient-to-r"
+              :class="[
+                winner === 'player'
+                  ? 'from-emerald-300 to-emerald-500'
+                  : winner === 'opponent'
+                    ? 'from-rose-300 to-rose-500'
+                    : 'from-gray-300 to-gray-500',
+              ]"
+            >
+              {{ title }}
+            </h2>
+
+            <!-- Subtitle -->
+            <p class="text-center text-gray-400 mb-8">{{ subtitle }}</p>
+
+            <!-- Scores -->
+            <div class="bg-black/30 rounded-xl p-6 mb-8 space-y-4">
+              <div class="flex items-center justify-between">
+                <span class="text-gray-300 font-medium">{{ playerName }}</span>
+                <span
+                  class="text-3xl font-black tabular-nums transition-all duration-500"
+                  :class="[
+                    playerScore > opponentScore
+                      ? 'text-emerald-400 drop-shadow-[0_0_12px_rgba(52,211,153,0.6)]'
+                      : 'text-white',
+                  ]"
+                >
+                  {{ displayPlayerScore }}
+                </span>
+              </div>
+              <div class="h-px bg-gray-700"></div>
+              <div class="flex items-center justify-between">
+                <span class="text-gray-300 font-medium">{{ opponentName }}</span>
+                <span
+                  class="text-3xl font-black tabular-nums transition-all duration-500"
+                  :class="[
+                    opponentScore > playerScore
+                      ? 'text-rose-400 drop-shadow-[0_0_12px_rgba(251,113,133,0.6)]'
+                      : 'text-white',
+                  ]"
+                >
+                  {{ displayOpponentScore }}
+                </span>
+              </div>
+            </div>
+
+            <!-- Stats (optional) -->
+            <div v-if="stats" class="grid grid-cols-2 gap-4 mb-8">
+              <div class="bg-black/20 rounded-lg p-3 text-center">
+                <p class="text-gray-400 text-xs mb-1">Your Tricks</p>
+                <p class="text-2xl font-bold text-white">{{ stats.playerTricks }}</p>
+              </div>
+              <div class="bg-black/20 rounded-lg p-3 text-center">
+                <p class="text-gray-400 text-xs mb-1">Opponent Tricks</p>
+                <p class="text-2xl font-bold text-white">{{ stats.opponentTricks }}</p>
+              </div>
+            </div>
+
+            <!-- Actions -->
+            <div class="flex gap-3">
+              <button
+                v-if="!isLoggingOut"
+                @click="$emit('play-again')"
+                class="flex-1 bg-gradient-to-r from-emerald-500 to-emerald-600 hover:from-emerald-600 hover:to-emerald-700 text-white font-bold py-3 px-6 rounded-lg transition-all shadow-lg"
+              >
+                Play Again
+              </button>
+              <button
+                v-if="!hideClose"
+                @click="handleClose"
+                class="flex-1 font-bold py-3 px-6 rounded-lg transition-all"
+                :class="[
+                  isLoggingOut
+                    ? 'bg-red-600 hover:bg-red-700 text-white w-full'
+                    : 'bg-gray-700 hover:bg-gray-600 text-white',
+                ]"
+              >
+                {{ isLoggingOut ? 'Confirm Logout' : 'Close' }}
+              </button>
+            </div>
+          </div>
+        </Transition>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<script setup>
+import { ref, computed, watch, onMounted } from 'vue'
+
+const props = defineProps({
+  isVisible: {
+    type: Boolean,
+    required: true,
+  },
+  winner: {
+    type: String,
+    required: true,
+    validator: (value) => ['player', 'opponent', 'draw'].includes(value),
+  },
+  playerScore: {
+    type: Number,
+    required: true,
+  },
+  opponentScore: {
+    type: Number,
+    required: true,
+  },
+  playerName: {
+    type: String,
+    default: 'You',
+  },
+  opponentName: {
+    type: String,
+    default: 'Bot',
+  },
+  stats: {
+    type: Object,
+    default: null,
+  },
+  hideClose: {
+    type: Boolean,
+    default: false,
+  },
+  isLoggingOut: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+const emit = defineEmits(['close', 'play-again'])
+
+const showConfetti = ref(false)
+const displayPlayerScore = ref(0)
+const displayOpponentScore = ref(0)
+
+const title = computed(() => {
+  if (props.winner === 'player') return 'Victory!'
+  if (props.winner === 'opponent') return 'Defeat'
+  return 'Draw!'
+})
+
+const subtitle = computed(() => {
+  if (props.winner === 'player') return 'Congratulations! You won the game!'
+  if (props.winner === 'opponent') return 'Better luck next time!'
+  return 'The game ended in a draw'
+})
+
+const animateScore = (fromValue, toValue, callback) => {
+  const duration = 1000
+  const steps = 30
+  const stepDuration = duration / steps
+  const increment = (toValue - fromValue) / steps
+
+  let current = fromValue
+  let step = 0
+
+  const interval = setInterval(() => {
+    step++
+    current += increment
+
+    if (step >= steps) {
+      current = toValue
+      clearInterval(interval)
+    }
+
+    callback(Math.round(current))
+  }, stepDuration)
+}
+
+watch(
+  () => props.isVisible,
+  (newValue) => {
+    if (newValue) {
+      if (props.winner === 'player') {
+        setTimeout(() => {
+          showConfetti.value = true
+        }, 300)
+      }
+
+      setTimeout(() => {
+        animateScore(0, props.playerScore, (value) => {
+          displayPlayerScore.value = value
+        })
+        animateScore(0, props.opponentScore, (value) => {
+          displayOpponentScore.value = value
+        })
+      }, 400)
+    } else {
+      showConfetti.value = false
+      displayPlayerScore.value = 0
+      displayOpponentScore.value = 0
+    }
+  },
+  { immediate: true },
+)
+
+const handleClose = () => {
+  emit('close')
+}
+</script>
+
+<style scoped>
+@keyframes confetti {
+  0% {
+    transform: translateY(0) rotate(0deg);
+    opacity: 1;
+  }
+  100% {
+    transform: translateY(100vh) rotate(720deg);
+    opacity: 0;
+  }
+}
+
+.animate-confetti {
+  animation: confetti linear forwards;
+}
+</style>

frontend/src/components/game/PlayArea.vue

@@ -0,0 +1,100 @@
+<template>
+  <div class="flex items-center justify-center h-64 relative">
+    <div class="relative w-96 h-full flex items-center justify-center">
+      <!-- Opponent Card Slot -->
+      <div
+        class="absolute top-4"
+        :class="[
+          winner === 'opponent' && 'ring-4 ring-green-400 ring-offset-4 rounded-lg animate-pulse',
+        ]"
+        :style="{ zIndex: opponentCard ? (firstPlayer === 'opponent' ? 1 : 2) : 0 }"
+      >
+        <div
+          v-if="!opponentCard"
+          class="w-32 aspect-[2.5/3.5] border-4 border-dashed border-gray-400/40 rounded-lg bg-gray-100/20 flex items-center justify-center"
+        >
+          <span class="text-gray-400 text-xs font-medium">Opponent</span>
+        </div>
+        <Transition
+          enter-active-class="transition-all duration-500 ease-out"
+          enter-from-class="opacity-0 -translate-y-[200px] scale-75"
+          enter-to-class="opacity-100 translate-y-0 scale-100 rotate-6"
+          leave-active-class="transition-all duration-500 ease-in"
+          :leave-from-class="`opacity-100 translate-y-0 scale-100 rotate-6`"
+          :leave-to-class="
+            winner === 'opponent'
+              ? 'opacity-0 -translate-y-[200px] translate-x-[300px] scale-50 rotate-0'
+              : 'opacity-0 translate-y-[200px] translate-x-[300px] scale-50 rotate-0'
+          "
+          mode="out-in"
+        >
+          <div
+            v-if="opponentCard"
+            :key="`${opponentCard.suit}-${opponentCard.rank}`"
+            class="rotate-6"
+          >
+            <GameCard :suit="opponentCard.suit" :rank="opponentCard.rank" />
+          </div>
+        </Transition>
+      </div>
+
+      <!-- Player Card Slot -->
+      <div
+        class="absolute bottom-4"
+        :class="[
+          winner === 'player' && 'ring-4 ring-green-400 ring-offset-4 rounded-lg animate-pulse',
+        ]"
+        :style="{ zIndex: playerCard ? (firstPlayer === 'player' ? 1 : 2) : 0 }"
+      >
+        <div
+          v-if="!playerCard"
+          class="w-32 aspect-[2.5/3.5] border-4 border-dashed border-gray-400/40 rounded-lg bg-gray-100/20 flex items-center justify-center"
+        >
+          <span class="text-gray-400 text-xs font-medium">You</span>
+        </div>
+        <Transition
+          enter-active-class="transition-all duration-500 ease-out"
+          enter-from-class="opacity-0 translate-y-[200px] scale-75"
+          enter-to-class="opacity-100 translate-y-0 scale-100 -rotate-6"
+          leave-active-class="transition-all duration-500 ease-in"
+          :leave-from-class="`opacity-100 translate-y-0 scale-100 -rotate-6`"
+          :leave-to-class="
+            winner === 'opponent'
+              ? 'opacity-0 -translate-y-[200px] translate-x-[300px] scale-50 rotate-0'
+              : 'opacity-0 translate-y-[200px] translate-x-[300px] scale-50 rotate-0'
+          "
+          mode="out-in"
+        >
+          <div v-if="playerCard" :key="`${playerCard.suit}-${playerCard.rank}`" class="-rotate-6">
+            <GameCard :suit="playerCard.suit" :rank="playerCard.rank" />
+          </div>
+        </Transition>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import GameCard from './GameCard.vue'
+
+const props = defineProps({
+  playerCard: {
+    type: Object,
+    default: null,
+  },
+  opponentCard: {
+    type: Object,
+    default: null,
+  },
+  winner: {
+    type: String,
+    default: null,
+    validator: (value) => [null, 'player', 'opponent'].includes(value),
+  },
+  firstPlayer: {
+    type: String,
+    default: null,
+    validator: (value) => [null, 'player', 'opponent'].includes(value),
+  },
+})
+</script>

frontend/src/components/game/PlayerHand.vue

@@ -0,0 +1,112 @@
+<template>
+  <div class="flex justify-center items-end relative h-40">
+    <TransitionGroup
+      enter-active-class="transition-all duration-500 ease-out"
+      enter-from-class="opacity-0 -translate-y-8 scale-75"
+      enter-to-class="opacity-100 translate-y-0 scale-100"
+    >
+      <div
+        v-for="(card, index) in cards"
+        :key="`${card.suit}-${card.rank}-${index}`"
+        class="absolute transition-all duration-300 ease-out"
+        :style="getCardStyle(index)"
+        @mouseenter="hoveredIndex = index"
+        @mouseleave="hoveredIndex = null"
+        @click="handleCardClick(card, index)"
+      >
+        <div
+          :class="[
+            'transition-all duration-300 rounded-lg',
+            isValid(card)
+              ? 'cursor-pointer hover:shadow-xl ring-2 ring-transparent hover:ring-yellow-400/50'
+              : 'cursor-not-allowed opacity-60 grayscale brightness-75',
+            hoveredIndex === index && isValid(card) && 'scale-110 -translate-y-4 z-50',
+          ]"
+        >
+          <GameCard :suit="card.suit" :rank="card.rank" :face-down="faceDown" />
+        </div>
+      </div>
+    </TransitionGroup>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+import GameCard from './GameCard.vue'
+import { toast } from 'vue-sonner'
+import { useBiscaStore } from '@/stores/bisca'
+
+const props = defineProps({
+  cards: {
+    type: Array,
+    required: true,
+    default: () => [],
+  },
+  faceDown: {
+    type: Boolean,
+    default: false,
+  },
+  maxCards: {
+    type: Number,
+    default: 3,
+    validator: (value) => [3, 9].includes(value),
+  },
+  isDisabled: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+const emit = defineEmits(['card-clicked'])
+const store = useBiscaStore()
+
+const hoveredIndex = ref(null)
+
+const isValid = (card) => {
+  if (props.faceDown) return false
+  return store.canPlayCard(card)
+}
+
+const handleCardClick = (card, index) => {
+  if (props.faceDown) return
+
+  if (store.canPlayCard(card)) {
+    emit('card-clicked', { card, index })
+  } else {
+    toast.warning('Jogada Inválida', {
+      description: 'Tens de assistir ao naipe jogado!',
+      duration: 2000,
+    })
+  }
+}
+
+
+const overlapPercentage = computed(() => {
+  return props.maxCards === 3 ? 0.7 : 0.85
+})
+
+const cardWidth = 128
+const getCardStyle = (index) => {
+  const totalCards = props.cards.length
+  const overlapOffset = cardWidth * (1 - overlapPercentage.value)
+  const totalWidth = cardWidth + (totalCards - 1) * overlapOffset
+  const startOffset = -totalWidth / 2 + cardWidth / 2
+
+  let left = startOffset + index * overlapOffset
+
+  if (hoveredIndex.value !== null && hoveredIndex.value !== index) {
+    if (isValid(props.cards[hoveredIndex.value])) {
+        if (index < hoveredIndex.value) {
+          left -= 10
+        } else if (index > hoveredIndex.value) {
+          left += 10
+        }
+    }
+  }
+
+  return {
+    left: `calc(50% + ${left}px)`,
+    zIndex: hoveredIndex.value === index ? 50 : index + 1,
+  }
+}
+</script>

frontend/src/components/game/ScoreDisplay.vue

@@ -0,0 +1,173 @@
+<template>
+  <div
+    class="inline-flex bg-gray-900/80 backdrop-blur-sm border border-gray-700/50 shadow-xl rounded-md px-4 py-1.5 items-center gap-4"
+  >
+    <!-- Opponent Score (Left) -->
+    <div class="flex items-center gap-2">
+      <div class="flex flex-col items-start">
+        <span class="text-gray-400 text-[10px] uppercase tracking-wide mb-0.5">{{
+          opponentName
+        }}</span>
+        <span
+          class="text-2xl font-black tabular-nums transition-all duration-300"
+          :class="[
+            opponentScore > playerScore
+              ? 'text-amber-400 drop-shadow-[0_0_12px_rgba(251,191,36,0.6)]'
+              : 'text-white',
+            scoreChanged === 'opponent' && 'scale-110',
+          ]"
+        >
+          {{ displayOpponentScore }}
+        </span>
+      </div>
+    </div>
+
+    <!-- Center Turn Indicator -->
+    <div class="flex flex-col items-center gap-1">
+      <div
+        class="px-3 py-0.5 rounded-full text-[9px] font-bold uppercase tracking-wider transition-all duration-300"
+        :class="[
+          currentTurn === 'player'
+            ? 'bg-emerald-500/20 text-emerald-400 border border-emerald-500/40 shadow-[0_0_10px_rgba(52,211,153,0.4)]'
+            : 'bg-rose-500/20 text-rose-400 border border-rose-500/40 shadow-[0_0_10px_rgba(251,113,133,0.4)]',
+          turnChanged && 'animate-pulse',
+        ]"
+      >
+        <!-- You can replace the above line with the following if you want to show names instead -->
+        {{ currentTurn === 'player' ? playerName + "'s Turn" : opponentName + "'s Turn" }}
+      </div>
+      <span v-if="roundNumber" class="text-gray-500 text-[10px] font-medium">
+        Round {{ roundNumber }}
+      </span>
+    </div>
+
+    <!-- Player Score (Right) -->
+    <div class="flex items-center gap-2">
+      <div class="flex flex-col items-end">
+        <span class="text-gray-400 text-[10px] uppercase tracking-wide mb-0.5">{{
+          playerName
+        }}</span>
+        <span
+          class="text-2xl font-black tabular-nums transition-all duration-300"
+          :class="[
+            playerScore > opponentScore
+              ? 'text-amber-400 drop-shadow-[0_0_12px_rgba(251,191,36,0.6)]'
+              : 'text-white',
+            scoreChanged === 'player' && 'scale-110',
+          ]"
+        >
+          {{ displayPlayerScore }}
+        </span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, watch, computed } from 'vue'
+
+const props = defineProps({
+  playerScore: {
+    type: Number,
+    required: true,
+  },
+  opponentScore: {
+    type: Number,
+    required: true,
+  },
+  playerName: {
+    type: String,
+    default: 'You',
+  },
+  opponentName: {
+    type: String,
+    default: 'Bot',
+  },
+  currentTurn: {
+    type: String,
+    default: 'player',
+    validator: (value) => ['player', 'opponent'].includes(value),
+  },
+  roundNumber: {
+    type: Number,
+    default: null,
+  },
+})
+
+const scoreChanged = ref(null)
+const turnChanged = ref(false)
+const displayPlayerScore = ref(props.playerScore)
+const displayOpponentScore = ref(props.opponentScore)
+
+const animateScore = (fromValue, toValue, callback) => {
+  const duration = 500 
+  const steps = 20 
+  const stepDuration = duration / steps
+  const increment = (toValue - fromValue) / steps
+
+  let current = fromValue
+  let step = 0
+
+  const interval = setInterval(() => {
+    step++
+    current += increment
+
+    if (step >= steps) {
+      current = toValue
+      clearInterval(interval)
+    }
+
+    callback(Math.round(current))
+  }, stepDuration)
+}
+
+watch(
+  () => props.playerScore,
+  (newScore, oldScore) => {
+    scoreChanged.value = 'player'
+
+    if (oldScore !== undefined && newScore !== oldScore) {
+      animateScore(oldScore, newScore, (value) => {
+        displayPlayerScore.value = value
+      })
+    } else {
+      displayPlayerScore.value = newScore
+    }
+
+    setTimeout(() => {
+      scoreChanged.value = null
+    }, 300)
+  },
+  { immediate: true },
+)
+
+watch(
+  () => props.opponentScore,
+  (newScore, oldScore) => {
+    scoreChanged.value = 'opponent'
+
+    if (oldScore !== undefined && newScore !== oldScore) {
+      animateScore(oldScore, newScore, (value) => {
+        displayOpponentScore.value = value
+      })
+    } else {
+      displayOpponentScore.value = newScore
+    }
+
+    setTimeout(() => {
+      scoreChanged.value = null
+    }, 300)
+  },
+  { immediate: true },
+)
+
+watch(
+  () => props.currentTurn,
+  () => {
+    turnChanged.value = true
+    setTimeout(() => {
+      turnChanged.value = false
+    }, 1000)
+  },
+)
+</script>

frontend/src/components/layout/NavBar.vue

@@ -2,27 +2,28 @@
   <div>
     <NavigationMenu>
       <NavigationMenuList class="justify-around gap-20">
-                <NavigationMenuItem>
-                    <NavigationMenuTrigger>Testing</NavigationMenuTrigger>
-                    <NavigationMenuContent>
-                        <li>
-                            <NavigationMenuLink as-child>
-                                <RouterLink to="/testing/laravel">Laravel</RouterLink>
-                            </NavigationMenuLink>
-                            <NavigationMenuLink as-child>
-                                <RouterLink to="/testing/websockets">Web Sockets</RouterLink>
-                            </NavigationMenuLink>
-                        </li>
-                    </NavigationMenuContent>
-                </NavigationMenuItem>
         <NavigationMenuItem v-if="!userLoggedIn">
           <NavigationMenuLink>
             <RouterLink to="/login">Login</RouterLink>
           </NavigationMenuLink>
         </NavigationMenuItem>
-                <NavigationMenuItem v-else>
+
+        <NavigationMenuItem v-else class="flex flex-row gap-4">
+          <NavigationMenuLink v-if="userStore.coins > 0" href="/coins-purchase"
+            class="flex flex-row items-center gap-1">
+            <div class="flex items-center justify-center w-5 h-5 bg-purple-400 rounded-full shadow-sm">
+              <span class="text-[10px] font-bold text-purple-900">$</span>
+            </div>
+
+            <span class="text-sm font-medium tabular-nums">
+              {{ userStore.coins }} <span class="text-muted-foreground text-xs">Coins</span>
+            </span>
+          </NavigationMenuLink>
           <NavigationMenuLink>
-                        <a @click.prevent="logoutClickHandler">Logout</a>
+            <RouterLink to="/user">Profile</RouterLink>
+          </NavigationMenuLink>
+          <NavigationMenuLink>
+            <a href="/home" @click.prevent="logoutClickHandler" class="cursor-pointer">Logout</a>
           </NavigationMenuLink>
         </NavigationMenuItem>
       </NavigationMenuList>
@@ -31,6 +32,7 @@
 </template>
 
 <script setup>
+import { useBiscaStore } from '@/stores/bisca'
 import {
   NavigationMenu,
   NavigationMenuContent,
@@ -39,12 +41,42 @@ import {
   NavigationMenuList,
   NavigationMenuTrigger,
 } from '@/components/ui/navigation-menu'
-
+import router from '@/router'
+import { watch } from 'vue'
+import { useUserStore } from '@/stores/user'
 
 const emits = defineEmits(['logout'])
 const { userLoggedIn } = defineProps(['userLoggedIn'])
 
+const biscaStore = useBiscaStore()
+
 const logoutClickHandler = () => {
+  if (biscaStore.isGameRunning) {
+    const confirmLogout = window.confirm(
+      'If you leave now this game will count as "FORFEIT". Are you sure you want to logout?',
+    )
+    if (!confirmLogout) return
+
+    biscaStore.isLoggingOut = true
+
+    biscaStore.quitGame()
+
+    return
+  }
+
   emits('logout')
+  router.push('/login')
 }
+
+const userStore = useUserStore()
+
+watch(
+  () => userLoggedIn,
+  async (isLoggedIn) => {
+    if (isLoggedIn) {
+      await userStore.fetchCoins()
+    } else {
+      userStore.coins = 0
+    }
+  }, { immediate: true })
 </script>

frontend/src/components/ui/card/Card.vue

@@ -0,0 +1,21 @@
+<script setup>
+import { cn } from "@/lib/utils";
+
+const props = defineProps({
+  class: { type: null, required: false },
+});
+</script>
+
+<template>
+  <div
+    data-slot="card"
+    :class="
+      cn(
+        'bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </div>
+</template>