リハビリアプリを作ろう（その３）

こちらの続きです

1-25の数字押していくゲームを作りたいです
このコラムの範囲

• クリックイベントの追加

クリックした数字を維持する

lib/num_web/live/user_live/index.ex

defmodule NumWeb.UserLive.Index do
  use NumWeb, :live_view

  @impl true
  def mount(_params, _session, socket) do
    num =
    1..25
    |> Enum.shuffle()
    socket = assign(socket, num: num)
    |> assign(ok_num: [])
    {:ok, socket}
  end

  @impl true
  def handle_event("buttno", %{"no" => no}, socket) do
    ok_num = socket.assigns[:ok_num] ++ [no]
    socket = assign(socket, ok_num: ok_num)
    {:noreply, socket}
  end
end

クリックイベントの描画

lib/num_web/live/user_live/index.html.heex

<%= for {s, i} <- Enum.with_index(@num, 1) do %>
  <%= if Enum.find_index(@ok_num, fn x -> Integer.to_string(s) == x end) == nil do %>
    <div phx-click="buttno" phx-value-no={s}  class="float-left w-28 h-28 m-2 bg-blue-200 text-center ">
      <p class="pt-7 text-5xl text-blue-700 "><%= s %></p>
    </div>
  <% else %>
    <div  class="float-left w-28 h-28 m-2 bg-blue-100 text-center ">
    </div>
  <% end %>
  <%= if rem(i, 5) == 0 do  %>
    <br>
  <% end %>
<% end %>

現時点結果

数字をクリックすると数字が消えます

今回はここまで