Embedded JavaScript Architecture

Relevant source files

The following files were used as context for generating this wiki page:

• index.html
• Quest.html
• README.md
• Global Style Definitions (index.html CSS)
• Core Logic Implementation (index.html JS)

The Solo Leveling Penalty System utilizes an embedded JavaScript architecture to manage a gamified task management system entirely within the client-side environment. This architecture integrates data persistence, real-time UI updates, and a dynamic difficulty scaling system based on user progression. The system is designed to track "Experience Points" (XP), calculate player "Ranks," and manage daily task cycles using the browser's local storage and time-zone-specific logic.

Sources: index.html:90-200, Quest.html:90-200

Core Data Structures and State Management

The architecture relies on a central state object and a static task database. State is persisted across sessions using the localStorage API.

System State Object

The systemData object serves as the single source of truth for the application's state. It includes the user's total points, the timestamp of the last update (in KSA date format), an array of currently active daily tasks, and the value of the last applied penalty.

let systemData = JSON.parse(localStorage.getItem('solo_penalty_v1')) || {
    points: 0, 
    lastUpdate: '', 
    dailyTasks: [], 
    lastPenalty: 0
};

Sources: index.html:103-105, Quest.html:103-105

Task Database

The taskDatabase is a structured object containing categorized tasks (physical, discipline, mental). Each task entry contains variations corresponding to different difficulty tiers (f, d, a, r).

Category	Description	Tiers
physical	Exercise-based tasks like pushups and squats	f, d, a, r
discipline	Habit-forming tasks like tidying or hydration	f, d, r
mental	Cognitive tasks like reading	f, d, r

Sources: index.html:91-101, Quest.html:91-101

Progression and Scaling Logic

The system implements a rank-based progression model where the user's performance dictates the difficulty and rewards of generated tasks.

Rank Configuration

The getRankConfig(pts) function maps point thresholds to specific rank metadata, including rewards, penalties, and difficulty modifiers.

The logic ensures that as points increase, the "required points per level" (req) also scales, effectively increasing the "XP" needed for further advancement.
Sources: index.html:107-116, Quest.html:107-116

Level Calculation

The calculateLevel(pts) function performs a recursive-style calculation to determine the current level by subtracting rank-specific requirements from the total point pool until the remaining points are less than the current level's requirement.
Sources: index.html:118-126, Quest.html:118-126

Task Lifecycle and Daily Synchronization

The system uses a daily cycle synchronized with the Asia/Riyadh timezone to reset tasks and apply penalties for uncompleted objectives.

Cycle Management Flow

The checkDailyCycle() function compares the current date with the lastUpdate stored in the system state.

Task Generation

Tasks are generated using a shuffle algorithm that selects a subset of tasks from each category based on the user's current rank difficulty (diff).

1. Physical: 2 tasks selected.
2. Discipline: 2 tasks selected.
3. Mental: 1 task selected.

Sources: index.html:142-150, Quest.html:142-150

User Interface and Rendering

The UI is updated through a combination of the updateUI() and render() functions, which manipulate the DOM based on the current systemData.

UI Component Mapping

Element ID	Data Source	Purpose
lvl-display	calculateLevel().level	Displays numeric level
rank-display	getRankConfig().rank	Displays letter rank (F-R)
xp-bar	calculateLevel().progress	Updates CSS width of progress bar
tasks-list	systemData.dailyTasks	Dynamically generates task cards

Sources: index.html:128-140, index.html:188-198, Quest.html:188-198

Event Handling

Interaction is handled via the toggleTask(i) function. When a user clicks a task card, the system:

1. Toggles the task's completion status (d).
2. Adjusts systemData.points by the rank's reward value.
3. Clears any active penalty messages.
4. Triggers a re-render and state save.

Sources: index.html:179-186, Quest.html:179-186

Summary

The Embedded JavaScript Architecture of this project provides a self-contained environment for a "Solo Leveling" style productivity app. By leveraging Intl.DateTimeFormat for timezone consistency and localStorage for persistence, the system maintains a complex state machine that scales difficulty and rewards dynamically without the need for a backend server.

Sources: index.html:200, Quest.html:200