diff --git a/src/systems/dashboard/dashboardIntegration.js b/src/systems/dashboard/dashboardIntegration.js
index 3d8f299..79ef448 100644
--- a/src/systems/dashboard/dashboardIntegration.js
+++ b/src/systems/dashboard/dashboardIntegration.js
@@ -27,6 +27,7 @@ import { registerSceneInfoWidget } from './widgets/sceneInfoWidget.js';
import { registerPresentCharactersWidget } from './widgets/presentCharactersWidget.js';
import { registerInventoryWidget } from './widgets/inventoryWidget.js';
import { registerQuestsWidget } from './widgets/questsWidget.js';
+import { registerUserSkillsWidget } from './widgets/userSkillsWidget.js';
// Global dashboard manager instance
let dashboardManager = null;
@@ -254,6 +255,9 @@ function registerAllWidgets(registry, dependencies) {
// Quest widget
registerQuestsWidget(registry, dependencies);
+ // Skills widget
+ registerUserSkillsWidget(registry, dependencies);
+
console.log(`[RPG Companion] Registered ${registry.getAll().length} widgets`);
}
diff --git a/src/systems/dashboard/dashboardManager.js b/src/systems/dashboard/dashboardManager.js
index d6e5f32..289b63e 100644
--- a/src/systems/dashboard/dashboardManager.js
+++ b/src/systems/dashboard/dashboardManager.js
@@ -949,7 +949,8 @@ export class DashboardManager {
scene: [],
social: [],
inventory: [],
- quests: []
+ quests: [],
+ skills: []
};
widgets.forEach(widget => {
@@ -1031,6 +1032,19 @@ export class DashboardManager {
this.gridEngine.autoLayout(groups.quests, { preserveOrder: true });
}
+ // Create Skills tab if there are skills widgets
+ if (groups.skills.length > 0) {
+ this.dashboard.tabs.push({
+ id: 'tab-skills',
+ name: 'Skills',
+ icon: 'fa-solid fa-book',
+ order: 5,
+ widgets: groups.skills
+ });
+
+ this.gridEngine.autoLayout(groups.skills, { preserveOrder: true });
+ }
+
console.log('[DashboardManager] Created', this.dashboard.tabs.length, 'tabs');
// Re-render tabs and switch to first tab
@@ -1070,7 +1084,8 @@ export class DashboardManager {
'social': 3,
'inventory': 4,
'quests': 5,
- 'other': 6
+ 'skills': 6,
+ 'other': 7
};
// Specific widget type ordering within user category
diff --git a/src/systems/dashboard/defaultLayout.js b/src/systems/dashboard/defaultLayout.js
index aac58d5..31232b9 100644
--- a/src/systems/dashboard/defaultLayout.js
+++ b/src/systems/dashboard/defaultLayout.js
@@ -167,6 +167,29 @@ export function generateDefaultDashboard() {
}
}
]
+ },
+ // Tab 5: Skills (Full tab for skills system)
+ {
+ id: 'tab-skills',
+ name: 'Skills',
+ icon: 'fa-solid fa-book',
+ order: 4,
+ widgets: [
+ {
+ id: 'widget-userskills',
+ type: 'userSkills',
+ x: 0,
+ y: 0,
+ w: 3,
+ h: 7,
+ config: {
+ defaultSubTab: 'all',
+ showXP: true,
+ showCategories: true,
+ maxLevel: 10
+ }
+ }
+ ]
}
],
diff --git a/src/systems/dashboard/widgets/userSkillsWidget.js b/src/systems/dashboard/widgets/userSkillsWidget.js
new file mode 100644
index 0000000..ea6608a
--- /dev/null
+++ b/src/systems/dashboard/widgets/userSkillsWidget.js
@@ -0,0 +1,1079 @@
+/**
+ * User Skills Widget
+ *
+ * Comprehensive skills tracking system with categories, levels, and XP progress.
+ * Features three sub-tabs, multiple view modes, and full CRUD operations.
+ *
+ * Data Model:
+ * skills: {
+ * version: 1,
+ * categories: {
+ * 'Combat': [{ name: 'Swordsmanship', level: 5, xp: 75, maxXP: 100 }, ...],
+ * 'Magic': [...]
+ * },
+ * uncategorized: [...]
+ * }
+ */
+
+import { parseItems, serializeItems } from '../../../utils/itemParser.js';
+
+// Per-widget state storage (Map: widgetId => state)
+const widgetStates = new Map();
+
+/**
+ * Get or initialize widget state
+ */
+function getWidgetState(widgetId) {
+ if (!widgetStates.has(widgetId)) {
+ widgetStates.set(widgetId, {
+ activeSubTab: 'all',
+ viewModes: {
+ all: 'list',
+ categories: 'list',
+ quick: 'grid'
+ },
+ collapsedCategories: [],
+ sortBy: 'level', // 'level', 'name', 'xp'
+ filterText: ''
+ });
+ }
+ return widgetStates.get(widgetId);
+}
+
+/**
+ * Migrate old string format to structured format
+ */
+function migrateSkillsData(oldSkills) {
+ // Already in new format
+ if (oldSkills && typeof oldSkills === 'object' && oldSkills.version) {
+ return oldSkills;
+ }
+
+ // Old string format: "Swordsmanship, Lockpicking, Alchemy"
+ if (typeof oldSkills === 'string' && oldSkills.trim()) {
+ const skillNames = parseItems(oldSkills);
+ return {
+ version: 1,
+ categories: {},
+ uncategorized: skillNames.map(name => ({
+ name,
+ level: 1,
+ xp: 0,
+ maxXP: 100
+ }))
+ };
+ }
+
+ // Empty or null
+ return {
+ version: 1,
+ categories: {},
+ uncategorized: []
+ };
+}
+
+/**
+ * Get all skills as flat array
+ */
+function getAllSkills(skillsData) {
+ const skills = [];
+
+ // Add skills from categories
+ for (const [category, categorySkills] of Object.entries(skillsData.categories || {})) {
+ categorySkills.forEach(skill => {
+ skills.push({ ...skill, category });
+ });
+ }
+
+ // Add uncategorized skills
+ (skillsData.uncategorized || []).forEach(skill => {
+ skills.push({ ...skill, category: null });
+ });
+
+ return skills;
+}
+
+/**
+ * Sort skills
+ */
+function sortSkills(skills, sortBy) {
+ const sorted = [...skills];
+
+ switch (sortBy) {
+ case 'level':
+ sorted.sort((a, b) => b.level - a.level || a.name.localeCompare(b.name));
+ break;
+ case 'name':
+ sorted.sort((a, b) => a.name.localeCompare(b.name));
+ break;
+ case 'xp':
+ sorted.sort((a, b) => {
+ const progressA = a.xp / a.maxXP;
+ const progressB = b.xp / b.maxXP;
+ return progressB - progressA || b.level - a.level;
+ });
+ break;
+ }
+
+ return sorted;
+}
+
+/**
+ * Filter skills by search text
+ */
+function filterSkills(skills, filterText) {
+ if (!filterText.trim()) return skills;
+
+ const search = filterText.toLowerCase();
+ return skills.filter(skill =>
+ skill.name.toLowerCase().includes(search) ||
+ (skill.category && skill.category.toLowerCase().includes(search))
+ );
+}
+
+/**
+ * Sanitize skill name
+ */
+function sanitizeSkillName(name) {
+ return name.trim().replace(/[<>]/g, '').slice(0, 100);
+}
+
+/**
+ * Sanitize category name
+ */
+function sanitizeCategoryName(name) {
+ return name.trim().replace(/[<>]/g, '').slice(0, 50);
+}
+
+/**
+ * Register User Skills Widget
+ */
+export function registerUserSkillsWidget(registry, dependencies) {
+ const { getExtensionSettings, onDataChange } = dependencies;
+
+ registry.register('userSkills', {
+ name: 'User Skills',
+ icon: '⚔️',
+ description: 'Character skills with categories, levels, and XP tracking',
+ category: 'skills',
+ minSize: { w: 2, h: 4 },
+ // Large widget like Inventory/Quests
+ defaultSize: (columns) => {
+ if (columns <= 2) {
+ return { w: 2, h: 6 }; // Mobile: 2 cols (full), 6 rows
+ }
+ return { w: 3, h: 7 }; // Desktop: 3 cols (full), 7 rows
+ },
+ maxAutoSize: (columns) => {
+ if (columns <= 2) {
+ return { w: 2, h: 8 };
+ }
+ return { w: 3, h: 10 };
+ },
+ requiresSchema: false,
+
+ /**
+ * Render widget content
+ */
+ render(container, config = {}) {
+ const settings = getExtensionSettings();
+ const skillsConfig = settings.trackerConfig?.userStats?.skillsSection;
+
+ // Check if skills tracking is enabled
+ if (!skillsConfig?.enabled) {
+ container.innerHTML = `
+
+ `;
+ return;
+ }
+
+ // Migrate and get skills data
+ let skillsData = settings.userStats?.skills;
+ skillsData = migrateSkillsData(skillsData);
+
+ // Save migrated data
+ if (!settings.userStats) settings.userStats = {};
+ settings.userStats.skills = skillsData;
+
+ // Get widget ID from container
+ const widgetId = container.closest('[data-widget-id]')?.dataset.widgetId || 'default';
+ const state = getWidgetState(widgetId);
+
+ // Build UI based on active sub-tab
+ const html = renderSkillsUI(skillsData, state, config, widgetId);
+ container.innerHTML = html;
+
+ // Attach event handlers
+ attachSkillsHandlers(container, widgetId, dependencies, config);
+ },
+
+ /**
+ * Get widget configuration schema
+ */
+ getConfig() {
+ return {
+ showXP: {
+ type: 'boolean',
+ label: 'Show XP Progress Bars',
+ default: true,
+ description: 'Display XP progress bars for each skill'
+ },
+ showCategories: {
+ type: 'boolean',
+ label: 'Show Category Tags',
+ default: true,
+ description: 'Show category labels on skill cards'
+ },
+ defaultSort: {
+ type: 'select',
+ label: 'Default Sort Order',
+ options: [
+ { value: 'level', label: 'By Level (High to Low)' },
+ { value: 'name', label: 'By Name (A-Z)' },
+ { value: 'xp', label: 'By XP Progress' }
+ ],
+ default: 'level',
+ description: 'How to sort skills in All Skills view'
+ },
+ maxLevel: {
+ type: 'number',
+ label: 'Maximum Skill Level',
+ default: 10,
+ min: 1,
+ max: 100,
+ description: 'Highest level a skill can reach'
+ }
+ };
+ },
+
+ /**
+ * Handle widget resize
+ */
+ onResize(container, newW, newH) {
+ // Add compact class for narrow widths
+ if (newW <= 2) {
+ container.classList.add('rpg-skills-compact');
+ container.classList.remove('rpg-skills-wide');
+ } else {
+ container.classList.add('rpg-skills-wide');
+ container.classList.remove('rpg-skills-compact');
+ }
+ }
+ });
+}
+
+/**
+ * Render skills UI
+ */
+function renderSkillsUI(skillsData, state, config, widgetId) {
+ const allSkills = getAllSkills(skillsData);
+ const hasSkills = allSkills.length > 0;
+
+ let html = ''; // Close rpg-skills-widget
+ return html;
+}
+
+/**
+ * Render sub-tab navigation
+ */
+function renderSubTabs(activeTab) {
+ const tabs = [
+ { id: 'all', label: 'All', icon: 'fa-list' },
+ { id: 'categories', label: 'By Category', icon: 'fa-folder-tree' },
+ { id: 'quick', label: 'Quick', icon: 'fa-bolt' }
+ ];
+
+ let html = '';
+ tabs.forEach(tab => {
+ const active = tab.id === activeTab ? 'active' : '';
+ html += `
+
+ `;
+ });
+ html += '
';
+
+ return html;
+}
+
+/**
+ * Render All Skills tab
+ */
+function renderAllSkillsTab(skillsData, state, config) {
+ const allSkills = getAllSkills(skillsData);
+
+ let html = '';
+
+ // Header with controls
+ html += `
+
+ `;
+
+ // Search/filter
+ html += `
+
+
+
+
+ `;
+
+ // Add skill form (hidden by default)
+ html += renderAddSkillForm(skillsData);
+
+ // Skills list/grid
+ if (allSkills.length === 0) {
+ html += `
+
+
+
No skills yet
+
Click the + button to add your first skill
+
+ `;
+ } else {
+ let filtered = filterSkills(allSkills, state.filterText);
+ let sorted = sortSkills(filtered, state.sortBy);
+
+ const viewMode = state.viewModes.all;
+ html += `
`;
+ sorted.forEach(skill => {
+ html += renderSkillCard(skill, config, viewMode);
+ });
+ html += '
';
+
+ if (filtered.length === 0 && allSkills.length > 0) {
+ html += `
+
+
+
No skills match your search
+
+ `;
+ }
+ }
+
+ html += '
';
+
+ // Header
+ html += `
+
+ `;
+
+ // Add category form (hidden)
+ html += renderAddCategoryForm();
+
+ const viewMode = state.viewModes.categories;
+ const categories = Object.keys(skillsData.categories || {}).sort();
+ const uncategorized = skillsData.uncategorized || [];
+
+ if (categories.length === 0 && uncategorized.length === 0) {
+ html += `
+
+
+
No categories yet
+
Click the folder+ button to create a category
+
+ `;
+ } else {
+ // Render categories
+ categories.forEach(category => {
+ html += renderCategory(category, skillsData.categories[category], state, config, viewMode);
+ });
+
+ // Render uncategorized
+ if (uncategorized.length > 0) {
+ html += renderCategory('Uncategorized', uncategorized, state, config, viewMode, true);
+ }
+ }
+
+ html += '
';
+
+ html += `
+
+ `;
+
+ html += `
+
+ Showing your top skills for quick reference
+
`;
+
+ if (topSkills.length === 0) {
+ html += `
+
+
+
No skills to display
+
Add skills in the "All Skills" tab
+
+ `;
+ } else {
+ html += '
';
+ topSkills.forEach(skill => {
+ html += renderSkillCard(skill, config, 'quick');
+ });
+ html += '
';
+ }
+
+ html += '
';
+
+ // Category header
+ html += `
+
+ `;
+
+ // Category content
+ if (!isCollapsed) {
+ html += renderAddSkillForm(null, categoryName, true);
+ html += `
`;
+ skills.forEach(skill => {
+ html += renderSkillCard({ ...skill, category: isUncategorized ? null : categoryName }, config, viewMode);
+ });
+ html += '
';
+ }
+
+ html += '
`;
+
+ // Skill info wrapper (name, level, XP bar)
+ html += '
';
+
+ // Header row with name and level
+ html += '';
+
+ // XP bar (if not quick view)
+ if (showXP && !isQuickView) {
+ html += `
+
+
+
${skill.xp}/${skill.maxXP} XP
+
+ `;
+ }
+
+ html += '
'; // Close rpg-skill-info
+
+ // Actions
+ html += '
';
+ if (!isQuickView) {
+ html += `
+
+
+
+ `;
+ } else {
+ html += `
+
+ `;
+ }
+ html += '
';
+
+ html += '