83 lines
1.9 KiB
JavaScript
83 lines
1.9 KiB
JavaScript
import { Component } from "react";
|
|
import '../styles/styles.css'
|
|
|
|
class Cell extends Component {
|
|
|
|
constructor(props) {
|
|
super(props);
|
|
this.state = {
|
|
h: props.h,
|
|
v: props.v,
|
|
color: "white",
|
|
}
|
|
}
|
|
|
|
changeColor() {
|
|
if (this.state.color === "white")
|
|
this.setState({color: "green"});
|
|
else
|
|
this.setState({color: "white"});
|
|
this.props.parent.props.parent.update();
|
|
}
|
|
|
|
shoot() {
|
|
|
|
}
|
|
|
|
click() {
|
|
if (!this.props.changeable) return;
|
|
if (this.props.parent.props.ready)
|
|
this.shoot();
|
|
else
|
|
this.changeColor();
|
|
}
|
|
|
|
render() {
|
|
this.props.parent.cells.push(this);
|
|
this.props.parent.cells.sort((a, b) => a.key < b.key);
|
|
console.log(this.props.parent.cells.length);
|
|
return (
|
|
<button style={{backgroundColor: this.state.color}} onClick={() => this.click()} className="cell"></button>
|
|
)
|
|
}
|
|
}
|
|
|
|
class Field extends Component {
|
|
|
|
constructor(props) {
|
|
super(props);
|
|
|
|
props.parent.field = this;
|
|
|
|
this.getLine = () => {
|
|
let line = "";
|
|
for (let i = 0; i < 100; i++) {
|
|
line += this.cells.at(i).state.color === "white" ? " " : "o";
|
|
}
|
|
return line;
|
|
}
|
|
|
|
}
|
|
|
|
render() {
|
|
this.cells = [];
|
|
let cells = [];
|
|
for (let i = 0; i < 10; i++) {
|
|
let line = []
|
|
for (let j = 0; j < 10; j++) {
|
|
const cell = <Cell parent={this} changeable={this.props.changeable} key={(i * 10 + j)} h={i} v={j} />;
|
|
line.push(<td key={(i * 10 + j) * 100}>{cell}</td>);
|
|
}
|
|
cells.push(<tr key={(i * 100000)}>{line}</tr>);
|
|
}
|
|
return (
|
|
<table>
|
|
<tbody>
|
|
{cells}
|
|
</tbody>
|
|
</table>
|
|
)
|
|
}
|
|
}
|
|
|
|
export default Field; |