new

src/App.js

@@ -1,6 +1,8 @@
 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() {
@@ -9,6 +11,8 @@ 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,4 +1,5 @@
 import { Component } from "react";
+import request from "../scripts/requests";
 import '../styles/styles.css'
 
 class Cell extends Component {
@@ -8,7 +9,14 @@ class Cell extends Component {
         this.state = {
             h: props.h,
             v: props.v,
-            color: "white",
+            shotState: props.shotState
+        }
+        if (this.state.shotState === "x") {
+            this.state.color = "red";
+        } else if (this.state.shotState === ".") {
+            this.state.color = "grey";
+        } else {
+            this.state.color = "white";
         }
         this.symb = " ";
     }
@@ -28,6 +36,16 @@ class Cell extends Component {
 
     shoot() {
 
+        request("shoot", {
+            game_id: localStorage.getItem("gameId"),
+            token: localStorage.getItem("token"),
+            h: this.props.h,
+            v: this.props.v
+        }, (response) => {
+            this.setState({
+                color: response.shoot ? "red" : "grey"
+            })
+        })
     }
 
     click() {
@@ -67,6 +85,10 @@ class Field extends Component {
             this.line = first + symb + last;
         }
 
+        this.state = {
+            cells: this.props.cells
+        }
+
     }
 
     render() {
@@ -75,7 +97,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)} pos={i * 10 + j} h={i} v={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} />;
                 line.push(<td key={(i * 10 + j) * 100}>{cell}</td>);
             }
             cells.push(<tr key={(i * 100000)}>{line}</tr>);

src/screens/Connect.js

@@ -1,5 +1,36 @@
 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() {
+        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

@@ -0,0 +1,56 @@
+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
+        }
+    }
+
+    doUpdate = () => {
+
+        const process = (response) => {
+            console.log(response);
+            this.setState({
+                myField: response.my_field,
+                opponentField: response.opponent_field,
+                myTurn: response.my_turn
+            })
+        }
+        request("get_fields", {
+            game_id: localStorage.getItem("gameId"),
+            token: localStorage.getItem("token")
+        }, process) 
+    }
+
+    componentDidMount() {
+        this.timer = setInterval(() => this.doUpdate(), 2000);
+    }
+
+    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'></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,6 +7,7 @@ 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);

src/screens/NewGame.js

@@ -5,6 +5,19 @@ 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() {
@@ -12,7 +25,7 @@ class NewGame extends Component {
     }
 
     getGameId() {
-        return this.queryParams.get('gameId');
+        return localStorage.getItem('gameId');
     }
 
     constructor(props) {
@@ -23,6 +36,7 @@ class NewGame extends Component {
             readyDisabled: true
         }
         this.queryParams = new URLSearchParams(window.location.search);
+        this.setState = this.setState.bind(this);
     }
 
     update() {
@@ -42,15 +56,39 @@ class NewGame extends Component {
         });
     }
 
+    doUpdate(obj) {
+        const game_id = localStorage.getItem('gameId');
+        request("check_opponent", {
+            game_id: game_id,
+            token: localStorage.getItem("token")
+        }, function(response) {
+            console.log(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({
+        }, (response) => {
+            this.setState({
                 readyText: "Ждем ответа соперника",
                 readyDisabled: true
-        }))
+            })
+        });
+        this.timer = setInterval(() => this.doUpdate(this), 2000);
     }
 
   render() {
@@ -74,10 +112,7 @@ class NewGame extends Component {
                     <Field ready={false} parent={this} changeable={true} />
                 </div>
             </div>
-            <center>
-                <p>Ссылка для подключения</p>
-                <input className='borders' value={host + "connect?token=" + this.getToken()} />
-            </center>
+            <AttendLink token={this.getToken()} gameId={this.getGameId()} />
             <Ready onClick={() => this.clickReady()} text={this.state.readyText} disabled={this.state.readyDisabled} />
         </div>
     );