+
+
+ );
+ }
+
+ const hasPreviousAvatar = Boolean(baseEvent?.avatarImgId);
+
+ return (
+
+ 
+
+
+
+
+
+
+ {
+ const uploadedFile = e.target.files?.[0];
+ if (!uploadedFile) {
+ setAvatarImg(null);
+ return;
+ }
+
+ new Compressor(uploadedFile, {
+ width: CALENDAR_EVENT.AVATAR_SIZE,
+ height: CALENDAR_EVENT.AVATAR_SIZE,
+ maxHeight: CALENDAR_EVENT.AVATAR_SIZE,
+ maxWidth: CALENDAR_EVENT.AVATAR_SIZE,
+ resize: "cover",
+ success(result) {
+ invariant(result instanceof Blob);
+ const file = new File([result], `img.webp`, {
+ type: "image/webp",
+ });
+
+ setAvatarImg(file);
+ },
+ error(err) {
+ console.error(err.message);
+ },
+ });
+ }}
+ />
+ {avatarImg && (
+
+ Note that for non-patrons there is a validation process before avatar is
+ shown.
+
+ {hasPreviousAvatar && (
+
+ )}
+
+ );
+}
+
+function TournamentLogoColorInputsWithShowcase({
+ backgroundColor,
+ setBackgroundColor,
+ textColor,
+ setTextColor,
+ avatarUrl,
+}: {
+ backgroundColor: string;
+ setBackgroundColor: (color: string) => void;
+ textColor: string;
+ setTextColor: (color: string) => void;
+ avatarUrl: string;
+}) {
+ return (
+
+ })
+
+
+ )}
+
+
+ );
+}
+
function RankedToggle() {
const baseEvent = useBaseEvent();
const [isRanked, setIsRanked] = React.useState(
diff --git a/app/features/calendar/routes/calendar.tsx b/app/features/calendar/routes/calendar.tsx
index b83dc4cd4..8eee6e6b0 100644
--- a/app/features/calendar/routes/calendar.tsx
+++ b/app/features/calendar/routes/calendar.tsx
@@ -39,12 +39,12 @@ import {
navIconUrl,
resolveBaseUrl,
tournamentPage,
+ userSubmittedImage,
} from "~/utils/urls";
import { actualNumber } from "~/utils/zod";
import * as CalendarRepository from "../CalendarRepository.server";
import { canAddNewEvent } from "../calendar-utils";
import { Tags } from "../components/Tags";
-import { Image } from "~/components/Image";
import { Toggle } from "~/components/Toggle";
import { Label } from "~/components/Label";
import { currentSeason } from "~/features/mmr/season";
@@ -463,12 +463,17 @@ function EventsList({
+ 
+
+
+
+ Choose a combination that is easy to read
+
+
+ (otherwise will be excluded from front page promotion)
+
+
+
+ setBackgroundColor(e.target.value)}
+ />
+
+ setTextColor(e.target.value)}
+ />
+
+
{calendarEvent.tournamentId ? (
-
);
diff --git a/app/features/tournament/routes/to.$id.tsx b/app/features/tournament/routes/to.$id.tsx
index d12ca848a..f5b53c69e 100644
--- a/app/features/tournament/routes/to.$id.tsx
+++ b/app/features/tournament/routes/to.$id.tsx
@@ -30,7 +30,7 @@ import * as UserRepository from "~/features/user-page/UserRepository.server";
import * as TournamentRepository from "~/features/tournament/TournamentRepository.server";
import { databaseTimestampToDate } from "~/utils/dates";
import { isAdmin } from "~/permissions";
-import { tournamentPage } from "~/utils/urls";
+import { tournamentPage, userSubmittedImage } from "~/utils/urls";
import "../tournament.css";
import "~/styles/maps.css";
@@ -56,7 +56,7 @@ export const meta: MetaFunction = (args) => {
},
{
property: "og:image",
- content: HACKY_resolvePicture(data.tournament.ctx) + ".png",
+ content: HACKY_resolvePicture(data.tournament.ctx),
},
];
};
@@ -70,7 +70,9 @@ export const handle: SendouRouteHandle = {
return [
{
- imgPath: HACKY_resolvePicture(data.tournament.ctx),
+ imgPath: data.tournament.ctx.logoUrl
+ ? userSubmittedImage(data.tournament.ctx.logoUrl)
+ : HACKY_resolvePicture(data.tournament.ctx),
href: tournamentPage(data.tournament.ctx.id),
type: "IMAGE",
text: data.tournament.ctx.name,
diff --git a/app/features/tournament/tournament-utils.ts b/app/features/tournament/tournament-utils.ts
index 832a1caac..3bb70059e 100644
--- a/app/features/tournament/tournament-utils.ts
+++ b/app/features/tournament/tournament-utils.ts
@@ -50,6 +50,17 @@ export function isOneModeTournamentOf(
: null;
}
+export function tournamentRoundI18nKey(round: PlayedSet["round"]) {
+ if (round.round === "grand_finals") return `bracket.grand_finals`;
+ if (round.round === "bracket_reset") {
+ return `bracket.grand_finals.bracket_reset`;
+ }
+ if (round.round === "finals") return `bracket.${round.type}.finals` as const;
+
+ return `bracket.${round.type}` as const;
+}
+
+// legacy approach, new tournament should use the avatarImgId column in CalendarEvent
export function HACKY_resolvePicture(event: { name: string }) {
const normalizedEventName = event.name.toLowerCase();
@@ -172,136 +183,127 @@ export function HACKY_resolvePicture(event: { name: string }) {
return tournamentLogoUrl("default");
}
+// legacy approach, new tournament should use the avatarMetadata column in CalendarEvent
const BLACK = "#1e1e1e";
const WHITE = "#fffcfc";
export function HACKY_resolveThemeColors(event: { name: string }) {
const normalizedEventName = event.name.toLowerCase();
if (normalizedEventName.includes("sendouq")) {
- return { bg: "#1e1e1e", text: WHITE };
+ return { backgroundColor: "#1e1e1e", textColor: WHITE };
}
if (normalizedEventName.includes("paddling pool")) {
- return { bg: "#fff", text: BLACK };
+ return { backgroundColor: "#fff", textColor: BLACK };
}
if (normalizedEventName.includes("in the zone")) {
- return { bg: "#8b0000", text: WHITE };
+ return { backgroundColor: "#8b0000", textColor: WHITE };
}
if (normalizedEventName.includes("picnic")) {
- return { bg: "#e3fefe", text: BLACK };
+ return { backgroundColor: "#e3fefe", textColor: BLACK };
}
if (normalizedEventName.includes("proving grounds")) {
- return { bg: "#ffe809", text: BLACK };
+ return { backgroundColor: "#ffe809", textColor: BLACK };
}
if (normalizedEventName.includes("triton")) {
- return { bg: "#aee8ff", text: BLACK };
+ return { backgroundColor: "#aee8ff", textColor: BLACK };
}
if (normalizedEventName.includes("swim or sink")) {
- return { bg: "#d7f8ea", text: BLACK };
+ return { backgroundColor: "#d7f8ea", textColor: BLACK };
}
if (normalizedEventName.includes("from the ink up")) {
- return { bg: "#ffdfc6", text: BLACK };
+ return { backgroundColor: "#ffdfc6", textColor: BLACK };
}
if (normalizedEventName.includes("coral clash")) {
- return { bg: "#f0f4ff", text: BLACK };
+ return { backgroundColor: "#f0f4ff", textColor: BLACK };
}
if (normalizedEventName.includes("level up")) {
- return { bg: "#383232", text: WHITE };
+ return { backgroundColor: "#383232", textColor: WHITE };
}
if (normalizedEventName.includes("all 4 one")) {
- return { bg: "#2b262a", text: WHITE };
+ return { backgroundColor: "#2b262a", textColor: WHITE };
}
if (normalizedEventName.includes("fry basket")) {
- return { bg: "#fff", text: BLACK };
+ return { backgroundColor: "#fff", textColor: BLACK };
}
if (normalizedEventName.includes("the depths")) {
- return { bg: "#183e42", text: WHITE };
+ return { backgroundColor: "#183e42", textColor: WHITE };
}
if (normalizedEventName.includes("eclipse")) {
- return { bg: "#191919", text: WHITE };
+ return { backgroundColor: "#191919", textColor: WHITE };
}
if (normalizedEventName.includes("homecoming")) {
- return { bg: "#1c1c1c", text: WHITE };
+ return { backgroundColor: "#1c1c1c", textColor: WHITE };
}
if (normalizedEventName.includes("bad ideas")) {
- return { bg: "#000000", text: WHITE };
+ return { backgroundColor: "#000000", textColor: WHITE };
}
if (normalizedEventName.includes("tenoch")) {
- return { bg: "#425969", text: WHITE };
+ return { backgroundColor: "#425969", textColor: WHITE };
}
if (normalizedEventName.includes("megalodon monday")) {
- return { bg: "#288eb5", text: WHITE };
+ return { backgroundColor: "#288eb5", textColor: WHITE };
}
if (normalizedEventName.includes("heaven 2 ocean")) {
- return { bg: "#8cf1ff", text: BLACK };
+ return { backgroundColor: "#8cf1ff", textColor: BLACK };
}
if (normalizedEventName.includes("kraken royale")) {
- return { bg: "#32333a", text: WHITE };
+ return { backgroundColor: "#32333a", textColor: WHITE };
}
if (normalizedEventName.includes("menu royale")) {
- return { bg: "#000", text: WHITE };
+ return { backgroundColor: "#000", textColor: WHITE };
}
if (normalizedEventName.includes("barracuda co")) {
- return { bg: "#47b6fe", text: BLACK };
+ return { backgroundColor: "#47b6fe", textColor: BLACK };
}
if (normalizedEventName.includes("crimson ink")) {
- return { bg: "#000000", text: WHITE };
+ return { backgroundColor: "#000000", textColor: WHITE };
}
if (normalizedEventName.includes("mesozoic mayhem")) {
- return { bg: "#ccd5da", text: BLACK };
+ return { backgroundColor: "#ccd5da", textColor: BLACK };
}
if (normalizedEventName.includes("rain or shine")) {
- return { bg: "#201c3b", text: WHITE };
+ return { backgroundColor: "#201c3b", textColor: WHITE };
}
if (normalizedEventName.includes("squid junction")) {
- return { bg: "#fed09f", text: BLACK };
+ return { backgroundColor: "#fed09f", textColor: BLACK };
}
if (normalizedEventName.includes("silly sausage")) {
- return { bg: "#ffd76f", text: BLACK };
+ return { backgroundColor: "#ffd76f", textColor: BLACK };
}
if (normalizedEventName.includes("united-lan")) {
- return { bg: "#fff", text: BLACK };
+ return { backgroundColor: "#fff", textColor: BLACK };
}
if (normalizedEventName.includes("soul cup")) {
- return { bg: "#101011", text: WHITE };
+ return { backgroundColor: "#101011", textColor: WHITE };
}
- return { bg: "#3430ad", text: WHITE };
-}
-
-export function tournamentRoundI18nKey(round: PlayedSet["round"]) {
- if (round.round === "grand_finals") return `bracket.grand_finals`;
- if (round.round === "bracket_reset") {
- return `bracket.grand_finals.bracket_reset`;
- }
- if (round.round === "finals") return `bracket.${round.type}.finals` as const;
-
- return `bracket.${round.type}` as const;
+ return { backgroundColor: "#3430ad", textColor: WHITE };
}
diff --git a/app/styles/calendar-new.css b/app/styles/calendar-new.css
index 204788f87..7f87c2f4e 100644
--- a/app/styles/calendar-new.css
+++ b/app/styles/calendar-new.css
@@ -22,3 +22,22 @@
.calendar-new__range-input {
width: 4.25rem;
}
+
+.calendar-new__avatar-preview {
+ width: 124px;
+ height: 124px;
+ border-radius: 100%;
+}
+
+.calendar-new__avatar-preview__small {
+ width: 32px;
+ height: 32px;
+ border-radius: 100%;
+}
+
+.calendar-new__showcase-preview {
+ border-radius: var(--rounded);
+ padding: var(--s-4);
+ font-size: var(--fonts-sm);
+ font-weight: var(--semi-bold);
+}
diff --git a/app/utils/remix.ts b/app/utils/remix.ts
index 067be1d36..efb91ec7c 100644
--- a/app/utils/remix.ts
+++ b/app/utils/remix.ts
@@ -90,16 +90,22 @@ export async function parseRequestFormData
-
) : (
-
)}
diff --git a/app/features/tournament/routes/to.$id.register.tsx b/app/features/tournament/routes/to.$id.register.tsx
index 13df6f069..5cf5f8e81 100644
--- a/app/features/tournament/routes/to.$id.register.tsx
+++ b/app/features/tournament/routes/to.$id.register.tsx
@@ -281,20 +281,27 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
};
export default function TournamentRegisterPage() {
+ const user = useUser();
const isMounted = useIsMounted();
const { i18n } = useTranslation();
const tournament = useTournament();
const startsAtEvenHour = tournament.ctx.startTime.getMinutes() === 0;
+ const showAvatarPendingApprovalText =
+ !tournament.ctx.logoUrl &&
+ tournament.ctx.avatarImgId &&
+ tournament.isOrganizer(user);
+
return (
-
{tournament.ctx.name}
@@ -334,6 +341,12 @@ export default function TournamentRegisterPage() {
+ Tournament logo pending moderator review. Will be shown automatically
+ once approved.
+
+ ) : null}