Display driver ranking everywhere we display their name.

timing71 · Jun 10, 2024 · d11cbb3 · d11cbb3
1 parent 330eef9
commit d11cbb3
Show file tree

Hide file tree

Showing 7 changed files with 78 additions and 27 deletions.
diff --git a/src/components/DriverName.js b/src/components/DriverName.js
@@ -0,0 +1,23 @@
+import styled, { css } from 'styled-components';
+
+const DriverNameInner = styled.span`
+
+${
+  props => props.theme.driverRanks[props.$rank?.replace('driver-', '')] && css`
+    &::before {
+      color: ${props.theme.driverRanks[props.$rank?.replace('driver-', '')]};
+      content: '●';
+      margin-right: 4px;
+      font-style: normal;
+      vertical-align: text-top;
+    }
+  `
+}
+
+`;
+
+export const DriverName = ({ name, rank }) => (
+  <DriverNameInner $rank={rank}>
+    {name}
+  </DriverNameInner>
+);
diff --git a/src/modules/analysis/components/driverStints/DriversTable.js b/src/modules/analysis/components/driverStints/DriversTable.js
@@ -3,10 +3,16 @@ import { observer } from "mobx-react-lite";
 
 import { useAnalysis } from "../context";
 import { Table, Row, Heading, Cell } from '../Table';
