Dashboard Interface
Relevant source files
The following files were used as context for generating this wiki page:
The Dashboard Interface serves as the primary user interaction layer for the Solo Leveling Penalty System. It is designed as a gamified personal development tool that tracks user progress through "levels" and "ranks" based on the completion of daily tasks. The interface provides real-time feedback on XP gains, rank transitions, and penalty applications for missed objectives.
The system is built using a client-side architecture, leveraging HTML5, CSS3 with modern CSS variables, and vanilla JavaScript. Data persistence is handled entirely through the browser's Local Storage, ensuring that user progress is maintained across sessions without the need for a backend database.
Sources: index.html:1-5, Quest.html:1-5, index.html:132-134
UI Components and Layout
The dashboard is structured into three primary visual containers: the Header, the Stats Panel, and the Tasks Container. The design utilizes a dark "system" aesthetic with neon blue highlights and high-contrast typography to mimic futuristic interfaces.
Stats Panel
The Stats Panel is the core informational hub, displaying the user's current level, rank, and total XP. It includes a visual progress bar (XP Bar) that dynamically adjusts based on current points relative to the level requirements.
| Element | ID | Description |
|---|---|---|
| Level Badge | lvl-display | Displays the current calculated level (e.g., LVL. 1). |
| Rank Value | rank-display | Shows the letter rank (F through R) with dynamic coloring. |
| Total XP | total-points | The aggregate sum of points earned. |
| XP Bar | xp-bar | A CSS-driven progress bar showing percentage towards the next level. |
| Status Message | status-msg | Displays mission rewards or active penalty notifications. |
Sources: index.html:70-90, Quest.html:70-90
Task List
The task list generates interactive "task cards" based on a randomized selection from three categories: Physical, Discipline, and Mental. Each card includes a checkbox and a category badge.
Sources: index.html:105-107, index.html:200-210
System Logic and Data Flow
The dashboard operates on a reactive logic loop. When a user interacts with a task, the system updates the underlying data model, recalculates ranks and levels, and re-renders the UI components.
XP and Rank Calculation
Ranks are determined by specific point thresholds. Each rank defines a reward value for completed tasks, a penalty value for missed tasks, and a required XP amount for level progression.
The level calculation is iterative. For levels below 6, the requirement is fixed at 5 XP. For levels 6 and above, the requirement is fetched from the current rank configuration.
Sources: index.html:136-159, Quest.html:136-159
Daily Cycle and Penalties
The system performs a "Daily Cycle" check upon initialization. It compares the current date (in the Asia/Riyadh timezone) against the lastUpdate timestamp stored in Local Storage.
If a new day is detected, the system checks for any incomplete tasks from the previous day. For every incomplete task, a penalty is deducted from the total XP according to the current rank's pen value.
Sources: index.html:178-200, Quest.html:178-200
Data Structure
The application state is encapsulated in a single JSON object stored in localStorage.
Local Storage Schema
{
"points": 1250,
"lastUpdate": "2023-10-27",
"dailyTasks": [
{ "n": "Pushups 50 reps", "c": "Physical", "d": true }
],
"lastPenalty": 0
}
Rank Configuration Mapping
| Rank | Threshold | Task Reward | Miss Penalty | Level Req | Difficulty Key |
|---|---|---|---|---|---|
| F | 0 | 2 | 3 | 10 | f |
| E | 70 | 2 | 3 | 10 | f |
| D | 150 | 3 | 5 | 12 | d |
| A | 800 | 4 | 6 | 25 | a |
| R | 3000 | 6 | 8 | 50 | r |
Sources: index.html:113-130, index.html:136-146
Implementation Details
Task Generation
Tasks are selected from taskDatabase based on the user's current difficulty level (f, d, a, or r). The selection process shuffles the available pools for Physical (2 tasks), Discipline (2 tasks), and Mental (1 task) categories.
// File: index.html
// Line: 171-176
function generateTasks() {
const config = getRankConfig(systemData.points);
const diff = config.diff;
const p = shuffle([...taskDatabase.physical]).slice(0, 2).map(t => ({n: t[diff] || t['f'], c: 'جسدي', d: false}));
const d = shuffle([...taskDatabase.discipline]).slice(0, 2).map(t => ({n: t[diff] || t['f'], c: 'انضباط', d: false}));
const m = shuffle([...taskDatabase.mental]).slice(0, 1).map(t => ({n: t[diff] || t['f'], c: 'عقلي', d: false}));
return [...p, ...d, ...m];
}
Sources: index.html:113-125, index.html:171-176
Real-time Updates
A global setInterval runs every 1000ms to update the clock display in the Header, ensuring the user is synchronized with the system's timezone (Asia/Riyadh).
Sources: index.html:218-220, Quest.html:218-220