PHASE 17: UI Theme - Complete rustic/post-apo color palette, typography, borders, panel templates

index.html

@@ -62,6 +62,9 @@
     <!-- Phaser 3 -->
     <script src="node_modules/phaser/dist/phaser.js"></script>
 
+    <!-- UI Theme -->
+    <script src="src/ui/UITheme.js"></script>
+
     <!-- Utilities -->
     <script src="src/utils/PerlinNoise.js"></script>
     <script src="src/utils/IsometricUtils.js"></script>

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)');