make pause during compact sharing

skedwards88 · Sep 21, 2023 · d4afba4 · d4afba4
1 parent b7add14
commit d4afba4
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 38 deletions.
diff --git a/TODO.md b/TODO.md
@@ -3,8 +3,7 @@
 - put on google play store
 - put on sect game site
 - remove from word games and point to here instead
-- fix safari styling -- url bar cuts off (check out the sector code for the new css)
-- add way to share specific game
+- make word game service worker update?
 
 Maybe later
 

diff --git a/src/components/ControlBar.js b/src/components/ControlBar.js
@@ -1,6 +1,6 @@
 import React from "react";
 import {handleInstall} from "../logic/handleInstall";
-import Share from "./Share";
+import {handleShare} from "./Share";
 
 export default function ControlBar({
   gameState,
@@ -56,14 +56,20 @@ export default function ControlBar({
 
       <button id="heartButton" onClick={() => setDisplay("heart")}></button>
 
-      {navigator.canShare ? (
-        <Share
-          compact={true}
-          text={"Try out this Gribbles puzzle:"}
-          seed={`${gameState.seed}_${Math.sqrt(gameState.letters.length)}_${
-            gameState.minWordLength
-          }_${gameState.easyMode ? "e" : "h"}`}
-        />
+      {!navigator.canShare ? (
+        <button
+          id="shareButton"
+          onClick={() => {
+            timerDispatch({action: "pause"});
+            setDisplay("pause");
+            handleShare({
+              text: "Try out this Gribbles puzzle:",
+              seed: `${gameState.seed}_${Math.sqrt(gameState.letters.length)}_${
+                gameState.minWordLength
+              }_${gameState.easyMode ? "e" : "h"}`,
+            });
+          }}
+        ></button>
       ) : (
         <></>
       )}

diff --git a/src/components/Heart.js b/src/components/Heart.js
@@ -1,5 +1,5 @@
 import React from "react";
-import Share from "./Share";
+import {Share} from "./Share";
 import packageJson from "../../package.json";
 
 export default function Heart({setDisplay}) {

diff --git a/src/components/Share.js b/src/components/Share.js
@@ -1,19 +1,27 @@
 import React from "react";
 import sendAnalytics from "../logic/sendAnalytics";
 
-function handleShare({text, fullUrl}) {
-  navigator
-    .share({
-      title: "Gribbles",
-      text: `${text}\n\n`,
-      url: fullUrl,
-    })
-    .then(() => console.log("Successful share"))
-    .catch((error) => {
-      // copy to clipboard as backup
-      handleCopy(text);
-      console.log("Error sharing", error);
-    });
+export function handleShare({text, seed}) {
+  const url = "https://skedwards88.github.io/gribbles/";
+  const fullUrl = seed ? `${url}?puzzle=${seed}` : url;
+
+  if (navigator.canShare) {
+    navigator
+      .share({
+        title: "Gribbles",
+        text: `${text}\n\n`,
+        url: fullUrl,
+      })
+      .then(() => console.log("Successful share"))
+      .catch((error) => {
+        // copy to clipboard as backup
+        handleCopy({text, fullUrl});
+        console.log("Error sharing", error);
+      });
+  } else {
+    handleCopy({text, fullUrl});
+  }
+
   sendAnalytics("share");
 }
 
@@ -25,20 +33,10 @@ function handleCopy({text, fullUrl}) {
   }
 }
 
-export default function Share({text, seed, compact = false}) {
-  const url = "https://skedwards88.github.io/gribbles/";
-  const fullUrl = seed ? `${url}?puzzle=${seed}` : url;
-
+export function Share({text, seed}) {
   return (
-    <button
-      id={compact ? "shareButton" : ""}
-      onClick={() =>
-        navigator.canShare
-          ? handleShare({text, fullUrl})
-          : handleCopy({text, fullUrl})
-      }
-    >
-      {compact ? "" : navigator.canShare ? "Share" : "Copy link to share"}
+    <button onClick={() => handleShare({text, seed})}>
+      {navigator.canShare ? "Share" : "Copy link to share"}
     </button>
   );
 }