Skip to content

Commit 1ec2989

Browse files
gybber-devgybber-dev
committed
Square (UserName synchs with FB)
1 parent 48c25a9 commit 1ec2989

16 files changed

Lines changed: 394 additions & 159 deletions

‎squares/package-lock.json‎

Lines changed: 5 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎squares/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
"@testing-library/jest-dom": "^4.2.4",
77
"@testing-library/react": "^9.3.2",
88
"@testing-library/user-event": "^7.1.2",
9+
"bootstrap": "^4.4.1",
910
"firebase": "^7.14.0",
1011
"react": "^16.13.1",
1112
"react-dom": "^16.13.1",

‎squares/src/App.js‎

Lines changed: 52 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,31 @@
1-
import React, { useState } from 'react';
2-
3-
import './App.css';
1+
import React, { useState, useEffect } from 'react';
2+
import classes from './App.module.css'
43
import Field from './Field/Field';
54
import Sidebar from './Sidebar/Sidebar';
6-
// import modal from './plugins/modal/index.html'
7-
// import Counter from './Counter/Counter'
8-
5+
import WelcomeWindow from './WelcomeWindow'
6+
import './App.module.css'
7+
// import Modal from'./plugins/modal/Modal';
98

109
function App() {
1110
console.log('run App');
11+
const headClasses = [classes["App-header"]];
12+
const fieldClasses = ['col-12', 'col-lg-8'];
13+
const sideClasses = ['col-12'];
14+
15+
16+
const [counter, setCounter] = useState(0);
17+
const [options, setOptoins] = useState({});
18+
const [userName, setUserName] = useState(null);
19+
const [welcomeDisplay, setWelcomeDisplay] = useState(false);
1220

21+
1322

14-
const [counter, setCounter] = useState(0);
1523

16-
const [options, setOptoins] = useState({});
24+
if (!welcomeDisplay) {
25+
26+
}else{
27+
sideClasses.push('col-lg-4')
28+
}
1729

1830
const handleClick = e =>{
1931
setCounter( counter + 1 )
@@ -27,30 +39,44 @@ function App() {
2739
)
2840
}
2941

42+
43+
const MainWindow = ()=>{
44+
return (
45+
<>
46+
<div className='row'>
47+
<div className={fieldClasses.join(' ')} onClick={handleClick}>
48+
<Field
49+
cellID ={options.sellID}
50+
rect ={options.rect}
51+
clickCounter ={options.clickCounter}
52+
isFirst ={options.isFirst}
53+
// size={{width:7, height:5}}
54+
/>
55+
</div>
56+
<div className={sideClasses.join(' ')}>
57+
<Sidebar />
58+
</div>
59+
</div>
60+
</>
61+
)
62+
}
63+
3064
return (
3165
<div className="App">
32-
<header className="App-header">
66+
<header className={headClasses.join(' ')}>
3367
Square game
3468
</header>
35-
<div className='row'>
36-
<div className='col-lg-8 col-12' onClick={handleClick}>
37-
<Field
38-
cellID ={options.sellID}
39-
rect ={options.rect}
40-
clickCounter ={options.clickCounter}
41-
isFirst ={options.isFirst}
42-
// size={{width:7, height:5}}
69+
{welcomeDisplay? (
70+
71+
<MainWindow />
72+
):(
73+
<div>
74+
<WelcomeWindow
75+
className ={fieldClasses.join(' ')}
76+
userName = {userName}
4377
/>
4478
</div>
45-
<div className='col-lg-4 col-12'>
46-
<Sidebar />
47-
</div>
48-
</div>
49-
<div className='row'>
50-
<div className='col'>
51-
{'bottom'}
52-
</div>
53-
</div>
79+
)}
5480
</div>
5581
);
5682
}

squares/src/App.css renamed to squares/src/App.module.css

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -15,22 +15,24 @@
1515

