fix(webapp): turn off remote multiplayer mode in production

packages/webapp/src/app/globals.css

@@ -85,23 +85,7 @@ body {
   overflow-x: hidden;
 }
 
-body {
-  color: rgb(var(--foreground-rgb));
-  background: linear-gradient(
-      to bottom,
-      transparent,
-      rgb(var(--background-end-rgb))
-    )
-    rgb(var(--background-start-rgb));
-}
-
 a {
   color: inherit;
   text-decoration: none;
 }
-
-@media (prefers-color-scheme: dark) {
-  html {
-    color-scheme: dark;
-  }
-}

packages/webapp/src/app/page.tsx

@@ -1,46 +1,16 @@
-import Image from "next/image";
-import styles from "./page.module.css";
 import DevView from "@/components/DevView";
 
-export default function Home() {
-  return (
-    <main className={styles.main}>
-      <div className={styles.description}>
-        <p>
-          Get started by editing&nbsp;
-          <code className={styles.code}>src/app/page.tsx</code>
-        </p>
-        <div>
-          <a
-            href="https://vercel.com?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            By{" "}
-            <Image
-              src="/vercel.svg"
-              alt="Vercel Logo"
-              className={styles.vercelLogo}
-              width={100}
-              height={24}
-              priority
-            />
-          </a>
-        </div>
-      </div>
-
-      <div className={styles.center}>
-        <Image
-          className={styles.logo}
-          src="/next.svg"
-          alt="Next.js Logo"
-          width={180}
-          height={37}
-          priority
-        />
-      </div>
+const getIsLocal = async () => {
+  'use server'
+  // Production is not ready for remote multiplayer yet.
+  return process.env.NODE_ENV === 'production';
+}
 
-      <DevView />
+export default async function Home() {
+  const isLocal = await getIsLocal();
+  return (
+    <main>
+      <DevView isLocal={isLocal} />
     </main>
   );
 }

packages/webapp/src/components/BoardGame.tsx

@@ -1,5 +1,5 @@
 import { Client, BoardProps } from 'boardgame.io/react';
-import { SocketIO } from 'boardgame.io/multiplayer'
+import { SocketIO, Local } from 'boardgame.io/multiplayer'
 import { OpenStarTerVillage } from '@/game';
 import Table from '@/components/Table/Table';
 import Players from '@/components/Players/Players';
@@ -15,10 +15,14 @@ const Board: React.FC<BoardProps<OpenStarTerVillageType.State.Root>> = (props) =
   );
 }
 
-const Boardgame = Client({
-  game: OpenStarTerVillage,
-  board: Board,
-  multiplayer: SocketIO({ server: 'localhost:8000' }),
-});
+const Boardgame: React.FC<{ isLocal: boolean} & React.ComponentProps<ReturnType<typeof Client>>> = ({ isLocal, ...props }) => {
+  const multiplayer = isLocal ? Local() : SocketIO({ server: 'localhost:8000' });
+
+  const BoardgameComponent = Client({ game:OpenStarTerVillage,
+    board: Board,
+    multiplayer,
+  })
+  return <BoardgameComponent {...props} />;
+}
 
 export default Boardgame;

packages/webapp/src/components/DevView.tsx

@@ -3,20 +3,20 @@
 import { Box, Typography } from '@mui/material';
 import Boardgame from '@/components/BoardGame';
 
-function DevView() {
+function DevView({ isLocal }: { isLocal: boolean }) {
   return (
     <>
       <Box ml={2} mt={2}>
         <Typography variant="h4">Player 0 view</Typography>
-        <Boardgame playerID="0" />
+        <Boardgame isLocal={isLocal} playerID="0" />
       </Box>
       <Box ml={2} mt={2}>
         <Typography variant="h4">Player 1 view</Typography>
-        <Boardgame playerID="1" />
+        <Boardgame isLocal={isLocal} playerID="1" />
       </Box>
       <Box ml={2} mt={2}>
         <Typography variant="h4">Observer view</Typography>
-        <Boardgame />
+        <Boardgame isLocal={isLocal} />
       </Box>
     </>
   );

packages/webapp/src/server.ts

@@ -3,7 +3,9 @@ import { OpenStarTerVillage } from "./game";
 
 async function serve() {
   const port = Number(process.env.PORT) || 8000;
-  const apiPort = Number(process.env.API_PORT) || 8080;
+  const dev = process.env.NODE_ENV !== "production";
+
+  console.log(`Starting server on port ${port} in ${dev ? 'dev' : 'production'} mode...`);
 
   const server = Server({
     games: [OpenStarTerVillage],
@@ -12,19 +14,12 @@ async function serve() {
       Origins.LOCALHOST_IN_DEVELOPMENT,
     ],
   });
-  const mainServerConfig = {
+  const config = {
     port,
     callback: () => console.log(`Main server running on port ${port}...`),
   };
-  const lobbyConfig = {
-    apiPort,
-    apiCallback: () => console.log(`Lobby api running on port ${apiPort}`),
-  };
 
-  server.run({
-    ...mainServerConfig,
-    lobbyConfig,
-  });
+  server.run(config);
 }
 
 serve();