src/App.js

@@ -1,8 +1,6 @@
 import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
 import Home from './screens/Home.js';
 import NewGame from './screens/NewGame.js';
-import Connect from './screens/Connect.js';
-import Game from './screens/Game.js';
 import './App.css';
 
 function App() {
@@ -11,8 +9,6 @@ function App() {
       <Routes>
         <Route path='/' element={<Home />} />
         <Route path='/new_game' element={<NewGame />} />
-        <Route path='/connect' element={<Connect />} />
-        <Route path='/game' element={<Game />} />
       </Routes>
     </Router>
   );

src/components/Field.js

@@ -1,5 +1,4 @@
 import { Component } from "react";
-import request from "../scripts/requests";
 import '../styles/styles.css'
 
 class Cell extends Component {
@@ -9,25 +8,9 @@ class Cell extends Component {
         this.state = {
             h: props.h,
             v: props.v,
-            shotState: props.shotState,
+            color: "white",
-            changeable: props.changeable
         }
-        if (this.state.shotState === "x") {
+        this.symb = " ";
-            this.state.color = "red";
-        } else if (this.state.shotState === ".") {
-            this.state.color = "grey";
-        } else if (this.state.shotState === "+") {
-            this.state.color = "yellow";
-        } else {
-            this.state.color = "white";
-        }
-    }
-
-    componentWillReceiveProps(props) {
-        this.setState({
-            shotState: props.shotState,
-            changeable: props.changeable
-        })
     }
 
     changeColor() {
@@ -44,30 +27,11 @@ class Cell extends Component {
     }
 
     shoot() {
-        this.props.parent.setState({
+        
-            changeable: false,
-            text: "Подожди"
-        })
-        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({
-                    shotState: "+",
-                })
-            } else {
-                this.setState({
-                    shotState: "."
-                })
-            }
-        })
     }
 
     click() {
-        if (!this.state.changeable) return;
+        if (!this.props.changeable) return;
         if (this.props.parent.props.ready)
             this.shoot();
         else
@@ -75,20 +39,11 @@ class Cell extends Component {
     }
 
     render() {
-        let color = "white";
+        if (!this.props.parent.cells.includes(this))
-        if (this.state.shotState === "x") {
+            this.props.parent.cells.push(this);
-            color = "red";
+        this.props.parent.cells.sort((a, b) => a.key < b.key);
-        } else if (this.state.shotState === "o") {
-            color = "darkcyan";
-        } else if (this.state.shotState === ".") {
-            color = "gray";
-        } else if (this.state.shotState === "+") {
-            color = "yellow";
-        } else if (this.symb === "o") {
-            color = "green";
-        } 
         return (
-            <button style={{backgroundColor: color}} onClick={() => this.click()} className="cell"></button>
+            <button style={{backgroundColor: this.state.color}} onClick={() => this.click()} className="cell"></button>
         )
     }
 }
@@ -112,29 +67,15 @@ class Field extends Component {
             this.line = first + symb + last;
         }
 
