diff --git a/docs/changelogs/1.15.7.md b/docs/changelogs/1.15.7.md new file mode 100644 index 000000000..719a5ca0e --- /dev/null +++ b/docs/changelogs/1.15.7.md @@ -0,0 +1,20 @@ +# Blitzkrieg 1.15.7 + +Simple yet powerful theming options for the session tracker + +## Features + +- The accent color of the session tracker (hence the embed too) can now be tweaked + - Access this setting via the dropdown from Options > Accent color + +## Fixes + +- Reimplemented the commas for last numbers in the overflow count of the ratings leaderboard + - For example, "+1234567 more" will now read "+1,234,567 more" + +## Technical Features + +- Added class names for more in-depth customization for those who are comfortable with CSS + - `session-tracker-root` + - `session-tracker-row` + - `session-tracker-row-stat` diff --git a/package.json b/package.json index 5723fdea0..ac95dc249 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "blitzkrieg", - "version": "1.15.6", + "version": "1.15.7", "description": "🎉 Tools for everything World of Tanks Blitz", "main": "src/server.ts", "type": "module", diff --git a/src/app/embeds/session/page.tsx b/src/app/embeds/session/page.tsx index eb679bc74..e722836a5 100644 --- a/src/app/embeds/session/page.tsx +++ b/src/app/embeds/session/page.tsx @@ -207,6 +207,7 @@ export default function SessionPage() { since !== undefined && diff !== undefined && ( Column {column + 1} - Display - diff --git a/src/app/tools/session/components/Menu.tsx b/src/app/tools/session/components/Menu.tsx index c2480217c..9c3172bbb 100644 --- a/src/app/tools/session/components/Menu.tsx +++ b/src/app/tools/session/components/Menu.tsx @@ -1,4 +1,10 @@ import { ContextMenu, DropdownMenu } from '@radix-ui/themes'; +import { + ACCENT_COLORS, + AccentColor, + GRAY_COLORS, + GrayColor, +} from '../../../../constants/radixColors'; import { useSession } from '../../../../stores/session'; import { CustomColumn } from './CustomColumn'; @@ -12,6 +18,27 @@ export function Menu({ Builder, reset }: ContextMenuProps) { return ( + + Accent color + + + + useSession.setState({ color: value as AccentColor | GrayColor }) + } + > + {[...ACCENT_COLORS, ...GRAY_COLORS].map((color) => ( + {`${color + .charAt(0) + .toUpperCase()}${color.slice(1)}`} + ))} + + + + + + diff --git a/src/commands/ratings.tsx b/src/commands/ratings.tsx index d1067e78a..7fe6a5b23 100644 --- a/src/commands/ratings.tsx +++ b/src/commands/ratings.tsx @@ -17,7 +17,6 @@ import { getClanAccountInfo } from '../core/blitz/getClanAccountInfo'; import getRatingsInfo from '../core/blitz/getRatingsInfo'; import { getRatingsLeague } from '../core/blitz/getRatingsLeague'; import { getRatingsNeighbors } from '../core/blitz/getRatingsNeighbors'; -import regionToRegionSubdomain from '../core/blitz/regionToRegionSubdomain'; import { getArchivedLatestSeasonNumber } from '../core/blitzkrieg/getArchivedLatestSeasonNumber'; import getArchivedRatingsInfo from '../core/blitzkrieg/getArchivedRatingsInfo'; import { getArchivedRatingsLeaderboard } from '../core/blitzkrieg/getArchivedRatingsLeaderboard'; @@ -256,7 +255,6 @@ export const ratingsCommand = new Promise( if (regionRatingsInfo.detail !== undefined) return noOngoingSeason; - const regionSubdomain = regionToRegionSubdomain(region); const result = subcommandGroup === 'current' ? await getRatingsLeague(region, leagueIndex).then( @@ -461,11 +459,15 @@ export const ratingsCommand = new Promise( {items && ( {playersBefore > 0 && ( - + )} {items} {playersAfter > 0 && ( - + )} )} diff --git a/src/components/Breakdown/components/Root.tsx b/src/components/Breakdown/components/Root.tsx index 9f40d82f9..654367d17 100644 --- a/src/components/Breakdown/components/Root.tsx +++ b/src/components/Breakdown/components/Root.tsx @@ -6,7 +6,10 @@ export interface RootProps { export function Root({ children }: RootProps) { return ( -
+
{children}
); diff --git a/src/components/Breakdown/components/Row.tsx b/src/components/Breakdown/components/Row.tsx index 04328e483..13040c43a 100644 --- a/src/components/Breakdown/components/Row.tsx +++ b/src/components/Breakdown/components/Row.tsx @@ -1,5 +1,10 @@ +import { createColors } from 'bepaint'; import { Percentile } from '../../../constants/percentiles'; -import { theme } from '../../../stitches.config'; +import { + AccentColor, + GrayColor, + PALETTES, +} from '../../../constants/radixColors'; import { TREE_TYPE_ICONS, TreeTypeEnum } from '../../Tanks'; import { RowStat } from './RowStat'; @@ -17,18 +22,29 @@ interface RowProps { minimized?: boolean; treeType?: TreeTypeEnum; tankType?: string; - + color?: AccentColor | GrayColor; stats: (RowStatItem | undefined)[]; } -export function Row(props: RowProps) { +export function Row({ + color = 'slate', + stats, + title, + minimized, + tankType, + treeType, + type, +}: RowProps) { + const theme = createColors(PALETTES[`${color}Dark`]); + return (
@@ -39,16 +55,12 @@ export function Row(props: RowProps) { justifyContent: 'center', padding: 8, gap: 4, - backgroundColor: theme.colors.componentInteractive, + backgroundColor: theme.componentInteractive, }} > - {props.type === 'tank' && props.tankType !== undefined && ( + {type === 'tank' && tankType !== undefined && ( )} @@ -56,18 +68,18 @@ export function Row(props: RowProps) { - {props.title} + {title}
@@ -78,11 +90,11 @@ export function Row(props: RowProps) { paddingBottom: 8, }} > - {props.stats.map( + {stats.map( (row, index) => row && ( ['accentColor'], + 'gray' | undefined +>; +export type AccentColorDark = `${AccentColor}Dark`; +export type GrayColor = Exclude< + ComponentProps['grayColor'], + 'auto' | undefined +>; +export type GrayColorDark = `${GrayColor}Dark`; + +export const ACCENT_COLORS: AccentColor[] = [ + 'tomato', + 'red', + 'ruby', + 'crimson', + 'pink', + 'plum', + 'purple', + 'violet', + 'iris', + 'indigo', + 'blue', + 'cyan', + 'teal', + 'jade', + 'green', + 'grass', + 'brown', + 'orange', + 'sky', + 'mint', + 'lime', + 'yellow', + 'amber', + 'gold', + 'bronze', +]; +export const GRAY_COLORS: GrayColor[] = [ + 'gray', + 'mauve', + 'slate', + 'sage', + 'olive', + 'sand', +]; + +export const PALETTES: Record< + AccentColor | AccentColorDark | GrayColor | GrayColorDark, + { [key: `${string}${number}`]: string } +> = colors; diff --git a/src/stores/session.ts b/src/stores/session.ts index ef7e498b0..4612ba8d2 100644 --- a/src/stores/session.ts +++ b/src/stores/session.ts @@ -2,6 +2,7 @@ import { produce } from 'immer'; import { create } from 'zustand'; import { devtools, persist } from 'zustand/middleware'; import { CustomColumnDisplay } from '../app/tools/session/components/CustomColumn'; +import { AccentColor, GrayColor } from '../constants/radixColors'; import { Region } from '../constants/regions'; import { WARGAMING_APPLICATION_ID } from '../constants/wargamingApplicationID'; import fetchBlitz from '../core/blitz/fetchBlitz'; @@ -29,6 +30,7 @@ type Session = ( }[] & { length: 4 }; showTotal: boolean; showCareer: boolean; + color: AccentColor | GrayColor; }; export async function setSession(region: Region, id: number, nickname: string) { @@ -78,10 +80,9 @@ export const useSession = create()( { display: 'wn8', showDelta: false }, { display: 'damage', showDelta: true }, ], + color: 'slate', }), - { - name: 'session', - }, + { name: 'session' }, ), ), );