ساخت صفحه انتخاب کاراکتر در React (بخش اول) — از صفر تا صد

1import React from 'react'
2import ReactDOM from 'react-dom'
3import * as serviceWorker from './serviceWorker'
4import App from './App'
5ReactDOM.render(<App />, document.getElementById('root'))
6serviceWorker.unregister()

1body {
2  margin: 0;
3  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto',
4    'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans',
5    'Helvetica Neue', sans-serif;
6  -webkit-font-smoothing: antialiased;
7  -moz-osx-font-smoothing: grayscale;
8  background: rgb(23, 30, 34);
9}
10code {
11  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
12    monospace;
13}
14.root {
15  padding: 20px 0;
16}

1import React from 'react'
2import styles from './styles.module.css'
3
4const App = () => <div className={styles.root}>{null}</div>
5
6export default App

1import React from 'react'
2import noviceImg from './resources/novice.jpg'
3import styles from './styles.module.css'
4
5const App = () => (
6  <div className={styles.root}>
7    <h1 className={styles.header}>
8      You are a <em>Novice</em>
9    </h1>
10    <div className={styles.content}>
11      <div className={styles.characterBox} style={{ width: 200, height: 150 }}>
12        <img alt="" src={noviceImg} />
13      </div>
14    </div>
15    <small className={styles.subheader}>
16      Congratulations on reaching level 10!
17    </small>
18  </div>
19)
20
21export default App

1.content {
2  display: flex;
3  justify-content: center;
4}
5
6.header {
7  text-align: center;
8  color: rgb(252, 216, 169);
9  font-weight: 300;
10  margin: 0;
11}
12
13.subheader {
14  color: #fff;
15  text-align: center;
16  font-weight: 300;
17  width: 100%;
18  display: block;
19}
20
21.characterBox {
22  transition: all 0.1s ease-out;
23  width: 300px;
24  height: 250px;
25  border: 1px solid rgb(194, 5, 115);
26  background: rgb(82, 26, 134);
27  margin: 12px 6px;
28  overflow: hidden;
29}
30
31.characterBox img {
32  width: 100%;
33  height: 100%;
34  object-fit: cover;
35  cursor: pointer;
36}

1export const Header = ({ children, ...rest }) => (
2  // eslint-disable-next-line
3  <h1 className={styles.header} {...rest}>
4    {children}
5  </h1>
6)
7
8export const Subheader = ({ children, ...rest }) => (
9  <small className={styles.subheader} {...rest}>
10    {children}
11  </small>
12)
13
14export const Content = ({ children, ...rest }) => (
15  <div className={styles.content} {...rest}>
16    {children}
17  </div>
18)

1import React from 'react'
2import noviceImg from './resources/novice.jpg'
3import styles from './styles.module.css'
4import { Header, Subheader, Content } from './components'
5
6const App = () => (
7  <div className={styles.root}>
8    <Header>
9      You are a <em>Novice</em>
10    </Header>
11    <Content>
12      <div className={styles.characterBox} style={{ width: 200, height: 150 }}>
13        <img alt="" src={noviceImg} />
14      </div>
15    </Content>
16    <Subheader>Congratulations on reaching level 10!</Subheader>
17  </div>
18)
19
20export default App

1import React from 'react'
2import noviceImg from './resources/novice.jpg'
3import sorceressImg from './resources/sorceress.jpg'
4import knightImg from './resources/knight.jpg'
5import styles from './styles.module.css'
6import { Header, Subheader, Content } from './components'
7
8const App = () => (
9  <div className={styles.root}>
10    <Header>
11      You are a <em>Novice</em>
12    </Header>
13    <Content>
14      <div className={styles.characterBox} style={{ width: 200, height: 150 }}>
15        <img alt="" src={noviceImg} />
16      </div>
17    </Content>
18    <Subheader>Congratulations on reaching level 10!</Subheader>
19    <div style={{ margin: '25px auto' }}>
20      <Header>Choose your destiny</Header>
21      <Subheader>Choose one. Or all, if you know what I mean.</Subheader>
22      <Content>
23        <div className={styles.characterBox}>
24          <h2>Sorceress</h2>
25          <img alt="" src={sorceressImg} />
26        </div>
27        <div className={styles.characterBox}>
28          <h2>Knight</h2>
29          <img alt="" src={knightImg} />
30        </div>
31      </Content>
32    </div>
33  </div>
34)
35
36export default App

1.characterBox h2 {
2  transition: all 0.3s ease-out;
3  text-align: center;
4  color: rgb(213, 202, 255);
5  font-style: italic;
6  font-weight: 500;
7}

