WIP

assets/js/app.js

@@ -11,6 +11,10 @@ let liveSocket = new LiveSocket(
   {params: {_csrf_token: csrfToken}}
 );
 
+liveSocket.connect()
+
+window.liveSocket = liveSocket
+
 import "@babel/polyfill";
 import "phoenix_html";
 

lib/chess_web.ex

@@ -40,7 +40,6 @@ defmodule ChessWeb do
       import Phoenix.Controller,
         only: [get_csrf_token: 0, get_flash: 2, view_module: 1]
       import Phoenix.LiveView.Helpers
-      import ChessWeb.LiveHelpers
 
       # Use all HTML functionality (forms, tags, etc)
       use Phoenix.HTML
@@ -78,7 +77,6 @@ defmodule ChessWeb do
 
       # Import LiveView helpers (live_render, live_component, live_patch, etc)
       import Phoenix.LiveView.Helpers
-      import ChessWeb.LiveHelpers
 
       # Import basic rendering functionality (render, render_layout, etc)
       import Phoenix.View

lib/chess_web/templates/game/_square.html.eex

@@ -1,5 +0,0 @@
-<%= if @piece == nil do %>
-  <div id="f<%= @file %>-r<%= @rank %>" class="square"></div>
-<% else %>
-  <div id="f<%= @file %>-r<%= @rank %>" class="square square--<%= @piece["type"] %> square--<%= @piece["colour"] %>"></div>
-<% end %>

lib/chess_web/templates/game/board.html.leex

@@ -1,4 +1,4 @@
-<div class="board board--black-to-move board--player-is-<%= player_colour(@conn, @game) %>">
+<div class="board board--black-to-move board--player-is-<%= player_colour(@user, @game) %>">
   <div class="board__rank-labels">
     <div class="board__label">1</div>
     <div class="board__label">2</div>
@@ -9,6 +9,7 @@
     <div class="board__label">7</div>
     <div class="board__label">8</div>
   </div>
+
   <div class="board__file-labels">
     <div class="board__label">a</div>
     <div class="board__label">b</div>
@@ -19,17 +20,22 @@
     <div class="board__label">g</div>
     <div class="board__label">h</div>
   </div>
+
   <div class="board__body">
     <%= for rank <- 0..7 do %>
       <div class="board__row">
         <%= for file <- 0..7 do %>
-          <%= render "_square.html",
+          <%= render ChessWeb.SquareView,
+            "square.html",
             rank: rank,
             file: file,
-            piece: @game.board["#{file},#{rank}"] %>
+            piece: @game.board["#{file},#{rank}"],
+            selected: {file, rank} == @selected,
+            available: {file, rank} in @available %>
         <% end %>
       </div>
     <% end %>
   </div>
+
   <div class="game-state game-state--null"></div>
 </div>

lib/chess_web/templates/game/index.html.eex

@@ -6,7 +6,7 @@
       <tr class="<%= turn_class(@conn, game) %>">
         <td>
           <span class="games-list__player-indicator">
-            <img src="images/pawn_<%= player_colour(@conn, game) %>.svg">
+            <img src="images/pawn_<%= player_colour(current_user(@conn), game) %>.svg">
           </span>
           <%= link gettext(
                 "Game with %{name}",

lib/chess_web/templates/game/show.html.eex

@@ -1,6 +1,11 @@
 <div data-game-id="<%= @game.id %>">
   <div class="game-grid">
-    <%= render "_board.html", conn: @conn, game: @game %>
+    <%= live_render(
+      @conn,
+      ChessWeb.BoardLive,
+      session: %{"user_id" => current_user(@conn).id, "game_id" => @game.id}
+    ) %>
+
     <div class="game-info">
       <p>
         Playing <%= opponent(@game, current_user(@conn).id).name %>

lib/chess_web/templates/square/square.html.leex

@@ -0,0 +1,7 @@
+<div
+  id="f<%= @file %>-r<%= @rank %>"
+  phx-click="click"
+  phx-value-rank="<%= @rank %>"
+  phx-value-file="<%= @file %>"
+  class="<%= classes(@file, @rank, @piece, @selected, @available) %>"
+></div>

lib/chess_web/views/game_view.ex

@@ -46,7 +46,7 @@ defmodule ChessWeb.GameView do
 
   def files(conn, game) do
     ranks(conn, game)
-    |> Enum.reverse
+    |> Enum.reverse()
   end
 
   def ranks(conn, game) do

lib/chess_web/views/live/board_live.ex

@@ -0,0 +1,51 @@
+defmodule ChessWeb.BoardLive do
+  use Phoenix.LiveView
+
+  alias Chess.Store.User
+  alias Chess.Store.Game
+  alias Chess.Repo
+  alias Chess.Board
+
+  def render(assigns) do
+    Phoenix.View.render(ChessWeb.GameView, "board.html", assigns)
+  end
+
+  def mount(_params, %{"user_id" => user_id, "game_id" => game_id}, socket) do
+    user = Repo.get!(User, user_id)
+    game =
+      Game.for_user(user)
+      |> Repo.get!(game_id)
+
+    {:ok, assign(socket, game: game, user: user, selected: nil, available: [])}
+  end
+
+  def handle_event("click", %{"rank" => rank, "file" => file}, socket) do
+    {:noreply, socket |> handle_click(file, rank)}
+  end
+
+  defp handle_click(socket, file, rank) do
+    board = socket.assigns[:game].board
+
+    assigns =
+      case socket.assigns do
+        %{:selected => nil} ->
+          case Board.piece(board, {file, rank}) do
+            %{"colour" => "white"} ->
+              [{:selected, selected(file, rank)}]
+            _ ->
+              []
+          end
+        _ ->
+          []
+      end
+
+    assign(socket, assigns)
+  end
+
+  defp selected(file, rank) do
+    {
+      String.to_integer(file),
+      String.to_integer(rank),
+    }
+  end
+end

lib/chess_web/views/square_view.ex

@@ -0,0 +1,39 @@
+defmodule ChessWeb.SquareView do
+  use ChessWeb, :view
+
+  def classes(file, rank, piece, selected, available) do
+    square_class()
+    |> add_piece_classes(piece)
+    |> add_selected_class(selected)
+    |> add_available_class(available)
+    |> Enum.join(" ")
+  end
+
+  defp square_class do
+    ["square"]
+  end
+
+  defp add_piece_classes(classes, piece) do
+    if piece != nil do
+      classes ++ ["square--#{piece["type"]}", "square--#{piece["colour"]}"]
+    else
+      classes
+    end
+  end
+
+  defp add_selected_class(classes, selected) do
+    if selected do
+      classes ++ ["square--selected"]
+    else
+      classes
+    end
+  end
+
+  defp add_available_class(classes, available) do
+    if available do
+      classes ++ ["square--available"]
+    else
+      classes
+    end
+  end
+end