Implement current standings display

client/src/components/screens/GamePanel/GamePanel.jsx

@@ -8,6 +8,7 @@ import PositionedStreetView from "./PositionedStreetView";
 import RaceMode from "./RaceMode";
 import { useIsFinished } from "./hooks";
 import KillFeed from "../../util/KillFeed/KillFeed";
+import Standings from "./Standings";
 
 const GamePanel = () => {
   // warn the user if they navigate away
@@ -19,6 +20,7 @@ const GamePanel = () => {
     <Loading />
   ) : (
     <div className={styles.page}>
+      {gameMode === GUN_GAME && <Standings />}
       {clockMode === RACE && <RaceMode rate={1000} cutoffTime={10} />}
       <div className={styles.streetview}>
         <PositionedStreetView />

client/src/components/screens/GamePanel/GamePanel.module.css

@@ -86,3 +86,27 @@
     margin-right: 2px;
   }
 }
+
+.standings {
+  z-index: 2;
+  position: absolute;
+  top: 64px;
+  left: 4px;
+  font-size: 12px;
+}
+
+.standings > * {
+  background: #333;
+  padding: 0.2em;
+  margin-bottom: 4px;
+}
+
+.standingsName {
+  display: inline-block;
+  width: 5em;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  vertical-align: middle;
+  padding-left: 2px;
+}

client/src/components/screens/GamePanel/Standings.jsx

@@ -0,0 +1,27 @@
+import { useCurrentRound, usePlayerName } from "../../../domain/gameStore";
+import { usePlayers } from "../../../hooks/useGameInfo";
+import styles from "./GamePanel.module.css";
+
+const Standings = () => {
+  const playerName = usePlayerName();
+  const round = useCurrentRound();
+  const players = usePlayers();
+  const filtered = players?.filter(({ name }) => name !== playerName);
+
+  return (
+    <div className={styles.standings}>
+      <div>
+        <span className={styles.standingsName}>{playerName}</span>- Round{" "}
+        {round}
+      </div>
+      {filtered?.map(({ name, currentRound }) => (
+        <div key={name}>
+          <span className={styles.standingsName}>{name}</span>- Round{" "}
+          {currentRound}
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default Standings;