fix: adds YOU caption against player address

gear-foundation · Aug 14, 2023 · 2710eff · 2710eff
1 parent 847e5af
commit 2710eff
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 6 deletions.
diff --git a/frontend/src/features/session/components/session/Session.tsx b/frontend/src/features/session/components/session/Session.tsx
@@ -108,7 +108,7 @@ function Session({ session, turns, rankings, userId }: Props) {
         </header>
 
         <div className={styles.body}>
-          <Table data={getEvents()} />
+          <Table data={getEvents()} userId={userId} />
 
           <Traits altitude={altitude} weather={weather} fuelPrice={fuelPrice} reward={reward} />
 

diff --git a/frontend/src/features/session/components/table/Table.module.scss b/frontend/src/features/session/components/table/Table.module.scss
@@ -78,3 +78,7 @@ $borderRadius: 8px;
 .lastColumn {
   border-right: $tableBorder;
 }
+
+.yourAddressSpan {
+  color: #2BD071;
+}
diff --git a/frontend/src/features/session/components/table/Table.tsx b/frontend/src/features/session/components/table/Table.tsx
@@ -1,5 +1,5 @@
 import { CSSProperties, Fragment } from 'react';
-import clsx from 'clsx';
+import { cx } from 'utils';
 import { shortenString } from 'features/session/utils';
 import { ReactComponent as CheckSVG } from '../../assets/check.svg';
 import { ReactComponent as CrossSVG } from '../../assets/cross.svg';
@@ -9,9 +9,10 @@ import styles from './Table.module.scss';
 
 type Props = {
   data: Event[];
+  userId?: string;
 };
 
-function Table({ data }: Props) {
+function Table({ data, userId }: Props) {
   const getHeader = () =>
     TABLE_HEADINGS.map((text) => (
       <div key={text} className={styles.headerCell}>
@@ -23,15 +24,18 @@ function Table({ data }: Props) {
     data.map(({ participant, deadRound, fuelLeft, lastAltitude, payload, halt }, index) => (
       <Fragment key={participant}>
         <div
-          className={clsx(styles.bodyCell, styles.firstColumn)}
+          className={cx(styles.bodyCell, styles.firstColumn)}
           style={{ '--color': PLAYER_COLORS[index] } as CSSProperties}>
-          <span>{shortenString(participant)}</span>
+          <span>
+            {shortenString(participant)}{' '}
+            {userId === participant ? <span className={cx(styles.yourAddressSpan)}>(You)</span> : ''}
+          </span>
         </div>
         <div className={styles.bodyCell}>{deadRound ? <CrossSVG /> : <CheckSVG />}</div>
         <div className={styles.bodyCell}>{fuelLeft}</div>
         <div className={styles.bodyCell}>{lastAltitude}</div>
         <div className={styles.bodyCell}>{payload}</div>
-        <div className={clsx(styles.bodyCell, styles.lastColumn)}>{halt ? halt.split(/(?=[A-Z])/).join(' ') : '-'}</div>
+        <div className={cx(styles.bodyCell, styles.lastColumn)}>{halt ? halt.split(/(?=[A-Z])/).join(' ') : '-'}</div>
       </Fragment>
     ));