add outer block

src/styles/mat.css

@@ -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;

src/ui/Duel/PlayMat2/Block.tsx

@@ -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>
   );
 }

src/ui/Duel/PlayMat2/Mat.tsx

@@ -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>