⚡ SyntaxArena

  ███████╗██╗   ██╗███╗   ██╗████████╗ █████╗ ██╗  ██╗ █████╗ ██████╗ ███████╗███╗   ██╗ █████╗ 
  ██╔════╝╚██╗ ██╔╝████╗  ██║╚══██╔══╝██╔══██╗╚██╗██╔╝██╔══██╗██╔══██╗██╔════╝████╗  ██║██╔══██╗
  ███████╗ ╚████╔╝ ██╔██╗ ██║   ██║   ███████║ ╚███╔╝ ███████║██████╔╝█████╗  ██╔██╗ ██║███████║
  ╚════██║  ╚██╔╝  ██║╚██╗██║   ██║   ██╔══██║ ██╔██╗ ██╔══██║██╔══██╗██╔══╝  ██║╚██╗██║██╔══██║
  ███████║   ██║   ██║ ╚████║   ██║   ██║  ██║██╔╝ ██╗██║  ██║██║  ██║███████╗██║ ╚████║██║  ██║
  ╚══════╝   ╚═╝   ╚═╝  ╚═══╝   ╚═╝   ╚═╝  ╚═╝╚═╝  ╚═╝╚═╝  ╚═╝╚═╝  ╚═╝╚══════╝╚═╝  ╚═══╝╚═╝  ╚═╝

The Ultimate Browser-Native Cyberpunk Coding Arcade & Interactive Learning Engine

Zero Servers • Zero Dependencies • 100% Client-Side • Runs Directly in Any Modern Web Browser

🚀 Quick Start • ✨ Key Features • ⚔️ 1v1 SyntaxDuel • 👾 Mega-Boss Battles • 🕹️ Arena & Ghost Duel • 🔐 Stealth Admin & Curriculum Studio • 📅 Daily Gauntlet • 🔬 Visual Memory Inspector • 💻 Multi-Language Sandbox • 🎓 Cyber Academy • 🧪 Testing

🌐 Overview

SyntaxArena is a state-of-the-art, browser-native programming game, interactive code sandbox, and computer science learning platform built entirely with HTML5, Modern CSS, and Vanilla JavaScript.

Designed for software engineers, computer science students, and cybersecurity researchers, SyntaxArena combines fast-paced gamified quizzes with deep conceptual code evaluation. Practice syntax, isolate bugs, race against autonomous ghost duels, evaluate 64-bit stack and heap allocations in real-time, execute code in 8 sandboxed environments, and earn verifiable graduation certificates—all inside the browser with zero external server dependencies.

✨ Features Overview

graph TD
    A[⚡ SyntaxArena Core] --> B[🕹️ Arena Game Engine]
    A --> C[🔬 Visual Memory Inspector]
    A --> D[💻 Multi-Language Sandbox]
    A --> E[🎓 Cyber Academy]
    A --> F[📅 Daily Hacker Gauntlet]
    A --> G[📊 Career Analytics & Progression]

    B --> B1[Ghost Speed Duel 👻]
    B --> B2[4 Interactive Mechanics]
    B --> B3[Procedural Audio Synth]

    C --> C1[Stack Frame Visualizer]
    C --> C2[Heap Block Allocation]
    C --> C3[Neon Pointer Hover Links]

    D --> D1[Python 3.10 Skulpt WASM]
    D --> D2[TypeScript 5.4+ Transpiler]
    D --> D3[Go 1.22+ Channels & Defer]
    D --> D4[SQL Engine & Cyber VFS Shell]

    E --> E1[60 Curriculum Modules]
    E --> E2[Interactive Code Runner]
    E --> E3[Printable & Verifiable Diplomas]

    F --> F1[7-Day Punch Card Matrix]
    F --> F2[Mulberry32 Deterministic Seed]
    F --> F3[Hex Dragon Avatar Jackpot]

💎 Core Architectural Pillars

