Add sharing functionality for completed puzzles and handle puzzle query parameter

Author: TudorEsan

frontend/public/x-logo.png

@@ -150,6 +150,16 @@ export function PuzzleSubmit({
 
   const buttonText = isPuzzleCompleted ? "Already Completed" : "Submit Solution";
 
+  const handleShareClick = () => {
+    if (!puzzle) return;
+
+    const puzzleUrl = `${window.location.origin}/?puzzle=${puzzle.id}`;
+    const tweetText = `I just solved "${puzzle.title}" on Linera Game of Life! \n\nTry it yourself: ${puzzleUrl}`;
+    const twitterIntentUrl = `https://x.com/intent/tweet?text=${encodeURIComponent(tweetText)}`;
+
+    window.open(twitterIntentUrl, "_blank", "noopener,noreferrer");
+  };
+
   return (
     <Card className="bg-white shadow-lg">
       <CardBody className="p-6">
@@ -158,15 +168,25 @@ export function PuzzleSubmit({
 
           {validationResult && <ValidationMessage result={validationResult} />}
 
-          <Button
-            onPress={onSubmit}
-            isLoading={isSubmitting}
-            isDisabled={isPuzzleCompleted}
-            className={`w-full font-medium ${buttonClassName}`}
-            size="lg"
-          >
-            {buttonText}
-          </Button>
+          {isPuzzleCompleted ? (
+            <Button
+              onPress={handleShareClick}
+              className="w-full font-medium bg-linera-primary hover:bg-linera-primary-dark text-white"
+              size="lg"
+              endContent={<img src="/x-logo.png" alt="X" className="w-5 h-5" />}
+            >
+              Share on
+            </Button>
+          ) : (
+            <Button
+              onPress={onSubmit}
+              isLoading={isSubmitting}
+              className={`w-full font-medium ${buttonClassName}`}
+              size="lg"
+            >
+              {buttonText}
+            </Button>
+          )}
         </div>
       </CardBody>
     </Card>

frontend/src/components/puzzles/PuzzleSubmit.tsx

@@ -1,4 +1,5 @@
-import { useState, useCallback } from "react";
+import { useState, useCallback, useEffect } from "react";
+import { useSearchParams } from "react-router-dom";
 import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
 import { LineraService } from "@/lib/linera/services/LineraService";
 import { LineraBoard } from "@/lib/types/puzzle.types";
@@ -12,6 +13,7 @@ const QUERY_KEYS = {
 };
 
 export function usePuzzleGame() {
+  const [searchParams] = useSearchParams();
   const [currentPuzzleId, setCurrentPuzzleId] = useState<string | null>(null);
   const [stepCount, setStepCount] = useState(0);
   const [validationResult, setValidationResult] = useState<{
@@ -222,6 +224,20 @@ export function usePuzzleGame() {
     game.clear();
   }, [game]);
 
+  // Handle puzzle query parameter on mount
+  useEffect(() => {
+    if (!isInitialized) return;
+
+    const puzzleIdFromUrl = searchParams.get('puzzle');
+    if (puzzleIdFromUrl) {
+      // Check if the puzzle ID exists in KNOWN_PUZZLES
+      const puzzleExists = KNOWN_PUZZLES.some(p => p.id === puzzleIdFromUrl);
+      if (puzzleExists && !currentPuzzleId) {
+        loadPuzzle(puzzleIdFromUrl);
+      }
+    }
+  }, [isInitialized, searchParams, currentPuzzleId, loadPuzzle]);
+
   // Navigation functions
   const loadNextPuzzle = useCallback(() => {
     if (!currentPuzzleId) return false;