newgame

package-lock.json

@@ -11,8 +11,10 @@
         "@testing-library/jest-dom": "^5.16.5",
         "@testing-library/react": "^13.3.0",
         "@testing-library/user-event": "^13.5.0",
+        "axios": "^0.27.2",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
+        "react-router-dom": "^6.3.0",
         "react-scripts": "5.0.1",
         "web-vitals": "^2.1.4"
       }
@@ -4922,6 +4924,28 @@
         "node": ">=4"
       }
     },
+    "node_modules/axios": {
+      "version": "0.27.2",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.27.2.tgz",
+      "integrity": "sha512-t+yRIyySRTp/wua5xEr+z1q60QmLq8ABsS5O9Me1AsE5dfKqgnCFzwiCZZ/cGNd1lq4/7akDWMxdhVlucjmnOQ==",
+      "dependencies": {
+        "follow-redirects": "^1.14.9",
+        "form-data": "^4.0.0"
+      }
+    },
+    "node_modules/axios/node_modules/form-data": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
+      "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/axobject-query": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz",
@@ -8484,6 +8508,14 @@
         "he": "bin/he"
       }
     },
+    "node_modules/history": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/history/-/history-5.3.0.tgz",
+      "integrity": "sha512-ZqaKwjjrAYUYfLG+htGaIIZ4nioX2L70ZUMIFysS3xvBsSG4x/n1V6TXV3N8ZYNuFGlDirFg32T7B6WOUPDYcQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.7.6"
+      }
+    },
     "node_modules/hoopy": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz",
@@ -13979,6 +14011,30 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-router": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.3.0.tgz",
+      "integrity": "sha512-7Wh1DzVQ+tlFjkeo+ujvjSqSJmkt1+8JO+T5xklPlgrh70y7ogx75ODRW0ThWhY7S+6yEDks8TYrtQe/aoboBQ==",
+      "dependencies": {
+        "history": "^5.2.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8"
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.3.0.tgz",
+      "integrity": "sha512-uaJj7LKytRxZNQV8+RbzJWnJ8K2nPsOOEuX7aQstlMZKQT0164C+X2w6bnkqU3sjtLvpd5ojrezAyfZ1+0sStw==",
+      "dependencies": {
+        "history": "^5.2.0",
+        "react-router": "6.3.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8",
+        "react-dom": ">=16.8"
+      }
+    },
     "node_modules/react-scripts": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz",
@@ -20196,6 +20252,27 @@
       "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.4.3.tgz",
       "integrity": "sha512-32+ub6kkdhhWick/UjvEwRchgoetXqTK14INLqbGm5U2TzBkBNF3nQtLYm8ovxSkQWArjEQvftCKryjZaATu3w=="
     },
+    "axios": {
+      "version": "0.27.2",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.27.2.tgz",
+      "integrity": "sha512-t+yRIyySRTp/wua5xEr+z1q60QmLq8ABsS5O9Me1AsE5dfKqgnCFzwiCZZ/cGNd1lq4/7akDWMxdhVlucjmnOQ==",
+      "requires": {
+        "follow-redirects": "^1.14.9",
+        "form-data": "^4.0.0"
+      },
+      "dependencies": {
+        "form-data": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
+          "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+          "requires": {
+            "asynckit": "^0.4.0",
+            "combined-stream": "^1.0.8",
+            "mime-types": "^2.1.12"
+          }
+        }
+      }
+    },
     "axobject-query": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz",
@@ -22781,6 +22858,14 @@
       "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
       "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw=="
     },
+    "history": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/history/-/history-5.3.0.tgz",
+      "integrity": "sha512-ZqaKwjjrAYUYfLG+htGaIIZ4nioX2L70ZUMIFysS3xvBsSG4x/n1V6TXV3N8ZYNuFGlDirFg32T7B6WOUPDYcQ==",
+      "requires": {
+        "@babel/runtime": "^7.7.6"
+      }
+    },
     "hoopy": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz",
@@ -26570,6 +26655,23 @@
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
       "integrity": "sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A=="
     },
+    "react-router": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.3.0.tgz",
+      "integrity": "sha512-7Wh1DzVQ+tlFjkeo+ujvjSqSJmkt1+8JO+T5xklPlgrh70y7ogx75ODRW0ThWhY7S+6yEDks8TYrtQe/aoboBQ==",
+      "requires": {
+        "history": "^5.2.0"
+      }
+    },
+    "react-router-dom": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.3.0.tgz",
+      "integrity": "sha512-uaJj7LKytRxZNQV8+RbzJWnJ8K2nPsOOEuX7aQstlMZKQT0164C+X2w6bnkqU3sjtLvpd5ojrezAyfZ1+0sStw==",
+      "requires": {
+        "history": "^5.2.0",
+        "react-router": "6.3.0"
+      }
+    },
     "react-scripts": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz",

package.json

@@ -6,6 +6,7 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.3.0",
     "@testing-library/user-event": "^13.5.0",
+    "axios": "^0.27.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.3.0",

src/App.js

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

src/components/Field.js

@@ -0,0 +1,52 @@
+import { Component } from "react";
+import '../styles/styles.css'
+
+class Cell extends Component {
+
+    constructor(props) {
+        super(props);
+        this.state = {
+            h: props.h,
+            v: props.v,
+            color: "white",
+        }
+    }
+
+    click() {
+        if (this.state.color === "white")
+            this.setState({color: "green"});
+        else
+            this.setState({color: "white"})
+    }
+
+    render() {
+        return (
+            <button style={{backgroundColor: this.state.color}} onClick={() => this.click()} className="cell"></button>
+        )
+    }
+}
+
+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>);
+            }
+            cells.push(<tr key={(i * 100000)}>{line}</tr>);
+        }
+
+        return (
+            <table>
+                <tbody>
+                    {cells}
+                </tbody>
+            </table>
+        )
+    }
+}
+
+export default Field;

