From b0c6ea1ff4cae65fbdbc8900d97344cfc74b79be Mon Sep 17 00:00:00 2001
From: Dan Barber <github@danbarber.me>
Date: Sun, 25 Feb 2018 16:45:15 -0500
Subject: [PATCH] Game updates are now pushed to each client

---
 assets/js/components/chess-board-square.js     |  2 +-
 assets/js/components/chess-board.js            |  9 ++++-----
 assets/js/reducers/chess-board.js              |  6 +++++-
 assets/js/store/actions.js                     | 18 +++++++++---------
 lib/chess_web/channels/game_channel.ex         | 12 +++++++++++-
 .../controllers/api/game_controller.ex         |  4 ++++
 6 files changed, 34 insertions(+), 17 deletions(-)

diff --git a/assets/js/components/chess-board-square.js b/assets/js/components/chess-board-square.js
index ea8a124..c5c144a 100644
--- a/assets/js/components/chess-board-square.js
+++ b/assets/js/components/chess-board-square.js
@@ -3,7 +3,7 @@ import _ from "lodash";
 import $ from "jquery";
 import classNames from "classnames";
 
-import { selectPiece, setGame } from "../store/actions";
+import { setGame, selectPiece } from "../store/actions";
 
 class ChessBoardSquare extends React.Component {
   constructor(props) {
diff --git a/assets/js/components/chess-board.js b/assets/js/components/chess-board.js
index 2e3fa29..df78842 100644
--- a/assets/js/components/chess-board.js
+++ b/assets/js/components/chess-board.js
@@ -2,7 +2,7 @@ import React from "react";
 import _ from "lodash";
 import $ from "jquery";
 import { connect } from "react-redux";
-import { setGame, setGameId } from "../store/actions";
+import { setPlayer, setGame, setGameId } from "../store/actions";
 
 import ChessBoardSquare from "./chess-board-square";
 
@@ -16,13 +16,12 @@ class ChessBoard extends React.Component {
 
     $.ajax({ method: "GET", url: `/api/games/${gameId}` })
       .then((data) => {
+        store.dispatch(setPlayer(data.player));
         store.dispatch(setGame(data));
       });
 
-    this.channel = socket.channel("game:" + gameId, {})
-    this.channel.join()
-      .receive("ok", resp => { console.log("Joined successfully", resp) })
-      .receive("error", resp => { console.log("Unable to join", resp) })
+    this.channel = socket.channel("game:" + gameId, {});
+    this.channel.join();
 
     this.channel.on("game_update", data => {
       store.dispatch(setGame(data));
diff --git a/assets/js/reducers/chess-board.js b/assets/js/reducers/chess-board.js
index 5a7a9d8..9325a9a 100644
--- a/assets/js/reducers/chess-board.js
+++ b/assets/js/reducers/chess-board.js
@@ -4,10 +4,14 @@ import defaultState from "../store/default-state";
 
 const chessBoardReducer = (state = defaultState, action) => {
   switch (action.type) {
+    case "SET_PLAYER":
+      return Immutable.fromJS(state)
+        .set("player", action.player)
+        .toJS();
+
     case "SET_GAME":
       return Immutable.fromJS(state)
         .set("board", action.board)
-        .set("player", action.player)
         .set("turn", action.turn)
         .set("selectedSquare", null)
         .toJS();
diff --git a/assets/js/store/actions.js b/assets/js/store/actions.js
index 8c414ab..508bea5 100644
--- a/assets/js/store/actions.js
+++ b/assets/js/store/actions.js
@@ -1,16 +1,8 @@
+const SET_PLAYER = "SET_PLAYER";
 const SET_GAME = "SET_GAME";
 const SET_GAME_ID = "SET_GAME_ID";
 const SELECT_PIECE = "SELECT_PIECE";
 
-export const setGame = (data) => {
-  return {
-    type: SET_GAME,
-    board: data.board,
-    player: data.player,
-    turn: data.turn
-  }
-}
-
 export const setPlayer = (player) => {
   return {
     type: SET_PLAYER,
@@ -18,6 +10,14 @@ export const setPlayer = (player) => {
   }
 }
 
+export const setGame = (data) => {
+  return {
+    type: SET_GAME,
+    board: data.board,
+    turn: data.turn
+  }
+}
+
 export const setGameId = (gameId) => {
   return {
     type: SET_GAME_ID,
diff --git a/lib/chess_web/channels/game_channel.ex b/lib/chess_web/channels/game_channel.ex
index 2cb8fa0..b9f7fdf 100644
--- a/lib/chess_web/channels/game_channel.ex
+++ b/lib/chess_web/channels/game_channel.ex
@@ -3,7 +3,17 @@ defmodule ChessWeb.GameChannel do
 
   use Phoenix.Channel
 
-  def join("game:" <> game_id, _params, socket) do
+  alias Chess.Board
+
+  def join("game:" <> _game_id, _params, socket) do
     {:ok, socket}
   end
+
+  def update_game(game) do
+    payload = %{
+      board: Board.transform(game.board),
+      turn: game.turn
+    }
+    ChessWeb.Endpoint.broadcast("game:#{game.id}", "game_update", payload)
+  end
 end
diff --git a/lib/chess_web/controllers/api/game_controller.ex b/lib/chess_web/controllers/api/game_controller.ex
index db94300..86358e8 100644
--- a/lib/chess_web/controllers/api/game_controller.ex
+++ b/lib/chess_web/controllers/api/game_controller.ex
@@ -4,6 +4,8 @@ defmodule ChessWeb.Api.GameController do
   alias Chess.Store.Game
   alias Chess.Board
 
+  alias ChessWeb.GameChannel
+
   import Chess.Auth, only: [current_user: 1]
 
   def show(conn, %{"id" => id}) do
@@ -33,6 +35,8 @@ defmodule ChessWeb.Api.GameController do
 
     case Repo.update(changeset) do
       {:ok, game} ->
+        GameChannel.update_game(game)
+
         conn
         |> json(game_attrs(conn, game))
     end