Skip to content

Commit a360910

Browse files
klieretklieret
committed
Ref(viewer): Start refactoring work towards react
1 parent d117067 commit a360910

32 files changed

Lines changed: 5414 additions & 0 deletions

‎run_viewer_react.py‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
#!/usr/bin/env python3
2+
"""
3+
Launch script for the React-based CodeClash Trajectory Viewer
4+
"""
5+
6+
import argparse
7+
from pathlib import Path
8+
9+
if __name__ == "__main__":
10+
parser = argparse.ArgumentParser(description="CodeClash React Trajectory Viewer")
11+
parser.add_argument(
12+
"-d",
13+
"--directory",
14+
type=str,
15+
default=None,
16+
help="Logs directory to search for game trajectories (defaults to ./logs)",
17+
)
18+
parser.add_argument(
19+
"--port",
20+
type=int,
21+
default=5002,
22+
help="Port to run the server on (default: 5002)",
23+
)
24+
25+
args = parser.parse_args()
26+
27+
from viewer_react.backend import app, set_log_base_directory
28+
29+
# Set the logs directory if provided
30+
if args.directory:
31+
set_log_base_directory(args.directory)
32+
print(f"📁 Using logs directory: {Path(args.directory).resolve()}")
33+
else:
34+
print(f"📁 Using logs directory: {Path.cwd() / 'logs'}")
35+
36+
print("🎮 Starting CodeClash React Trajectory Viewer...")
37+
print(f"📊 Navigate to http://localhost:{args.port} to view game trajectories")
38+
print("🔧 Press Ctrl+C to stop the server")
39+
40+
app.run(debug=True, host="0.0.0.0", port=args.port)

‎viewer_react/.gitignore‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
__pycache__/
2+
*.py[cod]
3+
*$py.class
4+
*.so
5+
.Python
6+
build/
7+
develop-eggs/
8+
dist/
9+
downloads/
10+
eggs/
11+
.eggs/
12+
lib/
13+
lib64/
14+
parts/
15+
sdist/
16+
var/
17+
wheels/
18+
*.egg-info/
19+
.installed.cfg
20+
*.egg
21+
22+
# Frontend
23+
frontend/node_modules/
24+
frontend/dist/
25+
frontend/.vite/
26+
frontend/npm-debug.log*
27+
frontend/yarn-debug.log*
28+
frontend/yarn-error.log*
29+
30+
# IDEs
31+
.vscode/
32+
.idea/
33+
*.swp
34+
*.swo
35+
*~
36+
37+
# OS
38+
.DS_Store
39+
Thumbs.db

‎viewer_react/QUICKSTART.md‎

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
# Quick Start Guide
2+
3+
## First Time Setup
4+
5+
1. **Install Python dependencies** (from project root):
6+
```bash
7+
pip install flask flask-cors
8+
```
9+
10+
2. **Install Node dependencies**:
11+
```bash
12+
cd viewer_react/frontend
13+
npm install
14+
```
15+
16+
## Development Mode (Recommended)
17+
18+
Run both servers in separate terminals for hot-reload:
19+
20+
**Terminal 1 - Backend:**
21+
```bash
22+
# From project root
23+
python run_viewer_react.py
24+
```
25+
26+
**Terminal 2 - Frontend:**
27+
```bash
28+
cd viewer_react/frontend
29+
npm run dev
30+
```
31+
32+
Then open http://localhost:3000 in your browser.
33+
34+
## Production Mode
35+
36+
Build the frontend and run from a single server:
37+
38+
```bash
39+
cd viewer_react
40+
./build.sh
41+
cd ..
42+
python run_viewer_react.py
43+
```
44+
45+
Then open http://localhost:5002 in your browser.
46+
47+
## Custom Logs Directory
48+
49+
```bash
50+
python run_viewer_react.py -d /path/to/your/logs
51+
```
52+
53+
## Custom Port
54+
55+
```bash
56+
python run_viewer_react.py --port 8080
57+
```
58+
59+
## Troubleshooting
60+
61+
### Port already in use
62+
If port 5002 is already in use (maybe the old viewer is running), use a different port:
63+
```bash
64+
python run_viewer_react.py --port 5003
65+
```
66+
67+
### Frontend won't build
68+
Make sure you have Node.js 18+ installed:
69+
```bash
70+
node --version
71+
```
72+
73+
### Backend API errors
74+
Check that all required Python packages are installed:
75+
```bash
76+
pip install flask flask-cors
77+
```
78+
79+
Also ensure the codeclash package is installed in development mode:
80+
```bash
81+
pip install -e .
82+
```

