From 6d68036ae5265ffbaec553b4649441ac017f6790 Mon Sep 17 00:00:00 2001
From: chrislicodes <christophlindstaedt@web.de>
Date: Thu, 25 May 2023 13:18:07 +0200
Subject: [PATCH] chore: fix keys

---
 src/components/react/PgnViewer/index.tsx | 169 +++++++++++++----------
 storage/Qb3_uGSoPFPK8-nMPPvGx.json       | 110 +++++++++++++++
 2 files changed, 204 insertions(+), 75 deletions(-)

diff --git a/src/components/react/PgnViewer/index.tsx b/src/components/react/PgnViewer/index.tsx
index b09a351..d4066dd 100644
--- a/src/components/react/PgnViewer/index.tsx
+++ b/src/components/react/PgnViewer/index.tsx
@@ -130,7 +130,7 @@ export const PgnViewer = React.memo(
 							const [wMove, bMove] = pair;
 
 							return (
-								<React.Fragment key={wMove.san + bMove?.san}>
+								<React.Fragment key={wMove.san + bMove?.san + currentMoveIndex}>
 									<p className="move-indicator center">
 										{currentMoveIndex + 1}
 									</p>
@@ -150,80 +150,22 @@ export const PgnViewer = React.memo(
 										<VariantsContainer>
 											{!!wMove.variants.length && (
 												<VariantContainer>
-													{wMove.variants.map((variant, i) => {
+													{wMove.variants.map((variant) => {
 														return (
-															<VariantMoveItemContainer key="TODO">
-																{chunkArray(variant.moves, 2).map((pair, i) => {
-																	const [bMove, wMove] = pair;
+															<VariantMoveItemContainer key={variant.variantId}>
+																{chunkArray(variant.moves, 2).map(
+																	(pair, wMoveVarianti) => {
+																		const [bMove, wMove] = pair;
 
-																	return (
-																		<>
-																			<VariantMoveItem
-																				key="TODO"
-																				isCurrentMove={
-																					bMove.moveId === currentMoveId
+																		return (
+																			<React.Fragment
+																				key={
+																					bMove.san +
+																					wMove?.san +
+																					currentMoveIndex
 																				}
-																				san={bMove.san}
-																				onMoveItemClick={() =>
-																					onMoveItemClick(bMove.moveId)
-																				}
-																				moveIndicator={
-																					(i === 0 &&
-																						`${
-																							currentMoveIndex + 1 + i
-																						}... `) ||
-																					null
-																				}
-																			/>
-																			{wMove && (
+																			>
 																				<VariantMoveItem
-																					key="TODO"
-																					isCurrentMove={
-																						wMove.moveId === currentMoveId
-																					}
-																					san={wMove.san}
-																					onMoveItemClick={() =>
-																						onMoveItemClick(wMove.moveId)
-																					}
-																					moveIndicator={
-																						(i % 2 === 0 && null) ||
-																						`${currentMoveIndex + 2 + i}. `
-																					}
-																				/>
-																			)}
-																		</>
-																	);
-																})}
-															</VariantMoveItemContainer>
-														);
-													})}
-												</VariantContainer>
-											)}
-											{!!bMove?.variants.length && (
-												<VariantContainer>
-													{bMove.variants.map((variant, i) => {
-														return (
-															<VariantMoveItemContainer key="TODO">
-																{chunkArray(variant.moves, 2).map((pair, i) => {
-																	const [wMove, bMove] = pair;
-																	return (
-																		<>
-																			<VariantMoveItem
-																				key="TODO"
-																				isCurrentMove={
-																					wMove.moveId === currentMoveId
-																				}
-																				san={wMove.san}
-																				onMoveItemClick={() =>
-																					onMoveItemClick(wMove.moveId)
-																				}
-																				moveIndicator={`${
-																					currentMoveIndex + 2 + i
-																				}. `}
-																			/>
-																			{bMove && (
-																				<VariantMoveItem
-																					key="TODO"
 																					isCurrentMove={
 																						bMove.moveId === currentMoveId
 																					}
@@ -231,11 +173,88 @@ export const PgnViewer = React.memo(
 																					onMoveItemClick={() =>
 																						onMoveItemClick(bMove.moveId)
 																					}
+																					moveIndicator={
+																						(wMoveVarianti === 0 &&
+																							`${
+																								currentMoveIndex +
+																								1 +
+																								wMoveVarianti
+																							}... `) ||
+																						null
+																					}
 																				/>
-																			)}
-																		</>
-																	);
-																})}
+																				{wMove && (
+																					<VariantMoveItem
+																						isCurrentMove={
+																							wMove.moveId === currentMoveId
+																						}
+																						san={wMove.san}
+																						onMoveItemClick={() =>
+																							onMoveItemClick(wMove.moveId)
+																						}
+																						moveIndicator={
+																							(wMoveVarianti % 2 === 0 &&
+																								null) ||
+																							`${
+																								currentMoveIndex +
+																								2 +
+																								wMoveVarianti
+																							}. `
+																						}
+																					/>
+																				)}
+																			</React.Fragment>
+																		);
+																	}
+																)}
+															</VariantMoveItemContainer>
+														);
+													})}
+												</VariantContainer>
+											)}
+											{!!bMove?.variants.length && (
+												<VariantContainer>
+													{bMove.variants.map((variant) => {
+														return (
+															<VariantMoveItemContainer key={variant.variantId}>
+																{chunkArray(variant.moves, 2).map(
+																	(pair, bMoveVarianti) => {
+																		const [wMove, bMove] = pair;
+																		return (
+																			<React.Fragment
+																				key={
+																					wMove.san +
+																					bMove?.san +
+																					currentMoveIndex
+																				}
+																			>
+																				<VariantMoveItem
+																					isCurrentMove={
+																						wMove.moveId === currentMoveId
+																					}
+																					san={wMove.san}
+																					onMoveItemClick={() =>
+																						onMoveItemClick(wMove.moveId)
+																					}
+																					moveIndicator={`${
+																						currentMoveIndex + 2 + bMoveVarianti
+																					}. `}
+																				/>
+																				{bMove && (
+																					<VariantMoveItem
+																						isCurrentMove={
+																							bMove.moveId === currentMoveId
+																						}
+																						san={bMove.san}
+																						onMoveItemClick={() =>
+																							onMoveItemClick(bMove.moveId)
+																						}
+																					/>
+																				)}
+																			</React.Fragment>
+																		);
+																	}
+																)}
 															</VariantMoveItemContainer>
 														);
 													})}
diff --git a/storage/Qb3_uGSoPFPK8-nMPPvGx.json b/storage/Qb3_uGSoPFPK8-nMPPvGx.json
index 211171b..6074009 100644
--- a/storage/Qb3_uGSoPFPK8-nMPPvGx.json
+++ b/storage/Qb3_uGSoPFPK8-nMPPvGx.json
@@ -1018,6 +1018,116 @@
 			"variants": [],
 			"shapes": [],
 			"comment": null
+		},
+		{
+			"color": "b",
+			"piece": "b",
+			"from": "g4",
+			"to": "e2",
+			"san": "Bxe2",
+			"flags": "c",
+			"lan": "g4e2",
+			"before": "r2qkbnr/ppp2ppp/8/3pN3/5Bb1/8/PPP1PPPP/RN1QKB1R b KQkq - 15 12",
+			"after": "r2qkbnr/ppp2ppp/8/3pN3/5B2/8/PPP1bPPP/RN1QKB1R w KQkq - 0 13",
+			"captured": "p",
+			"moveId": "cfgzdVlwpbY22aa79pl9s",
+			"variants": [],
+			"shapes": [],
+			"comment": null
+		},
+		{
+			"color": "w",
+			"piece": "b",
+			"from": "f1",
+			"to": "e2",
+			"san": "Bxe2",
+			"flags": "c",
+			"lan": "f1e2",
+			"before": "r2qkbnr/ppp2ppp/8/3pN3/5B2/8/PPP1bPPP/RN1QKB1R w KQkq - 0 13",
+			"after": "r2qkbnr/ppp2ppp/8/3pN3/5B2/8/PPP1BPPP/RN1QK2R b KQkq - 0 13",
+			"captured": "b",
+			"moveId": "1FEL3uov7ACTDnIG8Ovh4",
+			"variants": [],
+			"shapes": [],
+			"comment": null
+		},
+		{
+			"color": "b",
+			"piece": "n",
+			"from": "g8",
+			"to": "f6",
+			"san": "Nf6",
+			"flags": "n",
+			"lan": "g8f6",
+			"before": "r2qkbnr/ppp2ppp/8/3pN3/5B2/8/PPP1BPPP/RN1QK2R b KQkq - 0 13",
+			"after": "r2qkb1r/ppp2ppp/5n2/3pN3/5B2/8/PPP1BPPP/RN1QK2R w KQkq - 1 14",
+			"moveId": "TMXQFY-_f0bsT_TymS7lg",
+			"variants": [],
+			"shapes": [],
+			"comment": null
+		},
+		{
+			"color": "w",
+			"piece": "n",
+			"from": "e5",
+			"to": "c6",
+			"san": "Nc6",
+			"flags": "n",
+			"lan": "e5c6",
+			"before": "r2qkb1r/ppp2ppp/5n2/3pN3/5B2/8/PPP1BPPP/RN1QK2R w KQkq - 1 14",
+			"after": "r2qkb1r/ppp2ppp/2N2n2/3p4/5B2/8/PPP1BPPP/RN1QK2R b KQkq - 2 14",
+			"moveId": "q96lY7ofbXPVKaAsilRY9",
+			"variants": [],
+			"shapes": [],
+			"comment": null
+		},
+		{
+			"color": "b",
+			"piece": "p",
+			"from": "b7",
+			"to": "c6",
+			"san": "bxc6",
+			"flags": "c",
+			"lan": "b7c6",
+			"before": "r2qkb1r/ppp2ppp/2N2n2/3p4/5B2/8/PPP1BPPP/RN1QK2R b KQkq - 2 14",
+			"after": "r2qkb1r/p1p2ppp/2p2n2/3p4/5B2/8/PPP1BPPP/RN1QK2R w KQkq - 0 15",
+			"captured": "n",
+			"moveId": "6C6Iz2SYPG8Hb5bFrf8yU",
+			"variants": [],
+			"shapes": [],
+			"comment": null
+		},
+		{
+			"color": "w",
+			"piece": "b",
+			"from": "f4",
+			"to": "c7",
+			"san": "Bxc7",
+			"flags": "c",
+			"lan": "f4c7",
+			"before": "r2qkb1r/p1p2ppp/2p2n2/3p4/5B2/8/PPP1BPPP/RN1QK2R w KQkq - 0 15",
+			"after": "r2qkb1r/p1B2ppp/2p2n2/3p4/8/8/PPP1BPPP/RN1QK2R b KQkq - 0 15",
+			"captured": "p",
+			"moveId": "XbKH89TdQ8rgl1TmsAXXU",
+			"variants": [],
+			"shapes": [],
+			"comment": null
+		},
+		{
+			"color": "b",
+			"piece": "q",
+			"from": "d8",
+			"to": "c7",
+			"san": "Qxc7",
+			"flags": "c",
+			"lan": "d8c7",
+			"before": "r2qkb1r/p1B2ppp/2p2n2/3p4/8/8/PPP1BPPP/RN1QK2R b KQkq - 0 15",
+			"after": "r3kb1r/p1q2ppp/2p2n2/3p4/8/8/PPP1BPPP/RN1QK2R w KQkq - 0 16",
+			"captured": "b",
+			"moveId": "BWlz7bbk-k1JmhrUzi9pE",
+			"variants": [],
+			"shapes": [],
+			"comment": null
 		}
 	]
 }