0

我最近开始阅读 Programming Phoenix LiveView 这本书，在本章的最后，我们应该做一些任务，这些任务是：

现在您已经看到了一个基本的 LiveView“游戏”，您可以调整游戏，让用户真正赢。您需要：

• 游戏创建时为套接字分配一个随机数，用户需要猜测。

• 检查handle_event 中的那个数字以进行猜测。

• 猜对的奖励积分。

• 当用户获胜时显示获胜消息。

• 当用户获胜时显示重启消息和按钮。提示：您可能需要查看 live_patch/2 函数来帮助您构建该按钮。您可以将最后一个挑战视为一个延伸目标。我们将在接下来的章节中更详细地介绍 live_patch/2。

除最后一项外，我已完成上述 5 项任务中的 4 项。

如何在用户猜对数字时触发的函数内向我的页面添加一个按钮handle_event/3（不确定这是否是执行此操作的正确位置）？我看过live_patch函数，但我认为首先我需要想办法将它添加live_patch到我的 DOM 中，但我不知道如何。您可以在下面看到相关代码。

# wrong_live.ex

defmodule PentoWeb.WrongLive do
  use PentoWeb, :live_view

  def mount(_params, _session, socket) do
    {
      :ok,
      assign(
        socket,
        score: 0,
        message: "Guess a number.",
        num: :rand.uniform(10) |> to_string()
      )
    }
  end

  def handle_event("guess", %{"number" => guess} = data, %{assigns: %{num: guess}} = socket) do
    correct_answer_msg = "You won! The number was #{guess}"
    score = socket.assigns.score + 1

    {
      :noreply,
      assign(
        socket,
        message: correct_answer_msg,
        score: score
      )
    }
  end

  def handle_event("guess", %{"number" => guess} = data, %{assigns: %{num: num}} = socket) do
    wrong_answer_msg = "Your guess: #{guess}. Wrong. Guess again."
    score = socket.assigns.score - 1

    {
      :noreply,
      assign(
        socket,
        message: wrong_answer_msg,
        score: score
      )
    }
  end

  def render(assigns) do
    ~L"""
    <h1>Your score: <%= @score %></h1>
    <h2>
      <%= @message %>
    </h2>
    <h2>
      <%= for n <- 1..10 do %>
        <a href="#" phx-click="guess" phx-value-number="<%= n %>"><%= n %></a>
      <% end %>
    </h2>
    """
  end
end
4

0 回答 0