diff --git a/app/components/CustomThemeSelector.tsx b/app/components/CustomThemeSelector.tsx index a26940b25..b34924d0b 100644 --- a/app/components/CustomThemeSelector.tsx +++ b/app/components/CustomThemeSelector.tsx @@ -54,6 +54,15 @@ const COLOR_SLIDERS = [ labelKey: "accentChroma", isHue: false, }, + { + id: "chat-hue", + inputKey: "chatHue", + min: THEME_INPUT_LIMITS.BASE_HUE_MIN, + max: THEME_INPUT_LIMITS.BASE_HUE_MAX, + step: 1, + labelKey: "chatHue", + isHue: true, + }, ] as const; const RADIUS_SLIDERS = [ @@ -132,6 +141,7 @@ export const DEFAULT_THEME_INPUT: ThemeInput = { baseChroma: 0.012, accentHue: 270, accentChroma: 0.24, + chatHue: 0, radiusBox: 3, radiusField: 2, radiusSelector: 2, @@ -153,6 +163,7 @@ export function themeInputFromCustomTheme( accentChroma: (customTheme["--_acc-c-1"] ?? 0) / ACCENT_CHROMA_MULTIPLIERS[1] || DEFAULT_THEME_INPUT.accentChroma, + chatHue: customTheme["--_chat-h"] ?? DEFAULT_THEME_INPUT.chatHue, radiusBox: customTheme["--_radius-box"] ?? DEFAULT_THEME_INPUT.radiusBox, radiusField: customTheme["--_radius-field"] ?? DEFAULT_THEME_INPUT.radiusField, diff --git a/app/db/tables.ts b/app/db/tables.ts index 7131e27dd..427290c88 100644 --- a/app/db/tables.ts +++ b/app/db/tables.ts @@ -60,6 +60,7 @@ export const CUSTOM_THEME_VARS = [ "--_second-c-3", "--_second-c-4", "--_second-c-5", + "--_chat-h", "--_radius-box", "--_radius-field", "--_radius-selector", diff --git a/app/features/chat/chat-types.ts b/app/features/chat/chat-types.ts index 1c2a4c976..67361a101 100644 --- a/app/features/chat/chat-types.ts +++ b/app/features/chat/chat-types.ts @@ -32,7 +32,7 @@ export type ChatUser = Pick< Tables["User"], "username" | "discordId" | "discordAvatar" | "pronouns" > & { - chatNameColor: string | null; + chatNameHue: string | null; title?: string; }; diff --git a/app/features/chat/components/Chat.module.css b/app/features/chat/components/Chat.module.css index 951eab235..e475d56ea 100644 --- a/app/features/chat/components/Chat.module.css +++ b/app/features/chat/components/Chat.module.css @@ -63,7 +63,7 @@ .messageUser { font-weight: var(--weight-semi); font-size: var(--font-sm); - color: var(--chat-user-color); + color: oklch(from var(--color-accent) l c var(--chat-hue)); max-width: 110px; overflow: hidden; text-overflow: ellipsis; diff --git a/app/features/chat/components/Chat.tsx b/app/features/chat/components/Chat.tsx index 87923d0a2..4230a328c 100644 --- a/app/features/chat/components/Chat.tsx +++ b/app/features/chat/components/Chat.tsx @@ -238,9 +238,7 @@ function Message({
{user?.username ?? missingUserName} diff --git a/app/features/sendouq-match/SQMatchRepository.server.ts b/app/features/sendouq-match/SQMatchRepository.server.ts index 76f20ac9b..4714f9e4e 100644 --- a/app/features/sendouq-match/SQMatchRepository.server.ts +++ b/app/features/sendouq-match/SQMatchRepository.server.ts @@ -15,7 +15,7 @@ import { COMMON_USER_FIELDS, concatUserSubmittedImagePrefix, tournamentLogoWithDefault, - userChatNameColor, + userChatNameHue, } from "~/utils/kysely.server"; import type { Unpacked } from "~/utils/types"; import { FULL_GROUP_SIZE } from "../sendouq/q-constants"; @@ -130,7 +130,7 @@ function groupWithTeamAndMembers( .orderBy("UserFriendCode.createdAt", "desc") .limit(1) .as("friendCode"), - userChatNameColor, + userChatNameHue, ]) .whereRef("GroupMember.groupId", "=", groupIdRef) .orderBy("GroupMember.userId", "asc"), diff --git a/app/features/sendouq/SQGroupRepository.server.ts b/app/features/sendouq/SQGroupRepository.server.ts index 9677f0852..9ebf3b702 100644 --- a/app/features/sendouq/SQGroupRepository.server.ts +++ b/app/features/sendouq/SQGroupRepository.server.ts @@ -8,7 +8,7 @@ import { shortNanoid } from "~/utils/id"; import invariant from "~/utils/invariant"; import { COMMON_USER_FIELDS, - userChatNameColorForJson, + userChatNameHueForJson, } from "~/utils/kysely.server"; import { errorIsSqliteForeignKeyConstraintFailure } from "~/utils/sql"; import { userIsBanned } from "../ban/core/banned.server"; @@ -41,7 +41,7 @@ export async function findCurrentGroups() { role: Tables["GroupMember"]["role"]; note: Tables["GroupMember"]["note"]; weapons: Tables["User"]["qWeaponPool"]; - chatNameColor: string | null; + chatNameHue: string | null; plusTier: Tables["PlusTier"]["tier"] | null; }; @@ -83,7 +83,7 @@ export async function findCurrentGroups() { languages: eb.ref("User.languages"), plusTier: eb.ref("PlusTier.tier"), vc: eb.ref("User.vc"), - chatNameColor: userChatNameColorForJson, + chatNameHue: userChatNameHueForJson, }), ]) .$castTo() diff --git a/app/features/sendouq/components/GroupCard.browser.test.tsx b/app/features/sendouq/components/GroupCard.browser.test.tsx index 84f1ec0bb..5e56e0055 100644 --- a/app/features/sendouq/components/GroupCard.browser.test.tsx +++ b/app/features/sendouq/components/GroupCard.browser.test.tsx @@ -36,7 +36,7 @@ function createMember(overrides: Partial = {}): SQGroupMember { pronouns: null, skillDifference: undefined, noScreen: undefined, - chatNameColor: null, + chatNameHue: null, mapModePreferences: undefined, ...overrides, }; @@ -89,7 +89,7 @@ function createOwnGroupMember( pronouns: null, skillDifference: undefined, noScreen: undefined, - chatNameColor: null, + chatNameHue: null, mapModePreferences: undefined, ...overrides, } satisfies OwnGroupMember; diff --git a/app/features/tournament-bracket/core/tests/mocks-li.ts b/app/features/tournament-bracket/core/tests/mocks-li.ts index 36f9d5997..a9437e435 100644 --- a/app/features/tournament-bracket/core/tests/mocks-li.ts +++ b/app/features/tournament-bracket/core/tests/mocks-li.ts @@ -6936,7 +6936,7 @@ export const LOW_INK_DECEMBER_2024 = (): TournamentData => ({ discordId: "260999523806085120", discordAvatar: "4f15f20946fbd992ee9d694a539e6317", customUrl: "elemental", - chatNameColor: null, + chatNameHue: null, }, { userId: 622, @@ -6947,7 +6947,7 @@ export const LOW_INK_DECEMBER_2024 = (): TournamentData => ({ discordId: "201922904781357057", discordAvatar: "7fa46b7dc27fa589d3d278ba4b60224f", customUrl: "dotjpg", - chatNameColor: null, + chatNameHue: null, }, { userId: 680, @@ -6958,7 +6958,7 @@ export const LOW_INK_DECEMBER_2024 = (): TournamentData => ({ discordId: "87494390724964352", discordAvatar: "3b82ee3101ba39120b6a65c042a04a37", customUrl: "inkfarer", - chatNameColor: null, + chatNameHue: null, }, { userId: 936, @@ -6969,7 +6969,7 @@ export const LOW_INK_DECEMBER_2024 = (): TournamentData => ({ discordId: "119620026767507456", discordAvatar: "aa1ff5b8eefd5a26657c411138a160b8", customUrl: null, - chatNameColor: null, + chatNameHue: null, }, { userId: 1402, @@ -6980,7 +6980,7 @@ export const LOW_INK_DECEMBER_2024 = (): TournamentData => ({ discordId: "216335108037148673", discordAvatar: "458f1e233a3b590a62f6b867b95a6241", customUrl: "grace", - chatNameColor: null, + chatNameHue: null, }, { userId: 1755, @@ -6991,7 +6991,7 @@ export const LOW_INK_DECEMBER_2024 = (): TournamentData => ({ discordId: "200777324520538113", discordAvatar: "a_d71ac2f474ce422ce711e8e74d657b2f", customUrl: "brushstrokes", - chatNameColor: null, + chatNameHue: null, }, { userId: 2908, @@ -7002,7 +7002,7 @@ export const LOW_INK_DECEMBER_2024 = (): TournamentData => ({ discordId: "112254088992792576", discordAvatar: "711e8d48f316687faa4fdb41ab9298f0", customUrl: "kitsunekeira", - chatNameColor: null, + chatNameHue: null, }, { userId: 3742, @@ -7013,7 +7013,7 @@ export const LOW_INK_DECEMBER_2024 = (): TournamentData => ({ discordId: "124007565758693376", discordAvatar: "ca9e37c9b31dfa39f88b2a2da2d4af21", customUrl: "thoma", - chatNameColor: "#bde5ff", + chatNameHue: "40", }, { userId: 3806, @@ -7024,7 +7024,7 @@ export const LOW_INK_DECEMBER_2024 = (): TournamentData => ({ discordId: "113026708071821312", discordAvatar: "4b3f0da55a834acc0beb258edd9c7e34", customUrl: null, - chatNameColor: null, + chatNameHue: null, }, { userId: 4941, @@ -7035,7 +7035,7 @@ export const LOW_INK_DECEMBER_2024 = (): TournamentData => ({ discordId: "236292964052107264", discordAvatar: "c95b9a8cfb9164f3a66267a5e8cfe8b1", customUrl: "hoeenhero", - chatNameColor: null, + chatNameHue: null, }, { userId: 5036, @@ -7046,7 +7046,7 @@ export const LOW_INK_DECEMBER_2024 = (): TournamentData => ({ discordId: "248232091005747201", discordAvatar: "40a21a204f8fae6ae2e7e8c5de70de83", customUrl: "toasty", - chatNameColor: null, + chatNameHue: null, }, { userId: 8098, @@ -7057,7 +7057,7 @@ export const LOW_INK_DECEMBER_2024 = (): TournamentData => ({ discordId: "442431978269310987", discordAvatar: "e0fd0fed98a4d3c3bfd56332678d4e6c", customUrl: "popgun", - chatNameColor: null, + chatNameHue: null, }, { userId: 8750, @@ -7068,7 +7068,7 @@ export const LOW_INK_DECEMBER_2024 = (): TournamentData => ({ discordId: "273188925189914628", discordAvatar: "c62afa020e24ead92cc043ffa809ffdc", customUrl: "liberowolf", - chatNameColor: null, + chatNameHue: null, }, { userId: 9222, @@ -7079,7 +7079,7 @@ export const LOW_INK_DECEMBER_2024 = (): TournamentData => ({ discordId: "298241282550267906", discordAvatar: "f69bb5af745eca4e9b7f55504c641f78", customUrl: "jardonian", - chatNameColor: null, + chatNameHue: null, }, { userId: 9719, @@ -7090,7 +7090,7 @@ export const LOW_INK_DECEMBER_2024 = (): TournamentData => ({ discordId: "184478601171828737", discordAvatar: "75dedb3527b73d9571151f0a00d1c365", customUrl: "scepidilionz", - chatNameColor: "#00fa2a", + chatNameHue: "180", }, { userId: 18720, @@ -7101,7 +7101,7 @@ export const LOW_INK_DECEMBER_2024 = (): TournamentData => ({ discordId: "103988435785650176", discordAvatar: "df9936bea9dcbd250daf8e2ef2d7c04a", customUrl: "tulip", - chatNameColor: null, + chatNameHue: null, }, ], }, @@ -7113,7 +7113,7 @@ export const LOW_INK_DECEMBER_2024 = (): TournamentData => ({ discordId: "236292964052107264", discordAvatar: "c95b9a8cfb9164f3a66267a5e8cfe8b1", customUrl: "hoeenhero", - chatNameColor: null, + chatNameHue: null, }, staff: [ { @@ -7123,7 +7123,7 @@ export const LOW_INK_DECEMBER_2024 = (): TournamentData => ({ discordId: "260999523806085120", discordAvatar: "4f15f20946fbd992ee9d694a539e6317", customUrl: "elemental", - chatNameColor: null, + chatNameHue: null, role: "ORGANIZER", }, { @@ -7133,7 +7133,7 @@ export const LOW_INK_DECEMBER_2024 = (): TournamentData => ({ discordId: "176095582534762496", discordAvatar: "89e15b6e74f5abdef1183c9416434dde", customUrl: "pock", - chatNameColor: "#165bfc", + chatNameHue: "220", role: "ORGANIZER", }, { @@ -7143,7 +7143,7 @@ export const LOW_INK_DECEMBER_2024 = (): TournamentData => ({ discordId: "87494390724964352", discordAvatar: "3b82ee3101ba39120b6a65c042a04a37", customUrl: "inkfarer", - chatNameColor: null, + chatNameHue: null, role: "STREAMER", }, { @@ -7153,7 +7153,7 @@ export const LOW_INK_DECEMBER_2024 = (): TournamentData => ({ discordId: "334504066405367808", discordAvatar: "0d31f0d52ebfeaa0216fcacb86eb140a", customUrl: "shads", - chatNameColor: null, + chatNameHue: null, role: "ORGANIZER", }, { @@ -7163,7 +7163,7 @@ export const LOW_INK_DECEMBER_2024 = (): TournamentData => ({ discordId: "112254088992792576", discordAvatar: "711e8d48f316687faa4fdb41ab9298f0", customUrl: "kitsunekeira", - chatNameColor: null, + chatNameHue: null, role: "ORGANIZER", }, { @@ -7173,7 +7173,7 @@ export const LOW_INK_DECEMBER_2024 = (): TournamentData => ({ discordId: "412316772637736981", discordAvatar: "1408d204fa8a128efd2d2625476468c2", customUrl: null, - chatNameColor: null, + chatNameHue: null, role: "ORGANIZER", }, { @@ -7183,7 +7183,7 @@ export const LOW_INK_DECEMBER_2024 = (): TournamentData => ({ discordId: "578038263433134080", discordAvatar: "f552df977e0165e7fb93d1ce2a7512d4", customUrl: "bars", - chatNameColor: null, + chatNameHue: null, role: "ORGANIZER", }, { @@ -7193,7 +7193,7 @@ export const LOW_INK_DECEMBER_2024 = (): TournamentData => ({ discordId: "230161540299489280", discordAvatar: "a_3ca2a0737b2c1e2b5e82ddc98fe79c8b", customUrl: "bowen", - chatNameColor: null, + chatNameHue: null, role: "ORGANIZER", }, { @@ -7203,7 +7203,7 @@ export const LOW_INK_DECEMBER_2024 = (): TournamentData => ({ discordId: "678892046534311936", discordAvatar: "11490e6c0ace327ebc32a117b9e0510c", customUrl: "toes", - chatNameColor: null, + chatNameHue: null, role: "ORGANIZER", }, { @@ -7213,7 +7213,7 @@ export const LOW_INK_DECEMBER_2024 = (): TournamentData => ({ discordId: "512418782933811221", discordAvatar: "c3afd465b53dedbb97fb9dd504d01305", customUrl: "neato", - chatNameColor: null, + chatNameHue: null, role: "ORGANIZER", }, { @@ -7223,7 +7223,7 @@ export const LOW_INK_DECEMBER_2024 = (): TournamentData => ({ discordId: "182994907907096585", discordAvatar: "31da63dcb6dd1dbe4c3f135c105f07e7", customUrl: "strings", - chatNameColor: "#3f88fd", + chatNameHue: "220", role: "ORGANIZER", }, { @@ -7233,7 +7233,7 @@ export const LOW_INK_DECEMBER_2024 = (): TournamentData => ({ discordId: "725416982681223259", discordAvatar: "cb9bf51b05f22c763a2b4812bdd574cc", customUrl: "michi", - chatNameColor: null, + chatNameHue: null, role: "ORGANIZER", }, { @@ -7243,7 +7243,7 @@ export const LOW_INK_DECEMBER_2024 = (): TournamentData => ({ discordId: "367803257717784599", discordAvatar: "b8ad30de9487a9699093b728098e01d0", customUrl: "glumbaron", - chatNameColor: null, + chatNameHue: null, role: "ORGANIZER", }, { @@ -7253,7 +7253,7 @@ export const LOW_INK_DECEMBER_2024 = (): TournamentData => ({ discordId: "1058063829973618698", discordAvatar: "dc110c2d77ea84e470c87a18ac0b7e5d", customUrl: "lemon7890", - chatNameColor: null, + chatNameHue: null, role: "ORGANIZER", }, { @@ -7263,7 +7263,7 @@ export const LOW_INK_DECEMBER_2024 = (): TournamentData => ({ discordId: "1132918323697418310", discordAvatar: "48089383c5d666ae7ef8417d205bfa1f", customUrl: "eemeee", - chatNameColor: null, + chatNameHue: null, role: "ORGANIZER", }, { @@ -7273,7 +7273,7 @@ export const LOW_INK_DECEMBER_2024 = (): TournamentData => ({ discordId: "689577992430944281", discordAvatar: "911c0ac66f9489406ea4ae970e7ed5b0", customUrl: "pin-eye", - chatNameColor: null, + chatNameHue: null, role: "ORGANIZER", }, ], diff --git a/app/features/tournament-bracket/core/tests/mocks-sos.ts b/app/features/tournament-bracket/core/tests/mocks-sos.ts index 7397010e9..b761f2816 100644 --- a/app/features/tournament-bracket/core/tests/mocks-sos.ts +++ b/app/features/tournament-bracket/core/tests/mocks-sos.ts @@ -2039,7 +2039,7 @@ export const SWIM_OR_SINK_167 = ( discordId: "260999523806085120", discordAvatar: "a_71a6a4b4f76bd79bc9d7743e322a879d", customUrl: "elemental", - chatNameColor: null, + chatNameHue: null, }, { userId: 622, @@ -2050,7 +2050,7 @@ export const SWIM_OR_SINK_167 = ( discordId: "201922904781357057", discordAvatar: "7fa46b7dc27fa589d3d278ba4b60224f", customUrl: "dotjpg", - chatNameColor: null, + chatNameHue: null, }, { userId: 680, @@ -2061,7 +2061,7 @@ export const SWIM_OR_SINK_167 = ( discordId: "87494390724964352", discordAvatar: "3b82ee3101ba39120b6a65c042a04a37", customUrl: "inkfarer", - chatNameColor: null, + chatNameHue: null, }, { userId: 936, @@ -2072,7 +2072,7 @@ export const SWIM_OR_SINK_167 = ( discordId: "119620026767507456", discordAvatar: "aa1ff5b8eefd5a26657c411138a160b8", customUrl: null, - chatNameColor: null, + chatNameHue: null, }, { userId: 1402, @@ -2083,7 +2083,7 @@ export const SWIM_OR_SINK_167 = ( discordId: "216335108037148673", discordAvatar: "458f1e233a3b590a62f6b867b95a6241", customUrl: "grace", - chatNameColor: null, + chatNameHue: null, }, { userId: 1755, @@ -2094,7 +2094,7 @@ export const SWIM_OR_SINK_167 = ( discordId: "200777324520538113", discordAvatar: "a_d71ac2f474ce422ce711e8e74d657b2f", customUrl: "brushstrokes", - chatNameColor: null, + chatNameHue: null, }, { userId: 2908, @@ -2105,7 +2105,7 @@ export const SWIM_OR_SINK_167 = ( discordId: "112254088992792576", discordAvatar: "711e8d48f316687faa4fdb41ab9298f0", customUrl: "kitsunekeira", - chatNameColor: null, + chatNameHue: null, }, { userId: 3742, @@ -2116,7 +2116,7 @@ export const SWIM_OR_SINK_167 = ( discordId: "124007565758693376", discordAvatar: "702429723f31a57326f87d11063139f7", customUrl: "thoma", - chatNameColor: "#bde5ff", + chatNameHue: "180", }, { userId: 3806, @@ -2127,7 +2127,7 @@ export const SWIM_OR_SINK_167 = ( discordId: "113026708071821312", discordAvatar: "4b3f0da55a834acc0beb258edd9c7e34", customUrl: null, - chatNameColor: null, + chatNameHue: null, }, { userId: 4941, @@ -2138,7 +2138,7 @@ export const SWIM_OR_SINK_167 = ( discordId: "236292964052107264", discordAvatar: "c95b9a8cfb9164f3a66267a5e8cfe8b1", customUrl: "hoeenhero", - chatNameColor: null, + chatNameHue: null, }, { userId: 5036, @@ -2149,7 +2149,7 @@ export const SWIM_OR_SINK_167 = ( discordId: "248232091005747201", discordAvatar: "40a21a204f8fae6ae2e7e8c5de70de83", customUrl: "toasty", - chatNameColor: null, + chatNameHue: null, }, { userId: 8098, @@ -2160,7 +2160,7 @@ export const SWIM_OR_SINK_167 = ( discordId: "442431978269310987", discordAvatar: "e0fd0fed98a4d3c3bfd56332678d4e6c", customUrl: "popgun", - chatNameColor: null, + chatNameHue: null, }, { userId: 8750, @@ -2171,7 +2171,7 @@ export const SWIM_OR_SINK_167 = ( discordId: "273188925189914628", discordAvatar: "c62afa020e24ead92cc043ffa809ffdc", customUrl: "liberowolf", - chatNameColor: null, + chatNameHue: null, }, { userId: 9222, @@ -2182,7 +2182,7 @@ export const SWIM_OR_SINK_167 = ( discordId: "298241282550267906", discordAvatar: "f69bb5af745eca4e9b7f55504c641f78", customUrl: "jardonian", - chatNameColor: null, + chatNameHue: null, }, { userId: 9719, @@ -2193,7 +2193,7 @@ export const SWIM_OR_SINK_167 = ( discordId: "184478601171828737", discordAvatar: "75dedb3527b73d9571151f0a00d1c365", customUrl: "scepidilionz", - chatNameColor: "#00fa2a", + chatNameHue: "120", }, { userId: 18720, @@ -2204,7 +2204,7 @@ export const SWIM_OR_SINK_167 = ( discordId: "103988435785650176", discordAvatar: "5fef4bf0c1b8a6a76fe2f43b956bfc3d", customUrl: "tulip", - chatNameColor: null, + chatNameHue: null, }, ], }, @@ -2216,7 +2216,7 @@ export const SWIM_OR_SINK_167 = ( discordId: "216335108037148673", discordAvatar: "458f1e233a3b590a62f6b867b95a6241", customUrl: "grace", - chatNameColor: null, + chatNameHue: null, }, staff: [ { @@ -2226,7 +2226,7 @@ export const SWIM_OR_SINK_167 = ( discordId: "333766288969302018", discordAvatar: "42d40d5ae6ff7081ae57bc02b6e2f717", customUrl: null, - chatNameColor: null, + chatNameHue: null, role: "ORGANIZER", }, { @@ -2236,7 +2236,7 @@ export const SWIM_OR_SINK_167 = ( discordId: "260999523806085120", discordAvatar: "a_71a6a4b4f76bd79bc9d7743e322a879d", customUrl: "elemental", - chatNameColor: null, + chatNameHue: null, role: "ORGANIZER", }, { @@ -2246,7 +2246,7 @@ export const SWIM_OR_SINK_167 = ( discordId: "468596581357060097", discordAvatar: "940589e5c6793a5cbbab2adebd84fe0b", customUrl: null, - chatNameColor: "#ff6a00", + chatNameHue: "30", role: "ORGANIZER", }, { @@ -2256,7 +2256,7 @@ export const SWIM_OR_SINK_167 = ( discordId: "418176537561661441", discordAvatar: "bab3e7a9cdb2071de7f2ae29256fc83b", customUrl: null, - chatNameColor: null, + chatNameHue: null, role: "ORGANIZER", }, { @@ -2266,7 +2266,7 @@ export const SWIM_OR_SINK_167 = ( discordId: "302160815132246016", discordAvatar: "da7cfcd1a5b8bee37cfa5d308b0898eb", customUrl: "mashimashi", - chatNameColor: null, + chatNameHue: null, role: "ORGANIZER", }, { @@ -2276,7 +2276,7 @@ export const SWIM_OR_SINK_167 = ( discordId: "183025242266927104", discordAvatar: "a9475b488962953152c60f4f138b1618", customUrl: "tux", - chatNameColor: null, + chatNameHue: null, role: "ORGANIZER", }, { @@ -2286,7 +2286,7 @@ export const SWIM_OR_SINK_167 = ( discordId: "343219263655510021", discordAvatar: "f30c675fc07203ca112d93fd03b5cc96", customUrl: "tbob408", - chatNameColor: "#3ac200", + chatNameHue: "120", role: "ORGANIZER", }, { @@ -2296,7 +2296,7 @@ export const SWIM_OR_SINK_167 = ( discordId: "390444783425945602", discordAvatar: "e821ac7a457033d6c990bcaf518287e5", customUrl: null, - chatNameColor: null, + chatNameHue: null, role: "STREAMER", }, { @@ -2306,7 +2306,7 @@ export const SWIM_OR_SINK_167 = ( discordId: "422790410566500352", discordAvatar: "77b479e49ec0d09edb8f9b975bff04ce", customUrl: "reefsixes", - chatNameColor: null, + chatNameHue: null, role: "ORGANIZER", }, { @@ -2316,7 +2316,7 @@ export const SWIM_OR_SINK_167 = ( discordId: "360259023389327361", discordAvatar: "c5a2506e46e135b2568ef48242f669e8", customUrl: "kloud", - chatNameColor: null, + chatNameHue: null, role: "ORGANIZER", }, { @@ -2326,7 +2326,7 @@ export const SWIM_OR_SINK_167 = ( discordId: "247504664378081280", discordAvatar: "a_a60bcc9c76d4baa9814287fdc5c28fe9", customUrl: "pipedreamdx", - chatNameColor: null, + chatNameHue: null, role: "STREAMER", }, { @@ -2336,7 +2336,7 @@ export const SWIM_OR_SINK_167 = ( discordId: "184478601171828737", discordAvatar: "75dedb3527b73d9571151f0a00d1c365", customUrl: "scepidilionz", - chatNameColor: "#00fa2a", + chatNameHue: "120", role: "ORGANIZER", }, { @@ -2346,7 +2346,7 @@ export const SWIM_OR_SINK_167 = ( discordId: "565712290020589569", discordAvatar: "498b21d6f64dcd56d06e61c2ec39e571", customUrl: "rooster", - chatNameColor: null, + chatNameHue: null, role: "ORGANIZER", }, { @@ -2356,7 +2356,7 @@ export const SWIM_OR_SINK_167 = ( discordId: "103988435785650176", discordAvatar: "5fef4bf0c1b8a6a76fe2f43b956bfc3d", customUrl: "tulip", - chatNameColor: null, + chatNameHue: null, role: "ORGANIZER", }, { @@ -2366,7 +2366,7 @@ export const SWIM_OR_SINK_167 = ( discordId: "221418644297482250", discordAvatar: "6b7156dcd0582ee160564bfa0c5cdc0e", customUrl: "fusionboltzgx", - chatNameColor: "#6d8283", + chatNameHue: "180", role: "ORGANIZER", }, { @@ -2376,7 +2376,7 @@ export const SWIM_OR_SINK_167 = ( discordId: "458714559855722497", discordAvatar: "b815bb6090c2b32fec23f1336fae5663", customUrl: null, - chatNameColor: null, + chatNameHue: null, role: "ORGANIZER", }, { @@ -2386,7 +2386,7 @@ export const SWIM_OR_SINK_167 = ( discordId: "599633578648928307", discordAvatar: "f5139304fb364bca35634a8e5cd11c0f", customUrl: "phantom_spl", - chatNameColor: null, + chatNameHue: null, role: "ORGANIZER", }, ], diff --git a/app/features/tournament-bracket/core/tests/mocks-zones-weekly.ts b/app/features/tournament-bracket/core/tests/mocks-zones-weekly.ts index 1ee611b7f..d13ba51a9 100644 --- a/app/features/tournament-bracket/core/tests/mocks-zones-weekly.ts +++ b/app/features/tournament-bracket/core/tests/mocks-zones-weekly.ts @@ -338,7 +338,7 @@ export const ZONES_WEEKLY_38 = (): TournamentData => ({ discordId: "308483655515373570", discordAvatar: "a5fff2b4706d99364e646cab28c8085b", customUrl: "puma", - chatNameColor: null, + chatNameHue: null, }, staff: [ { @@ -348,7 +348,7 @@ export const ZONES_WEEKLY_38 = (): TournamentData => ({ discordId: "395757059922198548", discordAvatar: "2a569302e9545c6a07f8f8aa337d139d", customUrl: "penis", - chatNameColor: null, + chatNameHue: null, role: "ORGANIZER", }, { @@ -358,7 +358,7 @@ export const ZONES_WEEKLY_38 = (): TournamentData => ({ discordId: "267963609924108288", discordAvatar: "85090cfe2e0da693355bcec9740c1eaa", customUrl: "cookie", - chatNameColor: null, + chatNameHue: null, role: "ORGANIZER", }, { @@ -368,7 +368,7 @@ export const ZONES_WEEKLY_38 = (): TournamentData => ({ discordId: "507102073427460098", discordAvatar: "bd634c91f7d0475f3671956fa9a2110a", customUrl: null, - chatNameColor: null, + chatNameHue: null, role: "ORGANIZER", }, { @@ -378,7 +378,7 @@ export const ZONES_WEEKLY_38 = (): TournamentData => ({ discordId: "111682034056835072", discordAvatar: "f1191c94b1da5396a06b620408017c1f", customUrl: "weizihao", - chatNameColor: null, + chatNameHue: null, role: "ORGANIZER", }, ], diff --git a/app/features/tournament-bracket/core/tests/mocks.ts b/app/features/tournament-bracket/core/tests/mocks.ts index 5564cb1ff..9ff42f3b2 100644 --- a/app/features/tournament-bracket/core/tests/mocks.ts +++ b/app/features/tournament-bracket/core/tests/mocks.ts @@ -1469,7 +1469,7 @@ export const PADDLING_POOL_257 = () => discordId: "163771047068303360", discordAvatar: "b33d8f230218d6a92705a63fdf803851", customUrl: "alicetheto", - chatNameColor: "#ff0000", + chatNameHue: "180", }, staff: [ { @@ -1479,7 +1479,7 @@ export const PADDLING_POOL_257 = () => discordId: "178489224192851969", discordAvatar: "8b8c1d85cc525ea366f3ce2a6a594c05", customUrl: "pinky", - chatNameColor: null, + chatNameHue: null, role: "ORGANIZER", }, { @@ -1489,7 +1489,7 @@ export const PADDLING_POOL_257 = () => discordId: "275213752025088000", discordAvatar: "25bf68c5aa4e622ceb5a241c34841c6d", customUrl: null, - chatNameColor: null, + chatNameHue: null, role: "ORGANIZER", }, { @@ -1499,7 +1499,7 @@ export const PADDLING_POOL_257 = () => discordId: "195618756800675841", discordAvatar: "a_03ec4bbcb2a4ab000237c9f3e9e71508", customUrl: "sdomi19", - chatNameColor: null, + chatNameHue: null, role: "ORGANIZER", }, { @@ -1509,7 +1509,7 @@ export const PADDLING_POOL_257 = () => discordId: "413759870333091884", discordAvatar: "a_b55f70ada809a600e73c5088b910e659", customUrl: "brufnie", - chatNameColor: null, + chatNameHue: null, role: "STREAMER", }, ], @@ -8068,7 +8068,7 @@ export const PADDLING_POOL_255 = () => discordId: "163771047068303360", discordAvatar: "b33d8f230218d6a92705a63fdf803851", customUrl: "alicetheto", - chatNameColor: "#ff0000", + chatNameHue: "0", }, staff: [ { @@ -8078,7 +8078,7 @@ export const PADDLING_POOL_255 = () => discordId: "178489224192851969", discordAvatar: "8b8c1d85cc525ea366f3ce2a6a594c05", customUrl: "pinky", - chatNameColor: null, + chatNameHue: null, role: "ORGANIZER", }, { @@ -8088,7 +8088,7 @@ export const PADDLING_POOL_255 = () => discordId: "275213752025088000", discordAvatar: "25bf68c5aa4e622ceb5a241c34841c6d", customUrl: null, - chatNameColor: null, + chatNameHue: null, role: "ORGANIZER", }, { @@ -8098,7 +8098,7 @@ export const PADDLING_POOL_255 = () => discordId: "195618756800675841", discordAvatar: "a_03ec4bbcb2a4ab000237c9f3e9e71508", customUrl: "sdomi19", - chatNameColor: null, + chatNameHue: null, role: "ORGANIZER", }, { @@ -8108,7 +8108,7 @@ export const PADDLING_POOL_255 = () => discordId: "413759870333091884", discordAvatar: "a_b55f70ada809a600e73c5088b910e659", customUrl: "brufnie", - chatNameColor: null, + chatNameHue: null, role: "STREAMER", }, ], @@ -14993,7 +14993,7 @@ export const IN_THE_ZONE_32 = ({ discordId: "79237403620945920", discordAvatar: "6fc41a44b069a0d2152ac06d1e496c6c", customUrl: "sendou", - chatNameColor: null, + chatNameHue: null, }, staff: [ { @@ -15003,7 +15003,7 @@ export const IN_THE_ZONE_32 = ({ discordId: "163771047068303360", discordAvatar: "b33d8f230218d6a92705a63fdf803851", customUrl: "alicetheto", - chatNameColor: "#ff0000", + chatNameHue: "0", role: "STREAMER", }, { @@ -15013,7 +15013,7 @@ export const IN_THE_ZONE_32 = ({ discordId: "413759870333091884", discordAvatar: "a_b55f70ada809a600e73c5088b910e659", customUrl: "brufnie", - chatNameColor: null, + chatNameHue: null, role: "STREAMER", }, ], diff --git a/app/features/tournament-bracket/core/tests/test-utils.ts b/app/features/tournament-bracket/core/tests/test-utils.ts index 33ac413d4..59cdfbd85 100644 --- a/app/features/tournament-bracket/core/tests/test-utils.ts +++ b/app/features/tournament-bracket/core/tests/test-utils.ts @@ -95,7 +95,7 @@ export const testTournament = ({ seedingSnapshot: null, teams: nTeams(participant.length, Math.min(...participant)), author: { - chatNameColor: null, + chatNameHue: null, customUrl: null, discordAvatar: null, discordId: "123", diff --git a/app/features/tournament-bracket/queries/findMatchById.server.ts b/app/features/tournament-bracket/queries/findMatchById.server.ts index 23fa4e22b..8dd4bc3ed 100644 --- a/app/features/tournament-bracket/queries/findMatchById.server.ts +++ b/app/features/tournament-bracket/queries/findMatchById.server.ts @@ -31,7 +31,7 @@ const stm = sql.prepare(/* sql */ ` "User"."customUrl", 'discordAvatar', "User"."discordAvatar", - 'chatNameColor', IIF(COALESCE("User"."patronTier", 0) >= 2, "User"."customTheme" ->> 'chat', null), + 'chatNameHue', IIF(COALESCE("User"."patronTier", 0) >= 2, "User"."customTheme" ->> '--_chat-h', null), 'pronouns', json("User"."pronouns") ) ) as "players" @@ -85,7 +85,7 @@ export const findMatchById = (id: number) => { discordId: Tables["User"]["discordId"]; customUrl: Tables["User"]["customUrl"]; discordAvatar: Tables["User"]["discordAvatar"]; - chatNameColor: string | null; + chatNameHue: string | null; pronouns: Tables["User"]["pronouns"]; }> ).filter((player) => player.id), diff --git a/app/features/tournament/TournamentRepository.server.ts b/app/features/tournament/TournamentRepository.server.ts index c3c6d73cc..0b5971acc 100644 --- a/app/features/tournament/TournamentRepository.server.ts +++ b/app/features/tournament/TournamentRepository.server.ts @@ -20,7 +20,7 @@ import { COMMON_USER_FIELDS, concatUserSubmittedImagePrefix, tournamentLogoWithDefault, - userChatNameColor, + userChatNameHue, } from "~/utils/kysely.server"; import type { Unwrapped } from "~/utils/types"; import type { TournamentTierNumber } from "./core/tiering"; @@ -86,7 +86,7 @@ export async function findById(id: number) { "TournamentOrganizationMember.userId", "TournamentOrganizationMember.role", ...COMMON_USER_FIELDS, - userChatNameColor, + userChatNameHue, "User.pronouns", ]) .whereRef( @@ -106,7 +106,7 @@ export async function findById(id: number) { jsonObjectFrom( eb .selectFrom("User") - .select([...COMMON_USER_FIELDS, userChatNameColor, "User.pronouns"]) + .select([...COMMON_USER_FIELDS, userChatNameHue, "User.pronouns"]) .whereRef("User.id", "=", "CalendarEvent.authorId"), ).as("author"), jsonArrayFrom( @@ -115,7 +115,7 @@ export async function findById(id: number) { .innerJoin("User", "TournamentStaff.userId", "User.id") .select([ ...COMMON_USER_FIELDS, - userChatNameColor, + userChatNameHue, "User.pronouns", "TournamentStaff.role", ]) diff --git a/app/features/user-page/UserRepository.server.ts b/app/features/user-page/UserRepository.server.ts index e8936de32..dca6f5e36 100644 --- a/app/features/user-page/UserRepository.server.ts +++ b/app/features/user-page/UserRepository.server.ts @@ -20,7 +20,7 @@ import { COMMON_USER_FIELDS, concatUserSubmittedImagePrefix, tournamentLogoOrNull, - userChatNameColor, + userChatNameHue, } from "~/utils/kysely.server"; import { logger } from "~/utils/logger"; import { safeNumberParse } from "~/utils/number"; @@ -522,7 +522,7 @@ export async function findChatUsersByUserIds(userIds: number[]) { "User.discordAvatar", "User.username", "User.pronouns", - userChatNameColor, + userChatNameHue, ]) .where("User.id", "in", userIds) .execute(); diff --git a/app/utils/kysely.server.ts b/app/utils/kysely.server.ts index e88ec1dd4..0b8405f0a 100644 --- a/app/utils/kysely.server.ts +++ b/app/utils/kysely.server.ts @@ -22,13 +22,13 @@ export type CommonUser = Pick< "id" | "username" | "discordId" | "discordAvatar" | "customUrl" >; -const userChatNameColorRaw = sql< +const userChatNameHueRaw = sql< string | null ->`IIF(COALESCE("User"."patronTier", 0) >= 2, "User"."customTheme" ->> 'chat', null)`; +>`IIF(COALESCE("User"."patronTier", 0) >= 2, "User"."customTheme" ->> '--_chat-h', null)`; -export const userChatNameColor = userChatNameColorRaw.as("chatNameColor"); +export const userChatNameHue = userChatNameHueRaw.as("chatNameHue"); -export const userChatNameColorForJson = userChatNameColorRaw; +export const userChatNameHueForJson = userChatNameHueRaw; export function commonUserJsonObject(eb: ExpressionBuilder) { return jsonBuildObject({ diff --git a/app/utils/oklch-gamut.ts b/app/utils/oklch-gamut.ts index 38ed2fb95..dd006373e 100644 --- a/app/utils/oklch-gamut.ts +++ b/app/utils/oklch-gamut.ts @@ -327,6 +327,7 @@ export function clampThemeToGamut(input: ThemeInput): CustomTheme { "--_second-c-3": clampedSecondaryChromas[3], "--_second-c-4": clampedSecondaryChromas[4], "--_second-c-5": clampedSecondaryChromas[5], + "--_chat-h": input.chatHue, "--_radius-box": input.radiusBox, "--_radius-field": input.radiusField, "--_radius-selector": input.radiusSelector, diff --git a/app/utils/zod.ts b/app/utils/zod.ts index 2f7899c8e..32817fded 100644 --- a/app/utils/zod.ts +++ b/app/utils/zod.ts @@ -78,6 +78,10 @@ export const themeInputSchema = z.object({ .number() .min(THEME_INPUT_LIMITS.ACCENT_CHROMA_MIN) .max(THEME_INPUT_LIMITS.ACCENT_CHROMA_MAX), + chatHue: z + .number() + .min(THEME_INPUT_LIMITS.BASE_HUE_MIN) + .max(THEME_INPUT_LIMITS.BASE_HUE_MAX), radiusBox: z .number() .int() diff --git a/locales/en/common.json b/locales/en/common.json index 74bf47af3..059cec3eb 100644 --- a/locales/en/common.json +++ b/locales/en/common.json @@ -332,6 +332,7 @@ "settings.customTheme.baseChroma": "Base chroma", "settings.customTheme.accentHue": "Accent hue", "settings.customTheme.accentChroma": "Accent chroma", + "settings.customTheme.chatHue": "Chat name color", "settings.customTheme.boxes": "Boxes", "settings.customTheme.fields": "Fields", "settings.customTheme.selectors": "Selectors",