feat: minigames page

lib/pearl_web/config.ex

@@ -61,26 +61,13 @@ defmodule PearlWeb.Config do
           enabled: true
         },
         %{
-          key: :wheel,
-          title: "Wheel",
-          image: "/images/icons/wheel.svg",
-          url: "/app/wheel",
+          key: :games,
+          title: "Games",
+          # Fix: Change icon
+          icon: "hero-play",
+          url: "/app/games",
           enabled: attendee_eligible?
         },
-        %{
-          key: :coin_flip,
-          title: "Coin Flip",
-          image: "/images/icons/coin-flip.svg",
-          url: "/app/coin_flip",
-          enabled: attendee_eligible?
-        },
-        %{
-          key: :slots,
-          title: "Slots",
-          image: "/images/icons/slots.svg",
-          url: "/app/slots",
-          enabled: true
-        },
         %{
           key: :leaderboard,
           title: "Leaderboard",

lib/pearl_web/live/app/games_live/components/game_card.ex

@@ -0,0 +1,30 @@
+defmodule PearlWeb.App.GamesLive.Components.GameCard do
+  @moduledoc """
+    Minigame Card.
+  """
+  use PearlWeb, :component
+
+  attr :name, :string, required: true
+  attr :path, :string, required: true
+  attr :desc, :string, required: true
+  attr :icon, :string, required: true
+
+  def game_card(assigns) do
+    ~H"""
+    <.link
+      patch={"/app/games/#{@path}"}
+      class="flex flex-col h-full group gap-6 rounded-2xl border border-white/10 bg-black/20 p-8 backdrop-blur-md transition-all duration-500 hover:border-white/20 hover:bg-black/30 hover:shadow-2xl hover:shadow-primary/10"
+    >
+      <img src={~p"/images/icons/#{@icon}"} class="size-16 sm:size-24 invert" />
+      <div class="gap-2">
+        <p class="text-2xl font-bold">{@name}</p>
+        <p class="text-white/60">{@desc}</p>
+      </div>
+      <div class="inline-flex items-center gap-2 group-hover:gap-3 transition-all duration-300">
+        <p>Play Now</p>
+        <.icon name="hero-arrow-right" class="size-4" />
+      </div>
+    </.link>
+    """
+  end
+end

lib/pearl_web/live/app/games_live/index.ex

@@ -0,0 +1,41 @@
+defmodule PearlWeb.App.GamesLive.Index do
+  use PearlWeb, :app_view
+
+  import PearlWeb.App.GamesLive.Components.GameCard
+
+  @impl true
+  def mount(_params, _session, socket) do
+    games = [
+      %{
+        name: "Lucky Whell",
+        icon: "wheel.svg",
+        path: "wheel",
+        desc: "Spin the wheel and win exciting prizes"
+      },
+      %{
+        name: "Slots",
+        icon: "slots.svg",
+        path: "slots",
+        desc: "Test your luck with classic slot machines"
+      },
+      %{
+        name: "Coin Flip",
+        icon: "coin-flip.svg",
+        path: "coin_flip",
+        desc: "Heads or tails? Make your choice against other users"
+      },
+      %{
+        name: "Scratch Card",
+        # Fix: change icon
+        icon: "wheel.svg",
+        path: "scratch_card",
+        desc: "Scratch scratch scratch, and reveal your fortune"
+      }
+    ]
+
+    {:ok,
+     socket
+     |> assign(current_page: :games)
+     |> assign(games: games)}
+  end
+end

lib/pearl_web/live/app/games_live/index.html.heex

@@ -0,0 +1,15 @@
+<.page
+  title="Minigames"
+  size={:xl}
+  title_class="font-terminal uppercase"
+>
+  <div class="grid sm:grid-cols-3 py-8 gap-5 sm:gap-10">
+    <.game_card
+      :for={game <- @games}
+      icon={game.icon}
+      path={game.path}
+      name={game.name}
+      desc={game.desc}
+    />
+  </div>
+</.page>

lib/pearl_web/live/app/scratch_card_live/index.ex

@@ -0,0 +1,10 @@
+defmodule PearlWeb.App.ScratchCardLive.Index do
+  use PearlWeb, :app_view
+
+  @impl true
+  def mount(_params, _session, socket) do
+    {:ok,
+     socket
+     |> assign(current_page: :scrath_card)}
+  end
+end

lib/pearl_web/live/app/scratch_card_live/index.html.heex

@@ -0,0 +1,7 @@
+<.page
+  title="Scratch Card"
+  size={:xl}
+  title_class="font-terminal uppercase"
+>
+  <div class="flex p-8 items-center justify-center">Hello World</div>
+</.page>

lib/pearl_web/live/app/slots_live/index.html.heex

@@ -53,7 +53,7 @@
     />
   </div>
   <.link
-    patch={~p"/app/slots/paytable"}
+    patch={~p"/app/games/slots/paytable"}
     class="flex items-center max-w-80 mx-auto mt-8 md:mt-20 justify-center"
   >
     <.icon name="hero-arrow-top-right-on-square" class="text-accent mr-2" />
@@ -78,5 +78,5 @@
   wrapper_class="px-6"
   show
   id="paytable-modal"
-  on_cancel={JS.patch(~p"/app/slots")}
+  on_cancel={JS.patch(~p"/app/games/slots")}
 />

lib/pearl_web/router.ex

@@ -109,16 +109,20 @@ defmodule PearlWeb.Router do
 
         live "/credential", CredentialLive.Index, :index
 
-        live "/wheel", WheelLive.Index, :index
+        live "/games", GamesLive.Index, :index
 
-        live "/coin_flip", CoinFlipLive.Index, :index
+        live "/games/wheel", WheelLive.Index, :index
+
+        live "/games/coin_flip", CoinFlipLive.Index, :index
+
+        live "/games/scratch_card", ScratchCardLive.Index, :index
 
         scope "/badges", BadgeLive do
           live "/", Index, :index
           live "/:id", Show, :show
         end
 
-        scope "/slots", SlotsLive do
+        scope "/games/slots", SlotsLive do
           live "/", Index, :index
           live "/paytable", Index, :show_paytable
         end