From 5a4917c4a144ef7e37312e9db0c7380f09bc5d9c Mon Sep 17 00:00:00 2001
From: Antonio Andre <antonioandre1008@gmail.com>
Date: Sat, 23 May 2026 18:09:30 -0500
Subject: [PATCH] feat: implementa rota de ranking de jogos

---
 .env.example                                  |   2 +-
 app/components/AppSelect.vue                  |  51 ++++
 app/pages/(protected)/home/index.vue          |  16 +-
 app/pages/(protected)/ranking-jogos/index.vue | 278 ++++++++++++++++++
 4 files changed, 341 insertions(+), 6 deletions(-)
 create mode 100644 app/components/AppSelect.vue
 create mode 100644 app/pages/(protected)/ranking-jogos/index.vue

diff --git a/.env.example b/.env.example
index a65bf0c..2b20cc2 100644
--- a/.env.example
+++ b/.env.example
@@ -3,7 +3,7 @@ DATABASE_URL="postgresql://postgres:postgres@localhost:5432/sistema_auth?schema=
 DIRECT_DATABASE_URL="postgresql://postgres:postgres@localhost:5432/sistema_auth?schema=public"
 
 # JWT contract
-JWT_ISSUER="https://auth.local"
+JWT_ISSUER="https://sistema-distribuido-trabalho-faculd.vercel.app"
 JWT_AUDIENCE="internal-apis"
 JWT_ACCESS_TTL_SEC="900"
 JWT_REFRESH_TTL_SEC="604800"
diff --git a/app/components/AppSelect.vue b/app/components/AppSelect.vue
new file mode 100644
index 0000000..55d0e8c
--- /dev/null
+++ b/app/components/AppSelect.vue
@@ -0,0 +1,51 @@
+<template>
+  <div class="grid gap-2">
+    <label :for="id" class="m-0 text-xs font-semibold uppercase leading-[1.4] tracking-[0.96px] text-[#777169]">
+      {{ label }}
+    </label>
+
+    <div class="relative">
+      <select :id="id" v-model="selectedValue" :disabled="disabled"
+        class="h-14 w-full appearance-none rounded-lg border border-[#d6d3d1] bg-white px-4 pr-11 text-base leading-normal tracking-[0.16px] text-[#0c0a09] outline-none transition focus:border-2 focus:border-[#0c0a09] disabled:cursor-not-allowed disabled:opacity-50">
+        <option v-for="option in options" :key="option.value" :value="option.value">
+          {{ option.label }}
+        </option>
+      </select>
+
+      <Icon name="mdi:chevron-down"
+        class="pointer-events-none absolute right-4 top-1/2 -translate-y-1/2 text-xl text-[#777169]" />
+    </div>
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  id: {
+    type: String,
+    required: true
+  },
+  label: {
+    type: String,
+    required: true
+  },
+  modelValue: {
+    type: String,
+    required: true
+  },
+  options: {
+    type: Array,
+    required: true
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  }
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const selectedValue = computed({
+  get: () => props.modelValue,
+  set: (value) => emit('update:modelValue', value)
+})
+</script>
diff --git a/app/pages/(protected)/home/index.vue b/app/pages/(protected)/home/index.vue
index 3e3faac..0102894 100644
--- a/app/pages/(protected)/home/index.vue
+++ b/app/pages/(protected)/home/index.vue
@@ -20,11 +20,17 @@
           </p>
         </div>
 
