https://github.com/mustafadalga/othello
Othello - Realtime 2 Player Mind Game
https://github.com/mustafadalga/othello
apollo board-game game game-development graphql multiplayer-game multiplayer-games nextjs nodejs othello reactjs realtime-game realtime-games reversi tailwindcss
Last synced: 3 months ago
JSON representation
Othello - Realtime 2 Player Mind Game
- Host: GitHub
- URL: https://github.com/mustafadalga/othello
- Owner: mustafadalga
- License: gpl-3.0
- Created: 2024-06-15T09:44:02.000Z (12 months ago)
- Default Branch: main
- Last Pushed: 2024-07-27T09:21:08.000Z (10 months ago)
- Last Synced: 2025-01-18T08:31:23.531Z (4 months ago)
- Topics: apollo, board-game, game, game-development, graphql, multiplayer-game, multiplayer-games, nextjs, nodejs, othello, reactjs, realtime-game, realtime-games, reversi, tailwindcss
- Language: TypeScript
- Homepage: https://play-othello.vercel.app
- Size: 7.38 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
## Othello - Realtime 2 Player Mind Game
Othello is a strategic board game played between two players. The goal is to have the most pieces of your color on the board at the end of the game.
### Features
* **Play with Friends:** Invite friends to play in a real-time competitive match.
* **Play Against the Computer:** Challenge the computer
## How to Play Othello
### Game Introduction
Othello is a strategic board game played between two players. The goal is to have the most pieces of
your color on the board at the end of the game.
### Starting Position
The game begins on an 8x8 board. In the center, four pieces are placed diagonally: two white and two
black.
### Making Moves and Flipping Pieces
* Players take turns placing their pieces on empty squares. When placing a piece, it must trap
opponent’s pieces between two of your pieces, either horizontally, vertically, or
diagonally.
* Trapped opponent pieces are flipped to your color.
| Before | After |
|--------------|---------------------------------------------------------------------------------------------------------------------------------------------|
|  |  |
An example showing a piece being placed and how opponent pieces are flipped. (With black’s turn,
I placed a piece in the 6th row, 5th column, turning the opponent’s white piece in the 5th row,
5th column to black.)
### Strategic Moves
Players can gain a strategic advantage by placing pieces on edge and corner squares, as these cannot
be flipped easily.
### End of Game and Winner
The game continues until the board is full or no valid moves are possible. The player with the most pieces wins.
### Used Technologies
## Technology Stack
- **Frontend**: Next.js, Typescript, Tailwind CSS, Apollo Client, react-toastify, Zustand, framer-motion
- **Backend**: Node.js, Express.js, Apollo Server, GraphQL
- **Database**: MongoDB
- **Real-Time Communication**: WebSockets
- **Hosting**: Render.com for the backend and vercel.com for frontend
### Demo
* https://play-othello.vercel.app/
## Project Setup
### Installation
```
git clone [email protected]:mustafadalga/othello.git
cd othello
npm run install
```
### Server
* The following variables should be defined in an .env file in the server folder.
**Environment Variables(.env)**
* MONGODB_URL
* NODE_ENV
Change package.json moduleAliases alias as "src"
```
"_moduleAliases": {
"@": "src"
}
```
### Client
* The following variables should be defined in an .env file in the client folder.
**Environment Variables(.env)**
* NEXT_PUBLIC_SITE_URL
* NEXT_PUBLIC_API_URL
* NEXT_PUBLIC_WS_URL
### Running the Project
To start the development server and run the project locally, use the following command:
#### Front End
```
cd client
npm run dev
```
#### Back End
```
cd backend
npm run dev
```
Once the server is running, you can access the project in your web browser at http://localhost:3000.
### Screenshots
## License
[](https://github.com/mustafadalga/othello/blob/main/LICENSE)