Redesign platform indicators on dispatch board

Signed-off-by: Dan Griffiths <[email protected]>
FuelRats · Jan 7, 2025 · 1c58658 · 1c58658
1 parent 31c5fb9
commit 1c58658
Show file tree

Hide file tree

Showing 5 changed files with 73 additions and 31 deletions.
diff --git a/src/components/DispatchTable/DispatchTable.js b/src/components/DispatchTable/DispatchTable.js
@@ -26,7 +26,7 @@ function DispatchTable (props) {
           <tr>
             <th width="50px">{'#'}</th>
             <th>{'CMDR'}</th>
-            <th width="50px">{'Plat'}</th>
+            <th width="85px">{'Platform'}</th>
             <th width="50px">{'Lang'}</th>
             <th>{'System'}</th>
             <th>{'Rats'}</th>

diff --git a/src/components/DispatchTable/DispatchTable.module.scss b/src/components/DispatchTable/DispatchTable.module.scss
@@ -80,41 +80,55 @@
   .cmdrName {
     flex-grow: 1;
   }
+}
 
-  .expansionBadge {
+.platform {
+  .platformBadge {
     order: 1;
 
     color: $white;
 
-    padding: 0 0.5rem;
+    text-align: center;
+
+    width: 100%;
+
+    > .platformBadgeIcon {
+      background-color: $black-lightened;
+
+      display: inline-block;
 
-    margin-left: 0.8rem;
+      width: 27px;
 
-    &.horizons3 {
+      > svg {
+        height: 12px;
+      }
+    }
+
+    > .platformBadgeLabel {
+      display: inline-block;
+
+      width: calc( 100% - 27px );
+    }
+
+    &.horizons3 > .platformBadgeLabel {
       background-color: $magenta-dark3;
     }
 
-    &.horizons4 {
+    &.horizons4 > .platformBadgeLabel {
       background-color: $blue-dark3;
     }
 
-    &.odyssey {
+    &.odyssey > .platformBadgeLabel {
       background-color: $gold-dark2;
     }
-  }
-}
 
-.platform {
-  &.ps {
-    color: $playstation-blue-light3
-  }
-
-  &.xb {
-    color: $xbox-green-light
-  }
+    &.ps > .platformBadgeLabel {
+      background-color: $xbox-green-light;
+    }
 
-  &.pc {
-    color: $magenta-dark
+    &.xb > .platformBadgeLabel {
+      background-color: $playstation-blue-light3;
+    }
   }
 }
 

diff --git a/src/components/DispatchTable/RescueRow.js b/src/components/DispatchTable/RescueRow.js
@@ -113,19 +113,44 @@ function RescueRow (props) {
           <span className={styles.cmdrName}>
             {client ?? '?'}
           </span>
-          {
-            platform === 'pc' && expansion && (
-              <span className={[styles.expansionBadge, styles[expansion]]}>
-                {expansionNameMap[expansion]}
-              </span>
-            )
-          }
         </CopyToClipboard>
       </td>
       <td
         className={['rescue-row-platform', styles.platform, styles[rescue.attributes.platform]]}
         title={rescuePlatform.long}>
-        {rescuePlatform.short}
+        {
+          platform === 'pc' && expansion && (
+            <span className={[styles.platformBadge, styles[platform], styles[expansion]]}>
+              <span className={[styles.platformBadgeIcon]}>
+                <FontAwesomeIcon fixedWidth icon="tv" />
+              </span>
+              <span className={[styles.platformBadgeLabel]}>
+                {expansionNameMap[expansion]}
+              </span>
+            </span>
+          )
+        }
+        {
+          platform !== 'pc' && (
+            <span className={[styles.platformBadge, styles[platform]]}>
+              <span className={[styles.platformBadgeIcon]}>
+                {
+                  platform === 'ps' && (
+                    <FontAwesomeIcon fixedWidth icon={['fab', 'playstation']} />
+                  )
+                }
+                {
+                  platform === 'xb' && (
+                    <FontAwesomeIcon fixedWidth icon={['fab', 'xbox']} />
+                  )
+                }
+              </span>
+              <span className={[styles.platformBadgeLabel]}>
+                {rescuePlatform.short}
+              </span>
+            </span>
+          )
+        }
       </td>
       <td
         className="rescue-row-language"

diff --git a/src/data/platformList.js b/src/data/platformList.js
@@ -4,12 +4,12 @@ const platformList = {
     long: 'PC',
   },
   xb: {
-    short: 'XB1',
-    long: 'Xbox One',
+    short: 'XB',
+    long: 'Xbox',
   },
   ps: {
-    short: 'PS4',
-    long: 'Playstation 4',
+    short: 'PS',
+    long: 'Playstation',
   },
   unknown: {
     short: '?',

diff --git a/src/util/fontawesome/library.js b/src/util/fontawesome/library.js
@@ -39,6 +39,7 @@ export {
   faTimes,
   faTimesCircle,
   faTrash,
+  faTv,
   faSearch,
   faUser,
   faUserSecret,
@@ -50,4 +51,6 @@ export {
   faTwitch,
   faGithub,
   faMastodon,
+  faPlaystation,
+  faXbox,
 } from '@fortawesome/free-brands-svg-icons'