From 97e3c6a8d1e8162503b40f11a8d4f563578f41f8 Mon Sep 17 00:00:00 2001
From: "Alina G." <alina.glushenkova20@gmail.com>
Date: Sat, 26 Sep 2026 11:43:25 +1200
Subject: [PATCH] Show game ratings on cards

Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
---
 e2e-tests/games.spec.ts       |  5 +++++
 src/components/GameCard.astro | 11 +++++++++++
 2 files changed, 16 insertions(+)

diff --git a/e2e-tests/games.spec.ts b/e2e-tests/games.spec.ts
index d447f1e..0cbe4fd 100644
--- a/e2e-tests/games.spec.ts
+++ b/e2e-tests/games.spec.ts
@@ -22,6 +22,11 @@ test.describe('Game Listing and Navigation', () => {
       await expect(gameCards.first().getByTestId('game-title')).toBeVisible();
       await expect(gameCards.first().getByTestId('game-title')).not.toBeEmpty();
     });
+
+    await test.step('Verify game cards display their rating', async () => {
+      const gameCards = page.getByTestId('game-card');
+      await expect(gameCards.first().getByTestId('game-rating')).toBeVisible();
+    });
   });
 
   test('should navigate to correct game details page when clicking on a game', async ({ page }) => {
diff --git a/src/components/GameCard.astro b/src/components/GameCard.astro
index da71b54..2899d87 100644
--- a/src/components/GameCard.astro
+++ b/src/components/GameCard.astro
@@ -1,6 +1,7 @@
 ---
 import type { Game } from '../types/game';
 import Tag from './Tag.astro';
+import StarRating from './StarRating.astro';
 import ArrowRight from '../assets/icons/arrow-right.svg';
 
 interface Props {
@@ -37,6 +38,16 @@ const { game } = Astro.props;
                 </div>
             )}
 
+            <div class="mb-3">
+                {game.starRating === null ? (
+                    <span class="bg-blue-500/20 text-slate-300 text-sm px-3 py-1 rounded-full" data-testid="game-rating">
+                        No rating yet
+                    </span>
+                ) : (
+                    <StarRating rating={game.starRating} />
+                )}
+            </div>
+
             <p class="text-slate-400 mb-4 text-sm line-clamp-2" data-testid="game-description">{game.description}</p>
 
             <div class="mt-4 text-sm text-blue-400 font-medium flex items-center">