Commit d87d9efd authored by Matthew Odle's avatar Matthew Odle

score submit working; need to clear up the modal style

parent 5e21f21c
......@@ -4,32 +4,49 @@ import React from 'react';
import style from './style';
export class LeaderboardForm extends React.Component {
componentDidUpdate = () => {
this.refs.field_name.focus();
console.log(this.nameInput);
constructor(props) {
super(props);
this.state = {
name: '',
};
}
handleSubmit = () => {
const leaderboard = {
name: this.state.name,
};
this.props.handleSubmit(leaderboard);
this.setState({
name: '',
});
}
onChange = (e) => {
this.setState({
name: e.target.value,
});
}
// ref={input => input && input.focus()}
render = () => {
return <div>
<div style={ style.title }>Submit your name to the leaderboard!</div>
<div style={ style.regularText }>Nobody left to stack the corpses... Surely you could do better.</div>
<div style={ style.regularText }>Your score: { this.props.score }</div>
<form style={ style.leaderboardForm } onSubmit={ this.props.handleSubmit }>
<input
type='text'
<div style={ style.leaderboardForm }>
<input type='text'
placeholder='Your name...'
style={ style.leaderboardFormName }
value={ this.props.name }
onChange={ this.props.handleNameChange }
ref='field_name'
autoFocus />
<input
type='submit'
style={ style.leaderboardFormButton }
value='Post' />
<button type="button" style={ style.leaderboardFormButton } onClick={() => this.props.hideModal()} >Cancel</button>
</form>
value={ this.state.name }
onChange={ this.onChange } />
<div style={style.buttons}>
<button style={ style.leaderboardFormButton } onClick={this.handleSubmit} value="Post" >Submit</button>
<button style={ style.leaderboardFormButton } onClick={() => this.props.hideModal()} >Cancel</button>
</div>
</div>
</div>
}
}
......@@ -5,18 +5,13 @@ const style = {
fontSize:'22px'
},
leaderboardForm: {
margin:'10px',
display:'flex',
flexFlow:'row wrap',
justifyContent:'spacebetween'
margin:'10px'
},
leaderboardFormName: {
minWidth:'150px',
margin:'3px',
padding:'0 10px',
borderRadius:'3px',
height:'40px',
flex:'2'
},
leaderboardFormButton: {
minWidth:'75px',
......@@ -34,6 +29,25 @@ const style = {
regularText: {
textAlign:'center',
fontSize:'15px',
},
buttons: {
display:'block',
},
modalDialog: {
position:'absolute',
border:'2px solid black',
background:'white',
zIndex:'1000',
},
screenBlock: {
position:'fixed',
top:'0',
left:'0',
bottom:'0',
right:'0',
backgroundColor:'gray',
opacity:'0.8',
zIndex:'900',
}
}
......
......@@ -27,9 +27,7 @@ export class Village extends React.Component {
log: [],
villagerStatus: VILLAGER_STATUS,
showModal: false,
name: '',
};
this.handleNameChange = this.handleNameChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
......@@ -39,9 +37,6 @@ export class Village extends React.Component {
hideModal = (canDelete) => {
this.setState({ name : '', showModal: false });
};
handleNameChange = (e) => {
this.setState({ name: e.target.value });
}
handleLeaderboardSubmit = (leaderboard) => {
leaderboard.score = this.state.score;
......@@ -51,13 +46,11 @@ export class Village extends React.Component {
});
}
handleSubmit = (e) => {
e.preventDefault();
let name = this.state.name.trim();
if (!name) {
handleSubmit = (leaderboard) => {
if (!leaderboard.name.trim()) {
return;
}
this.handleLeaderboardSubmit({ name: name });
this.handleLeaderboardSubmit(leaderboard);
this.hideModal();
}
......@@ -121,7 +114,6 @@ export class Village extends React.Component {
canProduce = (building) => {
const theItems = this.state.villageStore;
let flag = true;
// FIXME: dictionary would be better, this is n^2
if (building.materials) {
building.materials.map( material =>
theItems[material].count > 0 && flag ? flag = true : flag = false
......@@ -439,11 +431,12 @@ export class Village extends React.Component {
if (this.state.gameOver) {
clearInterval(this.timer);
this.showModal();
} else {
this.setState({
score: this.state.score + 1,
buildings: buildings,
});
}
this.setState({
score: this.state.score + 1,
buildings: buildings,
});
};
componentDidMount = () => {
this.timer = setInterval(() => this.tick(), KNOBS_AND_LEVERS.interval);
......@@ -460,8 +453,8 @@ export class Village extends React.Component {
const villagerStatus = this.state.villagerStatus;
return (
<div className="village">
<SubmitScoreDialog key='saveme' showModal={this.state.showModal}>
<LeaderboardForm handleSubmit={this.handleSubmit} name={this.state.name}
<SubmitScoreDialog showModal={this.state.showModal} >
<LeaderboardForm handleSubmit={this.handleSubmit}
handleNameChange={this.handleNameChange} hideModal={this.hideModal}
score={this.state.score}
/>
......
......@@ -205,12 +205,8 @@ button {
.modal-dialog {
position: absolute;
top:50%;
left:50%;
height: 300px;
width: 500px;
margin-top:-150px;
margin-left:-250px;
top:10px;
left:10px;
border: 2px solid black;
background: white;
z-index: 1000;
......
Markdown is supported
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