refactor InfoPanel

src/components/InfoPanel.tsx

@@ -3,6 +3,7 @@ import * as React from "react";
 import { FunctionComponent } from "react";
 import { Context } from "../context/context";
 import { getColorByBrightness } from "../util/ColorUtil";
+import CircularPanel from "./CircularPanel";
 
 function getInfoPanelTextByGameState(params: {
   context: Context;
@@ -10,7 +11,6 @@ function getInfoPanelTextByGameState(params: {
   crashMessage?: string;
   userKey?: string;
   userKeyWhoLeave?: string;
-  searchingOpponent: boolean;
 }): string | undefined {
   const {
     context,
@@ -18,11 +18,8 @@ function getInfoPanelTextByGameState(params: {
     crashMessage,
     userKey,
     userKeyWhoLeave,
-    searchingOpponent,
   } = params;
-  if (searchingOpponent) {
-    return context.texts.SearchingOpponent + " " + context.texts.PleaseWait;
-  } else if (crashMessage) {
+  if (crashMessage) {
     return context.texts.GameCrashed + " " + crashMessage;
   } else if (userKeyWhoLeave) {
     let message = context.texts.OpponentLeavesTheGame;
@@ -50,44 +47,24 @@ function getInfoPanelTextByGameState(params: {
   return undefined;
 }
 
-const InfoPanelContainer: FunctionComponent<{
-  context: Context;
-  color: string;
-}> = (props) => {
-  return (
-    <div
-      style={{
-        background: props.color
-      }}
-    >
-      <style jsx>{`
-        div {
-          padding: 1vw 2vw;
-          margin-top: 1vw;
-          border-radius: 10vw;
-        }
-      `}
-      </style>
-      {props.children}
-    </div>
-  );
-};
-
 const InfoPanel: FunctionComponent<{
   context: Context;
   game?: MancalaGame;
   crashMessage?: string;
   userKey?: string;
   userKeyWhoLeave?: string;
-  searchingOpponent: boolean;
+  style?: React.CSSProperties;
+  visible?: boolean;
 }> = ({
   context,
   game,
   crashMessage,
   userKey,
   userKeyWhoLeave,
-  searchingOpponent,
+  style,
+  visible
 }) => {
+    if (visible === false) return <></>;
     const isUserTurn = userKey ? game?.checkIsPlayerTurn(userKey) : false;
     const containerColor = isUserTurn
       ? context.themeManager.theme.playerTurnColor
@@ -102,16 +79,15 @@ const InfoPanel: FunctionComponent<{
       game,
       crashMessage,
       userKey,
-      userKeyWhoLeave,
-      searchingOpponent,
+      userKeyWhoLeave
     });
     if (text) {
       return (
-        <InfoPanelContainer context={context} color={containerColor}>
+        <CircularPanel style={style} color={containerColor}>
           <h4 style={{ margin: "0", color: textColor }}>
             {text}
           </h4>
-        </InfoPanelContainer>
+        </CircularPanel>
       );
     } else {
       return (<div></div>)