Merge 62d9066 into a2577e9

package.json

@@ -35,6 +35,7 @@
     "eslint-config-react": "^1.1.7",
     "eslint-plugin-prettier": "^3.1.2",
     "global": "^4.4.0",
+    "jest-canvas-mock": "^2.2.0",
     "jest-mock-random": "^1.0.3",
     "prettier": "^1.19.1",
     "react-scripts": "^3.3.1",
@@ -53,6 +54,7 @@
     "minimal-analytics": "^0.1.15",
     "prevent-double-tap-zoom": "^2.0.4",
     "react": "^16.12.0",
+    "react-confetti": "^5.0.1",
     "react-dom": "^16.12.0",
     "react-redux": "^7.1.3",
     "redux": "^4.0.5"

src/App.tsx

@@ -29,6 +29,7 @@ import {
   reset
 } from "redux/actions";
 import "./App.css";
+import Confetti from "react-confetti";
 
 export const useSelector: TypedUseSelectorHook<AppState> = useReduxSelector;
 
@@ -128,17 +129,20 @@ export default function App() {
           />
         )}
         {didWin && page === "home" && (
-          <Overlay>
-            <p>YOU WON</p>
-            <Button
-              onMouseDown={() => {
-                dispatch(newGame());
-              }}
-              testId="play-again"
-            >
-              Play again?
-            </Button>
-          </Overlay>
+          <>
+            <Confetti />
+            <Overlay>
+              <p>YOU WON</p>
+              <Button
+                onMouseDown={() => {
+                  dispatch(newGame());
+                }}
+                testId="play-again"
+              >
+                Play again?
+              </Button>
+            </Overlay>
+          </>
         )}
       </div>
     </BackgroundImage>

src/__tests__/App.test.js

@@ -1,7 +1,7 @@
 import React from "react";
 import { applyMiddleware, createStore } from "redux";
 import { Provider } from "react-redux";
-import { fireEvent, render, queryByTestId } from "@testing-library/react";
+import { fireEvent, render } from "@testing-library/react";
 import "@testing-library/jest-dom/extend-expect";
 import { mockRandomForEach, resetMockRandom } from "jest-mock-random";
 import { reducers } from "../redux/reducers";

src/index.tsx

@@ -7,7 +7,7 @@ import { applyMiddleware, compose, createStore } from "redux";
 import App from "./App";
 import { audioMiddleware } from "./redux/middleware-audio";
 import { storageMiddleware, loadState } from "./redux/middleware-storage";
-import { reducers, generateNewGame } from "./redux/reducers";
+import { reducers } from "./redux/reducers";
 import register from "./registerServiceWorker";
 import { BugsnagErrorBoundary } from "./utils/bugsnag";
 import "./index.css";
@@ -18,10 +18,7 @@ const composeEnhancers =
 
 const store = createStore(
   reducers,
-  {
-    ...generateNewGame(),
-    ...loadState()
-  },
+  loadState(),
   composeEnhancers(applyMiddleware(audioMiddleware, storageMiddleware))
 );
 

src/redux/middleware-storage.ts

