<commit_before>'use strict';

const cellStates = {
	x: 'x',
	o: 'o',
	_: '_'
};

const getDefaultMatrix = function (x) {
	var arr = [];
	var res = [];
	if (x) {
		for (var i = 0; i < x; i++) {
			arr.push(new Array(x));
		}
		for (i = 0; i < x; i++) {
			for (var y = 0; y < x; y++) {
				arr[i][y] = cellStates._;
			}
		}
		res = arr;
	} else {
		res = [
				[cellStates._, cellStates._, cellStates._], 
				[cellStates._, cellStates._, cellStates._], 
				[cellStates._, cellStates._, cellStates._]
			];
	};
	return res;
	};

const Box = React.createClass({
	getInitialState: function () {
		return {
			size: 3,
			player: cellStates.x,
			matrix: getDefaultMatrix(3)
		};
	},
	changePlayer: function () {
		const player = (this.state.player === cellStates.x)? cellStates.o : cellStates.x;
		this.setState({player: player});
	},
	changeStateOfCell: function (x, y) {
		const playerSimbol = (this.state.player == cellStates.x) 
								? cellStates.x 
								: cellStates.o;
		var matrix = this.state.matrix;
		matrix[x][y] = (matrix[x][y] == cellStates._)
							? playerSimbol
							: cellStates._;
		this.setState({matrix: matrix});
	},
	restartAll: function () {
		const matrix = getDefaultMatrix(this.state.size);
		const player = cellStates.x;
		this.setState({matrix: matrix, player: player});
	},
	setMatrixSize: function (matrixSize) {
		const ms = matrixSize;
		this.setState({size: ms});
		this.restartAll();
	},
	render: function () {
		// todo: add buttons Layer
		const matrix = this.state.matrix;
		return (<div>
				<table className="table table-bordered table-hover">
					<tbody>
						{matrix.map(function(row, index){ 
							return <Row cells={row} changeStateOfCell={this.changeStateOfCell} rowindex={index} />; 
						}, this)}
					</tbody>
				</table>
				<Player changePlayer={this.changePlayer} player={this.state.player} />
				<Restart restart={this.restartAll} />
				<Size matrixSize={this.state.size} setMatrixSize={this.setMatrixSize} />
			</div>
			);
	}
});

const Row = React.createClass({
	rowCellOnClick: function (x, y) {
		this.props.changeStateOfCell(x, y);
	},
	render: function () {
		const cells = this.props.cells;
		const rowIndex = this.props.rowindex;
		return (<tr>
				{cells.map(function(cell, index){
					return <Cell item={cell} rowCellOnClick={this.rowCellOnClick} rowindex={rowIndex} cellindex={index} />;
				}, this)}
			</tr>);
	}
});

const Cell = React.createClass({
	handlerOnClick: function () {
		const x = this.props.rowindex;
		const y = this.props.cellindex;
		this.props.rowCellOnClick(x, y);
	},
	render: function () {
		const item = this.props.item;
		return (<td onClick={this.handlerOnClick} className="text-center cell">{item}</td>);
	}
});

const Player = React.createClass({
	render: function () {
		const player = this.props.player;
		return (<span>
			<p className="bg-primary">Player: {player}</p>
			<button className="btn-lg btn-default" onClick={this.props.changePlayer}>Change Player</ button>
			</span>);
	}
});

const Restart = React.createClass({
	render: function () {
		return (<button className="btn-sm btn-default" onClick={this.props.restart}>Restart</button>);
	}
});

const Size = React.createClass({
	setSize: function () {
		const s = this.refs.sizem.value;
		this.props.setMatrixSize(s);
	},
	render: function () {
		return (<div>
			<hr />
			<input type="text" name="size" ref="sizem" defaultValue={this.props.matrixSize} />
			<button onClick={this.setSize}>Set Size</button>
			</div>);
	}
});

ReactDOM.render(
	<Box />,
  	document.getElementById('xo')
);<commit_msg>change layout via botstrap<commit_after>'use strict';

const cellStates = {
	x: 'x',
	o: 'o',
	_: '_'
};

