Add builds peek to front page

app/db/models/builds/queries.server.ts

@@ -17,6 +17,7 @@ import createBuildAbilitySql from "./createBuildAbility.sql";
 import countByUserIdSql from "./countByUserId.sql";
 import buildsByUserIdSql from "./buildsByUserId.sql";
 import buildsByWeaponIdSql from "./buildsByWeaponId.sql";
+import recentBuildsSql from "./recentBuilds.sql";
 import deleteByIdSql from "./deleteById.sql";
 
 const createBuildStm = sql.prepare(createBuildSql);
@@ -25,6 +26,7 @@ const createBuildAbilityStm = sql.prepare(createBuildAbilitySql);
 const countByUserIdStm = sql.prepare(countByUserIdSql);
 const buildsByUserIdStm = sql.prepare(buildsByUserIdSql);
 const buildsByWeaponIdStm = sql.prepare(buildsByWeaponIdSql);
+const recentBuildsStm = sql.prepare(recentBuildsSql);
 const deleteByIdStm = sql.prepare(deleteByIdSql);
 
 interface CreateArgs {
@@ -126,6 +128,12 @@ export function buildsByWeaponId({
   return rows.map(augmentBuild);
 }
 
+export function recentBuilds() {
+  const rows = recentBuildsStm.all() as Array<BuildsByWeaponIdRow>;
+
+  return rows.map(augmentBuild);
+}
+
 function augmentBuild<T>(
   row: T & { modes: Build["modes"]; weapons: string; abilities: string }
 ) {

app/db/models/builds/recentBuilds.sql

@@ -0,0 +1,58 @@
+with "RecentBuild" as (
+  select
+    *
+  from
+    "Build"
+  order by
+    "updatedAt" desc
+  limit
+    3
+), "BuildFiltered" as (
+  select
+    "id",
+    "title",
+    "description",
+    "modes",
+    "headGearSplId",
+    "clothesGearSplId",
+    "shoesGearSplId",
+    "updatedAt",
+    "ownerId"
+  from
+    "RecentBuild"
+    left join "BuildWeapon" on "BuildWeapon"."buildId" = "RecentBuild"."id"
+  group by
+    "RecentBuild"."id"
+),
+"BuildWithWeapon" as (
+  select
+    "BuildFiltered".*,
+    json_group_array("BuildWeapon"."weaponSplId") as "weapons"
+  from
+    "BuildFiltered"
+    left join "BuildWeapon" on "BuildWeapon"."buildId" = "BuildFiltered"."id"
+  group by
+    "BuildFiltered"."id"
+)
+select
+  "BuildWithWeapon".*,
+  "User"."discordId",
+  "User"."discordName",
+  "User"."discordDiscriminator",
+  json_group_array(
+    json_object(
+      'ability',
+      "BuildAbility"."ability",
+      'gearType',
+      "BuildAbility"."gearType",
+      'slotIndex',
+      "BuildAbility"."slotIndex"
+    )
+  ) as "abilities"
+from
+  "BuildWithWeapon"
+  left join "BuildAbility" on "BuildAbility"."buildId" = "BuildWithWeapon"."id"
+  left join "PlusTier" on "PlusTier"."userId" = "BuildWithWeapon"."ownerId"
+  left join "User" on "User"."id" = "BuildWithWeapon"."ownerId"
+group by
+  "BuildWithWeapon"."id"

app/routes/index.tsx

@@ -3,6 +3,7 @@ import { useLoaderData } from "@remix-run/react";
 import type React from "react";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
+import { BuildCard } from "~/components/BuildCard";
 import { ArrowRightIcon } from "~/components/icons/ArrowRight";
 import { Image } from "~/components/Image";
 import { Main } from "~/components/Main";
@@ -16,6 +17,7 @@ import {
   ANALYZER_PAGE,
   articlePage,
   BADGES_PAGE,
+  BUILDS_PAGE,
   calendarEventPage,
   CALENDAR_PAGE,
   navIconUrl,
@@ -30,9 +32,14 @@ export const links: LinksFunction = () => {
   return [{ rel: "stylesheet", href: styles }];
 };
 
+export const handle = {
+  i18n: ["weapons", "builds"],
+};
+
 export const loader = async () => {
   return json({
     upcomingEvents: db.calendarEvents.upcomingEvents(),
+    recentBuilds: db.builds.recentBuilds(),
     recentWinners: db.calendarEvents.recentWinners(),
     recentArticles: await mostRecentArticles(RECENT_ARTICLES_TO_SHOW),
   });
@@ -44,6 +51,12 @@ export default function Index() {
   return (
     <Main className="stack lg">
       <Header />
+      <div className="stack md">
+        <BuildsPeek />
+        <GoToPageBanner to={BUILDS_PAGE} navItem="builds">
+          {t("front:buildsGoTo")}
+        </GoToPageBanner>
+      </div>
       <div className="stack md">
         <CalendarPeek />
         <GoToPageBanner to={CALENDAR_PAGE} navItem="calendar">
@@ -114,6 +127,25 @@ function GoToPageBanner({
   );
 }
 
+function BuildsPeek() {
+  const data = useLoaderData<typeof loader>();
+
+  return (
+    <div className="front__builds-wrapper">
+      <div className="builds-container front__builds-container">
+        {data.recentBuilds.map((build) => (
+          <BuildCard
+            key={build.id}
+            build={build}
+            owner={build}
+            canEdit={false}
+          />
+        ))}
+      </div>
+    </div>
+  );
+}
+
 function CalendarPeek() {
   const data = useLoaderData<typeof loader>();
   const { t, i18n } = useTranslation("front");

app/styles/front.css

@@ -11,6 +11,15 @@
   font-size: var(--fonts-sm);
 }
 
+.front__builds-wrapper {
+  overflow-x: scroll;
+}
+
+.front__builds-container {
+  width: 46.5rem;
+  grid-template-columns: 15rem 15rem 15rem;
+}
+
 .front__go-to-page-banner {
   display: flex;
   align-items: center;
@@ -34,7 +43,8 @@
 }
 
 .front__go-to-page-banner__nav-img-container {
-  width: 3rem;
+  min-width: max-content;
+  padding-inline-end: var(--s-2);
 }
 
 .front__calendar-header {

public/locales/en/front.json

@@ -1,5 +1,6 @@
 {
   "websiteSubtitle": "Competitive Splatoon Hub",
+  "buildsGoTo": "Browse builds of all Splatoon 3 weapons from top level players and others",
   "calendarGoTo": "See all the past and upcoming events on the calendar page",
   "moreFeatures": "More features",
   "plus.description": "View Plus Server voting history and more",