feat: today embeds

src/commands/today.tsx

@@ -1,4 +1,5 @@
 import { SlashCommandBuilder } from 'discord.js';
+import { CYCLIC_API } from '../constants/cyclic.js';
 import getWargamingResponse from '../core/blitz/getWargamingResponse.js';
 import addUsernameChoices from '../core/discord/addUsernameChoices.js';
 import autocompleteUsername from '../core/discord/autocompleteUsername.js';
@@ -34,7 +35,7 @@ export const todayCommand: CommandRegistry = {
     return [
       await today(player),
       primaryButton(path, 'Refresh'),
-      // linkButton(`${CYCLIC_API}/${path}`, 'Embed'),
+      linkButton(`${CYCLIC_API}/${path}`, 'Embed'),
       linkButton(
         `https://www.blitzstars.com/player/${player.server}/${nickname}`,
         'BlitzStars',

src/components/Breakdown/components/Row.tsx

@@ -1,5 +1,5 @@
 import getWN8Percentile from '../../../core/blitz/getWN8Percentile.js';
-import { theme } from '../../../stitches.config.js';
+import { theme, themeTransparent } from '../../../stitches.config.js';
 import { RowDiscriminator } from './RowDiscriminator.js';
 import { RowStat } from './RowStat.js';
 
@@ -16,6 +16,7 @@ export interface RowProps {
   icon?: string;
   minimized: boolean;
   isListing: boolean;
+  naked?: boolean;
 }
 
 export function Row({
@@ -31,6 +32,7 @@ export function Row({
   battles,
   careerBattles,
   icon,
+  naked,
 }: RowProps) {
   return (
     <div
@@ -38,7 +40,11 @@ export function Row({
         display: 'flex',
         borderRadius: 4,
         backgroundColor: isListing
-          ? theme.colors.componentInteractive
+          ? naked
+            ? themeTransparent.colors.componentInteractive
+            : theme.colors.componentInteractive
+          : naked
+          ? themeTransparent.colors.appBackground2
           : theme.colors.appBackground2,
         padding: 8,
       }}

src/components/Wrapper.tsx

@@ -3,9 +3,10 @@ import { theme } from '../stitches.config.js';
 
 export interface WrapperProps {
   children: ReactNode;
+  naked?: boolean;
 }
 
-export default function Wrapper({ children }: WrapperProps) {
+export default function Wrapper({ children, naked }: WrapperProps) {
   return (
     <div
       style={{
@@ -14,8 +15,11 @@ export default function Wrapper({ children }: WrapperProps) {
         padding: 16,
         gap: 32,
         width: 640,
-        background: 'url(https://i.imgur.com/PhS06NJ.png)',
         color: theme.colors.textHighContrast,
+
+        ...(!naked && {
+          background: 'url(https://i.imgur.com/PhS06NJ.png)',
+        }),
       }}
     >
       {children}

src/renderers/stats.tsx

@@ -156,7 +156,7 @@ export default async function stats<Type extends StatType>(
   );
 
   return naked ? (
-    overview
+    <Wrapper naked>{overview}</Wrapper>
   ) : (
     <Wrapper>
       <TitleBar

src/renderers/today.tsx

@@ -20,7 +20,10 @@ import { AccountInfo, AllStats } from '../types/accountInfo.js';
 import { PlayerClanData } from '../types/playerClanData.js';
 import { PossiblyPromise } from '../types/possiblyPromise.js';
 
-export default async function today({ server, id }: ResolvedPlayer) {
+export default async function today(
+  { server, id }: ResolvedPlayer,
+  naked?: boolean,
+) {
   const { diffed, order } = await getDiffedTankStats(
     server,
     id,
@@ -117,6 +120,7 @@ export default async function today({ server, id }: ResolvedPlayer) {
 
         return (
           <Breakdown.Row
+            naked={naked}
             isListing={tankId !== 0}
             minimized={index > 4}
             key={tankId}
@@ -142,7 +146,11 @@ export default async function today({ server, id }: ResolvedPlayer) {
     ),
   );
 
-  return (
+  return naked ? (
+    <Wrapper naked>
+      <Breakdown.Root>{rows.slice(1)}</Breakdown.Root>
+    </Wrapper>
+  ) : (
     <Wrapper>
       <TitleBar
         name={accountInfo[id].nickname}

src/routes/today.tsx

@@ -0,0 +1,15 @@
+import resolvePlayerFromRequest from '../core/express/resolvePlayerFromRequest.js';
+import today from '../renderers/today.js';
+import { RouteRegistry } from '../server.js';
+
+export const todayRoute: RouteRegistry = {
+  route: '/today',
+  inProduction: true,
+  inDevelopment: true,
+
+  async handler(req) {
+    const player = resolvePlayerFromRequest(req);
+
+    return await today(player, true);
+  },
+};

src/server.ts

@@ -4,6 +4,7 @@ import withAutoRefresh from './core/express/withAutoRefresh.js';
 import isDev from './core/node/isDev.js';
 import { Registry } from './events/interactionCreate/index.js';
 import { statsRoute } from './routes/stats.js';
+import { todayRoute } from './routes/today.js';
 
 export type RouteReturnable = JSX.Element | Promise<JSX.Element>;
 
@@ -20,7 +21,7 @@ export interface RouteRegistry<HandlesInteraction extends boolean = false>
 
 const app = express();
 
-([statsRoute] as RouteRegistry[]).forEach((registry) => {
+([statsRoute, todayRoute] as RouteRegistry[]).forEach((registry) => {
   if (!(isDev() ? registry.inDevelopment : registry.inProduction)) return;
 
   app.get(registry.route, async (req, res) => {

src/stitches.config.ts

@@ -1,4 +1,4 @@
-import { amberDark, slate, slateDark } from '@radix-ui/colors';
+import { amberDark, slate, slateDark, slateDarkA } from '@radix-ui/colors';
 import { createBorderStyles, createColors } from 'bepaint';
 
 // this isn't really a stitches config, but the object is compliant
@@ -6,5 +6,8 @@ export const theme = {
   colors: createColors(slateDark),
   borderStyles: createBorderStyles(slateDark),
 };
+export const themeTransparent = {
+  colors: createColors(slateDarkA),
+};
 export const themeLight = { colors: createColors(slate) };
 export const themeAmber = { colors: createColors(amberDark) };