Commit eb4a3e06 authored by Chunchi Che's avatar Chunchi Che

update mat.tsx

parent 7572c8b2
Pipeline #21426 passed with stages
in 16 minutes and 26 seconds
import "@/styles/mat.css";
import classnames from "classnames";
import React from "react";
import React, { MouseEventHandler } from "react";
export const Block: React.FC<{
isExtra?: boolean;
highlight?: boolean;
}> = ({ isExtra = false, highlight = false }) => (
onClick?: MouseEventHandler;
}> = ({ isExtra = false, highlight = false, onClick }) => (
<div
className={classnames("block", {
"block-extra": isExtra,
......@@ -16,5 +17,6 @@ export const Block: React.FC<{
"--highlight-on": highlight ? 1 : 0,
} as any
}
onClick={onClick}
/>
);
import "@/styles/mat.css";
import React from "react";
import { useSnapshot } from "valtio";
import { DuelFieldState, matStore } from "@/stores";
import { Block } from "./Block";
import { Menu } from "./Menu";
export const Mat = () => {
const snap = useSnapshot(matStore);
const monsters = snap.monsters;
const magics = snap.magics;
return (
<>
<Menu />
<div id="life-bar-container">
<div id="life-bar">{snap.initInfo.me.life}</div>
<div id="life-bar">{snap.initInfo.op.life}</div>
</div>
<div id="camera">
<div id="board">
<div id="borad-bg">
<BlockRow states={magics.op.slice(0, 5) as DuelFieldState} />
<BlockRow states={monsters.op.slice(0, 5) as DuelFieldState} />
<BlockRow
states={monsters.op.slice(5, 7) as DuelFieldState}
isExtra={true}
/>
<BlockRow
states={monsters.me.slice(5, 7) as DuelFieldState}
isExtra={true}
/>
<BlockRow states={monsters.me.slice(0, 5) as DuelFieldState} />
<BlockRow states={magics.me.slice(0, 5) as DuelFieldState} />
</div>
</div>
</div>
</>
);
};
function BlockRow<T extends DuelFieldState>(props: {
states: T;
isExtra?: boolean;
}) {
return (
<div className="block-row">
{props.states.map((block, idx) => (
<Block
key={idx}
isExtra={props.isExtra}
highlight={block.placeInteractivity !== undefined}
onClick={() => {
// TODO
}}
/>
))}
</div>
);
}
import "@/styles/mat.css";
import React from "react";
export const Menu = () => {
// TODO
return (
<div id="controller">
<button>A1</button>
<button>A2</button>
</div>
);
};
export * from "./Block";
export * from "./Card";
export * from "./Mat";
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