Merge branch 'feat/ui/time' into 'main'

Feat/ui/time

See merge request !241

src/api/ocgcore/ocgAdapter/stoc/stocTimeLimit.ts

@@ -20,6 +20,7 @@ export default class TimeLimit implements StocAdapter {
     const reader = new BufferReader(this.packet.exData);
 
     const player = reader.readInt8();
+    const _ = reader.readUint8(); // padding byte
     const leftTime = reader.readUint16();
 
     return new ygopro.YgoStocMsg({

src/ui/Duel/Main.tsx

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

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";