add a message when HighScores server is not reachable

Author: gre

package.json

@@ -25,7 +25,7 @@
   },
   "scripts": {
     "server": "node server/index.js",
-    "start": "./start.sh",
+    "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test --env=jsdom",
     "eject": "react-scripts eject",

server/index.js

@@ -69,6 +69,18 @@ app.get("/scores/:seed", (req, res) => {
     });
 });
 
+app.post("/test", (req, res) => {
+  try {
+    if (req.body.everything === 42) {
+      res.json({ success: true });
+    } else {
+      res.json({ success: false });
+    }
+  } catch (e) {
+    res.json({ success: false });
+  }
+});
+
 app.post("/", (req, res) => {
   // a GameState is sent to server
   Promise.resolve(req.body)

src/Game/HighScores.js

@@ -11,3 +11,10 @@ export const send = (gameState: GameState): Promise<{ inserted: boolean }> =>
     headers: { "Content-Type": "application/json" },
     body: JSON.stringify({ gameState })
   }).then(res => res.json());
+
+export const test = () =>
+  fetch(env.highscoresAPI + "/test", {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ everything: 42 })
+  }).then(res => res.json());

src/Game/index.css

@@ -19,7 +19,7 @@
 }
 
 .menu {
-  font-size: 32px;
+  font-size: 28px;
 }
 .menu input {
   border: 2px solid #d83;

src/Game/index.js

@@ -106,12 +106,15 @@ const modes = [
   { value: "random", label: "Random", color: "#fff" }
 ];
 
+const highscoresTest = HighScores.test();
+
 class GameComponent extends Component {
   state: {
     config: Config,
     loading: boolean,
     gameContextTitle: string,
-    highscores: ?Array<{ level: number, username: string }>
+    highscores: ?Array<{ level: number, username: string }>,
+    highscoresServerAccessible: ?boolean
   } = {
     config: {
       quality: "high",
@@ -122,8 +125,22 @@ class GameComponent extends Component {
     },
     loading: false,
     gameContextTitle: "",
-    highscores: null
+    highscores: null,
+    highscoresServerAccessible: null
   };
+  componentWillMount() {
+    Promise.race([
+      highscoresTest,
+      new Promise(success => setTimeout(success, 3000, "timeout"))
+    ])
+      .then(r => {
+        this.setState({ highscoresServerAccessible: r.success === true });
+      })
+      .catch(e => {
+        this.setState({ highscoresServerAccessible: false });
+      });
+  }
+
   gameState = null;
   getGameState = () => this.gameState;
   action = (name: string, ...args: *) => {
@@ -206,7 +223,13 @@ class GameComponent extends Component {
     if (process.env.NODE_ENV === "production") alert(errorMessage);
   };
   render() {
-    const { config, highscores, gameContextTitle, loading } = this.state;
+    const {
+      config,
+      highscores,
+      gameContextTitle,
+      highscoresServerAccessible,
+      loading
+    } = this.state;
     const { gameState } = this;
     const screen = typeof window.screen === "object" ? window.screen : null;
     const maxWidth = screen ? Math.min(screen.width, screen.height) : Infinity;
@@ -218,9 +241,11 @@ class GameComponent extends Component {
       body = (
         <div>
           Loading...
-          <footer>
-            if it never loads, try <a href="?quality=low">quality=low</a>
-          </footer>
+          {config.quality !== "low"
+            ? <footer>
+                if it never loads, try <a href="?quality=low">quality=low</a>
+              </footer>
+            : null}
         </div>
       );
     } else if (gameState) {
@@ -284,6 +309,9 @@ class GameComponent extends Component {
                 {v.message}
               </p>
             )}
+            {highscoresServerAccessible === false
+              ? <p>WARNING the HighScores server is not currently reachable</p>
+              : null}
           </div>
         </div>
       );

src/env.js

@@ -1,3 +1,6 @@
 export default {
-  highscoresAPI: "https://memocart.herokuapp.com"
+  highscoresAPI:
+    process.env.NODE_ENV === "development"
+      ? "http://localhost:9832"
+      : "https://memocart.herokuapp.com"
 };