diff --git a/docs/changelogs/1.13.3.md b/docs/changelogs/1.13.3.md new file mode 100644 index 000000000..3871f949d --- /dev/null +++ b/docs/changelogs/1.13.3.md @@ -0,0 +1,7 @@ +# Blitzkrieg 1.13.3 + +Streamer's delight! + +## Features + +- Added config context menu for the session tracker embed diff --git a/package.json b/package.json index 3da715f66..49a527f52 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "blitzkrieg", - "version": "1.13.2", + "version": "1.13.3", "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 48d41794d..96fadb885 100644 --- a/src/app/embeds/session/page.tsx +++ b/src/app/embeds/session/page.tsx @@ -1,5 +1,6 @@ 'use client'; +import { ContextMenu } from '@radix-ui/themes'; import { useEffect, useState } from 'react'; import * as Breakdown from '../../../components/Breakdown'; import { TreeTypeEnum } from '../../../components/Tanks'; @@ -13,6 +14,7 @@ import { tankAverages } from '../../../core/blitzstars/tankAverages'; import { useSession } from '../../../stores/session'; import { IndividualTankStats, TanksStats } from '../../../types/tanksStats'; import { CustomColumnDisplay } from '../../tools/session/components/CustomColumn'; +import { Menu } from '../../tools/session/components/Menu'; const REFRESH_RATE = 1 / 5; @@ -193,118 +195,133 @@ export default function SessionPage() { }; return ( - - {session.showTotal && - session.isTracking && - since !== undefined && - diff !== undefined && ( - { - const rowStat = totalRowStats[customColumn.display]; + + +
+ + {session.showTotal && + session.isTracking && + since !== undefined && + diff !== undefined && ( + { + const rowStat = totalRowStats[customColumn.display]; - if (!rowStat) return undefined; + if (!rowStat) return undefined; - return { - ...rowStat, - delta: - customColumn.showDelta && rowStat.percentile === undefined - ? rowStat.delta - : undefined, - }; - })} - /> - )} + return { + ...rowStat, + delta: + customColumn.showDelta && + rowStat.percentile === undefined + ? rowStat.delta + : undefined, + }; + })} + /> + )} - {diff?.list - .sort((a, b) => b.stats.last_battle_time - a.stats.last_battle_time) - .map(({ stats, tankopedia, career, careerWN8, currentWN8 }) => { - const rowStats: Record< - CustomColumnDisplay, - Breakdown.RowStatItem | undefined - > = { - battles: { - title: 'Battles', - current: stats.all.battles.toLocaleString(), - career: career.all.battles.toLocaleString(), - }, - winrate: { - title: 'Winrate', - current: `${(100 * (stats.all.wins / stats.all.battles)).toFixed( - 2, - )}%`, - career: `${(100 * (career.all.wins / career.all.battles)).toFixed( - 2, - )}%`, - delta: - stats.all.wins / stats.all.battles - - career.all.wins / career.all.battles, - }, - wn8: { - title: 'WN8', - current: - currentWN8 === undefined - ? undefined - : Math.round(currentWN8).toLocaleString(), - career: - careerWN8 === undefined - ? undefined - : Math.round(careerWN8).toLocaleString(), - percentile: - currentWN8 === undefined - ? undefined - : getWN8Percentile(currentWN8), - }, - damage: { - title: 'Damage', - current: Math.round( - stats.all.damage_dealt / stats.all.battles, - ).toLocaleString(), - career: Math.round( - career.all.damage_dealt / career.all.battles, - ).toLocaleString(), - delta: - stats.all.damage_dealt / stats.all.battles - - career.all.damage_dealt / career.all.battles, - }, - none: undefined, - }; - - return ( - { - if (tankopedia?.is_collectible) return TreeTypeEnum.Collector; - if (tankopedia?.is_premium) return TreeTypeEnum.Premium; - })()} - stats={session.customColumns.map((customColumn) => { - const rowStat = rowStats[customColumn.display]; - - if (!rowStat) return undefined; - - return { - ...rowStat, - delta: - customColumn.showDelta && rowStat.percentile === undefined - ? rowStat.delta - : undefined, + {diff?.list + .sort( + (a, b) => b.stats.last_battle_time - a.stats.last_battle_time, + ) + .map(({ stats, tankopedia, career, careerWN8, currentWN8 }) => { + const rowStats: Record< + CustomColumnDisplay, + Breakdown.RowStatItem | undefined + > = { + battles: { + title: 'Battles', + current: stats.all.battles.toLocaleString(), + career: career.all.battles.toLocaleString(), + }, + winrate: { + title: 'Winrate', + current: `${( + 100 * + (stats.all.wins / stats.all.battles) + ).toFixed(2)}%`, + career: `${( + 100 * + (career.all.wins / career.all.battles) + ).toFixed(2)}%`, + delta: + stats.all.wins / stats.all.battles - + career.all.wins / career.all.battles, + }, + wn8: { + title: 'WN8', + current: + currentWN8 === undefined + ? undefined + : Math.round(currentWN8).toLocaleString(), + career: + careerWN8 === undefined + ? undefined + : Math.round(careerWN8).toLocaleString(), + percentile: + currentWN8 === undefined + ? undefined + : getWN8Percentile(currentWN8), + }, + damage: { + title: 'Damage', + current: Math.round( + stats.all.damage_dealt / stats.all.battles, + ).toLocaleString(), + career: Math.round( + career.all.damage_dealt / career.all.battles, + ).toLocaleString(), + delta: + stats.all.damage_dealt / stats.all.battles - + career.all.damage_dealt / career.all.battles, + }, + none: undefined, }; + + return ( + { + if (tankopedia?.is_collectible) + return TreeTypeEnum.Collector; + if (tankopedia?.is_premium) return TreeTypeEnum.Premium; + })()} + stats={session.customColumns.map((customColumn) => { + const rowStat = rowStats[customColumn.display]; + + if (!rowStat) return undefined; + + return { + ...rowStat, + delta: + customColumn.showDelta && + rowStat.percentile === undefined + ? rowStat.delta + : undefined, + }; + })} + /> + ); })} - /> - ); - })} - + +
+
+ + + ); } diff --git a/src/app/tools/session/components/CustomColumn.tsx b/src/app/tools/session/components/CustomColumn.tsx index ee4a788e3..d0210aaf1 100644 --- a/src/app/tools/session/components/CustomColumn.tsx +++ b/src/app/tools/session/components/CustomColumn.tsx @@ -1,4 +1,4 @@ -import { DropdownMenu } from '@radix-ui/themes'; +import { ContextMenu, DropdownMenu } from '@radix-ui/themes'; import mutateSession, { useSession } from '../../../../stores/session'; export type CustomColumnDisplay = @@ -11,20 +11,21 @@ export type CustomColumnDisplay = const NO_DELTA: CustomColumnDisplay[] = ['battles', 'wn8', 'none']; interface CustomColumn { + Builder: typeof DropdownMenu | typeof ContextMenu; column: number; } -export function CustomColumn({ column }: CustomColumn) { +export function CustomColumn({ column, Builder }: CustomColumn) { const customColumn = useSession((state) => state.customColumns[column]); return ( - - Column {column + 1} + + Column {column + 1} - - Display + + Display - mutateSession((draft) => { @@ -33,22 +34,18 @@ export function CustomColumn({ column }: CustomColumn) { }) } > - - Battles - - - Winrate - - WN8 - Damage - None - + Battles + Winrate + WN8 + Damage + None + {!NO_DELTA.includes(customColumn.display) && ( <> - + - mutateSession((draft) => { @@ -57,10 +54,10 @@ export function CustomColumn({ column }: CustomColumn) { } > Show delta - + )} - - + + ); } diff --git a/src/app/tools/session/components/Menu.tsx b/src/app/tools/session/components/Menu.tsx new file mode 100644 index 000000000..f5f66e815 --- /dev/null +++ b/src/app/tools/session/components/Menu.tsx @@ -0,0 +1,39 @@ +import { ContextMenu, DropdownMenu } from '@radix-ui/themes'; +import { useSession } from '../../../../stores/session'; +import { CustomColumn } from './CustomColumn'; + +interface ContextMenuProps { + Builder: typeof DropdownMenu | typeof ContextMenu; +} + +export function Menu({ Builder }: ContextMenuProps) { + const session = useSession(); + + return ( + + + + + + + + + + useSession.setState({ showTotal: checked }) + } + > + Show total + + + useSession.setState({ showCareer: checked }) + } + > + Show career + + + ); +} diff --git a/src/app/tools/session/page.tsx b/src/app/tools/session/page.tsx index d11231292..906988e7f 100644 --- a/src/app/tools/session/page.tsx +++ b/src/app/tools/session/page.tsx @@ -28,7 +28,7 @@ import listPlayers, { import { useSession } from '../../../stores/session'; import { NormalizedTankStats, TanksStats } from '../../../types/tanksStats'; import SessionPage from '../../embeds/session/page'; -import { CustomColumn } from './components/CustomColumn'; +import { Menu } from './components/Menu'; import * as styles from './page.css'; export default function Page() { @@ -231,31 +231,7 @@ export default function Page() { - - - - - - - - - - useSession.setState({ showTotal: checked }) - } - > - Show total - - - useSession.setState({ showCareer: checked }) - } - > - Show career - - +