feat: updates

docs/changelogs/1.15.12.md

@@ -0,0 +1,8 @@
+# Blitzkrieg 1.15.12
+
+Sometimes embeds need love too.
+
+## Changes
+
+- Session embeds are now translucent by default
+  - Session embed titles are now the username of the player by default

src/app/embeds/session/page.tsx

@@ -14,14 +14,21 @@ import { tankAverages } from '../../../core/blitzstars/tankAverages';
 import calculateWN8 from '../../../core/statistics/calculateWN8';
 import { deltaTankStats } from '../../../core/statistics/deltaTankStats';
 import getWN8Percentile from '../../../core/statistics/getWN8Percentile';
-import { resetSession, useSession } from '../../../stores/session';
+import mutateSession, {
+  resetSession,
+  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;
 
-export default function SessionPage() {
+interface SessionPageProps {
+  naked?: boolean;
+}
+
+export default function SessionPage({ naked = true }: SessionPageProps) {
   const session = useSession();
   const since = session.isTracking ? new Date(session.time) : undefined;
   const [diff, setDiff] = useState<
@@ -72,6 +79,14 @@ export default function SessionPage() {
       0,
     ) / careerBattles;
 
+  useEffect(() => {
+    if (session.title === 'Untitled session') {
+      mutateSession((draft) => {
+        if (draft.isTracking) draft.title = draft.nickname;
+      });
+    }
+  }, [session.title]);
+
   useEffect(() => {
     async function recalculateDiff() {
       if (session.isTracking) {
@@ -207,6 +222,7 @@ export default function SessionPage() {
               since !== undefined &&
               diff !== undefined && (
                 <Breakdown.Row
+                  naked={naked}
                   color={session.color}
                   minimized={!session.showCareer}
                   title={session.title}
@@ -288,6 +304,7 @@ export default function SessionPage() {
 
                   return (
                     <Breakdown.Row
+                      naked={naked}
                       color={session.color}
                       key={stats.tank_id}
                       minimized={!session.showCareer}

src/app/tools/session/page.tsx

@@ -248,7 +248,7 @@ export default function Page() {
         </div>
       </div>
 
-      <SessionPage />
+      <SessionPage naked={false} />
     </PageWrapper>
   );
 }

src/components/Breakdown/components/Row.tsx

@@ -18,6 +18,7 @@ export interface RowStatItem {
 
 interface RowProps {
   type?: 'tank' | 'summary';
+  naked?: boolean;
   title: string;
   minimized?: boolean;
   treeType?: TreeTypeEnum;
@@ -33,18 +34,23 @@ export function Row({
   minimized,
   tankType,
   treeType,
+  naked = false,
   type,
 }: RowProps) {
-  const theme = createColors(PALETTES[`${color}Dark`]);
+  const palette = PALETTES[`${color}Dark`];
+  const theme = createColors(palette);
 
   return (
     <div
       className="session-tracker-row"
       style={{
+        maxWidth: naked ? 600 : undefined,
         display: 'flex',
         flexDirection: 'column',
         borderRadius: 4,
-        backgroundColor: theme.appBackground2,
+        backgroundColor: naked
+          ? `${theme.appBackground2}c0`
+          : theme.appBackground2,
         overflow: 'hidden',
       }}
     >
@@ -55,7 +61,9 @@ export function Row({
           justifyContent: 'center',
           padding: 8,
           gap: 4,
-          backgroundColor: theme.componentInteractive,
+          backgroundColor: naked
+            ? `${theme.componentInteractive}c0`
+            : theme.componentInteractive,
         }}
       >
         {type === 'tank' && tankType !== undefined && (