# 🎯 Judge Panel Layout Control System

## 📊 Component Visibility Configuration

### Event 1 - Full Layout

✅ format-info
✅ participant-selection
✅ other-heat-scores
✅ criteria-input-grid
✅ final-calculated-score
✅ figures-card
✅ diversity-validation
✅ latest-scores
✅ figure-history
✅ submit-button

Result: Complete judge interface with all 10 components

### Event 3 - Minimal Layout

❌ format-info
✅ participant-selection
❌ other-heat-scores
❌ criteria-input-grid
✅ final-calculated-score
❌ figures-card
❌ diversity-validation
❌ latest-scores
❌ figure-history
✅ submit-button

Result: Streamlined interface with only 3 essential components

### Event 1 - Full Layout (All Components)

### Event 3 - Minimal Layout (Essential Only)

### 🔧 How It Works

1. Database Storage: Layout configurations are stored in `events.scoring_layout_config` JSON column
2. PHP Conditions: Each judge panel section checks the configuration:

       <?php if (!$scoring_layout_config || ($scoring_layout_config['component-name'] ?? true)): ?>
           <!-- Component HTML here -->
       <?php endif; ?>

3. JavaScript Enhancement: Additional client-side show/hide for dynamic control
4. Graceful Degradation: If no config exists, all components are shown (default behavior)

### ⚡ Performance Benefits

- Reduced HTML Size: Hidden components aren't rendered at all (server-side hiding)
- Faster Loading: Less DOM elements means faster page rendering
- Focused UX: Judges see only what's relevant for their event type
- Bandwidth Savings: Minimal layouts use significantly less data

### 🧪 Direct Test Links

🟢 Event 1 - Full Layout 🔴 Event 3 - Minimal Layout