-        <button type="button" :disabled="isLeaving" @click="sair"
-          class="inline-flex h-10 items-center justify-center gap-2 rounded-full bg-[#292524] px-5 text-[15px] font-medium leading-none text-white transition hover:bg-[#0c0a09] active:bg-[#0c0a09] disabled:cursor-not-allowed disabled:opacity-70">
-          <Icon v-if="isLeaving" name="mdi:loading" class="animate-spin text-base" />
-          <span v-else>Sair</span>
-        </button>
+        <div class="flex flex-col gap-3 sm:flex-row">
+          <NuxtLink to="/ranking-jogos"
+            class="inline-flex h-10 items-center justify-center rounded-full border border-[#d6d3d1] bg-transparent px-5 text-[15px] font-medium leading-none text-[#0c0a09] transition hover:border-[#0c0a09]">
+            Ver rankings
+          </NuxtLink>
+          <button type="button" :disabled="isLeaving" @click="sair"
+            class="inline-flex h-10 items-center justify-center gap-2 rounded-full bg-[#292524] px-5 text-[15px] font-medium leading-none text-white transition hover:bg-[#0c0a09] active:bg-[#0c0a09] disabled:cursor-not-allowed disabled:opacity-70">
+            <Icon v-if="isLeaving" name="mdi:loading" class="animate-spin text-base" />
+            <span v-else>Sair</span>
+          </button>
+        </div>
       </header>
 
       <section
