Add desktop nofications

assets/js/app.js

@@ -5,9 +5,11 @@ import "phoenix_html";
 
 import React from "react";
 import ReactDOM from "react-dom";
+import watch from "redux-watch";
 import { createStore } from "redux";
 
 import Channel from "./services/channel";
+import Notifications from "./services/notifications";
 
 import chessBoardReducer from "./reducers/chess-board";
 import { setGameId } from "./store/actions";
@@ -17,6 +19,7 @@ import MoveList from "./components/move-list";
 import GameInfo from "./components/game-info";
 
 const store = createStore(chessBoardReducer);
+const notifications = new Notifications();
 
 class App extends React.Component {
   componentWillMount() {
@@ -24,6 +27,15 @@ class App extends React.Component {
 
     store.dispatch(setGameId(gameId));
 
+    let w = watch(store.getState, "turn");
+    store.subscribe(w((newVal, oldVal, objectPath) => {
+      const player = store.getState().player;
+
+      if (oldVal != null && newVal == player) {
+        notifications.notifyTurn(player);
+      }
+    }));
+
     this.channel = new Channel(store, gameId);
   }
 

assets/js/services/notifications.js

@@ -0,0 +1,16 @@
+class Notifications {
+  constructor() {
+    Notification.requestPermission();
+  }
+
+  notifyTurn(player) {
+    if (!document.hasFocus()) {
+      new Notification("Chess", {
+        body: "Your opponent has moved.",
+        icon: `/images/king_${player}.svg`
+      });
+    }
+  }
+}
+
+export default Notifications;

assets/package.json

@@ -17,7 +17,8 @@
     "react": "^16.2.0",
     "react-dom": "^16.2.0",
     "react-redux": "^5.0.6",
-    "redux": "^3.7.2"
+    "redux": "^3.7.2",
+    "redux-watch": "^1.1.1"
   },
   "devDependencies": {
     "babel-brunch": "^6.1.1",

assets/yarn.lock

@@ -2732,6 +2732,10 @@ object-keys@^1.0.8:
   version "1.0.11"
   resolved "https://registry.yarnpkg.com/object-keys/-/object-keys-1.0.11.tgz#c54601778ad560f1142ce0e01bcca8b56d13426d"
 
+object-path@^0.9.2:
+  version "0.9.2"
+  resolved "https://registry.yarnpkg.com/object-path/-/object-path-0.9.2.tgz#0fd9a74fc5fad1ae3968b586bda5c632bd6c05a5"
+
 object.omit@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/object.omit/-/object.omit-2.0.1.tgz#1a9c744829f39dbb858c76ca3579ae2a54ebd1fa"
@@ -2864,7 +2868,7 @@ performance-now@^2.1.0:
   version "1.3.2"
 
 "phoenix_html@file:../deps/phoenix_html":
-  version "2.11.1"
+  version "2.11.2"
 
 pify@^2.0.0:
   version "2.3.0"
@@ -3184,6 +3188,12 @@ redent@^1.0.0:
     indent-string "^2.1.0"
     strip-indent "^1.0.1"
 
+redux-watch@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/redux-watch/-/redux-watch-1.1.1.tgz#a15a59220894a132c93f75fb71a420bc35cb7843"
+  dependencies:
+    object-path "^0.9.2"
+
 redux@^3.7.2:
   version "3.7.2"
   resolved "https://registry.yarnpkg.com/redux/-/redux-3.7.2.tgz#06b73123215901d25d065be342eb026bc1c8537b"