1616
.App-header {
1717
background-color: #282c34;
18-
min-height: 10vh;
18+
min-height: 20vh;
1919
display: flex;
2020
flex-direction: column;
2121
align-items: center;
2222
justify-content: center;
2323
font-size: calc(10px + 2vmin);
2424
color: white;
25+
margin-bottom: 0.5rem;
2526
}
2627
.App-body {
28+
width: 100%;
2729
display: table;
28-
/* margin-top: 10px; */
30+
margin-top: 50px;
2931
}
3032
.App-link {
3133
color: #61dafb;
3234
}
3335

3436
button{
3537
margin: 10px;
36-
}
38+
}

‎squares/src/Field/Cell.module.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,5 +38,9 @@
3838
background-color: rgb(170, 170, 170);
3939
}
4040

41+
.hidden{
42+
display: none;
43+
}
44+
4145

4246

‎squares/src/Field/Field.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { Fragment } from 'react';
1+
import React from 'react';
22
import Cell from './Cell'
33
import findRects from './findRects'
44
import classes from './Cell.module.css'

‎squares/src/Sidebar/GameMenu.js‎

Lines changed: 0 additions & 89 deletions
Original file line numberDiff line numberDiff line change
@@ -1,89 +0,0 @@
1-
import React, { useState } from 'react'
2-
import classes from './Sidebar.module.css'
3-
import * as firebase from 'firebase'
4-
// import Modal from '../plugins/modal/index'
5-
console.log('run GameMenu');
6-
7-
8-
const connectGame = newGame => {
9-
const msg = newGame? 'new game' : 'connect game';
10-
11-
let options = {
12-
title: 'Заголовок окна',
13-
closable: true,
14-
content: `
15-
<p>Текст содержимого в формате HTML</p>
16-
`,
17-
width: '600px',
18-
footerButtons: [
19-
{text: 'OK', type: 'primary', handler(){
20-
console.log('Primary btn clicked!');
21-
// modal.close();
22-
}},
23-
{text: 'Cancel', type: 'danger', handler(){
24-
console.log('Danger btn clicked!')
25-
// modal.close();
26-
}},
27-
]
28-
};
29-
30-
// document.body.append(modal(options));
31-
// document.querySelector('#myModal').modal(options)
32-
console.log(document.body);
33-
return (
34-
<div>
35-
{/* <Modal /> */}
36-
</div>
37-
)
38-
};
39-
40-
41-
const GameMenu = props =>{
42-
const panelClasses = [classes.panel];
43-
const buttonClasses = []
44-
// add new class
45-
buttonClasses.push('btn');
46-
buttonClasses.push('btn-primary');
47-
panelClasses.push(classes['panel-game'])
48-
49-
50-
const [newGameBlock, setNewGameBlock] = useState('');
51-
52-
const handleNewGame = ()=>{
53-
console.log('handleNewGame');
54-
const rootRef = firebase.database().ref().child('react');
55-
const speedRef = rootRef.child('speed');
56-
speedRef.once('value').then(function(snapshot) {
57-
console.log(snapshot.val())
58-
// ...
59-
});
60-
// speedRef.on('value', snap => {
61-
// console.log(snap.val())
62-
// })
63-
}
64-
65-
return (
66-
<div className={panelClasses.join(' ')}>
67-
68-
<button
69-
className={buttonClasses.join(' ')}
70-
data-toggle="modal"
71-
data-target="#exampleModal"
72-
onClick={handleNewGame}>
73-
New Game
74-
</button>
75-
76-
<button
77-
className={buttonClasses.join(' ')}
78-
onClick={()=>{setNewGameBlock(connectGame())}}>
79-
Join Game
80-
</button>
81-
<div>
82-
{newGameBlock}
83-
</div>
84-
85-
</div>
86-
)
87-
}
88-
89-
export default GameMenu

‎squares/src/Sidebar/Sidebar.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from 'react';
22
import classes from './Sidebar.module.css'
33
import PlayerMenu from './PlayerMenu';
4-
import GameMenu from './GameMenu'
4+
// import GameMenu from './GameMenu'
55

