Merge pull request #43 from skedwards88/extended-menu

Move buttons to extended menu

TODO.md

@@ -31,7 +31,6 @@ For screenshots:
 
 // todo later PR:
 
-- improve large screen
 - Use the hasVisited state to announce
 - add some custom daily puzzles
 - consolidate control buttons into hamburger menu (and add share button)
@@ -45,3 +44,4 @@ For screenshots:
 - just rename dispatch params to dispatcher everywhere
 - put arrayToGrid to common or to word-logic package
 - piecesOverlapQ should use getGridFromPieces
+- // todo put screenshots of lexlet and blobble and wordfall ()as webp/compressed images? in MoreGames.js

src/components/App.js

@@ -2,10 +2,14 @@ import React from "react";
 import Game from "./Game";
 import Heart from "./Heart";
 import Rules from "./Rules";
+import ExtendedMenu from "./ExtendedMenu";
+import MoreGames from "./MoreGames";
 import Stats from "./Stats";
 import CustomCreation from "./CustomCreation";
 import CustomShare from "./CustomShare";
 import ControlBar from "./ControlBar";
+import FallbackInstall from "./FallbackInstall";
+import CustomError from "./CustomError";
 import {
   handleAppInstalled,
   handleBeforeInstallPrompt,
@@ -185,15 +189,7 @@ export default function App() {
       return <Rules setDisplay={setDisplay}></Rules>;
 
     case "heart":
-      return (
-        <Heart
-          setDisplay={setDisplay}
-          appName="Crossjig"
-          shareText="Check out this word puzzle!"
-          repoName="crossjig"
-          url="https://crossjig.com"
-        />
-      );
+      return <Heart setDisplay={setDisplay} repoName="crossjig" />;
 
     case "settings":
       return (
@@ -217,12 +213,12 @@ export default function App() {
         <div className="App" id="crossjig">
           <div id="exitDaily">
             <button
-              id="helpButton"
+              id="hintIcon"
               className="controlButton"
               disabled={dailyGameState.gameIsSolved}
               onClick={() => dailyDispatchGameState({action: "getHint"})}
             ></button>
-            <button id="exitDailyButton" onClick={() => setDisplay("game")}>
+            <button id="exitDailyIcon" onClick={() => setDisplay("game")}>
               Exit daily challenge
             </button>
           </div>
@@ -248,7 +244,8 @@ export default function App() {
         <div className="App" id="crossjig">
           <div id="controls">
             <button
-              id="playCustomButton"
+              id="playIcon"
+              className="controlButton"
               onClick={() => {
                 let representativeString;
                 try {
@@ -269,11 +266,11 @@ export default function App() {
                 });
                 setDisplay("game");
               }}
-            >
-              Play
-            </button>
+            ></button>
+
             <button
-              id="shareCustomButton"
+              id="shareIcon"
+              className="controlButton"
               onClick={() => {
                 let representativeString;
                 try {
@@ -304,11 +301,10 @@ export default function App() {
                   setDisplay("customShare");
                 }
               }}
-            >
-              Share
-            </button>
+            ></button>
+
             <button id="exitCustomButton" onClick={() => setDisplay("game")}>
-              Cancel
+              Exit custom creation
             </button>
           </div>
           <CustomCreation
@@ -322,20 +318,11 @@ export default function App() {
 
     case "customError":
       return (
-        <div className="App customMessage">
-          <div>{`Your game isn't ready to share yet: \n\n${customState.invalidReason}`}</div>
-          <button
-            onClick={() => {
-              dispatchCustomState({
-                action: "updateInvalidReason",
-                invalidReason: "",
-              });
-              setDisplay("custom");
-            }}
-          >
-            Ok
-          </button>
-        </div>
+        <CustomError
+          invalidReason={customState.invalidReason}
+          dispatchCustomState={dispatchCustomState}
+          setDisplay={setDisplay}
+        ></CustomError>
       );
 
     case "customShare":
@@ -347,14 +334,27 @@ export default function App() {
         ></CustomShare>
       );
 
+    case "moreGames":
+      return <MoreGames setDisplay={setDisplay}></MoreGames>;
+
+    case "fallbackInstall":
+      return <FallbackInstall setDisplay={setDisplay}></FallbackInstall>;
+
+    case "extendedMenu":
+      return (
+        <ExtendedMenu
+          setDisplay={setDisplay}
+          setInstallPromptEvent={setInstallPromptEvent}
+          showInstallButton={showInstallButton}
+          installPromptEvent={installPromptEvent}
+        ></ExtendedMenu>
+      );
+
     default:
       return (
         <div className="App" id="crossjig">
           <ControlBar
             setDisplay={setDisplay}
-            setInstallPromptEvent={setInstallPromptEvent}
-            showInstallButton={showInstallButton}
-            installPromptEvent={installPromptEvent}
             dispatchGameState={dispatchGameState}
             gameState={gameState}
             dailyIsSolved={dailyGameState.gameIsSolved}

src/components/ControlBar.js

@@ -1,19 +1,11 @@
 import React from "react";
-import {handleInstall} from "../common/handleInstall";
+import {handleShare} from "../common/handleShare";
 
-function ControlBar({
-  dispatchGameState,
-  gameState,
-  setDisplay,
-  setInstallPromptEvent,
-  showInstallButton,
-  installPromptEvent,
-  dailyIsSolved,
-}) {
+function ControlBar({dispatchGameState, gameState, setDisplay, dailyIsSolved}) {
   return (
     <div id="controls">
       <button
-        id="newGameButton"
+        id="newGameIcon"
         className="controlButton"
         onClick={() => {
           dispatchGameState({
@@ -22,35 +14,17 @@ function ControlBar({
           });
         }}
       ></button>
+
       <button
-        id="helpButton"
+        id="hintIcon"
         className="controlButton"
         disabled={gameState.gameIsSolved}
         onClick={() => dispatchGameState({action: "getHint"})}
       ></button>
-      <button
-        id="settingsButton"
-        className="controlButton"
-        onClick={() => setDisplay("settings")}
-      ></button>
-      <button
-        id="rulesButton"
-        className="controlButton"
-        onClick={() => setDisplay("rules")}
-      ></button>
-      <button
-        id="customButton"
-        className="controlButton"
-        onClick={() => setDisplay("custom")}
-      ></button>
-      <button
-        id="heartButton"
-        className="controlButton"
-        onClick={() => setDisplay("heart")}
-      ></button>
+
       {dailyIsSolved ? (
         <button
-          id="calendarButtonSolved"
+          id="calendarIconSolved"
           className="controlButton"
           onClick={() => {
             dispatchGameState({action: "clearStreakIfNeeded"});
@@ -59,22 +33,39 @@ function ControlBar({
         ></button>
       ) : (
         <button
-          id="calendarButton"
+          id="calendarIcon"
           className="controlButton"
           onClick={() => setDisplay("daily")}
         ></button>
       )}
-      {showInstallButton && installPromptEvent ? (
+
+      <button
+        id="customIcon"
+        className="controlButton"
+        onClick={() => setDisplay("custom")}
+      ></button>
+
+      {navigator.canShare ? (
         <button
-          id="installButton"
+          id="shareIcon"
           className="controlButton"
           onClick={() =>
-            handleInstall(installPromptEvent, setInstallPromptEvent)
+            handleShare({
+              appName: "Crossjig",
+              text: "Check out this word game!",
+              url: "https://crossjig.com",
+            })
           }
         ></button>
       ) : (
         <></>
       )}
+
+      <button
+        id="menuIcon"
+        className="controlButton"
+        onClick={() => setDisplay("extendedMenu")}
+      ></button>
     </div>
   );
 }

src/components/CustomError.js

@@ -0,0 +1,24 @@
+import React from "react";
+
+export default function CustomError({
+  invalidReason,
+  dispatchCustomState,
+  setDisplay,
+}) {
+  return (
+    <div className="App customMessage">
+      <div>{`Your custom crossjig isn't ready to play yet: \n\n${invalidReason}`}</div>
+      <button
+        onClick={() => {
+          dispatchCustomState({
+            action: "updateInvalidReason",
+            invalidReason: "",
+          });
+          setDisplay("custom");
+        }}
+      >
+        Ok
+      </button>
+    </div>
+  );
+}

src/components/ExtendedMenu.js

@@ -0,0 +1,80 @@
+import React from "react";
+import packageJson from "../../package.json";
+import {handleShare} from "../common/handleShare";
+import {handleInstall} from "../common/handleInstall";
+
+export default function ExtendedMenu({
+  setDisplay,
+  setInstallPromptEvent,
+  showInstallButton,
+  installPromptEvent,
+}) {
+  return (
+    <div className="App" id="extendedMenu">
+      <h1>Crossjig</h1>
+      <button onClick={() => setDisplay("rules")}>
+        <div id="rulesIcon" className="extendedMenuIcon"></div>
+        <span>How to play</span>
+      </button>
+
+      <button onClick={() => setDisplay("custom")}>
+        <div id="customIcon" className="extendedMenuIcon"></div>
+        <span>Create a custom crossjig</span>
+      </button>
+
+      <button onClick={() => setDisplay("settings")}>
+        <div id="settingsIcon" className="extendedMenuIcon"></div>
+        <span>Settings</span>
+      </button>
+
+      {navigator.canShare ? (
+        <button
+          onClick={() =>
+            handleShare({
+              appName: "Crossjig",
+              text: "Check out this word game!",
+              url: "https://crossjig.com",
+            })
+          }
+        >
+          <div id="shareIcon" className="extendedMenuIcon"></div>
+          <span>Share</span>
+        </button>
+      ) : (
+        <></>
+      )}
+
+      {showInstallButton && installPromptEvent ? (
+        <button
+          onClick={() =>
+            handleInstall(installPromptEvent, setInstallPromptEvent)
+          }
+        >
+          <div id="installIcon" className="extendedMenuIcon"></div>
+          <span>{"Install (offline play and easy access)"}</span>
+        </button>
+      ) : (
+        <button onClick={() => setDisplay("fallbackInstall")}>
+          <div id="installIcon" className="extendedMenuIcon"></div>
+          <span>{"Install (play offline)"}</span>
+        </button>
+      )}
+
+      <button onClick={() => setDisplay("moreGames")}>
+        <div id="heartIcon" className="extendedMenuIcon"></div>
+        <span>More games like this</span>
+      </button>
+
+      <button onClick={() => setDisplay("heart")}>
+        <div id="infoIcon" className="extendedMenuIcon"></div>
+        <span>Info and feedback</span>
+      </button>
+
+      <button onClick={() => setDisplay("game")}>
+        <div id="backIcon" className="extendedMenuIcon"></div>
+        <span>Return to game</span>
+      </button>
+      <small id="version">version {packageJson.version}</small>
+    </div>
+  );
+}