enable toggling off for players on chart

closedcontour · Oct 19, 2018 · 1266dd2 · 1266dd2
1 parent aa08760
commit 1266dd2
Show file tree

Hide file tree

Showing 16 changed files with 115 additions and 49 deletions.
diff --git a/projects/app/src/App.tsx b/projects/app/src/App.tsx
@@ -13,7 +13,7 @@ export interface AppProps {
   api: Api;
 }
 
-export class App extends React.Component<AppProps, {}> {
+export class App extends React.PureComponent<AppProps, {}> {
   public render() {
     const homePage = (props: RouteComponentProps<any>) => (
       <HomePage {...props} api={this.props.api} />

diff --git a/projects/app/src/pages/GamePage.tsx b/projects/app/src/pages/GamePage.tsx
@@ -26,7 +26,7 @@ interface GamePageState {
   started: boolean;
 }
 
-export class GamePage extends React.Component<GamePageProps, GamePageState> {
+export class GamePage extends React.PureComponent<GamePageProps, GamePageState> {
   public state: GamePageState = {
     loading: false,
     game: undefined,

diff --git a/projects/app/src/pages/HandPage.tsx b/projects/app/src/pages/HandPage.tsx
@@ -26,7 +26,7 @@ interface HandPageState {
   hand: IHand | undefined;
 }
 
-export class HandPage extends React.Component<HandPageProps, HandPageState> {
+export class HandPage extends React.PureComponent<HandPageProps, HandPageState> {
   public state: HandPageState = {
     loading: false,
     hand: undefined,

diff --git a/projects/app/src/pages/HomePage.tsx b/projects/app/src/pages/HomePage.tsx
@@ -16,7 +16,7 @@ interface HomePageState {
   newPlayer: string;
 }
 
-export class HomePage extends React.Component<HomePageProps, HomePageState> {
+export class HomePage extends React.PureComponent<HomePageProps, HomePageState> {
   public state: HomePageState = {
     loading: false,
     leagues: [],

diff --git a/projects/app/src/pages/LeaguePage.tsx b/projects/app/src/pages/LeaguePage.tsx
@@ -17,7 +17,7 @@ interface LeaguePageState {
   playerToAdd: IPlayer | undefined;
 }
 
-export class LeaguePage extends React.Component<LeaguePageProps, LeaguePageState> {
+export class LeaguePage extends React.PureComponent<LeaguePageProps, LeaguePageState> {
   public state: LeaguePageState = {
     loading: false,
     league: undefined,

diff --git a/projects/app/src/pages/SeasonHistoryPage.tsx b/projects/app/src/pages/SeasonHistoryPage.tsx
@@ -1,4 +1,4 @@
-import { analyzeGames, IGame } from "@turbo-hearts-scores/shared";
+import { analyzeGames, IGame, PlayerSet } from "@turbo-hearts-scores/shared";
 import * as React from "react";
 import { RouteComponentProps } from "react-router";
 import { VictoryChart, VictoryLine, VictoryTooltip, VictoryVoronoiContainer } from "victory";
@@ -13,6 +13,7 @@ interface SeasonHistoryPageProps
 interface SeasonHistoryPageState {
   loading: boolean;
   seasonGames: IGame[];
+  players: Set<string>;
 }
 
 const COLORS = [
@@ -29,13 +30,14 @@ const COLORS = [
 ];
 
 // TODO: this should be a generic GameHistoryPage with a season loader
-export class SeasonHistoryPage extends React.Component<
+export class SeasonHistoryPage extends React.PureComponent<
   SeasonHistoryPageProps,
   SeasonHistoryPageState
 > {
   public state: SeasonHistoryPageState = {
     loading: false,
     seasonGames: [],
+    players: new Set<string>(),
   };
 
   public render() {
@@ -59,10 +61,14 @@ export class SeasonHistoryPage extends React.Component<
         <div className="chart">
           <VictoryChart width={1000} height={500} containerComponent={<VictoryVoronoiContainer />}>
             {Object.keys(scoreHistory.history).map((player, playerIndex) => {
+              const playerName = scoreHistory.history[player].name;
+              if (!this.state.players.has(playerName)) {
+                return null;
+              }
               const data = scoreHistory.history[player].deltaHistory.map((d, i) => ({
                 x: i,
                 y: d,
-                label: `${scoreHistory.history[player].name} ${d}`,
+                label: `${playerName} ${d}`,
               }));
               const style = {
                 data: { stroke: COLORS[playerIndex % COLORS.length] },
@@ -82,10 +88,25 @@ export class SeasonHistoryPage extends React.Component<
         <div className="legend">
           {Object.keys(scoreHistory.history).map((player, playerIndex) => {
             const color = COLORS[playerIndex % COLORS.length];
+            const playerName = scoreHistory.history[player].name;
+            const togglePlayer = () => {
+              if (this.state.players.has(playerName)) {
+                this.state.players.delete(playerName);
+              } else {
+                this.state.players.add(playerName);
+              }
+              this.forceUpdate();
+            };
             return (
-              <span className="entry" key={player}>
-                <span className="sample" style={{ backgroundColor: color }} />
-                <span className="label">{scoreHistory.history[player].name}</span>
+              <span className="entry" key={player} onClick={togglePlayer}>
+                <span
+                  className="sample"
+                  style={{
+                    backgroundColor: color,
+                    opacity: this.state.players.has(playerName) ? 1 : 0.2,
+                  }}
+                />
+                <span className="label">{playerName}</span>
               </span>
             );
           })}
@@ -99,6 +120,9 @@ export class SeasonHistoryPage extends React.Component<
     this.setState({ loading: true });
     const seasonGames = await this.props.api.fetchSeasonGames(seasonId);
     seasonGames.sort((g1, g2) => g1.time - g2.time);
-    this.setState({ loading: false, seasonGames });
+    const players = new Set<string>();
+    const playerSet = analyzeGames(seasonGames, new PlayerSet());
+    playerSet.players.forEach(player => players.add(player.name));
+    this.setState({ loading: false, seasonGames, players });
   }
 }
diff --git a/projects/app/src/pages/SeasonPage.tsx b/projects/app/src/pages/SeasonPage.tsx
@@ -16,7 +16,7 @@ interface SeasonPageState {
   newSeason: string;
 }
 
-export class SeasonPage extends React.Component<SeasonPageProps, SeasonPageState> {
+export class SeasonPage extends React.PureComponent<SeasonPageProps, SeasonPageState> {
   public state: SeasonPageState = {
     loading: false,
     loadingGames: false,

diff --git a/projects/app/src/pages/components/Card.tsx b/projects/app/src/pages/components/Card.tsx
@@ -23,7 +23,7 @@ export interface CardProps {
   onClick?(): void;
 }
 
-export class Card extends React.Component<CardProps, {}> {
+export class Card extends React.PureComponent<CardProps, {}> {
   public render() {
     const suit = suitMap[this.props.suit];
     return (

diff --git a/projects/app/src/pages/components/GameResult.tsx b/projects/app/src/pages/components/GameResult.tsx
@@ -7,7 +7,7 @@ interface GameResultProps {
   game: IGame;
 }
 
-export class GameResult extends React.Component<GameResultProps, {}> {
+export class GameResult extends React.PureComponent<GameResultProps, {}> {
   public render() {
     const { leagueId, seasonId, game } = this.props;
     const results = getGameResult(game);

diff --git a/projects/app/src/pages/components/HandResult.tsx b/projects/app/src/pages/components/HandResult.tsx
@@ -8,7 +8,7 @@ interface HandResultProps {
   hand: IHand;
 }
 
-export class HandResult extends React.Component<HandResultProps, {}> {
+export class HandResult extends React.PureComponent<HandResultProps, {}> {
   public render() {
     const result = getHandResult(this.props.hand);
     return result.valid ? this.renderHand(result) : this.renderInvalid();

diff --git a/projects/app/src/pages/components/PlayerChooser.tsx b/projects/app/src/pages/components/PlayerChooser.tsx
@@ -1,13 +1,13 @@
+import { IPlayer } from "@turbo-hearts-scores/shared";
 import * as React from "react";
-import { IPlayer } from "../../api/api";
 
 export interface PlayerChooserProps {
   players: IPlayer[];
   selectedPlayer: IPlayer | undefined | null;
   onPlayerChanged(player: IPlayer | undefined): void;
 }
 
-export class PlayerChooser extends React.Component<PlayerChooserProps, {}> {
+export class PlayerChooser extends React.PureComponent<PlayerChooserProps, {}> {
   public render() {
     const selectedId = this.props.selectedPlayer ? this.props.selectedPlayer.id : "";
     return (

diff --git a/projects/app/src/pages/components/PlayerHand.tsx b/projects/app/src/pages/components/PlayerHand.tsx
@@ -12,7 +12,7 @@ interface PlayerHandProps {
   onChange(delta: Partial<IPlayerHand> & Pick<IPlayerHand, "index">): void;
 }
 
-export class PlayerHand extends React.Component<PlayerHandProps, {}> {
+export class PlayerHand extends React.PureComponent<PlayerHandProps, {}> {
   public render() {
     return (
       <div className="th-player-hand">

diff --git a/projects/app/src/types/victory-addons.d.ts b/projects/app/src/types/victory-addons.d.ts
@@ -1,34 +1,34 @@
 import * as React from "react";
 
 declare module "victory" {
-    export interface VictoryTooltipProps {
-        active?: any
-        activateData?: any
-        angle?: any
-        cornerRadius?: any
-        data?: any
-        datum?: any
-        dx?: any
-        dy?: any
-        events?: any
-        flyoutStyle?: any
-        flyoutComponent?: any
-        groupComponent?: any
-        height?: any
-        horizontal?: any
-        index?: any
-        labelComponent?: any
-        orientation?: any
-        pointerLength?: any
-        pointerWidth?: any
-        renderInPortal?: any
-        style?: any
-        text?: any
-        width?: any
-        x?: any
-        y?: any
-    }
+  export interface VictoryTooltipProps {
+    active?: any;
+    activateData?: any;
+    angle?: any;
+    cornerRadius?: any;
+    data?: any;
+    datum?: any;
+    dx?: any;
+    dy?: any;
+    events?: any;
+    flyoutStyle?: any;
+    flyoutComponent?: any;
+    groupComponent?: any;
+    height?: any;
+    horizontal?: any;
+    index?: any;
+    labelComponent?: any;
+    orientation?: any;
+    pointerLength?: any;
+    pointerWidth?: any;
+    renderInPortal?: any;
+    style?: any;
+    text?: any;
+    width?: any;
+    x?: any;
+    y?: any;
+  }
 
-    export class VictoryTooltip extends React.Component<VictoryTooltipProps, any> {}
-    export class VictoryVoronoiContainer extends React.Component<any, any> {}
-}
+  export class VictoryTooltip extends React.PureComponent<VictoryTooltipProps, any> {}
+  export class VictoryVoronoiContainer extends React.PureComponent<any, any> {}
+}
diff --git a/projects/server/src/index.ts b/projects/server/src/index.ts
@@ -49,5 +49,6 @@ app.use("/", (req, res, next) => {
 
 // start our server
 server.listen(process.env.PORT || 7999, () => {
+  // tslint:disable-next-line:no-console
   console.log(`Server started on port ${server.address().port} :)`);
 });
diff --git a/projects/shared/src/analysis/PlayerSet.ts b/projects/shared/src/analysis/PlayerSet.ts
@@ -0,0 +1,40 @@
+import { IGame, IPlayer } from "..";
+import { IGameAnalysis } from "./api";
+import { PlayerSetResult } from "./PlayerSet";
+
+export interface PlayerSetResult {
+  players: Set<IPlayer>;
+}
+
+function emptyResult() {
+  return {
+    players: new Set<IPlayer>(),
+  };
+}
+
+export function gameValid(game: IGame) {
+  if (!game.players || game.players.length === 0) {
+    return false;
+  }
+  if (game.players.some(p => p == null) || game.hands == null || game.hands.length === 0) {
+    return false;
+  }
+  return true;
+}
+
+/**
+ * This requires that games be iterated on in temporal order.
+ */
+export class PlayerSet implements IGameAnalysis<PlayerSetResult> {
+  public initialState() {
+    return emptyResult();
+  }
+
+  public analyze(current: PlayerSetResult, game: IGame): PlayerSetResult {
+    if (!gameValid(game)) {
+      return current;
+    }
+    game.players!.forEach(player => current.players.add(player!));
+    return current;
+  }
+}
diff --git a/projects/shared/src/analysis/index.ts b/projects/shared/src/analysis/index.ts
@@ -2,4 +2,5 @@ export * from "./api";
 export * from "./HandSummary";
 export * from "./HandResult";
 export * from "./GameResult";
+export * from "./PlayerSet";
 export * from "./Scoreboard";