Merge pull request online-go#2457 from dexonsmith/mark-games-opponent…

…s-move

Mark games where it's the opponents move

src/components/GameList/GameList.styl

@@ -52,6 +52,10 @@
         themed background-color miniboard-to-move
     }
 
+    .opponents-move {
+        themed background-color miniboard-opponent-to-move
+    }
+
     .goban-with-names {
         display: inline-flex;
         width: 12rem;

src/components/GameList/GameList.tsx

@@ -352,6 +352,7 @@ export class GameList extends React.PureComponent<GameListProps, GameListState>
                 games,
                 !!this.props.namesByGobans,
                 (game: GameType, goban: Goban) => this.onGobanCreated(game, goban),
+                this.props?.player,
                 this.props.miniGobanProps,
             );
         }
@@ -492,6 +493,7 @@ function MiniGobanList(
     games: GameType[],
     withNames: boolean,
     onGobanCreated: (game: GameType, goban: Goban) => void,
+    player?: { id: number },
     miniGobanProps?: MiniGobanProps,
 ): JSX.Element {
     return (
@@ -504,6 +506,7 @@ function MiniGobanList(
                         width={game.width}
                         height={game.height}
                         onGobanCreated={(goban) => onGobanCreated(game, goban)}
+                        player={player}
                         {...(miniGobanProps || {})}
                     />
                 );

src/components/GobanLineSummary/GobanLineSummary.styl

@@ -59,6 +59,10 @@
         themed background-color miniboard-to-move;
     }
 
+    .opponents-move {
+        themed background-color miniboard-opponent-to-move;
+    }
+
     .game-name, .player {
         text-align: left;
         overflow: hidden;

src/components/GobanLineSummary/GobanLineSummary.tsx

@@ -135,6 +135,9 @@ export class GobanLineSummary extends React.Component<
         const black = this.props.black;
         const white = this.props.white;
         const player_to_move = (this.goban && this.goban.engine.playerToMove()) || 0;
+        const user = data.get("config.user").id;
+        const player = this.props?.player?.id;
+        const is_current_user = player_to_move === user;
 
         this.setState({
             black_score: interpolate("%s points", [score.black.prisoners + score.black.komi]),
@@ -148,7 +151,13 @@ export class GobanLineSummary extends React.Component<
             white_name:
                 typeof white === "object" ? white.username + " [" + rankString(white) + "]" : white,
 
-            current_users_move: player_to_move === data.get("config.user").id,
+            // Mark games where it's the current user's move.
+            current_users_move: is_current_user,
+
+            // If this is a different player's page, also mark other games
+            // where it's not that player's move.
+            opponents_move:
+                !!player && !is_current_user && user !== player && player_to_move !== player,
             black_to_move_cls: this.goban && black.id === player_to_move ? "to-move" : "",
             white_to_move_cls: this.goban && white.id === player_to_move ? "to-move" : "",
 
@@ -183,6 +192,7 @@ export class GobanLineSummary extends React.Component<
                 to={`/game/${this.props.id}`}
                 className={
                     `GobanLineSummary ` +
+                    (this.state.opponents_move ? " opponents-move" : "") +
                     (this.state.current_users_move ? " current-users-move" : "") +
                     (this.state.in_stone_removal_phase ? " in-stone-removal-phase" : "")
                 }

src/components/MiniGoban/MiniGoban.styl

@@ -133,6 +133,14 @@
         themed border-color miniboard-to-move-border
     }
 
+    .board.opponents-move {
+        border: 1px solid transparent;
+        border-radius: 4px;
+        //padding: 1.2em;
+        themed background-color miniboard-opponent-to-move;
+        themed border-color miniboard-opponent-to-move-border
+    }
+
     .board.in-stone-removal-phase {
         border: 1px solid transparent;
         padding: 1em;

src/components/MiniGoban/MiniGoban.tsx

@@ -44,6 +44,7 @@ export interface MiniGobanProps {
 
     onUpdate?: () => void;
     json?: any;
+    player?: { id: number };
     noLink?: boolean;
     openLinksInNewTab?: boolean;
     noText?: boolean;
@@ -71,6 +72,7 @@ export function MiniGoban(props: MiniGobanProps): JSX.Element {
     const [black_name, setBlackName] = React.useState("");
     const [white_name, setWhiteName] = React.useState("");
     const [current_users_move, setCurrentUsersMove] = React.useState(false);
+    const [opponents_move, setOpponentsMove] = React.useState(false);
     const [black_to_move_cls, setBlackToMoveCls] = React.useState("");
     const [white_to_move_cls, setWhiteToMoveCls] = React.useState("");
     const [in_stone_removal_phase, setInStoneRemovalPhase] = React.useState(false);
@@ -219,7 +221,17 @@ export function MiniGoban(props: MiniGobanProps): JSX.Element {
                 );
             }
 
-            setCurrentUsersMove(player_to_move === data.get("config.user").id);
+            // Mark games where it's the current user's move.
+            const user = data.get("config.user").id;
+            const is_current_user = player_to_move === user;
+            setCurrentUsersMove(is_current_user);
+
+            // If this is a different player's page, also mark other games
+            // where it's not that player's move.
+            const player = props?.player?.id;
+            setOpponentsMove(
+                !!player && !is_current_user && user !== player && player_to_move !== player,
+            );
 
             setBlackToMoveCls(
                 typeof black === "object" && goban.current && black.id === player_to_move
@@ -268,6 +280,7 @@ export function MiniGoban(props: MiniGobanProps): JSX.Element {
                     className={
                         "small board" +
                         (current_users_move ? " current-users-move" : "") +
+                        (opponents_move ? " opponents-move" : "") +
                         (in_stone_removal_phase ? " in-stone-removal-phase" : "") +
                         (finished ? " finished" : "")
                     }

src/lib/types.ts

@@ -145,6 +145,7 @@ export interface GobanInfoStateBase {
     white_name?: string;
 
     current_users_move?: boolean;
+    opponents_move?: boolean;
     black_to_move_cls?: string;
     white_to_move_cls?: string;
     in_stone_removal_phase?: boolean;

src/ogs.styl

@@ -256,6 +256,8 @@ light.goban-shadow                      = 0 4px 8px rgba(128,128,128,.71)
 light.goban-shadow-borderless           = 0 0px 0px rgba(128,128,128,.71)
 light.miniboard-to-move                 = #E6FFD8
 light.miniboard-to-move-border          = darken(light.miniboard-to-move, 60%)
+light.miniboard-opponent-to-move        = #F8F8F8
+light.miniboard-opponent-to-move-border = darken(light.miniboard-opponent-to-move, 10%)
 light.miniboard-hover                   = #C7E7E9
 light.miniboard-hover-border            = darken(light.miniboard-hover, 30%)
 light.miniboard-stone-removal           = #FBfbD8
@@ -392,6 +394,8 @@ dark.goban-shadow                       = none
 dark.goban-shadow-borderless            = none
 dark.miniboard-to-move                  = #2B4029
 dark.miniboard-to-move-border           = darken(dark.miniboard-to-move, 60%)
+dark.miniboard-opponent-to-move         = #282828
+dark.miniboard-opponent-to-move-border  = lighten(dark.miniboard-opponent-to-move, 10%)
 dark.miniboard-hover                    = #578588
 dark.miniboard-hover-border             = darken(dark.miniboard-hover, 30%)
 dark.miniboard-stone-removal            = #5B4810