Skip to content

Commit ef1d105

Browse files
joshwcomeaujoshwcomeau
committed
Finish v1 styles
1 parent bf2d198 commit ef1d105

29 files changed

+1010
-632
lines changed

‎.new-component-config.json‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
{
2+
"type": "functional",
3+
"prettierConfig": {
4+
"semi": true,
5+
"singleQuote": true,
6+
"trailingComma": "es5"
7+
}
8+
}

‎public/index.html‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,11 @@
1313
/>
1414
<meta name="theme-color" content="#000000" />
1515
<title>Character Creator — CSS for JavaScript Developers</title>
16+
<link rel="preconnect" href="https://fonts.gstatic.com" />
17+
<link
18+
href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap"
19+
rel="stylesheet"
20+
/>
1621
</head>
1722
<body>
1823
<noscript

‎src/App.js‎

Lines changed: 6 additions & 84 deletions
Original file line numberDiff line numberDiff line change
@@ -1,92 +1,14 @@
11
import React from 'react';
22

3-
import Character from './components/Character';
4-
import {
5-
numBodies,
6-
numHeads,
7-
numFaces,
8-
numAccessories,
9-
skinColors,
10-
clothesColors,
11-
} from './components/Character/constants';
12-
13-
const range = (n) => [...Array(n).keys()];
3+
import CharacterEditor from './components/CharacterEditor';
4+
import Footer from './components/Footer';
145

156
function App() {
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);
20-
const [skinColor, setSkinColor] = React.useState(skinColors[0]);
21-
const [clothesColor, setClothesColor] = React.useState(
22-
clothesColors[0]
23-
);
24-
257
return (
26-
<div>
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
51-
</button>
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>
81-
<Character
82-
bodyIndex={bodyIndex}
83-
headIndex={headIndex}
84-
faceIndex={faceIndex}
85-
accessoryIndex={accessoryIndex}
86-
skinColor={skinColor}
87-
clothesColor={clothesColor}
88-
/>
89-
</div>
8+
<>
9+
<CharacterEditor />
10+
<Footer />
11+
</>
9012
);
9113
}
9214

‎src/components/ButtonRow/ButtonRow.js‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import React from 'react';
2+
3+
import styles from './ButtonRow.module.css';
4+
5+
const ButtonRow = ({ children }) => {
6+
return <div className={styles.buttonRow}>{children}</div>;
7+
};
8+
9+
export default ButtonRow;

‎src/components/ButtonRow/ButtonRow.module.css‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
.buttonRow {
2+
overflow: auto;
3+
white-space: nowrap;
4+
margin-left: -20px;
5+
margin-right: -20px;
6+
margin-bottom: -20px;
7+
padding: 20px;
8+
}

‎src/components/ButtonRow/index.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { default } from './ButtonRow';

‎src/components/Character/Character.js‎

Lines changed: 543 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/components/Character/Character.module.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
.character {
2+
/* Fill the available container height */
3+
height: 100%;
4+
}

‎src/components/Character/constants.js‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
export const numBodies = 7;
22
export const numHeads = 12;
33
export const numFaces = 9;
4-
export const numAccessories = 5;
4+
export const numAccessories = 6;
55

66
export const skinColors = [
77
{ label: 'Porcelain', color: 'hsl(26deg, 72%, 85%)' },
@@ -26,6 +26,7 @@ export const clothesColors = [
2626
{ label: 'Cobalt', color: 'hsl(220deg, 55%, 70%)' },
2727
{ label: 'Fuscia', color: 'hsl(315deg, 65%, 70%)' },
2828
{ label: 'Pink', color: 'hsl(345deg, 75%, 70%)' },
29-
{ label: 'Dark Gray', color: 'hsl(0deg, 0%, 15%)' },
29+
{ label: 'Dark Gray', color: 'hsl(180deg, 9%, 19%)' },
30+
{ label: 'Gray', color: 'hsl(180deg, 3%, 50%)' },
3031
{ label: 'White', color: 'hsl(180deg, 10%, 85%)' },
3132
];

‎src/components/Character/index.js‎

Lines changed: 1 addition & 538 deletions
Large diffs are not rendered by default.

0 commit comments

Comments
 (0)