Display moves in standard chess notation

assets/js/components/move-list.js

@@ -2,26 +2,58 @@ import React from "react";
 import { connect } from "react-redux";
 import _ from "lodash";
 
+const pieceToNotation = (piece) => {
+  const pieces = {
+    pawn: "",
+    knight: "N",
+    bishop: "B",
+    rook: "R",
+    queen: "Q",
+    king: "K",
+  };
+
+  return pieces[piece.type];
+};
+
+const renderMove = (move) => {
+  if (move != undefined) {
+    return (
+      <td className="move">{pieceToNotation(move.piece)}{move.to}</td>
+    )
+  }
+}
+
 const renderMoves = (moves) => {
   return _.map(moves, (move) => {
     return (
-      <li key={move}>{move}</li>
+      <tr key={move[0].id}>
+        {renderMove(move[0])}
+        {renderMove(move[1])}
+      </tr>
     );
   });
 };
 
 const MoveList = (props) => {
   return (
-    <ol className="move-list">
-      {renderMoves(props.moves)}
-    </ol>
+    <table className="move-list">
+      <thead>
+        <tr>
+          <th>White</th>
+          <th>Black</th>
+        </tr>
+      </thead>
+      <tbody>
+        {renderMoves(props.moves)}
+      </tbody>
+    </table>
   );
 };
 
-function mapStateToProps(state) {
+const mapStateToProps = (state) => {
   return {
     moves: state.moves,
   };
-}
+};
 
 export default connect(mapStateToProps)(MoveList);

lib/chess/move_list.ex

@@ -0,0 +1,11 @@
+defmodule Chess.MoveList do
+  @moduledoc false
+
+  alias Chess.Store.Move
+
+  def transform(moves) do
+    moves
+    |> Enum.map(fn(move) -> Move.transform(move) end)
+    |> Enum.chunk_every(2)
+  end
+end

lib/chess/moves.ex

@@ -11,12 +11,6 @@ defmodule Chess.Moves do
   alias Chess.Moves.Pieces.Queen
   alias Chess.Moves.Pieces.King
 
-  def transform(moves) do
-    moves
-    |> Enum.map(fn(move) -> Move.translate(move) end)
-    |> Enum.chunk_every(2)
-  end
-
   def available(board, {file, rank}) do
     piece =
       board

lib/chess/store/move.ex

@@ -27,12 +27,13 @@ defmodule Chess.Store.Move do
     |> validate_required(required_attrs())
   end
 
-  def translate(move) do
-    [
-      <<97 + move.from["file"], 49 + move.from["rank"]>>,
-      <<97 + move.to["file"], 49 + move.to["rank"]>>
-    ]
-    |> Enum.join("-")
+  def transform(move) do
+    %{
+      id: move.id,
+      piece: move.piece,
+      from: <<97 + move.from["file"], 49 + move.from["rank"]>>,
+      to: <<97 + move.to["file"], 49 + move.to["rank"]>>,
+    }
   end
 
   defp required_attrs, do: ~w[game_id from to piece]a

lib/chess_web/channels/game_channel.ex

@@ -8,6 +8,7 @@ defmodule ChessWeb.GameChannel do
   alias Chess.Store.Game
   alias Chess.Board
   alias Chess.Moves
+  alias Chess.MoveList
 
   def join("game:" <> game_id, _params, socket) do
     send(self(), {:after_join, game_id})
@@ -27,7 +28,7 @@ defmodule ChessWeb.GameChannel do
       board: Board.transform(game.board),
       turn: game.turn,
       state: game.state,
-      moves: Moves.transform(game.moves),
+      moves: MoveList.transform(game.moves),
     }
 
     socket
@@ -103,7 +104,7 @@ defmodule ChessWeb.GameChannel do
       board: Board.transform(game.board),
       turn: game.turn,
       state: game.state,
-      moves: Moves.transform(game.moves),
+      moves: MoveList.transform(game.moves),
     }
     ChessWeb.Endpoint.broadcast("game:#{game.id}", "game:update", payload)
   end

test/chess/move_list_test.exs

@@ -0,0 +1,57 @@
+defmodule Chess.MoveListTest do
+  @moduledoc false
+
+  use Chess.DataCase
+
+  describe "moves" do
+    alias Chess.Store.Move
+    alias Chess.MoveList
+
+    test "tranforms a list of moves" do
+      moves = [
+        %Move{
+          piece: %{"type" => "pawn", "colour" => "white"},
+          from: %{"file" => 4, "rank" => 1},
+          to: %{"file" => 4, "rank" => 3},
+        },
+        %Move{
+          piece: %{"type" => "pawn", "colour" => "black"},
+          from: %{"file" => 4, "rank" => 6},
+          to: %{"file" => 4, "rank" => 4},
+        },
+        %Move{
+          piece: %{"type" => "knight", "colour" => "white"},
+          from: %{"file" => 1, "rank" => 0},
+          to: %{"file" => 2, "rank" => 2},
+        },
+      ]
+
+      expected_result = [
+        [
+          %{
+            id: nil,
+            piece: %{"type" => "pawn", "colour" => "white"},
+            from: "e2",
+            to: "e4"
+          },
+          %{
+            id: nil,
+            piece: %{"type" => "pawn", "colour" => "black"},
+            from: "e7",
+            to: "e5"
+          }
+        ],
+        [
+          %{
+            id: nil,
+            piece: %{"type" => "knight", "colour" => "white"},
+            from: "b1",
+            to: "c3"
+          }
+        ],
+      ]
+
+      assert MoveList.transform(moves) == expected_result
+    end
+  end
+end

test/chess/moves_test.exs

@@ -1,34 +0,0 @@
-defmodule Chess.MovesTest do
-  @moduledoc false
-
-  use Chess.DataCase
-
-  describe "moves" do
-    alias Chess.Store.Move
-    alias Chess.Moves
-
-    test "tranforms a list of moves" do
-      moves = [
-        %Move{
-          from: %{"file" => 4, "rank" => 1},
-          to: %{"file" => 4, "rank" => 3},
-        },
-        %Move{
-          from: %{"file" => 4, "rank" => 6},
-          to: %{"file" => 4, "rank" => 4},
-        },
-        %Move{
-          from: %{"file" => 1, "rank" => 0},
-          to: %{"file" => 2, "rank" => 2},
-        },
-      ]
-
-      expected_result = [
-        ["e2-e4", "e7-e5"],
-        ["b1-c3"],
-      ]
-
-      assert Moves.transform(moves) == expected_result
-    end
-  end
-end

test/chess/store/move_test.exs

@@ -81,11 +81,17 @@ defmodule Chess.Store.MoveTest do
 
     test "translates a move" do
       move = %Move{
+        piece: %{"type" => "pawn", "colour" => "white"},
         from: %{"file" => 4, "rank" => 1},
         to: %{"file" => 4, "rank" => 3},
       }
 
-      assert Move.translate(move) == "e2-e4"
+      assert Move.transform(move) == %{
+        id: nil,
+        piece: %{"type" => "pawn", "colour" => "white"},
+        from: "e2",
+        to: "e4"
+      }
     end
   end
 end