From 9b284904501035800c53a3f97eeac57152a30e33 Mon Sep 17 00:00:00 2001 From: Kalle <38327916+Sendouc@users.noreply.github.com> Date: Sun, 25 Sep 2022 15:33:00 +0300 Subject: [PATCH] Add builds peek to front page --- app/db/models/builds/queries.server.ts | 8 ++++ app/db/models/builds/recentBuilds.sql | 58 ++++++++++++++++++++++++++ app/routes/index.tsx | 32 ++++++++++++++ app/styles/front.css | 12 +++++- public/locales/en/front.json | 1 + 5 files changed, 110 insertions(+), 1 deletion(-) create mode 100644 app/db/models/builds/recentBuilds.sql diff --git a/app/db/models/builds/queries.server.ts b/app/db/models/builds/queries.server.ts index f9a16f058..78d639388 100644 --- a/app/db/models/builds/queries.server.ts +++ b/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; + + return rows.map(augmentBuild); +} + function augmentBuild( row: T & { modes: Build["modes"]; weapons: string; abilities: string } ) { diff --git a/app/db/models/builds/recentBuilds.sql b/app/db/models/builds/recentBuilds.sql new file mode 100644 index 000000000..d1d9bcfab --- /dev/null +++ b/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" diff --git a/app/routes/index.tsx b/app/routes/index.tsx index f054c8268..563366e74 100644 --- a/app/routes/index.tsx +++ b/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 (
+
+ + + {t("front:buildsGoTo")} + +
@@ -114,6 +127,25 @@ function GoToPageBanner({ ); } +function BuildsPeek() { + const data = useLoaderData(); + + return ( +
+
+ {data.recentBuilds.map((build) => ( + + ))} +
+
+ ); +} + function CalendarPeek() { const data = useLoaderData(); const { t, i18n } = useTranslation("front"); diff --git a/app/styles/front.css b/app/styles/front.css index 0aeaddc16..e826fca89 100644 --- a/app/styles/front.css +++ b/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 { diff --git a/public/locales/en/front.json b/public/locales/en/front.json index 598d33ba5..2eb9e8bf8 100644 --- a/public/locales/en/front.json +++ b/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",