fix DemoMenu layout

shuji-koike · Jan 27, 2024 · 3ed10e2 · 3ed10e2
1 parent 8162185
commit 3ed10e2
Show file tree

Hide file tree

Showing 3 changed files with 71 additions and 22 deletions.
diff --git a/packages/app/demo/DemoMenu.tsx b/packages/app/demo/DemoMenu.tsx
@@ -44,16 +44,41 @@ export const DemoMenu: React.FC<{
           <Tab value={3} label="Nades" />
         </Tabs>
       </nav>
-      {filter.players &&
-        frame?.Players.filter(filter.players).map((e) => (
-          <PlayerCard key={e.ID} player={e} steamUser={steamUsers[e.ID]} />
-        ))}
-      {filter.kills &&
-        match.KillEvents.filter(filter.kills).map((e, i) => (
+      <div>
+        {frame?.Players.filter((e) => e.Team === 3 && filter.players?.(e)).map(
+          (e) => (
+            <PlayerCard
+              key={e.ID}
+              player={e}
+              steamUser={steamUsers[e.ID]}
+              css={css`
+                margin: 8px 0;
+              `}
+            />
+          ),
+        )}
+      </div>
+      <div>
+        {frame?.Players.filter((e) => e.Team === 2 && filter.players?.(e)).map(
+          (e) => (
+            <PlayerCard
+              key={e.ID}
+              player={e}
+              steamUser={steamUsers[e.ID]}
+              css={css`
+                margin: 8px 0;
+              `}
+            />
+          ),
+        )}
+      </div>
+      <div>
+        {match.KillEvents.filter((e) => filter.kills?.(e)).map((e, i) => (
           <Box
             key={i}
             display="flex"
             alignItems="baseline"
+            justifyContent="end"
             marginY={1}
             gap={2}
             onClick={() => setTick?.(e.Tick)}
@@ -66,12 +91,14 @@ export const DemoMenu: React.FC<{
             <PlayerLabel player={findPlayer(match, e.Victim)} />
           </Box>
         ))}
-      {filter.nades &&
-        match.NadeEvents.filter(filter.nades).map((e, i) => (
+      </div>
+      <div>
+        {match.NadeEvents.filter((e) => filter.nades?.(e)).map((e, i) => (
           <Box
             key={i}
             display="flex"
             alignItems="baseline"
+            justifyContent="end"
             marginY={1}
             gap={2}
             onClick={() => setTick?.(e.Tick)}
@@ -80,21 +107,24 @@ export const DemoMenu: React.FC<{
             <PlayerLabel player={findPlayer(match, e.Thrower)} />
           </Box>
         ))}
+      </div>
     </div>
   )
 }
 
 const style = css`
-  backdrop-filter: blur(1px);
+  display: flex;
+  flex-direction: column;
   > nav {
     position: sticky;
     top: 0;
     z-index: 1;
   }
-  > div {
-    margin: 8px 0;
-  }
-  > * {
+  > * > * {
+    backdrop-filter: blur(1px);
     filter: drop-shadow(0 0 4px rgba(18, 18, 18, 0.5));
   }
+  div:empty {
+    display: none;
+  }
 `
diff --git a/packages/app/demo/DemoPlayer.tsx b/packages/app/demo/DemoPlayer.tsx
@@ -2,7 +2,6 @@ import { css } from "@emotion/react"
 import React from "react"
 
 import { findRound, findFrame } from "."
-import { DebugNav } from "./DebugNav"
 import { DemoMenu } from "./DemoMenu"
 import { DemoNav } from "./DemoNav"
 import { DemoSlider } from "./DemoSlider"
@@ -112,7 +111,6 @@ export const DemoPlayer: React.FC<{
           filter={filter}
           setFilter={setFilter}
         />
-        <DebugNav match={match} round={round} frame={frame} />
       </aside>
       <footer>
         {round && frame && (
@@ -143,22 +141,39 @@ const style = css`
   outline: none;
   color: #fff;
   > article {
-    position: fixed;
-    top: 0;
-    left: 0;
+    // position: fixed;
+    // top: 0;
+    // left: 0;
     width: 100vh;
     height: 100vh;
     max-width: 100vw;
     max-height: 100vw;
+    @media (max-height: 700px) {
+      margin: 0 auto;
+    }
   }
   > aside {
     position: fixed;
     top: 72px;
     right: 0px;
     width: 300px;
     padding: 0 8px;
-    max-height: calc(100vh - 80px - 100px);
+    max-height: calc(100vh - 200px); // FIXME
     overflow-y: auto;
+    @media (max-height: 700px) {
+      width: 100%;
+      > * > nav {
+        // visibility: hidden;
+        display: none;
+      }
+      > * {
+        flex-direction: row;
+        justify-content: space-between;
+      }
+      > * > * {
+        // width: 300px;
+      }
+    }
   }
   > footer {
     position: fixed;

diff --git a/packages/app/demo/PlayerCard.tsx b/packages/app/demo/PlayerCard.tsx
@@ -26,6 +26,7 @@ export const PlayerCard: React.FC<{
             fontWeight="bold"
             color="gray"
             textAlign="right"
+            fontSize={12}
           >
             {player.Hp}
           </Typography>
@@ -34,33 +35,36 @@ export const PlayerCard: React.FC<{
             maxWidth={140}
             color={teamColor(player.Team)}
             fontWeight="bold"
+            fontSize={12}
             noWrap
           >
             {player.Name}
           </Typography>
+          <Box flexGrow={1} />
           <Typography
             minWidth={40}
             fontWeight="bold"
             textAlign="right"
             color="#060"
-            fontSize={16}
+            fontSize={11}
           >
             ${player.Money}
           </Typography>
         </Box>
         <LinearProgress
+          css={{ height: 2 }}
           variant="determinate"
           color={teamColorVariantMap.get(player.Team)}
           value={player.Hp}
         />
-        <Box display="flex" gap={1} marginTop="4px" minHeight="20px">
+        <Box display="flex" gap={3 / 4} marginTop={1 / 2} minHeight="16px">
           <img src={armorIcon(player)} />
           {player.Weapons?.filter((e) => e !== 405).map((e, i) => (
             <img
               key={i}
               src={icon(e)}
               css={css`
-                height: 20px;
+                height: 12px;
                 opacity: ${player.Weapon === e ? 1 : 0.5};
               `}
             />