Phaser bpt widget base (work in progress)

bpt_widget.ts

    // Author Brad P. Taylor (bradptaylor+github@gmail.com) license MIT

    export class WidgetPartDef<T> {
        constructor( public Type:T, public regex:RegExp, public required:boolean = true ) {}
    }

    export class Widget<T> extends Panel {

        constructor(game, public parts:T ) {

            super(game);

        }

        resolveParts = _.once( () => {

            for ( var p in this.parts ) {

                var part:WidgetPartDef<any> = this.parts[p];

                this.parts[p] = this.findFirstMatchingDecendantOfType( part.regex, 'name', part.Type );

                if ( (undefined === this.parts[p]) && part.required ) {

                    throw "missing " + part.Type.prototype.constructor.name;

                } else {

                    this[ p ] = this.parts[ p ];

                }

            }

        } );

    }

Okay this one is a bit involved because I haven't yet figured how to coax typescript generics into allowing me to extend types based on generic parameter. So I worked around this in a possibly bizarre way not sure if this is horrible or good yet... Anyway what this widget base does it provide a way to use the bpt.prefab system to manage content then automatically inject members into the widget.

Here is an example

    export class PartsForSpinnerWidget {
        minus:any = new WidgetPartDef( prefab.GroupButton, /minus|left/ );
        plus:any = new WidgetPartDef( prefab.GroupButton, /plus|right/ );
        well:any = new WidgetPartDef( Phaser.Image, /well/ );
    }

    export class SpinnerWidget extends Widget< PartsForSpinnerWidget > {

        onValueChange:Phaser.Signal;
        _value:number;
        _upper_:number = 9;
        _lower_:number = 0;
        _textDisplay:Phaser.Text;
        minus:prefab.GroupButton;
        plus:prefab.GroupButton;
        well:Phaser.Image;

        constructor(game,config) {

            super( game, new PartsForSpinnerWidget() );

            this.onValueChange = this.createSignal();
            this.onValueChange.add( this.onValueChangeHandler, this );

            this.addOnceUpdate( true, this, () => {

                prefab.configPrefab( this, config );

                this.resolveParts();

                this.minus.events.onInputDown.add( () => {
                    --this.value;
                });

                this.plus.events.onInputDown.add( () => {
                    ++this.value;
                });

                this._textDisplay = this.game.add.text( 0, 0, undefined, null );
                this._textDisplay.anchor.set(0.5,0.5);

                this.add( this._textDisplay );
                this.value = this._lower_;

            });

        }

        displayStringForValue( value ) {
            return value.toString();
        }

        onValueChangeHandler() {
            this._textDisplay.setText( this.displayStringForValue(this._value) );
            this._textDisplay.x = Number(this.well.x) + Number(this.well.width)/2;
            this._textDisplay.y = Number(this.well.y) + Number(this.well.height)/2;
        }

        get value():number {
            return this._value;
        }

        set value( n:number ) {
            n = Math.max( this._lower_, Math.min( n, this._upper_ ));
            if ( n != this._value ) {
                this._value = n;
                this.onValueChange.dispatch( this, n);
            }
        }

    }

    // ------------------------------------------------------------------------

    export class CounterWidget extends SpinnerWidget {
        constructor( game ) { super( game,  "counter_widget_contents.json" ); }
    }

    bpt.prefab.Factory.addTwin( 'CounterWidget', CounterWidget, 'Panel' );

    export class ColorSelectorWidget extends SpinnerWidget {

        colorNames:string[];

        constructor( game ) {

            super( game,  "color_spinner_widget_contents.json" );

            this.addOnceUpdate( true, this, () => {
                if ( !this.colorNames || (this._upper_ >= this.colorNames.length) ) {
                    throw "bad color spinner configuration";
                }
            });

        }

        displayStringForValue( value ) {

            return this.colorNames[value].toString();

        }

    }

    bpt.prefab.Factory.addTwin( 'ColorSelectorWidget', ColorSelectorWidget, 'Panel' );

counter_widget_contents.json

{
    "contents": {
        "GroupButton": [
            {
                "image": {
                    "id": "counter_plus_up",
                    "x": "0",
                    "y": "0",
                    "key": "counter_plus_up.png",
                    "z": "115"
                },
                "id": "counter_plus",
                "x": "102",
                "y": "8",
                "z": "114"
            },
            {
                "image": {
                    "id": "counter_minus_up",
                    "x": "0",
                    "y": "0",
                    "key": "counter_minus_up.png",
                    "z": "118"
                },
                "id": "counter_minus",
                "x": "0",
                "y": "8",
                "z": "117"
            }
        ],
        "image": {
            "id": "counter_number_well",
            "x": "52",
            "y": "0",
            "key": "counter_number_well.png",
            "z": "116"
        }
    }
}

counter_spinner_widget_contents.json

{
    "config": {
        "_lower_":0,
        "_upper_":2
    },
    "mixin" : {
        "colorNames":[
            {"display":"White","r":255,"g":255,"b":255},
            {"display":"Black","r":0,"g":0,"b":0},
            {"display":"Grey","r":128,"g":128,"b":128}
        ]
    },
    "contents": {
        "GroupButton": [
            {
                "image": {
                    "id": "color_widget_left_up",
                    "x": "0",
                    "y": "0",
                    "key": "color_widget_left_up.png",
                    "z": "121"
                },
                "id": "color_widget_left",
                "x": "0",
                "y": "0",
                "z": "120"
            },
            {
                "image": {
                    "id": "color_widget_right_up",
                    "x": "0",
                    "y": "0",
                    "key": "color_widget_right_up.png",
                    "z": "124"
                },
                "id": "color_widget_right",
                "x": "165",
                "y": "0",
                "z": "123"
            }
        ],
        "image": {
            "id": "color_widget_well",
            "x": "51",
            "y": "0",
            "key": "color_widget_well.png",
            "z": "122"
        }
    }
}