159 src/components/game/NewGameComponent.jsx
View file
@@ -1,10 +1,16 @@
import React, { Component } from 'react';

import AddCourseContainer from 'components/course/AddCourseContainer';
import AddMarkerContainer from 'components/player/AddMarkerContainer';

class AddGameComponent extends Component {

state = {
selectedCourse: undefined,
playingHandicap: 0
selectedCourse: -1,
selectedMarker: -1,
playingHandicap: 0,
addCourseOpen: false,
addMarkerOpen: false
}

selectedCourseChanged = (e) => {
@@ -14,62 +20,117 @@ class AddGameComponent extends Component {
});
}

selectedMarkerChanged = (e) => {

this.setState({
selectedMarker: e.target.value
});
}

playingHandicapChanged = (e) => {

this.setState({
playingHandicap: e.target.value
});
}

addCourseClicked = () => {

this.setState((state) => {

return {
...state,
addCourseOpen: !state.addCourseOpen
};
});
}

addMarkerClicked = () => {

this.setState((state) => {

return {
...state,
addMarkerOpen: !state.addMarkerOpen
};
});
}

render () {

const { courses } = this.props;

return <div className="panel--edit">
<div className="panel--edit__content-container">
<div className="panel--edit__content">
<div className="panel--edit">
<div className="panel--edit__content-container">
<div className="panel--edit__content">
<fieldset className="f-fieldset">
<label className="f-label">
<span className="f-label-text">Game title</span>
<input
className="f-input"
type="text"
onChange={ this.courseNameChanged }
placeholder="course name"
value={ this.state.name } />
</label>
<label className="f-label">
<span className="f-label-text">Select course</span>
<select className="f-select" value={ this.state.selectedCourse } onChange={ this.selectedCourseChanged }>
{ courses.map((course, idx) => {
return <option key={ idx } value={ course.id }>{ course.name }</option>;
}) }
</select>
</label>
<label className="f-label">
<span className="f-label-text">Playing handicap</span>
<input
className="f-input"
type="text"
onChange={ this.playingHandicapChanged }
placeholder="playing handicap"
value={ this.state.playingHandicap } />
</label>
<button
className="btn--action panel--edit__btn wide"
onClick={ this.AddGameOpenClicked }>
Start game
</button>
</fieldset>
</div>
</div>
</div>
</div>
</div>
</div>;
const {
courses,
markers
} = this.props;

return <React.Fragment>
<fieldset className="f-fieldset">
<label className="f-label">
<span className="f-label-text">Game title</span>
<input
className="f-input"
type="text"
onChange={ this.courseNameChanged }
placeholder="course name"
value={ this.state.name } />
</label>
<label className="f-label">
<span className="f-label-text">Course</span>
<select
className="f-select"
value={ this.state.selectedCourse }
onChange={ this.selectedCourseChanged }
defaultValue={ -1 }>
<option key={ -1 } value={ -1 }>new course</option>
{courses.map((course, idx) => {
return <option key={ idx } value={ course.id }>{ course.name }</option>;
})}
</select>
<button className="f-btn--knob btn--action btn--trail" onClick={ this.addCourseClicked }>add course</button>
</label>
</fieldset>
{this.state.addCourseOpen && <AddCourseContainer />}
<fieldset className="f-fieldset">
<label className="f-label">
<span className="f-label-text">Playing handicap</span>
<input
className="f-input"
type="text"
onChange={ this.playingHandicapChanged }
placeholder="playing handicap"
value={ this.state.playingHandicap } />
</label>
<label className="f-label">
<span className="f-label-text">Marker</span>
<select className="f-select" value={ this.state.selectedMarker } onChange={ this.selectedMarkerChanged }>
<option key={ -1 } value={ -1 }>No marker</option>
{markers.map((marker, idx) => {
return <option key={ idx } value={ marker.id }>{ marker.firstName }</option>;
})}
</select>
<button className="f-btn--knob btn--trail btn--action" onClick={ this.addMarkerClicked }>add marker</button>
</label>
</fieldset>
{ this.state.addMarkerOpen && <AddMarkerContainer /> }
<fieldset className="f-fieldset">
{ this.state.selectedMarker !== -1 &&
<label className="f-label">
<span className="f-label-text">Playing handicap</span>
<input
className="f-input"
type="text"
onChange={ this.playingHandicapChanged }
placeholder="playing handicap"
value={ this.state.playingHandicap } />
</label>
}
<button
className="btn--action panel--edit__btn wide"
onClick={ this.AddGameOpenClicked }>
Start game
</button>
</fieldset>
</React.Fragment>;
}
}

