Legend column

TODO

@@ -25,6 +25,11 @@ compare players http://www.reddit.com/r/BasketballGM/comments/1saclf/suggestion_
   - test in all sports
     - position specific stats?
   - test long names
+  - table striping
+    - should be specific to a category/th, not for the whole table
+  - sticky header while scolling top table
+    - makes sense on mobile too, or just desktop?
+  - more distinct background color for th
 - link from
   - player profile
   - player popover?

src/ui/views/ComparePlayers.tsx

@@ -2,7 +2,7 @@ import useTitleBar from "../hooks/useTitleBar";
 import type { View } from "../../common/types";
 import { PlayerNameLabels, PlayerPicture } from "../components";
 import { RATINGS, bySport } from "../../common";
-import { helpers } from "../util";
+import { getCols, helpers } from "../util";
 
 const ComparePlayers = ({
 	availablePlayers,
@@ -31,13 +31,29 @@ const ComparePlayers = ({
 		hockey: [],
 	});
 
+	// If there are just 2 players, show the legend column between them. Otherwise, show on the right
+	const legendColumn = players.length <= 2 ? 1 : 0;
+
+	const playersAndLegend =
+		legendColumn === 0
+			? [{ p: "legend", season: undefined } as const, ...players]
+			: [
+					players[0],
+					{ p: "legend", season: undefined } as const,
+					...players.slice(1),
+				];
+
 	return (
 		<>
 			<div className="table-responsive">
-				<table className="table table-nonfluid table-sm border-top-0 table-striped">
+				<table className="table table-nonfluid table-sm border-top-0 table-striped text-center">
 					<tbody>
 						<tr>
-							{players.map(({ p, season }, i) => {
+							{playersAndLegend.map(({ p, season }, i) => {
+								if (p === "legend") {
+									return <td key="legend" />;
+								}
+
 								return (
 									<td
 										key={i}
@@ -76,48 +92,63 @@ const ComparePlayers = ({
 							})}
 						</tr>
 						<tr>
-							<th className="text-center" colSpan={numCols}>
-								Bio
-							</th>
+							<th colSpan={numCols}>Bio</th>
 						</tr>
 						<tr>
-							{players.map(({ p }, i) => {
-								return (
-									<td key={i} className="text-center">
-										{p.age}
-									</td>
-								);
+							{playersAndLegend.map(({ p }, i) => {
+								if (p === "legend") {
+									return <td key="legend">Age</td>;
+								}
+								return <td key={i}>{p.age}</td>;
 							})}
 						</tr>
 						<tr>
-							<th className="text-center" colSpan={numCols}>
-								Ratings
-							</th>
+							<th colSpan={numCols}>Ratings</th>
 						</tr>
 						{ratings.map(rating => {
 							return (
 								<tr key={rating}>
-									{players.map(({ p }, i) => {
-										return (
-											<td key={i} className="text-center">
-												{p.ratings[rating]}
-											</td>
-										);
+									{playersAndLegend.map(({ p }, i) => {
+										if (p === "legend") {
+											let key;
+											if (rating === "ovr") {
+												key = "Ovr";
+											} else if (rating === "pot") {
+												key = "Pot";
+											} else {
+												key = `rating:${rating}`;
+											}
+											const col = getCols([key])[0];
+											return (
+												<td key="legend" title={col.desc}>
+													{col.title}
+												</td>
+											);
+										}
+
+										return <td key={i}>{p.ratings[rating]}</td>;
 									})}
 								</tr>
 							);
 						})}
 						<tr>
-							<th className="text-center" colSpan={numCols}>
-								Stats
-							</th>
+							<th colSpan={numCols}>Stats</th>
 						</tr>
 						{stats.map(stat => {
 							return (
 								<tr key={stat}>
-									{players.map(({ p }, i) => {
+									{playersAndLegend.map(({ p }, i) => {
+										if (p === "legend") {
+											const col = getCols([`stat:${stat}`])[0];
+											return (
+												<td key="legend" title={col.desc}>
+													{col.title}
+												</td>
+											);
+										}
+
 										return (
-											<td key={i} className="text-center">
+											<td key={i}>
 												{helpers.roundStat(p.stats[stat], stat)}
 												{showPercentSign.includes(stat) ? "%" : null}
 											</td>
@@ -127,9 +158,7 @@ const ComparePlayers = ({
 							);
 						})}
 						<tr>
-							<th className="text-center" colSpan={numCols}>
-								Awards
-							</th>
+							<th colSpan={numCols}>Awards</th>
 						</tr>
 					</tbody>
 				</table>