Single server.js for deployment

package.json

@@ -8,6 +8,7 @@
     "@testing-library/user-event": "^7.2.1",
     "boardgame.io": "^0.39.6",
     "esm": "^3.2.25",
+    "koa-static": "^5.0.0",
     "ky": "^0.19.1",
     "npm-run-all": "^4.1.5",
     "react": "^16.13.1",

server.js

@@ -1,22 +1,20 @@
-const express = require('express');
-const favicon = require('express-favicon');
-const path = require('path');
-const port = process.env.PORT || 8080;
-const app = express();
-const proxy = require('http-proxy-middleware');
+// server.js
+import { Server } from "boardgame.io/server";
+import path from "path";
+import serve from "koa-static";
+import { UdaipurGame } from "./src/game/game";
+const server = Server({ games: [UdaipurGame] });
+const PORT = process.env.PORT || 8000;
 
-var apiProxy = proxy.createProxyMiddleware('/games/', {target: 'http://localhost:8000'});
-
-app.use(favicon(__dirname + '/build/favicon.ico'));
-// the __dirname is the current directory from where the script is running
-app.use(express.static(__dirname));
-app.use(express.static(path.join(__dirname, 'build')));
-app.use(apiProxy)
-app.get('/ping', function (req, res) {
- return res.send('pong');
-});
-app.get('/*', function (req, res) {
-  res.sendFile(path.join(__dirname, 'build', 'index.html'));
+// Build path relative to the server.js file
+const frontEndAppBuildPath = path.resolve(__dirname, "./build");
+server.app.use(serve(frontEndAppBuildPath));
+server.run(PORT, () => {
+  server.app.use(
+    async (ctx, next) =>
+      await serve(frontEndAppBuildPath)(
+        Object.assign(ctx, { path: "index.html" }),
+        next
+      )
+  );
 });
-console.log('listening on port ', port);
-app.listen(port);

src/App.jsx

@@ -9,11 +9,6 @@ import HomePage from "./components/homepage.jsx";
 import { GAME_SERVER_URL } from "./config.js";
 import Lobby from "./components/lobby.jsx";
 
-const UdaipurClient = Client({
-  game: UdaipurGame,
-  board: UdaipurBoard,
-  multiplayer: SocketIO({ server: GAME_SERVER_URL }),
-});
 const renderUdaipurClient = () => {
   return <UdaipurClient playerID="0"></UdaipurClient>;
 };
@@ -27,7 +22,6 @@ function App() {
         render={(props) => <HomePage {...props} history={history} />}
       />
       <Route path="/lobby/:id" component={Lobby} />
-      <Route path="/play" component={renderUdaipurClient} />
       <Route
         path="*"
         render={(props) => <HomePage {...props} history={history} />}

src/api.js

@@ -1,10 +1,13 @@
 import { GAME_NAME, GAME_SERVER_URL } from "./config";
 import ky from "ky";
+const server = APP_PRODUCTION
+  ? `https://${window.location.hostname}`
+  : GAME_SERVER_URL;
 
 export class LobbyAPI {
   constructor() {
     this.api = ky.create({
-      prefixUrl: `${GAME_SERVER_URL}/games/${GAME_NAME}`,
+      prefixUrl: `${server}/games/${GAME_NAME}`,
     });
   }
   async createRoom(numPlayers) {

src/components/board.jsx

@@ -9,6 +9,7 @@ import "./styles/boardLayout.css";
 import "./styles/resultsPage.css";
 import BoardCards from "./boardCards";
 import PlayerCards from "./playerCards";
+import { MoveValidate } from "../game/moveValidation";
 
 class UdaipurBoard extends Component {
   constructor(props) {
@@ -63,19 +64,32 @@ class UdaipurBoard extends Component {
   handleTrade = () => {
     console.log("Handling trade!");
     console.log(this.state.handSelected);
-    this.props.moves.trade(this.state.handSelected);
+    const { G, ctx } = this.props;
+    const validate = MoveValidate.trade(G, ctx, this.state.handSelected);
+    if (validate.valid) {
+      this.props.moves.trade(this.state.handSelected);
+    } else {
+      return this.alertError(validate.message);
+    }
     this.clearSelection();
   };
   handleTakeOne = () => {
-    console.log(this.state.boardSelected);
+    const { G, ctx } = this.props;
+    const validate = MoveValidate.takeOne(G, ctx, this.state.boardSelected[0]);
+
+    // Some validation before performing the move
     if (this.state.boardSelected.length !== 1) {
       this.clearSelection();
       return this.alertError(
         "Please select only 1 card to take from the Board!"
       );
+    } else if (!validate.valid) {
+      this.clearSelection();
+      return this.alertError(validate.message);
+    } else {
+      this.props.moves.takeOne(this.state.boardSelected[0]);
+      this.clearSelection();
     }
-    const resp = this.props.moves.takeOne(this.state.boardSelected[0]);
-    this.clearSelection();
   };
   handleTakeCamels = () => {
     const board = this.props.G.board;
@@ -93,10 +107,21 @@ class UdaipurBoard extends Component {
   };
   handleTakeMany = () => {
     console.log("Handling take many!");
-    this.props.moves.takeMany(
+    const { G, ctx } = this.props;
+    const validate = MoveValidate.takeMany(
+      G,
+      ctx,
       this.state.boardSelected,
       this.state.handSelected
     );
+    if (validate.valid) {
+      this.props.moves.takeMany(
+        this.state.boardSelected,
+        this.state.handSelected
+      );
+    } else {
+      return this.alertError(validate.message);
+    }
     this.clearSelection();
   };