feat: add button to create room with custom bet

Author: nunom27

lib/safira_web/components/button.ex

@@ -4,9 +4,12 @@ defmodule SafiraWeb.Components.Button do
   """
   use SafiraWeb, :component
 
+  import SafiraWeb.CoreComponents
+
   attr :title, :string, default: ""
   attr :subtitle, :string, default: ""
   attr :disabled, :boolean, default: false
+  attr :icon, :string, default: ""
   attr :class, :string, default: ""
 
   attr :rest, :global,
@@ -21,6 +24,9 @@ defmodule SafiraWeb.Components.Button do
       disabled={@disabled}
       {@rest}
     >
+      <%= if @icon != "" do %>
+        <.icon name={@icon} />
+      <% end %>
       <p class="uppercase font-terminal text-2xl"><%= @title %></p>
       <p class="font-terminal"><%= @subtitle %></p>
     </button>

lib/safira_web/live/app/coin_flip_live/index.ex

@@ -22,6 +22,7 @@ defmodule SafiraWeb.App.CoinFlipLive.Index do
      |> assign(:result, nil)
      |> assign(:wheel_active?, Minigames.wheel_active?())
      |> assign(:playing, false)
+     |> assign(:bet, 10)
      |> stream(:room_list, Minigames.list_coin_flip_rooms())}
   end
 
@@ -36,8 +37,11 @@ defmodule SafiraWeb.App.CoinFlipLive.Index do
      |> push_event("spin-wheel", %{})}
   end
 
-  def handle_event("create-room", params, socket) do
-    params = Map.put(params, "player1_id", socket.assigns.current_user.attendee.id)
+  def handle_event("create-room", _params, socket) do
+    params = %{
+      "player1_id" => socket.assigns.current_user.attendee.id,
+      "bet" => socket.assigns.bet
+    }
 
     case Minigames.create_coin_flip_room(params) do
       {:ok, room} ->
@@ -93,6 +97,20 @@ defmodule SafiraWeb.App.CoinFlipLive.Index do
      |> stream_insert(:room_list, room)}
   end
 
+  @impl true
+  def handle_event("decrease-bet", _params, socket) do
+    {:noreply,
+     socket
+     |> assign(:bet, socket.assigns.bet - 10)}
+  end
+
+  @impl true
+  def handle_event("increase-bet", _params, socket) do
+    {:noreply,
+     socket
+     |> assign(:bet, socket.assigns.bet + 10)}
+  end
+
   @impl true
   def handle_params(_params, _url, socket) do
     {:noreply, socket}

lib/safira_web/live/app/coin_flip_live/index.html.heex

@@ -1,19 +1,31 @@
 <.page title={gettext("Coin Flip")} size={:xl} title_class="font-terminal uppercase">
   <:actions>
-    <.button phx-click="create-room" phx-value-bet={10}>+</.button>
     <span class="text-semibold text-xl border-2 px-4 py-2 rounded-full font-terminal">
       💰 <%= @attendee_tokens %>
     </span>
   </:actions>
-  <div class="flex flex-row justify-center w-full pt-16">
-    <%!-- <.action_button
-      title={gettext("Spin")}
-      subtitle={"💰 #{@wheel_price}"}
-      class="w-64"
+  <div class="flex justify-center w-full">
+    <.action_button
+      icon="hero-minus"
+      class="rounded-r-lg pl-6 pr-5"
+      disabled={false}
+      phx-click="decrease-bet"
+    />
+    <.action_button
+      title={gettext("Play")}
+      subtitle={"💰 #{@bet}"}
+      class="rounded-none px-10"
       disabled={false}
       phx-click="create-room"
-      phx-value-bet={10}
-    /> --%>
+    />
+    <.action_button
+      icon="hero-plus"
+      class="rounded-l-lg pr-6 pl-5"
+      disabled={false}
+      phx-click="increase-bet"
+    />
+  </div>
+  <div class="flex flex-row justify-center w-full pt-16">
   </div>
   <h2 class="text-3xl font-semibold font-terminal">Current games:</h2>
   <div
@@ -61,4 +73,4 @@
   show
   id="confirm"
   on_cancel={JS.push("close-modal")}
-/> --%>
+/> --%>