implement UserStatus (isOnline)

src/const/channel_names.ts

@@ -8,3 +8,4 @@ export const channel_on_game_crashed = "on_game_crashed"
 export const channel_on_game_user_leave = "on_game_user_leave"
 export const channel_ping = "ping"
 export const channel_pong = "pong"
+export const channel_on_user_connection_change = "channel_on_user_connection_change"

src/routes/Home.tsx

@@ -10,6 +10,7 @@ import {
   channel_on_game_start,
   channel_on_game_update,
   channel_on_game_user_leave,
+  channel_on_user_connection_change,
 } from "../const/channel_names";
 import InfoPanel from "../components/InfoPanel";
 import { CommonMancalaGame, MancalaGame, Pit } from "mancala.js";
@@ -27,6 +28,12 @@ import HeaderbarIcon from "../components/headerbar/HeaderbarIcon";
 import HeaderbarTitle from "../components/headerbar/HeaderbarTitle";
 import ThemeSwitchMenu from "../components/headerbar/ThemeSwitchMenu";
 import Button from "../components/Button";
+import BoardToolbar from "../components/board/BoardToolbar";
+import UserStatus from "../components/UserStatus";
+import Center from "../components/Center";
+import CircularPanel from "../components/CircularPanel";
+import useWindowDimensions from "../hooks/useWindowDimensions";
+import { UserConnectionInfo } from "../models/UserConnectionInfo";
 
 type ConnectionState = "connecting" | "error" | "connected" | "reconnecting";
 
@@ -56,6 +63,10 @@ const Home: FunctionComponent<{ initial?: number }> = ({ initial = 0 }) => {
   // We have to block future actions if there is an ongoing action.
   const [hasOngoingAction, setHasOngoingAction] = useState<boolean>(false);
 
+  const { height, width } = useWindowDimensions();
+
+  const [isOpponentOnline, setIsOpponentOnline] = useState<boolean>(false);
+
   const onConnectionDone = () => {
     setConnetionState("connected");
   };
@@ -116,6 +127,12 @@ const Home: FunctionComponent<{ initial?: number }> = ({ initial = 0 }) => {
       setUserKeyWhoLeave(userKeyWhoLeave);
       setHasOngoingAction(false);
     });
+
+    context.rtmt.listenMessage(channel_on_user_connection_change, (message: any) => {
+      const userConnectionInfo = message as UserConnectionInfo;
+      //todo: change this when implementing watch the game feature
+      setIsOpponentOnline(userConnectionInfo.isOnline);
+    })
   };
 
   const updateBoardViewModel = (boardViewModel: BoardViewModel) => {
@@ -137,6 +154,8 @@ const Home: FunctionComponent<{ initial?: number }> = ({ initial = 0 }) => {
     return index;
   };
 
+  const getOpponentId = () => game?.player1Id === userKey ? game?.player2Id : game?.player1Id;
+
   const checkHasAnOngoingAction = () => hasOngoingAction;
 
   React.useEffect(() => {
@@ -168,7 +187,7 @@ const Home: FunctionComponent<{ initial?: number }> = ({ initial = 0 }) => {
   };
 
   const onPitSelect = (index: number, pit: Pit) => {
-    if(checkHasAnOngoingAction()) {
+    if (checkHasAnOngoingAction()) {
       return;
     }
     setHasOngoingAction(true);
@@ -209,6 +228,12 @@ const Home: FunctionComponent<{ initial?: number }> = ({ initial = 0 }) => {
     context.themeManager.theme.textLightColor
   );
   const renderNewGameBtn = userKeyWhoLeave || !game || (game && game.state == "ended");
+  const showBoardView = game && boardViewModel && userKey && true;
+  const opponentUser = { id: getOpponentId() || "0", name: "Anonymous", isOnline: isOpponentOnline, isAnonymous: true };
+  const user = { id: userKey || "1", name: "Anonymous", isOnline: connectionState === "connected", isAnonymous: true };
+
+  const isMobile = width < 600;
+
   return (
     <PageContainer theme={theme!}>
       <FloatingPanel context={context} color={context.themeManager.theme.boardColor} visible={showConnectionState}>
@@ -228,14 +253,36 @@ const Home: FunctionComponent<{ initial?: number }> = ({ initial = 0 }) => {
             onClick={renderNewGameBtn ? onNewGameClick : onLeaveGameClick} />
         </Row>
       </HeaderBar>
+      <BoardToolbar style={{ justifyContent: "center" }} visible={showBoardView && isMobile || false}>
         <InfoPanel
+          style={{ marginTop: "0.5rem", marginBottom: "0.5rem" }}
+          context={context}
+          game={game}
+          crashMessage={crashMessage}
+          userKey={userKey}
+          userKeyWhoLeave={userKeyWhoLeave} />
+      </BoardToolbar>
+      <BoardToolbar style={{ alignItems: "flex-end" }} visible={showBoardView || false}>
+        <UserStatus style={{
+          marginBottom: "0.5rem", marginLeft: "6%", maxWidth: isMobile ? "40vw" : "30vw",
+          width: isMobile ? "40vw" : "30vw"
+        }} context={context} layoutMode="left" user={opponentUser} visible={showBoardView || false} />
+        <InfoPanel
+          style={{
+            marginTop: "0.5rem", marginBottom: "0.5rem",
+          }}
           context={context}
           game={game}
           crashMessage={crashMessage}
           userKey={userKey}
           userKeyWhoLeave={userKeyWhoLeave}
-        searchingOpponent={searchingOpponent} />
-      {game && boardViewModel && userKey && (
+          visible={!isMobile} />
+        <UserStatus style={{
+          marginBottom: "0.5rem", marginRight: "6%", maxWidth: isMobile ? "40vw" : "30vw",
+          width: isMobile ? "40vw" : "30vw"
+        }} context={context} layoutMode="right" user={user} visible={showBoardView || false} />
+      </BoardToolbar>
+      {showBoardView ? (
         <BoardView
           userKey={userKey}
           game={game}
@@ -243,6 +290,12 @@ const Home: FunctionComponent<{ initial?: number }> = ({ initial = 0 }) => {
           boardViewModel={boardViewModel}
           context={context}
           onPitSelect={onPitSelect} />
+      ) : searchingOpponent && (
+        <Center>
+          <CircularPanel color={context.themeManager.theme.boardColor}>
+            <h4 style={{ margin: "0", color: textColorOnBoard }}>{`${context.texts.SearchingOpponent} ${context.texts.PleaseWait}...`}</h4>
+          </CircularPanel>
+        </Center>
       )}
     </PageContainer>
   );