DEV-613 Fix localStorage issue

Fixed issue where feature detection for localStorage was incorrectly applied. Due to the different browser configurations and security settings that can involve localStorage, feature detection needs to be placed within a try/catch block.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "battlesnake-board",
-  "version": "1.1.2",
+  "version": "1.1.3",
   "private": true,
   "dependencies": {
     "@emotion/react": "11.4.1",

src/app/storage.js

@@ -0,0 +1,26 @@
+export function storageAvailable(type) {
+  let storage;
+  try {
+    storage = window[type];
+    const x = "__storage_test__";
+    storage.setItem(x, x);
+    storage.removeItem(x);
+    return true;
+  } catch (e) {
+    return (
+      ((e instanceof DOMException &&
+        // everything except Firefox
+        e.code === 22) ||
+        // Firefox
+        e.code === 1014 ||
+        // test name field too, because code might not be present
+        // everything except Firefox
+        e.name === "QuotaExceededError" ||
+        // Firefox
+        e.name === "NS_ERROR_DOM_QUOTA_REACHED") &&
+      // acknowledge QuotaExceededError only if there's something already stored
+      storage &&
+      storage.length !== 0
+    );
+  }
+}

src/components/game/GamePage.jsx

@@ -11,13 +11,22 @@ import {
   stepBackwardFrame,
   highlightSnake
 } from "../../actions";
+import { storageAvailable } from "../../app/storage";
 
 const options = parseQueryString(window.location.search);
+let storedSettings = {};
+if (storageAvailable("localStorage")) {
+  storedSettings = window.localStorage;
+} else {
+  console.info(
+    "Please enable localStorage for an improved experience that allows you to persist board settings."
+  );
+}
 
 const mapStateToProps = state => {
   const gameState = state.game;
   return {
-    options: { ...window.localStorage, ...options },
+    options: { ...storedSettings, ...options },
     ruleset: gameState.ruleset,
     grid: gameState.grid,
     gameNotFound: gameState.gameNotFound,

src/components/settings/settings-slice.js

@@ -1,4 +1,5 @@
 import { createSlice } from "@reduxjs/toolkit";
+import { storageAvailable } from "../../app/storage";
 
 const initialState = {
   frameRate: Number(getLocalSetting("frameRate")) || 10,
@@ -29,13 +30,13 @@ export const currentFrameRate = state => state.settings.frameRate;
 export const currentTheme = state => state.settings.theme;
 
 function getLocalSetting(key) {
-  if (window.localStorage) {
+  if (storageAvailable("localStorage")) {
     return window.localStorage.getItem(key);
   }
 }
 
 function setLocalSetting(key, value) {
-  if (window.localStorage) {
+  if (storageAvailable("localStorage")) {
     window.localStorage.setItem(key, value);
   }
 }