fix share bug & css

web-optimle/www/src/App.css

@@ -279,6 +279,7 @@ a:active {
 .pick-puzzle-type {
   display: flex;
   flex-direction: row;
+  column-gap: 0.5em;
 }
 
 .top-right {

web-optimle/www/src/Game.tsx

@@ -70,6 +70,7 @@ export function Game(props: GameProps) {
             Try to guarantee a win in <strong>2 guesses</strong>!
         </p>
     );
+    const [shareMsg, setShareMsg] = useState("");
     const tableRef = useRef<HTMLTableElement>(null);
     const game = useMemo(
         () => wasm.Game.new(COMMON_WORDS, puzzle.history),
@@ -111,6 +112,24 @@ export function Game(props: GameProps) {
                     puzzle in {selectedPuzzle.tries} tries! Great job.
                 </>);
             }
+
+            const emoji = props.colorBlind
+                ? ["⬛", "🟦", "🟧"]
+                : ["⬛", "🟨", "🟩"];
+            const score = (todayStats[puzzleType].tries === 1
+                ? "my first try!"
+                : `try #${todayStats[puzzleType].tries}!`
+            );
+            setShareMsg(
+                `I solved ${gameName} #${puzzle.seed} (${puzzleType}🟩) on ${score}\n` +
+                (selectedPuzzle.guesses || [])
+                    .map((result) =>
+                        clue(result)
+                            .map((c) => emoji[c.clue ?? 0])
+                            .join("")
+                    )
+                    .join("\n")
+            );
         } else if ((selectedPuzzle.guesses?.length || 0) >= 2) {
             setGameState(GameState.Lost);
             setHint(<p>Not quite! The answer could've been <strong>{game.possible_word().toUpperCase()}</strong>. (Enter to try again)</p>);
@@ -154,7 +173,6 @@ export function Game(props: GameProps) {
         } catch (e) {
             console.warn("navigator.clipboard.writeText failed:", e);
         }
-        setHint(url);
     }
 
     const onKey = (key: string) => {
@@ -219,10 +237,6 @@ export function Game(props: GameProps) {
                     [puzzleType]: {
                         ...oldStats[puzzleType],
                         won: true,
-                        guesses: [
-                            ...(oldStats[puzzleType].guesses || []),
-                            result,
-                        ],
                     },
                 }));
             } else if (guesses.length + 1 === puzzle.history.length + MAX_GUESSES) {
@@ -319,27 +333,7 @@ export function Game(props: GameProps) {
                 {gameState === GameState.Won && (
                     <div class="win-buttons">
                         <button
-                            onClick={() => {
+                            onClick={() => share("Result copied to clipboard!", shareMsg)}
-                                const emoji = props.colorBlind
-                                    ? ["⬛", "🟦", "🟧"]
-                                    : ["⬛", "🟨", "🟩"];
-                                const score = (todayStats[puzzleType].tries === 1
-                                    ? "my first try!"
-                                    : `try #${todayStats[puzzleType].tries}!`
-                                );
-                                share(
-                                    "Result copied to clipboard!",
-                                    `I solved ${gameName} #${puzzle.seed} (${puzzleType}🟩) on ${score}\n` +
-                                    guesses
-                                        .slice(puzzle.history.length)
-                                        .map((result) =>
-                                            clue(result)
-                                                .map((c) => emoji[c.clue ?? 0])
-                                                .join("")
-                                        )
-                                        .join("\n")
-                                );
-                            }}
                         >
                             Share results
                         </button>