Extract tiles into components

Author: m1foley

Diff for: TODO.md

@@ -1,18 +1,17 @@
 # TODO
 
-- CD: https://fly.io/docs/app-guides/continuous-deployment-with-github-actions/
-- Put everyone's discards in front of their hand (suggested by Mom)
-- Bug: Undoing a win after a bot drew a tile hung bot (workaround: paused & unpaused bots)
+- Refactor: Convert Live View Components to regular Components
+- Slider for tile size (so users don't have to increase font size)
+- Real user accounts instead of just web sessions
 - Shrink tile sizes on mobile
 - Lobby not receiving bot player added
 - Refactor: Denormalize seatno as a seat attribute
 - Point out game menu on first load
-- Make seating less confusing
+- Make seating process less confusing
 - Sound
 - "Sort" button after deal (disappears if player moves any tile)
 - Indicate when deck is running low
 - Experiment with more CSS animations: dealing the tiles, etc.
-- Real user accounts instead of just web sessions
 - Exclude bots (e.g., PresidentCardGames uses phone numbers)
 - Support more Mahjong rule sets (flower tiles, no game wind, etc.)
 - Instructions
@@ -25,14 +24,14 @@
 - Add titles to tile images ("5 of bamboo"). good for game log where it's small
 - Add "Waiting for Mei..." to game log when waiting, then delete when no longer waiting
 - Make Pause button easier to click (click on board center?)
-- Slider for tile size (so users don't have to increase font size)
 - Animated "waiting" dots next to player name when waiting for them
 - Allow dragging from decktile to exposed tiles (adding onto a pong)
 - 2-click instead of drag & drop. First click will pause other players.
 - Display everyone's wind direction instead of staircase
 - Animate deal: 4 at a time goes into people's hand
 - Sanity check for (possible race condition) bug: rearranging hand leads to duplicate tiles. Last time it happened after peek tile got put into hand, and user drag & dropped that new tile.
 - Remember sorted hand in browser so it doesn't get reshuffled when losing internet connection
+- Put everyone's discards in front of their hand (suggested by Mom)
 
 ## Future rule enforcement
 - Winning tile was the last one picked up

Diff for: lib/mjw_web.ex

@@ -84,8 +84,10 @@ defmodule MjwWeb do
     quote do
       # HTML escaping functionality
       import Phoenix.HTML
-      # Core UI components and translation
+      # Phoenix Core UI components and translation
       import MjwWeb.CoreComponents
+      # Our own custom components
+      import MjwWeb.GameComponents
       import MjwWeb.Gettext
 
       # Shortcut for generating JS commands

Diff for: lib/mjw_web/components/game_components.ex

@@ -0,0 +1,27 @@
+defmodule MjwWeb.GameComponents do
+  use Phoenix.Component
+
+  attr(:tile, :string, required: true)
+  attr(:class, :string, default: nil)
+  attr(:id, :string, default: nil)
+
+  def tile(assigns) do
+    ~H"""
+    <img
+      id={@id}
+      src={"/images/tiles/#{Mjw.Tile.without_id(@tile)}.png"}
+      alt=""
+      class={["tile", @class]}
+    />
+    """
+  end
+
+  attr(:class, :string, default: nil)
+  attr(:rest, :global)
+
+  def concealed_tile(assigns) do
+    ~H"""
+    <img src="/images/tiles/concealed.png" alt="" class={@class} {@rest} />
+    """
+  end
+end

Diff for: lib/mjw_web/live/game_live/current_user_seat_component.html.heex

@@ -7,24 +7,14 @@
       class={"hiddengong-tiles dropzone#{if @win_declared_seatno && @win_declared_seatno != @current_user_seatno && @seat.win_expose, do: " exposed-loser-hand"}"}
     >
       <%= for tile <- @seat.hiddengongs do %>
-        <img
-          id={tile}
-          src={"/images/tiles/#{Mjw.Tile.without_id(tile)}.png"}
-          alt=""
-          class="tile draggable"
-        />
+        <.tile id={tile} tile={tile} class="draggable" />
       <% end %>
       <div class="dropzone-description">Hidden gong</div>
     </div>
 
     <div id="exposed-0" phx-hook="Drag" phx-target="#game" class="exposed-tiles dropzone">
       <%= for tile <- @seat.exposed do %>
-        <img
-          id={tile}
-          src={"/images/tiles/#{Mjw.Tile.without_id(tile)}.png"}
-          alt=""
-          class="tile draggable"
-        />
+        <.tile id={tile} tile={tile} class="draggable" />
       <% end %>
       <div class="dropzone-description">Exposed tiles</div>
     </div>
@@ -36,12 +26,7 @@
       class={"wintile-tiles#{if !@win_declared_seatno || @win_declared_seatno == @current_user_seatno, do: " dropzone"}"}
     >
       <%= if @seat.wintile do %>
-        <img
-          id={@seat.wintile}
-          src={"/images/tiles/#{Mjw.Tile.without_id(@seat.wintile)}.png"}
-          alt=""
-          class="tile cursor-not-allowed"
-        />
+        <.tile id={@seat.wintile} tile={@seat.wintile} class="cursor-not-allowed" />
       <% end %>
       <%= if !@win_declared_seatno || @win_declared_seatno == @current_user_seatno do %>
         <div class="dropzone-description">Winning tile</div>
@@ -57,12 +42,7 @@
       class={"concealed-tiles dropzone current-user-discarding-#{if @current_user_discarding, do: "t"} enable-pull-from-discards-#{if @available_discard_tile, do: "t"} concealed-loser-hand-#{if @concealed_loser_hand, do: "t"}"}
     >
       <%= for tile <- @seat.concealed do %>
-        <img
-          id={tile}
-          src={"/images/tiles/#{Mjw.Tile.without_id(tile)}.png"}
-          alt=""
-          class="tile draggable"
-        />
+        <.tile id={tile} tile={tile} class="draggable" />
       <% end %>
     </div>
   </div>

Diff for: lib/mjw_web/live/game_live/opponent_seat_component.html.heex

@@ -38,22 +38,18 @@
 
     <div class="exposed-tiles">
       <%= for tile <- @seat.exposed do %>
-        <img id={tile} src={"/images/tiles/#{Mjw.Tile.without_id(tile)}.png"} alt="" class="tile" />
+        <.tile id={tile} tile={tile} />
       <% end %>
     </div>
 
     <div class="hiddengong-tiles">
       <%= if @seat.win_expose do %>
         <%= for tile <- @seat.hiddengongs do %>
-          <img
-            src={"/images/tiles/#{Mjw.Tile.without_id(tile)}.png"}
-            alt=""
-            class="tile opacity-50"
-          />
+          <.tile tile={tile} class="opacity-50" />
         <% end %>
       <% else %>
         <%= for _tile <- @seat.hiddengongs do %>
-          <img src="/images/tiles/concealed.png" alt="" class="tile" />
+          <.concealed_tile class="tile" />
         <% end %>
       <% end %>
     </div>
@@ -63,23 +59,18 @@
     <div class="concealed-tiles">
       <%= if @seat.win_expose do %>
         <%= for tile <- @seat.concealed do %>
-          <img src={"/images/tiles/#{Mjw.Tile.without_id(tile)}.png"} alt="" class="tile" />
+          <.tile tile={tile} />
         <% end %>
       <% else %>
         <%= for _tile <- @seat.concealed do %>
-          <img src="/images/tiles/concealed.png" alt="" class="tile" />
+          <.concealed_tile class="tile" />
         <% end %>
       <% end %>
     </div>
 
     <%= if @seat.wintile do %>
       <div class="wintile-tiles">
-        <img
-          id={@seat.wintile}
-          src={"/images/tiles/#{Mjw.Tile.without_id(@seat.wintile)}.png"}
-          alt=""
-          class="tile ml-8"
-        />
+        <.tile tile={@seat.wintile} class="ml-8" />
       </div>
     <% end %>
   </div>

Diff for: lib/mjw_web/live/game_live/show.html.heex

@@ -58,12 +58,7 @@
       class={"dglow-#{@available_discard_tile} discardedby-#{if @raw_event == :discarded, do: @discarded_by_relative_seatno} current-user-discarding-#{if @current_user_discarding, do: "t"} enable-pull-from-discards-#{if @available_discard_tile, do: "t"}"}
     >
       <%= for tile <- Enum.reverse(@game.discards) do %>
-        <img
-          id={tile}
-          src={"/images/tiles/#{Mjw.Tile.without_id(tile)}.png"}
-          alt=""
-          class="tile draggable"
-        />
+        <.tile id={tile} tile={tile} class="draggable" />
       <% end %>
     </div>
   <% end %>
@@ -74,11 +69,7 @@
         <span class="desc align-middle"><%= event %></span>
         <%= if icon do %>
           <%= if Mjw.Tile.tile_format?(icon) do %>
-            <img
-              src={"/images/tiles/#{Mjw.Tile.without_id(icon)}.png"}
-              alt=""
-              class="tile align-middle"
-            />
+            <.tile tile={icon} class="align-middle" />
           <% else %>
             <span class="icon text-xl align-middle"><%= icon %></span>
           <% end %>
@@ -109,20 +100,13 @@
   <%= if @current_user_drawing || @current_user_seat.peektile do %>
     <div id="peektile-0" phx-hook="Drag" phx-target="#game">
       <%= if @current_user_seat.peektile do %>
-        <img
+        <.tile
           id={@current_user_seat.peektile}
-          src={"/images/tiles/#{Mjw.Tile.without_id(@current_user_seat.peektile)}.png"}
-          alt=""
-          class="tile draggable"
+          tile={@current_user_seat.peektile}
+          class="draggable"
         />
       <% else %>
-        <img
-          src="/images/tiles/concealed.png"
-          alt=""
-          class="tile cursor-pointer"
-          phx-target="#game"
-          phx-click="peek"
-        />
+        <.concealed_tile class="tile cursor-pointer" phx-target="#game" phx-click="peek" />
       <% end %>
     </div>
   <% end %>
@@ -140,13 +124,7 @@
     <% end %>
     <%= if @show_correction_tile do %>
       <div id="correctiontiles" phx-hook="Drag" class="dropzone">
-        <img
-          id="decktile"
-          alt=""
-          title="Gong correction tile"
-          src="/images/tiles/concealed.png"
-          class="tile draggable"
-        />
+        <.concealed_tile id="decktile" class="tile draggable" title="Gong correction tile" />
       </div>
     <% end %>
     <%= unless @show_wall do %>

Diff for: lib/mjw_web/live/game_live/wall_component.html.heex

@@ -2,13 +2,13 @@
   <div class="tiles flex-wrap">
     <div class="wall-tiles wall-tiles-1">
       <%= for _ <- 0..15 do %>
-        <img src="/images/tiles/concealed.png" alt="" class="walltile" />
+        <.concealed_tile class="walltile" />
       <% end %>
     </div>
     <div class="line-break"></div>
     <div class="wall-tiles">
       <%= for _ <- 0..15 do %>
-        <img src="/images/tiles/concealed.png" alt="" class="walltile" />
+        <.concealed_tile class="walltile" />
       <% end %>
     </div>
   </div>

Diff for: lib/mjw_web/live/game_live/win_menu_component.html.heex

@@ -40,12 +40,7 @@
       <div class="flex flex-row flex-wrap text-left justify-start justify-items-start">
         <span class="pr-1 cursor-default" title="Next tile in the deck">&#8594;</span>
         <%= for tile <- @game.deck do %>
-          <img
-            id={tile}
-            src={"/images/tiles/#{Mjw.Tile.without_id(tile)}.png"}
-            alt=""
-            class="tile"
-          />
+          <.tile id={tile} tile={tile} />
         <% end %>
       </div>
     <% else %>

Diff for: lib/mjw_web/live/game_live/wind_pick_component.html.heex

@@ -12,8 +12,7 @@
       <div class="windandname">
         <div class="windcontainer">
           <%= if wind_data[:picked_wind_idx] do %>
-            <img
-              src="/images/tiles/concealed.png"
+            <.concealed_tile
               class="tile pickable-wind"
               phx-target="#game"
               phx-click="windpick"
@@ -24,7 +23,7 @@
             <%= if wind_data[:picked_by_name] do %>
               <img src={"/images/tiles/#{wind_data[:wind]}.png"} alt="" class="tile" />
             <% else %>
-              <img src="/images/tiles/concealed.png" alt="" class="tile" />
+              <.concealed_tile class="tile" />
             <% end %>
           <% end %>
         </div>