PHASE 17: UI Theme - Complete rustic/post-apo color palette, typography, borders, panel templates
This commit is contained in:
@@ -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>
|
||||
|
||||
230
src/ui/UITheme.js
Normal file
230
src/ui/UITheme.js
Normal file
@@ -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)');
|
||||
Reference in New Issue
Block a user