const getDefaultMatrix = function (x) {
	var arr = [];
	var res = [];
	if (x) {
		for (var i = 0; i < x; i++) {
			arr.push(new Array(x));
		}
		for (i = 0; i < x; i++) {
			for (var y = 0; y < x; y++) {
				arr[i][y] = cellStates._;
			}
		}
		res = arr;
	} else {
		res = [
				[cellStates._, cellStates._, cellStates._], 
				[cellStates._, cellStates._, cellStates._], 
				[cellStates._, cellStates._, cellStates._]
			];
	};
	return res;
	};

const Box = React.createClass({
	getInitialState: function () {
		return {
			size: 3,
			player: cellStates.x,
			matrix: getDefaultMatrix(3)
		};
	},
	changePlayer: function () {
		const player = (this.state.player === cellStates.x)? cellStates.o : cellStates.x;
		this.setState({player: player});
	},
	changeStateOfCell: function (x, y) {
		const playerSimbol = (this.state.player == cellStates.x) 
								? cellStates.x 
								: cellStates.o;
		var matrix = this.state.matrix;
		matrix[x][y] = (matrix[x][y] == cellStates._)
							? playerSimbol
							: cellStates._;
		this.setState({matrix: matrix});
	},
	restartAll: function () {
		const matrix = getDefaultMatrix(this.state.size);
		const player = cellStates.x;
		this.setState({matrix: matrix, player: player});
	},
	setMatrixSize: function (matrixSize) {
		const ms = matrixSize;
		this.setState({size: ms});
		this.restartAll();
	},
	render: function () {
		// todo: add buttons Layer
		const matrix = this.state.matrix;
		return (<div>
				<table className="table table-bordered table-hover">
					<tbody>
						{matrix.map(function(row, index){ 
							return <Row cells={row} changeStateOfCell={this.changeStateOfCell} rowindex={index} />; 
						}, this)}
					</tbody>
				</table>
				<Player changePlayer={this.changePlayer} player={this.state.player} />
				<Restart restart={this.restartAll} />
				<Size matrixSize={this.state.size} setMatrixSize={this.setMatrixSize} />
			</div>
			);
	}
});

const Row = React.createClass({
	rowCellOnClick: function (x, y) {
		this.props.changeStateOfCell(x, y);
	},
	render: function () {
		const cells = this.props.cells;
		const rowIndex = this.props.rowindex;
		return (<tr>
				{cells.map(function(cell, index){
					return <Cell item={cell} rowCellOnClick={this.rowCellOnClick} rowindex={rowIndex} cellindex={index} />;
				}, this)}
			</tr>);
	}
});

const Cell = React.createClass({
	handlerOnClick: function () {
		const x = this.props.rowindex;
		const y = this.props.cellindex;
		this.props.rowCellOnClick(x, y);
	},
	render: function () {
		const item = this.props.item;
		return (<td onClick={this.handlerOnClick} className="text-center cell">{item}</td>);
	}
});

const Player = React.createClass({
	render: function () {
		const player = this.props.player;
		return (<span>
			<p className="bg-primary">Player: {player}</p>
			<button className="btn btn-primary" onClick={this.props.changePlayer}>Change Player</ button>
			</span>);
	}
});

const Restart = React.createClass({
	render: function () {
		return (<button className="btn btn-default" onClick={this.props.restart}>Restart</button>);
	}
});

const Size = React.createClass({
	setSize: function (e) {
		e.preventDefault();
		const s = this.refs.sizem.value;
		this.props.setMatrixSize(s);
	},
	render: function () {
		return (
			<form className="form-inline">
			<hr />
			  <div className="form-group">
			    <label htmlFor="sizeId">Size</label>
			    <input 	type="text" 
			    		className="form-control" 
			    		name="size" 
			    		ref="sizem" 
			    		defaultValue={this.props.matrixSize} 
			    		id="sizeId" 
			    		placeholder="Size" />
			  </div>
			  <button onClick={this.setSize} className="btn btn-default">Set Size</button>
			</form>
			);
	}
});

ReactDOM.render(
	<Box />,
  	document.getElementById('xo')
);
{'fraction_non_alphanumeric': 0.17415203110336505, 'fraction_numerical': 0.001340662287169862, 'mean_word_length': 3.4063792085056113, 'pattern_counts': {'":': 0, '<': 73, '<?xml version=': 0, '>': 67, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1611644', 'n_tokens_mistral': 2985, 'n_tokens_neox': 2614, 'n_words': 542}