Develop

client/lamby-app/.eslintrc.js

@@ -0,0 +1,25 @@
+module.exports = {
+  env: {
+    browser: true,
+    es2021: true,
+    'jest': true,
+    'node': true,
+  },
+  extends: [
+    'eslint:recommended',
+    'plugin:react/recommended',
+    'plugin:@typescript-eslint/recommended',
+  ],
+  parser: '@typescript-eslint/parser',
+  parserOptions: {
+    ecmaFeatures: {
+      jsx: false,
+    },
+    ecmaVersion: 12,
+    sourceType: 'module',
+  },
+  plugins: ['react', '@typescript-eslint'],
+  rules: {
+    'react/react-in-jsx-scope': 'off',
+  },
+};

client/lamby-app/package.json

@@ -3,8 +3,8 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
+    "@testing-library/react-hooks": "^5.1.0",
     "@testing-library/user-event": "^12.1.10",
     "@types/jest": "^26.0.15",
     "@types/node": "^12.0.0",
@@ -16,6 +16,8 @@
     "react-dom": "^17.0.1",
     "react-router-dom": "^5.1.7",
     "react-scripts": "4.0.3",
+    "react-test-render": "^1.1.2",
+    "react-test-renderer": "^17.0.1",
     "typescript": "^4.1.2",
     "web-vitals": "^1.0.1"
   },
@@ -44,6 +46,12 @@
     ]
   },
   "devDependencies": {
+    "@testing-library/jest-dom": "^5.11.9",
+    "@typescript-eslint/eslint-plugin": "^4.17.0",
+    "@typescript-eslint/parser": "^4.17.0",
+    "eslint": "^7.21.0",
+    "eslint-plugin-react": "^7.22.0",
+    "react-shallow-renderer": "^16.14.1",
     "ts-standard": "^10.0.0"
   }
 }

client/lamby-app/src/App.scss

@@ -4,45 +4,6 @@
   justify-content: space-between;
   height: 100%;
 }
