self/battleship-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

newgame

Browse Source
This commit is contained in:
Administrator 2022-08-24 01:28:35 +03:00
parent 0973531401
commit aedce099fe
11 changed files with 6779 additions and 6217 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

102
package-lock.json generated
View File

@ -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",

1
package.json
View File

@ -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",

4
src/App.js
View File

@ -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>
);

52
src/components/Field.js Normal file
View File

@ -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;

3
src/screens/Connect.js Normal file
View File

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

16
src/screens/Home.js
View File

@ -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>
);
}

40
src/screens/NewGame.js Normal file
View File

@ -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;

17
src/scripts/requests.js Normal file
View File

@ -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;

101
src/styles/bootstrap.css vendored Normal file
View File

@ -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;
}

35
src/styles/styles.css
View File

@ -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;
}

12625
yarn.lock
View File

File diff suppressed because it is too large Load Diff