54 lines
1.9 KiB
JavaScript
54 lines
1.9 KiB
JavaScript
/**
|
|
* Gemeinsame Text- und Farbstile für Canvas-Texte (Menüs, HUD).
|
|
*
|
|
* Es werden bewusst nur Systemschriften verwendet: Nichts wird mitgeliefert, also
|
|
* gibt es keine Lizenzfragen, und die Buchstaben sind eindeutig lesbar (die
|
|
* Tastenhinweise „Q“, „X“ oder „K“ dürfen nicht wie „O“ oder „H“ aussehen).
|
|
* @module ui/theme
|
|
*/
|
|
|
|
export const UI = Object.freeze({
|
|
/** Plakatschrift für Titel und große Zahlen. */
|
|
titleFont: 'Impact, Haettenschweiler, "Arial Narrow Bold", "Arial Black", sans-serif',
|
|
/** Gut lesbare Schrift für HUD, Tabellen und Fließtext. */
|
|
uiFont: '"Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif',
|
|
/** Für Pfeile und Symbole. */
|
|
symbolFont: '"Segoe UI Symbol", "Segoe UI", system-ui, sans-serif',
|
|
colors: Object.freeze({
|
|
gold: '#f2c14e',
|
|
cream: '#f4ecd8',
|
|
crimson: '#c1121f',
|
|
muted: '#a9b1c4',
|
|
navy: '#0d1321',
|
|
danger: '#ff6b5a',
|
|
ok: '#5ad469',
|
|
cyan: '#9be7ff',
|
|
}),
|
|
/** Standard-Textstil (Titelschrift) mit dunkler Kontur für Lesbarkeit auf jedem Hintergrund. */
|
|
text: Object.freeze({
|
|
fontFamily: 'Impact, Haettenschweiler, "Arial Narrow Bold", "Arial Black", sans-serif',
|
|
fontSize: '20px',
|
|
color: '#f4ecd8',
|
|
stroke: '#0d1321',
|
|
strokeThickness: 4,
|
|
}),
|
|
});
|
|
|
|
/**
|
|
* Titelschrift-Stil mit Änderungen.
|
|
* @param {Partial<Phaser.Types.GameObjects.Text.TextStyle>} overrides
|
|
* @returns {Phaser.Types.GameObjects.Text.TextStyle}
|
|
*/
|
|
export function textStyle(overrides = {}) {
|
|
return { ...UI.text, ...overrides };
|
|
}
|
|
|
|
/**
|
|
* Wie {@link textStyle}, aber in der gut lesbaren, fetten UI-Schrift (HUD, Tabellen, Fließtext).
|
|
* @param {Partial<Phaser.Types.GameObjects.Text.TextStyle>} overrides
|
|
* @returns {Phaser.Types.GameObjects.Text.TextStyle}
|
|
*/
|
|
export function uiStyle(overrides = {}) {
|
|
return { ...UI.text, fontFamily: UI.uiFont, fontStyle: 'bold', ...overrides };
|
|
}
|