19 首页与开始游戏按钮

先来做个首页好了

首页要有

logo
开始游戏的按钮

来把画面上面的 logo 拿掉吧吧！
预设所有画面都会被这层包起来
lib/card_web/templates/layout/root.html.heex

上面这个<section>就是他的 navbar ，好像也用不到 <header>我们似乎直接删掉就好了呵

<body class="p-2">
  <%= @inner_content %>
</body>

首页我们就直接用 page_live 好了
在 lib/card_web/live/page_live/index.ex 也就是我们做计数器的地方
把计数器删掉 QQ

然後一样把新的首页写在 render 的 ~H 里面

<div class="flex flex-col h-screen items-center justify-center">
  <header class="text-blue-500 m-4">
    <a href="/" class="text-5xl font-serif">
      ? CardyTotala
    </a>
  </header>
  <nav>
    <button>
      <div class="bg-blue-300 w-24 h-8 rounded-xl transform -skew-x-12 -rotate-6 translate-y-7 translate-x-8"></div>
      <div class="transform text-xl">Start a game</div>
    </button>
  </nav>
</div>

看起来像这样

再来就要让按钮可以建立新游戏了

在建立游戏之前，我们需要有一个地方储存目前线上的房间，
还好我们有 ETS 可以用，
ETS 是什麽？简单说就是类似 redis 的 cache
这边有比较正确完整的说明
我们目前会用到的大概只是皮毛，我们要用它来 key value 暂存

在 lib/card/application.ex 里面有一个 start 方法
这个方法在 phoenix server 启动的时候会执行，
我们现在要取巧一下直接在这边加上

:ets.new(:rooms, [:set, :public, :named_table])

变成这样

def start(_type, _args) do
  children = [
    # Start the Telemetry supervisor
    CardWeb.Telemetry,
    # Start the PubSub system
    {Phoenix.PubSub, name: Card.PubSub},
    # Start the Endpoint (http/https)
    CardWeb.Endpoint
    # Start a worker by calling: Card.Worker.start_link(arg)
    # {Card.Worker, arg}
  ]

  # 建立一个 rooms table 给大家用
  :ets.new(:rooms, [:set, :public, :named_table])

  # See https://hexdocs.pm/elixir/Supervisor.html
  # for other strategies and supported options
  opts = [strategy: :one_for_one, name: Card.Supervisor]
  Supervisor.start_link(children, opts)
  end

放好重开服务器後
我们应该可以在任何地方使用这个 rooms 储存

# 存值
:ets.insert_new(:rooms, {"午餐", "肉羹面线"})

# 取值
key = :ets.lookup(:rooms, "午餐")
# key = [{"午餐", "肉羹面线"}]

建立游戏按钮按下去的时候
我们会生一个 room_id 给他，并帮他转址到那个房间等他的对手

先在按钮上面绑上

  <button phx-click="start_game">

在建立对应的 handle_event

  def handle_event("start_game", _params, socket) do
    room_id = random_room_id()
    :ets.insert_new(:rooms, {room_id, "房间资料"})

    # 这边会让玩家导向到这个网址
    {:noreply, push_redirect(socket, to: "/#{room_id}")}
  end

  # 这一行是很差的随机数字做法，但是很短会产出像这样的格式 => room_5084197354157148
  defp random_room_id(), do: "room_" <> String.trim(to_string(:rand.uniform), "0.")

现在按下去就爆了，因为根本没有那一页

我们下一篇来做等待 guest 加入的页面与机制

<<: Factory 工厂模式

>>: [ 卡卡 DAY 18 ] - React Native animated 来简单使用 translate 效果