Add consistency across apps

.eslintrc.js

@@ -1,21 +1,29 @@
 module.exports = {
   env: {
-    jest: true,
     node: true,
     browser: true,
-    es2021: true,
     "shared-node-browser": true,
+    es2021: true,
+    jest: true,
   },
-  extends: ["eslint:recommended", "plugin:react/recommended"],
+  extends: [
+    "eslint:recommended",
+    "plugin:react/recommended",
+    "plugin:react-hooks/recommended",
+  ],
   overrides: [],
   parserOptions: {
     ecmaVersion: "latest",
     sourceType: "module",
+    ecmaFeatures: {
+      jsx: true,
+    },
   },
   plugins: ["react"],
   rules: {
     "react/prop-types": "off",
   },
+  ignorePatterns: ["dist/*"],
   settings: {
     react: {
       version: "detect",

.gitignore

@@ -1,3 +1,6 @@
 node_modules
 dist
-PWA_Builder
+PWA_Builder
+.vscode/settings.json
+.env
+.env.test

.stylelintrc.json

@@ -2,6 +2,9 @@
   "extends": "stylelint-config-standard",
   "rules": {
     "selector-class-pattern": null,
-    "selector-id-pattern": null
+    "selector-id-pattern": null,
+    "custom-property-pattern": null,
+    "keyframes-name-pattern": null,
+    "declaration-block-no-redundant-longhand-properties": null
   }
 }

babel.config.json

@@ -0,0 +1,13 @@
+{
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "targets": {
+          "node": "current"
+        }
+      }
+    ],
+    "@babel/preset-react"
+  ]
+}

package.json

@@ -4,13 +4,14 @@
   "description": "",
   "main": "index.js",
   "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build": "webpack",
     "dev": "webpack-dev-server --mode development",
     "start": "webpack-dev-server",
