Add titles to scoreboard flags, fix trophy not showing up, change name trim logic

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

@@ -1,19 +1,25 @@
+import iso from "iso-3166-1";
 import flagLookup from "../../../../domain/flagLookup";
 import styles from "./ScoreBoard.module.css";
 
 // since everyone wants to use giant names...
-const nameLineWidthGuess = 25;
+const bigNameMin = 30;
+const medNameMin = 20;
+
+const getNameClass = name => {
+  if (name.length >= bigNameMin) {
+    return styles.longname;
+  }
+  if (name.length >= medNameMin) {
+    return styles.medname;
+  }
+  return "";
+};
 
 export const PlayerScoreTile = ({ name, guesses, totalScore, winner }) => (
   <div className={styles.tile}>
     <div className={styles.header}>
-      <span
-        className={`${styles.name} ${
-          name.length > nameLineWidthGuess ? styles.longname : ""
-        }`}
-      >
-        {name}
-      </span>
+      <span className={`${styles.name} ${getNameClass(name)}`}>{name}</span>
       <span className={styles.total}>
         {winner && "🏆"} {totalScore}
       </span>
@@ -28,7 +34,12 @@ export const PlayerScoreTile = ({ name, guesses, totalScore, winner }) => (
               <span className={styles.score}>
                 Round {num}: {score ?? 0}
               </span>
-              <span className={styles.flag}>{flagLookup(country)}</span>
+              <span
+                className={styles.flag}
+                title={country && iso.whereAlpha2(country).country}
+              >
+                {flagLookup(country)}
+              </span>
             </div>
           ) : null
         )}
@@ -44,12 +55,12 @@ const ScoreBoard = ({ players }) => (
         // eslint-disable-next-line no-nested-ternary
         p1 > p2 ? -1 : p1 < p2 ? 1 : 0
       )
-      .map(({ name, guesses, totalScore, winner }, i) => (
+      .map(({ name, guesses, totalScore }, i) => (
         <PlayerScoreTile
           key={name}
           // TODO gracefully handle ties...
           winner={i === 0}
-          {...{ name, guesses, totalScore, winner }}
+          {...{ name, guesses, totalScore }}
         />
       ))}
   </div>

client/src/components/screens/GameSummary/ScoreBoard/ScoreBoard.module.css

@@ -16,7 +16,7 @@
   flex-flow: column nowrap;
   justify-content: flex-start;
   align-items: flex-start;
-  min-width: 12em;
+  width: 16em;
   padding-left: 8px;
   padding-right: 8px;
 }
@@ -39,6 +39,11 @@
   word-break: break-all;
 }
 
