From 8f33bf360dee0a5fd10d3865baf5aa150b55ba66 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Fri, 20 Mar 2026 01:13:52 +0000 Subject: [PATCH 1/9] Initial plan From 34f9f73a57bc723b4a26d8f8691247d9567cbf77 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Fri, 20 Mar 2026 01:34:05 +0000 Subject: [PATCH 2/9] fix: extend animation overlay over board border, fix z-index layering Co-authored-by: ProLoser <67395+ProLoser@users.noreply.github.com> --- src/Board/Board.css | 3 ++- src/Board/MoveAnimation.css | 4 ++-- src/Board/MoveAnimation.tsx | 5 ++--- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/Board/Board.css b/src/Board/Board.css index b8133120..c5559b2c 100644 --- a/src/Board/Board.css +++ b/src/Board/Board.css @@ -5,6 +5,7 @@ --secondary-hover: rgb(128, 128, 211); --valid: greenyellow; --highlight: red; + --board-border: 5vmin; user-select: none; position: relative; display: grid; @@ -13,7 +14,7 @@ height: 100%; width: 100%; touch-action: none; - border: 5vmin solid #aaa; + border: var(--board-border) solid #aaa; transition: border-color 1s; box-sizing: border-box; .selected { diff --git a/src/Board/MoveAnimation.css b/src/Board/MoveAnimation.css index a289a683..77d02390 100644 --- a/src/Board/MoveAnimation.css +++ b/src/Board/MoveAnimation.css @@ -1,8 +1,8 @@ .move-animation-overlay { position: absolute; - inset: 0; + inset: calc(-1 * var(--board-border, 5vmin)); pointer-events: none; - z-index: 10; + z-index: 0; overflow: hidden; } diff --git a/src/Board/MoveAnimation.tsx b/src/Board/MoveAnimation.tsx index bd5d383c..26110519 100644 --- a/src/Board/MoveAnimation.tsx +++ b/src/Board/MoveAnimation.tsx @@ -37,9 +37,8 @@ export default function MoveAnimation({ pairs, boardRef }: MoveAnimationProps) { } const boardRect = board.getBoundingClientRect(); - const boardStyle = getComputedStyle(board); - const overlayLeft = boardRect.left + parseFloat(boardStyle.borderLeftWidth); - const overlayTop = boardRect.top + parseFloat(boardStyle.borderTopWidth); + const overlayLeft = boardRect.left; + const overlayTop = boardRect.top; const points = board.querySelectorAll('.point'); const bars = board.querySelectorAll('.bar'); From 592e9ad1db92db2afbaf24f0b155ded491baf1b1 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Sat, 21 Mar 2026 22:52:44 +0000 Subject: [PATCH 3/9] fix: revert inset/JS, drop overflow:hidden to fix piece clipping at board edge Co-authored-by: ProLoser <67395+ProLoser@users.noreply.github.com> Agent-Logs-Url: https://github.com/ProLoser/PeaceInTheMiddleEast/sessions/c49561ee-6e2b-40de-aa09-138d1478b152 --- src/Board/MoveAnimation.css | 3 +-- src/Board/MoveAnimation.tsx | 5 +++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/Board/MoveAnimation.css b/src/Board/MoveAnimation.css index 77d02390..0ad4d060 100644 --- a/src/Board/MoveAnimation.css +++ b/src/Board/MoveAnimation.css @@ -1,9 +1,8 @@ .move-animation-overlay { position: absolute; - inset: calc(-1 * var(--board-border, 5vmin)); + inset: 0; pointer-events: none; z-index: 0; - overflow: hidden; } .move-animation-piece { diff --git a/src/Board/MoveAnimation.tsx b/src/Board/MoveAnimation.tsx index 26110519..bd5d383c 100644 --- a/src/Board/MoveAnimation.tsx +++ b/src/Board/MoveAnimation.tsx @@ -37,8 +37,9 @@ export default function MoveAnimation({ pairs, boardRef }: MoveAnimationProps) { } const boardRect = board.getBoundingClientRect(); - const overlayLeft = boardRect.left; - const overlayTop = boardRect.top; + const boardStyle = getComputedStyle(board); + const overlayLeft = boardRect.left + parseFloat(boardStyle.borderLeftWidth); + const overlayTop = boardRect.top + parseFloat(boardStyle.borderTopWidth); const points = board.querySelectorAll('.point'); const bars = board.querySelectorAll('.bar'); From cad0af60a733984db55a499fb950bcc3f9003f55 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Sat, 21 Mar 2026 23:05:12 +0000 Subject: [PATCH 4/9] fix: move overlay last in DOM for paint order, clip at board edge, raise dialog z-index Co-authored-by: ProLoser <67395+ProLoser@users.noreply.github.com> Agent-Logs-Url: https://github.com/ProLoser/PeaceInTheMiddleEast/sessions/8ac6e086-2d7f-4433-8d84-2eb4f6fb9eac --- src/Board/MoveAnimation.css | 2 ++ src/Dialogues/Dialogues.css | 2 +- src/index.tsx | 2 +- 3 files changed, 4 insertions(+), 2 deletions(-) diff --git a/src/Board/MoveAnimation.css b/src/Board/MoveAnimation.css index 0ad4d060..97bebff4 100644 --- a/src/Board/MoveAnimation.css +++ b/src/Board/MoveAnimation.css @@ -3,6 +3,8 @@ inset: 0; pointer-events: none; z-index: 0; + overflow: clip; + overflow-clip-margin: var(--board-border, 5vmin); } .move-animation-piece { diff --git a/src/Dialogues/Dialogues.css b/src/Dialogues/Dialogues.css index 5485cdd7..314d8f0e 100644 --- a/src/Dialogues/Dialogues.css +++ b/src/Dialogues/Dialogues.css @@ -1,5 +1,5 @@ dialog { - z-index: 1; + z-index: 100; background: var(--dialog-background-color); color: var(--primary-color); backdrop-filter: blur(10px); diff --git a/src/index.tsx b/src/index.tsx index 1dac5dab..f3086a6d 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -459,7 +459,6 @@ export function App() { pulsate={isMyTurn && game.status === Status.Rolling} undo={!!match && isMyTurn && usedDice.length > 0 && usedDice.length < game.dice.length} /> -
0 && sources.has(-1) @@ -537,6 +536,7 @@ export function App() { moved={lastMove.moved[index]} /> )} +
); From 5ff2963dc953cabeb393bc38c5d80f5694da0457 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Sun, 22 Mar 2026 02:05:01 +0000 Subject: [PATCH 5/9] fix: raise overlay z-index to 10 so animated pieces render above board pieces, below dialog Co-authored-by: ProLoser <67395+ProLoser@users.noreply.github.com> Agent-Logs-Url: https://github.com/ProLoser/PeaceInTheMiddleEast/sessions/00e647c5-2d2c-455e-b986-2a96d267be2a --- src/Board/MoveAnimation.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Board/MoveAnimation.css b/src/Board/MoveAnimation.css index 97bebff4..b5fb32c1 100644 --- a/src/Board/MoveAnimation.css +++ b/src/Board/MoveAnimation.css @@ -2,7 +2,7 @@ position: absolute; inset: 0; pointer-events: none; - z-index: 0; + z-index: 10; overflow: clip; overflow-clip-margin: var(--board-border, 5vmin); } From 26dbae495179da9185313dbed0228c2433aafdc3 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Sun, 22 Mar 2026 02:15:19 +0000 Subject: [PATCH 6/9] fix: expand overlay to board border-box so animated pieces paint over the border Co-authored-by: ProLoser <67395+ProLoser@users.noreply.github.com> Agent-Logs-Url: https://github.com/ProLoser/PeaceInTheMiddleEast/sessions/ec66ed3b-3f8d-4976-a5f2-73d473c0e1e4 --- src/Board/MoveAnimation.css | 5 ++--- src/Board/MoveAnimation.tsx | 5 ++--- 2 files changed, 4 insertions(+), 6 deletions(-) diff --git a/src/Board/MoveAnimation.css b/src/Board/MoveAnimation.css index b5fb32c1..ec8c5282 100644 --- a/src/Board/MoveAnimation.css +++ b/src/Board/MoveAnimation.css @@ -1,10 +1,9 @@ .move-animation-overlay { position: absolute; - inset: 0; + inset: calc(-1 * var(--board-border, 5vmin)); pointer-events: none; z-index: 10; - overflow: clip; - overflow-clip-margin: var(--board-border, 5vmin); + overflow: hidden; } .move-animation-piece { diff --git a/src/Board/MoveAnimation.tsx b/src/Board/MoveAnimation.tsx index bd5d383c..26110519 100644 --- a/src/Board/MoveAnimation.tsx +++ b/src/Board/MoveAnimation.tsx @@ -37,9 +37,8 @@ export default function MoveAnimation({ pairs, boardRef }: MoveAnimationProps) { } const boardRect = board.getBoundingClientRect(); - const boardStyle = getComputedStyle(board); - const overlayLeft = boardRect.left + parseFloat(boardStyle.borderLeftWidth); - const overlayTop = boardRect.top + parseFloat(boardStyle.borderTopWidth); + const overlayLeft = boardRect.left; + const overlayTop = boardRect.top; const points = board.querySelectorAll('.point'); const bars = board.querySelectorAll('.bar'); From 87a2b4f71e480de81a5f2902646bb1ad4e7dc595 Mon Sep 17 00:00:00 2001 From: Dean Sofer Date: Sun, 22 Mar 2026 12:22:03 -0700 Subject: [PATCH 7/9] Update src/Board/MoveAnimation.css Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> --- src/Board/MoveAnimation.css | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/Board/MoveAnimation.css b/src/Board/MoveAnimation.css index ec8c5282..31ed3672 100644 --- a/src/Board/MoveAnimation.css +++ b/src/Board/MoveAnimation.css @@ -1,6 +1,8 @@ .move-animation-overlay { position: absolute; inset: calc(-1 * var(--board-border, 5vmin)); + width: auto; + height: auto; pointer-events: none; z-index: 10; overflow: hidden; From f7bcc0208566262277eb13ecfe66ec147b81d5df Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Sun, 22 Mar 2026 19:28:52 +0000 Subject: [PATCH 8/9] revert: restore borderWidth offset in overlay coordinate origin Co-authored-by: ProLoser <67395+ProLoser@users.noreply.github.com> Agent-Logs-Url: https://github.com/ProLoser/PeaceInTheMiddleEast/sessions/37dc4af9-a89e-49f5-9d01-c02df503df13 --- src/Board/MoveAnimation.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/Board/MoveAnimation.tsx b/src/Board/MoveAnimation.tsx index 5e35895e..f4f84e47 100644 --- a/src/Board/MoveAnimation.tsx +++ b/src/Board/MoveAnimation.tsx @@ -37,8 +37,9 @@ export default function MoveAnimation({ pairs, boardRef }: MoveAnimationProps) { } const boardRect = board.getBoundingClientRect(); - const overlayLeft = boardRect.left; - const overlayTop = boardRect.top; + const boardStyle = getComputedStyle(board); + const overlayLeft = boardRect.left + parseFloat(boardStyle.borderLeftWidth); + const overlayTop = boardRect.top + parseFloat(boardStyle.borderTopWidth); const points = board.querySelectorAll('.point'); const bars = board.querySelectorAll('.bar'); From cc12102495735f8ae9af2cf2c686f8b89bf91b4d Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Sat, 28 Mar 2026 00:39:16 +0000 Subject: [PATCH 9/9] fix: sample piece size from .point only, not bar pieces Agent-Logs-Url: https://github.com/ProLoser/PeaceInTheMiddleEast/sessions/dd332c38-f685-42e4-8bd2-58f53adfcd82 Co-authored-by: ProLoser <67395+ProLoser@users.noreply.github.com> --- src/Board/MoveAnimation.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Board/MoveAnimation.tsx b/src/Board/MoveAnimation.tsx index f4f84e47..3167883a 100644 --- a/src/Board/MoveAnimation.tsx +++ b/src/Board/MoveAnimation.tsx @@ -44,7 +44,7 @@ export default function MoveAnimation({ pairs, boardRef }: MoveAnimationProps) { const points = board.querySelectorAll('.point'); const bars = board.querySelectorAll('.bar'); - const samplePiece = board.querySelector('.piece:not(.ghost):not(.moved) img'); + const samplePiece = board.querySelector('.point .piece:not(.ghost):not(.moved) img'); const pieceSize = samplePiece ? samplePiece.getBoundingClientRect().width : boardRect.width / 17;