selectable button

src/ui/button.ts

@@ -2,26 +2,30 @@ export interface ButtonConfig {
 	width: number;
 	height: number;
 	states: ButtonStates;
+	selectedStates?: ButtonStates;
 	textColor: string;
 	fontSize: string;
-}
-
-export interface ButtonState {
-	fill: number;
-	alpha?: number;
+	selectable?: boolean;
 }
 
 export interface ButtonStates {
-	up: ButtonState;
-	over: ButtonState;
-	down: ButtonState;
+	up: number;
+	over: number;
+	down: number;
 }
 
 export class Button extends Phaser.Group {
+	private readonly config: ButtonConfig;
 	private readonly graphics: Phaser.Graphics;
+	private _selected: boolean;
 
-	constructor(game: Phaser.Game, text: string, private readonly config: ButtonConfig, parent: Phaser.Group) {
+	constructor(game: Phaser.Game, text: string, config: ButtonConfig, parent: Phaser.Group) {
 		super(game, parent);
+		if (config.selectable) {
+			config.selectedStates = Object.assign({}, config.states, config.selectedStates);
+			this._selected = false;
+		}
+		this.config = config;
 		this.graphics = this.createGraphics(game, config);
 		this.createLabel(game, text, config);
 		this.setState('up');
@@ -35,13 +39,18 @@ export class Button extends Phaser.Group {
 		const e = g.events;
 
 		e.onInputOver.add(() => this.setState('over'));
-		e.onInputOut.add(() => this.setState('up'));
+		e.onInputOut.add(() => this.setState('up'), this);
 		e.onInputDown.add(() => this.setState('down'));
-		e.onInputUp.add(() => this.setState(g.input.pointerOver() ? 'over' : 'up'));
+		e.onInputUp.add(this.onClick, this);
 
 		return g;
 	}
 
+	private onClick() {
+		if (this.config.selectable) this._selected = !this._selected;
+		this.setState(this.graphics.input.pointerOver() ? 'over' : 'up');
+	}
+
 	private createLabel(game: Phaser.Game, text: string, config: ButtonConfig) {
 		const px = config.width * 0.5;
 		const py = config.height * 0.5;
@@ -57,9 +66,8 @@ export class Button extends Phaser.Group {
 	}
 
 	private setState(state: keyof ButtonStates) {
-		const st = this.config.states[state];
 		this.graphics.clear()
-			.beginFill(st.fill, st.alpha)
+			.beginFill(this._selected ? this.config.selectedStates[state] : this.config.states[state], 1)
 			.drawRect(0, 0, this.config.width, this.config.height)
 			.endFill();
 	}

src/ui/toolbar.ts

@@ -4,14 +4,10 @@ export class ToolBar extends Phaser.Group {
 	constructor(game: Phaser.Game, parent: Phaser.Group) {
 		super(game, parent);
 		const button = new Button(game, 'EDIT', {
-			width: 50, height: 20,
-			states: {
-				up: { fill: 0x00548C, alpha: 0.5 },
-				over: { fill: 0x00548C },
-				down: { fill: 0x001F33 }
-			},
-			fontSize: '10px',
-			textColor: '#FFFFFF',
+			width: 50, height: 20, fontSize: '10px', textColor: '#FFFFFF',
+			selectable: true,
+			states: { up: 0x37474F, over: 0x78909C, down: 0x78909C, },
+			selectedStates: { up: 0xA74D4B, over: 0xF56462, down: 0xF56462, },
 		}, this);
 	}
 }