diff --git a/TODO.md b/TODO.md index 1f1949265..b5bfae633 100644 --- a/TODO.md +++ b/TODO.md @@ -14,11 +14,13 @@ Calendar - [ ] Add "playerCount" to Tournament table - [ ] There should be a banner on the list page if you have past tournaments to report - [ ] On the user page tab showing past results +- [ ] Translations ## Other - [x] WeekLinks make opaque blocks not take space on mobile - [x] Type problem with Avatar - [x] Maybe classNames that do nothing on calendar event page? +- [ ] addTagArray get tags type from constant - [ ] Rename model events -> calendarEvents - [ ] On the event page should not say Day 1 if only one day diff --git a/app/db/models/calendar.server.ts b/app/db/models/calendar.server.ts index 70521c5ee..29a9f2367 100644 --- a/app/db/models/calendar.server.ts +++ b/app/db/models/calendar.server.ts @@ -1,7 +1,9 @@ import { dateToDatabaseTimestamp } from "~/utils/dates"; +import { Unpacked } from "~/utils/types"; import { sql } from "../sql"; import type { CalendarEvent, CalendarEventDate, User } from "../types"; +// xxx: TODO: add tags const findAllBetweenTwoTimestampsStm = sql.prepare(` select "CalendarEvent"."name", @@ -12,7 +14,11 @@ const findAllBetweenTwoTimestampsStm = sql.prepare(` "CalendarEventDate"."startTime", "User"."discordName", "User"."discordDiscriminator", - "CalendarEventRanks"."nthAppearance" + "CalendarEventRanks"."nthAppearance", + exists (select 1 + from "CalendarEventBadge" + where "badgeId" = "CalendarEventDate"."eventId" + ) as "hasBadge" from "CalendarEvent" join "CalendarEventDate" on "CalendarEvent"."id" = "CalendarEventDate"."eventId" join "User" on "CalendarEvent"."authorId" = "User"."id" @@ -28,6 +34,17 @@ const findAllBetweenTwoTimestampsStm = sql.prepare(` order by "CalendarEventDate"."startTime" asc `); +function addTagArray< + T extends { hasBadge: number; tags?: CalendarEvent["tags"] } +>(arg: T) { + const { hasBadge, ...row } = arg; + const tags = (row.tags ? row.tags.split(",") : []) as Array<"BADGE_PRIZE">; + + if (hasBadge) tags.push("BADGE_PRIZE"); + + return { ...row, tags }; +} + export function findAllBetweenTwoTimestamps({ startTime, endTime, @@ -35,16 +52,18 @@ export function findAllBetweenTwoTimestamps({ startTime: Date; endTime: Date; }) { - return findAllBetweenTwoTimestampsStm.all({ + const rows = findAllBetweenTwoTimestampsStm.all({ startTime: dateToDatabaseTimestamp(startTime), endTime: dateToDatabaseTimestamp(endTime), }) as Array< - Pick & + Pick & Pick & Pick & { nthAppearance: number; - } + } & { hasBadge: number } >; + + return rows.map(addTagArray); } const findByIdStm = sql.prepare(` diff --git a/app/db/types.ts b/app/db/types.ts index 81da9bfd9..05fd84771 100644 --- a/app/db/types.ts +++ b/app/db/types.ts @@ -81,6 +81,7 @@ export interface CalendarEvent { id: number; name: string; authorId: number; + tags?: string; // xxx: TODO: add in migration description: string | null; discordUrl: string | null; bracketUrl: string | null; diff --git a/app/routes/calendar/index.tsx b/app/routes/calendar/index.tsx index 85d4e6efa..83eb7feb4 100644 --- a/app/routes/calendar/index.tsx +++ b/app/routes/calendar/index.tsx @@ -23,6 +23,7 @@ import { discordFullName, makeTitle } from "~/utils/strings"; import type { Unpacked } from "~/utils/types"; import { resolveBaseUrl } from "~/utils/urls"; import { actualNumber } from "~/utils/zod"; +import allTags from "./tags.json"; export const links: LinksFunction = () => { return [{ rel: "stylesheet", href: styles }]; @@ -288,16 +289,19 @@ function EventsList() { From {discordFullName(calendarEvent)} - -

- {calendarEvent.name}{" "} - {calendarEvent.nthAppearance > 1 ? ( - - Day {calendarEvent.nthAppearance} - - ) : null} -

- +
+ +

+ {calendarEvent.name}{" "} + {calendarEvent.nthAppearance > 1 ? ( + + Day {calendarEvent.nthAppearance} + + ) : null} +

+ + +
{calendarEvent.discordUrl || calendarEvent.bracketUrl ? (
{calendarEvent.discordUrl ? ( @@ -333,6 +337,25 @@ function EventsList() { ); } +function Tags({ + tags, +}: { + tags: Unpacked["events"]>["tags"]; +}) { + if (tags.length === 0) return null; + + // xxx: fix name + return ( +
    + {tags.map((tag) => ( +
  • + Badge prize +
  • + ))} +
+ ); +} + function eventsGroupedByDay( events: UseDataFunctionReturn["events"] ) { diff --git a/app/routes/calendar/tags.json b/app/routes/calendar/tags.json new file mode 100644 index 000000000..0aa36fcdd --- /dev/null +++ b/app/routes/calendar/tags.json @@ -0,0 +1,5 @@ +{ + "BADGE_PRIZE": { + "color": "#FDFD96" + } +} \ No newline at end of file diff --git a/app/styles/calendar.css b/app/styles/calendar.css index dde43f50d..57c9a30c6 100644 --- a/app/styles/calendar.css +++ b/app/styles/calendar.css @@ -128,6 +128,20 @@ margin-block: var(--s-1); } +.calendar__event__tags { + list-style: none; + padding: 0; + font-size: var(--fonts-xxs); + display: flex; + color: var(--button-text); + font-weight: var(--semi-bold); +} + +.calendar__event__tags > li { + padding-inline: var(--s-1-5); + border-radius: var(--rounded); +} + .calendar__event__day { color: var(--text-lighter); }