Replace CDN redux with redux from node modules and start migrating so…

…me functions to helpers.js
rjcorwin · Oct 26, 2018 · b2e3f20 · b2e3f20
1 parent a6f8a2d
commit b2e3f20
Show file tree

Hide file tree

Showing 6 changed files with 25 additions and 33 deletions.
diff --git a/index.html b/index.html
@@ -12,8 +12,6 @@
 
     <script src="node_modules/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js"></script>
     <script src="node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/redux/4.0.1/redux.min.js"></script>
-
 
     <script type="module" src="src/fiar-app.js" crossorigin></script>
     <style>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -5,7 +5,7 @@
     "@material/mwc-switch": "^0.3.1",
     "@polymer/polymer": "^3.0.0",
     "polymer-cli": "^1.8.0",
-    "redux": "timvdlippe/redux.git#es-browser-build"
+    "redux": "^4.0.1"
   },
   "scripts": {
     "start": "./node_modules/.bin/polymer serve",

diff --git a/src/ai.js b/src/ai.js
@@ -1,20 +1,12 @@
 
 import { reducer, cellsToGrid } from './reducer'
+import { shuffleArray } from './helpers'
+import { createStore } from "redux/es/redux.mjs";
 
 const RED_TEAM = 'RED_TEAM'
 const BLUE_TEAM = 'BLUE_TEAM'
 
-// From https://stackoverflow.com/a/12646864
-function shuffleArray(array) {
-  for (var i = array.length - 1; i > 0; i--) {
-    var j = Math.floor(Math.random() * (i + 1));
-    var temp = array[i];
-    array[i] = array[j];
-    array[j] = temp;
-  }
-  return array
-}
-
+// Returns a suggested move given state of the game.
 function ai(state) {
   // Find a win for me.
   let winningMoves = findWinningMoves(state)
@@ -31,7 +23,7 @@ function ai(state) {
     // Find moves that do not result in the opponent having a winning move.
     let safeMoves = []
     for(let potentialMove of potentialMoves) {
-      let futureStore = Redux.createStore(reducer, state)
+      let futureStore = createStore(reducer, state)
       futureStore.dispatch({type: 'drop', columnNumber: potentialMove})
       if (findWinningMoves(futureStore.getState()).length === 0) {
         safeMoves.push(potentialMove)
@@ -45,14 +37,14 @@ function ai(state) {
       return shuffleArray(potentialMoves)[0]
     }
   }
-
 }
 
+// Returns array of winning moves given state.
 function findWinningMoves(state) {
   let matrix = cellsToGrid(state.cells)
   const winningMoves = []
   for (let i = 0; matrix[0].length > i; i++) {
-    let store = Redux.createStore(reducer, state)
+    let store = createStore(reducer, state)
     store.dispatch({type: 'drop', columnNumber: i})
     if (store.getState().winner) winningMoves.push(i)
   }

diff --git a/src/fiar-app.js b/src/fiar-app.js
@@ -4,6 +4,7 @@ import './fiar-cell'
 import { ai } from './ai'
 import {Button} from "@material/mwc-button"
 import {Switch} from '@material/mwc-switch'
+import { createStore } from "redux/es/redux.mjs";
 
 /**
  * @customElement
@@ -29,7 +30,7 @@ class FiarApp extends PolymerElement {
 
   connectedCallback() {
     super.connectedCallback()
-    this.store = Redux.createStore(reducer, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__())
+    this.store = createStore(reducer, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__())
     this.store.subscribe(() => this.render())
     this.store.dispatch({type: 'start', size: 7})
   }

diff --git a/test/fiar-app/fiar-app_test.html b/test/fiar-app/fiar-app_test.html
@@ -8,7 +8,6 @@
 
     <script src="../../node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
     <script src="../../node_modules/wct-browser-legacy/browser.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/redux/4.0.1/redux.min.js"></script>
 
     <script type="module" src="../../src/fiar-app.js"></script>
   </head>
@@ -23,25 +22,26 @@
     <script type="module">
       import {reducer, BLUE_TEAM, RED_TEAM} from '../../src/reducer'
       import { ai } from '../../src/ai'
+      import { createStore } from "redux/es/redux.mjs";
 
       suite('fiar-reducer', function() {
 
         test('Starting a game with 3 columns 3 rows should have 9 cells.', function() {
-          const store = Redux.createStore(reducer)
+          const store = createStore(reducer)
           store.dispatch({type: 'start', size: 3})
           assert.equal(store.getState().cells.length, 9)
         })
 
         test('Blue team should place first in correct column and row.', function() {
-          const store = Redux.createStore(reducer)
+          const store = createStore(reducer)
           store.dispatch({type: 'start', size: 3})
           assert.equal(store.getState().cells.length, 9)
           store.dispatch({type: 'drop', columnNumber: 2})
           assert.equal(!store.getState().cells.find(cell => cell.fill === BLUE_TEAM && cell.column === 2 && cell.row === 0), false)
         })
 
         test('Red team should drop on top of blue team', function() {
-          const store = Redux.createStore(reducer)
+          const store = createStore(reducer)
           store.dispatch({type: 'start', size: 3})
           assert.equal(store.getState().cells.length, 9)
           store.dispatch({type: 'drop', columnNumber: 2})
@@ -51,7 +51,7 @@
         })
 
         test('Blue team should win across', function() {
-          const store = Redux.createStore(reducer)
+          const store = createStore(reducer)
           store.dispatch({type: 'start', size: 12})
           store.dispatch({type: 'drop', columnNumber: 0})
           store.dispatch({type: 'drop', columnNumber: 0})
@@ -65,7 +65,7 @@
 
 
         test('Blue team should win vertical', function() {
-          const store = Redux.createStore(reducer)
+          const store = createStore(reducer)
           store.dispatch({type: 'start', size: 12})
           store.dispatch({type: 'drop', columnNumber: 0})
           store.dispatch({type: 'drop', columnNumber: 1})
@@ -78,7 +78,7 @@
         })
 
         test('Red team should win across', function() {
-          const store = Redux.createStore(reducer)
+          const store = createStore(reducer)
           store.dispatch({type: 'start', size: 4})
           store.dispatch({type: 'drop', columnNumber: 0})
           store.dispatch({type: 'drop', columnNumber: 0})
@@ -94,7 +94,7 @@
         })
 
         test('Blue team should wins diamond left to right', function() {
-          const store = Redux.createStore(reducer)
+          const store = createStore(reducer)
           store.dispatch({type: 'start', size: 8})
           store.dispatch({type: 'drop', columnNumber: 0})
           store.dispatch({type: 'drop', columnNumber: 1})
@@ -111,7 +111,7 @@
         })
 
         test('Blue team should wins diamond right to left', function() {
-          const store = Redux.createStore(reducer)
+          const store = createStore(reducer)
           store.dispatch({type: 'start', size: 8})
           store.dispatch({type: 'drop', columnNumber: 3})
           store.dispatch({type: 'drop', columnNumber: 2})
@@ -132,14 +132,14 @@
       suite('ai', function() {
 
         test('should pick a move', function() {
-          const store = Redux.createStore(reducer)
+          const store = createStore(reducer)
           store.dispatch({type: 'start', size: 8})
           store.dispatch({type: 'drop', columnNumber: 3})
           assert.equal(Number.isInteger(ai(store.getState())), true)
         })
 
         test('should calculate the winning move across', function() {
-          const store = Redux.createStore(reducer)
+          const store = createStore(reducer)
           store.dispatch({type: 'start', size: 4})
           store.dispatch({type: 'drop', columnNumber: 0})
           store.dispatch({type: 'drop', columnNumber: 0})
@@ -154,7 +154,7 @@
         })
 
         test('should calculate to block the winning move across', function() {
-          const store = Redux.createStore(reducer)
+          const store = createStore(reducer)
           store.dispatch({type: 'start', size: 4})
           store.dispatch({type: 'drop', columnNumber: 0})
           store.dispatch({type: 'drop', columnNumber: 0})
@@ -168,7 +168,7 @@
         })
 
         test('should block a diamond right to left win', function() {
-          const store = Redux.createStore(reducer)
+          const store = createStore(reducer)
           store.dispatch({type: 'start', size: 8})
           store.dispatch({type: 'drop', columnNumber: 3})
           store.dispatch({type: 'drop', columnNumber: 2})