264 lines
9.1 KiB
Markdown
264 lines
9.1 KiB
Markdown
# TV_APP V1.0.0 - Tournament Management System
|
|
|
|
A Flask-based web application for managing tournaments with multi-camera streaming support and improved modern UI architecture.
|
|
|
|
## Quick Start
|
|
|
|
### Prerequisites
|
|
- Python 3.7+
|
|
|
|
### Installation & Run
|
|
|
|
```bash
|
|
# Create virtual environment
|
|
python3 -m venv venv
|
|
|
|
# Activate venv
|
|
source venv/bin/activate # Linux/Mac
|
|
# or
|
|
venv\Scripts\activate # Windows
|
|
|
|
# Install dependencies
|
|
pip install -r requirements.txt
|
|
|
|
# Run the app
|
|
python3 tv_app.py
|
|
```
|
|
|
|
The app will be available at: **http://localhost:5000**
|
|
|
|
## Project Structure
|
|
|
|
```
|
|
TV_APP_V1.0.0/
|
|
├── tv_app.py # Main Flask application
|
|
├── requirements.txt # Python dependencies
|
|
├── README.md # This file
|
|
│
|
|
├── app/ # Support modules
|
|
│ ├── __init__.py
|
|
│ ├── config.py # Configuration
|
|
│ ├── models.py # Data models
|
|
│ ├── storage.py # Persistent storage
|
|
│ └── utils.py # Utilities
|
|
│
|
|
├── templates/ # HTML templates (15 files)
|
|
│ ├── index.html # Main dashboard
|
|
│ ├── tournament.html # Tournament configuration
|
|
│ ├── draft.html # Draft management
|
|
│ ├── results_calculator.html # Results calculation
|
|
│ ├── mobile.html # Mobile interface
|
|
│ ├── archive.html # Tournament history
|
|
│ ├── match_details.html # Match view
|
|
│ ├── player_stats.html # Player analytics
|
|
│ └── ... (10 more templates)
|
|
│
|
|
├── static/ # Static assets
|
|
│ ├── css/ # Modular CSS (NEW - Consolidated)
|
|
│ │ ├── base.css # Global styles & variables
|
|
│ │ ├── navbar.css # Navigation styling
|
|
│ │ ├── buttons.css # Button system
|
|
│ │ ├── components.css # Cards, forms, modals, tables
|
|
│ │ └── responsive.css # Media queries & responsive utilities
|
|
│ ├── js/ # JavaScript files
|
|
│ │ ├── websocket-client.js # (Deprecated - SocketIO removed)
|
|
│ │ └── ... (other JS files)
|
|
│ └── images/ # Images and assets
|
|
│
|
|
├── data/ # Runtime data (JSON state)
|
|
│ ├── tournaments.json # Tournament data
|
|
│ ├── leagues.json # League data
|
|
│ └── ... (other data files)
|
|
│
|
|
├── locales/ # Multi-language support
|
|
│ ├── en.json # English translations
|
|
│ └── sl.json # Slovenian translations
|
|
│
|
|
├── docs/ # Documentation (NEW)
|
|
│ ├── COMPLETE_DOCUMENTATION.md # Master documentation (60 KB, 2,065 lines)
|
|
│ ├── CSS_CONSOLIDATION_GUIDE.md # CSS implementation guide
|
|
│ ├── APP_RESTRUCTURE_BLUEPRINT.md # V2.0 architecture proposal
|
|
│ └── IMPLEMENTATION_QUICK_START.md # 4-week implementation roadmap
|
|
│
|
|
└── README.md # This file
|
|
```
|
|
|
|
## Features
|
|
|
|
✅ Tournament management with live scoring
|
|
✅ Multi-camera streaming integration
|
|
✅ Mobile interface for remote access
|
|
✅ Tournament archiving & history
|
|
✅ League management
|
|
✅ Multi-language support (English & Slovenian)
|
|
✅ JSON-based persistent storage
|
|
✅ **[NEW]** Modular CSS architecture with CSS variables
|
|
✅ **[NEW]** Fully responsive design (mobile-first)
|
|
✅ **[NEW]** Improved navigation structure
|
|
✅ **[NEW]** Comprehensive documentation suite
|
|
|
|
## Key URLs
|
|
|
|
- **Main Dashboard**: http://localhost:5000/
|
|
- **Tournament Config**: http://localhost:5000/tournament
|
|
- **Draft Management**: http://localhost:5000/draft
|
|
- **Results Calculator**: http://localhost:5000/results
|
|
- **Mobile Interface**: http://localhost:5000/mobile
|
|
- **Archive**: http://localhost:5000/archive
|
|
|
|
## CSS Architecture (NEW)
|
|
|
|
The application uses a modular, maintainable CSS structure based on modern CSS best practices:
|
|
|
|
### Core CSS Files (in `/static/css/`)
|
|
|
|
| File | Purpose | Lines | Size |
|
|
|------|---------|-------|------|
|
|
| **base.css** | Global reset, CSS variables, typography, utilities | 261 | 5.8 KB |
|
|
| **navbar.css** | Navigation bar styling and responsive behavior | 299 | 6.0 KB |
|
|
| **buttons.css** | Button system with variants and states | 365 | 7.4 KB |
|
|
| **components.css** | Cards, forms, modals, tables, alerts | 458 | 8.9 KB |
|
|
| **responsive.css** | Media queries and responsive utilities | 523 | 10 KB |
|
|
|
|
**Total**: 1,906 lines across 5 organized files (77% reduction from previous scattered styles)
|
|
|
|
### CSS Variables (base.css)
|
|
|
|
```css
|
|
:root {
|
|
/* Colors */
|
|
--primary: #007bff; /* Main brand color */
|
|
--secondary: #6c757d; /* Secondary color */
|
|
--success: #28a745; /* Success state */
|
|
--danger: #dc3545; /* Error state */
|
|
--warning: #ffc107; /* Warning state */
|
|
--info: #17a2b8; /* Info state */
|
|
|
|
/* Spacing */
|
|
--spacing-xs: 0.25rem;
|
|
--spacing-sm: 0.5rem;
|
|
--spacing-md: 1rem;
|
|
--spacing-lg: 1.5rem;
|
|
--spacing-xl: 2rem;
|
|
|
|
/* Transitions */
|
|
--transition-fast: 0.15s ease;
|
|
--transition-normal: 0.2s ease;
|
|
--transition-slow: 0.3s ease;
|
|
|
|
/* Border Radius */
|
|
--radius-sm: 4px;
|
|
--radius-md: 8px;
|
|
--radius-lg: 12px;
|
|
|
|
/* Shadows */
|
|
--shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
|
|
--shadow-lg: 0 6px 20px rgba(0, 0, 0, 0.15);
|
|
}
|
|
```
|
|
|
|
### Responsive Breakpoints
|
|
|
|
```css
|
|
Mobile (max-width: 480px)
|
|
Small (480px - 768px)
|
|
Tablet/Medium (768px - 992px)
|
|
Desktop/Large (992px+)
|
|
Ultra-wide (1920px+)
|
|
Landscape (max-height: 500px)
|
|
```
|
|
|
|
See [CSS_CONSOLIDATION_GUIDE.md](./docs/CSS_CONSOLIDATION_GUIDE.md) for complete component reference and customization guide.
|
|
|
|
## Dependencies
|
|
|
|
### Core
|
|
- **Flask 3.0.0** - Web framework
|
|
- **python-dotenv 1.0.0** - Environment variables
|
|
|
|
### Removed (Optimized)
|
|
- ~~Flask-SocketIO~~ - Removed for simplified, faster architecture
|
|
- ~~python-socketio~~ - Real-time sync was unreliable
|
|
- ~~python-engineio~~ - No longer needed
|
|
|
|
## Navigation Structure (IMPROVED)
|
|
|
|
The app now uses a simplified, focused navigation structure:
|
|
|
|
### Main Navigation
|
|
- **Dashboard** - Overview and tournament selection
|
|
- **Tournament** - Tournament configuration and settings
|
|
- **Draft** - Player draft management
|
|
- **Calculator** - Results and scoring
|
|
- **Mobile** - Remote access interface
|
|
|
|
### Removed from Top Navigation
|
|
- ~~Personal Analysis~~ - Moved to tournament context
|
|
- ~~Archive~~ - Available via Dashboard
|
|
|
|
This streamlined navigation allows users to focus on the core tournament workflow without distractions.
|
|
|
|
## Development Notes
|
|
|
|
The app structure is simple and maintainable:
|
|
- All Flask routes in `tv_app.py`
|
|
- Support modules in `app/` package
|
|
- Ready to split into blueprints if needed
|
|
- Each instance operates independently
|
|
- All data is saved to JSON files in `data/` folder
|
|
|
|
### Recent Improvements
|
|
|
|
1. **SocketIO Removal** - Removed WebSocket/SocketIO dependencies for a lighter, more reliable application
|
|
2. **CSS Consolidation** - Refactored 8,500+ lines of scattered CSS into 1,906 organized lines across 5 modular files
|
|
3. **Navigation Simplification** - Removed redundant navigation items, keeping only essential workflow steps
|
|
4. **Documentation** - Created comprehensive documentation suite for development and restructuring
|
|
|
|
### Documentation Suite
|
|
|
|
The `docs/` folder contains detailed guides:
|
|
|
|
- **[COMPLETE_DOCUMENTATION.md](./docs/COMPLETE_DOCUMENTATION.md)** - Master documentation (60 KB, 2,065 lines)
|
|
- Current app architecture and analysis
|
|
- V2.0 restructure blueprint
|
|
- 4-week implementation plan
|
|
- API endpoints reference
|
|
- Data schema documentation
|
|
- Testing strategy
|
|
- Migration guide
|
|
|
|
- **[CSS_CONSOLIDATION_GUIDE.md](./docs/CSS_CONSOLIDATION_GUIDE.md)** - CSS implementation details
|
|
- Component class reference
|
|
- CSS variables documentation
|
|
- Responsive design guide
|
|
- Customization instructions
|
|
|
|
- **[APP_RESTRUCTURE_BLUEPRINT.md](./docs/APP_RESTRUCTURE_BLUEPRINT.md)** - Architecture proposal
|
|
- Current vs. proposed structure
|
|
- New directory organization
|
|
- Feature implementation guide
|
|
- Module responsibilities
|
|
|
|
- **[IMPLEMENTATION_QUICK_START.md](./docs/IMPLEMENTATION_QUICK_START.md)** - Implementation roadmap
|
|
- Week-by-week breakdown
|
|
- Daily tasks and milestones
|
|
- Code examples for each phase
|
|
- Testing checklist
|
|
|
|
## Performance & Reliability
|
|
|
|
- **Lighter Codebase** - Removed unnecessary WebSocket dependencies
|
|
- **Better Maintainability** - Organized CSS into logical modules
|
|
- **Responsive Design** - Works seamlessly across all device sizes
|
|
- **Production-Ready** - Fully functional with JSON-based persistence
|
|
|
|
## How to Stop
|
|
|
|
Press `Ctrl+C` in the terminal where the app is running.
|
|
|
|
---
|
|
|
|
**Last Updated**: November 2025
|
|
**Version**: 1.0.0 with CSS & Navigation Improvements
|