(WIP) Lunar New Year festival

apps/web/app/[language]/festival/lunar-new-year/(index)/inventory-table.tsx

@@ -0,0 +1,46 @@
+import { Coins } from '@/components/Format/Coins';
+import { ItemLink, type ItemLinkProps } from '@/components/Item/ItemLink';
+import { Table } from '@gw2treasures/ui/components/Table/Table';
+import type { FC, ReactNode } from 'react';
+
+export interface InventoryTableProps {
+  envelope: ItemLinkProps['item']
+}
+
+export const InventoryTable: FC<InventoryTableProps> = ({ envelope }) => {
+  return (
+    <Table>
+      <thead>
+        <tr>
+          <Table.HeaderCell>Account</Table.HeaderCell>
+          <Table.HeaderCell align="right">Coins</Table.HeaderCell>
+          <Table.HeaderCell align="right"><ItemLink item={envelope} icon={32}/></Table.HeaderCell>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>darthmaim.6017</td>
+          <td align="right"><Coins value={10204975}/></td>
+          <td align="right">0</td>
+        </tr>
+        <tr>
+          <td>2nd Account</td>
+          <td align="right"><Coins value={0}/></td>
+          <td align="right">0</td>
+        </tr>
+      </tbody>
+    </Table>
+  );
+};
+
+/*
+
+      <Gw2Accounts requiredScopes={requiredScopes} loading={null} loginMessage={<Trans id="festival.items.login"/>} authorizationMessage={<Trans id="festival.items.authorize"/>}>
+        {items.map((item) => (
+          <Fragment key={item.id}>
+            <Headline id={item.id.toString()}><ItemLink item={item}/></Headline>
+            <ItemInventoryTable itemId={item.id}/>
+          </Fragment>
+        ))}
+      </Gw2Accounts>
+      */

apps/web/app/[language]/festival/lunar-new-year/(index)/page.tsx

@@ -0,0 +1,88 @@
+import { Gw2Accounts } from '@/components/Gw2Api/Gw2Accounts';
+import { Trans } from '@/components/I18n/Trans';
+import { ItemInventoryTable } from '@/components/Item/ItemInventoryTable';
+import { ItemTable } from '@/components/ItemTable/ItemTable';
+import { ItemTableColumnsButton } from '@/components/ItemTable/ItemTableColumnsButton';
+import { ItemTableContext } from '@/components/ItemTable/ItemTableContext';
+import { PageLayout } from '@/components/Layout/PageLayout';
+import { pageView } from '@/lib/pageView';
+import { Headline } from '@gw2treasures/ui/components/Headline/Headline';
+import type { Metadata } from 'next';
+import { requiredScopes } from '../helper';
+import { db } from '@/lib/prisma';
+import { linkProperties } from '@/lib/linkProperties';
+import { cache } from '@/lib/cache';
+import { ItemLink } from '@/components/Item/ItemLink';
+import type { PageProps } from '@/lib/next';
+import { getTranslate } from '@/lib/translate';
+import { Fragment } from 'react';
+import { InventoryTable } from './inventory-table';
+import { groupById } from '@gw2treasures/helper/group-by';
+
+const ITEM_ENVELOPE = 68646;
+const ITEM_DB_CHAMPION_ENVELOPE = 68647;
+const ITEM_LITTLE_ENVELOPE = 68645;
+const ITEM_TOKEN_CHAMPION = 92659;
+const ITEM_TOKEN_CHAMPION_FRAGMENT = 94668;
+const ITEM_TOKEN_DB_CHAMPION = 68618;
+
+const itemIds = [
+  ITEM_ENVELOPE,
+  ITEM_DB_CHAMPION_ENVELOPE,
+  ITEM_LITTLE_ENVELOPE,
+  ITEM_TOKEN_CHAMPION,
+  ITEM_TOKEN_CHAMPION_FRAGMENT,
+  ITEM_TOKEN_DB_CHAMPION,
+];
+
+const loadData = cache(async function loadData() {
+  const [items] = await Promise.all([
+    db.item.findMany({
+      where: { id: { in: itemIds }},
+      select: {
+        ...linkProperties,
+        tpTradeable: true, tpCheckedAt: true,
+        buyPrice: true, buyQuantity: true,
+        sellPrice: true, sellQuantity: true,
+        tpHistory: { orderBy: { time: 'asc' }}
+      },
+      orderBy: { relevancy: 'desc' },
+    })
+  ]);
+
+  return { items };
+}, ['lunar-new-year-items'], { revalidate: 60 * 60 });
+
+export default async function LunarNewYearPage() {
+  const { items } = await loadData();
+  const itemsById = groupById(items);
+
+  await pageView('festival/lunar-new-year');
+
+  return (
+    <PageLayout>
+      <ItemTableContext id="lunar-new-year">
+        <p><Trans id="festival.lunar-new-year.intro"/></p>
+        <p><Trans id="festival.lunar-new-year.description"/></p>
+        <Headline actions={<ItemTableColumnsButton/>} id="items"><Trans id="navigation.items"/></Headline>
+        <ItemTable query={{ where: { id: { in: itemIds }}}} defaultColumns={['item', 'rarity', 'type', 'buyPrice', 'buyPriceTrend', 'sellPrice', 'sellPriceTrend']}/>
+      </ItemTableContext>
+
+      <div style={{ marginTop: 32 }}/>
+
+      <Headline id="inventory">Inventory</Headline>
+      <InventoryTable envelope={itemsById.get(ITEM_ENVELOPE)!}/>
+    </PageLayout>
+  );
+}
+
+export async function generateMetadata({ params }: PageProps): Promise<Metadata> {
+  const { language } = await params;
+  const t = getTranslate(language);
+
+  return {
+    title: {
+      absolute: `${t('festival.lunar-new-year')} · gw2treasures.com`
+    }
+  };
+}