1const App = () => {
2  const onSelect = (e) => {
3    console.log("Don't mind me. I'm useless until I become useful")
4  }
5  
6  return (
7    <div className={styles.root}>
8      <Header>
9        You are a <em>Novice</em>
10      </Header>
11      <Content>
12        <div
13          className={styles.characterBox}
14          style={{ width: 200, height: 150 }}
15        >
16          <img alt="" src={noviceImg} />
17        </div>
18      </Content>
19      <Subheader>Congratulations on reaching level 10!</Subheader>
20      <div style={{ margin: '25px auto' }}>
21        <Header>Choose your destiny</Header>
22        <Subheader>Choose one. Or all, if you know what I mean.</Subheader>
23        <Content>
24          <div onClick={onSelect} className={styles.characterBox}>
25            <h2>Sorceress</h2>
26            <img alt="" src={sorceressImg} />
27          </div>
28          <div onClick={onSelect} className={styles.characterBox}>
29            <h2>Knight</h2>
30            <img alt="" src={knightImg} />
31          </div>
32        </Content>
33      </div>
34    </div>
35  )
36}

1.characterBox:hover h2 {
2  color: rgb(191, 255, 241);
3}
4
5.characterBox img {
6  transition: all 0.3s ease-out;
7  width: 100%;
8  height: 100%;
9  object-fit: cover;
10  cursor: pointer;
11}
12
13.characterBox img.tier2:hover {
14  animation: hueRotate 2s infinite;
15  transform: scale(1.05);
16}
17
18@keyframes hueRotate {
19  0% {
20    filter: hue-rotate(0deg);
21  }
22  50% {
23    filter: hue-rotate(260deg) grayscale(100%);
24  }
25  100% {
26    filter: hue-rotate(0deg);
27  }
28}

1<div style={{ margin: '25px auto' }}>
2  <Header>Choose your destiny</Header>
3  <Subheader>Choose one. Or all, if you know what I mean.</Subheader>
4  <Content>
5    <div onClick={onClick} className={styles.characterBox}>
6      <h2>Sorceress</h2>
7      <img alt="" src={sorceressImg} className={styles.tier2} />
8    </div>
9    <div onClick={onClick} className={styles.characterBox}>
10      <h2>Knight</h2>
11      <img alt="" src={knightImg} className={styles.tier2} />
12    </div>
13  </Content>
14</div>

1import React from 'react'
2import cx from 'classnames'
3import noviceImg from './resources/novice.jpg'
4import sorceressImg from './resources/sorceress.jpg'
5import knightImg from './resources/knight.jpg'
6import styles from './styles.module.css'
7import { Header, Subheader, Content } from './components'
8
9const useLevelUpScreen = () => {
10  const [selected, setSelected] = React.useState([])
11  const onSelect = (type) => (e) => {
12    setSelected((prevSelected) => {
13      if (prevSelected.includes(type)) {
14        return prevSelected.filter((t) => t !== type)
15      }
16      return [...prevSelected, type]
17    })
18  }
19  return {
20    selected,
21    onSelect,
22  }
23}
24
25const App = () => {
26  const { selected, onSelect } = useLevelUpScreen()
27  return (
28    <div className={styles.root}>
29      <Header>
30        You are a <em>Novice</em>
31      </Header>
32      <Content>
33        <div
34          className={styles.characterBox}
35          style={{ width: 200, height: 150 }}
36        >
37          <img alt="" src={noviceImg} />
38        </div>
39      </Content>
40      <Subheader>Congratulations on reaching level 10!</Subheader>
41      <div style={{ margin: '25px auto' }}>
42        <Header>Choose your destiny</Header>
43        <Subheader>Choose one. Or all, if you know what I mean.</Subheader>
44        <Content>
45          <div onClick={onSelect('Sorceress')} className={styles.characterBox}>
46            <h2>Sorceress</h2>
47            <img alt="" src={sorceressImg} className={styles.tier2} />
48          </div>
49          <div onClick={onSelect('Knight')} className={styles.characterBox}>
50            <h2>Knight</h2>
51            <img alt="" src={knightImg} className={styles.tier2} />
52          </div>
53        </Content>
54      </div>
55    </div>
56  )
57}
58
59export default App

1const App = () => {
2  const { selected, onSelect } = useLevelUpScreen()
3  
4  return (
5    <div className={styles.root}>
6      <Header>
7        You are a <em>Novice</em>
8      </Header>
9      <Content>
10        <div
11          className={styles.characterBox}
12          style={{ width: 200, height: 150 }}
13        >
14          <img alt="" src={noviceImg} />
15        </div>
16      </Content>
17      <Subheader>Congratulations on reaching level 10!</Subheader>
18      <div style={{ margin: '25px auto' }}>
19        <Header>Choose your destiny</Header>
20        <Subheader>Choose one. Or all, if you know what I mean.</Subheader>
21        <Content>
22          <div onClick={onSelect('Sorceress')} className={styles.characterBox}>
23            <h2>Sorceress</h2>
24            <img alt="" src={sorceressImg} className={styles.tier2} />
25          </div>
26          <div onClick={onSelect('Knight')} className={styles.characterBox}>
27            <h2>Knight</h2>
28            <img alt="" src={knightImg} className={styles.tier2} />
29          </div>
30        </Content>
31      </div>
32    </div>
33  )
34}

