Adds Game Not Found functionality (#14)

* Adds an action, reducer, and basic UI for when a game is not found

* The Fetch api is le suck. Also fixes a bug with games not loading correctly

src/actions/index.js

@@ -18,6 +18,10 @@ export const gameOver = () => ({
   type: "GAME_OVER"
 });
 
+export const gameNotFound = () => ({
+  type: "GAME_NOT_FOUND"
+});
+
 export const requestFrames = () => ({
   type: "REQUEST_FRAMES"
 });
@@ -57,17 +61,21 @@ export const fetchFrames = () => {
 
     dispatch(requestFrames());
 
-    await streamAllFrames(engineUrl, gameId, (game, frame) => {
-      // Workaround for bug where turn exluded on turn 0
-      frame.Turn = frame.Turn || 0;
-      dispatch(receiveFrame(game, frame));
+    try {
+      await streamAllFrames(engineUrl, gameId, (game, frame) => {
+        // Workaround for bug where turn exluded on turn 0
+        frame.Turn = frame.Turn || 0;
+        dispatch(receiveFrame(game, frame));
 
-      // Workaround to render the first frame into the board
-      if (frame.Turn === 0) {
-        const frame = getState().frames[0];
-        dispatch(setCurrentFrame(frame));
-      }
-    });
+        // Workaround to render the first frame into the board
+        if (frame.Turn === 0) {
+          const frame = getState().frames[0];
+          dispatch(setCurrentFrame(frame));
+        }
+      });
+    } catch (e) {
+      return dispatch(gameNotFound());
+    }
 
     if (autoplay) {
       const frame = getState().frames[0];

src/components/game-not-found.jsx

@@ -0,0 +1,30 @@
+import React from "react";
+import styled from "@emotion/styled";
+
+import { colors } from "../theme";
+
+const NotFoundWrapper = styled("div")({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  height: "100%",
+  width: "100%"
+});
+
+class GameNotFound extends React.Component {
+  render() {
+    return (
+      <NotFoundWrapper>
+        <h2
+          style={{
+            color: colors.food
+          }}
+        >
+          Game no longer available, sorry!
+        </h2>
+      </NotFoundWrapper>
+    );
+  }
+}
+
+export default GameNotFound;

src/components/game.jsx

@@ -3,6 +3,7 @@ import styled from "@emotion/styled";
 
 import BlankState from "./blank-state";
 import LoadingIndicator from "./loading-indicator";
+import GameNotFound from "./game-not-found";
 import Board from "./board";
 import Scoreboard from "./scoreboard";
 import MediaControls from "./mediaControls";
@@ -122,13 +123,15 @@ class Game extends React.Component {
   }
 
   render() {
-    const { currentFrame } = this.props;
-
     if (this.invalidArgs) {
       return <BlankState />;
     }
 
-    if (currentFrame) {
+    if (this.props.gameNotFound) {
+      return <GameNotFound />;
+    }
+
+    if (this.props.currentFrame) {
       return this.renderGame();
     }
 

src/containers/app.jsx

@@ -18,6 +18,7 @@ const mapStateToProps = state => {
   return {
     options: options,
     grid: state.grid,
+    gameNotFound: state.gameNotFound,
     paused: state.paused,
     currentFrame: state.currentFrame,
     frames: state.frames,
@@ -37,7 +38,4 @@ const mapDispatchToProps = dispatch => ({
   highlightSnake: snakeId => dispatch(highlightSnake(snakeId))
 });
 
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(Game);
+export default connect(mapStateToProps, mapDispatchToProps)(Game);

src/index.js

@@ -13,6 +13,7 @@ const initialState = {
   grid: [],
   frames: [],
   paused: true,
+  gameNotFound: false,
   highlightedSnake: null,
   theme: themes.light
 };

src/reducers/index.js

@@ -8,13 +8,16 @@ export default (state = {}, action) => {
       action.gameOptions.autoplay =
         action.gameOptions.autoplay && action.gameOptions.autoplay === "true";
       action.gameOptions.turn = parseInt(action.gameOptions.turn) || 0;
-      action.gameOptions.loop = action.gameOptions.loop && action.gameOptions.loop === "true";
+      action.gameOptions.loop =
+        action.gameOptions.loop && action.gameOptions.loop === "true";
       return { ...state, gameOptions: action.gameOptions };
+    case "GAME_NOT_FOUND":
+      return { ...state, gameNotFound: true };
     case "PAUSE_GAME":
       return { ...state, paused: true };
     case "GAME_OVER":
       windowPostMessage({
-        action: action.type,
+        action: action.type
       });
       return { ...state, paused: true };
     case "RESUME_GAME":

src/utils/engine-client.js

@@ -7,8 +7,15 @@ const DEFAULT_SNAKE_HEAD = "default";
 const DEFAULT_SNAKE_TAIL = "default";
 
 async function get(url, query) {
-  const fetchResult = await fetch(url + makeQueryString(query));
-  return fetchResult.json();
+  const response = await fetch(url + makeQueryString(query));
+  if (response.status === 200) {
+    return Promise.resolve(response.json());
+  } else {
+    return Promise.resolve(response.json()).then(responseJson => {
+      console.error(responseJson.error);
+      return Promise.reject(responseJson.error);
+    });
+  }
 }
 
 export function delay(millis) {
@@ -29,7 +36,7 @@ export function getReadableCauseOfDeath(death) {
     case "wall-collision":
       return "Moved out of bounds";
     case "team-eliminated":
-      return "Team was eliminated"
+      return "Team was eliminated";
     default:
       return death.cause;
   }