-    "build": "webpack",
-    "test": "echo \"Error: no test specified\" && exit 1",
-    "lint": "npx eslint --ignore-path .gitignore .",
-    "prettier": "npx prettier --ignore-path .gitignore --write .",
-    "style": "npx stylelint '**/*.css' --fix"
+    "eslint": "npx eslint --ignore-path .gitignore . --fix",
+    "prettier": "npx prettier --write .",
+    "style": "npx stylelint '**/*.css' --fix",
+    "lint": "npm run eslint && npm run prettier && npm run style"
   },
   "repository": {
     "type": "git",
@@ -39,6 +40,7 @@
     "css-loader": "^6.8.1",
     "eslint": "^8.48.0",
     "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
     "html-webpack-plugin": "^5.5.3",
     "prettier": "^3.0.3",
     "style-loader": "^3.3.3",

src/components/App.js

@@ -13,7 +13,7 @@ import {
 import {timerInit} from "../logic/timerInit";
 import {timerReducer} from "../logic/timerReducer";
 
-export default function App() {
+function parseURLQuery() {
   // Get the seed and game settings from the query params
   // Only the game settings that would affect the board are shared
   const searchParams = new URLSearchParams(document.location.search);
@@ -27,6 +27,12 @@ export default function App() {
     easyMode = easyMode === "e";
   }
 
+  return [seed, gridSize, minWordLength, easyMode];
+}
+
+export default function App() {
+  const [seed, gridSize, minWordLength, easyMode] = parseURLQuery();
+
   const [display, setDisplay] = React.useState("pause");
   const [installPromptEvent, setInstallPromptEvent] = React.useState();
   const [showInstallButton, setShowInstallButton] = React.useState(true);
@@ -85,28 +91,23 @@ export default function App() {
   });
 
   React.useEffect(() => {
-    window.addEventListener("beforeinstallprompt", (event) =>
+    const listener = (event) =>
       handleBeforeInstallPrompt(
         event,
         setInstallPromptEvent,
         setShowInstallButton,
-      ),
-    );
-    return () =>
-      window.removeEventListener("beforeinstallprompt", (event) =>
-        handleBeforeInstallPrompt(
-          event,
-          setInstallPromptEvent,
-          setShowInstallButton,
-        ),
       );
+
+    window.addEventListener("beforeinstallprompt", listener);
+    return () => window.removeEventListener("beforeinstallprompt", listener);
   }, []);
 
   React.useEffect(() => {
-    window.addEventListener("appinstalled", () =>
-      handleAppInstalled(setInstallPromptEvent, setShowInstallButton),
-    );
-    return () => window.removeEventListener("appinstalled", handleAppInstalled);
+    const listener = () =>
+      handleAppInstalled(setInstallPromptEvent, setShowInstallButton);
+
+    window.addEventListener("appinstalled", listener);
+    return () => window.removeEventListener("appinstalled", listener);
   }, []);
 
   switch (display) {

src/components/Heart.js

@@ -27,6 +27,13 @@ export default function Heart({setDisplay}) {
         {`\n\n`}
         {<hr></hr>}
         {`\n`}
+        {`Thanks to the word frequency data sources attributed in `}
+        <a href="https://github.com/skedwards88/word_lists">
+          skedwards88/word_lists
+        </a>
+        {`.`}
+        {<hr></hr>}
+        {`\n`}
         <a href="./privacy.html">Privacy policy</a>
         {`\n\n\n\n`}
         <small>version {packageJson.version}</small>

src/components/Share.js

@@ -14,8 +14,6 @@ export function handleShare({text, seed}) {
       })
       .then(() => console.log("Successful share"))
       .catch((error) => {
-        // copy to clipboard as backup
-        handleCopy({text, fullUrl});
         console.log("Error sharing", error);
       });
   } else {
@@ -36,7 +34,7 @@ function handleCopy({text, fullUrl}) {
 export function Share({text, seed}) {
   return (
     <button onClick={() => handleShare({text, seed})}>
-      {navigator.canShare ? "Share" : "Copy link to share"}
+      {navigator.canShare ? "Share" : "Copy link"}
     </button>
   );
 }

src/index.html

@@ -7,20 +7,28 @@
       src="https://www.googletagmanager.com/gtag/js?id=G-YYJ7HQ3XLG"
     ></script>
     <script>
-      window.dataLayer = window.dataLayer || [];
-      function gtag() {
-        dataLayer.push(arguments);
-      }
-      gtag("js", new Date());
+      const host = window.location.hostname;
+      if (host != "localhost") {
+        window.dataLayer = window.dataLayer || [];
+        function gtag() {
+          dataLayer.push(arguments);
+        }
+        gtag("js", new Date());
 
-      gtag("config", "G-YYJ7HQ3XLG");
+        gtag("config", "G-YYJ7HQ3XLG");
+      }
     </script>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
     <title>Gribbles</title>
     <meta name="description" content="A jumbled word search game" />
+    <link
+      rel="icon"
+      href="assets/favicon.svg"
+      sizes="any"
+      type="image/svg+xml"
+    />
     <link rel="icon" href="assets/favicon.png" type="image/png" />
-    <link rel="icon" href="assets/favicon.svg" type="image/svg+xml" />
     <link rel="manifest" href="assets/manifest.json" />
     <link rel="apple-touch-icon" href="assets/icon_192.png" />
     <meta name="mobile-web-app-capable" content="yes" />

src/manifest.json

@@ -2,12 +2,12 @@
   "name": "Gribbles",
   "short_name": "Gribbles",
   "description": "A jumbled word search game",
-  "id": "?gribbles=1",
+  "id": "?gribbles=202402221",
   "dir": "auto",
   "lang": "en-US",
   "display": "standalone",
   "orientation": "portrait",
-  "start_url": "../.",
+  "start_url": "/gribbles/",
   "background_color": "#373647",
   "theme_color": "#373647",
   "shortcuts": [],

webpack.config.js

@@ -2,7 +2,7 @@ const path = require("path");
 const WorkboxPlugin = require("workbox-webpack-plugin");
 const HtmlWebpackPlugin = require("html-webpack-plugin");
 const CopyPlugin = require("copy-webpack-plugin");
-const packageJson = require("./package.json")
+const packageJson = require("./package.json");
 
 module.exports = (env, argv) => {
   if (argv.mode === "development") {
@@ -64,12 +64,13 @@ module.exports = (env, argv) => {
   });
 
   const serviceWorkerPlugin = new WorkboxPlugin.GenerateSW({
-    // these options encourage the ServiceWorkers to get in there fast
-    // and not allow any straggling "old" SWs to hang around
+    // This helps ensure that all pages will be controlled by a service worker immediately after that service worker activates
     clientsClaim: true,
+    // This skips the service worker waiting phase, meaning the service worker activates as soon as it's finished installing
     skipWaiting: true,
-    maximumFileSizeToCacheInBytes: 4200000, // special case to cache word list for offline play
-    cacheId: packageJson.version,
+    cacheId: `gribbles-${packageJson.version}`,
+    // special case to cache word list for offline play
+    maximumFileSizeToCacheInBytes: 4200000,
   });
 
   const plugins =
@@ -93,7 +94,7 @@ module.exports = (env, argv) => {
           use: ["style-loader", "css-loader"],
         },
         {
-          test: /\.(png|svg|jpg|jpeg|gif)$/i,
+          test: /\.(png|svg|jpg|jpeg|gif|webp)$/i,
           type: "asset/resource",
         },
       ],
@@ -106,12 +107,13 @@ module.exports = (env, argv) => {
       clean: true, // removes unused files from output dir
     },
     performance: {
-      maxEntrypointSize: 2700000, // special case to cache word list for offline play
-      maxAssetSize: 2700000, // special case to cache word list for offline play
+      // special case to cache word list for offline play
+      maxEntrypointSize: 2700000, // bytes
+      // special case to cache word list for offline play
+      maxAssetSize: 2700000, // bytes
     },
     devServer: {
       static: "./dist",
-      historyApiFallback: true,
     },
     plugins: plugins,
   };