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

update LifeBar and Menu

parent 9f0682ec
......@@ -44,7 +44,7 @@ button:focus-visible {
position: fixed;
display: flex;
gap: 20px;
top: 20px;
bottom: 20px;
right: 20px;
z-index: 999;
}
......
......@@ -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 />
......
#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 React, { useState } from "react";
......
export * from "./LifeBar";
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