8 src/components/game/NewGameContainer.js
View file
@@ -8,10 +8,14 @@ import NewGameComponent from 'components/game/NewGameComponent';

const mapStateToProps = (state, ownProps) => {

const { courses } = state;
const {
courses,
markers
} = state;

return {
courses
courses,
markers
};
};

2 src/components/hole/HoleEditComponent.jsx
View file
@@ -86,7 +86,7 @@ export default class HoleEditComponent extends Component {
placeholder="length"
onChange={ this.lengthChanged }/>
</div>
{ this.props.addHole && <button className="f-btn-add-hole btn--action" onClick={ this.addHole }>add</button> }
{ this.props.addHole && <button className="f-btn--knob btn--action" onClick={ this.addHole }>add</button> }
</label>;
}
}
66 src/components/player/AddMarkerComponent.jsx
View file
@@ -31,42 +31,36 @@ class AddMarkerComponent extends Component {
}

render () {
return <div className="panel--edit">
<div className="panel--edit__content-container">
<div className="panel--edit__content">
<fieldset className="f-fieldset">
<label className="f-label">
<span className="f-label-text">first name</span>
<input
className="f-input"
type="text"
onChange={ this.firstNameChanged }
placeholder="first name"
value={ this.state.firstName } />
</label>
<label className="f-label">
<span className="f-label-text">last name</span>
<input
className="f-input"
type="text"
onChange={ this.lastNameChanged }
placeholder="last name"
value={ this.state.lastName } />
</label>
<label className="f-label">
<span className="f-label-text">handicap</span>
<input
className="f-input"
type="text"
onChange={ this.handicapChanged }
placeholder="playing handicap"
value={ this.state.handicap } />
</label>
<button disabled={ this.state.firstName.length === 0 } onClick={ this.addMarkerButtonClicked } className="btn--action wide">Add</button>
</fieldset>
</div>
</div>
</div>;
return <fieldset className="f-fieldset">
<label className="f-label">
<span className="f-label-text">first name</span>
<input
className="f-input"
type="text"
onChange={ this.firstNameChanged }
placeholder="first name"
value={ this.state.firstName } />
</label>
<label className="f-label">
<span className="f-label-text">last name</span>
<input
className="f-input"
type="text"
onChange={ this.lastNameChanged }
placeholder="last name"
value={ this.state.lastName } />
</label>
<label className="f-label">
<span className="f-label-text">handicap</span>
<input
className="f-input"
type="text"
onChange={ this.handicapChanged }
placeholder="playing handicap"
value={ this.state.handicap } />
</label>
<button disabled={ this.state.firstName.length === 0 } onClick={ this.addMarkerButtonClicked } className="btn--action wide">Add</button>
</fieldset>;
}
}

22 src/components/player/MarkerListComponent.jsx
View file
@@ -1,20 +1,16 @@
import React from 'react';

const MarkerListComponent = ({ markers }) => {
console.log('markers: ', markers);

return <div className="panel--edit">
<div className="panel--edit__content">
{ markers && <ol className="plain-list player-list">
{ markers.map((marker, idx) =>
<li className="player-list__item" key={idx}>
<div className="player-item">
<div className="player-item__label">{ marker.firstName }</div>
</div>
</li>)}
</ol>}
</div>
</div>;
return <ol className="plain-list item-list">
{ markers.map((marker, idx) =>
<li className="list__item" key={idx}>
<div className="list-item__container">
<div className="list-item__label">{ marker.firstName }</div>
</div>
</li>)
}
</ol>;
};

