:gear: Make each mech from list addable

dev-front/src/App.tsx

@@ -4,15 +4,18 @@ import './App.css';
 import Squad from './mech/squad/Squad';
 
 function App() {
+
+    let mechPickObservers = {};
+
     return (
         <div className='app'>
             <header>
                 <h1>Squad Composer</h1>
             </header>
             <main className='editor'>
-                <MechPicker/>
+                <MechPicker observers={mechPickObservers}/>
 
-                <Squad/>
+                <Squad /*pickObservers={mechPickObservers}*//>
 
             </main>
             <footer>Squad Composer by DricomDragon</footer>

dev-front/src/MechObserver.ts

@@ -0,0 +1,5 @@
+import Mech from "./Mech";
+
+type MechObserver = (mech: Mech) => void;
+
+export default MechObserver;

dev-front/src/mech/MechPicker.tsx

@@ -1,9 +1,15 @@
 import React, { useState } from 'react';
 import mechData from './mech-data.json'
+import MechObserver from '../MechObserver';
+import Mech from '../Mech';
 
-function MechPicker() {
+function MechPicker({observers} : { observers: {[key: string]: MechObserver }}) {
     const [searchText, setSearchText] = useState("");
 
+    function notifyObservers(mech: Mech) {
+        console.log("Mech clicked is ", mech);
+    }
+
     return (
         <aside className='mech-picker'>
             <h2>Mech picker</h2>
@@ -13,7 +19,10 @@ function MechPicker() {
                 {mechData
                     .filter(mech => mech.name.toLowerCase().includes(searchText.toLocaleLowerCase()))
                     .map(mech => (
-                        <li key={mech.id}>{mech.name}</li>
+                        <li key={mech.id}>
+                            {mech.name}
+                            <button onClick={event => notifyObservers(mech)}>+</button>
+                        </li>
                     ))}
             </ul>
         </aside>

dev-front/src/mech/squad/Squad.tsx

@@ -22,6 +22,10 @@ function Squad() {
     const placeHolder: Mech = {id: -1, name: 'Empty slot', kind: '_', health: 0};
     const [squadMechs, setSquadMechs] = useState([it1, it2, it3]);
 
+    function addToSquad(mech: Mech) {
+        console.log("New mech added :", mech)
+    }
+
     function removeFromSquad(index: number) {
         setSquadMechs(instead(squadMechs, index, placeHolder));
     }