BinaryStudioAcademy · fatima1221 · Jun 23, 2023
diff --git a/.lintstagedrc b/.lintstagedrc
@@ -1,6 +1,3 @@
 {
-    "*.js": [
-        "prettier --write",
-        "eslint --fix"
-    ]
+    "*.js": ["prettier --write", "eslint --fix"]
 }
diff --git a/index.html b/index.html
@@ -1,16 +1,16 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, shrink-to-fit=no">
-    <title>Street Fighter</title>
-  </head>
-  <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root"></div>
-    <div id="loading-overlay">
-      <img src="resources/logo.png"/>
-    </div>
-    <script type="module" src="./src/index.js"></script>
-  </body>
+    <head>
+        <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, shrink-to-fit=no" />
+        <title>Street Fighter</title>
+    </head>
+    <body>
+        <noscript>You need to enable JavaScript to run this app.</noscript>
+        <div id="root"></div>
+        <div id="loading-overlay">
+            <img src="resources/logo.png" />
+        </div>
+        <script type="module" src="./src/index.js"></script>
+    </body>
 </html>
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -20,7 +20,7 @@
     "license": "ISC",
     "devDependencies": {
         "commitlint": "^17.6.5",
-        "eslint": "^8.42.0",
+        "eslint": "^8.43.0",
         "eslint-config-airbnb": "^19.0.4",
         "eslint-config-prettier": "^8.8.0",
         "eslint-plugin-prettier": "^4.2.1",

diff --git a/resources/api/details/fighter/1.json b/resources/api/details/fighter/1.json
@@ -1,8 +1,8 @@
 {
-  "_id": "1",
-  "name": "Ryu",
-  "health": 45, 
-  "attack": 4, 
-  "defense": 3,
-  "source": "https://media.giphy.com/media/kdHa4JvihB2gM/giphy.gif"
-}
+    "_id": "1",
+    "name": "Ryu",
+    "health": 45,
+    "attack": 4,
+    "defense": 3,
+    "source": "https://media.giphy.com/media/kdHa4JvihB2gM/giphy.gif"
+}
diff --git a/resources/api/details/fighter/2.json b/resources/api/details/fighter/2.json
@@ -1,8 +1,8 @@
 {
-  "_id": "2",
-  "name": "Dhalsim",
-  "health": 60, 
-  "attack": 3, 
-  "defense": 1,
-  "source": "https://i.pinimg.com/originals/c0/53/f2/c053f2bce4d2375fee8741acfb35d44d.gif"
-}
+    "_id": "2",
+    "name": "Dhalsim",
+    "health": 60,
+    "attack": 3,
+    "defense": 1,
+    "source": "https://i.pinimg.com/originals/c0/53/f2/c053f2bce4d2375fee8741acfb35d44d.gif"
+}
diff --git a/resources/api/details/fighter/3.json b/resources/api/details/fighter/3.json
@@ -1,8 +1,8 @@
 {
-  "_id": "3",
-  "name": "Guile",
-  "health": 45, 
-  "attack": 4, 
-  "defense": 3,
-  "source": "https://66.media.tumblr.com/tumblr_lq8g3548bC1qd0wh3o1_400.gif"
-}
+    "_id": "3",
+    "name": "Guile",
+    "health": 45,
+    "attack": 4,
+    "defense": 3,
+    "source": "https://66.media.tumblr.com/tumblr_lq8g3548bC1qd0wh3o1_400.gif"
+}
diff --git a/resources/api/details/fighter/4.json b/resources/api/details/fighter/4.json
@@ -1,8 +1,8 @@
 {
-  "_id": "4",
-  "name": "Zangief",
-  "health": 60, 
-  "attack": 4, 
-  "defense": 1,
-  "source": "https://media1.giphy.com/media/nlbIvY9K0jfAA/source.gif"
-}
+    "_id": "4",
+    "name": "Zangief",
+    "health": 60,
+    "attack": 4,
+    "defense": 1,
+    "source": "https://media1.giphy.com/media/nlbIvY9K0jfAA/source.gif"
+}
diff --git a/resources/api/details/fighter/5.json b/resources/api/details/fighter/5.json
@@ -1,8 +1,8 @@
 {
-  "_id": "5",
-  "name": "Ken",
-  "health": 45, 
-  "attack": 3, 
-  "defense": 4,
-  "source": "https://i.pinimg.com/originals/46/4b/36/464b36a7aecd988e3c51e56a823dbedc.gif"
-}
+    "_id": "5",
+    "name": "Ken",
+    "health": 45,
+    "attack": 3,
+    "defense": 4,
+    "source": "https://i.pinimg.com/originals/46/4b/36/464b36a7aecd988e3c51e56a823dbedc.gif"
+}
diff --git a/resources/api/details/fighter/6.json b/resources/api/details/fighter/6.json
@@ -1,8 +1,8 @@
 {
-  "_id": "6",
-  "name": "Bison",
-  "health": 45, 
-  "attack": 5, 
-  "defense": 4,
-  "source": "http://www.fightersgeneration.com/np5/char/ssf2hd/bison-hdstance.gif"
-}
+    "_id": "6",
+    "name": "Bison",
+    "health": 45,
+    "attack": 5,
+    "defense": 4,
+    "source": "http://www.fightersgeneration.com/np5/char/ssf2hd/bison-hdstance.gif"
+}
diff --git a/resources/api/fighters.json b/resources/api/fighters.json
@@ -1,27 +1,32 @@
 [
-  {
-    "_id": "1",
-    "name": "Ryu",
-    "source": "https://media.giphy.com/media/kdHa4JvihB2gM/giphy.gif"
-  }, {
-    "_id": "2",
-    "name": "Dhalsim",
-    "source": "https://i.pinimg.com/originals/c0/53/f2/c053f2bce4d2375fee8741acfb35d44d.gif"
-  }, {
-    "_id": "3",
-    "name": "Guile",
-    "source": "https://66.media.tumblr.com/tumblr_lq8g3548bC1qd0wh3o1_400.gif"
-  }, {
-    "_id": "4",
-    "name": "Zangief",
-    "source": "https://media1.giphy.com/media/nlbIvY9K0jfAA/source.gif"
-  }, {
-    "_id": "5",
-    "name": "Ken",
-    "source": "https://i.pinimg.com/originals/46/4b/36/464b36a7aecd988e3c51e56a823dbedc.gif"
-  }, {
-    "_id": "6",
-    "name": "Bison",
-    "source": "http://www.fightersgeneration.com/np5/char/ssf2hd/bison-hdstance.gif"
-  }
-]
+    {
+        "_id": "1",
+        "name": "Ryu",
+        "source": "https://media.giphy.com/media/kdHa4JvihB2gM/giphy.gif"
+    },
+    {
+        "_id": "2",
+        "name": "Dhalsim",
+        "source": "https://i.pinimg.com/originals/c0/53/f2/c053f2bce4d2375fee8741acfb35d44d.gif"
+    },
+    {
+        "_id": "3",
+        "name": "Guile",
+        "source": "https://66.media.tumblr.com/tumblr_lq8g3548bC1qd0wh3o1_400.gif"
+    },
+    {
+        "_id": "4",
+        "name": "Zangief",
+        "source": "https://media1.giphy.com/media/nlbIvY9K0jfAA/source.gif"
+    },
+    {
+        "_id": "5",
+        "name": "Ken",
+        "source": "https://i.pinimg.com/originals/46/4b/36/464b36a7aecd988e3c51e56a823dbedc.gif"
+    },
+    {
+        "_id": "6",
+        "name": "Bison",
+        "source": "http://www.fightersgeneration.com/np5/char/ssf2hd/bison-hdstance.gif"
+    }
+]
diff --git a/src/javascript/components/fighterPreview.js b/src/javascript/components/fighterPreview.js
@@ -1,17 +1,5 @@
 import createElement from '../helpers/domHelper';
 
