Skip to content

Commit d59f0b3

Browse files
tylermcginnistylermcginnis
committed
Code for 3-battle
1 parent 85598d2 commit d59f0b3

File tree

2 files changed

+140
-158
lines changed

2 files changed

+140
-158
lines changed

‎app/components/Battle.js

Lines changed: 136 additions & 155 deletions
Original file line numberDiff line numberDiff line change
@@ -2,82 +2,72 @@ import React from 'react'
22
import { FaUserFriends, FaFighterJet, FaTrophy, FaTimesCircle } from 'react-icons/fa'
33
import PropTypes from 'prop-types'
44
import Results from './Results'
5-
import { ThemeConsumer } from '../contexts/theme'
5+
import ThemeContext from '../contexts/theme'
66
import { Link } from 'react-router-dom'
77

88
function Instructions () {
9+
const theme = React.useContext(ThemeContext)
10+
911
return (
10-
<ThemeConsumer>
11-
{(theme) => (
12-
<div className='instructions-container'>
13-
<h1 className='center-text header-lg'>
14-
Instructions
15-
</h1>
16-
<ol className='container-sm grid center-text battle-instructions'>
17-
<li>
18-
<h3 className='header-sm'>Enter two Github users</h3>
19-
<FaUserFriends className={`bg-${theme}`} color='rgb(255, 191, 116)' size={140} />
20-
</li>
21-
<li>
22-
<h3 className='header-sm'>Battle</h3>
23-
<FaFighterJet className={`bg-${theme}`} color='#727272' size={140} />
24-
</li>
25-
<li>
26-
<h3 className='header-sm'>See the winners</h3>
27-
<FaTrophy className={`bg-${theme}`} color='rgb(255, 215, 0)' size={140} />
28-
</li>
29-
</ol>
30-
</div>
31-
)}
32-
</ThemeConsumer>
12+
<div className='instructions-container'>
13+
<h1 className='center-text header-lg'>
14+
Instructions
15+
</h1>
16+
<ol className='container-sm grid center-text battle-instructions'>
17+
<li>
18+
<h3 className='header-sm'>Enter two Github users</h3>
19+
<FaUserFriends className={`bg-${theme}`} color='rgb(255, 191, 116)' size={140} />
20+
</li>
21+
<li>
22+
<h3 className='header-sm'>Battle</h3>
23+
<FaFighterJet className={`bg-${theme}`} color='#727272' size={140} />
24+
</li>
25+
<li>
26+
<h3 className='header-sm'>See the winners</h3>
27+
<FaTrophy className={`bg-${theme}`} color='rgb(255, 215, 0)' size={140} />
28+
</li>
29+
</ol>
30+
</div>
3331
)
3432
}
3533

