Buster Bros

J.dc 'Main',
    mixins: [J.Routable]

    render: ->
        $$ ('div'),
            style:
                fontFamily: 'helvetica neue'
                textAlign: 'center'

            $$ ('div'),
                style:
                    fontWeight: 'bold'
                    marginBottom: 20
                ("Welcome to Buster Bros!")

            $$ ('Buster')


J.dc 'Buster',
    props:
        size:
            type: J.$number
            default: 512

    state:
        born:
            default: -> new Date().getTime()

        busted:
            type: J.$bool
            default: false

    reactives:
        lifetime:
            type: J.$number
            val: ->
                if not @busted()
                    J.util.invalidateAtTime 100
                new Date().getTime() - @born()

        size:
            type: J.$number
            val: -> @prop.size() + 4 * @lifetime() / 1000

        splittable:
            type: J.$bool
            val: -> @size() >= 64


    render: ->
        if @busted()
            if @splittable()
                $$ ('div'),
                    style:
                        display: 'inline-block'
                        verticalAlign: 'top'

                    $$ ('Buster'),
                        size: @size() / 2
                    $$ ('Buster'),
                        size: @size() / 2
                    $$ ('br')
                    $$ ('Buster'),
                        size: @size() / 2
                    $$ ('Buster'),
                        size: @size() / 2
            else
                $$ ('span'),
                    {}
                    ("X")

        else
            $$ ('div'),
                style:
                    display: 'inline-block'
                    verticalAlign: 'top'

                $$ ('button'),
                    style:
                        margin: 8
                        textAlign: 'center'
                        width: @size()
                        height: @size()
                        fontSize: 14
                        fontWeight: 'bold'
                        background: if not @splittable() then 'red'
                        cursor: 'pointer'
                    onClick: =>
                        @busted true

                    ("Bust")