Game updates are now pushed to each client

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) {

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));

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();

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,

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

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