From 2dbf754572e6abb99cdbf766dbb75b41d1d6fc78 Mon Sep 17 00:00:00 2001 From: tresabhi Date: Mon, 29 May 2023 18:29:02 +0000 Subject: [PATCH] feat: use bepaint --- package.json | 2 + src/commands/today.tsx | 71 ++++++++++--------- .../Breakdown/components/RowDiscriminator.tsx | 4 +- .../Breakdown/components/RowStat.tsx | 12 +++- .../components/GenericStatsRow.tsx | 7 +- src/components/NoBattlesInPeriod.tsx | 4 +- src/components/PoweredByBlitzStars.tsx | 4 +- src/components/TitleBar.tsx | 12 +++- src/components/Wrapper.tsx | 5 +- src/constants/colors.ts | 4 +- src/stitches.config.ts | 7 ++ yarn.lock | 10 +++ 12 files changed, 94 insertions(+), 48 deletions(-) create mode 100644 src/stitches.config.ts diff --git a/package.json b/package.json index de4d38909..849d11f37 100644 --- a/package.json +++ b/package.json @@ -10,7 +10,9 @@ }, "license": "MIT", "dependencies": { + "@radix-ui/colors": "^0.1.8", "@resvg/resvg-js": "^2.4.1", + "bepaint": "^0.1.0-beta.3", "discord.js": "^14.9.0", "escape-html": "^1.0.3", "fuzzysort": "^2.0.4", diff --git a/src/commands/today.tsx b/src/commands/today.tsx index 4e3e197b0..821c3980b 100644 --- a/src/commands/today.tsx +++ b/src/commands/today.tsx @@ -71,41 +71,44 @@ export default { const accumulatedStats = sumStats(allStatsToAccumulate); - const rows = Object.entries({ - 0: accumulatedStats, - ...tankStatsOverTime, - }).map(([tankId, tankStats]) => { - const career = careerStats[tankId as unknown as number]; + if (Object.keys(tankStatsOverTime).length > 0) { + tankStatsOverTime[0] = accumulatedStats; + } - return ( - - ); - }); + const rows = Object.entries(tankStatsOverTime).map( + ([tankId, tankStats]) => { + const career = careerStats[tankId as unknown as number]; + + return ( + + ); + }, + ); const image = await render( diff --git a/src/components/Breakdown/components/RowDiscriminator.tsx b/src/components/Breakdown/components/RowDiscriminator.tsx index 5d9edb975..8f3a11713 100644 --- a/src/components/Breakdown/components/RowDiscriminator.tsx +++ b/src/components/Breakdown/components/RowDiscriminator.tsx @@ -1,3 +1,5 @@ +import { theme } from '../../../stitches.config.js'; + export interface RowDiscriminatorProps { name: string; icon?: string; @@ -25,7 +27,7 @@ export function RowDiscriminator({ name, icon }: RowDiscriminatorProps) { )} - {career} + + {career} +
)} - + {value}
- {name} + + {name} + ); } diff --git a/src/components/GenericStats/components/GenericStatsRow.tsx b/src/components/GenericStats/components/GenericStatsRow.tsx index 9b4cfb078..fb178345f 100644 --- a/src/components/GenericStats/components/GenericStatsRow.tsx +++ b/src/components/GenericStats/components/GenericStatsRow.tsx @@ -1,3 +1,4 @@ +import { theme } from '../../../stitches.config.js'; import { Stat } from '../index.js'; export interface GenericStatsRowProps { @@ -13,8 +14,10 @@ export default function GenericStatsRow({ stat }: GenericStatsRowProps) { alignItems: 'center', }} > - {stat[0]} - + + {stat[0]} + + {stat[1]} diff --git a/src/components/NoBattlesInPeriod.tsx b/src/components/NoBattlesInPeriod.tsx index 2e3dc0805..1f30a4913 100644 --- a/src/components/NoBattlesInPeriod.tsx +++ b/src/components/NoBattlesInPeriod.tsx @@ -1,3 +1,5 @@ +import { theme } from '../stitches.config.js'; + export default function NoBattlesInPeriod() { return (
- + No battles played in this period
diff --git a/src/components/PoweredByBlitzStars.tsx b/src/components/PoweredByBlitzStars.tsx index bd2349bc0..a1bc33308 100644 --- a/src/components/PoweredByBlitzStars.tsx +++ b/src/components/PoweredByBlitzStars.tsx @@ -1,3 +1,5 @@ +import { theme } from '../stitches.config.js'; + export default function PoweredByBlitzStars() { return (
@@ -5,7 +7,7 @@ export default function PoweredByBlitzStars() { src="https://www.blitzstars.com/assets/images/4b4cb591.TankyMcPewpew.png" style={{ height: 16, width: 16 }} /> - + Powered by BlitzStars
diff --git a/src/components/TitleBar.tsx b/src/components/TitleBar.tsx index ac008c88d..426a540de 100644 --- a/src/components/TitleBar.tsx +++ b/src/components/TitleBar.tsx @@ -1,3 +1,5 @@ +import { theme } from '../stitches.config.js'; + export interface TitleBarProps { name: string; nameDiscriminator?: string; @@ -26,18 +28,22 @@ export default function TitleBar({ {name} {nameDiscriminator && ( - {nameDiscriminator} + + {nameDiscriminator} + )} - {description} + + {description} + diff --git a/src/components/Wrapper.tsx b/src/components/Wrapper.tsx index dc3aeed22..c6f9b7f0b 100644 --- a/src/components/Wrapper.tsx +++ b/src/components/Wrapper.tsx @@ -1,4 +1,5 @@ import { ReactNode } from 'react'; +import { theme } from '../stitches.config.js'; export interface WrapperProps { children: ReactNode; @@ -13,8 +14,8 @@ export default function Wrapper({ children }: WrapperProps) { padding: 16, gap: 32, width: 640, - background: 'black', - color: 'white', + backgroundColor: theme.colors.appBackground1, + color: theme.colors.textHighContrast, }} > {children} diff --git a/src/constants/colors.ts b/src/constants/colors.ts index 1e4a518ff..cf2eb8be9 100644 --- a/src/constants/colors.ts +++ b/src/constants/colors.ts @@ -1,3 +1,5 @@ -export const ACCENT_COLOR = '#ffffff'; +import { theme } from '../stitches.config.js'; + +export const ACCENT_COLOR = theme.colors.textHighContrast; export const POSITIVE_COLOR = '#82ff29'; export const NEGATIVE_COLOR = '#ff4747'; diff --git a/src/stitches.config.ts b/src/stitches.config.ts new file mode 100644 index 000000000..51511fdf9 --- /dev/null +++ b/src/stitches.config.ts @@ -0,0 +1,7 @@ +import { slateDark } from '@radix-ui/colors'; +import { createColors } from 'bepaint'; + +// this isn't really a stitches config, but the object is compliant +export const theme = { + colors: createColors(slateDark), +}; diff --git a/yarn.lock b/yarn.lock index d5b1ca0e7..36e6a48e2 100644 --- a/yarn.lock +++ b/yarn.lock @@ -156,6 +156,11 @@ resolved "https://registry.yarnpkg.com/@esbuild/win32-x64/-/win32-x64-0.17.19.tgz#8cfaf2ff603e9aabb910e9c0558c26cf32744061" integrity sha512-lAhycmKnVOuRYNtRtatQR1LPQf2oYCkRGkSFnseDAKPl8lu5SOsK/e1sXe5a0Pc5kHIHe6P2I/ilntNv2xf3cA== +"@radix-ui/colors@^0.1.8": + version "0.1.8" + resolved "https://registry.yarnpkg.com/@radix-ui/colors/-/colors-0.1.8.tgz#b08c62536fc462a87632165fb28e9b18f9bd047e" + integrity sha512-jwRMXYwC0hUo0mv6wGpuw254Pd9p/R6Td5xsRpOmaWkUHlooNWqVcadgyzlRumMq3xfOTXwJReU0Jv+EIy4Jbw== + "@resvg/resvg-js-android-arm-eabi@2.4.1": version "2.4.1" resolved "https://registry.yarnpkg.com/@resvg/resvg-js-android-arm-eabi/-/resvg-js-android-arm-eabi-2.4.1.tgz#49dc9722f95096f8aff70186deae8e148d60dce5" @@ -338,6 +343,11 @@ base64-js@0.0.8: resolved "https://registry.yarnpkg.com/base64-js/-/base64-js-0.0.8.tgz#1101e9544f4a76b1bc3b26d452ca96d7a35e7978" integrity sha512-3XSA2cR/h/73EzlXXdU6YNycmYI7+kicTxks4eJg2g39biHR84slg2+des+p7iHYhbRg/udIS4TD53WabcOUkw== +bepaint@^0.1.0-beta.3: + version "0.1.0-beta.3" + resolved "https://registry.yarnpkg.com/bepaint/-/bepaint-0.1.0-beta.3.tgz#fe8f0d20e35da075a6ed69f42d61156d985da584" + integrity sha512-rybuEo674bEal5QUm/qO9jok3TptyRH2bdHDheFO25fw+HCBic5Oiy+ZWnOFnROCGZQy2Zcw7po4KrKSxz02Pg== + busboy@^1.6.0: version "1.6.0" resolved "https://registry.npmjs.org/busboy/-/busboy-1.6.0.tgz"