Fixes #5: Refactor code quality - Part 1
- Split index.js from 1,567 lines to 456 lines (73% reduction)
- Extracted settings event listeners to src/systems/ui/settingsListeners.js
- Extracted settings panel to src/core/settingsPanel.js
- Simplified initUI() and main initialization block
- Modularized style.css into 28 logical CSS modules in src/styles/
- Added build script (npm run build:css) to concatenate modules
- Modules: panel, components, user-stats, info-box, thoughts, settings,
themes, modals, mobile, inventory, quests, equipment, encounters,
weather, music-player, FAB widgets, strip widgets, etc.
- Updated package.json with build:css script and type: module
No functional changes - pure refactoring for maintainability.
This commit is contained in:
@@ -0,0 +1,379 @@
|
||||
/* ============================================
|
||||
THEME VARIATIONS
|
||||
============================================ */
|
||||
|
||||
/* Sci-Fi / Synthwave Theme */
|
||||
.rpg-panel[data-theme="sci-fi"] {
|
||||
--rpg-bg: #0a0e27;
|
||||
--rpg-accent: #1a1f3a;
|
||||
--rpg-text: #00fff9;
|
||||
--rpg-highlight: #ff006e;
|
||||
--rpg-border: #8b00ff;
|
||||
--rpg-shadow: rgba(139, 0, 255, 0.5);
|
||||
}
|
||||
|
||||
/* Apply sci-fi theme to thought panel */
|
||||
#rpg-thought-panel[data-theme="sci-fi"],
|
||||
#rpg-thought-icon[data-theme="sci-fi"],
|
||||
#rpg-alt-present-characters[data-theme="sci-fi"],
|
||||
.rpg-mobile-toggle[data-theme="sci-fi"] {
|
||||
--rpg-bg: #0a0e27;
|
||||
--rpg-accent: #1a1f3a;
|
||||
--rpg-text: #00fff9;
|
||||
--rpg-highlight: #ff006e;
|
||||
--rpg-border: #8b00ff;
|
||||
--rpg-shadow: rgba(139, 0, 255, 0.5);
|
||||
}
|
||||
|
||||
.rpg-panel[data-theme="sci-fi"] .rpg-content-box {
|
||||
background: linear-gradient(135deg, #1a1f3a 0%, #0a0e27 100%);
|
||||
box-shadow: 0 0 40px rgba(139, 0, 255, 0.4), inset 0 0 30px rgba(0, 0, 0, 0.5);
|
||||
border: 2px solid #8b00ff;
|
||||
}
|
||||
|
||||
.rpg-panel[data-theme="sci-fi"] .rpg-panel-header h3,
|
||||
.rpg-panel[data-theme="sci-fi"] .rpg-stats-title,
|
||||
.rpg-panel[data-theme="sci-fi"] .rpg-info-header,
|
||||
.rpg-panel[data-theme="sci-fi"] .rpg-thoughts-header {
|
||||
text-shadow: 0 0 20px #ff006e, 0 0 40px #8b00ff;
|
||||
}
|
||||
|
||||
.rpg-panel[data-theme="sci-fi"] .rpg-divider {
|
||||
background: linear-gradient(to right, transparent, #8b00ff, #ff006e, #8b00ff, transparent);
|
||||
}
|
||||
|
||||
.rpg-panel[data-theme="sci-fi"] .rpg-thoughts-content::before {
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
rgba(10, 14, 39, 0.9) 0%,
|
||||
rgba(26, 31, 58, 0.8) 50%,
|
||||
rgba(10, 14, 39, 0.9) 100%
|
||||
);
|
||||
}
|
||||
|
||||
/* Fantasy / Rustic Parchment Theme */
|
||||
.rpg-panel[data-theme="fantasy"] {
|
||||
--rpg-bg: #2b1810;
|
||||
--rpg-accent: #3d2414;
|
||||
--rpg-text: #f4e8d0;
|
||||
--rpg-highlight: #d4af37;
|
||||
--rpg-border: #8b6914;
|
||||
--rpg-shadow: rgba(0, 0, 0, 0.7);
|
||||
}
|
||||
|
||||
/* Apply fantasy theme to thought panel */
|
||||
#rpg-thought-panel[data-theme="fantasy"],
|
||||
#rpg-thought-icon[data-theme="fantasy"],
|
||||
#rpg-alt-present-characters[data-theme="fantasy"],
|
||||
.rpg-mobile-toggle[data-theme="fantasy"] {
|
||||
--rpg-bg: #2b1810;
|
||||
--rpg-accent: #3d2414;
|
||||
--rpg-text: #f4e8d0;
|
||||
--rpg-highlight: #d4af37;
|
||||
--rpg-border: #8b6914;
|
||||
--rpg-shadow: rgba(0, 0, 0, 0.7);
|
||||
}
|
||||
|
||||
.rpg-panel[data-theme="fantasy"] {
|
||||
background-image:
|
||||
linear-gradient(rgba(43, 24, 16, 0.9), rgba(43, 24, 16, 0.9)),
|
||||
url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><filter id="noise"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="4" /></filter><rect width="100" height="100" filter="url(%23noise)" opacity="0.1"/></svg>');
|
||||
}
|
||||
|
||||
.rpg-panel[data-theme="fantasy"] .rpg-content-box {
|
||||
background: linear-gradient(135deg, #3d2414 0%, #2b1810 100%);
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.8), inset 0 0 40px rgba(139, 105, 20, 0.2);
|
||||
border: 3px solid #8b6914;
|
||||
border-style: ridge;
|
||||
}
|
||||
|
||||
.rpg-panel[data-theme="fantasy"] .rpg-panel-header h3,
|
||||
.rpg-panel[data-theme="fantasy"] .rpg-stats-title,
|
||||
.rpg-panel[data-theme="fantasy"] .rpg-info-header,
|
||||
.rpg-panel[data-theme="fantasy"] .rpg-thoughts-header {
|
||||
font-family: 'Georgia', serif;
|
||||
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
|
||||
.rpg-panel[data-theme="fantasy"] .rpg-divider::after {
|
||||
content: '❦';
|
||||
font-size: clamp(1rem, 1.5vw, 1.5rem);
|
||||
}
|
||||
|
||||
.rpg-panel[data-theme="fantasy"] .rpg-thoughts-content::before {
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
rgba(43, 24, 16, 0.92) 0%,
|
||||
rgba(61, 36, 20, 0.88) 50%,
|
||||
rgba(43, 24, 16, 0.92) 100%
|
||||
);
|
||||
}
|
||||
|
||||
/* Cyberpunk / Neon Grid Theme */
|
||||
.rpg-panel[data-theme="cyberpunk"] {
|
||||
--rpg-bg: #000000;
|
||||
--rpg-accent: #0d0d0d;
|
||||
--rpg-text: #00ff41;
|
||||
--rpg-highlight: #ff2a6d;
|
||||
--rpg-border: #05d9e8;
|
||||
--rpg-shadow: rgba(5, 217, 232, 0.5);
|
||||
}
|
||||
|
||||
/* Apply cyberpunk theme to thought panel */
|
||||
#rpg-thought-panel[data-theme="cyberpunk"],
|
||||
#rpg-thought-icon[data-theme="cyberpunk"],
|
||||
#rpg-alt-present-characters[data-theme="cyberpunk"],
|
||||
.rpg-mobile-toggle[data-theme="cyberpunk"] {
|
||||
--rpg-bg: #000000;
|
||||
--rpg-accent: #0d0d0d;
|
||||
--rpg-text: #00ff41;
|
||||
--rpg-highlight: #ff2a6d;
|
||||
--rpg-border: #05d9e8;
|
||||
--rpg-shadow: rgba(5, 217, 232, 0.5);
|
||||
}
|
||||
|
||||
.rpg-panel[data-theme="cyberpunk"] {
|
||||
background: linear-gradient(rgba(0, 0, 0, 0.95), rgba(0, 0, 0, 0.95)),
|
||||
repeating-linear-gradient(0deg, rgba(5, 217, 232, 0.1) 0px, transparent 1px, transparent 2px, rgba(5, 217, 232, 0.1) 3px),
|
||||
repeating-linear-gradient(90deg, rgba(5, 217, 232, 0.1) 0px, transparent 1px, transparent 2px, rgba(5, 217, 232, 0.1) 3px);
|
||||
background-size: 100% 100%, 30px 30px, 30px 30px;
|
||||
}
|
||||
|
||||
.rpg-panel[data-theme="cyberpunk"] .rpg-content-box {
|
||||
background: linear-gradient(135deg, rgba(13, 13, 13, 0.9) 0%, rgba(0, 0, 0, 0.9) 100%);
|
||||
box-shadow: 0 0 40px rgba(255, 42, 109, 0.4), inset 0 0 30px rgba(5, 217, 232, 0.2);
|
||||
border: 2px solid #05d9e8;
|
||||
}
|
||||
|
||||
.rpg-panel[data-theme="cyberpunk"] .rpg-panel-header h3,
|
||||
.rpg-panel[data-theme="cyberpunk"] .rpg-stats-title,
|
||||
.rpg-panel[data-theme="cyberpunk"] .rpg-info-header,
|
||||
.rpg-panel[data-theme="cyberpunk"] .rpg-thoughts-header {
|
||||
text-shadow: 0 0 10px #ff2a6d, 0 0 20px #05d9e8, 0 0 30px #ff2a6d;
|
||||
font-family: 'Courier New', monospace;
|
||||
letter-spacing: 0.125em;
|
||||
}
|
||||
|
||||
.rpg-panel[data-theme="cyberpunk"] .rpg-divider {
|
||||
background: linear-gradient(to right, transparent, #05d9e8, #ff2a6d, #05d9e8, transparent);
|
||||
height: 0.188rem;
|
||||
}
|
||||
|
||||
.rpg-panel[data-theme="cyberpunk"] .rpg-thoughts-content::before {
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
rgba(0, 0, 0, 0.92) 0%,
|
||||
rgba(13, 13, 13, 0.85) 50%,
|
||||
rgba(0, 0, 0, 0.92) 100%
|
||||
);
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
THEME SUPPORT FOR ALL PANEL ELEMENTS
|
||||
============================================ */
|
||||
|
||||
/* Apply theme colors to tabs navigation */
|
||||
.rpg-panel[data-theme="sci-fi"] .rpg-tabs-nav,
|
||||
.rpg-panel[data-theme="fantasy"] .rpg-tabs-nav,
|
||||
.rpg-panel[data-theme="cyberpunk"] .rpg-tabs-nav {
|
||||
border-bottom-color: var(--rpg-border);
|
||||
}
|
||||
|
||||
.rpg-panel[data-theme="sci-fi"] .rpg-tab-btn,
|
||||
.rpg-panel[data-theme="fantasy"] .rpg-tab-btn,
|
||||
.rpg-panel[data-theme="cyberpunk"] .rpg-tab-btn {
|
||||
background: var(--rpg-accent);
|
||||
border-color: var(--rpg-border);
|
||||
color: var(--rpg-text);
|
||||
}
|
||||
|
||||
.rpg-panel[data-theme="sci-fi"] .rpg-tab-btn:hover,
|
||||
.rpg-panel[data-theme="fantasy"] .rpg-tab-btn:hover,
|
||||
.rpg-panel[data-theme="cyberpunk"] .rpg-tab-btn:hover {
|
||||
background: var(--rpg-highlight);
|
||||
border-color: var(--rpg-highlight);
|
||||
}
|
||||
|
||||
.rpg-panel[data-theme="sci-fi"] .rpg-tab-btn.active,
|
||||
.rpg-panel[data-theme="fantasy"] .rpg-tab-btn.active,
|
||||
.rpg-panel[data-theme="cyberpunk"] .rpg-tab-btn.active {
|
||||
background: var(--rpg-highlight);
|
||||
border-color: var(--rpg-highlight);
|
||||
color: var(--rpg-bg);
|
||||
}
|
||||
|
||||
/* Apply theme colors to inventory subtabs */
|
||||
.rpg-panel[data-theme="sci-fi"] .rpg-inventory-subtabs,
|
||||
.rpg-panel[data-theme="fantasy"] .rpg-inventory-subtabs,
|
||||
.rpg-panel[data-theme="cyberpunk"] .rpg-inventory-subtabs {
|
||||
border-bottom-color: var(--rpg-border);
|
||||
}
|
||||
|
||||
.rpg-panel[data-theme="sci-fi"] .rpg-inventory-subtab,
|
||||
.rpg-panel[data-theme="fantasy"] .rpg-inventory-subtab,
|
||||
.rpg-panel[data-theme="cyberpunk"] .rpg-inventory-subtab {
|
||||
border-color: var(--rpg-border);
|
||||
color: var(--rpg-text);
|
||||
}
|
||||
|
||||
.rpg-panel[data-theme="sci-fi"] .rpg-inventory-subtab:hover,
|
||||
.rpg-panel[data-theme="fantasy"] .rpg-inventory-subtab:hover,
|
||||
.rpg-panel[data-theme="cyberpunk"] .rpg-inventory-subtab:hover {
|
||||
border-color: var(--rpg-highlight);
|
||||
color: var(--rpg-highlight);
|
||||
}
|
||||
|
||||
.rpg-panel[data-theme="sci-fi"] .rpg-inventory-subtab.active,
|
||||
.rpg-panel[data-theme="fantasy"] .rpg-inventory-subtab.active,
|
||||
.rpg-panel[data-theme="cyberpunk"] .rpg-inventory-subtab.active {
|
||||
border-color: var(--rpg-highlight);
|
||||
color: var(--rpg-highlight);
|
||||
}
|
||||
|
||||
/* Apply theme colors to quests subtabs */
|
||||
.rpg-panel[data-theme="sci-fi"] .rpg-quests-subtabs,
|
||||
.rpg-panel[data-theme="fantasy"] .rpg-quests-subtabs,
|
||||
.rpg-panel[data-theme="cyberpunk"] .rpg-quests-subtabs {
|
||||
border-bottom-color: var(--rpg-border);
|
||||
}
|
||||
|
||||
.rpg-panel[data-theme="sci-fi"] .rpg-quests-subtab,
|
||||
.rpg-panel[data-theme="fantasy"] .rpg-quests-subtab,
|
||||
.rpg-panel[data-theme="cyberpunk"] .rpg-quests-subtab {
|
||||
border-color: var(--rpg-border);
|
||||
color: var(--rpg-text);
|
||||
}
|
||||
|
||||
.rpg-panel[data-theme="sci-fi"] .rpg-quests-subtab:hover,
|
||||
.rpg-panel[data-theme="fantasy"] .rpg-quests-subtab:hover,
|
||||
.rpg-panel[data-theme="cyberpunk"] .rpg-quests-subtab:hover {
|
||||
border-color: var(--rpg-highlight);
|
||||
color: var(--rpg-highlight);
|
||||
}
|
||||
|
||||
.rpg-panel[data-theme="sci-fi"] .rpg-quests-subtab.active,
|
||||
.rpg-panel[data-theme="fantasy"] .rpg-quests-subtab.active,
|
||||
.rpg-panel[data-theme="cyberpunk"] .rpg-quests-subtab.active {
|
||||
border-color: var(--rpg-highlight);
|
||||
color: var(--rpg-highlight);
|
||||
}
|
||||
|
||||
/* Apply theme colors to storage locations */
|
||||
.rpg-panel[data-theme="sci-fi"] .rpg-storage-location,
|
||||
.rpg-panel[data-theme="fantasy"] .rpg-storage-location,
|
||||
.rpg-panel[data-theme="cyberpunk"] .rpg-storage-location {
|
||||
border-color: var(--rpg-border);
|
||||
}
|
||||
|
||||
.rpg-panel[data-theme="sci-fi"] .rpg-storage-header,
|
||||
.rpg-panel[data-theme="fantasy"] .rpg-storage-header,
|
||||
.rpg-panel[data-theme="cyberpunk"] .rpg-storage-header {
|
||||
background: var(--rpg-highlight);
|
||||
}
|
||||
|
||||
.rpg-panel[data-theme="sci-fi"] .rpg-storage-content,
|
||||
.rpg-panel[data-theme="fantasy"] .rpg-storage-content,
|
||||
.rpg-panel[data-theme="cyberpunk"] .rpg-storage-content {
|
||||
background: var(--rpg-accent);
|
||||
}
|
||||
|
||||
/* Apply theme colors to buttons */
|
||||
.rpg-panel[data-theme="sci-fi"] .rpg-inventory-edit-btn,
|
||||
.rpg-panel[data-theme="sci-fi"] .rpg-inventory-add-btn,
|
||||
.rpg-panel[data-theme="sci-fi"] .rpg-inventory-remove-btn,
|
||||
.rpg-panel[data-theme="sci-fi"] .rpg-quest-edit,
|
||||
.rpg-panel[data-theme="sci-fi"] .rpg-quest-remove,
|
||||
.rpg-panel[data-theme="sci-fi"] .rpg-add-quest-btn,
|
||||
.rpg-panel[data-theme="fantasy"] .rpg-inventory-edit-btn,
|
||||
.rpg-panel[data-theme="fantasy"] .rpg-inventory-add-btn,
|
||||
.rpg-panel[data-theme="fantasy"] .rpg-inventory-remove-btn,
|
||||
.rpg-panel[data-theme="fantasy"] .rpg-quest-edit,
|
||||
.rpg-panel[data-theme="fantasy"] .rpg-quest-remove,
|
||||
.rpg-panel[data-theme="fantasy"] .rpg-add-quest-btn,
|
||||
.rpg-panel[data-theme="cyberpunk"] .rpg-inventory-edit-btn,
|
||||
.rpg-panel[data-theme="cyberpunk"] .rpg-inventory-add-btn,
|
||||
.rpg-panel[data-theme="cyberpunk"] .rpg-inventory-remove-btn,
|
||||
.rpg-panel[data-theme="cyberpunk"] .rpg-quest-edit,
|
||||
.rpg-panel[data-theme="cyberpunk"] .rpg-quest-remove,
|
||||
.rpg-panel[data-theme="cyberpunk"] .rpg-add-quest-btn {
|
||||
background: var(--rpg-accent);
|
||||
border-color: var(--rpg-border);
|
||||
color: var(--rpg-text);
|
||||
}
|
||||
|
||||
.rpg-panel[data-theme="sci-fi"] .rpg-inventory-add-btn,
|
||||
.rpg-panel[data-theme="sci-fi"] .rpg-add-quest-btn,
|
||||
.rpg-panel[data-theme="fantasy"] .rpg-inventory-add-btn,
|
||||
.rpg-panel[data-theme="fantasy"] .rpg-add-quest-btn,
|
||||
.rpg-panel[data-theme="cyberpunk"] .rpg-inventory-add-btn,
|
||||
.rpg-panel[data-theme="cyberpunk"] .rpg-add-quest-btn {
|
||||
background: transparent;
|
||||
border-color: var(--rpg-highlight);
|
||||
color: var(--rpg-highlight);
|
||||
}
|
||||
|
||||
/* Apply theme colors to inventory/quest items */
|
||||
.rpg-panel[data-theme="sci-fi"] .rpg-inventory-text,
|
||||
.rpg-panel[data-theme="sci-fi"] .rpg-quest-item,
|
||||
.rpg-panel[data-theme="sci-fi"] .rpg-main-quest-display,
|
||||
.rpg-panel[data-theme="fantasy"] .rpg-inventory-text,
|
||||
.rpg-panel[data-theme="fantasy"] .rpg-quest-item,
|
||||
.rpg-panel[data-theme="fantasy"] .rpg-main-quest-display,
|
||||
.rpg-panel[data-theme="cyberpunk"] .rpg-inventory-text,
|
||||
.rpg-panel[data-theme="cyberpunk"] .rpg-quest-item,
|
||||
.rpg-panel[data-theme="cyberpunk"] .rpg-main-quest-display {
|
||||
background: var(--rpg-accent);
|
||||
border-color: var(--rpg-border);
|
||||
color: var(--rpg-text);
|
||||
}
|
||||
|
||||
.rpg-panel[data-theme="sci-fi"] .rpg-quest-item:hover,
|
||||
.rpg-panel[data-theme="fantasy"] .rpg-quest-item:hover,
|
||||
.rpg-panel[data-theme="cyberpunk"] .rpg-quest-item:hover {
|
||||
border-color: var(--rpg-highlight);
|
||||
}
|
||||
|
||||
/* Apply theme colors to hints and empty states */
|
||||
.rpg-panel[data-theme="sci-fi"] .rpg-inventory-hint,
|
||||
.rpg-panel[data-theme="sci-fi"] .rpg-quest-hint,
|
||||
.rpg-panel[data-theme="sci-fi"] .rpg-inventory-empty,
|
||||
.rpg-panel[data-theme="sci-fi"] .rpg-quest-empty,
|
||||
.rpg-panel[data-theme="fantasy"] .rpg-inventory-hint,
|
||||
.rpg-panel[data-theme="fantasy"] .rpg-quest-hint,
|
||||
.rpg-panel[data-theme="fantasy"] .rpg-inventory-empty,
|
||||
.rpg-panel[data-theme="fantasy"] .rpg-quest-empty,
|
||||
.rpg-panel[data-theme="cyberpunk"] .rpg-inventory-hint,
|
||||
.rpg-panel[data-theme="cyberpunk"] .rpg-quest-hint,
|
||||
.rpg-panel[data-theme="cyberpunk"] .rpg-inventory-empty,
|
||||
.rpg-panel[data-theme="cyberpunk"] .rpg-quest-empty {
|
||||
border-color: var(--rpg-highlight);
|
||||
color: var(--rpg-text);
|
||||
}
|
||||
|
||||
/* Apply theme colors to input fields */
|
||||
.rpg-panel[data-theme="sci-fi"] .rpg-inline-input,
|
||||
.rpg-panel[data-theme="sci-fi"] .rpg-quest-edit-form input,
|
||||
.rpg-panel[data-theme="sci-fi"] .rpg-quest-edit-form textarea,
|
||||
.rpg-panel[data-theme="fantasy"] .rpg-inline-input,
|
||||
.rpg-panel[data-theme="fantasy"] .rpg-quest-edit-form input,
|
||||
.rpg-panel[data-theme="fantasy"] .rpg-quest-edit-form textarea,
|
||||
.rpg-panel[data-theme="cyberpunk"] .rpg-inline-input,
|
||||
.rpg-panel[data-theme="cyberpunk"] .rpg-quest-edit-form input,
|
||||
.rpg-panel[data-theme="cyberpunk"] .rpg-quest-edit-form textarea {
|
||||
background: var(--rpg-bg);
|
||||
border-color: var(--rpg-border);
|
||||
color: var(--rpg-text);
|
||||
}
|
||||
|
||||
.rpg-panel[data-theme="sci-fi"] .rpg-inline-input:focus,
|
||||
.rpg-panel[data-theme="sci-fi"] .rpg-quest-edit-form input:focus,
|
||||
.rpg-panel[data-theme="sci-fi"] .rpg-quest-edit-form textarea:focus,
|
||||
.rpg-panel[data-theme="fantasy"] .rpg-inline-input:focus,
|
||||
.rpg-panel[data-theme="fantasy"] .rpg-quest-edit-form input:focus,
|
||||
.rpg-panel[data-theme="fantasy"] .rpg-quest-edit-form textarea:focus,
|
||||
.rpg-panel[data-theme="cyberpunk"] .rpg-inline-input:focus,
|
||||
.rpg-panel[data-theme="cyberpunk"] .rpg-quest-edit-form input:focus,
|
||||
.rpg-panel[data-theme="cyberpunk"] .rpg-quest-edit-form textarea:focus {
|
||||
border-color: var(--rpg-highlight);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user