⚡ Pure Vanilla & Zero Runtime Dependencies: Built with pure web standards. Zero backend servers, zero databases, and zero npm runtime dependencies.
🌐 Universal Portability: Double-click index.html to run locally via file:///, or host on any static platform (GitHub Pages, Vercel, Netlify, Cloudflare Pages, or Nginx).
🔒 100% Private & Air-Gapped: All data, settings, career metrics, and avatar unlocks remain isolated inside browser localStorage. Zero telemetry, zero analytics tracking, and zero remote data harvesting.
🎨 Rich Cyberpunk Visual Design: Glassmorphic cards, glowing neon palettes, responsive layouts, customizable themes, and an in-app Reduced Motion accessibility mode.

🕹️ Arcade Arena & Asynchronous Ghost Racing

In the Arena (game.html), test your syntax comprehension, code reading speed, and debugging acumen under high-stakes timed conditions.

🏁 Asynchronous Ghost Racing / Speed Duel Mode

Race against an autonomous rival racer, CyberPhantom (👻), in real-time!

Dual Speed Rail HUD: Visual progress track comparing your current question progress against the ghost's pace.
Dynamic Split Timing Badge: Real-time relative pace calculation:
- 🟢 .is-ahead: ⚡ +X.Xs AHEAD (Emerald Green)
- 🔴 .is-behind: ⚠️ -X.Xs BEHIND (Danger Coral)
- ⚪ .is-even: ⚖️ EVEN PACE
Calibrated Pacing Engine: Difficulty-tailored baseline timing (Beginner: 8.5s, Intermediate: 14.0s, Expert: 21.0s + deterministic jitter per question).
Victory Bonus: Defeat CyberPhantom to claim the +75 XP Speed Duel Victory Bonus displayed on your results screen (results.html).
Tactile Toggle Control: Pause or resume ghost racing anytime directly from the top HUD rail.

🎯 4 Interactive Question Mechanics

Multiple Choice (MCQ): Rapid conceptual evaluations.
Predict Output: Mentally trace code execution and predict standard stdout output.
Find the Bug: Click directly on syntax-highlighted code terminal lines to isolate the exact line causing a bug.
Fill Code: Drag or click code token chips into missing syntax slots.

⚔️ 1v1 SyntaxDuel: Peer-to-Peer & Local Arcade Mode

Challenge friends or rivals to live, head-to-head syntax coding battles! Built 100% client-side with zero external servers or backend infrastructure needed:

Zero-Server P2P Networking (DuelEngine):
- Instant room code generation (e.g. SYN-482) with 1-click clipboard invite link sharing.
- Real-time cross-tab and cross-window packet delivery over modern BroadcastChannel with LocalStorage event bridge fallback and WebRTC DataChannel packet support.
Deterministic Synchronized Seeded Shuffling:
- Uses a Mulberry32 PRNG seed derived from the match room code to guarantee that both competitors solve the exact same questions in the exact same sequence simultaneously.
Shared Keyboard Local Arcade Split Mode:
- Battle side-by-side on a single physical keyboard! Player 1 answers using keys 1, 2, 3, 4; Player 2 answers using keys 7, 8, 9, 0.
Live Split Versus HUD Bar (#hud-duel-versus-bar):
- Replaces the solo ghost rail with dual player cards (P1 Cyan vs P2 Coral).
- Central glowing VS Nexus with dynamic lead pill (.duel-delta-pill) displaying advantage telemetry (+150 PTS AHEAD, -50 PTS BEHIND, ⚡ TIED).
- Dual runner track pins (#duel-p1-pin, #duel-p2-pin) racing toward the finish line in real-time.
Sabotage Glitch Mechanic:
- Achieving a 3-streak combo triggers an instantaneous screen sabotage glitch (.duel-sabotage-glitch) and audible distress alarm on the opponent's view to break their concentration.
Versus Results Modal & Markdown Sharing (#modal-duel-results):
- Detailed head-to-head performance scorecard comparing final points, accuracy percentage, max combo streaks, and elapsed time.
- 1-click Copy Match Report button generating a clean Markdown summary table ready for Discord, Slack, or GitHub.
- 1-click Rematch button launching a fresh duel with a new deterministic seed.

🚨 CyberDrill: Incident Response & Live Outage Simulator

Step into the shoes of an on-call Site Reliability Engineer (SRE) facing catastrophic Sev-1 and Sev-2 production incidents under strict Service Level Agreements (SLAs). 100% vanilla browser-native with zero external dependencies:

8 High-Stakes Production Scenarios (data/incident-scenarios.js):
- Memory Leaks: Unbounded global list accumulation leading to Kubernetes OOM-kills.
- Mutex Deadlocks: Inverted lock acquisition causing goroutine thread starvation.
- Buffer Overflows: Unchecked network byte copies corrupting stack frames.
- Connection Leaks: Premature database pool exhaustion under high traffic loads.
- Catastrophic ReDoS: Nested backtracking regular expressions locking authentication workers.
- Use-After-Free: Dangling pointer invocations triggering heap memory corruption.
- Event Loop Lockups: Heavy synchronous crypto calls blocking Node.js/V8 I/O polling.
- Null Dereference Cascades: Unsafe unwrap panic loops across distributed microservices.
Live Fluctuating Telemetry HUD (#hud-incident-monitor):
- Real-time fluctuating metrics with organic jitter: CPU Load %, Heap RAM Usage, 5xx Error Rate %, and P99 Latency / Active TCP Connections.
- Dynamic visual status classes (.is-critical glowing coral vs .is-nominal soothing cyan/emerald).
- Smooth exponential decay down to healthy baseline metrics upon successful hotfix deployment.
Live Streaming Cloud Server Logs:
- Real-time server log tail with interactive substring filter input to isolate stack traces, OOMKilled signals, and error signatures.
2-Phase Triage Workflow:
- Phase 1 (Diagnosis): Analyze metrics, stack traces, and logs to identify the architectural root cause.
- Phase 2 (Hotfix): Select and deploy the optimal zero-downtime hotfix patch to stabilize the cluster before the SLA deadline expires.
SRE Post-Mortem Incident Report Card (#modal-incident-postmortem):
- Real-time MTTR (Mean Time to Resolution) tracking, SLA margin bonus scoring, and downtime financial cost calculation ($USD prevented).
- Complete timeline breakdown with incident detection, diagnosis, and mitigation checkpoints.
- 1-click Copy Post-Mortem MD clipboard export for incident reviews and retrospectives.

🖥️ Terminal Tycoon: Hacker Battlestation Rig & Vanity Engine

Customize your retro cyberpunk developer cockpit! Tailor your mechanical keyboard acoustic switch profile, retro CRT phosphor monitors, ambient RGB chassis underglows, and hardware milestone upgrades:

Procedural Mechanical Keyboard Audio Synthesizer (BattlestationEngine):
- 100% native Web Audio API procedural synthesis—zero audio sample files needed:
  - ⌨️ Cherry MX Blue: High-frequency crisp tactile snapshot with sharp plastic bottom-out clack.
  - 🟤 Cherry MX Brown: Dampened tactile bump with muted bottom-out acoustic thud.
  - 🏛️ IBM Buckling Spring (1984): Authentic Model M acoustic profile with hollow chassis resonance and high-tensile spring ping ring.
  - ⚡ Cyber Haptic Pulse: Futuristic sci-fi sub-bass sine drop with neon audio blip.
- System-wide integration: all UI option buttons and clicks inherit your equipped mechanical switch acoustics!
Retro CRT Phosphor Monitor Shaders:
- 🖥️ Modern Slate OLED: Pristine, pixel-perfect dark mode styling with zero raster distortion.
- 🟢 DEC VT100 Green Phosphor: Nostalgic 1978 P1 phosphor luminescence with raster scanlines, green text bloom, and subtle vignette.
- 🟠 IBM 5151 Amber Phosphor: Classic 1981 P3 warm amber phosphor monochrome with retro CRT vignette and raster persistence.
- 🔮 Cyberpunk Chromatic Aberration: High-voltage cathode ray tube with dynamic RGB channel splitting and neon edge glow.
RGB Chassis Underglow & Auras:
- ⬛ Stealth Matte: Clean minimalist styling.
- 💎 Electric Cyan Halo: Neon cyan ambient halo cast across the terminal chassis and header.
- 💜 Ultraviolet Neon Pulse: Pulsing synthwave purple underglow with breathing animation.
- 🌈 Chroma RGB Spectrum Flow: Continuously cycling 360° animated chromatic perimeter aura.
Battlestation Hardware Upgrades & Matrix Canvas:
- 🧪 Liquid Neon Coolant Loop (1,000 XP): Cryogenic fluid circulation telemetry badge.
- ⚡ Overclocked Neural Coprocessor (2,200 XP): 128-core ASIC matrix accelerator (+10% speed bonus points visual perk).
- 🎛️ Panoramic Triple-Deck Array (3,800 XP): Multi-monitor cockpit border perspective.
- 🌧️ Digital Matrix Rain Backdrop (5,000 XP): High-performance procedural HTML5 canvas falling green code glyph matrix rain.
Live Interactive Switch Tester Deck (settings.html):
- Sleek mechanical keycap deck with 4 realistic tactile 3D keycaps ([ ESC ], [ TAB ], [ SPACEBAR ], [ ENTER ↵ ]).
- Responds to mouse clicks and physical keyboard presses with realistic key travel and acoustic feedback.

👾 Daemon Incursion: Cyberpunk Mega-Boss Battles

The Daemon Incursion mode transforms code reasoning into epic multi-phase arcade boss encounters against rogue system daemons threatening memory and kernel integrity:

  [🐙 NullPointer Leviathan]  ──>  [🐉 Kernel Panic Hydra]
              │                                │
              ▼                                ▼
  [🔥 Buffer Overflow Dragon] ──>  [🦑 Deadlock Kraken]

⚔️ The 4 System Daemons

Boss Adversary	Icon	Realm	Max HP	Signature Attack	Bounty	Legendary Trophy
NullPointer Leviathan	🐙	The Heap Void	1,000 HP	Null Dereference Void (Scrambles options with SIGSEGV static)	+500 XP	🐙 `Void Breaker`
Kernel Panic Hydra	🐉	Ring 0 Chaos	1,200 HP	Ring 0 Interrupt Blast (Glitch shockwave accelerating timer)	+600 XP	🐉 `Kernel Crusher`
Buffer Overflow Dragon	🔥	The Stack Smasher	1,100 HP	Stack Smashing Blast (CRT scanline distortion & inverted frames)	+550 XP	🔥 `Stack Guardian`
Deadlock Kraken	🦑	Mutex Abyss	1,300 HP	Mutual Exclusion Lockout (Padlocks option cards with circular wait)	+650 XP	🦑 `Deadlock Dissolver`

⚡ Boss Mechanics & Combat Features

Combat Damage Scaling: Correct answers deal scaled base damage (120–220 HP) boosted by remaining timer seconds, active answer streak multipliers (up to 1.75x), and rapid deduction Critical Strikes (1.35x).
🔥 Phase 2 Overclocking: When a boss drops to $\le 50%$ HP, they enter an enraged Overclocked Phase 2 with burning neon HP bars, aggressive taunts, and amplified retaliation attacks.
⚠️ Retaliation Glitch Attacks: Incorrect answers trigger the boss's signature hardware/kernel glitch onto the DOM—firing CRT screen scanlines, glitch overlays, and option muting.
🏆 Boss Slayer Trophy Vault: Defeating a daemon permanently records the purge in your career profile, awards massive XP bounties (+500–650 XP), and unlocks exclusive hacker titles (Heap Architect, Ring 0 Overlord, Master of Canaries, Concurrency Architect).
Tactile Boss Selection Modal: Switch adversaries on the fly via the #btn-switch-boss selector modal showing defeat status badges, lore stats, and instant engagement.

🔐 Stealth Admin Vault & Curriculum Studio

SyntaxArena features an enterprise-grade administrative security suite designed for zero user clutter and absolute stealth.

🕵️‍♂️ Stealth Access Architecture (Zero Public UI Links)

To maintain a clean, distraction-free gaming environment, the administrative panel is 100% invisible across all public interfaces (no navbar links, drawer entries, or footer links). Access is strictly restricted via stealth entry gates:

Global Keyboard Hotkey: Ctrl + Shift + A (Windows/Linux) or Cmd + Shift + A (macOS) from any screen.
Mobile / Touch Stealth Gesture: 3 rapid taps within 1.5 seconds on the SyntaxArena brand emblem badge (.brand-badge).
Cyber Shell Terminal Command: Execute sudo admin, syntax-admin, or admin in the virtual Linux terminal prompt on sandbox.html.
Direct Route: Direct navigation via /admin or admin.html.

🛡️ Cryptographic Auth Gate & Brute-Force Defense

SHA-256 PBKDF2 Authentication: Authenticated with encrypted hash comparison (admin / Admin@123).
Active Security Cooldown: Automatic lockout (30-second security cooldown ticker) triggered upon 5 consecutive failed login attempts.
Ephemeral Session Guard: Session-scoped tokens in sessionStorage with automated revocation on sign-out or session expiry.

📚 Curriculum Studio (Drag-and-Drop 60-Question Packs & Cyber Academy Ingestion)

Admins can dynamically publish new curriculums directly from the browser:

Interactive Drag-and-Drop Zone: Ingest custom .json curriculum packs containing up to 60 questions (Beginner 20, Intermediate 20, Expert 20) and/or Cyber Academy interactive handbook chapters.
Pre-Flight System Check (QuestionValidator): Automated pedagogical verification analyzing schema integrity, language track validation, difficulty tier distribution, option counts, correct answer indices, and code block formatting before deployment.
Instant Dynamic Engine Broadcast: Published packs are instantly broadcast across active sessions via StorageManager, seamlessly augmenting the active Question Bank and Cyber Academy without page reloads or server restarts.
Starter JSON Template: 1-click export of sample_lesson_pack_60_questions.json with ready-to-fill schema and Go concurrency examples.
Curriculum Management Roster: View all active custom lessons, track/tier badges, and delete custom packs with instant live teardown.

📅 Daily Hacker Gauntlet & 7-Day Punch Card

Keep your skills sharp every single day with the synchronized Daily Hacker Gauntlet on the Hub (index.html).

7-Day Punch Card Matrix: Visual stamp card tracking daily completion status and rewarding active daily streaks.
Escalating Rewards Schedule:
- Day 1: +50 XP
- Day 2: +75 XP
- Day 3: +100 XP
- Day 4: +125 XP
- Day 5: +150 XP
- Day 6: +200 XP
- Day 7 Jackpot: +300 XP + Exclusive Hex Dragon Player Avatar unlock!
Deterministic Global Daily Seed: Uses a Mulberry32 hash of YYYY-MM-DD so that every coder worldwide receives the exact same daily puzzle challenge each day.
Integrated Modal Arena: 45-second round countdown timer, instant explanation panel, and victory celebration reward claiming.

🔬 Visual Memory & Pointer Inspector

Understand low-level systems programming, memory models, and reference semantics visually! Integrated into both Sandbox (sandbox.html) and Academy (learn.html).

Call Stack Frame Visualizer: Real-time stack frames displaying function scopes, local variable identifiers, data types, byte sizes, and realistic 64-bit hexadecimal memory addresses (0x7ffeeb40a120).
Heap Storage Inspector: Inspect dynamically allocated objects, slices, heap strings, and structs with explicit memory offsets (0x55a8f210c000).
Interactive Pointer Hover Links: Hovering or clicking over any pointer variable automatically highlights its referenced heap block with glowing neon borders.
Multi-Language Architecture Models: Tailored memory representations for C, C++, Rust, Go, Python, JavaScript, and TypeScript.

💻 Client-Side Sandbox & REPL

Execute, test, and debug code directly in your browser with zero server latency (sandbox.html).

Environment	Engine / Runtime	Capabilities & Features
🐍 Python 3	Skulpt WebAssembly Engine	Comprehensions, slicing, closures, recursion, dictionaries
📘 TypeScript	Native Client-Side Transpiler	Generics (`class Stack<T>`), interfaces, discriminated unions, access modifiers
🐹 Go (Golang)	Client-Side Go Simulator	Channels (`ch <- 10`, `<-ch`), `defer` LIFO execution, slices, `len`/`cap`, `fmt.Printf`
🌐 JavaScript	Sandboxed ES2024 Runtime	Closures, destructuring, array methods, async simulation
🗄️ SQL Database	Relational In-Memory Engine	`SELECT`, `WHERE`, `ORDER BY`, `LIMIT`, `COUNT(*)`, `SHOW TABLES`
🐧 Cyber & Linux	Virtual POSIX Filesystem (VFS)	Bash script engine, pipes (`cat \| grep \| wc -l`), permissions, subshells `$()`
🎨 HTML5 & CSS	DOM Parser & Layout Inspector	CSS Grid Subgrid, Cascade Layers (`@layer`), native `<dialog>`
⚙️ Assembly & RE	x86-64 / ARM64 CPU Emulator	Register tracking (`RAX`, `RBX`, `RCX`), virtual stack frames, SIB addressing
⚡ Systems Simulators	C / C++ / Java / Rust	Preprocessor macros, struct padding, substring immutability, borrow checker

🎓 Cyber Academy & Graduation Diplomas

Deepen your engineering foundations with structured curriculum modules (learn.html).

60 Deep-Dive Modules across 12 Tracks: Covering Beginner, Intermediate, and Expert levels.
3-Slide Lesson Architecture:
1. 01 Mental Model: Conceptual breakdown paired with the interactive Visual Memory Inspector.
2. 02 Practice Drill: Zero-stress sandbox code editor with live execution feedback.
3. 03 Pitfalls & Edge Cases: Common misconceptions, anti-patterns, and standard compliance traps.
Live Code Runner: Run and verify code examples right inside lesson slides.
Graduation Diplomas: Completing all modules in a track issues an official, verifiable certificate complete with unique verification serial IDs (SA-CERT-PY-88A92), issue timestamps, and instant PDF/Print export.

📚 Complete Curriculum Tracks (12 Tracks)

Track	Icon	Focus Areas & Language Specifications	Questions	Academy Modules
Python	🐍	Python 3.10+ (Comprehensions, Generators, OOP, Dunders)	60	5 Deep-Dive Modules
C	⚡	ISO C99 (Pointers, Memory, Structs, Macros, Bitwise)	60	5 Deep-Dive Modules
C++	🚀	ISO C++20 (Templates, Smart Pointers, STL, RAII, Lambdas)	60	5 Deep-Dive Modules
Java	☕	OpenJDK 17 LTS (Streams, Records, Generics, Concurrency)	60	5 Deep-Dive Modules
Cyber & Linux	🛡️	POSIX / Bash / Security (Permissions, Quoting, Hashing, Sockets)	60	5 Deep-Dive Modules
JavaScript	🟨	ECMAScript 2024 (Event Loop, Closures, Prototypes, Async)	60	5 Deep-Dive Modules
Rust	🦀	Rust 2021 Edition (Ownership, Borrowing, Lifetimes, Traits)	60	5 Deep-Dive Modules
SQL	🗄️	ANSI / Relational (Three-Valued Logic, JOINs, Window Functions)	60	5 Deep-Dive Modules
Go	🐹	Go 1.22+ (Goroutines, Channels, Slices, Defer, Interfaces)	—	5 Deep-Dive Modules
TypeScript	📘	TypeScript 5.4+ (Generics, Type Narrowing, Discriminated Unions)	—	5 Deep-Dive Modules
HTML5 & CSS	🎨	Modern Layouts (Grid Subgrid, Flexbox, Cascade Layers, ARIA)	—	5 Deep-Dive Modules
Assembly	⚙️	x86-64 / ARM64 (Registers, Stack Frames, SIB Addressing)	—	5 Deep-Dive Modules

📊 Career Analytics & Progression

Track your developer journey across comprehensive analytical dashboards (progress.html and results.html).

Results Ring: SVG gauge calculating real-time accuracy percentages.
Weak-Area Pedagogical Recommendations: Algorithmic weak-point analysis suggesting specific targeted practice areas based on missed tags.
Historical Trend Visualization: Interactive SVG progression graph charting career accuracy over time.
Avatar Shop & Badges: Unlock 6 cyberpunk SVG avatars (terminal_owl, matrix_cat, bit_knight, hex_dragon, glitch_bot) and earn up to 20 milestone achievement badges.
Idempotent Rewards: Point allocations, first-clear bonuses, and streak bonuses are strictly idempotent and immune to page refresh exploits.

🎯 Scoring & Progression Mathematics

Scoring is mathematically deterministic and calculated by the authoritative game engine:

$$\text{Final Question Score} = (\text{Base Points} + \text{Speed Bonus} - \text{Hint Penalty}) \times \text{Streak Multiplier} \times \text{Retry Modifier}$$

1. Base Points

Beginner: $100\text{ pts}$
Intermediate: $150\text{ pts}$
Expert: $250\text{ pts}$

2. Speed Bonus (30s Timer)

$> 20\text{s}$ remaining: $+30\text{ pts}$
$10\text{--}20\text{s}$ remaining: $+20\text{ pts}$
$< 10\text{s}$ remaining: $+10\text{ pts}$

3. Streak Multiplier

1–2 Correct: $1.0\times$
3–4 Correct: $1.2\times$
5–9 Correct: $1.5\times$
10+ Correct: $2.0\times$ (Maximum cap)

4. Player Level Formula

$$\text{Level} = \lfloor \sqrt{\text{Total Career Points} / 250} \rfloor + 1$$

⌨️ Accessibility & Keyboard Shortcuts

SyntaxArena supports full keyboard accessibility and screen readers (ARIA live regions):

Key	Context	Action
`1` – `4`	Arena (`game.html`)	Select answer options 1 through 4
`H`	Arena (`game.html`)	Unlock pedagogical hint (-25 pts)
`Enter` / `Space`	Arena (`game.html`)	Submit answer / Advance to next question
`Ctrl` + `Enter`	Sandbox (`sandbox.html`)	Run active code in sandbox / REPL
`Tab`	Sandbox (`sandbox.html`)	Insert 4-space indentation
`Escape`	Modals / Dialogs	Close active modal dialog

🧪 Testing & Quality Assurance

SyntaxArena maintains a 100% pass rate across unit, integration, and Playwright end-to-end browser test suites:

# Run complete unit test suite (521 tests across 8 batches)
npm test

# Run Playwright E2E Multi-Language Sandbox tests (53 tests)
node tests/test-sandbox-languages-playwright.js

# Run Playwright E2E Daily Hacker Gauntlet tests (17 tests)
node tests/test-daily-gauntlet-playwright.js

# Run Playwright E2E Ghost Speed Duel tests (13 tests)
node tests/test-ghost-duel-playwright.js

# Run Playwright E2E Visual Memory Inspector tests (12 tests)
node tests/test-memory-inspector-playwright.js

# Run all automated suites in sequence
npm run test:all

🚀 Quick Start

Method 1: Instant Local Play (Zero Setup)

Simply double-click index.html in any web browser (Chrome, Edge, Firefox, Safari, Brave). Everything works immediately!

Method 2: Local Web Server

# Using Node (npx)
npx serve .

# Or using Python 3
python -m http.server 8080

Open http://localhost:8080 in your browser.

Method 3: One-Click Static Deployment

Deploy to GitHub Pages, Vercel, or Netlify by pointing to the repository root or the pre-compiled public/ directory.

# Build standalone bundle and sync to public/
node scripts/build-bundle.js

🗂️ Project Directory Structure

Syntax_arena/
├── index.html                 # Main Hub, Daily Gauntlet & Punch Card Matrix
├── game.html                  # Active Arena, Ghost Duel HUD Rail, Timer
├── learn.html                 # Cyber Academy, Lesson Deck, Graduation Diplomas
├── sandbox.html               # Multi-Language REPL & Visual Memory Inspector
├── results.html               # Results Ring, Topic Breakdown, Ghost Banner
├── progress.html              # Career Progression, Badges, Performance Charts
├── settings.html              # Themes, Audio Synthesizer, Profile Controls
├── admin.html                 # Stealth Administrative Security & Curriculum Studio
├── css/
│   ├── tokens.css             # Cyberpunk palette tokens, typography, shadows
│   ├── layout.css             # App shell, responsive header, grid systems
│   ├── components.css         # Tactile buttons, dropzones, punch card, memory tracer
│   └── animations.css         # Pulse keyframes, countdown alarms, reduced-motion
├── js/
│   ├── admin.js               # Admin telemetry, multi-player roster & dossier controller
│   ├── app.js                 # Global application bootstrapper & stealth access gate
│   ├── audio.js               # Web Audio API procedural sound synthesizer
│   ├── analytics.js           # Topic mastery calculations & trend curves
│   ├── answer-checker.js      # Multi-format answer validation engine
│   ├── bundle.js              # Standalone production bundle
│   ├── game-engine.js         # Authoritative game state machine & ghost duels
│   ├── gameplay.js            # Active arena UI coordinator & speed rail
│   ├── gamification.js        # XP math, streak multipliers, 20 badges
│   ├── learn.js               # Academy lesson controller & live code runner
│   ├── lesson-uploader.js     # Drag-and-drop curriculum studio & pre-flight validator
│   ├── memory-inspector.js    # Visual stack frame & heap pointer tracer
│   ├── sandbox-manager.js     # Multi-language client-side code runner & VFS
│   ├── storage.js             # LocalStorage Schema v1 with custom pack persistence
│   └── utils.js               # HTML sanitization & DOM utilities
├── data/                      # 720 verified questions + sample 60-question pack
│   └── sample-lesson-template.json # 60-question starter template pack
├── assets/                    # Procedural audio waveforms (.wav) and SVG avatars
├── scripts/
│   ├── build-bundle.js        # Production compiler & public/ sync script
│   └── generate-sample-template.js # Sample curriculum JSON pack generator
└── tests/                     # 16 Unit, QA, Viewport & Playwright E2E test suites

🛡️ Security & Privacy Architecture

Zero Tracking: No Google Analytics, no third-party trackers, no cookies.
Zero Remote Network Dependencies: All fonts, icons, avatars, and audio waveforms are bundled locally.
Safe DOM Sanitization: Strict context-aware HTML escaping (Utils.escapeHTML) across all user and curriculum inputs.

📄 License

SyntaxArena is open-source software licensed under the MIT License. Created with ❤️ for coders worldwide.

Name		Name	Last commit message	Last commit date
.agent/rules		.agent/rules
.github		.github
api/auth		api/auth
assets		assets
css		css
data		data
docs		docs
js		js
public		public
scripts		scripts
tests		tests
.gitignore		.gitignore
AUTHORS.md		AUTHORS.md
CHANGELOG.md		CHANGELOG.md
CODE_OF_CONDUCT.md		CODE_OF_CONDUCT.md
CONTRIBUTING.md		CONTRIBUTING.md
LICENSE		LICENSE
README.md		README.md
ROADMAP.md		ROADMAP.md
SECURITY.md		SECURITY.md
admin.html		admin.html
favicon.ico		favicon.ico
favicon.svg		favicon.svg
game.html		game.html
index.html		index.html
learn.html		learn.html
memory-games.html		memory-games.html
privacy.html		privacy.html
progress.html		progress.html
results.html		results.html
sandbox.html		sandbox.html
settings.html		settings.html
terms.html		terms.html
vercel.json		vercel.json

Latest commit

History

Folders and files

Repository files navigation