@@ -9,33 +9,38 @@ import {
 import { Middleware } from "redux";
 import { AppDispatch } from "..";
 import { localStore } from "../utils/storage";
-import { AppState } from "./reducers";
+import { AppState, generateNewGame } from "./reducers";
 import { reportError } from "utils/bugsnag";
 
 const STORAGE_KEY = "finding-nora";
 
 function storeState(state: AppState) {
   try {
     const stateStr = JSON.stringify({
-      solutions: state.solutions,
+      questions: state.questions,
       current: state.current
     });
 
     localStore.setItem(STORAGE_KEY, stateStr);
   } catch (error) {
+    console.error(error);
     reportError(error);
     return null;
   }
 }
 
 export function loadState() {
   try {
+    // generates new game based on stored state
     const stateStr = localStore.getItem(STORAGE_KEY);
-    const state = stateStr ? (JSON.parse(stateStr) as AppState) : null;
-    return state;
+    const storedState = stateStr ? (JSON.parse(stateStr) as AppState) : null;
+    const current = storedState ? storedState.current : undefined;
+    const questions = storedState ? storedState.questions : undefined;
+    return generateNewGame(current, questions);
   } catch (error) {
+    console.error(error);
     reportError(error);
-    return null;
+    return generateNewGame();
   }
 }
 

src/setupTests.ts

@@ -0,0 +1 @@
+import "jest-canvas-mock";

yarn.lock

@@ -3747,6 +3747,11 @@ color-convert@^2.0.1:
   dependencies:
     color-name "~1.1.4"
 
+color-convert@~0.5.0:
+  version "0.5.3"
+  resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-0.5.3.tgz#bdb6c69ce660fadffe0b0007cc447e1b9f7282bd"
+  integrity sha1-vbbGnOZg+t/+CwAHzER+G59ygr0=
+
 color-name@1.1.3:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25"
@@ -4195,6 +4200,11 @@ cssesc@^3.0.0:
   resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-3.0.0.tgz#37741919903b868565e1c09ea747445cd18983ee"
   integrity sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==
 
+cssfontparser@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/cssfontparser/-/cssfontparser-1.2.1.tgz#f4022fc8f9700c68029d542084afbaf425a3f3e3"
+  integrity sha1-9AIvyPlwDGgCnVQghK+69CWj8+M=
+
 cssnano-preset-default@^4.0.7:
   version "4.0.7"
   resolved "https://registry.yarnpkg.com/cssnano-preset-default/-/cssnano-preset-default-4.0.7.tgz#51ec662ccfca0f88b396dcd9679cdb931be17f76"
@@ -6774,6 +6784,14 @@ istanbul-reports@^2.2.6:
   dependencies:
     handlebars "^4.1.2"
 
+jest-canvas-mock@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/jest-canvas-mock/-/jest-canvas-mock-2.2.0.tgz#45fbc58589c6ce9df50dc90bd8adce747cbdada7"
+  integrity sha512-DcJdchb7eWFZkt6pvyceWWnu3lsp5QWbUeXiKgEMhwB3sMm5qHM1GQhDajvJgBeiYpgKcojbzZ53d/nz6tXvJw==
+  dependencies:
+    cssfontparser "^1.2.1"
+    parse-color "^1.0.0"
+
 jest-changed-files@^24.9.0:
   version "24.9.0"
   resolved "https://registry.yarnpkg.com/jest-changed-files/-/jest-changed-files-24.9.0.tgz#08d8c15eb79a7fa3fc98269bc14b451ee82f8039"
@@ -8601,6 +8619,13 @@ parse-asn1@^5.0.0:
     pbkdf2 "^3.0.3"
     safe-buffer "^5.1.1"
 
+parse-color@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/parse-color/-/parse-color-1.0.0.tgz#7b748b95a83f03f16a94f535e52d7f3d94658619"
+  integrity sha1-e3SLlag/A/FqlPU15S1/PZRlhhk=
+  dependencies:
+    color-convert "~0.5.0"
+
 parse-json@^2.2.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/parse-json/-/parse-json-2.2.0.tgz#f480f40434ef80741f8469099f8dea18f55a4dc9"
@@ -9778,6 +9803,13 @@ react-app-polyfill@^1.0.6:
     regenerator-runtime "^0.13.3"
     whatwg-fetch "^3.0.0"
 
+react-confetti@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/react-confetti/-/react-confetti-5.0.1.tgz#3003570778cafad4db0ab5513018d4c10e9d1271"
+  integrity sha512-mMxg2JPiRynzWEcfdsUVciRSKr2Mm3pFVKSGng/9Rgg1fYLxVj5XgSqiCP7kz2fN8/xfC79Rbgp1JRyCYssBkA==
+  dependencies:
+    tween-functions "^1.2.0"
+
 react-dev-utils@^10.1.0:
   version "10.1.0"
   resolved "https://registry.yarnpkg.com/react-dev-utils/-/react-dev-utils-10.1.0.tgz#ccf82135f6dc2fc91969bc729ce57a69d8e86025"
@@ -11405,6 +11437,11 @@ tunnel-agent@^0.6.0:
   dependencies:
     safe-buffer "^5.0.1"
 
+tween-functions@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/tween-functions/-/tween-functions-1.2.0.tgz#1ae3a50e7c60bb3def774eac707acbca73bbc3ff"
+  integrity sha1-GuOlDnxguz3vd06scHrLynO7w/8=
+
 tweetnacl@^0.14.3, tweetnacl@~0.14.0:
   version "0.14.5"
   resolved "https://registry.yarnpkg.com/tweetnacl/-/tweetnacl-0.14.5.tgz#5ae68177f192d4456269d108afa93ff8743f4f64"