feat: timer

src/config/defaults.ts

@@ -19,7 +19,7 @@ const defaultConfig: DefaultsConfig = {
 const aiModeConfig: DefaultsConfig = {
   ...defaultConfig,
   defaultDeck: VITE_AI_MODE_DEFAULT_DECK || "Hero",
-  defaultPlayer: `AiKiller${Math.random().toString(36).slice(2)}}`,
+  defaultPlayer: `AiKiller-${Math.random().toString(36).slice(2, 6)}}`,
   defaultPassword: "AI",
 };
 

src/styles/core.scss

@@ -41,7 +41,11 @@ body {
   margin: 0;
   place-items: center;
   min-width: 320px;
-  min-height: 100vh;
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
 }
 
 a {

src/ui/Duel/Main.tsx

@@ -14,7 +14,7 @@ import {
   SortCardModal,
   YesNoModal,
 } from "./Message";
-import { LifeBar, Mat, Menu, Timer } from "./PlayMat";
+import { LifeBar, Mat, Menu } from "./PlayMat";
 
 const NeosDuel = () => {
   return (
@@ -23,7 +23,6 @@ const NeosDuel = () => {
       <Alert />
       <Menu />
       <LifeBar />
-      <Timer />
       <Mat />
       <CardModal />
       <CardListModal />

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

@@ -3,7 +3,7 @@ import "./index.scss";
 import { animated, to, useSpring } from "@react-spring/web";
 import { Dropdown, type MenuProps } from "antd";
 import classnames from "classnames";
-import React, { type CSSProperties, useEffect, useState, useRef } from "react";
+import React, { type CSSProperties, useEffect, useRef, useState } from "react";
 import { useSnapshot } from "valtio";
 
 import type { CardMeta } from "@/api";

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

@@ -3,20 +3,23 @@
   display: flex;
   top: 0;
   left: 0;
-  height: 100vh; // FIXME: 100% on safari
+  bottom: 0;
   flex-direction: column;
   justify-content: space-between;
-  padding: 20px 35px;
+  padding: 20px;
+  margin-left: 10px;
   pointer-events: none;
   z-index: 100;
+  --bg-color: #323232;
+  width: 200px;
 }
 
 .life-bar {
-  width: 160px;
+  position: relative;
+  width: 100%;
   color: white;
-  background-color: #323232;
+  background-color: var(--bg-color);
   font-family: var(--theme-font);
-  border: 1px solid #222;
   padding: 1rem;
   padding-bottom: 0.6rem;
   border-radius: 8px;
@@ -32,3 +35,16 @@
     font-size: 1.8rem;
   }
 }
+.timer-container {
+  background-color: var(--bg-color);
+  border-radius: 4px;
+  padding: 0.4rem 1rem;
+  font-size: 0.8rem;
+  font-weight: bold;
+  font-family: var(--theme-font);
+  width: fit-content;
+  color: white;
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}

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

 import "./index.scss";
 
+import { Progress, Space } from "antd";
 import classNames from "classnames";
-import React, { useEffect } from "react";
+import React, { useEffect, useState } from "react";
 import AnimatedNumbers from "react-animated-numbers";
 import { useSnapshot } from "valtio";
 
+import { useEnv } from "@/hook";
 import { matStore, playerStore } from "@/stores";
-
 // 三个候选方案
 // https://snack.expo.dev/?platform=web
 // https://github.com/heyman333/react-animated-numbers
@@ -28,28 +29,89 @@ export const LifeBar: React.FC = () => {
     setOpLife(snap.op.life);
   }, [snap.op.life]);
 
+  const snapTimeLimit = useSnapshot(matStore.timeLimits);
+  const [myTimeLimit, setMyTimeLimit] = useState(snapTimeLimit.me);
+  const [opTimeLimit, setOpTimeLimit] = useState(snapTimeLimit.op);
+  useEffect(() => {
+    setMyTimeLimit(snapTimeLimit.me);
+  }, [snapTimeLimit.me]);
+  useEffect(() => {
+    setOpTimeLimit(snapTimeLimit.op);
+  }, [snapTimeLimit.op]);
+
+  useEffect(() => {
+    setInterval(() => {
+      setMyTimeLimit((time) => time - 1);
+      setOpTimeLimit((time) => time - 1);
+    }, 1000);
+  }, []);
+
+  useEffect(() => {
+    if (useEnv().VITE_IS_AI_MODE) {
+      // 如果是AI模式
+      // FIXME: 探索一个优雅的、判断当前是不是AI模式的方法，用户手动输入AI也是AI模式
+      setMyTimeLimit(240);
+      setOpTimeLimit(240);
+    }
+  }, [currentPlayer]);
+
   return (
     <div id="life-bar-container">
-      <div
-        className={classNames("life-bar", {
-          "life-bar-activated": matStore.isMe(currentPlayer),
-        })}
-      >
-        <div className="name">{snapPlayer.getOpPlayer().name}</div>
-        <div className="life">
-          {<AnimatedNumbers animateToNumber={opLife} />}
-        </div>
+      <LifeBarItem
+        active={!matStore.isMe(currentPlayer)}
+        name={snapPlayer.getOpPlayer().name ?? "?"}
+        life={opLife}
+        timeLimit={opTimeLimit}
+        isMe={false}
+      />
+      <LifeBarItem
+        active={matStore.isMe(currentPlayer)}
+        name={snapPlayer.getMePlayer().name ?? "?"}
+        life={meLife}
+        timeLimit={myTimeLimit}
+        isMe={true}
+      />
     </div>
+  );
+};
+
+const LifeBarItem: React.FC<{
+  active: boolean;
+  name: string;
+  life: number;
+  timeLimit: number;
+  isMe: boolean;
+}> = ({ active, name, life, timeLimit, isMe }) => {
+  const mm = Math.floor(timeLimit / 60);
+  const ss = timeLimit % 60;
+  const timeText = `${mm < 10 ? "0" + mm : mm}:${ss < 10 ? "0" + ss : ss}`;
+  return (
+    <Space
+      direction="vertical"
+      style={{
+        flexDirection: isMe ? "column-reverse" : "column",
+      }}
+      size={12}
+    >
       <div
         className={classNames("life-bar", {
-          "life-bar-activated": matStore.isMe(currentPlayer),
+          "life-bar-activated": active,
         })}
       >
-        <div className="name">{snapPlayer.getMePlayer().name}</div>
-        <div className="life">
-          <AnimatedNumbers animateToNumber={meLife} />
-        </div>
+        <div className="name">{name}</div>
+        <div className="life">{<AnimatedNumbers animateToNumber={life} />}</div>
       </div>
+      {active && (
+        <div className="timer-container">
+          <Progress
+            type="circle"
+            percent={(timeLimit / 240) * 100}
+            strokeWidth={20}
+            size={14}
+          />
+          <div className="timer-text">{timeText}</div>
         </div>
+      )}
+    </Space>
   );
 };

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

@@ -28,6 +28,7 @@ import {
 } from "@/api";
 import { cardStore, matStore } from "@/stores";
 import PhaseType = ygopro.StocGameMessage.MsgNewPhase.PhaseType;
+import { Timer } from "../Timer";
 
 const { phase } = matStore;
 const { useToken } = theme;

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

-#timer-container {
-  position: fixed;
-  display: flex;
-  top: 0;
-  right: 0;
-  height: 100vh;
-  padding: 20px 35px;
-  flex-direction: column;
-  pointer-events: none;
-}
-
-.timer {
-  width: 100px;
-  color: white;
-  background-color: #323232;
-  font-family: var(--theme-font);
-  border: 1px solid #222;
-  padding: 1rem;
-  padding-bottom: 0.6rem;
-  border-radius: 8px;
-  text-align: center;
-  display: flex;
-  flex-direction: column;
-  font-size: 1.2rem;
-}

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

-import "./index.scss";
-
-import React, { useEffect, useState } from "react";
-import { useSnapshot } from "valtio";
-
-import { matStore } from "@/stores";
-
-export const Timer: React.FC = () => {
-  const [time, setTime] = useState(0);
-  const snap = useSnapshot(matStore);
-
-  useEffect(() => {
-    const interval = setInterval(() => {
-      if (time > 0) {
-        setTime((time) => time - 1);
-      }
-    }, 1000);
-    return () => clearInterval(interval);
-  }, [time]);
-
-  useEffect(() => {
-    setTime(snap.timeLimits.me);
-  }, [snap.timeLimits.me]);
-
-  useEffect(() => {
-    setTime(snap.timeLimits.op);
-  }, [snap.timeLimits.op]);
-
-  return (
-    <div id="timer-container">
-      <div className="timer">{time}</div>
-    </div>
-  );
-};

src/ui/Duel/PlayMat/index.ts

 export * from "./LifeBar";
 export * from "./Mat";
 export * from "./Menu";
-export * from "./Timer";