66

77

@@ -11,7 +11,7 @@ const Sidebar = ()=>{
1111

1212
return (
1313
<div className={panelClasses.join(' ')}>
14-
<GameMenu />
14+
{/* <GameMenu /> */}
1515
<PlayerMenu />
1616
</div>
1717
)

‎squares/src/Sidebar/Sidebar.module.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,4 +19,8 @@
1919

2020
.option {
2121
background-color: rgb(148, 155, 219);
22+
}
23+
24+
.test{
25+
display: none;
2226
}

‎squares/src/WelcomeWindow.js‎

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
import React, { useState, useEffect } from 'react'
2+
import classes from './App.module.css'
3+
import Modal from './plugins/modal/Modal'
4+
import PropTypes from 'prop-types';
5+
// import * as firebase from 'firebase'
6+
import dbAPI from './firebaseAPI'
7+
8+
9+
console.log('run welcomeWindow');
10+
11+
const GamesList = ()=>{
12+
return (
13+
<div>List</div>
14+
)
15+
}
16+
17+
18+
const WelcomeWindow = ({currentUserName}) =>{
19+
const [showModal, setShowModal] = useState(false);
20+
const [userName, setUserName] = useState(currentUserName);
21+
const [inputName, setInputName] = useState(''); // для сохранения строки ввода имени в переменную
22+
23+
useEffect(()=>{
24+
console.log('effect userName', userName);
25+
if (!userName) return;
26+
localStorage.setItem('userName', userName)
27+
dbAPI.userInit(userName)
28+
}, [userName])
29+
30+
useEffect(()=>{
31+
const name = localStorage.getItem('userName'||[])
32+
console.log('reborn userName', name);
33+
// for clear localStorage activate below strings and run App TWICE:
34+
// localStorage.setItem('userName', '')
35+
setUserName(name)
36+
}, [])
37+
const buttonClasses = []
38+
// add new class
39+
buttonClasses.push('btn');
40+
buttonClasses.push('btn-primary');
41+
42+
43+
const handleNewGame = ()=>{
44+
if (!userName) setShowModal(true)
45+
}
46+
47+
const handleSubmit = () => {
48+
console.log('Submit function!', userName);
49+
setUserName(inputName)
50+
setShowModal(false)
51+
}
52+
53+
const handleCancel = () => {
54+
console.log('Cancel function!');
55+
setShowModal(false)
56+
}
57+
58+
const handleChange = ({target: { value }}) => {
59+
setInputName(value)
60+
}
61+
62+
return (
63+
<div className={classes['App-body']} style={{textAlign: 'center'}}>
64+
65+
<div>{userName + (userName? '! ': '') + `Приветствую Вас на игре 'Квадраты'`}</div>
66+
<GamesList games={'! put list form FB here'}/>
67+
<button
68+
className={buttonClasses.join(' ')}
69+
onClick={handleNewGame}>
70+
New Game
71+
</button>
72+
73+
<button
74+
className={buttonClasses.join(' ')}
75+
onClick={handleNewGame}>
76+
Join Game
77+
</button>
78+
<Modal
79+
title="Test Dialog window"
80+
isOpen={showModal}
81+
onCancel={handleCancel}
82+
onSubmit={handleSubmit}
83+
>
84+
<div className="form-inline" style={{justifyContent: 'center'}}>
85+
<input type="text" className="form-control" placeholder="Enter your name" onChange={handleChange} />
86+
</div>
87+
</Modal>
88+
</div>
89+
)
90+
}
91+
92+
WelcomeWindow.propTypes = {
93+
currentUserName: PropTypes.string,
94+
}
95+
96+
WelcomeWindow.defaultProps = {
97+
currentUserName: '',
98+
}
99+
100+
101+
export default WelcomeWindow

0 commit comments

Comments
 (0)