apps/web/app/[language]/festival/lunar-new-year/achievements/page.tsx

@@ -0,0 +1,101 @@
+import { AchievementTable } from '@/components/Achievement/AchievementTable';
+import { Gw2Accounts } from '@/components/Gw2Api/Gw2Accounts';
+import { Trans } from '@/components/I18n/Trans';
+import { Description } from '@/components/Layout/Description';
+import { PageLayout } from '@/components/Layout/PageLayout';
+import { cache } from '@/lib/cache';
+import { linkProperties } from '@/lib/linkProperties';
+import type { PageProps } from '@/lib/next';
+import { db } from '@/lib/prisma';
+import type { AchievementFlags } from '@gw2api/types/data/achievement';
+import { Headline } from '@gw2treasures/ui/components/Headline/Headline';
+import { Notice } from '@gw2treasures/ui/components/Notice/Notice';
+import type { Metadata } from 'next';
+import { requiredScopes } from '../helper';
+import { pageView } from '@/lib/pageView';
+import { getTranslate } from '@/lib/translate';
+
+const achievementIds = [
+  5005,
+  2030,
+  5069,
+  2028,
+  2768,
+  2029,
+  6031,
+  2765,
+  2049,
+  2792,
+  2048,
+];
+const achievementCategoryIds = [
+  98,
+  150,
+  197,
+  198,
+];
+
+const dailyFlags: AchievementFlags[] = ['Daily', 'Weekly', 'Monthly'];
+
+const loadData = cache(async function loadData() {
+  const [allAchievements] = await Promise.all([
+    db.achievement.findMany({
+      where: {
+        OR: [
+          { id: { in: achievementIds }},
+          { achievementCategoryId: { in: achievementCategoryIds }}
+        ]
+      },
+      include: { icon: true, rewardsItem: { select: linkProperties }, rewardsTitle: { select: { id: true, name_de: true, name_en: true, name_es: true, name_fr: true }}},
+    })
+  ]);
+
+  const groupedAchievements = allAchievements.reduce<{ achievements: typeof allAchievements, dailyAchievements: typeof allAchievements }>((grouped, achievement) => {
+    const isDaily = dailyFlags.some((flag) => achievement.flags.includes(flag));
+    grouped[isDaily ? 'dailyAchievements' : 'achievements'].push(achievement);
+    return grouped;
+  }, { achievements: [], dailyAchievements: [] });
+
+  return { ...groupedAchievements };
+}, ['wintersday'], { revalidate: 60 * 60 });
+
+export default async function WintersdayAchievementsPage({ params }: PageProps) {
+  const { language } = await params;
+  const { achievements, dailyAchievements } = await loadData();
+  await pageView('festival/wintersday/achievements');
+
+  return (
+    <PageLayout>
+      <Gw2Accounts requiredScopes={requiredScopes} loading={null} loginMessage={<Trans id="festival.wintersday.achievements.login"/>} authorizationMessage={<Trans id="festival.wintersday.achievements.authorize"/>}/>
+
+      <AchievementTable achievements={achievements} language={language} includeRewardsColumns>
+        {(table, ColumnSelect) => (
+          <>
+            <Description actions={ColumnSelect}><Trans id="festival.wintersday.achievements.description"/></Description>
+            {table}
+          </>
+        )}
+      </AchievementTable>
+
+      <AchievementTable achievements={dailyAchievements} language={language}>
+        {(table, columnSelect) => (
+          <>
+            <Headline actions={columnSelect} id="daily">Daily Achievements</Headline>
+            <Notice>The Guild Wars 2 API does not report progress for daily achievements.</Notice>
+            {table}
+          </>
+        )}
+      </AchievementTable>
+    </PageLayout>
+  );
+}
+
+export async function generateMetadata({ params }: PageProps): Promise<Metadata> {
+  const { language } = await params;
+  const t = getTranslate(language);
+
+  return {
+    title: t('navigation.achievements')
+  };
+}
+

