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

こちらの続きです

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()

    questions =
    num
    |> Enum.shuffle()

    questions = questions ++ [0]
    [question | questions] = questions

    socket = assign(socket, num: num)
    |> assign(ok_num: [])
    |> assign(questions: questions)
    |> assign(question: question)

    {:ok, socket}
  end

  @impl true
  def handle_event("buttno", %{"no" => no}, socket) do
    question = socket.assigns[:question]
    |> Integer.to_string()

    socket = if question == no do
      ok_num = socket.assigns[:ok_num] ++ [no]
      [question | questions] = socket.assigns[:questions]
      assign(socket, ok_num: ok_num)
      |> assign(questions: questions)
      |> assign(question: question)
    else
      socket
    end

    {:noreply, socket}
  end

end

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

<div  class="w-28 h-28 m-2 bg-red-200 text-center ">
  <p class="pt-7 text-5xl text-red-700 "><%= @question %></p>
</div>
<br>
<%= 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 %>

現時点結果

数字をクリックすると数字が消え次の問題が表示します

14をクリック

すべてクリック後

今回はここまで

今後の課題

• 時間測定
• リセットボタン