-.navbar {
-  width: 100vw;
-  text-align: center;
-
-  ul {
-    padding: 0;
-    margin: 0;
-    margin-block-end: 0;
-    margin-block-start: 0;
-    padding-inline-start: 0px;
-
-    li {
-      list-style-type: none;
-      display: inline-block;
-      height: 80px;
-      width: 33%;
-
-      a {
-        color: #e2e2e2;
-        font-size: 1.2rem;
-        text-transform: uppercase;
-        text-decoration: none;
-        height: calc(100% - 3px);
-        width: 100%;
-        border-top: 1px solid #e2e2e2;
-        border-left: 1px solid #e2e2e2;
-        border-right: 1px solid #e2e2e2;
-        border-bottom: 1px solid #e2e2e2;
-        display: block;
-        padding-top: 28px;
-        transition: 0.3s ease background-color;
-
-        &:hover {
-          background: #131726;
-        }
-      }
-    }
-  }
-}
 
 .active {
   border-top: 10px solid #fa541f !important;

client/lamby-app/src/App.tsx

@@ -1,45 +1,23 @@
-import './App.scss'
+import './App.scss';
+import React from 'react';
 import {
   BrowserRouter as Router,
   Switch,
-  Route,
-  NavLink,
+  Route
 } from 'react-router-dom';
-import Home from './containers/home/Home'
-import Match from './containers/match/Match'
-import Profile from './containers/profile/Profile'
-import AppStateProvider from './context/AppState'
-import MatchEditor from './components/matchEditor/MatchEditor'
-
-function App () {
-
-
-
-
+import NavBar from './components/NavBar/NavBar'
+import Home from './containers/home/Home';
+import Match from './containers/match/Match';
+import Profile from './containers/profile/Profile';
+import AppStateProvider from './context/AppState';
+import MatchEditor from './components/matchEditor/matchEditor';
 
+function App() {
   return (
     <AppStateProvider>
       <div className='App'>
         <Router>
-          <nav className='navbar'>
-            <ul>
-              <li>
-                <NavLink to='/home' activeClassName='active'>
-                  Home
-                </NavLink>
-              </li>
-              <li>
-                <NavLink to='/match' activeClassName='active'>
-                  Match
-                </NavLink>
-              </li>
-              <li>
-                <NavLink to='/profile' activeClassName='active'>
-                  Profile
-                </NavLink>
-              </li>
-            </ul>
-          </nav>
+         <NavBar/>
           <Switch>
             <Route path='/match'>
               <Match />
@@ -60,4 +38,4 @@ function App () {
   );
 }
 
-export default App
+export default App;

client/lamby-app/src/Instructions_&_Positions/InstructionSelector.tsx

@@ -0,0 +1,80 @@
+import { ICode} from '../interfaces/ICode';
+
+
+const instructionSelector = (position: string, instructions , setInstruction): ICode => {
+
+  let instruction;
+  switch (position) {
+    case 'GK':
+      instruction = [
+        { code: 'gk gk-sb', content: 'Stay back' },
+        { code: 'gk gk-jp', content: 'Join play' },
+      ];
+      break;
+    case 'LCB':
+      instruction = [
+        { code: 'lcb lcb-sb', content: 'Stay back' },
+        { code: 'lcb lcb-ja', content: 'Join attack' },
+      ];
+      break;
+    case 'RCB':
+      instruction = [
+        { code: 'rcb rcb-sb', content: 'Stay back' },
+        { code: 'rcb rcb-ja', content: 'Join attack' },
+      ];
+      break;
+    case 'LB':
+      instruction = [
+        { code: 'lb lb-sb', content: 'Cut inside' },
+        { code: 'lb lb-ja', content: 'Give crosses' },
+      ];
+      break;
+    case 'RB':
+      instruction = [
+        { code: 'rb rb-ot', content: 'Cut inside' },
+        { code: 'rb rb-sb', content: 'Give crosses' },
+      ];
+      break;
+    case 'LDM':
+      instruction = [
+        { code: 'ldm ldm-ot', content: 'Cover center' },
+        { code: 'ldm ldm-sb', content: 'Cover wing' },
+      ];
+      break;
+    case 'RDM':
+      instruction = [
+        { code: 'rdm rdm-ot', content: 'Cover center' },
+        { code: 'rdm rdm-sb', content: 'Cover wing' },
+      ];
+      break;
+    case 'CAM':
+      instruction = [
+        { code: 'cam cam-ot', content: 'Free roam' },
+        { code: 'cam cam-sb', content: 'Stay Back' },
+      ];
+      break;
+    case 'LW':
+      instruction = [
+        { code: 'lw lw-ci', content: 'Cut inside' },
+        { code: 'lw lw-sw', content: 'Stay wide' },
+      ];
+      break;
+    case 'RW':
+      instruction = [
+        { code: 'rw rw-ot', content: 'Cut inside' },
+        { code: 'rw rw-sb', content: 'Give crosses' },
+      ];
+      break;
+    case 'ST':
+      instruction = [
+        { code: 'st st-ot', content: 'False 9' },
+        { code: 'st st-sb', content: 'Give crosses' },
+      ];
+      break;
+  }
+  setInstruction(instruction);
+  return instructions[0];
+};
+
+
+export default instructionSelector;

client/lamby-app/src/Instructions_&_Positions/InstructionsPlayers.tsx

@@ -0,0 +1,52 @@
+import { IPlayerPosition } from '../interfaces/IPlayerPosition';
+
+ const InstructionsPlayer : IPlayerPosition[] = [
+  { code: 'GK', move: 'gk-sb', content: 'Goal keeper stay back' },
+  { code: 'GK', move: 'gk-jp', content: 'Goal keeper join play' },
+  { code: 'LCB', move: 'lcb-sb', content: 'Stay back during the game' },
+  { code: 'LCB', move: 'lcb-ja', content: 'Join attack whenever possible' },
+  { code: 'RCB', move: 'rcb-sb', content: 'Stay back during the game' },
+  { code: 'RCB', move: 'rcb-ja', content: 'Join the attack whenever possible' },
+  {
+    code: 'LB',
+    move: 'lb-sb',
+    content: 'Go wide and give crosses on attacking runs',
+  },
+  { code: 'LB', move: 'lb-ja', content: 'Cut inside when joining the attack' },
+  {
+    code: 'RB',
+    move: 'rb-ja',
+    content: 'Go wide and give crosses on attacking runs',
+  },
+  { code: 'RB', move: 'rb-sb', content: 'Cut inside when joining the attack' },
+  { code: 'LDM', move: 'ldm-ot', content: 'Cover center' },
+  { code: 'LDM', move: 'ldm-sb', content: 'Cover wing' },
+  { code: 'RDM', move: 'rdm-ot', content: 'Cover center' },
+  { code: 'RDM', move: 'rdm-sb', content: 'Cover wing' },
+  { code: 'CAM', move: 'cam-ot', content: 'Free roam' },
+  { code: 'CAM', move: 'cam-sb', content: 'Stay Back' },
+  { code: 'LW', move: 'lw-sw', content: 'Stay wide and give crosses' },
+  {
+    code: 'LW',
+    move: 'lw-ci',
+    content: 'Cut inside and go for the action',
+  },
+  { code: 'RW', move: 'rw-sw', content: 'Stay wide and give crosses' },
+  {
+    code: 'RW',
+    move: 'rw-ci',
+    content: 'Cut inside and go for the action',
+  },
+  {
+    code: 'ST',
+    move: 'st-ot',
+    content: 'Drop back and act like a false 9',
+  },
+  {
+    code: 'ST',
+    move: 'st-sb',
+    content: "Make runs and get in behind the opponent's defense",
+  },
+];
+
+export default InstructionsPlayer;

client/lamby-app/src/Instructions_&_Positions/PositionCodes.tsx

@@ -0,0 +1,17 @@
+import { ICode} from '../interfaces/ICode';
+
+const positionCodes: ICode[] = [
+  { code: 'GK', content: 'Goalkeeper' },
+  { code: 'LB', content: 'Left Back' },
+  { code: 'LCB', content: 'Left Center Back' },
+  { code: 'RCB', content: 'Right Center Back' },
+  { code: 'RB', content: 'Right Back' },
+  { code: 'LDM', content: 'Left Defensive Mid' },
+  { code: 'RDM', content: 'Right Defensive Mid' },
+  { code: 'CAM', content: 'Central Attacking Mid' },
+  { code: 'LW', content: 'Left Winger' },
+  { code: 'ST', content: 'Striker' },
+  { code: 'RW', content: 'Right Winger' },
+];
+
+export default positionCodes; 

client/lamby-app/src/components/NavBar/NavBar.scss

@@ -0,0 +1,39 @@
+.navbar {
+  width: 100vw;
+  text-align: center;
+
+  ul {
+    padding: 0;
+    margin: 0;
+    margin-block-end: 0;
+    margin-block-start: 0;
+    padding-inline-start: 0px;
+
+    li {
+      list-style-type: none;
+      display: inline-block;
+      height: 80px;
+      width: 33%;
+
+      a {
+        color: #e2e2e2;
+        font-size: 1.2rem;
+        text-transform: uppercase;
+        text-decoration: none;
+        height: calc(100% - 3px);
+        width: 100%;
+        border-top: 1px solid #e2e2e2;
+        border-left: 1px solid #e2e2e2;
+        border-right: 1px solid #e2e2e2;
+        border-bottom: 1px solid #e2e2e2;
+        display: block;
+        padding-top: 28px;
+        transition: 0.3s ease background-color;
+
+        &:hover {
+          background: #131726;
+        }
+      }
+    }
+  }
+}