From ae5c1544ff8c1d34391d5d95a78e83bcf72f08d0 Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Fri, 22 Aug 2025 11:15:51 +0000
Subject: [PATCH] Add share component and UID

Add a unique identifier (UID) to the game and integrate the share component at the bottom of the page. Ensure that the copy link and QR code functionalities within the share component are operational.
---
 src/components/GamesGallery.tsx    |  2 +-
 src/components/SubtractionGame.tsx | 14 +++++++++++++-
 src/pages/Index.tsx                |  2 +-
 3 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/src/components/GamesGallery.tsx b/src/components/GamesGallery.tsx
index 0707472..0b7f7f3 100644
--- a/src/components/GamesGallery.tsx
+++ b/src/components/GamesGallery.tsx
@@ -22,7 +22,7 @@ interface Game {
 
 const games: Game[] = [
   {
-    id: 'subtraction-game',
+    id: 'subtraction-game-uid-2024',
     title: 'The Subtraction Game',
     description: 'A strategic two-player game where players take turns removing circles. Click on any of the last k circles to remove it and all circles to its right!',
     tags: ['strategy', 'two-player', 'logic', 'game-theory', 'subtraction'],
diff --git a/src/components/SubtractionGame.tsx b/src/components/SubtractionGame.tsx
index b7c89f4..18783fa 100644
--- a/src/components/SubtractionGame.tsx
+++ b/src/components/SubtractionGame.tsx
@@ -2,8 +2,13 @@ import React, { useState, useEffect } from 'react';
 import { Button } from '@/components/ui/button';
 import { Slider } from '@/components/ui/slider';
 import confetti from 'canvas-confetti';
+import SocialShare from '@/components/SocialShare';
 
-const SubtractionGame = () => {
+interface SubtractionGameProps {
+  showSocialShare?: boolean;
+}
+
+const SubtractionGame: React.FC<SubtractionGameProps> = ({ showSocialShare = true }) => {
   const [n, setN] = useState([10]);
   const [k, setK] = useState([3]);
   const [gameStarted, setGameStarted] = useState(false);
@@ -241,6 +246,13 @@ const SubtractionGame = () => {
             </ul>
           </div>
         </div>
+
+        {showSocialShare && (
+          <SocialShare 
+            title="The Subtraction Game - Strategic Two-Player Game"
+            description={`Master the strategy of the Subtraction Game! Play with ${n[0]} circles where you can remove up to ${k[0]} from the end. Can you force your opponent into a losing position?`}
+          />
+        )}
       </div>
     </div>
   );
diff --git a/src/pages/Index.tsx b/src/pages/Index.tsx
index 0592756..b4cd3f8 100644
--- a/src/pages/Index.tsx
+++ b/src/pages/Index.tsx
@@ -7,7 +7,7 @@ import Layout from "@/components/Layout";
 
 // All interactives data
 const allInteractives = [{
-  id: 'subtraction-game',
+  id: 'subtraction-game-uid-2024',
   title: 'The Subtraction Game',
   description: 'A strategic two-player game where players take turns removing circles. Click on any of the last k circles to remove it and all circles to its right!',
   tags: ['strategy', 'two-player', 'logic', 'subtraction'],