From e930411c0df1ba0c77c5957264b76321732a36fd Mon Sep 17 00:00:00 2001
From: Adam <adam.wojcik.it@gmail.com>
Date: Thu, 4 Nov 2021 21:37:12 +0100
Subject: [PATCH] review tip

---
 .../components/FindParker/FindParker.tsx      | 25 ++++++++++++++++---
 .../components/FindParker/IFindParkerState.ts |  1 +
 .../src/webparts/findParker/loc/en-us.js      |  1 +
 .../webparts/findParker/loc/mystrings.d.ts    |  1 +
 4 files changed, 24 insertions(+), 4 deletions(-)

diff --git a/samples/react-find-parker/src/webparts/findParker/components/FindParker/FindParker.tsx b/samples/react-find-parker/src/webparts/findParker/components/FindParker/FindParker.tsx
index 96052ec1c..ccb4997c3 100644
--- a/samples/react-find-parker/src/webparts/findParker/components/FindParker/FindParker.tsx
+++ b/samples/react-find-parker/src/webparts/findParker/components/FindParker/FindParker.tsx
@@ -17,6 +17,7 @@ export default class FindParker extends React.Component<IFindParkerProps, IFindP
       numberOfFoundElements: 0,
       gameStarted: false,
       gameFinsihed: false,
+      foundPlaceForParkers: false,
       listOfParkers: [],
       elements: []
     };
@@ -25,9 +26,17 @@ export default class FindParker extends React.Component<IFindParkerProps, IFindP
   public componentDidMount(): void {
     const { numberOfElements } = this.props;
 
-    const listOfParkers = this.createListOfParkers(numberOfElements);
+    if(document.querySelector(Constants.mainPageContent) === null){
+      this.setState({ foundPlaceForParkers: false });
+      return;
+    }
 
-    this.setState({ listOfParkers: listOfParkers });
+    const listOfParkers = this.createListOfParkers(numberOfElements);
+    this.setState(
+      { 
+        listOfParkers: listOfParkers,
+        foundPlaceForParkers: true 
+      });
   }
 
   public render(): React.ReactElement<IFindParkerProps> {
@@ -35,6 +44,7 @@ export default class FindParker extends React.Component<IFindParkerProps, IFindP
     const {
       gameStarted,
       gameFinsihed,
+      foundPlaceForParkers,
       numberOfFoundElements,
       elements } = this.state;
     const { numberOfElements } = this.props;
@@ -45,13 +55,20 @@ export default class FindParker extends React.Component<IFindParkerProps, IFindP
           <div className={styles.row}>
             <div className={styles.column}>
               <p className={styles.title}>{strings.GameTitle}</p>
-              <p className={styles.label}>{strings.GameDescription}</p>
+              {foundPlaceForParkers ? 
+                <p className={styles.label}>{strings.GameDescription}</p>
+                :
+                <p className={styles.label}>{strings.CouldNotFindPlaceForParkersDescription}</p>
+              }
             </div>
           </div>
           {!gameStarted ?
             <div className={styles.row}>
               <div className={styles.column}>
-                <DefaultButton onClick={() => this.startGame()}>{strings.StartGameButton}</DefaultButton>
+                {foundPlaceForParkers ? 
+                  <DefaultButton onClick={() => this.startGame()}>{strings.StartGameButton}</DefaultButton>
+                  : ''
+                }
               </div>
             </div>
             :
diff --git a/samples/react-find-parker/src/webparts/findParker/components/FindParker/IFindParkerState.ts b/samples/react-find-parker/src/webparts/findParker/components/FindParker/IFindParkerState.ts
index 848ba1813..df0bbf0a3 100644
--- a/samples/react-find-parker/src/webparts/findParker/components/FindParker/IFindParkerState.ts
+++ b/samples/react-find-parker/src/webparts/findParker/components/FindParker/IFindParkerState.ts
@@ -6,4 +6,5 @@ export interface IFindParkerState {
     elements: Array<React.ReactElement>;
     gameStarted: boolean;
     gameFinsihed: boolean;
+    foundPlaceForParkers: boolean;
 }
diff --git a/samples/react-find-parker/src/webparts/findParker/loc/en-us.js b/samples/react-find-parker/src/webparts/findParker/loc/en-us.js
index 6174d528d..45dcf6e43 100644
--- a/samples/react-find-parker/src/webparts/findParker/loc/en-us.js
+++ b/samples/react-find-parker/src/webparts/findParker/loc/en-us.js
@@ -5,6 +5,7 @@ define([], function() {
     "PropertyPaneNumberOfElementsFieldLabel": "number of elements to find",
     "GameTitle": "Find Parker",
     "GameDescription": "🎯 The goal of the game is to find all elements on the page.",
+    "CouldNotFindPlaceForParkersDescription": "🙄 Your page seems strange, I don't see any playground to play here 😉",
     "StartGameButton": "🎮 Start the game !",
     "RestartGameButton": "🎮 It was fun, lets try again",
     "EndGameMessage": "Congrats! You are awasome 👍👍👍",
diff --git a/samples/react-find-parker/src/webparts/findParker/loc/mystrings.d.ts b/samples/react-find-parker/src/webparts/findParker/loc/mystrings.d.ts
index 22ae6ec43..7b5100ff3 100644
--- a/samples/react-find-parker/src/webparts/findParker/loc/mystrings.d.ts
+++ b/samples/react-find-parker/src/webparts/findParker/loc/mystrings.d.ts
@@ -4,6 +4,7 @@ declare interface IFindParkerWebPartStrings {
   PropertyPaneNumberOfElementsFieldLabel: string;
   GameTitle: string;
   GameDescription: string;
+  CouldNotFindPlaceForParkersDescription: string;
   StartGameButton: string;
   RestartGameButton: string;
   EndGameMessage: string;