|
1 | 1 | import React from 'react'; |
2 | 2 |
|
3 | 3 | import Character from './components/Character'; |
4 | | -import bodies from './components/Character/bodies'; |
5 | 4 | import { |
| 5 | + numBodies, |
| 6 | + numHeads, |
| 7 | + numFaces, |
| 8 | + numAccessories, |
6 | 9 | skinColors, |
7 | 10 | clothesColors, |
8 | 11 | } from './components/Character/constants'; |
9 | 12 |
|
| 13 | +const range = (n) => [...Array(n).keys()]; |
| 14 | + |
10 | 15 | function App() { |
11 | 16 | const [bodyIndex, setBodyIndex] = React.useState(0); |
| 17 | + const [headIndex, setHeadIndex] = React.useState(0); |
| 18 | + const [faceIndex, setFaceIndex] = React.useState(0); |
| 19 | + const [accessoryIndex, setAccessoryIndex] = React.useState(0); |
12 | 20 | const [skinColor, setSkinColor] = React.useState(skinColors[0]); |
13 | 21 | const [clothesColor, setClothesColor] = React.useState( |
14 | 22 | clothesColors[0] |
15 | 23 | ); |
16 | 24 |
|
17 | 25 | return ( |
18 | 26 | <div> |
19 | | - {bodies.map((_, index) => ( |
20 | | - <button key={index} onClick={() => setBodyIndex(index)}> |
21 | | - Body {index + 1} |
| 27 | + <div> |
| 28 | + {range(numBodies).map((index) => ( |
| 29 | + <button key={index} onClick={() => setBodyIndex(index)}> |
| 30 | + Body {index + 1} |
| 31 | + </button> |
| 32 | + ))} |
| 33 | + </div> |
| 34 | + <div> |
| 35 | + {range(numHeads).map((index) => ( |
| 36 | + <button key={index} onClick={() => setHeadIndex(index)}> |
| 37 | + Head {index + 1} |
| 38 | + </button> |
| 39 | + ))} |
| 40 | + </div> |
| 41 | + <div> |
| 42 | + {range(numFaces).map((index) => ( |
| 43 | + <button key={index} onClick={() => setFaceIndex(index)}> |
| 44 | + Face {index + 1} |
| 45 | + </button> |
| 46 | + ))} |
| 47 | + </div> |
| 48 | + <div> |
| 49 | + <button onClick={() => setAccessoryIndex(-1)}> |
| 50 | + No Accessory |
22 | 51 | </button> |
23 | | - ))} |
| 52 | + {range(numAccessories).map((index) => ( |
| 53 | + <button |
| 54 | + key={index} |
| 55 | + onClick={() => setAccessoryIndex(index)} |
| 56 | + > |
| 57 | + Accessory {index + 1} |
| 58 | + </button> |
| 59 | + ))} |
| 60 | + </div> |
| 61 | + <div> |
| 62 | + {clothesColors.map(({ label, color }) => ( |
| 63 | + <button |
| 64 | + onClick={() => setClothesColor(color)} |
| 65 | + style={{ backgroundColor: color, width: 50, height: 50 }} |
| 66 | + > |
| 67 | + <span className="visually-hidden">{label}</span> |
| 68 | + </button> |
| 69 | + ))} |
| 70 | + </div> |
| 71 | + <div> |
| 72 | + {skinColors.map(({ label, color }) => ( |
| 73 | + <button |
| 74 | + onClick={() => setSkinColor(color)} |
| 75 | + style={{ backgroundColor: color, width: 50, height: 50 }} |
| 76 | + > |
| 77 | + <span className="visually-hidden">{label}</span> |
| 78 | + </button> |
| 79 | + ))} |
| 80 | + </div> |
24 | 81 | <Character |
25 | 82 | bodyIndex={bodyIndex} |
| 83 | + headIndex={headIndex} |
| 84 | + faceIndex={faceIndex} |
| 85 | + accessoryIndex={accessoryIndex} |
26 | 86 | skinColor={skinColor} |
27 | 87 | clothesColor={clothesColor} |
28 | 88 | /> |
|
0 commit comments