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",

.github/workflows/deploy.yml

@@ -7,10 +7,15 @@ on:
       - "README.md"
       - "TODO.md"
       - ".github/ISSUE_TEMPLATE/*"
+      - ".eslintrc.json"
+      - ".gitignore"
+      - ".prettierignore"
+      - ".prettierrc.json"
+      - ".stylelintrc.json"
   workflow_dispatch:
 
 permissions:
-  contents: write # write for bumping version (read-only required for deployment)
+  contents: write # Required for bumping version (read-only required for deployment)
   pages: write # Required for deployment
   id-token: write # Required for deployment
 
@@ -43,7 +48,7 @@ jobs:
       - name: Bump version
         run: npm version patch
 
-      - name: Push
+      - name: Push the version bump
         run: |
           git push origin main
 

.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

@@ -2,12 +2,16 @@
   "name": "logic-grid",
   "version": "1.0.33",
   "description": "",
-  "main": "code.js",
+  "main": "index.js",
   "scripts": {
-    "test": "jest --config=jest.config.cjs",
+    "test": "jest",
     "build": "webpack",
     "dev": "webpack-dev-server --mode development",
-    "start": "webpack-dev-server"
+    "start": "webpack-dev-server",
+    "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",
@@ -20,6 +24,11 @@
     "url": "https://github.com/skedwards88/logic-grid/issues"
   },
   "homepage": "https://github.com/skedwards88/logic-grid#readme",
+  "dependencies": {
+    "lodash.clonedeep": "^4.5.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
   "devDependencies": {
     "@babel/core": "^7.21.4",
     "@babel/preset-env": "^7.21.4",
@@ -30,6 +39,7 @@
     "css-loader": "^6.7.3",
     "eslint": "^8.44.0",
     "eslint-plugin-react": "^7.32.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
     "html-webpack-plugin": "^5.5.1",
     "jest": "^29.5.0",
     "prettier": "^2.8.7",
@@ -40,10 +50,5 @@
     "webpack-cli": "^5.0.2",
     "webpack-dev-server": "^4.13.3",
     "workbox-webpack-plugin": "^7.0.0"
-  },
-  "dependencies": {
-    "lodash.clonedeep": "^4.5.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
   }
 }

src/components/Share.js

@@ -10,8 +10,6 @@ function handleShare(text) {
     })
     .then(() => console.log("Successful share"))
     .catch((error) => {
-      // copy to clipboard as backup
-      handleCopy(text);
       console.log("Error sharing", error);
     });
   sendAnalytics("share");

src/index.html

@@ -7,20 +7,28 @@
       src="https://www.googletagmanager.com/gtag/js?id=G-0ECKDWFGDF"
     ></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-0ECKDWFGDF");
+        gtag("config", "G-0ECKDWFGDF");
+      }
     </script>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
     <title>Logic Grid</title>
     <meta name="description" content="A classic logic grid puzzle 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,6 +2,7 @@
   "name": "Logic Grid",
   "short_name": "Logic Grid",
   "description": "A logic grid puzzle game",
+  "id": "?logic_grid=202402221",
   "dir": "auto",
   "lang": "en-US",
   "display": "standalone",

webpack.config.js

@@ -2,6 +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");
 
 module.exports = (env, argv) => {
   if (argv.mode === "development") {
@@ -70,10 +71,11 @@ 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,
+    cacheId: `logic-grid-${packageJson.version}`,
   });
 
   const plugins =
@@ -97,7 +99,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",
         },
       ],
@@ -110,12 +112,13 @@ module.exports = (env, argv) => {
       clean: true, // removes unused files from output dir
     },
     performance: {
+      // special case to cache scenarios for offline play
       maxEntrypointSize: 400000, // bytes
+      // special case to cache scenarios for offline play
       maxAssetSize: 400000, // bytes
     },
     devServer: {
       static: "./dist",
-      historyApiFallback: true,
     },
     plugins: plugins,
   };