untitled

untitled.carbide.md

undefined

This Gist was automatically created by Carbide, a free online programming environment.

You can view a live, interactive version of this Gist here.

cell0.js

import React from 'react'
const height = 200;
const width = 200;

class TTTWidget extends React.Component{
    
    static title = 't'
    static match(value, ast){
        return value === 't'
	}

    constructor(props){
        super()
        this.state ={
            cells: [0,1,2,3,4,5,6,7,8,9].reduce((acc,el)=>{
                acc[el] = null;
                return acc
            },{})
        }
    }

    render(){
        alert('x')
        return (
            <div>
        		<div style={{height,width,flexWrap:'wrap',flexDirection:'row'}}>
                    {Object.keys(this.state.cells).map((c,cell) => {
                        return (
                        	<div data-cell={cell} 
                                style={{
                                    height:height/3,
                                        flex:1,
                                    width:width/3,
                                        display:'inline-flex',
                                        border: '0px solid #000000',
                                        borderLeftWidth: cell % 3 === 0 ? 0 : 1,
                                        borderTopWidth: cell < 3 ? 0 : 1,
                                        borderRightWidth: cell % 3 === 2 ? 0 : 1,
                                        borderBottomWidth: cell > 5 ? 0 : 1,
                                }}>
                                {this.state.cells[cell]}
                            </div>
                        )
                    })}
                </div>
        
        	</div>
        )
    }
}
doc.kernel.widgets.push(TTTWidget)

cell1.js

<TTTWidget/>

cell2.js

var hi;
hi = 't'