1const App = () => {
2  const { selected, onSelect } = useLevelUpScreen()
3  
4  return (
5    <div className={styles.root}>
6      <Header>
7        You are a <em>Novice</em>
8      </Header>
9      <Content>
10        <div
11          className={styles.characterBox}
12          style={{ width: 200, height: 150 }}
13        >
14          <img alt="" src={noviceImg} />
15        </div>
16      </Content>
17      <Subheader>Congratulations on reaching level 10!</Subheader>
18      <div style={{ margin: '25px auto' }}>
19        <Header>Choose your destiny</Header>
20        <Subheader>Choose one. Or all, if you know what I mean.</Subheader>
21        <Content>
22          <div
23            onClick={onSelect('Sorceress')}
24            className={cx(styles.characterBox, {
25              [styles.selectedBox]: selected.includes('Sorceress'),
26            })}
27          >
28            <h2>Sorceress</h2>
29            <img
30              alt=""
31              src={sorceressImg}
32              className={cx(styles.tier2, {
33                [styles.selected]: selected.includes('Sorceress'),
34              })}
35            />
36          </div>
37          <div
38            onClick={onSelect('Knight')}
39            className={cx(styles.characterBox, {
40              [styles.selectedBox]: selected.includes('Knight'),
41            })}
42          >
43            <h2>Knight</h2>
44            <img
45              alt=""
46              src={knightImg}
47              className={cx(styles.tier2, {
48                [styles.selected]: selected.includes('Knight'),
49              })}
50            />
51          </div>
52        </Content>
53      </div>
54    </div>
55  )
56}

1.selectedBox {
2  border: 1px solid rgb(24, 240, 255) !important;
3}
4.characterBox img.tier2:hover,
5.characterBox img.selected {
6  animation: hueRotate 2s infinite;
7  transform: scale(1.05);
8}

1const App = () => {
2  const { selected, onSelect, morphed, onMorph } = useLevelUpScreen()
3  
4  return (
5    <div className={styles.root}>
6      <Header>
7        You are a <em>Novice</em>
8      </Header>
9      <Content>
10        <div
11          className={styles.characterBox}
12          style={{ width: 200, height: 150 }}
13        >
14          <img alt="" src={noviceImg} />
15        </div>
16      </Content>
17      <Subheader>Congratulations on reaching level 10!</Subheader>
18      <div style={{ margin: '25px auto' }}>
19        <Header>Choose your destiny</Header>
20        <Subheader>Choose one. Or all, if you know what I mean.</Subheader>
21        <Content>
22          <div
23            onClick={onSelect('Sorceress')}
24            className={cx(styles.characterBox, {
25              [styles.selectedBox]: selected.includes('Sorceress'),
26            })}
27          >
28            <h2>Sorceress</h2>
29            <img
30              alt=""
31              src={sorceressImg}
32              className={cx(styles.tier2, {
33                [styles.selected]: selected.includes('Sorceress'),
34              })}
35            />
36          </div>
37          <div
38            onClick={onSelect('Knight')}
39            className={cx(styles.characterBox, {
40              [styles.selectedBox]: selected.includes('Knight'),
41            })}
42          >
43            <h2>Knight</h2>
44            <img
45              alt=""
46              src={knightImg}
47              className={cx(styles.tier2, {
48                [styles.selected]: selected.includes('Knight'),
49              })}
50            />
51          </div>
52        </Content>
53      </div>
54      <div className={styles.morph}>
55        <button
56          name="morph"
57          type="button"
58          className={styles.morph}
59          onClick={onMorph}
60        >
61          Morph
62        </button>
63      </div>
64    </div>
65  )
66}

1const useLevelUpScreen = () => {
2  const [selected, setSelected] = React.useState([])
3  const [morphed, setMorphed] = React.useState(false)
4  
5  const onSelect = (type) => (e) => {
6    setSelected((prevSelected) => {
7      if (prevSelected.includes(type)) {
8        return prevSelected.filter((t) => t !== type)
9      }
10      return [...prevSelected, type]
11    })
12  }
13  
14  const onMorph = () => {
15    setTimeout(() => {
16      setMorphed(true)
17    }, 1500) // simulating a real server / api call response time
18  }
19  
20  return {
21    selected,
22    onSelect,
23    morphed,
24    onMorph,
25  }
26}

1.morph {
2  margin: 50px auto;
3  text-align: center;
4}

1{
2  !!selected.length && (
3    <div>
4      <button
5        name="morph"
6        type="button"
7        className={styles.morph}
8        onClick={onMorph}
9      >
10        Morph
11      </button>
12    </div>
13  )
14}

1.morphArrow {
2  color: rgb(123, 247, 199);
3  transform: scale(2);
4  animation: morphArrow 2s infinite;
5}
6
7.morphArrowFlipped {
8  composes: morphArrow;
9  transform: scale(-2, 2);
10}
11
12@keyframes morphArrow {
13  0% {
14    opacity: 1;
15    color: rgb(123, 247, 199);
16  }
17  40% {
18    opacity: 0.4;
19    color: rgb(248, 244, 20);
20  }
21  100% {
22    opacity: 1;
23    color: rgb(123, 247, 199);
24  }
25}