26 可以按按钮出牌才算出牌

出牌

出牌跟之前的游戏准备按钮一样
帮一个元件加上 phx-clixk 再绑上对应的动作，
唯一的差别是这次要使用 phx-value-card 来帮他辨识这次传的卡片

更改一下 hand 方法
多加一个 button 元素来包住卡片
并在 button 上面使用 phx-click="play_card" 与 phx-value-card={card}

  def hand(assigns) do
    ~H"""
    <div class="flex w-full justify-center">
      <div class="grid grid-cols-6">
        <%= for card <- @player.hand do %>
          <button phx-click="play_card" phx-value-card={card}>
            <.card name={card}/>
          </button>
        <% end %>
      </div>
    </div>
    """
  end

ok 後就是要写一个对应的 handle_event 来接

收到出牌的 event 後，
我们需要游戏的 pid, 出牌的人, 与要出的卡
来用在 Card.Game.play_card/3 上面

  def handle_event(
        "play_card",
        %{"card" => card},
        %{assigns: %{current_player: current_player, pid: pid}} = socket
      ) do
    Game.play_card(pid, current_player, transform_card(card))

    {:noreply, socket}
  end

  defp transform_card("reverse"), do: :reverse
  defp transform_card(number), do: String.to_integer(number)

这边另外要注意的是形态的问题，网页传过来的都会是字串
但是我们游戏里面用的是 integer, 另外 reverse 卡是用 atom
要确定喂给 play_card 的是他要的，在上面我写一个 transform_card/1 来转换

动起来长这样