feat: manually resizable board

src/chessboard/components/Board.tsx

@@ -4,8 +4,9 @@ import { Arrows } from "./Arrows";
 import { useChessboard } from "../context/chessboard-context";
 import { PromotionDialog } from "./PromotionDialog";
 import { WhiteKing } from "./ErrorBoundary";
+import { ResizableButton } from "./ResizeButton";
 
-export function Board() {
+export function Board({ boardContainer, setBoardWidth }: any) {
   const boardRef = useRef<HTMLDivElement>(null);
 
   const {
@@ -66,6 +67,11 @@ export function Board() {
             <PromotionDialog />
           </>
         )}
+        <ResizableButton
+          initialBoardWidth={boardWidth}
+          boardContainer={boardContainer}
+          setBoardWidth={setBoardWidth}
+        />
       </div>
     </div>
   ) : (

src/chessboard/components/ResizeButton.tsx

@@ -0,0 +1,77 @@
+import { useState, useRef, CSSProperties } from "react";
+
+export const ResizableButton = ({
+  initialBoardWidth,
+  boardContainer,
+  setBoardWidth,
+}: any) => {
+  const squareWidth = initialBoardWidth / 8;
+  const [buttonStyle, setButtonStyle] = useState<CSSProperties>({
+    position: "absolute",
+    zIndex: "24",
+    border: "none",
+    outline: "none",
+    padding: "0",
+    borderRadius: "50%",
+    cursor: "nwse-resize",
+    background: "transparent",
+  });
+
+  const resizeButtonRef = useRef<HTMLButtonElement>(null);
+
+  function calculateResizedDivHeight(e: MouseEvent) {
+    setButtonStyle({ ...buttonStyle, background: "#ff980091" });
+    const mouseYCoord = e.clientY;
+    const mouseXCoord = e.clientX;
+    setBoardWidth(
+      Math.max(
+        mouseYCoord - boardContainer.top,
+        mouseXCoord - boardContainer.left
+      )
+    );
+  }
+
+  function stopResize() {
+    setButtonStyle({ ...buttonStyle, background: "transparent" });
+    window.removeEventListener("mousemove", calculateResizedDivHeight, false);
+    window.removeEventListener("mouseup", stopResize, false);
+  }
+
+  const onResizeBoard = () => {
+    window.addEventListener("mousemove", calculateResizedDivHeight, false);
+    window.addEventListener("mouseup", stopResize, false);
+  };
+  return (
+    <button
+      ref={resizeButtonRef}
+      style={{
+        ...buttonStyle,
+        right: `${-squareWidth / 4}px`,
+        bottom: `${-squareWidth / 4}px`,
+        width: `${squareWidth / 2}px`,
+        height: `${squareWidth / 2}px`,
+      }}
+      onClick={() => console.log("Clik")}
+      onMouseDown={onResizeBoard}
+      onMouseOver={() => {
+        setButtonStyle({ ...buttonStyle, background: "#ff980091" });
+      }}
+      onMouseOut={() => {
+        setButtonStyle({ ...buttonStyle, background: "transparent" });
+      }}
+    >
+      <svg
+        width="100%"
+        height="100%"
+        viewBox="0 0 0.96 0.96"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path d="M.4.8h.4V.4" stroke="#33363F" strokeWidth=".08" />
+        <path d="M.48.68h.2v-.2" stroke="#33363F" strokeWidth=".08" />
+      </svg>
+    </button>
+  );
+};
+
+export default ResizableButton;

src/chessboard/index.tsx

@@ -82,6 +82,7 @@ export const Chessboard = forwardRef<ClearPremoves, ChessboardProps>(
           style={{
             display: "flex",
             flexDirection: "column",
+            alignItems: "center",
             width: "100%",
           }}
         >
@@ -98,7 +99,10 @@ export const Chessboard = forwardRef<ClearPremoves, ChessboardProps>(
                 ref={ref}
               >
                 <CustomDragLayer boardContainer={boardContainerPos} />
-                <Board />
+                <Board
+                  boardContainer={boardContainerPos}
+                  setBoardWidth={setBoardWidth}
+                />
               </ChessboardProvider>
             )}
           </DndProvider>

stories/Chessboard.stories.tsx

@@ -1063,3 +1063,45 @@ export const BoardWithCustomArrows = () => {
     </div>
   );
 };
+
+///////////////////////////////////
+////////// ResizableBoard ///////////
+///////////////////////////////////
+export const ResizableBoard = () => {
+  const emptyPanelStyle = {
+    background: "#f0d9b5",
+    borderRadius: "16px",
+    border: "2px solid #b58863",
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    flex: "1 1 auto",
+    margin: " 0px 24px 24px",
+  };
+  return (
+    <>
+      <div style={{ display: "flex" }}>
+        <div style={emptyPanelStyle}>Left Panel</div>
+        <div
+          style={{
+            flex: "0 0 360px",
+            marginBottom: "24px",
+          }}
+        >
+          <Chessboard
+            id="ResizableBoard"
+            customBoardStyle={{
+              borderRadius: "4px",
+              boxShadow: "0 2px 10px rgba(0, 0, 0, 0.5)",
+            }}
+          />
+          <button style={buttonStyle}>Button 1</button>
+          <button style={buttonStyle}>Button 2</button>
+          <button style={buttonStyle}>Button 3</button>
+        </div>
+        <div style={emptyPanelStyle}>Right Panel</div>
+      </div>
+      <div style={{ ...emptyPanelStyle, minHeight: "240px" }}>Bottom Panel</div>
+    </>
+  );
+};