Merge pull request #4 from LucasSonego/improve-lap-data

Improve lap data
LucasSonego · Jan 20, 2021 · b16a3d0 · b16a3d0
2 parents 64a2608 + a91d124
commit b16a3d0
Show file tree

Hide file tree

Showing 3 changed files with 108 additions and 13 deletions.
diff --git a/webapp/src/App.js b/webapp/src/App.js
@@ -29,7 +29,10 @@ function App() {
   return (
     <Container>
       <Fonts />
-      <LapData telemetry={telemetry} />
+      <LapData
+        telemetry={telemetry}
+        tyreCompound={carStatus?.m_tyreVisualCompound}
+      />
       <CarData carStatus={carStatus} carTelemetry={carTelemetry} />
       <SessionData session={session} />
     </Container>

diff --git a/webapp/src/Components/LapData/index.jsx b/webapp/src/Components/LapData/index.jsx
@@ -1,10 +1,10 @@
 import React, { useEffect, useState } from "react";
-import { Container } from "./styles";
 import { MdClearAll } from "react-icons/md";
 
+import { Container, Tyre } from "./styles";
 // import testLapData from "../../exampleData/LapData";
 
-function LapData({ telemetry }) {
+function LapData({ telemetry, tyreCompound }) {
   // const [laps, setLaps] = useState(testLapData);
   const [laps, setLaps] = useState();
 
@@ -19,17 +19,20 @@ function LapData({ telemetry }) {
           lap => lap.m_currentLapNum === data.m_currentLapNum
         );
         if (sameLap >= 0) {
-          if (laps.length > 1) {
-            updatedLaps[[...laps].length - 2] = {
-              ...updatedLaps[[...laps].length - 2],
+          if (laps[sameLap + 1]) {
+            updatedLaps.splice(sameLap + 1, laps.length - 1);
+          }
+          if (updatedLaps.length > 1) {
+            updatedLaps[[...updatedLaps].length - 2] = {
+              ...updatedLaps[[...updatedLaps].length - 2],
               m_lapTime: data.m_lastLapTime,
               m_sector3TimeInMS:
                 data.m_lastLapTime * 1000 -
-                (updatedLaps[[...laps].length - 2].m_sector1TimeInMS +
-                  updatedLaps[[...laps].length - 2].m_sector2TimeInMS),
+                (updatedLaps[[...updatedLaps].length - 2].m_sector1TimeInMS +
+                  updatedLaps[[...updatedLaps].length - 2].m_sector2TimeInMS),
             };
           }
-          updatedLaps[sameLap] = data;
+          updatedLaps[sameLap] = { ...data, m_tyreCompound: tyreCompound };
         } else {
           updatedLaps[[...laps].length - 1] = {
             ...updatedLaps[[...laps].length - 1],
@@ -38,15 +41,16 @@ function LapData({ telemetry }) {
               data.m_lastLapTime * 1000 -
               (updatedLaps[[...laps].length - 1].m_sector1TimeInMS +
                 updatedLaps[[...laps].length - 1].m_sector2TimeInMS),
+            m_tyreCompound: tyreCompound,
           };
-          updatedLaps.push(data);
+          updatedLaps.push({ ...data, m_tyreCompound: tyreCompound });
         }
       } else {
-        updatedLaps.push(data);
+        updatedLaps.push({ ...data, m_tyreCompound: tyreCompound });
       }
       setLaps(updatedLaps);
     });
-  }, [laps, telemetry]);
+  }, [laps, telemetry, tyreCompound]);
 
   function formattedTime(time) {
     let minutes = Math.floor(Math.floor(time / 60));
@@ -61,6 +65,54 @@ function LapData({ telemetry }) {
     return `${minutes}:${remainingTime}`;
   }
 
+  function getTyreCompound(compoundIdentifier) {
+    if (compoundIdentifier) {
+      switch (compoundIdentifier) {
+        case 7:
+          return (
+            <Tyre compound="intermediate">
+              <span>I</span>
+            </Tyre>
+          );
+        case 8:
+          return (
+            <Tyre compound="wet">
+              <span>W</span>
+            </Tyre>
+          );
+        case 16:
+          return (
+            <Tyre compound="soft">
+              <span>S</span>
+            </Tyre>
+          );
+        case 17:
+          return (
+            <Tyre compound="medium">
+              <span>M</span>
+            </Tyre>
+          );
+        case 18:
+          return (
+            <Tyre compound="hard">
+              <span>H</span>
+            </Tyre>
+          );
+        default:
+          return (
+            <Tyre>
+              <span>?</span>
+            </Tyre>
+          );
+      }
+    } else
+      return (
+        <Tyre>
+          <span>?</span>
+        </Tyre>
+      );
+  }
+
   return (
     <Container>
       <button className="clear" onClick={() => setLaps([])}>
@@ -109,6 +161,7 @@ function LapData({ telemetry }) {
                     )}
                   </span>
                 </div>
+                <span>{getTyreCompound(lap.m_tyreCompound)}</span>
               </div>
               <hr />
               <div className="sectors">

diff --git a/webapp/src/Components/LapData/styles.js b/webapp/src/Components/LapData/styles.js
@@ -1,4 +1,4 @@
-import styled from "styled-components";
+import styled, { css } from "styled-components";
 
 export const Container = styled.div`
   padding: 20px;
@@ -120,3 +120,42 @@ export const Container = styled.div`
     }
   }
 `;
+
+export const Tyre = styled.div`
+  height: 16px;
+  width: 16px;
+  padding: 2px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  border-radius: 50%;
+  border: 2px solid #7777;
+
+  span {
+    color: inherit;
+    font-size: 12px;
+  }
+
+  ${props =>
+    props.compound && props.compound === "wet"
+      ? css`
+          border-color: #2980b9;
+        `
+      : props.compound === "intermediate"
+      ? css`
+          border-color: #27ae60;
+        `
+      : props.compound === "soft"
+      ? css`
+          border-color: #e74c3c;
+        `
+      : props.compound === "medium"
+      ? css`
+          border-color: #f1c40f;
+        `
+      : props.compound === "hard" &&
+        css`
+          border-color: #ecf0f1;
+        `}
+`;