Convert lobby game to regular component

Author: m1foley

README.md

@@ -48,13 +48,14 @@ git push heroku main:main
 
 ### Research/similar sites
 
+- Example of newest Phoenix version: <https://github.com/fly-apps/live_beats/blob/master/lib/live_beats_web/live/settings_live.ex>
+- Deploys: <https://damonvjanis.medium.com/optimizing-for-free-hosting-elixir-deployments-6bfc119a1f44>
 - <https://www.reddit.com/r/Mahjong/comments/ogl4yf/best_way_to_play_hk_mahjong_online/>
 - <http://mahjongbuddy.com>
 - <https://www.reddit.com/user/tthiatma/>
 - <https://www.reddit.com/r/Mahjong/comments/jsbsve/i_created_online_hong_kong_mahjong_web_app/>
 - <https://www.reddit.com/r/Mahjong/>
 - <https://en.wikipedia.org/wiki/Hong_Kong_Mahjong_scoring_rules>
-- Deploys: <https://damonvjanis.medium.com/optimizing-for-free-hosting-elixir-deployments-6bfc119a1f44>
 
 ### sortablejs
 

TODO.md

@@ -1,6 +1,5 @@
 # TODO
 
-- 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

lib/mjw_web/components/game_components.ex

@@ -1,6 +1,15 @@
 defmodule MjwWeb.GameComponents do
   use Phoenix.Component
 
+  quote do
+    unquote(MjwWeb.verified_routes())
+  end
+
+  use Phoenix.VerifiedRoutes,
+    endpoint: MjwWeb.Endpoint,
+    router: MjwWeb.Router,
+    statics: MjwWeb.static_paths()
+
   attr(:tile, :string, required: true)
   attr(:class, :string, default: nil)
   attr(:id, :string, default: nil)
@@ -296,4 +305,16 @@ defmodule MjwWeb.GameComponents do
     </div>
     """
   end
+
+  attr(:game, Mjw.Game, required: true)
+
+  def lobby_game(assigns) do
+    ~H"""
+    <div id={"join-#{@game.id}"} class="lobbygame">
+      <.link href={~p"/games/#{@game.id}"} class="lobbygame-link">
+        <%= Mjw.Game.seated_player_names(@game) |> Enum.join(", ") %>
+      </.link>
+    </div>
+    """
+  end
 end

lib/mjw_web/live/game_live/index.html.heex

@@ -8,11 +8,7 @@
     <%= unless Enum.empty?(@games) do %>
       <div class="pt-12 pb-10 text-xl font-semibold">or join a game in progress:</div>
       <%= for game <- @games do %>
-        <.live_component
-          module={MjwWeb.GameLive.LobbyGameComponent}
-          id={"join-#{game.id}"}
-          game={game}
-        />
+        <.lobby_game game={game} />
       <% end %>
     <% end %>
   </div>