36-
class PlayerInput extends React.Component {
37-
state = {
38-
username: ''
39-
}
40-
handleSubmit = (event) => {
41-
event.preventDefault()
34+
function PlayerInput ({ onSubmit, label }) {
35+
const [username, setUsername] = React.useState('')
4236

43-
this.props.onSubmit(this.state.username)
44-
}
45-
handleChange = (event) => {
46-
this.setState({
47-
username: event.target.value
48-
})
49-
}
50-
render() {
51-
return (
52-
<ThemeConsumer>
53-
{(theme) => (
54-
<form className='column player' onSubmit={this.handleSubmit}>
55-
<label htmlFor='username' className='player-label'>
56-
{this.props.label}
57-
</label>
58-
<div className='row player-inputs'>
59-
<input
60-
type='text'
61-
id='username'
62-
className={`input-${theme}`}
63-
placeholder='github username'
64-
autoComplete='off'
65-
value={this.state.username}
66-
onChange={this.handleChange}
67-
/>
68-
<button
69-
className={`btn ${theme === 'dark' ? 'light-btn' : 'dark-btn'}`}
70-
type='submit'
71-
disabled={!this.state.username}
72-
>
73-
Submit
74-
</button>
75-
</div>
76-
</form>
77-
)}
78-
</ThemeConsumer>
79-
)
37+
const handleSubmit = (e) => {
38+
e.preventDefault()
39+
40+
onSubmit(username)
8041
}
42+
43+
const handleChange = (event) => setUsername(event.target.value)
44+
const theme = React.useContext(ThemeContext)
45+
46+
return (
47+
<form className='column player' onSubmit={handleSubmit}>
48+
<label htmlFor='username' className='player-label'>
49+
{label}
50+
</label>
51+
<div className='row player-inputs'>
52+
<input
53+
type='text'
54+
id='username'
55+
className={`input-${theme}`}
56+
placeholder='github username'
57+
autoComplete='off'
58+
value={username}
59+
onChange={handleChange}
60+
/>
61+
<button
62+
className={`btn ${theme === 'dark' ? 'light-btn' : 'dark-btn'}`}
63+
type='submit'
64+
disabled={!username}
65+
>
66+
Submit
67+
</button>
68+
</div>
69+
</form>
70+
)
8171
}
8272

8373
PlayerInput.propTypes = {
@@ -86,31 +76,29 @@ PlayerInput.propTypes = {
8676
}
8777

8878
function PlayerPreview ({ username, onReset, label }) {
79+
const theme = React.useContext(ThemeContext)
80+
8981
return (
90-
<ThemeConsumer>
91-
{(theme) => (
92-
<div className='column player'>
93-
<h3 className='player-label'>{label}</h3>
94-
<div className={`row bg-${theme}`}>
95-
<div className='player-info'>
96-
<img
97-
className='avatar-small'
98-
src={`https://github.com/${username}.png?size=200`}
99-
alt={`Avatar for ${username}`}
100-
/>
101-
<a
102-
href={`https://github.com/${username}`}
103-
className='link'>
104-
{username}
105-
</a>
106-
</div>
107-
<button className='btn-clear flex-center' onClick={onReset}>
108-
<FaTimesCircle color='rgb(194, 57, 42)' size={26} />
109-
</button>
110-
</div>
82+
<div className='column player'>
83+
<h3 className='player-label'>{label}</h3>
84+
<div className={`row bg-${theme}`}>
85+
<div className='player-info'>
86+
<img
87+
className='avatar-small'
88+
src={`https://github.com/${username}.png?size=200`}
89+
alt={`Avatar for ${username}`}
90+
/>
91+
<a
92+
href={`https://github.com/${username}`}
93+
className='link'>
94+
{username}
95+
</a>
11196
</div>
112-
)}
113-
</ThemeConsumer>
97+
<button className='btn-clear flex-center' onClick={onReset}>
98+
<FaTimesCircle color='rgb(194, 57, 42)' size={26} />
99+
</button>
100+
</div>
101+
</div>
114102
)
115103
}
116104

@@ -120,70 +108,63 @@ PlayerPreview.propTypes = {
120108
label: PropTypes.string.isRequired
121109
}
122110

123-
export default class Battle extends React.Component {
124-
state = {
125-
playerOne: null,
126-
playerTwo: null,
127-
}
128-
handleSubmit = (id, player) => {
129-
this.setState({
130-
[id]: player
131-
})
132-
}
133-
handleReset = (id) => {
134-
this.setState({
135-
[id]: null
136-
})
137-
}
138-
render() {
139-
const { playerOne, playerTwo } = this.state
140-
141-
return (
142-
<React.Fragment>
143-
<Instructions />
144-
145-
<div className='players-container'>
146-
<h1 className='center-text header-lg'>Players</h1>
147-
<div className='row space-around'>
148-
{playerOne === null
149-
? <PlayerInput
150-
label='Player One'
151-
onSubmit={(player) => this.handleSubmit('playerOne', player)}
152-
/>
153-
: <PlayerPreview
154-
username={playerOne}
155-
label='Player One'
156-
onReset={() => this.handleReset('playerOne')}
157-
/>
158-
}
159-
160-
{playerTwo === null
161-
? <PlayerInput
162-
label='Player Two'
163-
onSubmit={(player) => this.handleSubmit('playerTwo', player)}
164-
/>
165-
: <PlayerPreview
166-
username={playerTwo}
167-
label='Player Two'
168-
onReset={() => this.handleReset('playerTwo')}
169-
/>
170-
}
171-
</div>
172-
173-
174-
{playerOne && playerTwo && (
175-
<Link
176-
className='btn dark-btn btn-space'
177-
to={{
178-
pathname: '/battle/results',
179-
search: `?playerOne=${playerOne}&playerTwo=${playerTwo}`
180-
}}
181-
>
182-
Battle
183-
</Link>
184-
)}
111+
export default function Battle () {
112+
const [playerOne, setPlayerOne] = React.useState(null)
113+
const [playerTwo, setPlayerTwo] = React.useState(null)
114+
115+
const handleSubmit = (id, player) => id === 'playerOne'
116+
? setPlayerOne(player)
117+
: setPlayerTwo(player)
118+
119+
const handleReset = (id) => id === 'playerOne'
120+
? setPlayerOne(null)
121+
: setPlayerTwo(null)
122+
123+
return (
124+
<React.Fragment>
125+
<Instructions />
126+
127+
<div className='players-container'>
128+
<h1 className='center-text header-lg'>Players</h1>
129+
<div className='row space-around'>
130+
{playerOne === null
131+
? <PlayerInput
132+
label='Player One'
133+
onSubmit={(player) => handleSubmit('playerOne', player)}
134+
/>
135+
: <PlayerPreview
136+
username={playerOne}
137+
label='Player One'
138+
onReset={() => handleReset('playerOne')}
139+
/>
140+
}
141+
142+
{playerTwo === null
143+
? <PlayerInput
144+
label='Player Two'
145+
onSubmit={(player) => handleSubmit('playerTwo', player)}
146+
/>
147+
: <PlayerPreview
148+
username={playerTwo}
149+
label='Player Two'
150+
onReset={() => handleReset('playerTwo')}
151+
/>
152+
}
185153
</div>
186-
</React.Fragment>
187-
)
188-
}
154+
155+
156+
{playerOne && playerTwo && (
157+
<Link
158+
className='btn dark-btn btn-space'
159+
to={{
160+
pathname: '/battle/results',
161+
search: `?playerOne=${playerOne}&playerTwo=${playerTwo}`
162+
}}
163+
>
164+
Battle
165+
</Link>
166+
)}
167+
</div>
168+
</React.Fragment>
169+
)
189170
}

‎app/contexts/theme.js

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import React from 'react'
22

3-
const { Consumer, Provider } = React.createContext()
3+
const ThemeContext = React.createContext()
44

5-
export const ThemeConsumer = Consumer
6-
export const ThemeProvider = Provider
5+
export default ThemeContext
6+
export const ThemeConsumer = ThemeContext.Consumer
7+
export const ThemeProvider = ThemeContext.Provider

0 commit comments

Comments
 (0)