fix: small

src/ui/Duel/PlayMat/LifeBar/index.scss

@@ -16,6 +16,7 @@
 
 .life-bar {
   position: relative;
+  overflow: hidden;
   width: 100%;
   color: white;
   background-color: var(--bg-color);
@@ -47,4 +48,31 @@
   display: flex;
   gap: 8px;
   align-items: center;
+  overflow: hidden;
+  position: relative;
+  .timer-text {
+    min-width: 3.25em;
+  }
+}
+
+.floodlight {
+  position: absolute;
+  height: 100%;
+  width: 40px;
+  background-color: #aaa;
+  top: 0;
+  right: 0;
+  filter: blur(30px);
+  transform: skewX(-20deg);
+}
+.floodlight-run {
+  animation: floodlight 4s linear infinite;
+}
+@keyframes floodlight {
+  0% {
+    right: -80px;
+  }
+  100% {
+    right: calc(100% + 80px);
+  }
 }

src/ui/Duel/PlayMat/LifeBar/index.tsx

@@ -89,12 +89,14 @@ const LifeBarItem: React.FC<{
       ? "00:00"
       : `${mm < 10 ? "0" + mm : mm}:${ss < 10 ? "0" + ss : ss}`;
   return (
-    <Space
-      direction="vertical"
+    <div
       style={{
         flexDirection: isMe ? "column-reverse" : "column",
+        overflow: "hidden",
+        display: "flex",
+        gap: "0.5rem",
+        position: "relative",
       }}
-      size={12}
     >
       <div
         className={classNames("life-bar", {
@@ -113,8 +115,9 @@ const LifeBarItem: React.FC<{
             size={14}
           />
           <div className="timer-text">{timeText}</div>
+          <div className="floodlight floodlight-run" />
         </div>
       )}
-    </Space>
+    </div>
   );
 };

src/ui/Duel/PlayMat/Menu/index.scss

@@ -10,26 +10,4 @@
   padding: 8px;
   border-radius: 6px;
   overflow: hidden;
-  .floodlight {
-    position: absolute;
-    height: 100%;
-    width: 40px;
-    background-color: white;
-    top: 0;
-    right: 0;
-    filter: blur(30px);
-    transform: skewX(-20deg);
-  }
-  .floodlight-run {
-    animation: floodlight 1s linear infinite;
-  }
-}
-
-@keyframes floodlight {
-  0% {
-    right: -80px;
-  }
-  100% {
-    right: calc(100% + 80px);
-  }
 }

src/ui/Duel/PlayMat/Menu/index.tsx

@@ -124,7 +124,6 @@ export const Menu = () => {
         >
           <Button icon={<CloseCircleFilled />} type="text"></Button>
         </DropdownWithTitle>
-        {/* <div className="floodlight floodlight-run" /> */}
       </div>
     </>
   );