incorrect

.deploy/deploy-dev.yaml

@@ -7,6 +7,8 @@ services:
     image: mathwave/sprint-repo:battleship-front
     networks:
       - battleship-net
+    environment:
+      HOST_URL: "http://battleship.develop.sprinthub.ru/"
     deploy:
       mode: replicated
       restart_policy:

.deploy/deploy-prod.yaml

@@ -7,6 +7,8 @@ services:
     image: mathwave/sprint-repo:battleship-front
     networks:
       - battleship-net
+    environment:
+      HOST_URL: "http://battleship.develop.sprinthub.ru/"
     deploy:
       mode: replicated
       restart_policy:

src/components/Field.js

@@ -12,15 +12,30 @@ class Cell extends Component {
         }
     }
 
-    click() {
-        if (!this.props.changeable) return;
+    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>
         )
@@ -29,16 +44,32 @@ class Cell extends Component {
 
 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() {
-        let cells = []
+        this.cells = [];
+        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 changeable={this.props.changeable} key={(i * 10 + j)} h={i} v={j} /></td>);
+                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>

src/components/Ready.js

@@ -4,14 +4,29 @@ export default class Ready extends Component {
 
     constructor(props) {
         super(props);
+        this.update();
         this.state = {
             text: "Расставь корабли чтобы активировать",
             disabled: true
         }
     }
 
+    update() {
+        if (!this.props.ok) 
+            this.setState({
+                text: "Расставь корабли чтобы активировать",
+                disabled: true
+            })
+        else 
+            this.setState({
+                text: "Я готов",
+                disabled: false
+            })
+        this.props.parent.ready = this;
+    }
+
     render() {
-        return <button className='main' disabled={this.state.disabled} onClick={this.goNewGame}><p>{this.state.text}</p></button>
+        return <button className='main' disabled={this.state.disabled}><p>{this.state.text}</p></button>
     }
 
 }

src/index.js

@@ -6,9 +6,7 @@ import reportWebVitals from './reportWebVitals';
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
-  <React.StrictMode>
     <App />
-  </React.StrictMode>
 );
 
 // If you want to start measuring performance in your app, pass a function

src/screens/NewGame.js

@@ -3,7 +3,7 @@ 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';
+import request, {host} from '../scripts/requests.js';
 
 class NewGame extends Component {
 
@@ -12,12 +12,28 @@ class NewGame extends Component {
         return queryParams.get('playerToken');
     }
 
+    constructor(props) {
+        super(props);
+        this.state = {
+            ok: false
+        }
+    }
+
+    update() {
+        const line = this.field.getLine();
+        request("check_field_correct", {field: line}, (response) => {
+            this.setState({ok: response.correct});
+            this.ready.setState({ok: this.state.ok});
+            this.ready.update();
+        });
+    }
+
   render() {
 
     return (
         <div>
             <center><p className='logo'>Расставь корабли</p></center>
-            <div className='row'>
+            {/* <div className='row'>
                 <div className='col-1'>
                     <p>Player1</p>
                     <Field parent={this} changeable={true} />
@@ -27,12 +43,18 @@ class NewGame extends Component {
                     <p>Player2</p>
                     <Field parent={this} changeable={false} />
                 </div>
+            </div> */}
+            <div className='row'>
+                <div className='col-1'>
+                    <p>Player1</p>
+                    <Field ready={false} parent={this} changeable={true} />
+                </div>
             </div>
             <center>
                 <p>Ссылка для подключения</p>
                 <input className='borders' value={host + "connect?token=" + this.getToken()} />
             </center>
-            <Ready />
+            <Ready ok={this.state.ok} parent={this} />
         </div>
     );
   }

src/scripts/requests.js

@@ -1,4 +1,11 @@
-export const host = "http://battleship.develop.sprinthub.ru/";
+var h = null;
+if (process.env.HOST_URL !== undefined) {
+    h = process.env.HOST_URL;
+} else {
+    h = "http://127.0.0.1:8000/";
+}
+
+export const host = h;
 
 
 function request(method, body, callback) {