Skip to content

Commit 2ec6746

Browse files
Update README.md
1 parent 6b73b74 commit 2ec6746

File tree

1 file changed

+30
-94
lines changed

1 file changed

+30
-94
lines changed

README.md

Lines changed: 30 additions & 94 deletions
Original file line numberDiff line numberDiff line change
@@ -2,103 +2,39 @@
22

33
A full-stack web application for playing Shogi, with real-time piece movement tracking, multiplayer support, and PDF export functionality for game history. This app implements the traditional 9x9 Shogi game, following the official rules, with drag-and-drop functionality, multiplayer interaction, and an option to save the game history at the end.
44

5-
# Features
5+
## Features
6+
7+
- **9x9 Shogi Board:** Interactive UI for playing Shogi with drag-and-drop support.
8+
- **Real-Time Multiplayer:** Play against an opponent with synchronized movements and real-time board updates using WebSockets.
9+
- **Piece Movement Tracking:** Every piece movement (including promotions and captures) is tracked and displayed with the name, start position, and end position.
10+
- **End Game Summary:** When the game ends (checkmate or resignation), all moves are displayed in a summary.
11+
- **Export to PDF:** Save the game history, including all moves and final board state, as a PDF file.
12+
- **Responsive Design:** Play the game on any device, including mobile, with a fully responsive layout.
13+
14+
## Tech Stack
15+
16+
- **Frontend:**
17+
- React.js (or your chosen frontend framework)
18+
- HTML5, CSS3, JavaScript
19+
- **Backend:**
20+
- Node.js with Express.js (or Django/Flask as an alternative)
21+
- MongoDB (or PostgreSQL/MySQL) for move history and game state storage
22+
- **Real-Time Sync:**
23+
- Socket.io for real-time multiplayer interactions
24+
- **PDF Export:**
25+
- jsPDF or pdfkit for generating game history PDF
26+
- **Deployment:**
27+
- Hosted on platforms like Heroku, Vercel, or AWS
28+
29+
## Getting Started
630

7-
9x9 Shogi Board: Interactive UI for playing Shogi with drag-and-drop support.
8-
Real-Time Multiplayer: Play against an opponent with synchronized movements and real-time board updates using WebSockets.
9-
Piece Movement Tracking: Every piece movement (including promotions and captures) is tracked and displayed with the name, start position, and end position.
10-
End Game Summary: When the game ends (checkmate or resignation), all moves are displayed in a summary.
11-
Export to PDF: Save the game history, including all moves and final board state, as a PDF file.
12-
Responsive Design: Play the game on any device, including mobile, with a fully responsive layout.
13-
Tech Stack
14-
Frontend:
15-
React.js (or your chosen frontend framework)
16-
HTML5, CSS3, JavaScript
17-
Backend:
18-
Node.js with Express.js (or Django/Flask as an alternative)
19-
MongoDB (or PostgreSQL/MySQL) for move history and game state storage
20-
Real-Time Sync:
21-
Socket.io for real-time multiplayer interactions
22-
PDF Export:
23-
jsPDF or pdfkit for generating game history PDF
24-
Deployment:
25-
Hosted on platforms like Heroku, Vercel, or AWS
26-
Getting Started
2731
Follow the steps below to get the project up and running locally on your machine.
2832

29-
# Prerequisites
33+
### Prerequisites
3034

31-
Node.js: Ensure that Node.js is installed on your machine. Download it from here.
32-
MongoDB: Install MongoDB or set up a cloud instance using MongoDB Atlas.
33-
Git: Install Git for version control.
34-
Installation
35-
Clone the repository:
35+
- **Node.js**: Ensure that Node.js is installed on your machine. Download it from [here](https://nodejs.org/en/).
36+
- **MongoDB**: Install MongoDB or set up a cloud instance using [MongoDB Atlas](https://www.mongodb.com/cloud/atlas).
37+
- **Git**: Install Git for version control.
3638

3739

38-
git clone https://github.com/your-username/shogi-web-app.git
39-
cd shogi-web-app
40-
Install dependencies for both frontend and backend:
41-
42-
Backend:
43-
44-
cd backend
45-
npm install
46-
47-
Frontend:
48-
49-
cd frontend
50-
npm install
51-
52-
Set up environment variables: Create a .env file in the backend folder and add the following environment variables:
53-
54-
55-
PORT=5000
56-
MONGO_URI=<your-mongodb-connection-string>
57-
58-
Run the MongoDB server: Ensure your MongoDB server is running:
59-
60-
mongod
61-
Start the backend server: Navigate to the backend folder and run:
62-
63-
npm start
64-
Start the frontend development server: In another terminal window, navigate to the frontend folder and run:
65-
66-
npm start
67-
Running the Application
68-
Once the frontend and backend servers are up and running, you can access the app by navigating to http://localhost:3000 in your browser.
69-
70-
Playing the Game
71-
Drag and drop the pieces to move them around the board.
72-
The app will automatically track all moves made by each player.
73-
When the game ends, you will see a summary of all moves and a button to download the game history as a PDF.
74-
API Endpoints
75-
GET /api/game/history: Retrieve the full game history.
76-
POST /api/game/save: Save the game history at the end of the game.
77-
PDF Export
78-
The game automatically generates a downloadable PDF file summarizing all moves once the game ends. The PDF includes:
79-
Player names (if provided).
80-
Game start and end times.
81-
A list of all moves made during the game.
82-
Final board state.
83-
Development
84-
Backend Structure
85-
/controllers: Contains the logic for handling game state, move tracking, and PDF export.
86-
/models: MongoDB schemas for storing game state and move history.
87-
/routes: API routes for game logic.
88-
Frontend Structure
89-
/components: Contains the main Shogi board UI, drag-and-drop logic, and move tracking.
90-
/services: API calls for fetching and saving game history.
91-
WebSocket Integration
92-
Uses Socket.io for real-time updates between players.
93-
Updates board state and moves in real-time, ensuring synchronization for multiplayer games.
94-
Deployment
95-
To deploy the app, follow the instructions provided by the platform you're using (e.g., Heroku, AWS, Vercel). Make sure to configure the environment variables (MONGO_URI, PORT) on the deployment platform.
96-
97-
Contributing
98-
Contributions are welcome! Please feel free to open issues or submit pull requests to improve the app.
99-
100-
Fork the repository
101-
Create a feature branch (git checkout -b feature-branch)
102-
Commit your changes (git commit -m 'Add new feature')
103-
Push to the branch (git push origin feature-branch)
104-
Open a Pull Request
40+

0 commit comments

Comments
 (0)