‎viewer_react/README.md‎

Lines changed: 123 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,123 @@
1+
# CodeClash React Viewer
2+
3+
A modern React-based trajectory viewer for CodeClash game sessions.
4+
5+
## Features
6+
7+
- **Clean React + TypeScript frontend** with Vite for fast development
8+
- **RESTful Flask backend** with clear API endpoints
9+
- **Game Picker** - Browse and search all available games
10+
- **Game Viewer** - View game overview, rounds, and results
11+
- **Trajectory Viewer** - Inspect agent messages, diffs, and submissions
12+
- **Lazy Loading** - Trajectories and diffs load on demand for better performance
13+
14+
## Setup
15+
16+
### Prerequisites
17+
18+
- Python 3.10+
19+
- Node.js 18+ (for frontend development)
20+
21+
### Installation
22+
23+
1. Install Python dependencies (from project root):
24+
```bash
25+
pip install flask flask-cors
26+
```
27+
28+
2. Install frontend dependencies:
29+
```bash
30+
cd viewer_react/frontend
31+
npm install
32+
```
33+
34+
### Development
35+
36+
For development with hot reload:
37+
38+
1. Start the backend server (from project root):
39+
```bash
40+
python run_viewer_react.py
41+
```
42+
43+
2. In a separate terminal, start the frontend dev server:
44+
```bash
45+
cd viewer_react/frontend
46+
npm run dev
47+
```
48+
49+
The frontend will be available at http://localhost:3000 with hot reload.
50+
The backend API runs at http://localhost:5002.
51+
52+
### Production
53+
54+
Build the frontend and serve it from Flask:
55+
56+
```bash
57+
cd viewer_react/frontend
58+
npm run build
59+
cd ../..
60+
python run_viewer_react.py
61+
```
62+
63+
The app will be available at http://localhost:5002.
64+
65+
## Usage
66+
67+
```bash
68+
# Use default logs directory (./logs)
69+
python run_viewer_react.py
70+
71+
# Use custom logs directory
72+
python run_viewer_react.py -d /path/to/logs
73+
74+
# Use custom port
75+
python run_viewer_react.py --port 8000
76+
```
77+
78+
## Architecture
79+
80+
```
81+
viewer_react/
82+
├── backend.py # Flask REST API
83+
├── frontend/ # React + TypeScript app
84+
│ ├── src/
85+
│ │ ├── components/ # React components
86+
│ │ ├── types/ # TypeScript types
87+
│ │ ├── utils/ # API client
88+
│ │ ├── App.tsx # Main app component
89+
│ │ └── main.tsx # Entry point
90+
│ ├── package.json
91+
│ └── vite.config.ts
92+
└── README.md
93+
```
94+
95+
## API Endpoints
96+
97+
- `GET /api/folders` - List all game folders
98+
- `GET /api/game/<path>` - Get game metadata and rounds
99+
- `GET /api/trajectory/<path>/<player>/<round>` - Get trajectory data
100+
- `GET /api/analysis/line-counts/<path>` - Get line count analysis
101+
- `GET /api/analysis/sim-wins/<path>` - Get simulation wins per round
102+
- `POST /api/delete-folder` - Delete a game folder
103+
104+
## Comparison with Original Viewer
105+
106+
### Improvements
107+
108+
- **Modern Stack**: React + TypeScript instead of Jinja templates
109+
- **Better Performance**: Lazy loading, component-based architecture
110+
- **Cleaner Code**: Separation of concerns between backend and frontend
111+
- **Type Safety**: Full TypeScript support
112+
- **Better UX**: Smooth interactions, clear visual hierarchy
113+
114+
### Simplified Features
115+
116+
- Removed static site generation (focus on live viewer)
117+
- Simplified keyboard shortcuts (can be added back if needed)
118+
- Removed some advanced features like matrix analysis display (can be added back)
119+
- No folder management features yet (rename, move, etc.)
120+
121+
## Development Notes
122+
123+
The viewer focuses on core functionality with a clean, maintainable codebase. Additional features from the original viewer can be added incrementally as needed.

0 commit comments

Comments
 (0)