diff --git a/app/pages/(protected)/ranking-jogos/index.vue b/app/pages/(protected)/ranking-jogos/index.vue
new file mode 100644
index 0000000..de8a7cf
--- /dev/null
+++ b/app/pages/(protected)/ranking-jogos/index.vue
@@ -0,0 +1,278 @@
+<template>
+  <div class="relative min-h-screen overflow-hidden bg-[#f5f5f5] px-4 py-10 font-sans text-[#0c0a09] md:px-8 md:py-16">
+    <div
+      class="pointer-events-none absolute left-1/2 top-8 h-[460px] w-[min(92vw,820px)] -translate-x-1/2 rounded-[48px] bg-[radial-gradient(circle_at_20%_30%,rgba(167,229,211,0.62),transparent_28%),radial-gradient(circle_at_72%_24%,rgba(244,197,168,0.5),transparent_30%),radial-gradient(circle_at_52%_78%,rgba(168,200,232,0.56),transparent_34%)] blur-2xl"
+      aria-hidden="true"></div>
+
+    <main class="relative mx-auto grid w-full max-w-[1120px] gap-8" aria-labelledby="ranking-title">
+      <header class="flex flex-col gap-5 sm:flex-row sm:items-end sm:justify-between">
+        <div>
+          <p
+            class="m-0 inline-flex rounded-full bg-[rgba(244,197,168,0.56)] px-3 py-1 text-xs font-semibold uppercase leading-[1.4] tracking-[0.96px] text-[#0c0a09]">
+            Rankings
+          </p>
+          <h1 id="ranking-title"
+            class="my-5 max-w-[720px] font-serif text-[40px] font-light leading-[1.08] tracking-[-0.96px] text-[#0c0a09] md:text-[48px]">
+            Ranking de jogos
+          </h1>
+          <p class="m-0 max-w-[560px] text-base font-normal leading-6 tracking-[0.16px] text-[#4e4e4e]">
+            Acompanhe os jogos por período, plataforma e volume de jogadores ativos.
+          </p>
+        </div>
+
+        <NuxtLink to="/home"
+          class="inline-flex h-10 items-center justify-center rounded-full border border-[#d6d3d1] bg-transparent px-5 text-[15px] font-medium leading-none text-[#0c0a09] transition hover:border-[#0c0a09]">
+          Voltar
+        </NuxtLink>
+      </header>
+
+      <section
+        class="grid gap-6 rounded-2xl border border-[#e7e5e4] bg-white p-6 shadow-[0_4px_16px_rgba(0,0,0,0.04)] md:p-8"
+        aria-label="Lista de ranking de jogos">
+        <div class="grid gap-5 md:grid-cols-[minmax(0,1fr)_minmax(240px,320px)] md:items-end">
+          <div>
+            <span
+              class="inline-flex min-h-6 items-center rounded-full bg-[rgba(167,229,211,0.62)] px-2.5 py-1 text-xs font-semibold uppercase leading-none tracking-[0.96px] text-[#0c0a09]">
+              {{ selectedRankingMeta.badge }}
+            </span>
+            <h2 class="mt-4 font-serif text-3xl font-light leading-[1.13] tracking-[-0.32px] text-[#0c0a09]">
+              {{ selectedRankingMeta.title }}
+            </h2>
+          </div>
+
+          <AppSelect id="ranking-filter" v-model="selectedRanking" label="Visualização" :options="rankingOptions"
+            :disabled="isLoading" />
+        </div>
+
+        <div v-if="isLoading" class="grid gap-3" role="status" aria-live="polite">
+          <div v-for="item in 4" :key="item" class="h-20 animate-pulse rounded-xl bg-[#f0efed]"></div>
+        </div>
+
+        <div v-else-if="errorMessage"
+          class="rounded-xl border border-red-200 bg-red-50 px-4 py-3 text-[15px] leading-[1.47] tracking-[0.15px] text-red-700"
+          role="alert">
+          {{ errorMessage }}
+        </div>
+
+        <div v-else-if="!rankings.length"
+          class="rounded-xl border border-[#e7e5e4] bg-[#fafafa] px-4 py-6 text-center text-[15px] leading-[1.47] tracking-[0.15px] text-[#777169]">
+          Nenhum jogo encontrado para este ranking.
+        </div>
+
+        <div v-else class="overflow-hidden rounded-xl border border-[#e7e5e4]">
+          <div
+            class="hidden bg-[#fafafa] px-4 py-3 text-xs font-semibold uppercase leading-[1.4] tracking-[0.96px] text-[#777169] md:grid md:grid-cols-[72px_minmax(180px,1.5fr)_minmax(130px,1fr)_repeat(4,minmax(100px,1fr))] md:gap-4">
+            <span>Posição</span>
+            <span>Jogo</span>
+            <span>Plataforma</span>
+            <span>Jogadores</span>
+            <span>Semanal</span>
+            <span>Mensal</span>
+            <span>Anual</span>
+          </div>
+
+          <ol class="grid divide-y divide-[#e7e5e4]">
+            <li v-for="(game, index) in rankings" :key="game.id"
+              class="grid gap-4 bg-white p-4 md:grid-cols-[72px_minmax(180px,1.5fr)_minmax(130px,1fr)_repeat(4,minmax(100px,1fr))] md:items-center md:gap-4">
+              <div class="flex items-center justify-between gap-3 md:block">
+                <span class="text-xs font-semibold uppercase leading-[1.4] tracking-[0.96px] text-[#777169] md:hidden">
+                  Posição
+                </span>
+                <span
+                  class="inline-flex h-9 min-w-9 items-center justify-center rounded-full bg-[#292524] px-3 text-[15px] font-medium leading-none text-white">
+                  {{ index + 1 }}
+                </span>
+              </div>
+
+              <div class="grid gap-1">
+                <span class="text-xs font-semibold uppercase leading-[1.4] tracking-[0.96px] text-[#777169] md:hidden">
+                  Jogo
+                </span>
+                <strong class="text-base font-medium leading-6 tracking-[0.16px] text-[#0c0a09]">
+                  {{ game.name }}
+                </strong>
+              </div>
+
+              <div v-for="stat in getGameStats(game)" :key="stat.label"
+                class="flex items-center justify-between gap-3 md:block">
+                <span class="text-xs font-semibold uppercase leading-[1.4] tracking-[0.96px] text-[#777169] md:hidden">
+                  {{ stat.label }}
+                </span>
+                <span class="text-[15px] leading-[1.47] tracking-[0.15px] text-[#292524]">
+                  {{ stat.value }}
+                </span>
+              </div>
+            </li>
+          </ol>
+        </div>
+      </section>
+    </main>
+  </div>
+</template>
+
+<script setup>
+definePageMeta({
+  middleware: 'auth'
+})
+
+const RANKINGS_API_BASE_URL = 'https://api-ranking-jogos-production.up.railway.app/api/v1'
+
+const rankingOptions = [
+  {
+    label: 'Semanal',
+    value: 'weekly',
+    endpoint: '/rankings/weekly',
+    badge: 'Semana',
+    title: 'Ranking semanal'
+  },
+  {
+    label: 'Mensal',
+    value: 'monthly',
+    endpoint: '/rankings/monthly',
+    badge: 'Mês',
+    title: 'Ranking mensal'
+  },
+  {
+    label: 'Anual',
+    value: 'yearly',
+    endpoint: '/rankings/yearly',
+    badge: 'Ano',
+    title: 'Ranking anual'
+  },
+  {
+    label: 'Steam',
+    value: 'steam',
+    endpoint: '/rankings/platforms/Steam',
+    badge: 'Steam',
+    title: 'Ranking da Steam'
+  },
+  {
+    label: 'Epic Games',
+    value: 'epic-games',
+    endpoint: '/rankings/platforms/Epic Games',
+    badge: 'Epic Games',
+    title: 'Ranking da Epic Games'
+  },
+  {
+    label: 'Riot Launcher',
+    value: 'riot-launcher',
+    endpoint: '/rankings/platforms/Riot Launcher',
+    badge: 'Riot Launcher',
+    title: 'Ranking da Riot Launcher'
+  },
+  {
+    label: 'Multiplataforma',
+    value: 'multi-platform',
+    endpoint: '/rankings/platforms/Multiplataforma',
+    badge: 'Multiplataforma',
+    title: 'Ranking multiplataforma'
+  },
+  {
+    label: 'Battle.net',
+    value: 'battle-net',
+    endpoint: '/rankings/platforms/Battle.net',
+    badge: 'Battle.net',
+    title: 'Ranking da Battle.net'
+  },
+  {
+    label: 'Mais jogados',
+    value: 'most-played',
+    endpoint: '/games/most-played',
+    badge: 'Ativos',
+    title: 'Jogos mais jogados'
+  }
+]
+
+const { $toast } = useNuxtApp()
+
+const token = useCookie('token', {
+  secure: true,
+  sameSite: 'lax',
+  maxAge: 900
+})
+
+const selectedRanking = ref('weekly')
+const rankings = ref([])
+const isLoading = ref(false)
+const errorMessage = ref('')
+
+const selectedRankingMeta = computed(() => {
+  return rankingOptions.find((option) => option.value === selectedRanking.value) ?? rankingOptions[0]
+})
+
+const clearToken = () => {
+  token.value = null
+}
+
+const formatNumber = (value) => {
+  return new Intl.NumberFormat('pt-BR').format(Number(value ?? 0))
+}
+
+const getGameStats = (game) => [
+  {
+    label: 'Plataforma',
+    value: game.platform
+  },
+  {
+    label: 'Jogadores',
+    value: formatNumber(game.active_players)
+  },
+  {
+    label: 'Semanal',
+    value: formatNumber(game.weekly_points)
+  },
+  {
+    label: 'Mensal',
+    value: formatNumber(game.monthly_points)
+  },
+  {
+    label: 'Anual',
+    value: formatNumber(game.yearly_points)
+  }
+]
+
+async function fetchRankings() {
+  if (!token.value) {
+    await navigateTo('/login')
+    return
+  }
+
+  isLoading.value = true
+  errorMessage.value = ''
+
+  try {
+    const data = await $fetch(`${RANKINGS_API_BASE_URL}${selectedRankingMeta.value.endpoint}`, {
+      headers: {
+        Authorization: `Bearer ${token.value}`
+      }
+    })
+
+    rankings.value = Array.isArray(data) ? data : []
+  } catch (error) {
+    const statusCode = error?.statusCode ?? error?.response?.status ?? error?.data?.statusCode
+
+    if (statusCode === 401) {
+      clearToken()
+      $toast.error('Sua sessão expirou. Faça login novamente.', { duration: 8000 })
+      await navigateTo('/login')
+      return
+    }
+
+    rankings.value = []
+    errorMessage.value = error?.data?.message ?? 'Erro ao carregar o ranking de jogos. Tente novamente.'
+    $toast.error(errorMessage.value, { duration: 8000 })
+  } finally {
+    isLoading.value = false
+  }
+}
+
+onMounted(() => {
+  fetchRankings()
+})
+
+watch(selectedRanking, () => {
+  if (import.meta.client) {
+    fetchRankings()
+  }
+})
+</script>