-export function createFighterPreview(fighter, position) {
-    const positionClassName = position === 'right' ? 'fighter-preview___right' : 'fighter-preview___left';
-    const fighterElement = createElement({
-        tagName: 'div',
-        className: `fighter-preview___root ${positionClassName}`
-    });
-
-    // todo: show fighter info (image, name, health, etc.)
-
-    return fighterElement;
-}
-
 export function createFighterImage(fighter) {
     const { source, name } = fighter;
     const attributes = {
@@ -27,3 +15,30 @@ export function createFighterImage(fighter) {
 
     return imgElement;
 }
+
+export function createFighterPreview(fighter, position) {
+    if (!fighter) {
+        return ' ';
+    }
+    const positionClassName = position === 'right' ? 'fighter-preview___right' : 'fighter-preview___left';
+    const fighterElement = createElement({
+        tagName: 'div',
+        className: `fighter-preview___root ${positionClassName}`
+    });
+
+    // todo: show fighter info (image, name, health, etc.)
+    const fighterImage = createFighterImage(fighter);
+    const fighterName = createElement({
+        tagName: 'span',
+        className: 'fighter-preview___name',
+        innerText: `Name: ${fighter.name}`
+    });
+
+    const fighterHealth = createElement({
+        tagName: 'span',
+        className: 'fighter-preview___health',
+        innerText: `Health: ${fighter.health}`
+    });
+    fighterElement.append(fighterImage, fighterName, fighterHealth);
+    return fighterElement;
+}
diff --git a/src/javascript/components/fighterSelector.js b/src/javascript/components/fighterSelector.js
@@ -2,11 +2,20 @@ import createElement from '../helpers/domHelper';
 import renderArena from './arena';
 import versusImg from '../../../resources/versus.png';
 import { createFighterPreview } from './fighterPreview';
+import fighterService from '../services/fightersService';
 
 const fighterDetailsMap = new Map();
 
 export async function getFighterInfo(fighterId) {
     // get fighter info from fighterDetailsMap or from service and write it to fighterDetailsMap
+    let fighterDetails = fighterDetailsMap.get(fighterId);
+
+    if (!fighterDetails) {
+        fighterDetails = await fighterService.getFighterDetails(fighterId);
+        fighterDetailsMap.set(fighterId, fighterDetails);
+    }
+
+    return fighterDetails;
 }
 
 function startFight(selectedFighters) {

diff --git a/src/javascript/helpers/apiHelper.js b/src/javascript/helpers/apiHelper.js
@@ -9,11 +9,11 @@ const SECURITY_HEADERS = {
          * To test the application against the real dataset set useMockAPI=false.
          * But to test the application you don't need to extend the GitHub REST API rate limit to 5000 requests with the token
          */
-        // authorization: 'token %github_token%'
+        authorization: 'token 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'
     }
 };
 
-const useMockAPI = true;
+const useMockAPI = false;
 
 function getFighterById(endpoint) {
     const start = endpoint.lastIndexOf('/');

diff --git a/src/javascript/helpers/domHelper.js b/src/javascript/helpers/domHelper.js
@@ -1,4 +1,4 @@
-export default function createElement({ tagName, className, attributes = {} }) {
+export default function createElement({ tagName, className, attributes = {}, innerText }) {
     const element = document.createElement(tagName);
 
     if (className) {
@@ -7,6 +7,8 @@ export default function createElement({ tagName, className, attributes = {} }) {
     }
 
     Object.keys(attributes).forEach(key => element.setAttribute(key, attributes[key]));
-
+    if (innerText) {
+        element.innerText = innerText;
+    }
     return element;
 }