Sauvegarde avant rebase

Author: TonNom

src/components/LinearProgressBar.tsx

@@ -9,8 +9,6 @@ import {
 const LinearProgressBar = (
   props: LinearProgressProps & { value: number; label: string }
 ) => {
-  if (props.value === 0) return null;
-
   return (
     <Grid
       container

src/components/OpeningProgress.tsx

@@ -0,0 +1,93 @@
+import React, { useEffect, useState } from "react";
+import LinearProgressBar from "./LinearProgressBar";
+import { Button, Box } from "@mui/material";
+import { useTheme } from "@mui/material/styles";
+
+// Props :
+// - total : nombre total de variations
+// - openingKey : identifiant unique de l'ouverture (ex: 'italian')
+// - mode : 'learning' | 'training'
+//
+// - currentVariationIndex : index de la variation en cours (optionnel, pour affichage)
+
+interface OpeningProgressProps {
+  total: number;
+  openingKey: string;
+  mode: "learning" | "training";
+  // Liste des index de variations terminées
+  completed: number[];
+  onReset?: () => void;
+}
+
+const getStorageKey = (openingKey: string, mode: string) => `${openingKey}-progress-${mode}`;
+
+const OpeningProgress: React.FC<OpeningProgressProps> = ({
+  total,
+  openingKey,
+  mode,
+  completed,
+  onReset,
+}) => {
+  const [progress, setProgress] = useState<number[]>(completed);
+  const theme = useTheme();
+
+  useEffect(() => {
+    setProgress(completed);
+  }, [completed]);
+
+  // Calcul du pourcentage
+  const percent = total > 0 ? (progress.length / total) * 100 : 0;
+  const label = `${progress.length} / ${total}`;
+
+  // Réinitialisation
+  const handleReset = () => {
+    localStorage.removeItem(getStorageKey(openingKey, mode));
+    setProgress([]);
+    onReset && onReset();
+  };
+
+  return (
+    <Box
+      width={{ xs: "100%", sm: 320, md: 340 }}
+      sx={{
+        mt: { xs: 2, md: 3 },
+        mb: { xs: 0, md: 1 },
+        px: { xs: 0, sm: 1 },
+        alignSelf: "flex-end",
+        position: "relative",
+        left: 0,
+        bottom: 0,
+        display: "flex",
+        flexDirection: "row",
+        alignItems: "center",
+        gap: 1,
+      }}
+    >
+      <Box minWidth={48}>
+        <span style={{ fontSize: 14, color: theme.palette.text.secondary }}>{label}</span>
+      </Box>
+      <Box flex={1} minWidth={0}>
+        <LinearProgressBar value={percent} label={""} />
+      </Box>
+      <Button
+        size="small"
+        variant="contained"
+        color="primary"
+        sx={{
+          ml: 2,
+          borderRadius: 2,
+          textTransform: "none",
+          fontWeight: 500,
+          boxShadow: theme.shadows[1],
+          minWidth: 0,
+          px: 2,
+        }}
+        onClick={handleReset}
+      >
+        Réinitialiser
+      </Button>
+    </Box>
+  );
+};
+
+export default OpeningProgress;

src/components/board/index.tsx

@@ -22,6 +22,12 @@ import PlayerHeader from "./playerHeader";
 import { boardHueAtom, pieceSetAtom } from "./states";
 import tinycolor from "tinycolor2";
 
+export interface TrainingFeedback {
+  square: string; // ex: 'e4'
+  icon: string;   // chemin de l'icône
+  alt: string;    // texte alternatif
+}
+
 export interface Props {
   id: string;
   canPlay?: Color | boolean;
@@ -34,6 +40,7 @@ export interface Props {
   showBestMoveArrow?: boolean;
   showPlayerMoveIconAtom?: PrimitiveAtom<boolean>;
   showEvaluationBar?: boolean;
+  trainingFeedback?: TrainingFeedback;
 }
 
 export default function Board({
@@ -48,6 +55,7 @@ export default function Board({
   showBestMoveArrow = false,
   showPlayerMoveIconAtom,
   showEvaluationBar = false,
+  trainingFeedback,
 }: Props) {
   const boardRef = useRef<HTMLDivElement>(null);
   const game = useAtomValue(gameAtom);
@@ -239,12 +247,14 @@ export default function Board({
       clickedSquaresAtom,
       playableSquaresAtom,
       showPlayerMoveIconAtom,
+      trainingFeedback, // nouvelle prop transmise
     });
   }, [
     currentPositionAtom,
     clickedSquaresAtom,
     playableSquaresAtom,
     showPlayerMoveIconAtom,
+    trainingFeedback,
   ]);
 
   const customPieces = useMemo(

src/components/board/squareRenderer.tsx

@@ -15,13 +15,19 @@ export interface Props {
   clickedSquaresAtom: PrimitiveAtom<Square[]>;
   playableSquaresAtom: PrimitiveAtom<Square[]>;
   showPlayerMoveIconAtom?: PrimitiveAtom<boolean>;
+  trainingFeedback?: {
+    square: string;
+    icon: string;
+    alt: string;
+  };
 }
 
 export function getSquareRenderer({
   currentPositionAtom,
   clickedSquaresAtom,
   playableSquaresAtom,
   showPlayerMoveIconAtom = atom(false),
+  trainingFeedback,
 }: Props) {
   const squareRenderer = forwardRef<HTMLDivElement, CustomSquareProps>(
     (props, ref) => {
@@ -64,6 +70,25 @@ export function getSquareRenderer({
           {children}
           {highlightSquareStyle && <div style={highlightSquareStyle} />}
           {playableSquareStyle && <div style={playableSquareStyle} />}
+          {/* Affichage de l’icône de feedback training si demandé et sur la bonne case */}
+          {trainingFeedback && trainingFeedback.square === square && (
+            <img
+              src={trainingFeedback.icon}
+              alt={trainingFeedback.alt}
+              style={{
+                position: "absolute",
+                top: 0,
+                right: 0,
+                transform: "translate(35%,-35%)",
+                width: 28,
+                height: 28,
+                zIndex: 120,
+                pointerEvents: "none",
+                opacity: 0.95,
+              }}
+            />
+          )}
+          {/* Aucun affichage de message texte d'erreur ici, seulement l'icône */}
           {moveClassification && showPlayerMoveIcon && square === toSquare && (
             <Image
               src={`/icons/${moveClassification}.png`}

src/data/openings to learn/italian.ts

@@ -0,0 +1,87 @@
+// italianGame.ts
+
+export type Move = string;
+
+export interface Variation {
+  name: string;
+  moves: Move[];
+}
+
+export const italianGameVariations: Variation[] = [
+  {
+    name: "Giuoco Piano",
+    moves: ["e4", "e5", "Nf3", "Nc6", "Bc4", "Bc5", "c3", "Nf6", "d3", "d6", "O-O", "O-O"],
+  },
+  {
+    name: "Evans Gambit",
+    moves: ["e4", "e5", "Nf3", "Nc6", "Bc4", "Bc5", "b4", "Bxb4", "c3", "Ba5", "d4", "exd4", "O-O"],
+  },
+  {
+    name: "Two Knights Defense",
+    moves: ["e4", "e5", "Nf3", "Nc6", "Bc4", "Nf6"],
+  },
+  {
+    name: "Fried Liver Attack",
+    moves: ["e4", "e5", "Nf3", "Nc6", "Bc4", "Nf6", "Ng5", "d5", "exd5", "Nxd5", "Nxf7", "Kxf7", "Qf3+", "Ke6", "Nc3"],
+  },
+  {
+    name: "Traxler Counterattack",
+    moves: ["e4", "e5", "Nf3", "Nc6", "Bc4", "Nf6", "Ng5", "Bc5"],
+  },
+  {
+    name: "Lolli Attack",
+    moves: ["e4", "e5", "Nf3", "Nc6", "Bc4", "Nf6", "Ng5", "d5", "exd5", "Nxd5", "d4"],
+  },
+  {
+    name: "Scotch Gambit",
+    moves: ["e4", "e5", "Nf3", "Nc6", "Bc4", "Nf6", "d4"],
+  },
+  {
+    name: "Hungarian Defense",
+    moves: ["e4", "e5", "Nf3", "Nc6", "Bc4", "Be7"],
+  },
+  {
+    name: "Paris Defense",
+    moves: ["e4", "e5", "Nf3", "Nc6", "Bc4", "d6"],
+  },
+  {
+    name: "Rousseau Gambit",
+    moves: ["e4", "e5", "Nf3", "Nc6", "Bc4", "f5"],
+  },
+  {
+    name: "Blackburne Shilling Gambit",
+    moves: ["e4", "e5", "Nf3", "Nc6", "Bc4", "Nd4"],
+  },
+  {
+    name: "Jerome Gambit",
+    moves: ["e4", "e5", "Nf3", "Nc6", "Bc4", "Bc5", "Bxf7+", "Kxf7", "Nxe5+", "Nxe5", "Qh5+"],
+  },
+  {
+    name: "Rosentreter Gambit",
+    moves: ["e4", "e5", "Nf3", "Nc6", "Bc4", "Bc5", "d4", "exd4", "c3"],
+  },
+  {
+    name: "Neumann Gambit",
+    moves: ["e4", "e5", "Nf3", "Nc6", "c3", "Nf6", "Bc4"],
+  },
+  {
+    name: "Alexandre Gambit",
+    moves: ["e4", "e5", "Nf3", "Nc6", "Bc4", "Bc5", "c3", "f5"],
+  },
+  {
+    name: "Lucchini Gambit",
+    moves: ["e4", "e5", "Nf3", "Nc6", "Bc4", "Bc5", "d3", "f5"],
+  },
+  {
+    name: "Ponziani-Steinitz Gambit",
+    moves: ["e4", "e5", "Nf3", "Nc6", "Bc4", "Nf6", "Ng5", "Nxe4"],
+  },
+  {
+    name: "Kloss Gambit",
+    moves: ["e4", "e5", "Nf3", "Nc6", "Bc4", "Nf6", "Ng5", "d5", "exd5", "Nb4"],
+  },
+  {
+    name: "Fegatello Attack",
+    moves: ["e4", "e5", "Nf3", "Nc6", "Bc4", "Nf6", "Ng5", "d5", "exd5", "Nxd5", "Nxf7", "Kxf7", "Qf3+", "Ke6", "Nc3"],
+  },
+];