25 把卡片摆一摆

来把卡摆上去吧
我们先来做卡的外型
放在 lib/card_web/component.ex 里面

def card(assigns) do
  ~H"""
  <div class="border border-gray-200 rounded-lg p-0.5 w-14 h-22 m-1 shadow">
    <div class="border-2 border-blue-500 rounded-md flex justify-center items-center w-full h-full">
      <div class="text-xl font-bold text-blue-500">
        <%= card_name(@name) %>
      </div>
    </div>
  </div>
  """
end

defp card_name(:reverse), do: "Rev"
defp card_name(name), do: name

"reverse" 太长了，我们遇到它的时候用 card_name/1 改成 "Rev"

接着是桌面上的区域，中间是牌桌放出过的牌，
上面是对手出的，下面是玩家出的，可能要先判断目前在网页上的玩家是 host 或 guest

还好我们弄 router 的时候就想到把它放在 live_action 里面了

於是我们修改一下 lib/card_web/live/game_live/game.ex
从socket 的 assigns 里面拿出 live_action 当作 current_player 来用

  def mount(
        %{"id" => id} = _params,
        _session,
        %{assigns: %{live_action: current_player}} = socket
      ) do
    # [:host, :guest] 减掉其中一个，对手就一定是另一个了
    [opponent] = [:host, :guest] -- [current_player]
    if connected?(socket), do: Card.Game.subscribe(id)

    pid = Card.Dealer.find_or_create_game(id)
    game = Game.status(pid)

    {:ok,
     assign(socket, %{
       pid: pid,
       id: id,
       game: game,
       current_player: current_player,
       opponent: opponent
     })}
  end

好了之後就可以来放双方的 desk 了

  def render(assigns) do
    ~H"""
    <div class="flex flex-col items-center h-screen">
      <.logo />
      <%= inspect @game %>
      <.desk player={Map.get(@game, @opponent)}/>
      <.desk player={Map.get(@game, @current_player)}/>
    </div>
    """
  end

  def desk(assigns) do
    ~H"""
    <div class="flex w-full justify-center items-center h-32 border">
      <%= for card <- @player.desk do %>
        <.card name={card}/>
      <% end %>
    </div>
    """
  end

在desk component 里面把所有的卡用 card component 印出来
在放到 render 里面 依照排序上面是对手，下面是自己出的牌

接着最下面就是手牌，也是把等等给进去玩家手牌印出来就行

  def hand(assigns) do
    ~H"""
    <div class="flex w-full justify-center">
      <%= for card <- @player.hand do %>
        <.card name={card}/>
      <% end %>
    </div>
    """
  end

也把手牌放进去，手牌放自己的就好了，不用放对手的

  def render(assigns) do
    ~H"""
    <div class="flex flex-col items-center h-screen">
      <.logo />
      <%= inspect @game %>
      <.desk player={Map.get(@game, @opponent)}/>
      <.desk player={Map.get(@game, @current_player)}/>
      <.hand player={Map.get(@game, @current_player)}/>
    </div>
    """
  end

来跑跑看

我记得那时候好像是设计只会看到当下回合的卡片，
没关系 我们明天先把关键的出牌做好，再来调整画面