Commit 4a641b35 authored by Chunchi Che's avatar Chunchi Che

add outer block

parent 3400fea1
Pipeline #21430 failed with stages
in 54 seconds
......@@ -165,6 +165,14 @@ button:focus-visible {
gap: var(--block-column-gap);
}
.block-left {
margin-left: calc((var(--block-width) + var(--block-column-gap)) * -1);
}
.block-right {
margin-right: calc((var(--block-width) + var(--block-column-gap)) * -1);
}
#board-bg {
display: flex;
flex-direction: column;
......
......@@ -9,10 +9,20 @@ export const Block: React.FC<{
isExtra?: boolean;
highlight?: boolean;
onClick?: MouseEventHandler;
}> = ({ isExtra = false, highlight = false, onClick }) => (
outerLeft?: boolean;
outerRight?: boolean;
}> = ({
isExtra = false,
highlight = false,
onClick,
outerLeft = false,
outerRight = false,
}) => (
<div
className={classnames("block", {
"block-extra": isExtra,
"block-left": outerLeft,
"block-right": outerRight,
})}
style={
{
......@@ -23,9 +33,22 @@ export const Block: React.FC<{
/>
);
export function BlockRow<T extends DuelFieldState>(props: { states: T }) {
export function BlockRow<T extends DuelFieldState>(props: {
states: T;
leftState?: CardState;
rightState?: CardState;
}) {
return (
<div className="block-row">
{props.leftState ? (
<Block
highlight={props.leftState.placeInteractivity !== undefined}
onClick={() => {}}
outerLeft
/>
) : (
<></>
)}
{props.states.map((block, idx) => (
<Block
key={idx}
......@@ -35,6 +58,15 @@ export function BlockRow<T extends DuelFieldState>(props: { states: T }) {
}}
/>
))}
{props.rightState ? (
<Block
highlight={props.rightState.placeInteractivity !== undefined}
onClick={() => {}}
outerRight
/>
) : (
<></>
)}
</div>
);
}
......
......@@ -24,14 +24,20 @@ export const Mat = () => {
<div id="board">
<div id="board-bg">
<BlockRow states={magics.op.slice(0, 5) as DuelFieldState} />
<BlockRow states={monsters.op.slice(0, 5) as DuelFieldState} />
<BlockRow
states={monsters.op.slice(0, 5) as DuelFieldState}
rightState={magics.op[5] as CardState}
/>
<ExtraBlockRow
meLeft={monsters.me[5] as CardState}
meRight={monsters.me[6] as CardState}
opLeft={monsters.op[5] as CardState}
opRight={monsters.op[6] as CardState}
/>
<BlockRow states={monsters.me.slice(0, 5) as DuelFieldState} />
<BlockRow
states={monsters.me.slice(0, 5) as DuelFieldState}
leftState={magics.me[5] as CardState}
/>
<BlockRow states={magics.me.slice(0, 5) as DuelFieldState} />
</div>
</div>
......
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