src/screens/Connect.js

@@ -0,0 +1,3 @@
+class Connect extends Component {
+    
+}

src/screens/Home.js

@@ -1,16 +1,26 @@
 import React, { Component } from 'react';
-import '../styles/styles.css'
+import '../styles/styles.css';
+import request from '../scripts/requests.js';
 
 class Home extends Component {
+
+  goNewGame() {
+    function go(response) {
+        localStorage.setItem('token', response.my_token);
+        window.location.href='/new_game?gameId=' + response.game_id.toString() + "&playerToken=" + response.player_token;
+    }
+    request("new_game", {}, go);
+  }
+
   render() {
     return (
         <div className='center'>
           <div className='logo'>
             <center><p className='logo'><b>Sprint Battleship</b></p></center>
           </div>
-          <button className='main'><p>Новая игра</p></button>
+          <button className='main' onClick={() => this.goNewGame()}><p>Новая игра</p></button>
           <div className='space'></div>
-          <button className='main'><p>Присоединиться</p></button>
+          <button className='main' onClick={() => window.location.href="/connect"}><p>Присоединиться</p></button>
         </div>
     );
   }

src/screens/NewGame.js

@@ -0,0 +1,40 @@
+import React, { Component } from 'react';
+import '../styles/styles.css';
+import '../styles/bootstrap.css';
+import Field from '../components/Field.js';
+import {host} from '../scripts/requests.js';
+
+class NewGame extends Component {
+
+    getToken() {
+        const queryParams = new URLSearchParams(window.location.search);
+        return queryParams.get('playerToken');
+    }
+
+  render() {
+
+    return (
+        <div>
+            <center><p className='logo'>Расставь корабли</p></center>
+            <div className='row'>
+                <div className='col-1'>
+                    <p>Player1</p>
+                    <Field />
+                </div>
+                <div className='col-5'></div>
+                <div className='col-1'>
+                    <p>Player2</p>
+                    <Field />
+                </div>
+            </div>
+            <center>
+                <p>Ссылка для подключения</p>
+                <input className='borders' value={host + "connect?token=" + this.getToken()} />
+            </center>
+            <button className='main' onClick={this.goNewGame}><p>Я готов</p></button>
+        </div>
+    );
+  }
+}
+
+export default NewGame;

src/scripts/requests.js

@@ -0,0 +1,17 @@
+export const host = "http://battleship.develop.sprinthub.ru/";
+
+
+function request(method, body, callback) {
+        const options = {
+        method: 'POST',
+        body: JSON.stringify(body),
+        headers: {
+            'Content-Type': 'application/json'
+        }
+    };
+    fetch(host + "api/" + method, options)
+    .then(res => res.json())
+    .then(res => callback(res))
+}
+
+export default request;

src/styles/bootstrap.css

@@ -0,0 +1,101 @@
+.row {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+}
+
+.col {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+
+.col-1 {
+    display: flex;
+    flex-direction: column;
+    width: 8.33%;
+    justify-content: center;
+    align-items: center;
+}
+
+.col-2 {
+    display: flex;
+    flex-direction: column;
+    width: 16.66%;
+    justify-content: center;
+    align-items: center;
+}
+
+.col-3 {
+    display: flex;
+    flex-direction: column;
+    width: 25%;
+    justify-content: center;
+    align-items: center;
+}
+
+.col-4 {
+    display: flex;
+    flex-direction: column;
+    width: 33.33%;
+    justify-content: center;
+    align-items: center;
+}
+
+.col-5 {
+    display: flex;
+    flex-direction: column;
+    width: 41.66%;
+    justify-content: center;
+    align-items: center;
+}
+
+.col-6 {
+    display: flex;
+    flex-direction: column;
+    width: 50%;
+    justify-content: center;
+    align-items: center;
+}
+
+.col-7 {
+    display: flex;
+    flex-direction: column;
+    width: 58.33%;
+    justify-content: center;
+    align-items: center;
+}
+
+.col-8 {
+    display: flex;
+    flex-direction: column;
+    width: 66.66%;
+    justify-content: center;
+    align-items: center;
+}
+
+.col-9 {
+    display: flex;
+    flex-direction: column;
+    width: 75%;
+    justify-content: center;
+    align-items: center;
+}
+
+.col-10 {
+    display: flex;
+    flex-direction: column;
+    width: 83.33%;
+    justify-content: center;
+    align-items: center;
+}
+
+.col-11 {
+    display: flex;
+    flex-direction: column;
+    width: 91.66%;
+    justify-content: center;
+    align-items: center;
+}

src/styles/styles.css

@@ -1,5 +1,5 @@
 p {
-    font-family: "Comic Sans MS", "Comic Sans", cursive;
+    font-family: "Comic Sans MS", "Comic Sans";
 }
 
 .logo {
@@ -15,6 +15,7 @@ p {
     left: 50%;
     width: 400px;
     margin-left: -200px;
+    margin-top: 50px;
     height: 100px;
     background-color: white;
     font-size: 20px;
@@ -31,3 +32,35 @@ p {
     width: 50%;
     height: 50%;
 }
+
+.fields {
+    position: absolute;
+    top: 10%;
+    left: 10%;
+    width: 80%;
+    height: 80%;
+}
+
+.cell {
+    border-color: black;
+    border-width: 3px;
+    width: 35px;
+    height: 35px;
+}
+
+.cell:hover {
+    background-color: lightgray;
+}
+
+.space-fields {
+    width: 100%;
+}
+
+.field-header {
+    font-size: 24px;
+}
+
+.borders {
+    border-width: 5px;
+    width: 400px;
+}