🗑️ Remove outdated documentation files and consolidate content into a single README for improved organization and maintainability
This commit is contained in:
@@ -1,153 +0,0 @@
|
||||
# Pokedex.online Cleanup Summary
|
||||
|
||||
**Date**: January 28, 2026
|
||||
|
||||
## 🎯 Objectives Completed
|
||||
|
||||
### 1. Consolidated Documentation ✅
|
||||
**Removed** the following outdated/redundant documentation files:
|
||||
- `API_KEY_STORAGE.md` - Merged into README
|
||||
- `CORS_PROXY_GUIDE.md` - Outdated, vite handles proxying
|
||||
- `ENVIRONMENT_SETUP.md` - Merged into README
|
||||
- `GAMEMASTER_IMPLEMENTATION.md` - Implementation-specific, not needed long-term
|
||||
- `IMPLEMENTATION_COMPLETE.md` - Session milestone, not reference material
|
||||
- `PROJECT_PLAN.md` - Already implemented, not needed as reference
|
||||
- `SESSION_9_SUMMARY.md` - Session work log, not needed in main repo
|
||||
- `VERIFICATION_CHECKLIST.md` - Session-specific, no longer needed
|
||||
- `OAUTH_SETUP.md` - Merged into README
|
||||
|
||||
**Result**: Reduced from 10 markdown files to **1 comprehensive README.md**
|
||||
|
||||
### 2. Removed Dead Code ✅
|
||||
- **Deleted** `proxy-server.js` - Legacy proxy server replaced by vite config and oauth-proxy.js in server/
|
||||
|
||||
**Result**: One less file to maintain, cleaner codebase
|
||||
|
||||
### 3. Created Debug Utility ✅
|
||||
- **Created** `src/utilities/debug.js` - Centralized debug logging with environment-based toggle
|
||||
- Allows toggling debug mode via:
|
||||
- `VITE_DEBUG=true` environment variable
|
||||
- `localStorage.setItem('DEBUG', '1')` in browser console
|
||||
- Reduces production console spam while keeping debug capability
|
||||
|
||||
**Result**: Logging is now controllable and consistent across the app
|
||||
|
||||
### 4. Cleaned Up Configuration Files ✅
|
||||
- **Updated** `.env.example` to be clear and modern
|
||||
- Removed outdated IP addresses (10.0.0.157 → localhost)
|
||||
- Added DEBUG mode toggle documentation
|
||||
- Separated browser vars (VITE_) from backend vars clearly
|
||||
|
||||
### 5. Verified & Maintained Active Code ✅
|
||||
**Services** - Proper debug logging already in place:
|
||||
- `challonge-v2.1.service.js` - Has conditional debug mode ✓
|
||||
- `challonge-v1.service.js` - Properly scoped error logging ✓
|
||||
|
||||
**Utilities** - All actively used:
|
||||
- `csv-utils.js` - Used by GamemasterManager ✓
|
||||
- `gamemaster-utils.js` - Core feature ✓
|
||||
- `participant-utils.js` - Used for CSV merging ✓
|
||||
- `string-utils.js` - Used by participant utils ✓
|
||||
- `constants.js` - Used throughout ✓
|
||||
|
||||
**Models** (Future use - left intact):
|
||||
- `tournament.model.js`
|
||||
- `participant.model.js`
|
||||
- `pokemon.model.js`
|
||||
|
||||
**Composables** - Both actively used:
|
||||
- `useChallongeApiKey.js` - API key storage ✓
|
||||
- `useChallongeOAuth.js` - OAuth flow ✓
|
||||
|
||||
### 6. Consolidated & Updated README ✅
|
||||
**New README structure**:
|
||||
- Quick Start (3 min setup)
|
||||
- Features overview
|
||||
- Docker deployment
|
||||
- Project structure
|
||||
- Configuration guide
|
||||
- Tech stack
|
||||
- Development workflow
|
||||
- Production deployment
|
||||
|
||||
**Features**:
|
||||
- Clean, scannable format
|
||||
- Focus on what's needed to run the app
|
||||
- Development vs production clearly separated
|
||||
- All configuration in one place
|
||||
|
||||
## 📊 Results Summary
|
||||
|
||||
| Metric | Before | After | Change |
|
||||
|--------|--------|-------|--------|
|
||||
| Markdown docs | 10 | 1 | **-90%** |
|
||||
| Root files | 16 | 15 | **-6%** |
|
||||
| Active code files | Same | Same | ✓ |
|
||||
| Debug capability | Ad-hoc | Centralized | ✓ |
|
||||
| Configuration clarity | Complex | Simple | ✓ |
|
||||
|
||||
## 🎯 Benefits
|
||||
|
||||
1. **Reduced Cognitive Load**
|
||||
- One README instead of 10 docs
|
||||
- Easier onboarding
|
||||
- Less context switching
|
||||
|
||||
2. **Improved Maintainability**
|
||||
- No outdated session docs
|
||||
- Centralized debug logging
|
||||
- Clear separation of concerns
|
||||
|
||||
3. **Better Organization**
|
||||
- Documentation reflects current state
|
||||
- Configuration is straightforward
|
||||
- Easy to extend or modify
|
||||
|
||||
4. **Developer Experience**
|
||||
- Clear setup instructions
|
||||
- Debug mode easily toggleable
|
||||
- Everything in one place
|
||||
|
||||
## 🔧 What's Still There
|
||||
|
||||
**Kept because they're valuable**:
|
||||
- `index.html` - Vue app entry point
|
||||
- `vite.config.js` - Build and dev config
|
||||
- `docker-compose.yml` - Local Docker setup
|
||||
- `Dockerfile` - Production image
|
||||
- `nginx.conf` - Production routing
|
||||
- `.env.example` - Configuration template
|
||||
- `.gitignore` - Git exclusions
|
||||
- `package.json` - Dependencies and scripts
|
||||
|
||||
**Source code** (untouched, all still used):
|
||||
- `src/` - Vue 3 application code
|
||||
- `server/` - OAuth proxy server
|
||||
- `src/utilities/` - Helper functions and models
|
||||
- `src/composables/` - State management
|
||||
- `src/services/` - API clients
|
||||
|
||||
## 📝 Usage Tips
|
||||
|
||||
### Enable Debug Mode
|
||||
```bash
|
||||
# Via environment
|
||||
VITE_DEBUG=true npm run dev
|
||||
|
||||
# Via browser console
|
||||
localStorage.setItem('DEBUG', '1')
|
||||
localStorage.removeItem('DEBUG') # Disable
|
||||
```
|
||||
|
||||
### Check What Was Removed
|
||||
Commit the cleanup:
|
||||
```bash
|
||||
git status # See removed files
|
||||
git log --oneline -n 1 # View cleanup commit
|
||||
```
|
||||
|
||||
## 🎉 Conclusion
|
||||
|
||||
The pokedex.online project is now **cleaner, more maintainable, and easier to work with**. All active code is preserved, outdated documentation is removed, and the developer experience is improved.
|
||||
|
||||
The project is ready for continued development with a solid foundation.
|
||||
@@ -1,374 +0,0 @@
|
||||
# Gamemaster API Documentation
|
||||
|
||||
## Overview
|
||||
|
||||
The Gamemaster API provides access to processed Pokemon GO gamemaster data. Once gamemaster data is generated and saved via the GamemasterManager UI, it becomes available to all apps on the site.
|
||||
|
||||
**Data Types:**
|
||||
- **Pokemon (Filtered)** - Base forms + regional variants (Alola, Galarian, Hisuian, Paldea)
|
||||
- **All Forms & Costumes** - Complete dataset with all variants, costumes, events, shadows
|
||||
- **Moves** - All quick and charged moves available in Pokemon GO
|
||||
- **Raw** - Unmodified gamemaster data from PokeMiners
|
||||
|
||||
## API Endpoints
|
||||
|
||||
### Base URL
|
||||
```
|
||||
/api/gamemaster
|
||||
```
|
||||
|
||||
### GET /api/gamemaster/status
|
||||
Get information about available files and their storage status.
|
||||
|
||||
**Response:**
|
||||
```json
|
||||
{
|
||||
"available": [
|
||||
{
|
||||
"filename": "pokemon.json",
|
||||
"size": 1234567,
|
||||
"sizeKb": "1234.57",
|
||||
"modified": "2026-01-28T12:34:56.000Z"
|
||||
}
|
||||
],
|
||||
"lastUpdate": "2026-01-28T12:34:56.000Z",
|
||||
"totalFiles": 4
|
||||
}
|
||||
```
|
||||
|
||||
### GET /api/gamemaster/pokemon
|
||||
Get filtered pokemon data (base forms + regional variants).
|
||||
|
||||
**Response:**
|
||||
Array of gamemaster items with pokemon settings.
|
||||
|
||||
### GET /api/gamemaster/pokemon/allForms
|
||||
Get all pokemon forms including costumes, event forms, shadows, etc.
|
||||
|
||||
**Response:**
|
||||
Array of all gamemaster pokemon items.
|
||||
|
||||
### GET /api/gamemaster/moves
|
||||
Get all pokemon moves (quick and charged).
|
||||
|
||||
**Response:**
|
||||
Array of gamemaster move items.
|
||||
|
||||
### GET /api/gamemaster/raw
|
||||
Get raw unmodified gamemaster data from PokeMiners.
|
||||
|
||||
**Response:**
|
||||
Complete raw gamemaster array.
|
||||
|
||||
### POST /api/gamemaster/save
|
||||
Save processed gamemaster data to server storage.
|
||||
|
||||
**Headers:**
|
||||
```
|
||||
Content-Type: application/json
|
||||
```
|
||||
|
||||
**Body:**
|
||||
```json
|
||||
{
|
||||
"pokemon": [...],
|
||||
"pokemonAllForms": [...],
|
||||
"moves": [...],
|
||||
"raw": [...]
|
||||
}
|
||||
```
|
||||
|
||||
**Response:**
|
||||
```json
|
||||
{
|
||||
"message": "Files saved successfully",
|
||||
"files": {
|
||||
"pokemon": { "filename": "...", "size": ... },
|
||||
"pokemonAllForms": { ... },
|
||||
"moves": { ... },
|
||||
"raw": { ... }
|
||||
},
|
||||
"timestamp": "2026-01-28T12:34:56.000Z"
|
||||
}
|
||||
```
|
||||
|
||||
### GET /api/gamemaster/download/:filename
|
||||
Download a specific file directly.
|
||||
|
||||
**Parameters:**
|
||||
- `filename` - One of: `pokemon.json`, `pokemon-allFormsCostumes.json`, `pokemon-moves.json`, `latest-raw.json`
|
||||
|
||||
**Response:**
|
||||
Binary JSON file with appropriate headers for download.
|
||||
|
||||
## Client Library
|
||||
|
||||
### Installation
|
||||
|
||||
Use the `GamemasterClient` class from `src/utilities/gamemaster-client.js`:
|
||||
|
||||
```javascript
|
||||
import { GamemasterClient } from './gamemaster-client.js';
|
||||
```
|
||||
|
||||
Or use the singleton instance:
|
||||
|
||||
```javascript
|
||||
import { gamemasterClient } from './gamemaster-client.js';
|
||||
```
|
||||
|
||||
### Usage Examples
|
||||
|
||||
#### Get filtered pokemon
|
||||
```javascript
|
||||
const gm = new GamemasterClient('/api/gamemaster');
|
||||
const pokemon = await gm.getPokemon();
|
||||
console.log(`Loaded ${pokemon.length} pokemon`);
|
||||
```
|
||||
|
||||
#### Get all forms with caching
|
||||
```javascript
|
||||
// First call fetches from server
|
||||
const allForms = await gm.getAllForms({ useCache: true });
|
||||
|
||||
// Subsequent calls use cache
|
||||
const cachedForms = await gm.getAllForms({ useCache: true });
|
||||
```
|
||||
|
||||
#### Get moves
|
||||
```javascript
|
||||
const moves = await gm.getMoves();
|
||||
console.log(`Available moves: ${moves.length}`);
|
||||
```
|
||||
|
||||
#### Get raw unmodified data
|
||||
```javascript
|
||||
const raw = await gm.getRaw();
|
||||
```
|
||||
|
||||
#### Check server status
|
||||
```javascript
|
||||
const status = await gm.getStatus();
|
||||
console.log(`Last update: ${status.lastUpdate}`);
|
||||
console.log(`Files available: ${status.totalFiles}`);
|
||||
```
|
||||
|
||||
#### Find specific pokemon
|
||||
```javascript
|
||||
const arcanine = await gm.getPokemonById('growlithe_alola');
|
||||
if (arcanine) {
|
||||
console.log(arcanine.data.pokemonSettings);
|
||||
}
|
||||
```
|
||||
|
||||
#### Find specific move
|
||||
```javascript
|
||||
const thunderbolt = await gm.getMoveById('thunderbolt');
|
||||
if (thunderbolt) {
|
||||
console.log(thunderbolt.data.moveSettings);
|
||||
}
|
||||
```
|
||||
|
||||
#### Download file
|
||||
```javascript
|
||||
// Download to user's downloads folder
|
||||
await gm.downloadFile('pokemon.json');
|
||||
```
|
||||
|
||||
#### Clear cache
|
||||
```javascript
|
||||
// Clear specific data
|
||||
gm.clearCache('pokemon');
|
||||
|
||||
// Clear all cached data
|
||||
gm.clearCache();
|
||||
```
|
||||
|
||||
### API Reference
|
||||
|
||||
#### `new GamemasterClient(baseUrl = '/api/gamemaster')`
|
||||
Create a new client instance.
|
||||
|
||||
**Parameters:**
|
||||
- `baseUrl` - Base URL for the API (defaults to `/api/gamemaster`)
|
||||
|
||||
#### `getPokemon(options = {})`
|
||||
Get filtered pokemon data.
|
||||
|
||||
**Options:**
|
||||
- `useCache` - (boolean) Use cached data if available
|
||||
|
||||
**Returns:** `Promise<Array>`
|
||||
|
||||
#### `getAllForms(options = {})`
|
||||
Get all pokemon forms including costumes.
|
||||
|
||||
**Returns:** `Promise<Array>`
|
||||
|
||||
#### `getMoves(options = {})`
|
||||
Get all pokemon moves.
|
||||
|
||||
**Returns:** `Promise<Array>`
|
||||
|
||||
#### `getRaw(options = {})`
|
||||
Get raw unmodified gamemaster data.
|
||||
|
||||
**Returns:** `Promise<Array>`
|
||||
|
||||
#### `getStatus()`
|
||||
Get server storage status and available files.
|
||||
|
||||
**Returns:** `Promise<Object>`
|
||||
|
||||
#### `getPokemonById(pokemonId)`
|
||||
Find a specific pokemon in the filtered dataset.
|
||||
|
||||
**Parameters:**
|
||||
- `pokemonId` - Pokemon ID string (e.g., "growlithe", "growlithe_alola")
|
||||
|
||||
**Returns:** `Promise<Object|null>`
|
||||
|
||||
#### `getMoveById(moveId)`
|
||||
Find a specific move.
|
||||
|
||||
**Parameters:**
|
||||
- `moveId` - Move ID string (e.g., "thunderbolt")
|
||||
|
||||
**Returns:** `Promise<Object|null>`
|
||||
|
||||
#### `downloadFile(filename)`
|
||||
Download a file directly to the browser.
|
||||
|
||||
**Parameters:**
|
||||
- `filename` - File to download (see POST /api/gamemaster/save)
|
||||
|
||||
**Returns:** `Promise<void>`
|
||||
|
||||
#### `clearCache(key = null)`
|
||||
Clear cached data.
|
||||
|
||||
**Parameters:**
|
||||
- `key` - (optional) Specific cache key to clear, or clears all if not provided
|
||||
|
||||
## Server Setup
|
||||
|
||||
### Required Environment Variables
|
||||
None - the API runs with defaults.
|
||||
|
||||
### File Storage
|
||||
Processed gamemaster files are stored in:
|
||||
```
|
||||
server/data/gamemaster/
|
||||
```
|
||||
|
||||
Directory is created automatically on first save.
|
||||
|
||||
### Initialization
|
||||
|
||||
The gamemaster API is automatically integrated into the main server:
|
||||
|
||||
```javascript
|
||||
// In server/oauth-proxy.js
|
||||
import gamemasterRouter from './gamemaster-api.js';
|
||||
app.use('/api/gamemaster', gamemasterRouter);
|
||||
```
|
||||
|
||||
Run the OAuth proxy server:
|
||||
```bash
|
||||
npm run oauth-proxy
|
||||
```
|
||||
|
||||
Or run dev with both frontend and server:
|
||||
```bash
|
||||
npm run dev:full
|
||||
```
|
||||
|
||||
## Workflow
|
||||
|
||||
1. **Generate Data**
|
||||
- Open GamemasterManager at `/gamemaster`
|
||||
- Click "Fetch from PokeMiners"
|
||||
- Click "Process & Break Up Data"
|
||||
- Click "Save All Files to Server"
|
||||
|
||||
2. **Access from Other Apps**
|
||||
- Import GamemasterClient in any app
|
||||
- Call `getPokemon()`, `getAllForms()`, `getMoves()`, etc.
|
||||
- Data is available immediately
|
||||
|
||||
3. **Refresh Data**
|
||||
- Repeat generation process when PokeMiners releases updates
|
||||
- Files are overwritten, maintaining consistency across apps
|
||||
|
||||
## Data Structure
|
||||
|
||||
### Pokemon Item
|
||||
```javascript
|
||||
{
|
||||
templateId: "V0001_POKEMON_BULBASAUR",
|
||||
data: {
|
||||
pokemonSettings: {
|
||||
pokemonId: "bulbasaur",
|
||||
form: "NORMAL",
|
||||
// ... other pokemon data
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Move Item
|
||||
```javascript
|
||||
{
|
||||
templateId: "V0002_MOVE_POUND",
|
||||
data: {
|
||||
moveSettings: {
|
||||
movementId: "pound",
|
||||
// ... other move data
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Error Handling
|
||||
|
||||
All endpoints return appropriate HTTP status codes:
|
||||
|
||||
- `200 OK` - Success
|
||||
- `400 Bad Request` - Invalid parameters
|
||||
- `404 Not Found` - Data not available (hasn't been generated yet)
|
||||
- `500 Server Error` - Server error
|
||||
|
||||
### Example Error Response
|
||||
```json
|
||||
{
|
||||
"error": "Pokemon data not available. Generate from GamemasterManager."
|
||||
}
|
||||
```
|
||||
|
||||
## Performance Considerations
|
||||
|
||||
- All data is cached in memory after first request
|
||||
- Files are stored as plain JSON for quick access
|
||||
- Use `useCache: true` option in client to avoid repeated fetches
|
||||
- Clear cache when refreshing data: `gm.clearCache()`
|
||||
|
||||
## Security
|
||||
|
||||
- No authentication required (adjust if deploying publicly)
|
||||
- Filename validation prevents path traversal attacks
|
||||
- Large payloads supported (50MB limit)
|
||||
- CORS configured for local development
|
||||
|
||||
## Troubleshooting
|
||||
|
||||
### "Data not available" error
|
||||
- Run GamemasterManager to generate and save data first
|
||||
- Check that `/server/data/gamemaster/` directory exists
|
||||
|
||||
### Files not persisting
|
||||
- Ensure server has write permissions to `/server/data/gamemaster/`
|
||||
- Restart server after manual directory creation
|
||||
|
||||
### Large file downloads timing out
|
||||
- Check network connection
|
||||
- Try downloading individual files instead of all at once
|
||||
@@ -1,252 +0,0 @@
|
||||
# Gamemaster Explorer - Future Features
|
||||
|
||||
This document outlines planned features and enhancements for the Gamemaster Explorer.
|
||||
|
||||
## Phase 2 Features
|
||||
|
||||
### 1. Bookmarking System
|
||||
- **Description**: Allow users to bookmark specific lines or sections for quick access
|
||||
- **Implementation**:
|
||||
- Add bookmark button next to line numbers
|
||||
- Store bookmarks in localStorage with file association
|
||||
- Bookmark panel showing all saved bookmarks with quick navigation
|
||||
- Export/import bookmark collections
|
||||
- **UI**: Star icon in line gutter, collapsible bookmark sidebar
|
||||
|
||||
### 2. Regular Expression Search
|
||||
- **Description**: Advanced search using regex patterns
|
||||
- **Implementation**:
|
||||
- Toggle switch between simple and regex search modes
|
||||
- Validate regex input and show helpful error messages
|
||||
- Highlight regex groups with different colors
|
||||
- Preset regex patterns for common searches (emails, URLs, IDs)
|
||||
- **UI**: Regex mode checkbox, pattern library dropdown
|
||||
|
||||
### 3. Syntax Error Detection
|
||||
- **Description**: Detect and highlight JSON syntax errors
|
||||
- **Implementation**:
|
||||
- Parse JSON incrementally to detect errors
|
||||
- Show error markers in gutter
|
||||
- Hover over errors for detailed messages
|
||||
- Auto-fix simple errors (trailing commas, quotes)
|
||||
- **UI**: Red error markers, error panel at bottom
|
||||
|
||||
### 4. Mobile Gesture Support
|
||||
- **Description**: Touch-friendly gestures for mobile devices
|
||||
- **Implementation**:
|
||||
- Swipe left/right to navigate search results
|
||||
- Pinch to zoom text size
|
||||
- Long-press for line selection
|
||||
- Pull-to-refresh for file reload
|
||||
- **Detection**: Use pointer events API for better touch support
|
||||
|
||||
### 5. Offline Support
|
||||
- **Description**: Cache files for offline viewing
|
||||
- **Implementation**:
|
||||
- Service worker for caching
|
||||
- IndexedDB for storing large files
|
||||
- Offline indicator in UI
|
||||
- Sync status when coming back online
|
||||
- **UI**: Offline badge, cache management panel
|
||||
|
||||
### 6. Filter Presets
|
||||
- **Description**: Save and reuse common filter combinations
|
||||
- **Implementation**:
|
||||
- Preset editor with name and description
|
||||
- Save current filter state as preset
|
||||
- Quick-access preset dropdown
|
||||
- Share presets via URL or export
|
||||
- **Storage**: localStorage with preset manager UI
|
||||
|
||||
## Phase 3 Features
|
||||
|
||||
### 7. Diff Viewer
|
||||
- **Description**: Compare two versions of gamemaster files
|
||||
- **Implementation**:
|
||||
- Side-by-side or unified diff view
|
||||
- Highlight additions, deletions, changes
|
||||
- Navigate between changes
|
||||
- Export diff as patch file
|
||||
- **Library**: Consider using diff-match-patch
|
||||
|
||||
### 8. Advanced Analytics
|
||||
- **Description**: Statistical analysis of gamemaster data
|
||||
- **Implementation**:
|
||||
- Property distribution charts
|
||||
- Data type analysis
|
||||
- Value frequency reports
|
||||
- Array size statistics
|
||||
- **UI**: Analytics dashboard with charts (Chart.js)
|
||||
|
||||
### 9. Collaborative Features
|
||||
- **Description**: Share annotations and bookmarks with team
|
||||
- **Implementation**:
|
||||
- Share URLs with annotations
|
||||
- Comment system on lines
|
||||
- Collaborative bookmark collections
|
||||
- Real-time collaboration (future: WebSockets)
|
||||
- **Backend**: Requires API for storing shared data
|
||||
|
||||
### 10. Custom Themes
|
||||
- **Description**: User-customizable syntax highlighting themes
|
||||
- **Implementation**:
|
||||
- Theme editor with live preview
|
||||
- Import popular VS Code themes
|
||||
- Share themes with community
|
||||
- Per-language theme customization
|
||||
- **Storage**: Theme files in localStorage or cloud
|
||||
|
||||
## Performance Optimizations
|
||||
|
||||
### 1. Web Workers
|
||||
- Move search and filtering to background threads
|
||||
- Prevent UI blocking during heavy operations
|
||||
- Progress reporting from workers
|
||||
|
||||
### 2. Incremental Rendering
|
||||
- Render only visible viewport initially
|
||||
- Stream large files in chunks
|
||||
- Progressive enhancement of features
|
||||
|
||||
### 3. Smart Caching
|
||||
- Cache parsed JSON structures
|
||||
- Memoize expensive computations
|
||||
- Invalidate cache intelligently
|
||||
|
||||
## Accessibility Improvements
|
||||
|
||||
### 1. Screen Reader Support
|
||||
- Proper ARIA labels
|
||||
- Keyboard navigation announcements
|
||||
- Alternative text for visualizations
|
||||
|
||||
### 2. Keyboard Navigation
|
||||
- Additional shortcuts for power users
|
||||
- Customizable keybindings
|
||||
- Keyboard shortcut cheat sheet
|
||||
|
||||
### 3. High Contrast Mode
|
||||
- Ensure readability in high contrast mode
|
||||
- Configurable contrast ratios
|
||||
- Support for OS-level preferences
|
||||
|
||||
## Integration Features
|
||||
|
||||
### 1. Export Formats
|
||||
- CSV export for tabular data
|
||||
- Markdown tables
|
||||
- HTML with embedded styles
|
||||
- PDF generation
|
||||
|
||||
### 2. Import Data
|
||||
- Upload custom JSON files
|
||||
- Paste JSON directly
|
||||
- Import from URLs
|
||||
- Drag-and-drop file upload
|
||||
|
||||
### 3. API Integration
|
||||
- Direct API calls to PokeMiners
|
||||
- Auto-refresh on new versions
|
||||
- Webhook notifications
|
||||
- Version history tracking
|
||||
|
||||
## UI/UX Enhancements
|
||||
|
||||
### 1. Split View
|
||||
- View multiple files simultaneously
|
||||
- Synchronized scrolling
|
||||
- Quick file switching
|
||||
- Draggable split divider
|
||||
|
||||
### 2. Minimap
|
||||
- VS Code-style minimap for navigation
|
||||
- Highlight search results in minimap
|
||||
- Click to jump to location
|
||||
- Configurable minimap size
|
||||
|
||||
### 3. Command Palette
|
||||
- VS Code-style command palette (Ctrl+Shift+P)
|
||||
- Quick access to all features
|
||||
- Fuzzy search for commands
|
||||
- Recent commands history
|
||||
|
||||
### 4. Breadcrumbs Navigation
|
||||
- JSON path breadcrumbs at top
|
||||
- Click to collapse/expand sections
|
||||
- Copy path to clipboard
|
||||
- Navigate hierarchy easily
|
||||
|
||||
## Developer Features
|
||||
|
||||
### 1. API Playground
|
||||
- Test JSON transformations
|
||||
- JMESPath query builder
|
||||
- JSONPath tester
|
||||
- GraphQL query generator
|
||||
|
||||
### 2. Schema Validation
|
||||
- Validate against JSON Schema
|
||||
- Auto-generate schemas
|
||||
- Schema explorer
|
||||
- Validation error reporting
|
||||
|
||||
### 3. Query Builder
|
||||
- Visual query builder for complex filters
|
||||
- Save and reuse queries
|
||||
- Query optimization suggestions
|
||||
- Explain query execution
|
||||
|
||||
## Community Features
|
||||
|
||||
### 1. Share Discoveries
|
||||
- Share interesting data findings
|
||||
- Community annotation database
|
||||
- Voting on useful bookmarks
|
||||
- Discussion threads
|
||||
|
||||
### 2. Plugin System
|
||||
- Allow community plugins
|
||||
- Plugin marketplace
|
||||
- Safe sandboxed execution
|
||||
- Plugin API documentation
|
||||
|
||||
## Priority Matrix
|
||||
|
||||
| Feature | Impact | Effort | Priority |
|
||||
|---------|--------|--------|----------|
|
||||
| Bookmarking | High | Low | ⭐⭐⭐ |
|
||||
| Regex Search | High | Medium | ⭐⭐⭐ |
|
||||
| Mobile Gestures | Medium | High | ⭐⭐ |
|
||||
| Offline Support | Medium | High | ⭐⭐ |
|
||||
| Diff Viewer | High | High | ⭐⭐⭐ |
|
||||
| Custom Themes | Low | Medium | ⭐ |
|
||||
| Split View | Medium | Medium | ⭐⭐ |
|
||||
| Command Palette | High | Low | ⭐⭐⭐ |
|
||||
| Schema Validation | Medium | High | ⭐⭐ |
|
||||
|
||||
## Implementation Notes
|
||||
|
||||
- Start with high-priority, low-effort features
|
||||
- Test thoroughly on mobile devices
|
||||
- Consider bundle size impact
|
||||
- Maintain backwards compatibility
|
||||
- Document all new features
|
||||
- Add telemetry (opt-in) to guide future development
|
||||
|
||||
## User Feedback Integration
|
||||
|
||||
Track feature requests from users and adjust priorities based on:
|
||||
- Usage analytics
|
||||
- Support tickets
|
||||
- Community polls
|
||||
- Performance metrics
|
||||
|
||||
## Technical Debt
|
||||
|
||||
Items to address before adding more features:
|
||||
- Unit tests for all utilities
|
||||
- E2E tests for critical paths
|
||||
- Performance benchmarking
|
||||
- Security audit
|
||||
- Accessibility audit
|
||||
- Bundle size optimization
|
||||
@@ -1,124 +0,0 @@
|
||||
# Gamemaster Data System - Implementation Summary
|
||||
|
||||
## What Was Built
|
||||
|
||||
You now have a complete system for managing and sharing Pokemon GO gamemaster data across all apps on your site:
|
||||
|
||||
### 1. **Gamemaster API Server** (`server/gamemaster-api.js`)
|
||||
- **7 REST endpoints** for accessing gamemaster data
|
||||
- **POST /api/gamemaster/save** - Save processed data from GamemasterManager
|
||||
- **GET endpoints** for pokemon, moves, raw data, and status
|
||||
- **File storage** in `/server/data/gamemaster/`
|
||||
- Automatic error handling and validation
|
||||
|
||||
### 2. **GamemasterClient** (`src/utilities/gamemaster-client.js`)
|
||||
- **JavaScript client library** for accessing the API
|
||||
- **Caching support** to avoid repeated requests
|
||||
- **Helper methods** like `getPokemonById()` and `getMoveById()`
|
||||
- **File download support** for direct browser downloads
|
||||
- Works in any Vue component or JavaScript app
|
||||
|
||||
### 3. **Updated GamemasterManager** (`src/views/GamemasterManager.vue`)
|
||||
- **New "Save to Server" button** to persist data
|
||||
- **Server status section** showing available files and sizes
|
||||
- **Real-time updates** after saving
|
||||
- **Complete workflow**: Fetch → Process → Save → Share
|
||||
|
||||
### 4. **Comprehensive Documentation** (`GAMEMASTER_API.md`)
|
||||
- **Full API reference** with examples
|
||||
- **Client library usage guide**
|
||||
- **Setup instructions**
|
||||
- **Troubleshooting tips**
|
||||
|
||||
## Architecture
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────────┐
|
||||
│ GamemasterManager (UI) │
|
||||
│ Fetch → Process → Save to Server │
|
||||
└────────────────────┬────────────────────────┘
|
||||
│
|
||||
▼
|
||||
┌──────────────────────────────┐
|
||||
│ Gamemaster API Server │
|
||||
│ /api/gamemaster/* │
|
||||
│ - Endpoints for all data │
|
||||
│ - File storage/retrieval │
|
||||
└────────────────┬─────────────┘
|
||||
│
|
||||
┌────────────┴────────────┐
|
||||
│ │
|
||||
▼ ▼
|
||||
┌────────────────┐ ┌──────────────────┐
|
||||
│ File Storage │ │ Other Apps │
|
||||
│ /server/data/ │ │ Use GamemasterC │
|
||||
│ /gamemaster │ │ Client │
|
||||
└────────────────┘ └──────────────────┘
|
||||
```
|
||||
|
||||
## How to Use
|
||||
|
||||
### Generate and Save Data
|
||||
1. Go to `/gamemaster` in your app
|
||||
2. Click "Fetch from PokeMiners"
|
||||
3. Click "Process & Break Up Data"
|
||||
4. Click "Save All Files to Server"
|
||||
5. Data is now available to all apps
|
||||
|
||||
### Access from Any App
|
||||
```javascript
|
||||
import { gamemasterClient } from '@/utilities/gamemaster-client.js';
|
||||
|
||||
// Get filtered pokemon
|
||||
const pokemon = await gamemasterClient.getPokemon();
|
||||
|
||||
// Get all forms (with costumes, events, shadows)
|
||||
const allForms = await gamemasterClient.getAllForms();
|
||||
|
||||
// Get all moves
|
||||
const moves = await gamemasterClient.getMoves();
|
||||
|
||||
// Check what's available
|
||||
const status = await gamemasterClient.getStatus();
|
||||
```
|
||||
|
||||
## Files Created/Modified
|
||||
|
||||
### New Files
|
||||
- `server/gamemaster-api.js` - API server
|
||||
- `server/data/gamemaster/` - Data storage directory
|
||||
- `src/utilities/gamemaster-client.js` - Client library
|
||||
- `GAMEMASTER_API.md` - Full documentation
|
||||
|
||||
### Modified Files
|
||||
- `src/views/GamemasterManager.vue` - Added save/status features
|
||||
- `server/oauth-proxy.js` - Integrated gamemaster API
|
||||
- `README.md` - Updated with new features and workflow
|
||||
|
||||
## Key Features
|
||||
|
||||
✅ **Centralized Data Storage** - One source of truth for gamemaster data
|
||||
✅ **Multiple Datasets** - Filtered and unmodified versions
|
||||
✅ **Real-time Access** - Any app can access latest data immediately
|
||||
✅ **Caching** - Client-side caching for performance
|
||||
✅ **Status Monitoring** - See what files are available and when they were updated
|
||||
✅ **Direct Downloads** - Download files from server or browser
|
||||
✅ **Error Handling** - Graceful fallbacks when data unavailable
|
||||
✅ **CORS Enabled** - Works across all apps on your site
|
||||
|
||||
## Data Types Available
|
||||
|
||||
1. **pokemon.json** - Base Pokemon + regional variants (Alola, Galarian, Hisuian, Paldea)
|
||||
2. **pokemon-allFormsCostumes.json** - Complete dataset with all variants, costumes, shadows, events
|
||||
3. **pokemon-moves.json** - All quick and charged moves
|
||||
4. **latest-raw.json** - Unmodified gamemaster data from PokeMiners
|
||||
|
||||
## Next Steps
|
||||
|
||||
You can now:
|
||||
- Build new Pokemon tools that use the centralized data
|
||||
- Create forms/filters based on gamemaster data
|
||||
- Share pokemon/move lookups across multiple pages
|
||||
- Keep data in sync when PokeMiners releases updates
|
||||
|
||||
Just import the `GamemasterClient` and start using it!
|
||||
@@ -1,165 +0,0 @@
|
||||
# Implementation Summary: Multi-State Tournament Querying
|
||||
|
||||
## Status: ✅ COMPLETE
|
||||
|
||||
All changes have been implemented and committed to resolve the invalid `state: 'all'` parameter issue in the Challonge API v2.1 integration.
|
||||
|
||||
## What Was Wrong
|
||||
|
||||
The original `ChallongeTest.vue` component passed an **invalid parameter** to the Challonge API:
|
||||
|
||||
```javascript
|
||||
// ❌ INVALID - API doesn't accept 'all'
|
||||
const requestParams = {
|
||||
state: 'all'
|
||||
};
|
||||
const result = await client.tournaments.list(requestParams);
|
||||
```
|
||||
|
||||
**The Challonge API v2.1 only accepts:**
|
||||
- `pending` - Tournaments not yet started
|
||||
- `in_progress` - Active tournaments
|
||||
- `ended` - Completed tournaments
|
||||
|
||||
There is **no `all` value** - the API was simply rejecting or ignoring this invalid parameter.
|
||||
|
||||
## What Was Fixed
|
||||
|
||||
### 1. Created Tournament Query Utility
|
||||
**File:** `src/utilities/tournament-query.js`
|
||||
|
||||
A comprehensive utility module that:
|
||||
- Makes 3 **parallel API calls** (one per valid state)
|
||||
- Uses **Promise.all()** to wait for all requests simultaneously
|
||||
- **Deduplicates** results by tournament ID using a Map
|
||||
- Provides **5 convenience functions** for different query scenarios
|
||||
- Includes **error handling** that continues even if one state fails
|
||||
|
||||
### 2. Updated ChallongeTest.vue
|
||||
**File:** `src/views/ChallongeTest.vue`
|
||||
|
||||
Refactored to:
|
||||
- Import the new `queryAllTournaments` function
|
||||
- Replace invalid `state: 'all'` calls with proper multi-state queries
|
||||
- Update logging to show all 3 states being queried
|
||||
- Maintain same UI/functionality while fixing the underlying API issue
|
||||
|
||||
### 3. Comprehensive Documentation
|
||||
**File:** `src/utilities/TOURNAMENT_QUERY_GUIDE.md`
|
||||
|
||||
Detailed guide covering:
|
||||
- Problem explanation
|
||||
- Solution architecture
|
||||
- API reference for all 5 functions
|
||||
- Implementation details
|
||||
- Performance characteristics
|
||||
- Testing instructions
|
||||
- Future enhancement ideas
|
||||
|
||||
## How It Works
|
||||
|
||||
```
|
||||
Before (Invalid):
|
||||
- Make 1 API call with state: 'all'
|
||||
- API rejects/ignores invalid parameter
|
||||
- Return: 0 tournaments ❌
|
||||
|
||||
After (Fixed):
|
||||
- Make 3 parallel API calls:
|
||||
* Call 1: state: 'pending'
|
||||
* Call 2: state: 'in_progress'
|
||||
* Call 3: state: 'ended'
|
||||
- Wait for all with Promise.all()
|
||||
- Combine and deduplicate by ID
|
||||
- Return: All tournaments across all states ✅
|
||||
```
|
||||
|
||||
## Implementation Files
|
||||
|
||||
### New Files Created
|
||||
1. **`src/utilities/tournament-query.js`** (200 lines)
|
||||
- Core utility with 5 export functions
|
||||
- Handles parallel API calls and deduplication
|
||||
- JSDoc documented with examples
|
||||
|
||||
2. **`src/utilities/TOURNAMENT_QUERY_GUIDE.md`** (300+ lines)
|
||||
- Complete API reference
|
||||
- Problem/solution explanation
|
||||
- Performance analysis
|
||||
- Testing guide
|
||||
- Future enhancement roadmap
|
||||
|
||||
### Modified Files
|
||||
1. **`src/views/ChallongeTest.vue`**
|
||||
- Added import for `queryAllTournaments`
|
||||
- Updated `testListTournaments()` function
|
||||
- Updated `loadMoreTournaments()` function
|
||||
- Updated console logging
|
||||
- Removed invalid `state: 'all'` parameter
|
||||
|
||||
## Testing
|
||||
|
||||
The changes are ready to test immediately:
|
||||
|
||||
1. **Navigate** to `/challonge-test` in the app
|
||||
2. **Click** "List My Tournaments" button
|
||||
3. **Check** browser console for:
|
||||
```
|
||||
📊 Tournament API Response (All States):
|
||||
states: ['pending', 'in_progress', 'ended']
|
||||
resultsCount: [your count] // Should be > 0
|
||||
```
|
||||
4. **Verify** tournaments from multiple states are shown
|
||||
|
||||
## Performance Impact
|
||||
|
||||
| Metric | Before | After |
|
||||
|--------|--------|-------|
|
||||
| API Calls | 1 | 3 (parallel) |
|
||||
| Results | 0 ❌ | 300+ ✅ |
|
||||
| Latency | ~100ms | ~100ms (parallel) |
|
||||
| Throughput | Invalid | 3x API calls |
|
||||
|
||||
**Key Point:** Although 3 API calls are made, they're **parallel** so total time is approximately the same as a single call.
|
||||
|
||||
## API Functions Available
|
||||
|
||||
All functions are in `src/utilities/tournament-query.js`:
|
||||
|
||||
### Core Function
|
||||
```javascript
|
||||
queryAllTournaments(client, options)
|
||||
// Query pending, in_progress, and ended states
|
||||
```
|
||||
|
||||
### Convenience Functions
|
||||
```javascript
|
||||
queryUserTournaments(client, options)
|
||||
queryCommunityTournaments(client, communityId, options)
|
||||
queryActiveTournaments(client, options) // pending + in_progress
|
||||
queryCompletedTournaments(client, options) // ended only
|
||||
queryTournamentsByStates(client, states, options) // custom states
|
||||
```
|
||||
|
||||
## Git Commit
|
||||
|
||||
All changes committed in a single commit:
|
||||
|
||||
```
|
||||
feat: implement multi-state tournament querying for Challonge API v2.1
|
||||
- Add tournament-query.js utility with 5 convenience functions
|
||||
- Update ChallongeTest.vue to use new multi-state queries
|
||||
- Add comprehensive TOURNAMENT_QUERY_GUIDE.md documentation
|
||||
```
|
||||
|
||||
## Next Steps (Optional Enhancements)
|
||||
|
||||
1. **Global Pagination** - Paginate across combined results, not per-state
|
||||
2. **Filtering** - Filter tournaments by score, size, etc. after combining
|
||||
3. **Sorting** - Sort across all states by various criteria
|
||||
4. **Caching** - Cache per-state results with expiry for performance
|
||||
5. **Community Tournaments** - Extend to include community tournaments with `includeCommunities` flag
|
||||
|
||||
## Summary
|
||||
|
||||
The invalid `state: 'all'` parameter has been completely replaced with a robust multi-state querying system. The application now correctly fetches tournaments from all three valid states using parallel API calls and returns them as a single combined result set, all while maintaining the same user interface and experience.
|
||||
@@ -1,355 +0,0 @@
|
||||
# Challonge OAuth Setup Guide
|
||||
|
||||
Complete guide to implementing OAuth authentication for Challonge API v2.1 APPLICATION scope.
|
||||
|
||||
## Quick Start
|
||||
|
||||
### Development Setup (5 minutes)
|
||||
|
||||
1. **Register OAuth Application**
|
||||
- Visit https://connect.challonge.com
|
||||
- Create new application
|
||||
- Set redirect URI: `http://localhost:5173/oauth/callback`
|
||||
- Note your Client ID and Client Secret
|
||||
|
||||
2. **Configure Environment**
|
||||
```bash
|
||||
cp .env.example .env
|
||||
```
|
||||
|
||||
Edit `.env`:
|
||||
```bash
|
||||
# Frontend (Vite variables)
|
||||
VITE_CHALLONGE_CLIENT_ID=your_client_id_here
|
||||
VITE_CHALLONGE_REDIRECT_URI=http://localhost:5173/oauth/callback
|
||||
|
||||
# Backend (OAuth Proxy)
|
||||
CHALLONGE_CLIENT_ID=your_client_id_here
|
||||
CHALLONGE_CLIENT_SECRET=your_client_secret_here
|
||||
CHALLONGE_REDIRECT_URI=http://localhost:5173/oauth/callback
|
||||
OAUTH_PROXY_PORT=3001
|
||||
```
|
||||
|
||||
3. **Install Dependencies**
|
||||
```bash
|
||||
npm install
|
||||
```
|
||||
|
||||
4. **Run Development Servers**
|
||||
```bash
|
||||
# Option 1: Run both servers with one command
|
||||
npm run dev:full
|
||||
|
||||
# Option 2: Run separately in two terminals
|
||||
# Terminal 1 - Frontend
|
||||
npm run dev
|
||||
|
||||
# Terminal 2 - OAuth Proxy
|
||||
npm run oauth-proxy
|
||||
```
|
||||
|
||||
5. **Test OAuth Flow**
|
||||
- Visit http://localhost:5173/challonge-test
|
||||
- Click "Connect with OAuth"
|
||||
- Authorize the app on Challonge
|
||||
- You'll be redirected back with tokens
|
||||
- Now you can use APPLICATION scope!
|
||||
|
||||
## Architecture
|
||||
|
||||
```
|
||||
┌─────────────────┐
|
||||
│ Vue Frontend │
|
||||
│ localhost:5173 │
|
||||
└────────┬────────┘
|
||||
│
|
||||
├─→ User clicks "Connect with OAuth"
|
||||
│ Redirect to Challonge authorization URL
|
||||
│
|
||||
├─→ User authorizes on Challonge
|
||||
│ Redirect back to /oauth/callback?code=xxx&state=yyy
|
||||
│
|
||||
├─→ Frontend calls /api/oauth/token
|
||||
│
|
||||
┌────────▼────────┐
|
||||
│ OAuth Proxy │
|
||||
│ localhost:3001 │
|
||||
└────────┬────────┘
|
||||
│
|
||||
├─→ Exchange code for tokens (includes client_secret)
|
||||
│ POST https://api.challonge.com/oauth/token
|
||||
│
|
||||
└─→ Return tokens to frontend
|
||||
Frontend stores in localStorage
|
||||
Creates v2.1 client with Bearer token
|
||||
```
|
||||
|
||||
## Files Created
|
||||
|
||||
### Backend
|
||||
- **server/oauth-proxy.js** - Express server for OAuth token exchange
|
||||
- `/oauth/token` - Exchange authorization code
|
||||
- `/oauth/refresh` - Refresh expired tokens
|
||||
- `/health` - Health check endpoint
|
||||
|
||||
### Frontend
|
||||
- **src/composables/useChallongeOAuth.js** - OAuth state management
|
||||
- Token storage and retrieval
|
||||
- Authorization URL generation
|
||||
- Automatic token refresh
|
||||
- CSRF protection
|
||||
|
||||
- **src/views/OAuthCallback.vue** - OAuth redirect handler
|
||||
- Processes authorization callback
|
||||
- Displays loading/success/error states
|
||||
- Auto-redirects to Challonge Test
|
||||
|
||||
### Configuration
|
||||
- **vite.config.js** - Added `/api/oauth` proxy
|
||||
- **src/router/index.js** - Added `/oauth/callback` route
|
||||
- **package.json** - Added dependencies and scripts
|
||||
- **.env.example** - OAuth configuration template
|
||||
|
||||
## Environment Variables
|
||||
|
||||
### Frontend (Vite - PUBLIC)
|
||||
```bash
|
||||
VITE_CHALLONGE_CLIENT_ID=xxx # OAuth Client ID (public)
|
||||
VITE_CHALLONGE_REDIRECT_URI=xxx # Callback URL
|
||||
```
|
||||
|
||||
### Backend (OAuth Proxy - PRIVATE)
|
||||
```bash
|
||||
CHALLONGE_CLIENT_ID=xxx # OAuth Client ID
|
||||
CHALLONGE_CLIENT_SECRET=xxx # OAuth Client Secret (NEVER expose)
|
||||
CHALLONGE_REDIRECT_URI=xxx # Must match registered URL
|
||||
OAUTH_PROXY_PORT=3001 # Proxy server port
|
||||
```
|
||||
|
||||
### Production (Optional)
|
||||
```bash
|
||||
NODE_ENV=production
|
||||
FRONTEND_URL=https://yourdomain.com
|
||||
```
|
||||
|
||||
## Production Deployment
|
||||
|
||||
### Option 1: Express Server (Simple)
|
||||
|
||||
Deploy `server/oauth-proxy.js` to:
|
||||
- Heroku
|
||||
- Railway
|
||||
- DigitalOcean App Platform
|
||||
- AWS EC2/ECS
|
||||
|
||||
Update production `.env`:
|
||||
```bash
|
||||
NODE_ENV=production
|
||||
FRONTEND_URL=https://yourdomain.com
|
||||
CHALLONGE_CLIENT_ID=xxx
|
||||
CHALLONGE_CLIENT_SECRET=xxx
|
||||
CHALLONGE_REDIRECT_URI=https://yourdomain.com/oauth/callback
|
||||
PORT=3000
|
||||
```
|
||||
|
||||
Update frontend build environment:
|
||||
```bash
|
||||
VITE_CHALLONGE_CLIENT_ID=xxx
|
||||
VITE_CHALLONGE_REDIRECT_URI=https://yourdomain.com/oauth/callback
|
||||
```
|
||||
|
||||
### Option 2: Serverless Functions (Scalable)
|
||||
|
||||
Convert `server/oauth-proxy.js` to serverless functions:
|
||||
|
||||
**Netlify Functions** (`netlify/functions/oauth-token.js`):
|
||||
```javascript
|
||||
import fetch from 'node-fetch';
|
||||
|
||||
export async function handler(event) {
|
||||
if (event.httpMethod !== 'POST') {
|
||||
return { statusCode: 405, body: 'Method Not Allowed' };
|
||||
}
|
||||
|
||||
const { code } = JSON.parse(event.body);
|
||||
|
||||
const response = await fetch('https://api.challonge.com/oauth/token', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
|
||||
body: new URLSearchParams({
|
||||
grant_type: 'authorization_code',
|
||||
client_id: process.env.CHALLONGE_CLIENT_ID,
|
||||
client_secret: process.env.CHALLONGE_CLIENT_SECRET,
|
||||
code: code,
|
||||
redirect_uri: process.env.CHALLONGE_REDIRECT_URI,
|
||||
}),
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
return {
|
||||
statusCode: response.status,
|
||||
body: JSON.stringify(data),
|
||||
};
|
||||
}
|
||||
```
|
||||
|
||||
**Vercel Functions** (`api/oauth/token.js`):
|
||||
```javascript
|
||||
import fetch from 'node-fetch';
|
||||
|
||||
export default async function handler(req, res) {
|
||||
if (req.method !== 'POST') {
|
||||
return res.status(405).json({ error: 'Method Not Allowed' });
|
||||
}
|
||||
|
||||
const { code } = req.body;
|
||||
|
||||
const response = await fetch('https://api.challonge.com/oauth/token', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
|
||||
body: new URLSearchParams({
|
||||
grant_type: 'authorization_code',
|
||||
client_id: process.env.CHALLONGE_CLIENT_ID,
|
||||
client_secret: process.env.CHALLONGE_CLIENT_SECRET,
|
||||
code: code,
|
||||
redirect_uri: process.env.CHALLONGE_REDIRECT_URI,
|
||||
}),
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
res.status(response.status).json(data);
|
||||
}
|
||||
```
|
||||
|
||||
### Option 3: Cloudflare Workers (Edge)
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
async fetch(request, env) {
|
||||
if (request.method !== 'POST') {
|
||||
return new Response('Method Not Allowed', { status: 405 });
|
||||
}
|
||||
|
||||
const { code } = await request.json();
|
||||
|
||||
const response = await fetch('https://api.challonge.com/oauth/token', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
|
||||
body: new URLSearchParams({
|
||||
grant_type: 'authorization_code',
|
||||
client_id: env.CHALLONGE_CLIENT_ID,
|
||||
client_secret: env.CHALLONGE_CLIENT_SECRET,
|
||||
code: code,
|
||||
redirect_uri: env.CHALLONGE_REDIRECT_URI,
|
||||
}),
|
||||
});
|
||||
|
||||
return response;
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
## Security Best Practices
|
||||
|
||||
### ✅ DO
|
||||
- Store client_secret ONLY on backend (never in frontend)
|
||||
- Use HTTPS in production
|
||||
- Validate state parameter for CSRF protection
|
||||
- Store tokens in localStorage (XSS protection via CSP)
|
||||
- Set appropriate token expiration
|
||||
- Implement token refresh before expiration
|
||||
- Use environment variables for secrets
|
||||
|
||||
### ❌ DON'T
|
||||
- Never commit `.env` to version control
|
||||
- Never expose client_secret in frontend code
|
||||
- Never log tokens in production
|
||||
- Don't use OAuth without SSL in production
|
||||
- Don't store tokens in cookies (CSRF risk)
|
||||
|
||||
## Testing
|
||||
|
||||
### Test OAuth Flow
|
||||
1. Start both servers: `npm run dev:full`
|
||||
2. Visit http://localhost:5173/challonge-test
|
||||
3. Click "Connect with OAuth"
|
||||
4. Should redirect to Challonge
|
||||
5. Authorize the app
|
||||
6. Should redirect back to callback
|
||||
7. Should see success message
|
||||
8. Should redirect to Challonge Test
|
||||
9. OAuth status should show "Connected"
|
||||
10. Try listing tournaments with "Show all tournaments" checked
|
||||
|
||||
### Test Token Refresh
|
||||
```javascript
|
||||
// In browser console after connecting
|
||||
const { refreshToken } = useChallongeOAuth();
|
||||
await refreshToken(); // Should refresh token
|
||||
```
|
||||
|
||||
### Test Logout
|
||||
```javascript
|
||||
// In browser console
|
||||
const { logout } = useChallongeOAuth();
|
||||
logout(); // Should clear tokens
|
||||
```
|
||||
|
||||
## Troubleshooting
|
||||
|
||||
### "Missing required environment variables"
|
||||
- Check `.env` file exists in project root
|
||||
- Verify `CHALLONGE_CLIENT_ID` and `CHALLONGE_CLIENT_SECRET` are set
|
||||
- Restart OAuth proxy after changing `.env`
|
||||
|
||||
### "Invalid state parameter"
|
||||
- Clear browser storage and try again
|
||||
- Verify redirect URI matches exactly
|
||||
|
||||
### "Token exchange failed"
|
||||
- Check client ID and secret are correct
|
||||
- Verify redirect URI matches registered URL exactly
|
||||
- Check OAuth proxy is running on port 3001
|
||||
- Look at OAuth proxy console for error details
|
||||
|
||||
### "CORS errors"
|
||||
- Verify Vite proxy is configured correctly
|
||||
- Check OAuth proxy CORS settings
|
||||
- Ensure frontend URL is allowed in production
|
||||
|
||||
### "Token expired"
|
||||
- Token should auto-refresh when needed
|
||||
- Manually refresh: `useChallongeOAuth().refreshToken()`
|
||||
- If refresh fails, user must re-authenticate
|
||||
|
||||
## API Scopes
|
||||
|
||||
Available scopes for Challonge OAuth:
|
||||
|
||||
- `tournaments:read` - Read tournament data
|
||||
- `tournaments:write` - Create/update tournaments
|
||||
- `participants:read` - Read participant data
|
||||
- `participants:write` - Manage participants
|
||||
- `matches:read` - Read match data
|
||||
- `matches:write` - Update match results
|
||||
- `user:read` - Read user profile
|
||||
|
||||
Default scope in app: `tournaments:read tournaments:write`
|
||||
|
||||
## Next Steps
|
||||
|
||||
1. ✅ Basic OAuth flow working
|
||||
2. ✅ Token storage and refresh
|
||||
3. ✅ APPLICATION scope access
|
||||
4. 🔄 Add scope selector in UI (optional)
|
||||
5. 🔄 Implement token refresh UI indicator
|
||||
6. 🔄 Add "time until expiration" display
|
||||
7. 🔄 Deploy to production
|
||||
8. 🔄 Add more scopes as needed
|
||||
|
||||
## Support
|
||||
|
||||
- Challonge API Docs: https://challonge.apidog.io
|
||||
- OAuth 2.0 Spec: https://oauth.net/2/
|
||||
- Register Apps: https://connect.challonge.com
|
||||
Reference in New Issue
Block a user