export default MarkerListComponent;
2 src/components/player/MarkerListContainer.js
View file
@@ -9,7 +9,7 @@ import MarkerListComponent from './MarkerListComponent';
const mapStateToProps = (state, ownProps) => {

const { markers } = state;
console.log('markers: ', markers);

return {
markers
};
60 src/components/player/MarkersComponent.jsx
View file
@@ -0,0 +1,60 @@
import React, { Component } from 'react';

import MarkerListContainer from 'components/player/MarkerListContainer';
import AddMarkerContainer from 'components/player/AddMarkerContainer';

class MarkersComponent extends Component {

state = {
markerListOpen: false,
addMarkerOpen: false
}

markerListOpenClicked = () => {

this.setState((state) => {

const markerListOpen = !state.markerListOpen;

return {
markerListOpen,
addMarkerOpen: !markerListOpen ? false : state.addMarkerOpen
};
});
}

addMarkerOpenClicked = () => {

this.setState((state) => {

return {
addMarkerOpen: !state.addMarkerOpen
};
});
}

render () {

return <div>
<button
className="btn--action panel--edit__btn wide"
onClick={ this.markerListOpenClicked }>
Markers
</button>
{ this.state.markerListOpen &&
<MarkerListContainer />
}
{ this.state.markerListOpen &&
<button
className="btn--action wide"
onClick={ this.addMarkerOpenClicked }>Add marker</button>
}
{ this.state.markerListOpen &&
this.state.addMarkerOpen &&
<AddMarkerContainer />
}
</div>;
}
}

export default MarkersComponent;
64 src/components/player/PlayerComponent.jsx
View file
@@ -26,41 +26,35 @@ class PlayerComponent extends Component {

const { player } = this.props;

return <div className="panel--edit">
<div className="panel--edit__content-container">
<div className="panel--edit__content">
<fieldset className="f-fieldset">
<label className="f-label">
<span className="f-label-text">first name</span>
<input
className="f-input"
type="text"
onChange={ this.firstNameChanged }
placeholder="first name"
value={ this.state.name } />
</label>
<label className="f-label">
<span className="f-label-text">last name</span>
<input
className="f-input"
type="text"
onChange={ this.lastNameChanged }
placeholder="last name"
value={ this.state.lastName } />
</label>
<label className="f-label">
<span className="f-label-text">handicap</span>
<input
className="f-input"
type="text"
onChange={ this.handicapChanged }
placeholder="playing handicap"
value={ this.state.handicap } />
</label>
</fieldset>
</div>
</div>
</div>;
return <fieldset className="f-fieldset">
<label className="f-label">
<span className="f-label-text">first name</span>
<input
className="f-input"
type="text"
onChange={ this.firstNameChanged }
placeholder="first name"
value={ this.state.name } />
</label>
<label className="f-label">
<span className="f-label-text">last name</span>
<input
className="f-input"
type="text"
onChange={ this.lastNameChanged }
placeholder="last name"
value={ this.state.lastName } />
</label>
<label className="f-label">
<span className="f-label-text">handicap</span>
<input
className="f-input"
type="text"
onChange={ this.handicapChanged }
placeholder="playing handicap"
value={ this.state.handicap } />
</label>
</fieldset>;
}
}

1 src/components/player/PlayerContainer.js
View file
@@ -7,7 +7,6 @@ import { bindActionCreators } from 'redux';
import PlayerComponent from 'components/player/PlayerComponent';

const mapStateToProps = (state, ownProps) => {
console.log('state: ', state);

const { player } = state;

8 src/scss/_button.scss
View file
@@ -3,9 +3,17 @@
min-height: 4rem;
border-radius: 0;
border: 1px solid green;
border: none;
background: rgba(0,255,0,.5);

&:disabled {
background-color: lightgray;
}
&:focus {
outline: none;
}
}

.btn--trail {
margin-left: 1rem;
}
9 src/scss/_course-list.scss
View file
@@ -1,15 +1,6 @@
.course-list__item {

display: flex;
min-height: 4rem;
vertical-align: middle;
width: 100%;
}

.course-item {
display: flex;
flex: 1;
padding: 1rem;
}

.course-item__label {
9 src/scss/_form.scss
View file
@@ -31,12 +31,16 @@

.f-select {
flex: 1;

option {
padding-left: 1rem;
}
}

.f-label-text {

display: block;
width: 30%;
width: 33%;
padding-right: 1rem;

&:before {
@@ -96,8 +100,9 @@
}
}

.f-btn-add-hole {
.f-btn--knob {
flex: 1;
min-height: 4rem;
max-width: 4rem;
white-space: normal;
}
48 src/scss/_list.scss
View file
@@ -2,4 +2,50 @@
margin: 0;
padding: 0;
list-style: none;
}
}

.item-list {

padding: 1rem 0;

.list__item {

padding: 0 1rem 1rem 1rem;
}

:first-child {

padding-top: 0;
}

:last-child {

padding-bottom: 0;
}
}

.list__item {

display: flex;
min-height: 4rem;
vertical-align: middle;
width: 100%;
}

.list-item__container {

display: flex;
flex: 1;
}

.list-item__label {

flex: 5;

&:before {
display: inline-block;
content: '';
height: 100%;
vertical-align: middle;
}
}
13 src/scss/_player-list.scss
View file
@@ -7,22 +7,13 @@
}

.player-item {

display: flex;
flex: 1;
padding: 1rem;
}

.player-item__label {
flex: 5;

&:before {
display: inline-block;
content: '';
height: 100%;
vertical-align: middle;
}
}
.player-item__btn {

flex: 1;
max-width: 4rem;
}
2 src/scss/_style.scss
View file
@@ -13,5 +13,5 @@
@import 'utils';

* {
outline: 1px solid rgba(255,0,0,.5);
//outline: 1px solid rgba(255,0,0,.5);
}