-        this.state = {
-            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++) {
-                let shotState = null;
+                const cell = <Cell parent={this} changeable={this.props.changeable} key={(i * 10 + j)} pos={i * 10 + j} h={i} v={j} />;
-                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/components/Ready.js

@@ -1,4 +1,5 @@
 import { Component } from "react";
+import request from "../scripts/requests";
 
 class Ready extends Component {
 
@@ -9,6 +10,19 @@ class Ready extends Component {
             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() {
@@ -27,7 +41,7 @@ class Ready extends Component {
     }
 
     render() {
-        return <button onClick={this.props.onClick} className='main' disabled={this.props.disabled}><p>{this.props.text}</p></button>
+        return <button onClick={this.click} className='main' disabled={this.state.disabled}><p>{this.state.text}</p></button>
     }
 
 }

src/screens/Connect.js

@@ -1,37 +1,5 @@
 import {Component} from 'react';
-import request from '../scripts/requests';
 
 class Connect extends Component {
 
-    constructor(props) {
+}
-        super(props);
-        this.queryParams = new URLSearchParams(window.location.search);
-        const game_id = this.queryParams.get('gameId');
-        localStorage.setItem('gameId', game_id);
-    }
-
-    getToken() {
-        return this.queryParams.get('token');
-    }
-
-    getGameId() {
-        return localStorage.getItem('gameId');
-    }
-
-    componentDidMount() {
-        document.title = "Подключиться к игре";
-        request("attend_game", {
-            game_id: this.getGameId(),
-            attend_token: this.getToken()
-        }, (response) => {
-            localStorage.setItem("token", response.token);
-            window.location.href = "/new_game?gameId=" + this.getGameId()
-        })
-    }
-
-    render() {
-        return <div></div>
-    }
-}
-
-export default Connect;

src/screens/Game.js

@@ -1,68 +0,0 @@
-import { Component } from "react";
-import Field from '../components/Field.js';
-import request from "../scripts/requests.js";
-
-class Game extends Component {
-
-    constructor(props) {
-        super(props);
-        this.state = {
-            myField: null,
-            opponentField: null,
-            myTurn: false,
-            text: ""
-        }
-    }
-
-    doUpdate = () => {
-
-        const process = (response) => {
-            this.setState({
-                myField: response.my_field,
-                opponentField: response.opponent_field,
-                myTurn: response.my_turn,
-                text: response.my_turn ? "Твой ход" : "Ход соперника"
-            })
-            if (response.game_finished) {
-                this.setState({
-                    text: "Игра окончена"
-                })
-                this.timer = null;
-            }
-        }
-        request("get_fields", {
-            game_id: localStorage.getItem("gameId"),
-            token: localStorage.getItem("token")
-        }, process) 
-    }
-
-    componentDidMount() {
-        document.title = "Battleship";
-        this.timer = setInterval(() => this.doUpdate(), 500);
-    }
-
-    render() {
-        return (
-            <div>
-            <center><p className='logo'>Let's play!</p></center>
-            <div className='row'>
-                <div className='col-1'>
-                    <p>Player1</p>
-                    <Field cells={this.state.myField} parent={this} changeable={false} ready={false} />
-                </div>
-                <div className='col-5'>
-                    <p>
-                        {this.state.text}
-                    </p>
-                </div>
-                <div className='col-1'>
-                    <p>Player2</p>
-                    <Field cells={this.state.opponentField} parent={this} changeable={this.state.myTurn} ready={true} />
-                </div>
-            </div>
-        </div>
-        )
-    }
-}
-
-export default Game;

src/screens/Home.js

@@ -7,16 +7,11 @@ class Home extends Component {
   goNewGame() {
     function go(response) {
         localStorage.setItem('token', response.my_token);
-        localStorage.setItem('gameId', response.game_id);
         window.location.href='/new_game?gameId=' + response.game_id.toString() + "&playerToken=" + response.player_token;
     }
     request("new_game", {}, go);
   }
 
-  componentDidMount() {
-    document.title = "Sprint Battleship";
-  }
-
   render() {
     return (
         <div className='center'>
@@ -24,6 +19,8 @@ class Home extends Component {
             <center><p className='logo'><b>Sprint Battleship</b></p></center>
           </div>
           <button className='main' onClick={() => this.goNewGame()}><p>Новая игра</p></button>
+          <div className='space'></div>
+          <button className='main' onClick={() => window.location.href="/connect"}><p>Присоединиться</p></button>
         </div>
     );
   }

src/screens/NewGame.js

@@ -5,19 +5,6 @@ import Field from '../components/Field.js';
 import Ready from '../components/Ready.js';
 import request, {host} from '../scripts/requests.js';
 
-class AttendLink extends Component {
-    render() {
-        if (this.props.token !== null) 
-        return (
-            <center>
-                <p>Ссылка для подключения</p>
-                <input className='borders' readOnly value={host + "connect?token=" + this.props.token + "&gameId=" + localStorage.getItem('gameId')} />
-            </center>
-        )
-        else return <div></div>
-    }
-}
-
 class NewGame extends Component {
 
     getToken() {
@@ -25,87 +12,62 @@ class NewGame extends Component {
     }
 
     getGameId() {
-        return localStorage.getItem('gameId');
+        return this.queryParams.get('gameId');
-    }
-
-    componentDidMount() {
-        document.title = "Новая игра";
     }
 
     constructor(props) {
         super(props);
         this.state = {
-            ok: false,
+            ok: false
-            readyText: "Заполни поле чтобы начать",
-            readyDisabled: true
         }
         this.queryParams = new URLSearchParams(window.location.search);
-        this.setState = this.setState.bind(this);
     }
 
     update() {
         const line = this.field.getLine();
         request("check_field_correct", {field: line}, (response) => {
+            this.setState({ok: response.correct});
             if (response.correct) {
-                this.setState({
+                this.ready.setState({
-                    readyText: "Я готов",
+                    text: "Я готов",
-                    readyDisabled: false
+                    disabled: false
                 })
             } else {
-                this.setState({
+                this.ready.setState({
-                    readyText: "Заполни поле чтобы начать",
+                    text: "Расставь корабли чтобы активировать",
-                    readyDisabled: true
+                    disabled: true
                 })
             }
+            this.ready.setState({ok: this.state.ok});
         });
     }
 
-    doUpdate(obj) {
-        const game_id = localStorage.getItem('gameId');
-        request("check_opponent", {
-            game_id: game_id,
-            token: localStorage.getItem("token")
-        }, function(response) {
-            obj.setState({
-                readyText: response.attend ? "Соперник ставит корабли" : "Ждем ответа соперника",
-                readyDisabled: true
-            })
-            if (response.ready) {
-                window.location.href = '/game?gameId=' + game_id;
-            }
-        })
-    }
-
-    componentWillUnmount() {
-        this.timer = null;
-    }
-
-    clickReady() {
-        request("place_ships", {
-            game_id: this.getGameId(),
-            token: localStorage.getItem('token'),
-            field: this.field.getLine()
-        }, (response) => {
-            this.setState({
-                readyText: "Ждем ответа соперника",
-                readyDisabled: true
-            })
-        });
-        this.timer = setInterval(() => this.doUpdate(this), 2000);
-    }
-
   render() {
     return (
         <div>
             <center><p className='logo'>Расставь корабли</p></center>
+            {/* <div className='row'>
+                <div className='col-1'>
+                    <p>Player1</p>
+                    <Field parent={this} changeable={true} />
+                </div>
+                <div className='col-5'></div>
+                <div className='col-1'>
+                    <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>
-            <AttendLink token={this.getToken()} gameId={this.getGameId()} />
+            <center>
-            <Ready onClick={() => this.clickReady()} text={this.state.readyText} disabled={this.state.readyDisabled} />
+                <p>Ссылка для подключения</p>
+                <input className='borders' value={host + "connect?token=" + this.getToken()} />
+            </center>
+            <Ready ok={this.state.ok} parent={this} />
         </div>
     );
   }

src/scripts/requests.js

@@ -1,4 +1,4 @@
-export const host = "https://battleship.sprinthub.ru/"
+export const host = "http://battleship.develop.sprinthub.ru/"
 
 
 function request(method, body, callback) {