Example #1
0
    render() {
        const {trigger, active} = this.props

        return (
            div({className: `_piece switcher ${!active ? 'inactive-switcher' : ''}`},
                div({className: `trigger ${trigger === 0 ? 'horizontal' : 'vertical'}`},
                    div(),
                    div()
                )
            )
        )
    }
Example #2
0
 render() {
     const {direction, trigger} = this.props
     return (
         div({className: `_piece mover ${this.parse(direction)}`},
             Icon({icon: `chevron-${this.parse(direction)}-thin`}),
             
             div({className: `trigger ${trigger === 0 ? 'horizontal' : 'vertical'}`},
                 div(),
                 div()
             )
         )
     )
 }
Example #3
0
    /**
     * Generate the HTML to be mounted in DOM
     *
     * @returns HTML Generators
     */
    render() {
        const {board: {rows, columns, pieces, style: {width, height}}, scale} = this.state

        return (
            div({className: 'game'},
                div({className: 'board', ref: "board"},
                    _.map(_.range(0, rows), (key, _i) => (
                            div({className: 'row', key, style: {height}},
                                _.map(_.range(0, columns), (key, i) => (
                                        div({className: `block ${(i + _i) % 2 === 0 ? 'dark' : ''}`, key, style: {width}})
                                    )
                                )
                            )
                        )
                    ),

                    _.map(pieces, ({top, left, id, type, index}) => (
                            Motion({
                                    defaultStyle: {
                                        left,
                                        top
                                    },
                                    style: {
                                        top: spring(top),
                                        left: spring(left)
                                    },
                                    key: id
                                },
                                ({left, top}) => (
                                    div({
                                        key: id,
                                        className: "piece",
                                        style: {
                                            left: `${left}px`,
                                            top: `${top}px`,
                                            width: width * scale,
                                            height: height * scale
                                        }
                                    }, Piece({type, dark: (index + 1) % 2 !== 0, scale, width, id}))
                                )
                            )
                        )
                    )
                )
            )
        )
    }
Example #4
0
 _.map(_.range(0, rows), (key, _i) => (
         div({className: 'row', key, style: {height}},
             _.map(_.range(0, columns), (key, i) => (
                     div({className: `block ${(i + _i) % 2 === 0 ? 'dark' : ''}`, key, style: {width}})
                 )
             )
         )
     )
Example #5
0
    render() {
        const {active} = this.props

        return (
            div({className: `_piece port${!active ? ' inactive-port' : ''}`},
                Icon({icon: 'close-thin'})
            )
        )
    }
Example #6
0
 ({left, top}) => (
     div({
         key: id,
         className: "piece",
         style: {
             left: `${left}px`,
             top: `${top}px`,
             width: width * scale,
             height: height * scale
         }
     }, Piece({type, dark: (index + 1) % 2 !== 0, scale, width, id}))
 )
Example #7
0
 _.map(_.range(0, columns), (key, i) => (
         div({className: `block ${(i + _i) % 2 === 0 ? 'dark' : ''}`, key, style: {width}})
     )