newgame

src/components/Field.js

@@ -13,10 +13,11 @@ class Cell extends Component {
     }
 
     click() {
+        if (!this.props.changeable) return;
         if (this.state.color === "white")
             this.setState({color: "green"});
         else
-            this.setState({color: "white"})
+            this.setState({color: "white"});
     }
 
     render() {
@@ -28,13 +29,12 @@ class Cell extends Component {
 
 class Field extends Component {
 
-
     render() {
         let cells = []
         for (let i = 0; i < 10; i++) {
             let line = []
             for (let j = 0; j < 10; j++) {
-                line.push(<td key={(i * 10 + j) * 100}><Cell key={(i * 10 + j)} h={i} v={j} /></td>);
+                line.push(<td key={(i * 10 + j) * 100}><Cell changeable={this.props.changeable} key={(i * 10 + j)} h={i} v={j} /></td>);
             }
             cells.push(<tr key={(i * 100000)}>{line}</tr>);
         }

src/components/Ready.js

@@ -0,0 +1,17 @@
+import { Component } from "react";
+
+export default class Ready extends Component {
+
+    constructor(props) {
+        super(props);
+        this.state = {
+            text: "Расставь корабли чтобы активировать",
+            disabled: true
+        }
+    }
+
+    render() {
+        return <button className='main' disabled={this.state.disabled} onClick={this.goNewGame}><p>{this.state.text}</p></button>
+    }
+
+}

src/screens/Connect.js

@@ -1,3 +1,5 @@
+import {Component} from 'react';
+
 class Connect extends Component {
 
 }

src/screens/NewGame.js

@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 import '../styles/styles.css';
 import '../styles/bootstrap.css';
 import Field from '../components/Field.js';
+import Ready from '../components/Ready.js';
 import {host} from '../scripts/requests.js';
 
 class NewGame extends Component {
@@ -19,19 +20,19 @@ class NewGame extends Component {
             <div className='row'>
                 <div className='col-1'>
                     <p>Player1</p>
-                    <Field />
+                    <Field parent={this} changeable={true} />
                 </div>
                 <div className='col-5'></div>
                 <div className='col-1'>
                     <p>Player2</p>
-                    <Field />
+                    <Field parent={this} changeable={false} />
                 </div>
             </div>
             <center>
                 <p>Ссылка для подключения</p>
                 <input className='borders' value={host + "connect?token=" + this.getToken()} />
             </center>
-            <button className='main' onClick={this.goNewGame}><p>Я готов</p></button>
+            <Ready />
         </div>
     );
   }