Make RPG attributes (STR/DEX/etc) customizable and editable
- Replace showRPGAttributes boolean with rpgAttributes array in trackerConfig - Add RPG Attributes section in Edit Trackers with add/remove/rename/toggle - Dynamically generate attribute display from config in userStats.js - Add migration from old showRPGAttributes to new rpgAttributes array - Initialize new attributes with default value of 10 in classicStats - Default attributes: STR, DEX, CON, INT, WIS, CHA (all enabled)
This commit is contained in:
Spicy_Marinara
@@ -86,7 +86,14 @@ export function renderUserStats() {
|
||||
{ id: 'hygiene', name: 'Hygiene', enabled: true },
|
||||
{ id: 'arousal', name: 'Arousal', enabled: true }
|
||||
],
|
||||
showRPGAttributes: true,
|
||||
rpgAttributes: [
|
||||
{ id: 'str', name: 'STR', enabled: true },
|
||||
{ id: 'dex', name: 'DEX', enabled: true },
|
||||
{ id: 'con', name: 'CON', enabled: true },
|
||||
{ id: 'int', name: 'INT', enabled: true },
|
||||
{ id: 'wis', name: 'WIS', enabled: true },
|
||||
{ id: 'cha', name: 'CHA', enabled: true }
|
||||
],
|
||||
statusSection: { enabled: true, showMoodEmoji: true, customFields: ['Conditions'] },
|
||||
skillsSection: { enabled: false, label: 'Skills' }
|
||||
};
|
||||
@@ -171,60 +178,32 @@ export function renderUserStats() {
|
||||
|
||||
html += '</div>'; // Close rpg-stats-left
|
||||
|
||||
// RPG Attributes section (conditionally rendered)
|
||||
if (config.showRPGAttributes) {
|
||||
// RPG Attributes section (dynamically generated from config)
|
||||
const rpgAttributes = config.rpgAttributes || [];
|
||||
const enabledAttributes = rpgAttributes.filter(attr => attr && attr.enabled && attr.name && attr.id);
|
||||
|
||||
if (enabledAttributes.length > 0) {
|
||||
html += `
|
||||
<div class="rpg-stats-right">
|
||||
<div class="rpg-classic-stats">
|
||||
<div class="rpg-classic-stats-grid">
|
||||
<div class="rpg-classic-stat" data-stat="str">
|
||||
<span class="rpg-classic-stat-label">STR</span>
|
||||
`;
|
||||
|
||||
enabledAttributes.forEach(attr => {
|
||||
const value = extensionSettings.classicStats[attr.id] !== undefined ? extensionSettings.classicStats[attr.id] : 10;
|
||||
html += `
|
||||
<div class="rpg-classic-stat" data-stat="${attr.id}">
|
||||
<span class="rpg-classic-stat-label">${attr.name}</span>
|
||||
<div class="rpg-classic-stat-buttons">
|
||||
<button class="rpg-classic-stat-btn rpg-stat-decrease" data-stat="str">−</button>
|
||||
<span class="rpg-classic-stat-value">${extensionSettings.classicStats.str}</span>
|
||||
<button class="rpg-classic-stat-btn rpg-stat-increase" data-stat="str">+</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="rpg-classic-stat" data-stat="dex">
|
||||
<span class="rpg-classic-stat-label">DEX</span>
|
||||
<div class="rpg-classic-stat-buttons">
|
||||
<button class="rpg-classic-stat-btn rpg-stat-decrease" data-stat="dex">−</button>
|
||||
<span class="rpg-classic-stat-value">${extensionSettings.classicStats.dex}</span>
|
||||
<button class="rpg-classic-stat-btn rpg-stat-increase" data-stat="dex">+</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="rpg-classic-stat" data-stat="con">
|
||||
<span class="rpg-classic-stat-label">CON</span>
|
||||
<div class="rpg-classic-stat-buttons">
|
||||
<button class="rpg-classic-stat-btn rpg-stat-decrease" data-stat="con">−</button>
|
||||
<span class="rpg-classic-stat-value">${extensionSettings.classicStats.con}</span>
|
||||
<button class="rpg-classic-stat-btn rpg-stat-increase" data-stat="con">+</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="rpg-classic-stat" data-stat="int">
|
||||
<span class="rpg-classic-stat-label">INT</span>
|
||||
<div class="rpg-classic-stat-buttons">
|
||||
<button class="rpg-classic-stat-btn rpg-stat-decrease" data-stat="int">−</button>
|
||||
<span class="rpg-classic-stat-value">${extensionSettings.classicStats.int}</span>
|
||||
<button class="rpg-classic-stat-btn rpg-stat-increase" data-stat="int">+</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="rpg-classic-stat" data-stat="wis">
|
||||
<span class="rpg-classic-stat-label">WIS</span>
|
||||
<div class="rpg-classic-stat-buttons">
|
||||
<button class="rpg-classic-stat-btn rpg-stat-decrease" data-stat="wis">−</button>
|
||||
<span class="rpg-classic-stat-value">${extensionSettings.classicStats.wis}</span>
|
||||
<button class="rpg-classic-stat-btn rpg-stat-increase" data-stat="wis">+</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="rpg-classic-stat" data-stat="cha">
|
||||
<span class="rpg-classic-stat-label">CHA</span>
|
||||
<div class="rpg-classic-stat-buttons">
|
||||
<button class="rpg-classic-stat-btn rpg-stat-decrease" data-stat="cha">−</button>
|
||||
<span class="rpg-classic-stat-value">${extensionSettings.classicStats.cha}</span>
|
||||
<button class="rpg-classic-stat-btn rpg-stat-increase" data-stat="cha">+</button>
|
||||
<button class="rpg-classic-stat-btn rpg-stat-decrease" data-stat="${attr.id}">−</button>
|
||||
<span class="rpg-classic-stat-value">${value}</span>
|
||||
<button class="rpg-classic-stat-btn rpg-stat-increase" data-stat="${attr.id}">+</button>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
});
|
||||
|
||||
html += `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -127,7 +127,14 @@ function resetToDefaults() {
|
||||
{ id: 'hygiene', name: 'Hygiene', enabled: true },
|
||||
{ id: 'arousal', name: 'Arousal', enabled: true }
|
||||
],
|
||||
showRPGAttributes: true,
|
||||
rpgAttributes: [
|
||||
{ id: 'str', name: 'STR', enabled: true },
|
||||
{ id: 'dex', name: 'DEX', enabled: true },
|
||||
{ id: 'con', name: 'CON', enabled: true },
|
||||
{ id: 'int', name: 'INT', enabled: true },
|
||||
{ id: 'wis', name: 'WIS', enabled: true },
|
||||
{ id: 'cha', name: 'CHA', enabled: true }
|
||||
],
|
||||
statusSection: {
|
||||
enabled: true,
|
||||
showMoodEmoji: true,
|
||||
@@ -212,11 +219,31 @@ function renderUserStatsTab() {
|
||||
html += '</div>';
|
||||
html += '<button class="rpg-btn-secondary" id="rpg-add-stat"><i class="fa-solid fa-plus"></i> Add Custom Stat</button>';
|
||||
|
||||
// RPG Attributes toggle
|
||||
html += '<div class="rpg-editor-toggle-row">';
|
||||
html += `<input type="checkbox" id="rpg-show-rpg-attrs" ${config.showRPGAttributes ? 'checked' : ''}>`;
|
||||
html += '<label for="rpg-show-rpg-attrs">Show RPG Attributes (STR, DEX, etc.)</label>';
|
||||
// RPG Attributes section
|
||||
html += '<h4><i class="fa-solid fa-dice-d20"></i> RPG Attributes</h4>';
|
||||
html += '<div class="rpg-editor-stats-list" id="rpg-editor-attrs-list">';
|
||||
|
||||
const rpgAttributes = config.rpgAttributes || [
|
||||
{ id: 'str', name: 'STR', enabled: true },
|
||||
{ id: 'dex', name: 'DEX', enabled: true },
|
||||
{ id: 'con', name: 'CON', enabled: true },
|
||||
{ id: 'int', name: 'INT', enabled: true },
|
||||
{ id: 'wis', name: 'WIS', enabled: true },
|
||||
{ id: 'cha', name: 'CHA', enabled: true }
|
||||
];
|
||||
|
||||
rpgAttributes.forEach((attr, index) => {
|
||||
html += `
|
||||
<div class="rpg-editor-stat-item" data-index="${index}">
|
||||
<input type="checkbox" ${attr.enabled ? 'checked' : ''} class="rpg-attr-toggle" data-index="${index}">
|
||||
<input type="text" value="${attr.name}" class="rpg-attr-name" data-index="${index}" placeholder="Attribute Name">
|
||||
<button class="rpg-attr-remove" data-index="${index}" title="Remove attribute"><i class="fa-solid fa-trash"></i></button>
|
||||
</div>
|
||||
`;
|
||||
});
|
||||
|
||||
html += '</div>';
|
||||
html += '<button class="rpg-btn-secondary" id="rpg-add-attr"><i class="fa-solid fa-plus"></i> Add Attribute</button>';
|
||||
|
||||
// Status Section
|
||||
html += '<h4><i class="fa-solid fa-face-smile"></i> Status Section</h4>';
|
||||
@@ -287,9 +314,41 @@ function setupUserStatsListeners() {
|
||||
extensionSettings.trackerConfig.userStats.customStats[index].name = $(this).val();
|
||||
});
|
||||
|
||||
// RPG attributes toggle
|
||||
$('#rpg-show-rpg-attrs').off('change').on('change', function() {
|
||||
extensionSettings.trackerConfig.userStats.showRPGAttributes = $(this).is(':checked');
|
||||
// Add attribute
|
||||
$('#rpg-add-attr').off('click').on('click', function() {
|
||||
if (!extensionSettings.trackerConfig.userStats.rpgAttributes) {
|
||||
extensionSettings.trackerConfig.userStats.rpgAttributes = [];
|
||||
}
|
||||
const newId = 'attr_' + Date.now();
|
||||
extensionSettings.trackerConfig.userStats.rpgAttributes.push({
|
||||
id: newId,
|
||||
name: 'NEW',
|
||||
enabled: true
|
||||
});
|
||||
// Initialize value in classicStats if doesn't exist
|
||||
if (extensionSettings.classicStats[newId] === undefined) {
|
||||
extensionSettings.classicStats[newId] = 10;
|
||||
}
|
||||
renderUserStatsTab();
|
||||
});
|
||||
|
||||
// Remove attribute
|
||||
$('.rpg-attr-remove').off('click').on('click', function() {
|
||||
const index = $(this).data('index');
|
||||
extensionSettings.trackerConfig.userStats.rpgAttributes.splice(index, 1);
|
||||
renderUserStatsTab();
|
||||
});
|
||||
|
||||
// Toggle attribute
|
||||
$('.rpg-attr-toggle').off('change').on('change', function() {
|
||||
const index = $(this).data('index');
|
||||
extensionSettings.trackerConfig.userStats.rpgAttributes[index].enabled = $(this).is(':checked');
|
||||
});
|
||||
|
||||
// Rename attribute
|
||||
$('.rpg-attr-name').off('blur').on('blur', function() {
|
||||
const index = $(this).data('index');
|
||||
extensionSettings.trackerConfig.userStats.rpgAttributes[index].name = $(this).val();
|
||||
});
|
||||
|
||||
// Status section toggles
|
||||
|
||||
Reference in New Issue
Block a user