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

# 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)

: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

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 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 - 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 - CSS implementation details

  • Component class reference
  • CSS variables documentation
  • Responsive design guide
  • Customization instructions

• APP_RESTRUCTURE_BLUEPRINT.md - Architecture proposal

  • Current vs. proposed structure
  • New directory organization
  • Feature implementation guide
  • Module responsibilities

• 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