From 438feefa8366fc005bb0e30586f88a43dc49e33e Mon Sep 17 00:00:00 2001
From: tresabhi <coolabhigyaandeep07@gmail.com>
Date: Mon, 10 Jul 2023 01:44:05 +0000
Subject: [PATCH] feat: today embeds

---
 src/commands/today.tsx                      |  3 ++-
 src/components/Breakdown/components/Row.tsx | 10 ++++++++--
 src/components/Wrapper.tsx                  |  8 ++++++--
 src/renderers/stats.tsx                     |  2 +-
 src/renderers/today.tsx                     | 12 ++++++++++--
 src/routes/today.tsx                        | 15 +++++++++++++++
 src/server.ts                               |  3 ++-
 src/stitches.config.ts                      |  5 ++++-
 8 files changed, 48 insertions(+), 10 deletions(-)
 create mode 100644 src/routes/today.tsx

diff --git a/src/commands/today.tsx b/src/commands/today.tsx
index 613014928..7c10612cd 100644
--- a/src/commands/today.tsx
+++ b/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',
diff --git a/src/components/Breakdown/components/Row.tsx b/src/components/Breakdown/components/Row.tsx
index 31c904724..ef39602cd 100644
--- a/src/components/Breakdown/components/Row.tsx
+++ b/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,
       }}
diff --git a/src/components/Wrapper.tsx b/src/components/Wrapper.tsx
index 15d51f1c2..7062bb7a9 100644
--- a/src/components/Wrapper.tsx
+++ b/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}
diff --git a/src/renderers/stats.tsx b/src/renderers/stats.tsx
index 314bf7077..5756da28a 100644
--- a/src/renderers/stats.tsx
+++ b/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
diff --git a/src/renderers/today.tsx b/src/renderers/today.tsx
index 1f264cfc6..93da5c594 100644
--- a/src/renderers/today.tsx
+++ b/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}
diff --git a/src/routes/today.tsx b/src/routes/today.tsx
new file mode 100644
index 000000000..30b8a1c0a
--- /dev/null
+++ b/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);
+  },
+};
diff --git a/src/server.ts b/src/server.ts
index c2ed63b6d..2db9ec1c1 100644
--- a/src/server.ts
+++ b/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) => {
diff --git a/src/stitches.config.ts b/src/stitches.config.ts
index c6190584b..673116268 100644
--- a/src/stitches.config.ts
+++ b/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) };