feat: underlying in duel

src/ui/Duel/Main.tsx

@@ -16,12 +16,12 @@ import {
   YesNoModal,
 } from "./Message";
 import { LifeBar, Mat, Menu } from "./PlayMat";
-import { Background } from "@/ui/Shared";
+import { Underlying } from "./PlayMat";
 
 export const Component: React.FC = () => {
   return (
     <>
-      <Background />
+      <Underlying />
       <SelectActionsModal />
       <Alert />
       <Menu />

src/ui/Duel/PlayMat/Bg/index.module.scss

@@ -26,7 +26,7 @@
     height: var(--block-height-s);
   }
   &.highlight {
-    background: #102639;
+    background: #ffffff35;
     cursor: pointer;
     .triangle {
       --color: #006eff;

src/ui/Duel/PlayMat/Underlying/index.module.scss

+@use "/src/styles/utils.scss";
+
+.background {
+  position: fixed;
+  left: 0;
+  top: 0;
+  height: 100%;
+  max-height: 100%;
+  overflow: hidden;
+  width: 100%;
+  background-color: #010514;
+  z-index: -1;
+  display: flex;
+  justify-content: center;
+  @include utils.noise-bg;
+}
+
+.inner {
+  transform: translateY(40%);
+  width: 60vw;
+  height: 100vh;
+  background: radial-gradient(#00814f, #1c0161);
+  background-size: contain;
+  background-repeat: repeat;
+  filter: blur(502px);
+  transition: 0.5s;
+}
+.opponent .inner {
+  background: radial-gradient(#ff5100, #54005f98);
+  transform: translateY(-50%);
+  filter: blur(602px);
+  opacity: 0.8;
+}

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

+import { useEffect } from "react";
+import { createRoot } from "react-dom/client";
+import { withPortalToBody } from "@/ui/Shared";
+
+import styles from "./index.module.scss";
+import classNames from "classnames";
+import { matStore, isMe } from "@/stores";
+import { useSnapshot } from "valtio";
+
+export const Underlying: React.FC<{}> = withPortalToBody(() => {
+  const { currentPlayer } = useSnapshot(matStore);
+  return (
+    <div
+      className={classNames(styles.background, {
+        [styles.opponent]: !isMe(currentPlayer),
+      })}
+    >
+      <div className={styles.inner}></div>
+    </div>
+  );
+});

src/ui/Duel/PlayMat/index.ts

 export * from "./LifeBar";
 export * from "./Mat";
 export * from "./Menu";
+export * from "./Underlying";

src/ui/Shared/Background/index.tsx

@@ -3,23 +3,8 @@ import { createRoot } from "react-dom/client";
 
 import styles from "./index.module.scss";
 
-const _Background: React.FC<{
-  style?: React.CSSProperties;
-  innerStyle?: React.CSSProperties;
-  innerOpacity?: number;
-}> = ({ style, innerStyle, innerOpacity = 1 }) => {
-  return (
-    <div className={styles.background} style={style}>
-      <div
-        className={styles.inner}
-        style={{ ...innerStyle, opacity: innerOpacity }}
-      ></div>
-    </div>
-  );
-};
-
 /** HOC: 将组件发射到body下 */
-const withPortalToBody = <P extends object>(
+export const withPortalToBody = <P extends object>(
   WrappedComponent: React.ComponentType<P>
 ) => {
   return (props: P) => {
@@ -45,4 +30,17 @@ const withPortalToBody = <P extends object>(
   };
 };
 
-export const Background = withPortalToBody(_Background);
+export const Background: React.FC<{
+  style?: React.CSSProperties;
+  innerStyle?: React.CSSProperties;
+  innerOpacity?: number;
+}> = withPortalToBody(({ style, innerStyle, innerOpacity = 1 }) => {
+  return (
+    <div className={styles.background} style={style}>
+      <div
+        className={styles.inner}
+        style={{ ...innerStyle, opacity: innerOpacity }}
+      ></div>
+    </div>
+  );
+});