|
2 | 2 |
|
3 | 3 | 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.
|
4 | 4 |
|
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 |
6 | 30 |
|
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 |
27 | 31 | Follow the steps below to get the project up and running locally on your machine.
|
28 | 32 |
|
29 |
| -# Prerequisites |
| 33 | +### Prerequisites |
30 | 34 |
|
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. |
36 | 38 |
|
37 | 39 |
|
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