refactor(webapp): migrate server project to server.ts

README.en.md

@@ -59,9 +59,7 @@ You can join our discussions on [Discord](https://discord.gg/JnTHGnxwYS).
 | Sub-Project                                       | Description                                     |
 | ----------------------------------------------- | ----------------------------------------------- |
 | [google-spreadsheet](./google-spreadsheet/)      | Prototype - Presented using Google Spreadsheets |
-| [client](./client/)                              | Web frontend - Game interface                   |
-| [server](./server/)                              | Web backend - Handles room allocation, player state synchronization, and game logic |
-| [packages/game](./packages/game/)                | Web game logic - Manages game rules              |
+| [packages/webapp](./packages/webapp/)            | Webapp - web game website                       |
 | [homepage](./homepage/)                          | [Official Website](https://openstartervillage.ocf.tw/)
 
 ## Licensing Terms

README.md

@@ -61,9 +61,7 @@ English version: [README.en.md](./README.en.md)
 | 子專案                                        | 說明                                                |
 | --------------------------------------------- | --------------------------------------------------- |
 | [`google-spreadsheet`](./google-spreadsheet/) | 原型版本 - 以 Google Spreadsheet 呈現                 |
-| [`client`](./client/)                         | 網頁版前端 - 遊戲界面                               |
-| [`server`](./server/)                         | 網頁版後端 - 處理遊戲房間分配、同步玩家狀態和遊戲邏輯 |
-| [`packages/game`](./packages/game/)           | 網頁版遊戲邏輯 - 處理遊戲規則                    |
+| [`packages/webapp`](./packages/webapp/)       | 網頁版遊戲 - 處理遊戲規則                    |
 | [`homepage`](./homepage/)                     | [官方網站 - Official Website](https://openstartervillage.ocf.tw/)
 
 ## 授權條款

WEBAPP.md

@@ -13,40 +13,29 @@ Open StarTer Village - Web App is a single-page application project designed for
 git clone [email protected]:ocftw/open-star-ter-village.git open-star-ter-village
 ```
 
-> Note: Open StarTer Village Game requires node >= 12.0.0
+> Note: Open StarTer Village Game requires node >= 18.0.0
 
 ### Get Started
 
 ```shell
-yarn
-yarn build:webapp
-yarn deploy:webapp
-yarn start:webapp
+yarn run webapp install
+yarn run webapp build
+yarn run webapp start
 ```
 
 ## Deployment Options
 
-### Deploying to Heroku (Please note, we are exploring alternative solutions to Heroku due to certain limitations)
+### Deploy to Vercel
 
-```shell
-heroku create
-git push heroku main
-heroku open
-```
-
-or
-
-[![Deploy to Heroku (Exploring Alternative Solutions)](https://www.herokucdn.com/deploy/button.svg)](https://heroku.com/deploy?template=https://github.com/ocftw/open-star-ter-village/tree/main)
+TBD - We are working on this feature.
 
 ## How to Contribute to the Source Code
 
 Open StarTer Village - WebApp is a TypeScript monorepo configured with Yarn 2 using the workspace-tools plugin. The core game engine is based on [boardgame.io](https://boardgame.io) on both the server and client side. The Open StarTer Village - WebApp project is divided into three parts: core game logic, client UI, and the game server. Below is a table showing their npm project names and locations:
 
-| Project Name                                    | Description          |
-| ---------------------------------------------- | --------------------   |
-| [`@open-star-ter-village/webapp-game`](./packages/game/) | The core game logic   |
-| [`@open-star-ter-village/webapp-client`](./client/)      | The client UI         |
-| [`@open-star-ter-village/webapp-server`](./server/)      | The game server       |
+| Project Name                                   | Description             |
+| ---------------------------------------------- | ----------------------- |
+| [`@open-star-ter-village/webapp`](./packages/webapp/) | The web game app |
 
 ### How to Start the Local Development Environment
 
@@ -57,32 +46,31 @@ Open StarTer Village - Web App uses Yarn 2 workspaces to manage the project. Ple
 The following command will start the client UI (Create React App) on a development server, the server (Koa) using ts-node with watchmon, and the game core (pure TypeScript) in watch compile mode.
 
 ```shell
-yarn dev:webapp
+yarn run webapp dev
 ```
 
 Everything is set up and ready for you to start coding!
 
 #### Local Build
 
-Open StarTer Village - Web App has three primary outcomes: `client` and `server`, which serve the game on the platform, and other outputs used as libraries in parts of `client` and `server`.
+The following command will build nextjs webapp into `packages/webapp/.next` and server into `packages/webapp/dist`.
 
 ```shell
-yarn build:webapp
+yarn run webapp build
 ```
 
-Project output table
-| Project Name                                 | Output Location            | Description            |
-| -------------------------------------------- | -----------------------    | -----------------------  |
-| `@open-star-ter-village/webapp-game`         | ./packages/game/dist       | The core game logic     |
-| `@open-star-ter-village/webapp-client`       | ./client/build             | The client UI           |
-| `@open-star-ter-village/webapp-server`       | ./server/build             | The game server         |
+#### Local Start
 
-> Note: The output folders are ignored by Git, but you can find them after the build process.
+After building the project, you can start the server and webapp with the following command:
+
+```shell
+yarn run webapp start
+```
 
-#### Unit Test (Currently not available)
+#### Unit Test (Currently only available for game core)
 
 ```shell
-yarn test
+yarn run webapp test
 ```
 
 ## How to Contribute to Assets

package.json

@@ -16,11 +16,5 @@
     "all:build": "yarn workspaces foreach -pt run build",
     "all:start": "yarn workspaces foreach -pt run start",
     "all:lint": "yarn workspaces foreach -pt run lint"
-  },
-  "devDependencies": {
-    "@types/koa-static": "^4.0.2"
-  },
-  "dependencies": {
-    "koa-static": "^5.0.0"
   }
 }

packages/webapp/package.json

@@ -3,9 +3,15 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "next dev",
-    "build": "next build",
-    "start": "next start",
+    "dev": "concurrently \"yarn dev:next\" \"yarn dev:server\"",
+    "dev:next": "next dev",
+    "dev:server": "ts-node-dev -P tsconfig.server.json --respawn --transpile-only --ignore-watch .next src/server.ts",
+    "build": "yarn build:next && yarn build:server",
+    "build:next": "next build",
+    "build:server": "tsc -P tsconfig.server.json",
+    "start": "yarn start:next && yarn start:server",
+    "start:next": "next start",
+    "start:server": "node dist/server.js",
     "lint": "next lint",
     "test": "jest"
   },
@@ -23,12 +29,15 @@
   },
   "devDependencies": {
     "@types/jest": "^29.5.12",
-    "@types/node": "^20",
+    "@types/node": "^20.14.0",
     "@types/react": "^18",
     "@types/react-dom": "^18",
+    "concurrently": "^8.2.2",
     "eslint": "^8",
     "eslint-config-next": "14.2.3",
     "jest": "^29.7.0",
-    "typescript": "^5"
+    "ts-node": "^10.9.2",
+    "ts-node-dev": "^2.0.0",
+    "typescript": "^5.4.5"
   }
 }

packages/webapp/src/components/BoardGame.tsx

@@ -1,5 +1,5 @@
 import { Client, BoardProps } from 'boardgame.io/react';
-import { Local } from 'boardgame.io/multiplayer';
+import { SocketIO } from 'boardgame.io/multiplayer'
 import { OpenStarTerVillage } from '@/game';
 import Table from '@/components/Table/Table';
 import Players from '@/components/Players/Players';
@@ -18,7 +18,7 @@ const Board: React.FC<BoardProps<OpenStarTerVillageType.State.Root>> = (props) =
 const Boardgame = Client({
   game: OpenStarTerVillage,
   board: Board,
-  multiplayer: Local(),
+  multiplayer: SocketIO({ server: 'localhost:8000' }),
 });
 
 export default Boardgame;

packages/webapp/src/server.ts

@@ -0,0 +1,43 @@
+import { Server, Origins } from "boardgame.io/server";
+import next from 'next';
+import url from "url";
+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';
+  const app = next({ dev });
+  const handle = app.getRequestHandler();
+
+  const server = Server({
+    games: [OpenStarTerVillage],
+    origins: [
+      // Allow localhost to connect, except when NODE_ENV is 'production'.
+      Origins.LOCALHOST_IN_DEVELOPMENT,
+    ],
+  });
+  const mainServerConfig = {
+    port,
+    callback: () => console.log(`Main server running on port ${port}...`),
+  };
+  const lobbyConfig = {
+    apiPort,
+    apiCallback: () => console.log(`Lobby api running on port ${apiPort}`),
+  };
+
+  await app.prepare();
+  server.run({
+    ...mainServerConfig,
+    lobbyConfig,
+  }, () => {
+    server.app.use(async (ctx, next) => {
+      const parsedUrl = url.parse(ctx.req.url!, true);
+      await handle(ctx.req, ctx.res, parsedUrl);
+      ctx.respond = false;
+      await next();
+    });
+  });
+}
+
+serve();

packages/webapp/tsconfig.server.json

@@ -0,0 +1,15 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "module": "commonjs",
+    "lib": ["ES2017"],
+    "outDir": "./dist",
+    "strict": true,
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+  },
+  "include": ["./src/server.ts", "./src/game/**/*.ts"],
+  "exclude": ["node_modules"]
+}