apps/web/app/[language]/festival/lunar-new-year/helper.ts

@@ -0,0 +1,16 @@
+import { Scope } from '@gw2me/client';
+
+export const requiredScopes = [
+  // general
+  Scope.GW2_Account,
+
+  // skins / minis
+  Scope.GW2_Unlocks,
+
+  // achievements
+  Scope.GW2_Progression,
+
+  // inventory
+  Scope.GW2_Characters,
+  Scope.GW2_Inventories,
+];

apps/web/app/[language]/festival/lunar-new-year/layout.module.css

@@ -0,0 +1,6 @@
+.hero {
+  border: 16px solid;
+  border-image: url(./border-decoration.svg) 33%;
+  margin: -16px 0;
+  padding: 0 16px;
+}

apps/web/app/[language]/festival/lunar-new-year/layout.tsx

@@ -0,0 +1,49 @@
+import { Trans } from '@/components/I18n/Trans';
+import { HeroLayout } from '@/components/Layout/HeroLayout';
+import { NavBar } from '@/components/Layout/NavBar';
+import { ResetTimer } from '@/components/Reset/ResetTimer';
+import type { LayoutProps } from '@/lib/next';
+import { getTranslate } from '@/lib/translate';
+import { getCurrentUrl } from '@/lib/url';
+import { Headline } from '@gw2treasures/ui/components/Headline/Headline';
+import type { Metadata } from 'next';
+import ogImage from './og.png';
+import styles from './layout.module.css';
+
+const endsAt = new Date('2025-01-02T17:00:00.000Z');
+
+export default function LunarNewYearFestivalLayout({ children }: LayoutProps) {
+  return (
+    <HeroLayout color="#be3413" hero={(<div className={styles.hero}><Headline id="lunar-new-year" actions={<>Time remaining: <ResetTimer reset={endsAt}/></>}><Trans id="festival.lunar-new-year"/></Headline></div>)} skipLayout
+      navBar={(
+        <NavBar base="/festival/lunar-new-year/" items={[
+          { segment: '(index)', href: '/festival/lunar-new-year', label: <Trans id="festival.lunar-new-year"/> },
+          { segment: 'achievements', label: <Trans id="navigation.achievements"/> },
+          { segment: 'skins', label: <Trans id="navigation.skins"/> },
+          { segment: 'minis', label: <Trans id="festival.lunar-new-year.minis"/> },
+          { segment: 'wizards-vault', label: <Trans id="navigation.wizardsVault"/> },
+        ]}/>
+      )}
+    >
+      {children}
+    </HeroLayout>
+  );
+}
+
+export async function generateMetadata({ params }: LayoutProps): Promise<Metadata> {
+  const { language } = await params;
+  const t = getTranslate(language);
+
+  return {
+    title: {
+      template: `${t('festival.lunar-new-year')}: %s · gw2treasures.com`,
+      default: ''
+    },
+    description: t('festival.lunar-new-year.description'),
+    keywords: ['lunar-new-year', 'gw2', 'guild wars 2', 'festival', 'tixx', 'Bell Choir', 'snowball', 'toypocalypse', 'winter', 'wonderland', 'lair', 'snowmen', 'gift', 'present', 'orphan'],
+    openGraph: {
+      images: [{ url: new URL(ogImage.src, await getCurrentUrl()), width: ogImage.width, height: ogImage.height }],
+    },
+    twitter: { card: 'summary_large_image' }
+  };
+}

apps/web/app/[language]/festival/lunar-new-year/loading.tsx

@@ -0,0 +1,10 @@
+import { PageLayout } from '@/components/Layout/PageLayout';
+import { Skeleton } from '@/components/Skeleton/Skeleton';
+
+export default function WintersdayLoading() {
+  return (
+    <PageLayout>
+      <Skeleton/>
+    </PageLayout>
+  );
+}