Show share buttons on challenge; use navigator.share

src/Game.tsx

@@ -98,18 +98,21 @@ function Game(props: GameProps) {
     setGameNumber((x) => x + 1);
   };
 
-  function copyToClipboard(text: string, successHint: string) {
+  async function share(url: string, copiedHint: string, text?: string) {
-    if (!navigator.clipboard) {
+    try {
-      setHint(text);
+      await navigator.share({ url, text });
-    } else {
+      return;
-      navigator.clipboard
+    } catch (e) {
-        .writeText(text)
+      console.warn("navigator.share failed:", e);
-        .then(() => {
+      try {
-          setHint(successHint);
+        const body = url + (text ? "\n\n" + text : "");
-        })
+        await navigator.clipboard.writeText(body);
-        .catch(() => {
+        setHint(copiedHint);
-          setHint(text);
+        return;
-        });
+      } catch (e2) {
+        console.warn("navigator.clipboard.writeText failed:", e2);
+        setHint(url);
+      }
     }
   }
 
@@ -273,11 +276,11 @@ function Game(props: GameProps) {
         {hint || `\u00a0`}
       </p>
       <Keyboard letterInfo={letterInfo} onKey={onKey} />
-      {gameState !== GameState.Playing && !challenge && (
+      {gameState !== GameState.Playing && (
         <p>
           <button
             onClick={() => {
-              copyToClipboard(
+              share(
                 getChallengeUrl(target),
                 "Challenge link copied to clipboard!"
               );
@@ -285,23 +288,23 @@ function Game(props: GameProps) {
           >
             Challenge a friend to this word
           </button>
+          {" "}
           <button
             onClick={() => {
-              copyToClipboard(
+              share(
-                getChallengeUrl(target) +
+                getChallengeUrl(target),
-                  "\n\n" +
+                "Result copied to clipboard!",
-                  guesses
+                guesses
-                    .map((guess) =>
+                  .map((guess) =>
-                      clue(guess, target)
+                    clue(guess, target)
-                        .map((c) => ["⬛", "🟨", "🟩"][c.clue ?? 0])
+                      .map((c) => ["⬛", "🟨", "🟩"][c.clue ?? 0])
-                        .join("")
+                      .join("")
-                    )
+                  )
-                    .join("\n"),
+                  .join("\n")
-                "Result copied to clipboard!"
               );
             }}
           >
-            Copy result as emoji
+            Challenge with emoji results
           </button>
         </p>
       )}