Skip to content
Snippets Groups Projects
Commit 9bb3a45f authored by Joni Laukka's avatar Joni Laukka
Browse files

New game form is now a portal. It does not send any data to server.

parent 210a4e6c
No related branches found
No related tags found
3 merge requests!21Development,!15Get game creation to user-marker-database-interactions,!13Resolve "Pelinluontilomake"
Hide whitespace changes
Inline Side-by-side
public/index.html
+ 1
− 0
View file @ 9bb3a45f
...@@ -23,6 +23,7 @@ ...@@ -23,6 +23,7 @@
</head> </head>
<body> <body>
<noscript>You need to enable JavaScript to run this app.</noscript> <noscript>You need to enable JavaScript to run this app.</noscript>
<div id="form"></div>
<div id="root"></div> <div id="root"></div>
<!-- <!--
This HTML file is a template. This HTML file is a template.
......
src/App.css
+ 18
− 1
View file @ 9bb3a45f
...@@ -51,7 +51,7 @@ div.header button:hover { ...@@ -51,7 +51,7 @@ div.header button:hover {
div.fade-main { div.fade-main {
position: fixed; position: fixed;
top: 0; top: 0;
z-index: 1000; z-index: 1020;
height: 100vh; height: 100vh;
width: 100vw; width: 100vw;
margin: auto; margin: auto;
...@@ -138,3 +138,20 @@ div.login button:hover { ...@@ -138,3 +138,20 @@ div.login button:hover {
background-color: darkblue; background-color: darkblue;
cursor: pointer; cursor: pointer;
} }
.login .formDate {
width: 30%;
}
.login label.formDate {
color: white;
width: 10%;
margin-left: 10%;
font-size: 180%;
}
.login .formTime {
width: 30%;
margin-right: 20%;
}
src/components/NewGameForm.js
+ 38
− 33
View file @ 9bb3a45f
import React from 'react'; import React from 'react';
import ReactDOM from 'react-dom';
export class NewGameForm extends React.Component{ export class NewGameForm extends React.Component{
constructor(props){ constructor(props){
...@@ -21,7 +22,6 @@ export class NewGameForm extends React.Component{ ...@@ -21,7 +22,6 @@ export class NewGameForm extends React.Component{
handleChange = e => { handleChange = e => {
const { name, value } = e.target; const { name, value } = e.target;
console.log(value, name);
this.setState({ [name]: value }); this.setState({ [name]: value });
}; };
...@@ -43,34 +43,34 @@ export class NewGameForm extends React.Component{ ...@@ -43,34 +43,34 @@ export class NewGameForm extends React.Component{
e.preventDefault(); e.preventDefault();
// Send Game info to the server // Send Game info to the server
fetch('http://localhost:5000/user/login', { // fetch('http://localhost:5000/user/login', {
method: 'POST', // method: 'POST',
headers: { // headers: {
Accept: 'application/json', // Accept: 'application/json',
'Content-Type': 'application/json' // 'Content-Type': 'application/json'
}, // },
body: JSON.stringify({ // body: JSON.stringify({
name: name, // name: name,
password: password // password: password
}) // })
}) // })
.then(res => res.json()) // .then(res => res.json())
.then( // .then(
result => { // result => {
if (result.name) { // if (result.name) {
this.props.handleState(result); // this.props.handleState(result);
this.handleView(); // this.handleView();
} else { // } else {
this.handleError(result.errorResponse.message); // this.handleError(result.errorResponse.message);
} // }
}, // },
// Note: it's important to handle errors here // // Note: it's important to handle errors here
// instead of a catch() block so that we don't swallow // // instead of a catch() block so that we don't swallow
// exceptions from actual bugs in components. // // exceptions from actual bugs in components.
error => { // error => {
console.log(error); // console.log(error);
} // }
); // );
}; };
componentDidMount() { componentDidMount() {
...@@ -82,7 +82,7 @@ export class NewGameForm extends React.Component{ ...@@ -82,7 +82,7 @@ export class NewGameForm extends React.Component{
} }
render() { render() {
return ( return ReactDOM.createPortal (
<div className='fade-main'> <div className='fade-main'>
<div className='sticky'> <div className='sticky'>
<span className='close' onClick={this.handleView}> <span className='close' onClick={this.handleView}>
...@@ -110,22 +110,26 @@ export class NewGameForm extends React.Component{ ...@@ -110,22 +110,26 @@ export class NewGameForm extends React.Component{
required required
/> />
<br /> <br />
<label className='formDate'>Start:</label>
<input <input
className='formDate'
type='date' type='date'
name='startDate' name='startDate'
value={this.state.startDate} value={this.state.startDate}
onChange={this.handleChange} onChange={this.handleChange}
required required
/> />
<br />
<input <input
className='formTime'
type='time' type='time'
name='startTime' name='startTime'
onChange={this.handleChange} onChange={this.handleChange}
required required
/> />
<br /> <br />
<label className='formDate'>End:</label>
<input <input
className='formDate'
type='date' type='date'
name='endDate' name='endDate'
value={this.state.endDate} value={this.state.endDate}
...@@ -133,8 +137,8 @@ export class NewGameForm extends React.Component{ ...@@ -133,8 +137,8 @@ export class NewGameForm extends React.Component{
min={this.state.startDate} min={this.state.startDate}
required required
/> />
<br />
<input <input
className='formTime'
type='time' type='time'
name='endTime' name='endTime'
onChange={this.handleChange} onChange={this.handleChange}
...@@ -145,7 +149,8 @@ export class NewGameForm extends React.Component{ ...@@ -145,7 +149,8 @@ export class NewGameForm extends React.Component{
<h2>{this.state.errorMsg}</h2> <h2>{this.state.errorMsg}</h2>
</form> </form>
</div> </div>
</div> </div>,
document.getElementById('form')
); );
} }
} }
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment