# 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