dockerfile

src/components/Field.js

@@ -10,13 +10,19 @@ class Cell extends Component {
             v: props.v,
             color: "white",
         }
+        this.symb = " ";
     }
 
     changeColor() {
-        if (this.state.color === "white")
+        if (this.state.color === "white") {
             this.setState({color: "green"});
-        else
+            this.symb = "o"
+        }
+        else {
             this.setState({color: "white"});
+            this.symb = " "
+        }
+        this.props.parent.insert(this.symb, this.props.pos);
         this.props.parent.props.parent.update();
     }
 
@@ -33,9 +39,9 @@ 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);
-        console.log(this.props.parent.cells.length);
         return (
             <button style={{backgroundColor: this.state.color}} onClick={() => this.click()} className="cell"></button>
         )
@@ -49,12 +55,16 @@ class Field extends Component {
 
         props.parent.field = this;
 
+        this.line = "                                                                                                    ";
+
         this.getLine = () => {
-            let line = "";
-            for (let i = 0; i < 100; i++) {
-                line += this.cells.at(i).state.color === "white" ? " " : "o";
+            return this.line;
         }
-            return line;
+
+        this.insert = (symb, pos) => {
+            const first = this.line.slice(0, pos);
+            const last = this.line.slice(pos + 1);
+            this.line = first + symb + last;
         }
 
     }
@@ -65,7 +75,7 @@ class Field extends Component {
         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} />;
+                const cell = <Cell parent={this} changeable={this.props.changeable} key={(i * 10 + j)} pos={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>);

src/components/Ready.js

@@ -1,32 +1,49 @@
 import { Component } from "react";
+import request from "../scripts/requests";
 
-export default class Ready extends Component {
+class Ready extends Component {
 
     constructor(props) {
         super(props);
-        this.update();
         this.state = {
             text: "Расставь корабли чтобы активировать",
-            disabled: true
+            disabled: true,
+            parent: props.parent
         }
+        this.state.parent.ready = this;
+        this.click = this.click.bind(this);
+    }
+
+    click() {
+        request("place_ships", {
+            game_id: this.state.parent.getGameId(),
+            token: localStorage.getItem('token'),
+            field: this.state.parent.field.getLine()
+        }, () => this.setState({
+            text: "Ждем ответа соперника",
+            disabled: true
+        }))
     }
 
     update() {
-        if (!this.props.ok) 
+        if (!this.props.ok) {
             this.setState({
                 text: "Расставь корабли чтобы активировать",
                 disabled: true
             })
-        else 
+        }
+        else {
             this.setState({
                 text: "Я готов",
                 disabled: false
             })
-        this.props.parent.ready = this;
+        }
     }
 
     render() {
-        return <button className='main' disabled={this.state.disabled}><p>{this.state.text}</p></button>
+        return <button onClick={this.click} className='main' disabled={this.state.disabled}><p>{this.state.text}</p></button>
     }
 
 }
+
+export default Ready;

src/screens/NewGame.js

@@ -8,8 +8,11 @@ import request, {host} from '../scripts/requests.js';
 class NewGame extends Component {
 
     getToken() {
-        const queryParams = new URLSearchParams(window.location.search);
-        return queryParams.get('playerToken');
+        return this.queryParams.get('playerToken');
+    }
+
+    getGameId() {
+        return this.queryParams.get('gameId');
     }
 
     constructor(props) {
@@ -17,19 +20,29 @@ class NewGame extends Component {
         this.state = {
             ok: false
         }
+        this.queryParams = new URLSearchParams(window.location.search);
     }
 
     update() {
         const line = this.field.getLine();
         request("check_field_correct", {field: line}, (response) => {
             this.setState({ok: response.correct});
+            if (response.correct) {
+                this.ready.setState({
+                    text: "Я готов",
+                    disabled: false
+                })
+            } else {
+                this.ready.setState({
+                    text: "Расставь корабли чтобы активировать",
+                    disabled: true
+                })
+            }
             this.ready.setState({ok: this.state.ok});
-            this.ready.update();
         });
     }
 
   render() {
-
     return (
         <div>
             <center><p className='logo'>Расставь корабли</p></center>

src/scripts/requests.js

@@ -1,11 +1,4 @@
-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;
+export const host = "http://127.0.0.1:8000/"
 
 
 function request(method, body, callback) {