+.medname {
+  font-size: 0.7em;
+  z-index: -1;
+}
+
 .longname {
   font-size: 0.2em;
   z-index: -1;

client/src/tests/Scoreboard.test.js

@@ -4,8 +4,10 @@ import ScoreBoard, {
   PlayerScoreTile,
 } from "../components/screens/GameSummary/ScoreBoard/ScoreBoard";
 
+jest.mock("iso-3166-1");
 jest.mock("../domain/flagLookup");
 
+import iso from "iso-3166-1";
 import flagLookup from "../domain/flagLookup";
 
 describe("ScoreBoard", () => {
@@ -39,6 +41,9 @@ describe("ScoreBoard", () => {
     expect(rendered).toMatchSnapshot();
   });
   describe("PlayerScoreTile", () => {
+    beforeEach(() => {
+      iso.whereAlpha2.mockReturnValue({ country: "test-country" });
+    });
     it("renders with no guesses", () => {
       const rendered = shallow(
         <PlayerScoreTile name="Name" guesses={[]} totalScore={0} />
@@ -51,6 +56,12 @@ describe("ScoreBoard", () => {
       );
       expect(rendered).toMatchSnapshot();
     });
+    it("renders slightly long name", () => {
+      const rendered = shallow(
+        <PlayerScoreTile name={"Long".repeat(5)} guesses={[]} totalScore={0} />
+      );
+      expect(rendered).toMatchSnapshot();
+    });
     it("renders with guesses", () => {
       flagLookup.mockReturnValue("flag");
       const rendered = shallow(

client/src/tests/__snapshots__/Scoreboard.test.js.snap

@@ -25,6 +25,31 @@ exports[`ScoreBoard PlayerScoreTile renders overly long name 1`] = `
 </div>
 `;
 
+exports[`ScoreBoard PlayerScoreTile renders slightly long name 1`] = `
+<div
+  className="tile"
+>
+  <div
+    className="header"
+  >
+    <span
+      className="name medname"
+    >
+      LongLongLongLongLong
+    </span>
+    <span
+      className="total"
+    >
+       
+      0
+    </span>
+  </div>
+  <div
+    className="scores"
+  />
+</div>
+`;
+
 exports[`ScoreBoard PlayerScoreTile renders with guesses 1`] = `
 <div
   className="tile"
@@ -62,6 +87,7 @@ exports[`ScoreBoard PlayerScoreTile renders with guesses 1`] = `
       </span>
       <span
         className="flag"
+        title="test-country"
       >
         flag
       </span>
@@ -80,6 +106,7 @@ exports[`ScoreBoard PlayerScoreTile renders with guesses 1`] = `
       </span>
       <span
         className="flag"
+        title="test-country"
       >
         flag
       </span>
@@ -98,6 +125,7 @@ exports[`ScoreBoard PlayerScoreTile renders with guesses 1`] = `
       </span>
       <span
         className="flag"
+        title="test-country"
       >
         flag
       </span>
@@ -173,6 +201,7 @@ exports[`ScoreBoard PlayerScoreTile renders with missing guess 1`] = `
       </span>
       <span
         className="flag"
+        title="test-country"
       >
         flag
       </span>
@@ -191,6 +220,7 @@ exports[`ScoreBoard PlayerScoreTile renders with missing guess 1`] = `
       </span>
       <span
         className="flag"
+        title="test-country"
       >
         flag
       </span>
@@ -284,6 +314,7 @@ exports[`ScoreBoard PlayerScoreTile renders with timeout 1`] = `
       </span>
       <span
         className="flag"
+        title="test-country"
       >
         flag
       </span>
@@ -302,6 +333,7 @@ exports[`ScoreBoard PlayerScoreTile renders with timeout 1`] = `
       </span>
       <span
         className="flag"
+        title={null}
       >
         flag
       </span>
@@ -320,6 +352,7 @@ exports[`ScoreBoard PlayerScoreTile renders with timeout 1`] = `
       </span>
       <span
         className="flag"
+        title="test-country"
       >
         flag
       </span>
@@ -395,6 +428,7 @@ exports[`ScoreBoard PlayerScoreTile sorts guesses by round number 1`] = `
       </span>
       <span
         className="flag"
+        title="test-country"
       >
         flag
       </span>
@@ -413,6 +447,7 @@ exports[`ScoreBoard PlayerScoreTile sorts guesses by round number 1`] = `
       </span>
       <span
         className="flag"
+        title="test-country"
       >
         flag
       </span>
@@ -431,6 +466,7 @@ exports[`ScoreBoard PlayerScoreTile sorts guesses by round number 1`] = `
       </span>
       <span
         className="flag"
+        title="test-country"
       >
         flag
       </span>
@@ -477,11 +513,13 @@ exports[`ScoreBoard does not add tiles for unfinished players 1`] = `
     key="Name2"
     name="Name2"
     totalScore={10000}
+    winner={true}
   />
   <PlayerScoreTile
     key="Name1"
     name="Name1"
     totalScore={5000}
+    winner={false}
   />
 </div>
 `;
@@ -500,21 +538,25 @@ exports[`ScoreBoard renders with player tiles sorted by score 1`] = `
     key="Name2"
     name="Name2"
     totalScore={10000}
+    winner={true}
   />
   <PlayerScoreTile
     key="Name1"
     name="Name1"
     totalScore={5000}
+    winner={false}
   />
   <PlayerScoreTile
     key="Name4"
     name="Name4"
     totalScore={5000}
+    winner={false}
   />
   <PlayerScoreTile
     key="Name3"
     name="Name3"
     totalScore={1000}
+    winner={false}
   />
 </div>
 `;