Rename your .html.eex and .html.leex templates to .html.heex (#283)

* Rename your .html.eex and .html.leex templates to .html.heex

* Fix some attribute interpolation errors

* More template fixes

* More template fixes

apps/demon_spirit_web/lib/demon_spirit_web/templates/chat/live_index.html.leex → apps/demon_spirit_web/lib/demon_spirit_web/templates/chat/live_index.html.heex

@@ -10,7 +10,7 @@
 
   <div class="mt-2 flex-grow border rounded-lg w-full p-2 text-sm bg-orange-100 overflow-y-scroll text-left"
       phx-hook="ChatScroll"
-      data-chat-id="<%= @chat_name %>"
+      data-chat-id={@chat_name}
     >
     <%= for msg <- @messages do %>
       <div>
@@ -24,12 +24,12 @@
   </div>
 
   <div class="flex-grow-0">
-    <%= f = form_for @chat_message, "#", [phx_submit: :message] %>
-    <%= text_input f, :message, 
-      placeholder: "your message..",
-      class: "form-control mt-2 mx-0 bg-orange-200 w-full text-sm" ,
-      autofocus: true
-    %>
-    </form>
+    <%= form_for @chat_message, "#", [phx_submit: :message], fn f -> %>
+      <%= text_input f, :message,
+        placeholder: "your message..",
+        class: "form-control mt-2 mx-0 bg-orange-200 w-full text-sm",
+        autofocus: true
+      %>
+    <% end %>
   </div>
 </div>

apps/demon_spirit_web/lib/demon_spirit_web/templates/game/index/game_table.html.leex → apps/demon_spirit_web/lib/demon_spirit_web/templates/game/index/game_table.html.heex

@@ -1,18 +1,7 @@
 <%= if length(@games) > 0 do %>
   <table class="shadow-lg mt-3 rounded-lg bg-blue-100 border">
     <%= for game <- sort_gameinfos(@games) do %>
-      <tr class="
-          <%= case game.status do %>
-            <% :playing -> %>
-              bg-blue-200
-            <% :staging -> %>
-              bg-blue-100
-            <% :done -> %>
-              bg-blue-200
-            <% _ -> %>
-              bg-blue-300
-            <% end %>
-      ">
+      <tr class={game_row_class(game)}>
         <td class="p-3 border-b border-gray-400"><%= link game.name, to: Routes.game_path(@socket, :show, game.name), class: "text-blue-600 underline" %></td>
         <td class="p-3 border-b border-gray-400">
           <%= render "show/player.html", player: game.white %>

apps/demon_spirit_web/lib/demon_spirit_web/templates/game/live_show.html.leex → apps/demon_spirit_web/lib/demon_spirit_web/templates/game/live_show.html.heex

@@ -92,7 +92,7 @@ td .content {
   <%= render "show/ready.html", state: @state, socket: @socket, guest: @guest %>
 <% end %>
 
-<div phx-hook="UpdateDing" class="hidden" data-moves=<%= @state.game.moves %>>
+<div phx-hook="UpdateDing" class="hidden" data-moves={@state.game.moves}>
   <%= @state.game.moves %>
 </div>
 

apps/demon_spirit_web/lib/demon_spirit_web/templates/game/show/board.html.leex → apps/demon_spirit_web/lib/demon_spirit_web/templates/game/show/board.html.heex

@@ -13,7 +13,6 @@
           <%= link "Back to Lobby", to: Routes.game_path(@socket, :index), class: "btn btn-primary" %>
         </div>
       </div>
-      </span>
     </div>
   </div>
 <% end %>
@@ -27,7 +26,7 @@
         <div class="text-gray-900 text-sm">
         <%= for {i, card} <- clarify_moves(@state) do %>
           <div class="relative inline-block mx-4"
-            phx-click="clarify-move" phx-value-i=<%= i %>
+               phx-click="clarify-move" phx-value-i={i}
             onclick="event.preventDefault(); return false;"
           >
             <div class="absolute inset-0 cursor-pointer hover:bg-blue-400-50">
@@ -47,51 +46,28 @@
 <div class="chessboard w-full h-full absolute top-0 left-0">
   <%# Render Pieces %>
   <%= for {{x, y}, piece} <- game.board do %>
-    <div 
-      phx-click="click-square-<%= x %>-<%= y %>"
-    draggable='true' phx-hook="DraggableDroppable"
-    onclick="event.preventDefault(); return false;"
-    data-x="<%= x %>"
-    data-y="<%= y %>"
-    class="cursor-pointer absolute piece <%= piece.type %> <%= piece.color %>" style="
-    <%= if @flip_per do %>
-      transform: translate( <%= (4 - x) * 100 %>%, <%= y * 100 %>%);
-    <% else %>
-      transform: translate( <%= x * 100 %>%, <%= (4 - y) * 100 %>%);
-    <% end %>
-    ">
+    <div
+      phx-click={phx_click_value(x, y)}
+      draggable='true' phx-hook="DraggableDroppable"
+      onclick="event.preventDefault(); return false;"
+      data-x={x}
+      data-y={y}
+      class={"cursor-pointer absolute piece " <> Atom.to_string(piece.type) <> " " <> Atom.to_string(piece.color)}
+      style={piece_style(x, y, @flip_per)}>
     </div>
   <% end %>
 
   <%# Render Square Targets %>
   <%= for x <- [0, 1, 2, 3, 4] do %>
     <%= for y <- [0, 1, 2, 3, 4] do %>
       <div
-        phx-click="click-square-<%= x %>-<%= y %>"
+        phx-click={phx_click_value(x, y)}
         phx-hook="Droppable"
         onclick="event.preventDefault(); return false;"
-        data-x="<%= x %>"
-        data-y="<%= y %>"
-        class="cursor-pointer absolute square
-        <%= if my_turn and {x, y} == @state.selected do %>
-          selected
-        <% end %>
-        <%= if my_turn and {x, y} in @state.move_dest do %>
-          move_dest
-        <% end %>
-        <%= if @state.game.board |> Map.has_key?({x,y}) do %>
-          also_piece
-        <% end %>
-        <%= if @state.last_move != nil and (@state.last_move.from == {x, y} or @state.last_move.to == {x, y}) do %>
-          last_move
-        <% end %>
-        " style="
-      <%= if @flip_per do %>
-        transform: translate( <%= (4 - x) * 100 %>%, <%= y * 100 %>%);
-      <% else %>
-        transform: translate( <%= x * 100 %>%, <%= (4 - y) * 100 %>%);
-      <% end %>
-      "
+        data-x={x}
+        data-y={y}
+        class={square_class(x, y, @state, my_turn)}
+        style={piece_style(x, y, @flip_per)}
       ><!--
       Blank Square
       --></div>

apps/demon_spirit_web/lib/demon_spirit_web/templates/game/show/card.html.heex

@@ -0,0 +1,24 @@
+<div class={DemonSpiritWeb.CardView.outer_card_class(@class, @card.color)}>
+  <div class={DemonSpiritWeb.CardView.inner_card_class(@flip)}>
+    <span class={DemonSpiritWeb.CardView.span_class(@card.name)}>
+      <%= @card.name %>
+    </span>
+
+    <table class="border-collapse mb-0 w-full">
+      <tbody>
+        <%= for i <- 0..4 do %>
+          <tr class="card_row">
+            <%= for j <- 0..4 do %>
+                <%
+                  x = j - 2
+                  y = (i * -1) + 2
+                %>
+                <td class={DemonSpiritWeb.CardView.cell_class(x, y, @card.moves)}>
+                </td>
+            <% end %>
+          </tr>
+        <% end %>
+      </tbody>
+    </table>
+  </div>
+</div>

apps/demon_spirit_web/lib/demon_spirit_web/templates/game/show/ready.html.leex → apps/demon_spirit_web/lib/demon_spirit_web/templates/game/show/ready.html.heex

@@ -20,8 +20,8 @@
       <div class="text-lg mt-1">
         <span class="text-gray-600">Link:</span>
         <input type="text" readonly class="form-control w-4/5 inline-block"
-          value="<%= DemonSpiritWeb.Endpoint.url <> Routes.game_path(@socket, :show, @state.game_name) %>"
-        / >
+                          value={DemonSpiritWeb.Endpoint.url <> Routes.game_path(@socket, :show, @state.game_name)}
+        />
         <div class="text-sm text-gray-600">
           Send the link to a friend to have them join the game.
         </div>

apps/demon_spirit_web/lib/demon_spirit_web/templates/game/show/ready_player_column.html.leex → apps/demon_spirit_web/lib/demon_spirit_web/templates/game/show/ready_player_column.html.heex

@@ -1,5 +1,5 @@
 <div class="w-1/2 px-2">
-  <div class="<%= @bg %> rounded h-32 flex flex-col justify-between py-2">
+  <div class={@bg <> " rounded h-32 flex flex-col justify-between py-2"}>
     <div class="text-center font-semibold text-2xl">
       <%= @color %>
     </div>

apps/demon_spirit_web/lib/demon_spirit_web/templates/layout/app.html.eex → apps/demon_spirit_web/lib/demon_spirit_web/templates/layout/app.html.heex

@@ -5,7 +5,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
     <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
     <title>DemonSpirit</title>
-    <link rel="stylesheet" href="<%= Routes.static_path(@conn, "/css/app.css") %>"/>
+    <link rel="stylesheet" href={Routes.static_path(@conn, "/css/app.css")} />
   </head>
   <body class="antialiased text-gray-900">
     <header>
@@ -45,6 +45,6 @@
       <%= @inner_content %>
     </main>
     <%= csrf_meta_tag() %>
-    <script type="text/javascript" src="<%= Routes.static_path(@conn, "/js/app.js") %>"></script>
+    <script type="text/javascript" src={Routes.static_path(@conn, "/js/app.js")}></script>
   </body>
 </html>

apps/demon_spirit_web/lib/demon_spirit_web/views/card_view.ex

@@ -0,0 +1,29 @@
+defmodule DemonSpiritWeb.CardView do
+  use DemonSpiritWeb, :view
+
+  def outer_card_class(card_class, card_color) do
+    "card #{card_class} bg-gray-200 border shadow-md rounded inline-block w-20 md:w-24 lg:w-32 #{card_color} text-sm"
+  end
+
+  def inner_card_class(flip) do
+    base_class = "p-2 pt-0"
+    flip_class = if flip, do: " flip", else: ""
+
+    "#{base_class}#{flip_class}"
+  end
+
+  def span_class(card_name) do
+    base_class = "title font-semibold py-1 inline-block"
+    size_class = if String.length(card_name) > 8, do: " text-md", else: " text-lg"
+
+    "#{base_class}#{size_class}"
+  end
+
+  def cell_class(x, y, card_moves) do
+    base_class = "card_cell border border-black w-1/5 p-0"
+    move_class = if {x, y} in card_moves, do: " move", else: ""
+    center_class = if {x, y} == {0, 0}, do: " center", else: ""
+
+    "#{base_class}#{move_class}#{center_class}"
+  end
+end

apps/demon_spirit_web/lib/demon_spirit_web/views/game_view.ex

@@ -100,4 +100,43 @@ defmodule DemonSpiritWeb.GameView do
     {minutes_int, seconds_int_rem} = {div(seconds_int, 60), rem(seconds_int, 60)}
     "#{minutes_int}:#{zero_pad(seconds_int_rem, 2)}"
   end
+
+  @doc """
+  game_row_class/1: Returns the appropriate CSS class for a game row based on the game's status.
+  """
+  def game_row_class(game) do
+    case game.status do
+      :playing -> "bg-blue-200"
+      :staging -> "bg-blue-100"
+      :done -> "bg-blue-200"
+      _ -> "bg-blue-300"
+    end
+  end
+
+  def phx_click_value(x, y) do
+    "click-square-#{x}-#{y}"
+  end
+
+  def piece_style(x, y, flip_per) do
+    if flip_per do
+      "transform: translate(#{(4 - x) * 100}%, #{y * 100}%);"
+    else
+      "transform: translate(#{x * 100}%, #{(4 - y) * 100}%);"
+    end
+  end
+
+  def square_class(x, y, state, my_turn) do
+    base_class = "cursor-pointer absolute square"
+    selected_class = if my_turn and {x, y} == state.selected, do: " selected", else: ""
+    move_dest_class = if my_turn and {x, y} in state.move_dest, do: " move_dest", else: ""
+    also_piece_class = if Map.has_key?(state.game.board, {x, y}), do: " also_piece", else: ""
+
+    last_move_class =
+      if state.last_move != nil and
+           (state.last_move.from == {x, y} or state.last_move.to == {x, y}),
+         do: " last_move",
+         else: ""
+
+    base_class <> selected_class <> move_dest_class <> also_piece_class <> last_move_class
+  end
 end