Skip to content

Commit 1bfafa1

Browse files
athrvkathrvk
authored
Merge pull request #2 from athrvk/copilot/fix-9bb683cb-8a30-4a5f-aa9b-e9b7ce391e86
✨ Set up comprehensive Copilot instructions for repository
2 parents 4824f3c + 11c514a commit 1bfafa1

1 file changed

Lines changed: 172 additions & 0 deletions

File tree

‎.github/copilot-instructions.md‎

Lines changed: 172 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,172 @@
1+
# Copilot Instructions for Tic-Tac-Two
2+
3+
## Project Overview
4+
5+
Tic-Tac-Two is a modern twist on the classic Tic-Tac-Toe game with unique mechanics where only the last 6 moves remain on the board, creating dynamic gameplay strategies. The application is built with a Java Spring Boot backend and React frontend, deployed on Render.
6+
7+
## Architecture
8+
9+
### Tech Stack
10+
- **Backend**: Java 17, Spring Boot 2.7.5, Maven, WebSocket support
11+
- **Frontend**: React 18, styled-components, npm
12+
- **Deployment**: Docker, Render platform
13+
- **Communication**: WebSocket for real-time multiplayer gameplay
14+
15+
### Project Structure
16+
```
17+
tic-tac-two/
18+
├── backend/ # Java Spring Boot application
19+
│ ├── src/main/java/com/game/
20+
│ │ ├── TicTacTwoApplication.java # Main Spring Boot application
21+
│ │ ├── config/ # Configuration classes
22+
│ │ ├── controller/ # REST and WebSocket controllers
23+
│ │ ├── model/ # Game state and data models
24+
│ │ └── service/ # Business logic services
25+
│ └── pom.xml # Maven dependencies
26+
├── frontend/ # React application
27+
│ ├── src/
28+
│ │ ├── App.js # Main React component
29+
│ │ ├── components/ # Reusable UI components
30+
│ │ │ ├── Game/ # Game-specific components
31+
│ │ │ └── UI/ # General UI components
32+
│ │ ├── styles/ # Theme and global styles
33+
│ │ └── utils/ # Helper functions and WebSocket utilities
34+
│ └── package.json # npm dependencies
35+
├── Dockerfile # Multi-stage build for production
36+
└── docker-compose.yml # Local development setup
37+
```
38+
39+
## Development Guidelines
40+
41+
### Code Style and Standards
42+
43+
#### Java Backend
44+
- Use Spring Boot conventions and annotations
45+
- Follow standard Java naming conventions (camelCase for methods/variables, PascalCase for classes)
46+
- Use `@Service`, `@Controller`, `@Configuration` annotations appropriately
47+
- Implement proper logging with SLF4J
48+
- Use concurrent data structures for thread-safe operations (e.g., `ConcurrentHashMap`)
49+
- Handle WebSocket connections and messaging properly
50+
51+
#### React Frontend
52+
- Use functional components with React Hooks
53+
- Implement styled-components for CSS-in-JS styling
54+
- Follow the established theme system in `src/styles/theme.js`
55+
- Use the existing color palette designed for high contrast and e-ink display compatibility
56+
- Maintain consistent spacing using theme values
57+
- Components should be responsive and mobile-friendly
58+
59+
#### Styling Guidelines
60+
- High contrast design for accessibility and e-ink displays
61+
- Colors: Black (#000000) primary, light gray (#f6f6f6) background, medium grays for interactive elements
62+
- Typography: Georgia serif font for better readability
63+
- Consistent spacing using theme spacing values (xs: 0.25rem, sm: 0.5rem, md: 1rem, lg: 2rem)
64+
- Clean, minimalist interface with centered layout
65+
- Responsive design that works on mobile and desktop
66+
67+
### Game Logic Requirements
68+
- Only the last 6 moves remain visible on the board
69+
- Session-based player assignment (X or O)
70+
- Real-time multiplayer using WebSocket connections
71+
- Proper game state management across client and server
72+
- Winner detection considering the dynamic board state
73+
74+
### Build and Test Commands
75+
76+
#### Backend (from /backend directory)
77+
```bash
78+
# Install dependencies and compile
79+
mvn clean compile
80+
81+
# Run tests
82+
mvn test
83+
84+
# Build JAR
85+
mvn clean package
86+
87+
# Run locally
88+
mvn spring-boot:run
89+
```
90+
91+
#### Frontend (from /frontend directory)
92+
```bash
93+
# Install dependencies
94+
npm install
95+
96+
# Start development server
97+
npm start
98+
99+
# Run tests
100+
npm test
101+
102+
# Build for production
103+
npm run build
104+
105+
# Build and copy to backend static resources
106+
npm run prebuildlocal && npm run buildlocal
107+
```
108+
109+
#### Full Application
110+
```bash
111+
# Build and run with Docker
112+
docker-compose up --build
113+
114+
# Build production image
115+
docker build -t tic-tac-two .
116+
117+
# Run with Docker (exposes port 8080)
118+
docker run -p 8080:8080 tic-tac-two
119+
```
120+
121+
### Development Workflow
122+
1. Backend runs on port 8080 locally (${PORT:8080}), 10000 in production
123+
2. Frontend development server runs on port 3000
124+
3. WebSocket connections handle real-time game updates
125+
4. Static frontend assets are served by Spring Boot in production
126+
5. Environment-specific configuration via `application.properties` and `application-prod.properties`
127+
128+
### Key Components to Understand
129+
130+
#### Backend Services
131+
- `GameService`: Manages room creation, player joining, and game state
132+
- `GameController`: Handles WebSocket messaging for real-time gameplay
133+
- `HTTPController`: Provides REST endpoints for room management
134+
135+
#### Frontend Components
136+
- `App.js`: Main application logic and state management
137+
- `Board`: Game board rendering and interaction
138+
- `Header`: Application header with game title and user info
139+
- Theme system for consistent styling across components
140+
141+
### WebSocket Integration
142+
- Real-time communication between players
143+
- Room-based game sessions
144+
- Automatic player symbol assignment
145+
- Game state synchronization
146+
147+
### Deployment Notes
148+
- Application is deployed on Render platform
149+
- Multi-stage Docker build for optimization
150+
- Frontend assets are served by Spring Boot backend
151+
- No database required - uses in-memory storage for game sessions
152+
- Production port: 10000, Development port: 8080
153+
- CORS configured with ALLOWED_ORIGINS environment variable
154+
155+
### Testing
156+
- Currently no custom test suites implemented
157+
- Frontend supports React testing framework via `npm test`
158+
- Backend supports JUnit testing via `mvn test`
159+
- Consider adding unit tests for game logic and integration tests for WebSocket communication
160+
161+
### Security Considerations
162+
- No sensitive data stored permanently
163+
- Session-based game rooms with automatic cleanup
164+
- CORS configured for frontend-backend communication
165+
166+
## When Making Changes
167+
- Test both frontend and backend components
168+
- Ensure WebSocket functionality works correctly
169+
- Verify responsive design on different screen sizes
170+
- Maintain the established theme and styling patterns
171+
- Consider the unique game mechanics when modifying game logic
172+
- Test multiplayer functionality with multiple browser sessions

0 commit comments

Comments
 (0)