Shadow Block

Inspiration

We live in an age of constant digital distraction. While Pomodoro timers are effective, they often feel like chores. Shadow Block was born from the idea of "productive escapism"—what if every minute of focus felt like a step in a grand quest? Inspired by modern RPGs and "level-up" systems, we wanted to create a tool where the stakes of your work are mirrored by the progress of a hero.

What it does

Shadow Block gamifies your focus sessions. It’s a productivity suite hidden inside an RPG:

• Focus to Conquer: Start a "Shadow Mode" session (5-120 mins). Your focus deals damage to "Stubborn Souls"—bosses with unique backstories and resolutions.
• Level Up Your Life: Earn Shadow EXP (Insight) to raise your Rank and Shadow Embers (Currency) to upgrade stats like Focus Power and Willpower.
• Strict Realm Protection: Block distracting sites during sessions. Visiting restricted domains "compromises" the session, reducing your rewards.
• Idle Recovery: Earn passive rewards during your break phases (Recovery) to keep the progression loop alive.
• Full Customization: Unlock new Auras (themes) and Avatars (sprites) to personalize your hunter’s journey.

How we built it

Shadow Block is built on a robust, modern extension architecture:

• TypeScript & Manifest V3: Ensures type safety and future-proof performance.
• Central State Manager: A custom Redux-like state management system that persists data across the background worker, popup, and options page.
• esbuild Pipeline: Optimized bundling for lightning-fast load times.
• Chrome APIs: Leverages alarms for precise timing, storage for persistent progression, and declarativeNetRequest for high-performance site blocking.
• CSS3 Animations: High-quality visual effects (auras, bar transitions) created with pure CSS for a premium feel without performance overhead.

Challenges we ran into

• State Synchronization: Keeping the timer and game state perfectly in sync between the background service worker and the various UI pages (popup, options) required a sophisticated message-passing architecture.
• Idle Detection Integrity: Balancing "fairness" in rewards. We had to implement a system that accounts for idle time without punishing short breaks, leading to the "Compromised Session" mechanic.
• Performance: High-quality animations in a Chrome popup can be resource-heavy. We optimized the DOM updates to ensure the UI remains snappy even during intense boss battles.

Accomplishments that we're proud of

• Seamless RPG Integration: We successfully blended a functional task manager with deep RPG mechanics (stats, boss dialogue, XP curves) without making it feel cluttered.
• Narrative Depth: Each "Stubborn Soul" has a lore-rich backstory and a resolution dialogue, providing a sense of purpose beyond just clicking a timer.
• Visual Aesthetic: The "Shadow System" theme provides a premium, immersive experience that stands out from typical productivity tools.

What we learned

• UX/UI for Gamification: We learned how to use visual cues (XP bars, damage numbers) to provide immediate positive feedback for productive behavior.
• Extension Lifecycle: Managing long-running sessions across service worker restarts and browser reloads taught us the intricacies of the Chrome Extension V3 environment.
• Accessibility: Implementing ARIA roles and keyboard navigation within a complex, animated game UI was a valuable lesson in inclusive design.

What's next for Shadow Block

• Guild System: Real-time collaborative focus sessions where friends can tackle massive world bosses together.
• Mobile Companion: A PWA or native app to sync focus progress across devices.
• Extended Storylines: More bosses, branching dialogue paths, and seasonal "Great Hunts."
• Integration: Syncing with tools like Trello, Jira, and GitHub to automatically turn commits and cards into Shadow Quests.

Built With

• css
• html
• javascript
• typescript