diff --git a/assets/js/app.js b/assets/js/app.js index adb6cd8..e7f5c6c 100644 --- a/assets/js/app.js +++ b/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); } diff --git a/assets/js/services/notifications.js b/assets/js/services/notifications.js new file mode 100644 index 0000000..27ae525 --- /dev/null +++ b/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; diff --git a/assets/package.json b/assets/package.json index 98a198b..06f26e2 100644 --- a/assets/package.json +++ b/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", diff --git a/assets/yarn.lock b/assets/yarn.lock index 1dc774a..20d6963 100644 --- a/assets/yarn.lock +++ b/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"