Online Othello

Welcome to the Online Othello project! This is a web-based implementation of the classic board game Othello, also known as Reversi. You can play Othello against other players online, create a lobby, and watch other games.

⚠️ Caution! Due to the free-plan of Render (and ofc my code). The lag is so high that is impossible to play ⚠️

⚠️ 注意! Renderの無料契約（と僕のコード）により、サーバーがとても重く、プレイするのが難しい ⚠️

Access through this url: https://online-othello-frontend.onrender.com/

Features

• Real-time gameplay
• Multiple-game lobby
• Spectating

Update plans (Maybe?)

• Spectating UI
• Chat functionality
• User profiles

Bugs and problems found

• Users cannot create a new lobby when they already create one or play in another lobby
• Make 3rd player cannot join the lobby => Spectatable now
• NO MORE MOVES modal should only appear when a player turn is a current turn (Remove)
• When white end the game, the game restarts with white as a first turn.
• When one player is in the game, they can move (should make it so that the modal wait for another player appear)
• In deployed website, lobby is not deleted after player become 0 and sometimes player is not delete when they left
• Spectator sees turn order as "Your turn" or "Opponent turn" (Should display as a player name instead)
• Refresh page results in the player remove from the lobby. They need to go back to the lobby page and join the room by themselves
• Changing route by typing in the address bar will not show the confirm modal

Japanese for settings and installation below

---

概論

フロントエンドは src ディレクトリの Next.js 、バックエンドは server ディレクトリの frourio で構築された TypeScript で一気通貫開発が可能なモノレポサービス

ローカル開発

Node.js のインストール

ローカルマシンに直接インストールする

https://nodejs.org/ja/ の左ボタン、LTS をダウンロードしてインストール

リポジトリのクローンと npm モジュールのインストール

フロントとバックエンドそれぞれに package.json があるので 2 回インストールが必要

$ npm i
$ npm i --prefix server

環境変数ファイルの作成

.env ファイルを 4 つ作成する
prisma 用の.env には自分で起動した PostgreSQL の設定を書く

$ cp .env.example .env
$ cp server/.env.example server/.env
$ cp docker/dev/.env.example docker/dev/.env
$ echo "API_DATABASE_URL=postgresql://root:root@localhost:5432/online-othello" >> server/prisma/.env

ミドルウェアのセットアップ

$ docker-compose up -d

Firebase Emulator

http://localhost:4000/auth

MinIO Console

http://localhost:9001/

PostgreSQL UI

$ cd server
$ npx prisma studio

開発サーバー起動

次回以降は以下のコマンドだけで開発できる

$ npm run notios

Web ブラウザで http://localhost:3000 を開く

開発時のターミナル表示は notios で制御している

Node.js モノレポ開発のターミナルログ混雑解消のための新作 CLI ツール notios

閉じるときは Ctrl + C を 2 回連続で入力

開発中のバグの早期発見

開発サーバー起動後のターミナルで dev > [run-p] dev:* > dev:typecheckClient (あるいはtypecheckServer) の順に開いて Enter を押すと型検査の結果が表示される
ファイルを保存するたびに更新されるのでブラウザで動かす前に型エラーを解消するとほとんどのバグがなくなる

デプロイ

フロントエンド・バックエンド・db はrenderでデプロイした

Firebase

Firebaseの API と連携は下記のように設定

1. プロジェクトを作成
2. プロジェクト設定に行く
3. アプリを追加（Web App）して、firebaseConfig を環境変数 NEXT_PUBLIC_FIREBASE_CONFIG に追加
4. サービスアカウントの Firebase Admin SDK からプライベートキーをダウンロードし、環境変数 FIREBASE_SERVER_KEY に追加

Render

PostgreSQL の db を作成して、Web Service でバックエンドをデプロイし、Static site でフロントエンドをデプロイした

環境変数は下記のように設定

API_DATABASE_URL=PostgreSQLデータベースのURL
API_BASE_PATH=/api
API_ORIGIN=バックエンドサーバーのURL
CORS_ORIGIN=フロントエンドサーバーのURL
FIREBASE_SERVER_KEY=firebase_サービスアカウントの値
NEXT_PUBLIC_FIREBASE_CONFIG=firebaseConfigの値

ビルドコマンド

$ npm i; npm i --prefix server; npm run build:client; npm run build:server

スタートコマンド

フロントエンド

$ out/

バックエンド

$ npm start --prefix server