new

src/components/Field.js

@@ -9,7 +9,8 @@ class Cell extends Component {
         this.state = {
             h: props.h,
             v: props.v,
-            shotState: props.shotState
+            shotState: props.shotState,
+            changeable: props.changeable
         }
         if (this.state.shotState === "x") {
             this.state.color = "red";
@@ -18,7 +19,13 @@ class Cell extends Component {
         } else {
             this.state.color = "white";
         }
-        this.symb = " ";
+    }
+
+    componentWillReceiveProps(props) {
+        this.setState({
+            shotState: props.shotState,
+            changeable: props.changeable
+        })
     }
 
     changeColor() {
@@ -35,21 +42,30 @@ class Cell extends Component {
     }
 
     shoot() {
-
+        this.props.parent.setState({
+            changeable: false
+        })
         request("shoot", {
             game_id: localStorage.getItem("gameId"),
             token: localStorage.getItem("token"),
             h: this.props.h,
             v: this.props.v
         }, (response) => {
+            if (response.shot) {
                 this.setState({
-                color: response.shoot ? "red" : "grey"
+                    shotState: "x",
                 })
+            } else {
+                this.setState({
+                    shotState: "."
+                })
+            }
         })
     }
 
     click() {
-        if (!this.props.changeable) return;
+        if (!this.state.changeable) return;
+        if (this.state.shotState !== " ") return;
         if (this.props.parent.props.ready)
             this.shoot();
         else
@@ -57,11 +73,16 @@ class Cell extends Component {
     }
 
     render() {
-        if (!this.props.parent.cells.includes(this))
-            this.props.parent.cells.push(this);
-        this.props.parent.cells.sort((a, b) => a.key < b.key);
+        let color = "white";
+        if (this.state.shotState === "x") {
+            color = "red";
+        } else if (this.state.shotState === "o") {
+            color = "darkcyan";
+        } else if (this.state.shotState === ".") {
+            color = "gray";
+        } 
         return (
-            <button style={{backgroundColor: this.state.color}} onClick={() => this.click()} className="cell"></button>
+            <button style={{backgroundColor: color}} onClick={() => this.click()} className="cell"></button>
         )
     }
 }
@@ -86,18 +107,28 @@ class Field extends Component {
         }
 
         this.state = {
-            cells: this.props.cells
+            cells: this.props.cells,
+            changeable: props.changeable
         }
 
     }
 
+    componentWillReceiveProps(props) {
+        this.setState({
+            changeable: props.changeable
+        })
+    }
+
     render() {
-        this.cells = [];
         let cells = [];
         for (let i = 0; i < 10; i++) {
             let line = []
             for (let j = 0; j < 10; j++) {
-                const cell = <Cell shotState={this.state.cells !== undefined && this.state.cells !== null ? this.state.cells[i][j] : null} parent={this} changeable={this.props.changeable} key={(i * 10 + j)} pos={i * 10 + j} h={i} v={j} ready={this.props.ready} />;
+                let shotState = null;
+                if (this.props.cells !== undefined && this.props.cells !== null) {
+                    shotState = this.props.cells[i][j]
+                }
+                const cell = <Cell shotState={shotState} parent={this} changeable={this.state.changeable} key={(i * 10 + j)} pos={i * 10 + j} h={i} v={j} ready={this.props.ready} />;
                 line.push(<td key={(i * 10 + j) * 100}>{cell}</td>);
             }
             cells.push(<tr key={(i * 100000)}>{line}</tr>);

src/screens/Game.js

@@ -16,7 +16,6 @@ class Game extends Component {
     doUpdate = () => {
 
         const process = (response) => {
-            console.log(response);
             this.setState({
                 myField: response.my_field,
                 opponentField: response.opponent_field,

src/screens/NewGame.js

@@ -62,7 +62,6 @@ class NewGame extends Component {
             game_id: game_id,
             token: localStorage.getItem("token")
         }, function(response) {
-            console.log(response);
             obj.setState({
                 readyText: response.attend ? "Соперник ставит корабли" : "Ждем ответа соперника",
                 readyDisabled: true