From 6e87d1d114ec9bc9956e845f5eda335bbc5b7c72 Mon Sep 17 00:00:00 2001 From: Mason Thomas Date: Thu, 30 Nov 2023 19:33:06 -0600 Subject: [PATCH 1/4] Fixed scrollbar issue Changed value from 7px to 8px fixed the issue on Chrome --- src/client/chessboard-wrapper.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/client/chessboard-wrapper.tsx b/src/client/chessboard-wrapper.tsx index 26a9a827..096bd6c9 100644 --- a/src/client/chessboard-wrapper.tsx +++ b/src/client/chessboard-wrapper.tsx @@ -12,7 +12,7 @@ interface Transform { function computeChessboardTransform(canvasHeight: number, canvasWidth: number): Transform { // We need exactly 7 less pixels to prevent scrollbars from appearing... - const width = Math.min(canvasHeight, canvasWidth) - 7; + const width = Math.min(canvasHeight, canvasWidth) - 8; const height = width; const xShift = (canvasWidth - width) / 2; From ee7733fbe4e33fac3a8f8adc9aef79b151041531 Mon Sep 17 00:00:00 2001 From: Alex Kempen Date: Thu, 30 Nov 2023 19:48:58 -0600 Subject: [PATCH 2/4] Changed chessboard to scale based on size --- src/client/chessboard-wrapper.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/client/chessboard-wrapper.tsx b/src/client/chessboard-wrapper.tsx index 096bd6c9..f2d6abb3 100644 --- a/src/client/chessboard-wrapper.tsx +++ b/src/client/chessboard-wrapper.tsx @@ -10,13 +10,13 @@ interface Transform { left: number; } -function computeChessboardTransform(canvasHeight: number, canvasWidth: number): Transform { - // We need exactly 7 less pixels to prevent scrollbars from appearing... - const width = Math.min(canvasHeight, canvasWidth) - 8; +function computeChessboardTransform(canvasHeight: number, canvasWidth: number, scale: number): Transform { + // Alternative: subtract off at least 8 to prevent scrollbars + const width = Math.min(canvasHeight, canvasWidth) * scale; const height = width; const xShift = (canvasWidth - width) / 2; - const yShift = (canvasHeight - height) / 2; // + height; + const yShift = (canvasHeight - height) / 2; return { left: xShift, top: yShift, height, width }; } @@ -34,7 +34,7 @@ export function ChessboardWrapper(props: ChessboardWrapperProps): JSX.Element { const handleResize = (entries: ResizeEntry[]) => { const { height, width } = entries[0].contentRect; - const transform = computeChessboardTransform(height, width); + const transform = computeChessboardTransform(height, width, 0.85); setTransform(transform); }; From 6f8a888ca3873e01d2644f300d9e6498f3519ab0 Mon Sep 17 00:00:00 2001 From: Mason Thomas Date: Thu, 30 Nov 2023 19:33:06 -0600 Subject: [PATCH 3/4] Fixed scrollbar issue Changed value from 7px to 8px fixed the issue on Chrome --- src/client/chessboard-wrapper.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/client/chessboard-wrapper.tsx b/src/client/chessboard-wrapper.tsx index 26a9a827..096bd6c9 100644 --- a/src/client/chessboard-wrapper.tsx +++ b/src/client/chessboard-wrapper.tsx @@ -12,7 +12,7 @@ interface Transform { function computeChessboardTransform(canvasHeight: number, canvasWidth: number): Transform { // We need exactly 7 less pixels to prevent scrollbars from appearing... - const width = Math.min(canvasHeight, canvasWidth) - 7; + const width = Math.min(canvasHeight, canvasWidth) - 8; const height = width; const xShift = (canvasWidth - width) / 2; From 0f8fa45a21ef148672be424bd29db938f7a171fb Mon Sep 17 00:00:00 2001 From: Alex Kempen Date: Thu, 30 Nov 2023 19:48:58 -0600 Subject: [PATCH 4/4] Changed chessboard to scale based on size --- src/client/chessboard-wrapper.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/client/chessboard-wrapper.tsx b/src/client/chessboard-wrapper.tsx index 096bd6c9..f2d6abb3 100644 --- a/src/client/chessboard-wrapper.tsx +++ b/src/client/chessboard-wrapper.tsx @@ -10,13 +10,13 @@ interface Transform { left: number; } -function computeChessboardTransform(canvasHeight: number, canvasWidth: number): Transform { - // We need exactly 7 less pixels to prevent scrollbars from appearing... - const width = Math.min(canvasHeight, canvasWidth) - 8; +function computeChessboardTransform(canvasHeight: number, canvasWidth: number, scale: number): Transform { + // Alternative: subtract off at least 8 to prevent scrollbars + const width = Math.min(canvasHeight, canvasWidth) * scale; const height = width; const xShift = (canvasWidth - width) / 2; - const yShift = (canvasHeight - height) / 2; // + height; + const yShift = (canvasHeight - height) / 2; return { left: xShift, top: yShift, height, width }; } @@ -34,7 +34,7 @@ export function ChessboardWrapper(props: ChessboardWrapperProps): JSX.Element { const handleResize = (entries: ResizeEntry[]) => { const { height, width } = entries[0].contentRect; - const transform = computeChessboardTransform(height, width); + const transform = computeChessboardTransform(height, width, 0.85); setTransform(transform); };