i broke it

sebald · Nov 5, 2023 · 1919ec0 · 1919ec0
1 parent 55d61c2
commit 1919ec0
Show file tree

Hide file tree

Showing 4 changed files with 111 additions and 99 deletions.
diff --git a/app/(stats)/composition/[id]/_component/pilot-details.tsx b/app/(stats)/composition/[id]/_component/pilot-details.tsx
@@ -7,7 +7,7 @@ import type { SquadCompositionStats } from '@/lib/stats/details/composition';
 import { toPercentage } from '@/lib/utils';
 import { isStandardized, upgradesToList } from '@/lib/xws';
 
-import { PilotImage, Detail, Card, Switch } from '@/ui';
+import { PilotImage, Detail, Card, Headline } from '@/ui';
 import { Info } from '@/ui/icons';
 
 // Props
@@ -21,101 +21,106 @@ export interface PilotDetailProps {
 // Components
 // ---------------
 export const PilotDetails = ({ className, ships, value }: PilotDetailProps) => {
-  const [grouped, setGrouped] = useState<boolean>(true);
-
-  const data = Object.entries(value);
+  const data = Object.entries(value).reduce(
+    (acc, [pid, current]) => {
+      const key = current.ship;
+      acc[key] = (acc[key] || []).concat([[pid, current]]);
+      return acc;
+    },
+    {} as { [ship: string]: [string, SquadCompositionStats['pilot'][string]][] }
+  );
 
-  if (grouped) {
-    data.sort(([, a], [, b]) => {
+  Object.keys(data).forEach(key => {
+    data[key].sort(([, a], [, b]) => {
       const result = ships.indexOf(a.ship) - ships.indexOf(b.ship);
       return result !== 0 ? result : b.percentile - a.percentile;
     });
-  }
+  });
 
   return (
-    <Card className={className} inset="list">
-      <Card.Header>
-        <Card.Title>Pilots</Card.Title>
-        <Card.Actions className="px-4">
-          <Switch
-            size="small"
-            label="Group by Chassis"
-            checked={grouped}
-            onCheckedChange={setGrouped}
-          />
-        </Card.Actions>
-        <Card.Body variant="enumeration">
-          {data.map(([pid, current]) => (
-            <div
-              key={pid}
-              className="grid gap-x-4 gap-y-6 px-4 py-5 md:grid-cols-[150px,auto] md:grid-rows-[auto,auto,auto] lg:grid-cols-[200px,auto]"
-            >
-              <PilotImage
-                className="row-span-full hidden rounded-md md:block"
-                pilot={pid}
-                type="art"
-                width={250}
-                height={250}
-              />
-              <div className="text-2xl font-bold leading-none">
-                {getPilotName(pid)}
-              </div>
-              <div className="flex flex-wrap gap-x-8 gap-y-4">
-                <Detail
-                  variant="secondary"
-                  className="max-w-[150px]"
-                  label="Percentile"
-                  value={toPercentage(current.percentile)}
-                />
-                <Detail
-                  variant="secondary"
-                  className="max-w-[150px]"
-                  label="Deviation"
-                  value={
-                    current.deviation ? toPercentage(current.deviation) : '-'
-                  }
-                />
-                <Detail
-                  variant="secondary"
-                  className="max-w-[150px]"
-                  label="Winrate"
-                  value={current.winrate ? toPercentage(current.winrate) : '-'}
+    <div className={className}>
+      <Headline level="2" variant="section">
+        Pilots
+      </Headline>
+      {Object.entries(data).map(([ship, pilots]) => (
+        <Card key={ship} inset="list">
+          <Card.Body variant="enumeration">
+            {pilots.map(([pid, current]) => (
+              <div
+                key={pid}
+                className="grid gap-x-4 gap-y-6 px-4 py-5 md:grid-cols-[150px,auto] md:grid-rows-[auto,auto,auto] lg:grid-cols-[200px,auto]"
+              >
+                <PilotImage
+                  className="row-span-full hidden rounded-md md:block"
+                  pilot={pid}
+                  type="art"
+                  width={250}
+                  height={250}
                 />
-                <Detail
-                  variant="secondary"
-                  className="max-w-[150px]"
-                  label="Frequency"
-                  value={toPercentage(current.frequency)}
-                />
-              </div>
-              <div>
-                <div className="text-sm font-medium text-secondary-400">
-                  Loadout Performance
+                <div className="text-2xl font-bold leading-none">
+                  {getPilotName(pid)}
                 </div>
-                {isStandardized(pid) ? (
-                  <div className="text-secondary-950 flex items-center gap-1 pt-2 text-sm italic">
-                    <Info className="h-4 w-4" /> Standarized Pilot. No
-                    variations.
-                  </div>
-                ) : (
-                  <div className="grid grid-cols-[max-content,auto] gap-x-6 gap-y-3 pt-2">
-                    {current.upgrades.map(({ id, list, count, percentile }) => (
-                      <Fragment key={id}>
-                        <div className="text-right text-sm leading-6 text-secondary-600">
-                          {toPercentage(percentile)} ({count})
-                        </div>
-                        <div className="font-medium">
-                          {upgradesToList(list)}
-                        </div>
-                      </Fragment>
-                    ))}
+                <div className="flex flex-wrap gap-x-8 gap-y-4">
+                  <Detail
+                    variant="secondary"
+                    className="max-w-[150px]"
+                    label="Percentile"
+                    value={toPercentage(current.percentile)}
+                  />
+                  <Detail
+                    variant="secondary"
+                    className="max-w-[150px]"
+                    label="Deviation"
+                    value={
+                      current.deviation ? toPercentage(current.deviation) : '-'
+                    }
+                  />
+                  <Detail
+                    variant="secondary"
+                    className="max-w-[150px]"
+                    label="Winrate"
+                    value={
+                      current.winrate ? toPercentage(current.winrate) : '-'
+                    }
+                  />
+                  <Detail
+                    variant="secondary"
+                    className="max-w-[150px]"
+                    label="Frequency"
+                    value={toPercentage(current.frequency)}
+                  />
+                </div>
+                <div>
+                  <div className="text-sm font-medium text-secondary-400">
+                    Loadout Performance
                   </div>
-                )}
+                  {isStandardized(pid) ? (
+                    <div className="text-secondary-950 flex items-center gap-1 pt-2 text-sm italic">
+                      <Info className="h-4 w-4" /> Standarized Pilot. No
+                      variations.
+                    </div>
+                  ) : (
+                    <div className="grid grid-cols-[max-content,auto] gap-x-6 gap-y-3 pt-2">
+                      {current.upgrades.map(
+                        ({ id, list, count, percentile }) => (
+                          <Fragment key={id}>
+                            <div className="text-right text-sm leading-6 text-secondary-600">
+                              {toPercentage(percentile)} ({count})
+                            </div>
+                            <div className="font-medium">
+                              {upgradesToList(list)}
+                            </div>
+                          </Fragment>
+                        )
+                      )}
+                    </div>
+                  )}
+                </div>
               </div>
-            </div>
-          ))}
-        </Card.Body>
-      </Card.Header>
-    </Card>
+            ))}
+          </Card.Body>
+        </Card>
+      ))}
+    </div>
   );
 };
diff --git a/app/(stats)/composition/[id]/page.tsx b/app/(stats)/composition/[id]/page.tsx
@@ -127,24 +127,24 @@ const Page = async ({ params }: PageParams) => {
       <Card className="col-span-full md:col-span-6">
         <Card.Header>
           <Card.Title>Trend</Card.Title>
-          <Card.Body>
-            <TrendCurve value={stats.trend} />
-          </Card.Body>
         </Card.Header>
+        <Card.Body>
+          <TrendCurve value={stats.trend} />
+        </Card.Body>
       </Card>
       <PilotDetails
         className="col-span-full"
         ships={stats.ships}
         value={stats.pilot}
       />
-      <Card size="fit" inset="list" className="col-span-full">
+      {/* <Card size="fit" inset="list" className="col-span-full">
         <Card.Header>
           <Card.Title>Squads</Card.Title>
-          <Card.Body>
-            <SquadGroups value={stats.squads} />
-          </Card.Body>
         </Card.Header>
-      </Card>
+        <Card.Body>
+          <SquadGroups value={stats.squads} />
+        </Card.Body>
+      </Card> */}
     </div>
   );
 };

diff --git a/ui/card.tsx b/ui/card.tsx
@@ -18,7 +18,7 @@ const styles = {
         inset: {
           default: 'px-3 pt-3 pb-2',
           headless: 'px-3 pt-4 pb-2', // No title/card.header
-          list: 'px-0 pt-3 pb-2', // for when using a list
+          list: 'p-0', // when using a list
         },
         size: {
           stretch: 'h-full',
@@ -35,8 +35,7 @@ const styles = {
   body: cva('flex-1', {
     variants: {
       variant: {
-        enumeration:
-          'divide-y divide-secondary-100 border-t border-secondary-100',
+        enumeration: 'divide-y divide-secondary-100',
       },
     },
   }),

diff --git a/ui/headline.tsx b/ui/headline.tsx
@@ -18,6 +18,10 @@ const styles = cva(['scroll-m-20'], {
       headline: `${headline.variable} font-headline`,
       inherit: '',
     },
+    variant: {
+      default: '',
+      section: 'text-primary-700 text-4xl',
+    },
   },
   defaultVariants: {
     level: '1',
@@ -39,13 +43,17 @@ export interface HeadlineProps
 export const Headline = ({
   level,
   font,
+  variant,
   className,
   children,
   ...props
 }: HeadlineProps) => {
   const Element = `h${level}` as any;
   return (
-    <Element className={cn(styles({ level, font, className }))} {...props}>
+    <Element
+      className={cn(styles({ level, font, variant, className }))}
+      {...props}
+    >
       {children}
     </Element>
   );