From 59ade47800b6a764ded594ab2bb70aca12af8787 Mon Sep 17 00:00:00 2001
From: Stephann Vasconcelos <3025661+stephannv@users.noreply.github.com>
Date: Wed, 7 Sep 2022 09:59:50 -0300
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Add=20game=20card=20badges=20(#190)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../games/card/badge_component.html.erb       |  3 ++
 app/components/games/card/badge_component.rb  | 47 +++++++++++++++++++
 app/components/games/card_component.html.erb  |  6 ++-
 app/components/games/card_component.rb        |  4 ++
 config/locales/pt-BR/components/games.yml     |  6 +++
 5 files changed, 64 insertions(+), 2 deletions(-)
 create mode 100644 app/components/games/card/badge_component.html.erb
 create mode 100644 app/components/games/card/badge_component.rb

diff --git a/app/components/games/card/badge_component.html.erb b/app/components/games/card/badge_component.html.erb
new file mode 100644
index 0000000..2ef47d2
--- /dev/null
+++ b/app/components/games/card/badge_component.html.erb
@@ -0,0 +1,3 @@
+<%= content_tag :span, class: classes do %>
+  <%= text %>
+<% end %>
diff --git a/app/components/games/card/badge_component.rb b/app/components/games/card/badge_component.rb
new file mode 100644
index 0000000..894a336
--- /dev/null
+++ b/app/components/games/card/badge_component.rb
@@ -0,0 +1,47 @@
+# frozen_string_literal: true
+
+module Games
+  module Card
+    class BadgeComponent < ViewComponent::Base
+      BASE_CLASSES = "absolute -top-2 -right-2 uppercase p-2 text-xs rounded drop-shadow-md
+        font-black lg:font-bold border".squish
+
+      COLOR_CLASSES = {
+        coming_soon: "bg-[#5A94FF] text-white border-[#4876cc]",
+        pre_order: "bg-[#C65AFF] text-white border-[#763699]",
+        new_release: "bg-[#ADFF5A] text-black border-[#80FE00]"
+      }.freeze
+
+      def initialize(game:)
+        @game = game
+      end
+
+      private
+
+      attr_reader :game
+
+      def render?
+        type.present?
+      end
+
+      def type
+        if game.pre_order? then :pre_order
+        elsif game.coming_soon? then :coming_soon
+        elsif game.new_release? then :new_release
+        end
+      end
+
+      def text
+        {
+          coming_soon: t(".coming_soon"),
+          pre_order: t(".pre_order"),
+          new_release: t(".new_release")
+        }[type]
+      end
+
+      def classes
+        [BASE_CLASSES, COLOR_CLASSES[type]]
+      end
+    end
+  end
+end
diff --git a/app/components/games/card_component.html.erb b/app/components/games/card_component.html.erb
index 77bbd10..3762474 100644
--- a/app/components/games/card_component.html.erb
+++ b/app/components/games/card_component.html.erb
@@ -1,7 +1,9 @@
-<div class="card border border-gray-700 bg-base-200">
+<div class="card border border-gray-700 bg-base-200 overflow-visible w-[98%]">
+  <%= badge %>
+
   <%= link_to game_path(game.slug) do %>
     <figure class="w-full aspect-video">
-      <%= image_tag game.small_banner_url, class: "w-full", width: 480, height: 320, alt: game.title, loading: :lazy %>
+      <%= image_tag game.small_banner_url, class: "w-full rounded-t-xl", width: 480, height: 320, alt: game.title, loading: :lazy %>
     </figure>
   <% end %>
 
diff --git a/app/components/games/card_component.rb b/app/components/games/card_component.rb
index afb38f6..46ec921 100644
--- a/app/components/games/card_component.rb
+++ b/app/components/games/card_component.rb
@@ -11,5 +11,9 @@ def initialize(game:)
     private
 
     attr_reader :game
+
+    def badge
+      render Games::Card::BadgeComponent.new(game: game)
+    end
   end
 end
diff --git a/config/locales/pt-BR/components/games.yml b/config/locales/pt-BR/components/games.yml
index e13e265..106870a 100644
--- a/config/locales/pt-BR/components/games.yml
+++ b/config/locales/pt-BR/components/games.yml
@@ -24,3 +24,9 @@ pt-BR:
       title: Nenhum jogo encontrado
       description: Não há nenhum jogo para ser exibido aqui
       action: Ver todos os jogos
+
+    card:
+      badge_component:
+        coming_soon: Em breve
+        pre_order: Reserve já
+        new_release: Lançamento