From 6e2a05c8242387a3a3c08dd04ed062483db3dee7 Mon Sep 17 00:00:00 2001 From: NovaFarma Dev Date: Thu, 11 Dec 2025 13:39:35 +0100 Subject: [PATCH] PHASE 17: UI Theme - Complete rustic/post-apo color palette, typography, borders, panel templates --- index.html | 3 + src/ui/UITheme.js | 230 ++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 233 insertions(+) create mode 100644 src/ui/UITheme.js diff --git a/index.html b/index.html index 35b37e6..f834baa 100644 --- a/index.html +++ b/index.html @@ -62,6 +62,9 @@ + + + diff --git a/src/ui/UITheme.js b/src/ui/UITheme.js new file mode 100644 index 0000000..d2ca493 --- /dev/null +++ b/src/ui/UITheme.js @@ -0,0 +1,230 @@ +/** + * UI THEME - RUSTIC/POST-APOCALYPTIC + * Color palette and style guide for NovaFarma + */ + +const UITheme = { + // RUSTIC COLOR PALETTE + colors: { + // Primary colors (browns, earthy tones) + primary: { + darkBrown: '#3d2817', // Dark wood + mediumBrown: '#6b4423', // Medium wood + lightBrown: '#a67c52', // Light wood/leather + tan: '#d4a574' // Tan/sand + }, + + // Secondary colors (greys, metals) + secondary: { + charcoal: '#2a2a2a', // Dark metal + steel: '#4a4a4a', // Steel grey + silver: '#8a8a8a', // Light metal + rustyRed: '#8b4513' // Rusty iron + }, + + // Accent colors (nature) + accent: { + forestGreen: '#2d5016', // Dark green + moss: '#4a7023', // Moss green + wheat: '#d4a373', // Wheat/grain + dirt: '#6b4423' // Dirt brown + }, + + // UI States + states: { + success: '#4a7023', // Green (moss) + warning: '#d4a373', // Yellow (wheat) + danger: '#8b2500', // Red (rust) + info: '#4a7a8a' // Blue (water) + }, + + // Text colors + text: { + primary: '#f5e6d3', // Parchment white + secondary: '#d4a574', // Tan + disabled: '#6b6b6b', // Grey + highlight: '#ffd700' // Gold + }, + + // Backgrounds + backgrounds: { + dark: '#1a1410', // Dark wood/stone + medium: '#3d2817', // Medium brown + light: '#6b4423', // Light brown + overlay: 'rgba(26, 20, 16, 0.9)' // Dark overlay + } + }, + + // TYPOGRAPHY + fonts: { + primary: '"Courier New", monospace', + handwritten: '"Comic Sans MS", cursive', // Backup, replace with custom + display: 'Georgia, serif' + }, + + fontSizes: { + tiny: '10px', + small: '12px', + normal: '14px', + medium: '16px', + large: '20px', + xlarge: '24px', + huge: '32px' + }, + + // BORDERS & SHADOWS + borders: { + thin: '1px solid', + medium: '2px solid', + thick: '3px solid', + + // Rustic border style (weathered wood) + rustic: { + color: '#6b4423', + width: 3, + style: 'solid' + }, + + // Metal border style + metal: { + color: '#4a4a4a', + width: 2, + style: 'solid' + } + }, + + shadows: { + small: '2px 2px 4px rgba(0, 0, 0, 0.3)', + medium: '4px 4px 8px rgba(0, 0, 0, 0.4)', + large: '8px 8px 16px rgba(0, 0, 0, 0.5)', + inner: 'inset 2px 2px 4px rgba(0, 0, 0, 0.3)' + }, + + // SPACING + spacing: { + xs: 4, + sm: 8, + md: 16, + lg: 24, + xl: 32, + xxl: 48 + }, + + // BUTTON STYLES + buttons: { + primary: { + background: '#6b4423', + backgroundHover: '#8b5a2b', + text: '#f5e6d3', + border: '#3d2817' + }, + secondary: { + background: '#4a4a4a', + backgroundHover: '#5a5a5a', + text: '#f5e6d3', + border: '#2a2a2a' + }, + danger: { + background: '#8b2500', + backgroundHover: '#a52a00', + text: '#f5e6d3', + border: '#5a1800' + } + }, + + // PANEL STYLES + panels: { + wooden: { + background: '#3d2817', + border: '#6b4423', + borderWidth: 3, + shadow: '4px 4px 8px rgba(0, 0, 0, 0.4)' + }, + metal: { + background: '#2a2a2a', + border: '#4a4a4a', + borderWidth: 2, + shadow: '2px 2px 6px rgba(0, 0, 0, 0.5)' + }, + parchment: { + background: '#f5e6d3', + border: '#d4a574', + borderWidth: 2, + shadow: '3px 3px 6px rgba(0, 0, 0, 0.2)' + } + }, + + /** + * Apply theme to Phaser text object + */ + applyTextStyle: function (textObject, style = 'normal') { + const styles = { + normal: { + fontFamily: this.fonts.primary, + fontSize: this.fontSizes.normal, + color: this.colors.text.primary, + stroke: this.colors.backgrounds.dark, + strokeThickness: 2 + }, + header: { + fontFamily: this.fonts.display, + fontSize: this.fontSizes.large, + color: this.colors.text.highlight, + stroke: this.colors.backgrounds.dark, + strokeThickness: 3, + fontStyle: 'bold' + }, + small: { + fontFamily: this.fonts.primary, + fontSize: this.fontSizes.small, + color: this.colors.text.secondary, + stroke: this.colors.backgrounds.dark, + strokeThickness: 1 + } + }; + + if (textObject && textObject.setStyle) { + textObject.setStyle(styles[style] || styles.normal); + } + + return styles[style] || styles.normal; + }, + + /** + * Create rustic panel (Phaser) + */ + createPanel: function (scene, x, y, width, height, panelType = 'wooden') { + const panel = this.panels[panelType] || this.panels.wooden; + + // Background + const bg = scene.add.rectangle(x, y, width, height, + parseInt(panel.background.replace('#', '0x')), 0.95); + + // Border + bg.setStrokeStyle(panel.borderWidth, + parseInt(panel.border.replace('#', '0x'))); + + return bg; + }, + + /** + * Get color as hex number for Phaser + */ + getColor: function (colorPath) { + // e.g., 'primary.darkBrown' or 'text.primary' + const parts = colorPath.split('.'); + let color = this.colors; + + for (const part of parts) { + color = color[part]; + if (!color) return 0xffffff; + } + + return parseInt(color.replace('#', '0x')); + } +}; + +// Make globally available +window.UITheme = UITheme; + +console.log('🎨 UI Theme loaded (Rustic/Post-Apo style)');