update LifeBar and Menu

src/styles/mat.css

@@ -44,7 +44,7 @@ button:focus-visible {
   position: fixed;
   display: flex;
   gap: 20px;
-  top: 20px;
+  bottom: 20px;
   right: 20px;
   z-index: 999;
 }

src/ui/Duel/Main.tsx

@@ -13,8 +13,7 @@ import {
   SortCardModal,
   YesNoModal,
 } from "./Message";
-import { Mat } from "./NewPlayMat";
-import { Menu } from "./NewPlayMat/Menu";
+import { LifeBar, Mat, Menu } from "./NewPlayMat";
 
 const NeosDuel = () => {
   return (
@@ -23,6 +22,7 @@ const NeosDuel = () => {
       {/* <Test /> */}
       {/* <Mat /> */}
       <Menu />
+      <LifeBar />
       <Mat />
       <CardModal />
       <CardListModal />

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

+#life-bar-container {
+  position: fixed;
+  display: flex;
+  gap: 20px;
+  top: 20px;
+  right: 20px;
+  font-size: 1.5em;
+  font-weight: 500;
+  font-family: inherit;
+  flex-direction: column;
+}
+
+#life-bar {
+  padding: 0.8em 1.6em;
+  background-color: #a9a9a9;
+  border-radius: 8px;
+  text-align: left;
+  border: 1px solid transparent;
+  color: black;
+  opacity: 0.4;
+}

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

+import "./index.scss";
+
+import React from "react";
+import { useSnapshot } from "valtio";
+
+import { matStore } from "@/stores";
+
+export const LifeBar: React.FC = () => {
+  const snap = useSnapshot(matStore.initInfo);
+
+  return (
+    <div id="life-bar-container">
+      <div id="life-bar">{`${snap.me.name}: ${snap.me.life}`}</div>
+      <div id="life-bar">{`${snap.op.name}: ${snap.op.life}`}</div>
+    </div>
+  );
+};

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

+#controller {
+  position: fixed;
+  display: flex;
+  gap: 20px;
+  bottom: 20px;
+  right: 20px;
+  z-index: 999;
+}
+
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+button:hover {
+  border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}

src/ui/Duel/NewPlayMat/Menu.tsx → src/ui/Duel/NewPlayMat/Menu/index.tsx

-import "@/styles/mat.css";
+import "./index.scss";
 
 import { Button, Modal } from "antd";
 import React, { useState } from "react";

src/ui/Duel/NewPlayMat/index.ts

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