+import { DriverName } from '../../../../components/DriverName';
 
 const DriverRow = ({ driver, timestamp }) => (
   <Row inProgress={driver.inCar}>
-    <Cell>{driver.name}</Cell>
+    <Cell>
+      <DriverName
+        name={driver.name}
+        rank={driver.ranking}
+      />
+    </Cell>
     <Cell right>{driver.stints.length}</Cell>
     <Cell right>{driver.totalLaps}</Cell>
     <Cell right>{dayjs.duration(Math.floor(driver.driveTime(timestamp) * 1000)).format('HH:mm:ss')}</Cell>

diff --git a/src/modules/analysis/components/driverStints/StintsTable.js b/src/modules/analysis/components/driverStints/StintsTable.js
@@ -4,10 +4,16 @@ import styled from "styled-components";
 
 import { useAnalysis } from "../context";
 import { Table, Row, Heading, Cell } from '../Table';
+import { DriverName } from '../../../../components/DriverName';
 
 const StintRow = ({ stint, timestamp }) => (
   <Row inProgress={stint.inProgress}>
-    <Cell>{stint.driver.name}</Cell>
+    <Cell>
+      <DriverName
+        name={stint.driver.name}
+        rank={stint.driver.ranking}
+      />
+    </Cell>
     <Cell right>{stint.startLap}</Cell>
     <Cell right>{dayjs(stint.startTime).format('HH:mm:ss')}</Cell>
     <Cell right>{stint.endLap || '-'}</Cell>

diff --git a/src/modules/analysis/components/sessionStats/ClassLeaders.js b/src/modules/analysis/components/sessionStats/ClassLeaders.js
@@ -3,6 +3,7 @@ import styled from 'styled-components';
 import { Stat, StatExtractor } from '@timing71/common';
 import { useAnalysis } from '../context';
 import { Cell, Heading, Table } from '../Table';
+import { DriverName } from '../../../../components/DriverName';
 
 const CarClassCell = styled(Cell).attrs(
   props => ({
@@ -50,15 +51,23 @@ export const ClassLeaders = observer(
         <tbody>
           {
             Object.values(leaders).sort((a, b) => a[0] - b[0]).map(
-              ([position, car]) => (
-                <tr key={position}>
-                  <Position>{position}</Position>
-                  <CarClassCell value={se.get(car, Stat.CLASS)} />
-                  <Cell right>{se.get(car, Stat.NUM)}</Cell>
-                  <Cell>{se.get(car, Stat.TEAM)}</Cell>
-                  <Cell>{se.get(car, Stat.DRIVER)}</Cell>
-                </tr>
-              )
+              ([position, car]) => {
+                const driverName = se.get(car, Stat.DRIVER);
+                return (
+                  <tr key={position}>
+                    <Position>{position}</Position>
+                    <CarClassCell value={se.get(car, Stat.CLASS)} />
+                    <Cell right>{se.get(car, Stat.NUM)}</Cell>
+                    <Cell>{se.get(car, Stat.TEAM)}</Cell>
+                    <Cell>
+                      <DriverName
+                        name={Array.isArray(driverName) ? driverName[0] : driverName}
+                        rank={Array.isArray(driverName) ? driverName[1] : undefined}
+                      />
+                    </Cell>
+                  </tr>
+                );
+              }
             )
           }
         </tbody>

diff --git a/src/modules/analysis/components/strategy/components/StintBox.js b/src/modules/analysis/components/strategy/components/StintBox.js
@@ -4,6 +4,7 @@ import { darken } from 'polished';
 import styled from 'styled-components';
 
 import { StintSparklines } from './StintSparklines';
+import { DriverName } from '../../../../../components/DriverName';
 
 const Container = styled.div.attrs(
   props => ({
@@ -94,7 +95,12 @@ export const StintBox = animated(
           width={width}
         />
         <Line>
-          <Text bold>{stint.driver?.name || 'Unknown driver'}</Text>
+          <Text bold>
+            <DriverName
+              name={stint.driver?.name || 'Unknown driver'}
+              rank={stint.driver.ranking}
+            />
+          </Text>
           <Text
             bold
             right

diff --git a/src/modules/analysis/components/strategy/components/StintDetailModal.js b/src/modules/analysis/components/strategy/components/StintDetailModal.js
@@ -4,6 +4,7 @@ import { useTransition, animated } from '@react-spring/web';
 import { StintDetailTable } from './StintDetailTable';
 import { StintLapChart } from './StintLapChart';
 import { Button } from '../../../../../components/Button';
+import { DriverName } from '../../../../../components/DriverName';
 
 const ModalBackdrop = styled(animated.div)`
 
@@ -79,7 +80,11 @@ const ModalContents = ({ close, stint }) => {
   return (
     <Container>
       <Heading>
-        Car {stint.car?.raceNum} - { stint.driver?.name || 'Unknown driver' }
+        Car {stint.car?.raceNum} - { ' ' }
+        <DriverName
+          name={stint.driver?.name || 'Unknown driver'}
+          rank={stint.driver.ranking}
+        />
       </Heading>
       <StintDetailTable stint={stint} />
       <Controls>

diff --git a/src/modules/timingScreen/components/TimingTableCell.js b/src/modules/timingScreen/components/TimingTableCell.js
@@ -1,5 +1,6 @@
 import { Stat, timeInSeconds } from '@timing71/common';
-import styled, { css } from "styled-components";
+import styled from "styled-components";
+import { DriverName } from '../../../components/DriverName';
 
 const formatValue = (value, formatKey, manifest) => {
 
@@ -40,19 +41,14 @@ const CarClassCell = styled(CentredCell)`
   color: ${ props => (props.$value && props.theme.classColours[String(props.$value).toLowerCase().replace(/[-/ ]/, '')]) || 'white' };
 `;
 
-const DriverNameCell = styled(TruncatingCell)`
-  ${
-    props => props.theme.driverRanks[props.$value?.replace('driver-', '')] && css`
-      &::before {
-        color: ${props.theme.driverRanks[props.$value?.replace('driver-', '')]};
-        content: '●';
-        margin-right: 4px;
-        font-style: normal;
-        vertical-align: text-top;
-      }
-    `
-  }
-`;
+const DriverNameCell = ({ $value, children }) => (
+  <TruncatingCell>
+    <DriverName
+      name={children}
+      rank={$value}
+    />
+  </TruncatingCell>
+);
 
 const CellTypes = {
   [Stat.CLASS]: CarClassCell,