当前位置: 首页 > 资讯 >

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 的页面了
明天来把他跟游戏串起来


相关文章:

  • Facades
  • Trouble with Distributed Systems (2) - Unreliable Networks
  • [第26天]30天搞懂Python-直方图
  • Day 14 JavaScript interop
  • Day-26 请问 REST 是什麽? GET 和 POST 是什麽?
  • 【把玩Azure DevOps】Day21 建立自管的Azure DevOps Agent(Windows Container agent)
  • [Day 16] 实作-图片轮播 Carousels
  • 在线传单制作工具介绍
  • [区块链&DAPP介绍 Day11] Solidity 教学 - units and globally available variables-2
  • DAY 23 Big Data 5Vs – Variety(速度) Kinesis (3)
  • Day01 - 一切从试着了解开始
  • Day_10 有线网路应用(三)
  • 铁人赛 Day3 -- Div区块到底是什麽 ? 能吃吗 ?
  • [Day19] - Django-REST-Framework Viewsets 介绍
  • [Day3]PHP的资料型态03
  • Android让系统信任用户证书的方法
  • RPA是什么?Litrpa是什么?可以做什么好用吗?
  • 洛杉矶CN2服务器推荐:PCCW线路VPS,服务器服务商layerhost
  • Gutenberg 10.5 支持嵌入PDF,新增块模式,增强自定义器的小工具功能
  • Linux运维命令大全:Linux运维要掌握哪些命令
  • 通过CloudFlare Partner计划使用cname接入CloudFlare免费CDN
  • 如何引导用户快速购买下单的冲动?引导用户购买行为的方法(Call To Action)
  • 以太坊是什么?以太坊原理和以太坊入门教程
  • 国外VPS优惠码大全:
  • 如何使用Hostinger的邮箱服务,Hostinger免费企业邮箱设置教程
  • 教程/魔改BBR 一键安装脚本 for CentOS/Debian 7+
  • WordPress 5.7 的 Robots API 和 max-image-preview 指令
  • Nuxt.js官网和Nuxt.js介绍:Vue.js 的通用应用框架
  • 挖矿是什么?怎么挖矿怎么挖比特币?虚拟币比特币挖矿原理
  • 糖果主机香港VPS优惠码最新七折促销