28 游戏状态栏

游戏状态

是时候把 inspect game 拿掉，换成好看的介面了，啊更正！相对好看的介面哈哈
主要有两小区

1. 胜场数(先到二的赢)
2. 目前回合

东西都已经在 game 里面了，所以我们直接用 live component
把他们用 tailwind 勾出来就行了

先把 原本暂时写的 inspect game 改成呼叫 status component

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

接着定义 status component

  def status(assigns) do
    ~H"""
    <div class="flex flex-col items-center">
      <.wins game={@game} opponent={@opponent} current_player={@current_player}/>
      <.game_round round={@game.round}/>
    </div>
    """
  end

这个里面包的分别是

wins

  def wins(assigns) do
    ~H"""
    <div class="flex h-6 items-center justify-between text-gray-600 m-4">
      <div class="bg-blue-300 w-4 h-3 rounded-xl transform skew-x-12 -rotate-12 translate-x-8"></div>
      <h2 class="transform mr-8 text-xl font-serif"> Wins:</h2>
      <.player_wins player={"You"} wins={Map.get(@game, @current_player).wins}/>
      <div class="ml-8"></div>
      <.player_wins player={"Opponent"} wins={Map.get(@game, @opponent).wins}/>
    </div>
    """
  end

  # wins 里面有重复的地方再拉出来一次
  def player_wins(assigns) do
    ~H"""
    <h3 class="block"><%= @player %>:</h3>
    <%= for x <- 0..(@wins), x > 0 do %>
      <div class={"ml-4 bg-green-300 w-4 h-4 rounded-3xl transform -skew-x-3 rotate-12"}></div>
    <% end %>
    <%= for x <- 0..(2 - @wins), x > 0 do %>
      <div class={"ml-4 bg-gray-300 w-4 h-4 rounded-3xl transform -skew-x-3 rotate-12"}></div>
    <% end %>
    """
  end

回合的部分

  def game_round(assigns) do
    ~H"""
    <div class="mt-2 text-gray-600 flex m-4">
      <div class="bg-blue-300 w-9 h-2 rounded-xl transform -skew-x-12 rotate-6 translate-x-10 translate-y-4"></div>
      <h2 class="transform mr-8 text-xl font-serif block">Round:</h2>
      <div class="ml-2 text-lg"><%= @round %></div>
    </div>
    """
  end

这边用game_round是因为round会撞到是内建的Kernel.round/1方法

改一下 desk

看起来可能没有时间做成只显示当下回合的卡
不过还是可以加上分隔线让他看起来舒服一些

  def desk(assigns) do
    ~H"""
    <div class="flex w-full justify-center items-center h-32">
      <%= for {card, i} <- Enum.with_index(@player.desk, 1) do %>
        <%= if Enum.member?([4,7], i) do %>
          <div class="w-1 h-20 bg-gray-200 mx-2 rounded"></div>
        <% end %>
        <.card name={card}/>
      <% end %>
    </div>
    """
  end

使用了 Enum.with_index 後，我就可以得知目前正准备要显示的卡是第几张
在显示第 4, 7 张卡的时候，在前面加一个小分隔

游戏都要有提示

尽管规则已经尽量简单了
还是需要有很多说明，因为篇幅的关西
我们就在第一个回合 画面上只有手牌的时候
提醒一下玩家出牌好了

做一个notice元件

  def notice(%{game: %{round: 1, turn: 1}} = assigns) do
    ~H"""
    <div class="mt-4 h-4 text-gray-600">? Pick a card</div>
    """
  end

  def notice(assigns) do 
    ~H"""
    <div class="mt-4 h-4"></div>
    """
  end

放在 hand 上面

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

完成之後就变成这样，算是相对好看的状态了

hotfix

超严重bug

在 card/game.ex 的 host_win_this_round? 方法

  if reverse?(host_desk ++ guest_desk) do
    host_win
  else
    !host_win
  end

那个 ! 加错地方了拉，难怪有的时候游戏结果很奇怪

这样才对

  if reverse?(host_desk ++ guest_desk) do
    !host_win
  else
    host_win
  end