Commit 2662dda3 authored by Chunchi Che's avatar Chunchi Che

update LifeBar and Menu

parent 9f0682ec
...@@ -44,7 +44,7 @@ button:focus-visible { ...@@ -44,7 +44,7 @@ button:focus-visible {
position: fixed; position: fixed;
display: flex; display: flex;
gap: 20px; gap: 20px;
top: 20px; bottom: 20px;
right: 20px; right: 20px;
z-index: 999; z-index: 999;
} }
......
...@@ -13,8 +13,7 @@ import { ...@@ -13,8 +13,7 @@ import {
SortCardModal, SortCardModal,
YesNoModal, YesNoModal,
} from "./Message"; } from "./Message";
import { Mat } from "./NewPlayMat"; import { LifeBar, Mat, Menu } from "./NewPlayMat";
import { Menu } from "./NewPlayMat/Menu";
const NeosDuel = () => { const NeosDuel = () => {
return ( return (
...@@ -23,6 +22,7 @@ const NeosDuel = () => { ...@@ -23,6 +22,7 @@ const NeosDuel = () => {
{/* <Test /> */} {/* <Test /> */}
{/* <Mat /> */} {/* <Mat /> */}
<Menu /> <Menu />
<LifeBar />
<Mat /> <Mat />
<CardModal /> <CardModal />
<CardListModal /> <CardListModal />
......
#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;
}
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>
);
};
#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;
}
import "@/styles/mat.css"; import "./index.scss";
import { Button, Modal } from "antd"; import { Button, Modal } from "antd";
import React, { useState } from "react"; import React, { useState } from "react";
......
export * from "./LifeBar";
export * from "./Mat"; export * from "./Mat";
export * from "./Menu";
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment