ajout de la coloration des lignes suite au clique de l'utilisateur 🎨

cryptide_project/src/Components/AccordionIndice.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 
 /* Style */
 import '../Style/Global.css';
@@ -19,16 +19,34 @@ import Case from './CheckCase';
 
 
 interface AccordionIndiceComponentProps<T extends Indice> {
-    instance: (new (...args: any[]) => T) | (Function & { prototype: T });
+instance: (new (...args: any[]) => T) | (Function & { prototype: T });
     head: string;
     lang: string;
 }
 
 const AccordionIndice: React.FC<AccordionIndiceComponentProps<any>> = ({ instance, head, lang }) => {
-    const indices = Stub.GenerateIndice();
-    return (
+const indices = Stub.GenerateIndice();
+const [selectedRows, setSelectedRows] = useState<number[]>([]);
+
+
+const handleRowClick = (index: number) => {
+
+    const newSelectedRows = [...selectedRows];
+
+    const selectedIndex = newSelectedRows.indexOf(index);
+    if (selectedIndex === -1) {
+        newSelectedRows.push(index);
+    } else {
+        newSelectedRows.splice(selectedIndex, 1);
+    }
+
+    console.log('New Selected Rows:', newSelectedRows);
+    setSelectedRows(newSelectedRows);
+};
+
+return (
     <>
-            <Accordion defaultActiveKey={['0']} alwaysOpen style={{width:'100%'}}>
+    <Accordion defaultActiveKey={['0']} alwaysOpen style={{ width: '100%' }}>
         <Accordion.Item eventKey="0">
         <Accordion.Header>{head}</Accordion.Header>
         <Accordion.Body>
@@ -36,16 +54,25 @@ const AccordionIndice: React.FC<AccordionIndiceComponentProps<any>> = ({ instanc
             <thead>
                 <tr>
                     <th>Indice</th>
-                                    <th>Déduction</th>
                 </tr>
             </thead>
             <tbody>
                 {indices
                 .filter((i) => i instanceof instance)
                 .map((indice, index) => (
-                                        <tr key={index}>
-                                            <td>{indice.ToString(lang)}</td>
-                                            <td><Case/></td>
+                    <tr
+                        key={index}
+                        onClick={() => handleRowClick(index)}
+                        style={{
+                            cursor: 'pointer',
+                        }}>
+                        <td
+                            style={{
+                                border: selectedRows.includes(index) ? '1px solid red' : 'none',
+                                backgroundColor: selectedRows.includes(index) ? '#FF9191' : 'white',
+                            }}>
+                            {indice.ToString(lang)}
+                        </td>
                     </tr>
                 ))}
             </tbody>
@@ -54,7 +81,7 @@ const AccordionIndice: React.FC<AccordionIndiceComponentProps<any>> = ({ instanc
         </Accordion.Item>
     </Accordion>
     </>
-    );
-}
+);
+};
 
 export default AccordionIndice;