22 准备完成後跳转到游戏页面

两个人都准备好的时候,要转到游戏画面

我来把准备画面跟游戏分开好了
这样比较不会什麽都塞在同一个 liveview

先来改 router 部分

live "/:id/host", GameLive.Invite, :host
live "/:id/guest", GameLive.Invite, :guest

我把原本的邀请画面的路径多加一个 /invite

live "/:id/host/invite", GameLive.Invite, :host
live "/:id/guest/invite", GameLive.Invite, :guest
live "/:id/host", GameLive.Game, :host
live "/:id/guest", GameLive.Game, :guest

当他们都按下确认後就跳到 Game 这个 liveview
我们来多加一个条件到 handle_info

def handle_info(
      %{host_ready: true, guest_ready: true} = room,
      %{assigns: %{player: player}} = socket
    ) do
  socket =
    socket
    |> assign(:room, room)
    |> then(&push_redirect(&1, to: Routes.game_game_path(&1, player, room.id)))

  {:noreply, socket}
end

def handle_info(room, socket) do
  {:noreply, assign(socket, :room, room)}
end

如果 room 里面双方都准备好的话
就会对到第一个 handle_info ,帮他们用 push_redirect 来转到新的地方

Game live

先建立一个空白的页面确定他们准备好之後都过的来

新增 lib/card_web/live/game_live/game.ex

defmodule CardWeb.GameLive.Game do
  use CardWeb, :live_view
  import CardWeb.Component

  def render(assigns) do
    ~H"""
    <div class="flex flex-col items-center h-screen">
      <.logo />
    </div>
    """
  end
end

现在应该双方准备好之後都会到这个只有 logo 的页面了
明天来把他跟游戏串起来


<<:  DAY 24- 凭证实察 Certificate

>>:  从零开始的8-bit迷宫探险【Level 28】看我把关卡难度提升-在场景加上聚光灯效果

[Day 9] Reactive Programming - Backpressure

前言 大部分介绍Reactive Programming都一定会提到Backpressure,可能放...

Day-21 队列(Queue)与循环对列(Circular Queue)

队列(queue)介绍 队列就如同堆叠一般,是一种线性表,与堆叠不同的地方在於,堆叠的push和po...

Day25 用python写UI-聊聊Text(二)

Text会讲三天,因为发现东西有点多,怕放在一篇会爆炸。 ♠♣今天的文章大纲♥♦ 复原与重复 搜寻 ...

[Day27]用Canvas打造自己的游乐场-labyrinth 键盘控制角色

今天要来加入玩家角色,以及用键盘来控制角色 // 玩家 var player_x; var play...

[Day19]The Decoder

上一篇介绍了Tell me the frequencies!,ASCII CODE码来表示总共出现那...