:wrench: Add data in front and list mechs

dev-front/src/mech/MechPicker.tsx

@@ -1,24 +1,14 @@
 import React from 'react';
+import mechData from './mech-data.json'
 
 function MechPicker() {
     return (
-        <aside className='mech-picker'>
+        <aside>
             <h2>Mech picker</h2>
             <ul>
-                <li>Mech Import</li>
-                <li>Mech 2</li>
-                <li>Mech 3</li>
-                <li>Mech 4</li>
-                <li>Mech 5</li>
-                <li>Mech 6</li>
-                <li>Mech 7</li>
-                <li>Mech 8</li>
-                <li>Mech 9</li>
-                <li>Mech 10</li>
-                <li>Mech 11</li>
-                <li>Mech 12</li>
-                <li>Mech 13</li>
-                <li>Mech 14</li>
+                {mechData.map(mech => (
+                    <li key={mech.id}>{mech.name}</li>
+                ))}
             </ul>
         </aside>
     );

dev-front/src/mech/mech-data.json

@@ -0,0 +1,248 @@
+[
+      {
+      "id": 1,
+      "name": "Combat",
+      "kind": "Prime",
+      "health": 3
+   },
+      {
+      "id": 2,
+      "name": "Cannon",
+      "kind": "Brute",
+      "health": 3
+   },
+      {
+      "id": 3,
+      "name": "Artillery",
+      "kind": "Ranged",
+      "health": 2
+   },
+      {
+      "id": 4,
+      "name": "Judo",
+      "kind": "Prime",
+      "health": 3
+   },
+      {
+      "id": 5,
+      "name": "Siege",
+      "kind": "Ranged",
+      "health": 2
+   },
+      {
+      "id": 6,
+      "name": "Gravity",
+      "kind": "Science",
+      "health": 3
+   },
+      {
+      "id": 7,
+      "name": "Jet",
+      "kind": "Brute",
+      "health": 2
+   },
+      {
+      "id": 8,
+      "name": "Rocket",
+      "kind": "Ranged",
+      "health": 3
+   },
+      {
+      "id": 9,
+      "name": "Pulse",
+      "kind": "Science",
+      "health": 3
+   },
+      {
+      "id": 10,
+      "name": "Flame",
+      "kind": "Prime",
+      "health": 3
+   },
+      {
+      "id": 11,
+      "name": "Meteor",
+      "kind": "Ranged",
+      "health": 3
+   },
+      {
+      "id": 12,
+      "name": "Swap",
+      "kind": "Science",
+      "health": 2
+   },
+      {
+      "id": 13,
+      "name": "Laser",
+      "kind": "Prime",
+      "health": 3
+   },
+      {
+      "id": 14,
+      "name": "Charge",
+      "kind": "Brute",
+      "health": 3
+   },
+      {
+      "id": 15,
+      "name": "Defense",
+      "kind": "Science",
+      "health": 2
+   },
+      {
+      "id": 16,
+      "name": "Aegis",
+      "kind": "Prime",
+      "health": 3
+   },
+      {
+      "id": 17,
+      "name": "Mirror",
+      "kind": "Brute",
+      "health": 3
+   },
+      {
+      "id": 18,
+      "name": "Ice",
+      "kind": "Ranged",
+      "health": 2
+   },
+      {
+      "id": 19,
+      "name": "Lightning",
+      "kind": "Prime",
+      "health": 3
+   },
+      {
+      "id": 20,
+      "name": "Hook",
+      "kind": "Brute",
+      "health": 3
+   },
+      {
+      "id": 21,
+      "name": "Boulder",
+      "kind": "Ranged",
+      "health": 2
+   },
+      {
+      "id": 22,
+      "name": "Leap",
+      "kind": "Prime",
+      "health": 3
+   },
+      {
+      "id": 23,
+      "name": "Unstable",
+      "kind": "Brute",
+      "health": 3
+   },
+      {
+      "id": 24,
+      "name": "Nano",
+      "kind": "Science",
+      "health": 2
+   },
+      {
+      "id": 25,
+      "name": "Beetle",
+      "kind": "Cyborg",
+      "health": 3
+   },
+      {
+      "id": 26,
+      "name": "Hornet",
+      "kind": "Cyborg",
+      "health": 2
+   },
+      {
+      "id": 27,
+      "name": "Scarab",
+      "kind": "Cyborg",
+      "health": 2
+   },
+      {
+      "id": 28,
+      "name": "Pierce",
+      "kind": "Brute",
+      "health": 3
+   },
+      {
+      "id": 29,
+      "name": "Bombling",
+      "kind": "Ranged",
+      "health": 3
+   },
+      {
+      "id": 30,
+      "name": "Exchange",
+      "kind": "Science",
+      "health": 2
+   },
+      {
+      "id": 31,
+      "name": "Bulk",
+      "kind": "Brute",
+      "health": 3
+   },
+      {
+      "id": 32,
+      "name": "Arachnoid",
+      "kind": "Ranged",
+      "health": 3
+   },
+      {
+      "id": 33,
+      "name": "Slide",
+      "kind": "Science",
+      "health": 2
+   },
+      {
+      "id": 34,
+      "name": "Thruster",
+      "kind": "Brute",
+      "health": 3
+   },
+      {
+      "id": 35,
+      "name": "Smog",
+      "kind": "Ranged",
+      "health": 3
+   },
+      {
+      "id": 36,
+      "name": "Control",
+      "kind": "Science",
+      "health": 2
+   },
+      {
+      "id": 37,
+      "name": "Dispersal",
+      "kind": "Prime",
+      "health": 3
+   },
+      {
+      "id": 38,
+      "name": "Napalm",
+      "kind": "Brute",
+      "health": 2
+   },
+      {
+      "id": 39,
+      "name": "Pitcher",
+      "kind": "Prime",
+      "health": 4
+   },
+      {
+      "id": 40,
+      "name": "Triptych",
+      "kind": "Ranged",
+      "health": 2
+   },
+      {
+      "id": 41,
+      "name": "Drill",
+      "kind": "Science",
+      "health": 3
+   }
+]