Arena IDE & Dashboard UI
Relevant source files
The following files were used as context for generating this wiki page:
The Arena IDE and Dashboard UI constitute the primary user interface for the Debug Arena platform. The Dashboard acts as a central hub for team progression, displaying available levels and current scores, while the Arena IDE provides a specialized, proctored environment for writing and executing Python code to solve debugging challenges.
These components are designed for high-pressure competitive environments, incorporating real-time feedback, automated evaluation, and strict anti-cheat enforcement through full-screen monitoring and tab-switch detection.
Sources: README.md:10-18, templates/index.html:15-18
Arena Dashboard
The Dashboard serves as the entry point for authenticated teams. It dynamically renders a list of levels based on the level_manager and the team's current progress.
Progression and Locking Logic
The UI visualizes three states for each level card:
- Completed: Levels the team has already passed (current level > level ID).
- Active Now: The specific level the team is currently assigned to (current level == level ID).
- System Encrypted: Locked levels that the team has not yet reached (current level < level ID).
Sources: templates/dashboard.html:43-52, routes/arena_routes.py:12-40
Dashboard Components
| Component | Description | Source |
|---|---|---|
| Score Header | Displays the team name, college, and real-time total score. | templates/dashboard.html:31-41 |
| Level Cards | Individual containers showing level name, difficulty, and status. | templates/dashboard.html:43-98 |
| Secure Initialization | An overlay requiring users to enter Fullscreen mode before starting. | templates/dashboard.html:4-21 |
Dashboard State Transition
The following flowchart represents the logic used to determine level accessibility within the Dashboard:
Arena IDE
The Arena IDE (templates/arena.html) is a specialized code editor interface where participants perform the actual debugging tasks. It integrates the CodeMirror editor to provide a professional coding experience within the browser.
Key Functional Sections
- Code Editor: A syntax-highlighted editor using the Dracula theme for Python code entry.
- Terminal Output: A real-time console that displays the results of code execution or error messages.
- Goal Panel: Shows the specific string output the participant must produce to clear the level.
- Timer: Tracks elapsed time since the level was entered to calculate time-based penalties.
Sources: templates/arena.html:48-73, templates/arena.html:152-167
Integrated Hint System (The Oracle)
The IDE includes a modal-based hint system. Accessing a hint triggers a specific API call that updates the UI and flags the session for a score penalty.
Proctoring & Security Layer
A critical aspect of the Arena UI is the proctoring system implemented in proctor.js. This script monitors user behavior to prevent external assistance or tab switching.
Violation Detection Logic
The system monitors two primary browser events:
fullscreenchange: Triggered if the user attempts to exit the mandatory full-screen mode.visibilitychange: Triggered if the user switches tabs or minimizes the window.
When a violation occurs, the system increments a counter in the database via the /log_violation endpoint. If the counter reaches 3, the UI immediately redirects the user to the /disqualified page.
Sources: static/js/proctor.js:63-75, routes/arena_routes.py:106-125
Security Enforcement Flow
Technical Implementation Details
API Endpoints for UI Interaction
| Endpoint | Method | Purpose |
|---|---|---|
/run_code/<int:level_id> | POST | Executes the editor content and returns success/failure relative to expected output. |
/get_hint/<int:level_id> | POST | Retrieves the hint text for the level and records the penalty flag. |
/log_violation | POST | Persists a security violation (e.g., tab_switch) to the team's record. |
Sources: routes/submit_routes.py:10, routes/arena_routes.py:83, routes/arena_routes.py:106
UI Configuration Snippet
The IDE utilizes CodeMirror for the editor interface, configured for Python:
const editor = CodeMirror.fromTextArea(document.getElementById("code-editor"), {
mode: "python",
theme: "dracula",
lineNumbers: true,
indentUnit: 4,
autoCloseBrackets: true
});
Sources: templates/arena.html:147-153
Summary
The Arena IDE and Dashboard UI provide a cohesive environment that balances developer experience with strict competitive integrity. By combining modern front-end libraries like CodeMirror and Tailwind CSS with a JavaScript-driven proctoring layer, the system ensures that participants focus purely on debugging logic while operating within a secure, controlled contest environment. The dynamic dashboard and real-time terminal feedback provide the necessary UX loops for a fast-paced coding challenge.
Sources: README.md:28-44, templates/base.html:12-28