Add KillFeed to round summary, implement partial display on final scoreboard

client/package.json

@@ -15,7 +15,7 @@
     "react-transition-group": "^4.4.2"
   },
   "scripts": {
-    "start": "react-scripts start",
+    "start": "ESLINT_NO_DEV_ERRORS=true react-scripts start",
     "build": "react-scripts build",
     "format": "prettier --check src/",
     "format:fix": "prettier --write src/",

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

@@ -7,7 +7,7 @@ import GuessPane from "./GuessPane";
 import PositionedStreetView from "./PositionedStreetView";
 import RaceMode from "./RaceMode";
 import { useIsFinished } from "./hooks";
-import KillFeed from "./KillFeed";
+import KillFeed from "../../util/KillFeed/KillFeed";
 
 const GamePanel = () => {
   // warn the user if they navigate away

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

@@ -53,35 +53,6 @@
   z-index: 1;
 }
 
-.killFeed {
-  position: absolute;
-  z-index: 4;
-  right: 5vw;
-  top: 5vh;
-  display: flex;
-  flex-flow: column nowrap;
-  justify-content: flex-end;
-  align-items: flex-start;
-}
-
-.killFeedItem {
-  display: inline-flex;
-  background: #333;
-  padding: 0.5em;
-  justify-content: flex-end;
-  align-items: center;
-}
-
-.killFeedName {
-  display: inline-block;
-  width: 10em;
-  margin-right: 0.5em;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  text-align: right;
-}
-
 .cutoff {
   position: absolute;
   top: 20%;

client/src/components/screens/GameSummary/ScoreBoard/ScoreBoard.jsx

@@ -47,10 +47,12 @@ export const PlayerScoreTile = ({ name, guesses, totalScore, winner }) => (
   </div>
 );
 
-const ScoreBoard = ({ players }) => (
+const ScoreBoard = ({ players, requireFinished }) => (
   <div className={styles.scoreboard}>
-    {players
-      .filter(({ currentRound }) => currentRound === null)
+    {(requireFinished
+      ? players.filter(({ currentRound }) => currentRound === null)
+      : players.slice()
+    )
       .sort(({ totalScore: p1 }, { totalScore: p2 }) =>
         // eslint-disable-next-line no-nested-ternary
         p1 > p2 ? -1 : p1 < p2 ? 1 : 0

client/src/components/screens/RoundSummary/RoundSummary.jsx

@@ -1,14 +1,16 @@
 import { useRef } from "react";
+import { GUN_GAME } from "../../../domain/constants";
 import {
   dispatch,
   useCurrentRound,
   useLastRound,
 } from "../../../domain/gameStore";
-import { usePlayers } from "../../../hooks/useGameInfo";
+import { useGameConfig, usePlayers } from "../../../hooks/useGameInfo";
 import useMap from "../../../hooks/useMap";
 import useMarkersFromGuesses from "../../../hooks/useMarkersFromGuesses";
 import usePreventNavigation from "../../../hooks/usePreventNavigation";
 import DelayedButton from "../../util/DelayedButton";
+import KillFeed from "../../util/KillFeed/KillFeed";
 import styles from "./RoundSummary.module.css";
 import useClickToCheckScore from "./useClickToCheckScore";
 
@@ -57,8 +59,12 @@ const RoundSummary = () => {
   // warn the user if they navigate away
   usePreventNavigation();
 
+  // get the current gamemode
+  const { gameMode } = useGameConfig();
+
   return (
     <div>
+      {gameMode === GUN_GAME && <KillFeed />}
       <div className={styles.map} ref={mapDivRef} />
       <div className={styles.panel}>
         <span className={styles.score}>

client/src/components/screens/GamePanel/KillFeed.jsx → client/src/components/util/KillFeed/KillFeed.jsx

@@ -1,7 +1,7 @@
 import { useEffect, useState } from "react";
-import { dispatch, useGameId } from "../../../domain/gameStore";
+import { dispatch, useGameId, usePlayerName } from "../../../domain/gameStore";
 import { usePlayers } from "../../../hooks/useGameInfo";
-import styles from "./GamePanel.module.css";
+import styles from "./KillFeed.module.css";
 
 // okay, in an ideal world this would be part of the game store or something
 // and it would get properly managed by reactive state
@@ -10,6 +10,7 @@ import styles from "./GamePanel.module.css";
 const shownItems = new Set();
 
 const KillFeed = () => {
+  const playerName = usePlayerName();
   const gameId = useGameId();
   const players = usePlayers();
   useEffect(() => {
@@ -22,6 +23,7 @@ const KillFeed = () => {
   useEffect(() => {
     const toDisplay =
       players
+        ?.filter(({ name }) => name !== playerName)
         ?.flatMap(({ name, guesses }) =>
           Object.entries(guesses).map(([round, { score }]) => ({
             name,
@@ -46,12 +48,12 @@ const KillFeed = () => {
     return () => {
       timeouts.forEach(t => clearTimeout(t));
     };
-  }, [shownItemsState, gameId, players]);
+  }, [shownItemsState, gameId, players, playerName]);
   return (
-    <div className={styles.killFeed}>
+    <div className={styles.feed}>
       {display.map(({ name, round, score }) => (
-        <span key={`${name}-${round}`} className={styles.killFeedItem}>
-          <span className={styles.killFeedName}>{name}</span>{" "}
+        <span key={`${name}-${round}`} className={styles.item}>
+          <span className={styles.name}>{name}</span>{" "}
           {score >= 4950 ? "🎯" : "🖱️"} 🗺️ {round}
         </span>
       ))}

client/src/components/util/KillFeed/KillFeed.module.css

@@ -0,0 +1,28 @@
+.feed {
+  position: absolute;
+  z-index: 4;
+  right: 8px;
+  top: 8px;
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: flex-end;
+  align-items: flex-start;
+}
+
+.item {
+  display: inline-flex;
+  background: #333;
+  padding: 0.5em;
+  justify-content: flex-end;
+  align-items: center;
+}
+
+.name {
+  display: inline-block;
+  width: 10em;
+  margin-right: 0.5em;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  text-align: right;
+}