Merge branch 'feature/add-mech'

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,18 @@
 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);
+        for (let key in observers) {
+            observers[key](mech);
+        }
+    }
+
     return (
         <aside className='mech-picker'>
             <h2>Mech picker</h2>
@@ -13,7 +22,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

@@ -2,6 +2,8 @@ import React, { useState } from 'react';
 import Member from './Member';
 import logo from '../../logo.svg';
 import Mech from '../../Mech';
+import MechObserver from '../../MechObserver';
+import { isEmptySlot } from '../../MechUtils';
 
 function instead<T>(array: T[], index: number, newItem: T): T[] {
     return array.map((item, i) => {
@@ -13,19 +15,43 @@ function instead<T>(array: T[], index: number, newItem: T): T[] {
     });
 }
 
+function hasFreeSlot(squad: Mech[]) {
+    return squad.some(isEmptySlot)
+}
+
+function isSquadFull(squad: Mech[]) {
+    return !hasFreeSlot(squad);
+}
 
-function Squad() {
 
-    const it1: Mech = {id: 1, name: 'HelloType', kind: 'K1', health: 3};
-    const it2: Mech = {id: 2, name: 'Giant Mech', kind: 'K1', health: 3};
-    const it3: Mech = {id: 3, name: 'Techno-prop', kind: 'K1', health: 4};
+function Squad({pickObservers} : {pickObservers: {[key: string] : MechObserver}}) {
+
     const placeHolder: Mech = {id: -1, name: 'Empty slot', kind: '_', health: 0};
-    const [squadMechs, setSquadMechs] = useState([it1, it2, it3]);
+    const [squadMechs, setSquadMechs] = useState([placeHolder, placeHolder, placeHolder]);
+
+    function putInFreeSlot(mech: Mech, squad: Mech[]): Mech[] {
+        const freeSlotIndex = squad.findIndex(isEmptySlot);
+        console.log('Next free slot : ', freeSlotIndex);
+        return instead(squad, freeSlotIndex, mech);
+    }
+
+
+    function addToSquad(mech: Mech) {
+        console.log("New mech to add :", mech)
+        if (isSquadFull(squadMechs)) {
+            console.log("Squad is full, sorry");
+            return;
+        }
+
+        setSquadMechs(putInFreeSlot(mech, squadMechs));
+    }
 
     function removeFromSquad(index: number) {
         setSquadMechs(instead(squadMechs, index, placeHolder));
     }
 
+    pickObservers.addWhenPicked = addToSquad;
+
     return (
         <article className='custom-squad'>
             <h2>Custom squad</h2>