Skip to content

Commit 7c74412

Browse files
underootunderoot
committed
Initial commit
1 parent 54f5d58 commit 7c74412

28 files changed

+16031
-118
lines changed

‎.editorconfig

Whitespace-only changes.

‎.eslintcache

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
[{"/Users/underoot/Documents/nyouth/src/index.tsx":"1","/Users/underoot/Documents/nyouth/src/App.tsx":"2","/Users/underoot/Documents/nyouth/src/generateColor.ts":"3","/Users/underoot/Documents/nyouth/src/components/Playlist/Playlist.tsx":"4","/Users/underoot/Documents/nyouth/src/components/Track/Track.tsx":"5"},{"size":315,"mtime":1608685041237,"results":"6","hashOfConfig":"7"},{"size":418,"mtime":1608686446481,"results":"8","hashOfConfig":"7"},{"size":148,"mtime":1608681237319,"results":"9","hashOfConfig":"7"},{"size":764,"mtime":1608681557676,"results":"10","hashOfConfig":"7"},{"size":942,"mtime":1608681018656,"results":"11","hashOfConfig":"7"},{"filePath":"12","messages":"13","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"sdjrbs",{"filePath":"14","messages":"15","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"16","messages":"17","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"18","messages":"19","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"20","messages":"21","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"/Users/underoot/Documents/nyouth/src/index.tsx",[],"/Users/underoot/Documents/nyouth/src/App.tsx",[],"/Users/underoot/Documents/nyouth/src/generateColor.ts",[],"/Users/underoot/Documents/nyouth/src/components/Playlist/Playlist.tsx",[],"/Users/underoot/Documents/nyouth/src/components/Track/Track.tsx",[]]

‎.eslintrc.json

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"rules": {
3+
"quotes": ["error", "single"]
4+
}
5+
}

‎package-lock.json

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

‎package.json

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,20 @@
11
{
2-
"name": "nyouth",
2+
"name": "@frontendu/ny2020",
33
"version": "0.1.0",
44
"private": true,
55
"dependencies": {
66
"@testing-library/jest-dom": "^5.11.4",
77
"@testing-library/react": "^11.1.0",
88
"@testing-library/user-event": "^12.1.10",
9+
"@types/jest": "^26.0.19",
10+
"@types/node": "^14.14.14",
11+
"@types/react": "^17.0.0",
12+
"@types/react-dom": "^17.0.0",
13+
"magic-snowflakes": "^4.1.6",
914
"react": "^17.0.1",
1015
"react-dom": "^17.0.1",
1116
"react-scripts": "4.0.1",
17+
"typescript": "^4.1.3",
1218
"web-vitals": "^0.2.4"
1319
},
1420
"scripts": {

‎public/favicon.ico

-3.11 KB
Binary file not shown.

‎public/index.html

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99
name="description"
1010
content="Web site created using create-react-app"
1111
/>
12+
<link rel="icon" type="image/png" sizes="32x32" href="/favicon.png">
1213
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
1314
<!--
1415
manifest.json provides metadata used when your web app is installed on a
@@ -24,7 +25,7 @@
2425
work correctly both with client-side routing and a non-root public URL.
2526
Learn how to configure a non-root public URL by running `npm run build`.
2627
-->
27-
<title>React App</title>
28+
<title>Фронтенд Юность | 2020 в перемотке</title>
2829
</head>
2930
<body>
3031
<noscript>You need to enable JavaScript to run this app.</noscript>

‎src/App.css

Lines changed: 0 additions & 38 deletions
This file was deleted.

‎src/App.js

Lines changed: 0 additions & 25 deletions
This file was deleted.

‎src/App.module.css

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
.Header {
2+
position: absolute;
3+
top: 0;
4+
width: 100%;
5+
display: flex;
6+
justify-content: center;
7+
align-items: center;
8+
}
9+
10+
.Header__Logo {
11+
background-image: url(assets/logo128x128.png);
12+
width: 128px;
13+
height: 128px;
14+
display: inline-block;
15+
}
16+
17+
.Header__Name {
18+
font-weight: 800;
19+
font-size: 48px;
20+
color: white;
21+
background-color: #008ed2;
22+
border-radius: 12px;
23+
padding: 12px;
24+
}

‎src/App.test.js

Lines changed: 0 additions & 8 deletions
This file was deleted.

‎src/App.tsx

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import { Playlist } from 'components/Playlist/Playlist';
2+
import { default as Styles } from 'App.module.css';
3+
4+
export function App() {
5+
return (
6+
<>
7+
<header className={Styles.Header}>
8+
<a href='https://youknow.st' target='_blank'>
9+
<span className={Styles.Header__Logo} />
10+
</a>
11+
<span className={Styles.Header__Name}>2020</span>
12+
</header>
13+
<Playlist />
14+
</>
15+
);
16+
}

‎src/assets/logo128x128.png

3.66 KB
Loading

‎src/components/Playlist/Playlist.module.css

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
.Playlist {
2+
display: flex;
3+
flex-wrap: nowrap;
4+
overflow: auto;
5+
flex: none;
6+
width: 100%;
7+
height: 100%;
8+
scroll-snap-type: x mandatory;
9+
}

‎src/components/Playlist/Playlist.tsx

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
import { default as Data } from 'data/playlist.json';
2+
import { useCallback, useRef } from 'react';
3+
4+
import { TrackDto } from 'dto/Track';
5+
import { Track } from 'components/Track/Track';
6+
import { default as Styles } from 'components/Playlist/Playlist.module.css';
7+
8+
const Tracks: TrackDto[] = Data;
9+
10+
export function Playlist() {
11+
const audio = useRef(new Audio);
12+
13+
const onClick = useCallback((url: string) => {
14+
if (!audio.current.paused) {
15+
audio.current.pause();
16+
}
17+
18+
audio.current = Object.assign(new Audio(), {
19+
src: url
20+
});
21+
22+
audio.current.play();
23+
}, []);
24+
25+
return (
26+
<div className={Styles.Playlist}>
27+
{Tracks.map(track => (
28+
<Track key={track.order} track={track} onClick={onClick} />
29+
))}
30+
</div>
31+
);
32+
}

‎src/components/Track/Track.module.css

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
.Track {
2+
display: flex;
3+
scroll-snap-align: center;
4+
justify-content: center;
5+
align-items: center;
6+
flex: none;
7+
width: 100%;
8+
}
9+
10+
.Track__Order {
11+
position: absolute;
12+
left: 10px;
13+
top: 10px;
14+
font-family: -apple-system, sans-serif;
15+
font-size: 64px;
16+
font-weight: bold;
17+
color: rgba(0, 0, 0, 0.2);
18+
}
19+
20+
.Track__Box {
21+
position: relative;
22+
width: 240px;
23+
height: 240px;
24+
display: flex;
25+
justify-content: center;
26+
align-items: center;
27+
box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.2);
28+
}
29+
30+
.Track__Greeting {
31+
font-family: -apple-system, sans-serif;
32+
color: white;
33+
padding: 12px;
34+
font-weight: 800;
35+
font-size: 42px;
36+
text-transform: uppercase;
37+
position: absolute;
38+
top: 10px;
39+
right: -30%;
40+
width: 80%;
41+
word-break: break-all;
42+
transform: rotate(30deg);
43+
}
44+
45+
.Track__Play {
46+
cursor: pointer;
47+
user-select: none;
48+
width: 40%;
49+
height: 40%;
50+
clip-path: polygon(10% 0, 10% 100%, 90% 50%);
51+
font-size: 92px;
52+
}

‎src/components/Track/Track.tsx

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import { useState } from 'react';
2+
3+
import { generateColor } from 'generateColor';
4+
import { TrackDto } from 'dto/Track';
5+
import Styles from 'components/Track/Track.module.css';
6+
7+
type TrackProps = {
8+
track: TrackDto;
9+
onClick: (url: string) => void;
10+
}
11+
12+
export function Track({
13+
track: {
14+
order,
15+
greeting,
16+
emoji,
17+
url,
18+
},
19+
20+
onClick
21+
}: TrackProps) {
22+
const [[backgroundColor, greetingColor, playColor]] = useState(() => ([
23+
generateColor(),
24+
generateColor(),
25+
generateColor()
26+
]));
27+
28+
return (
29+
<div className={Styles.Track}>
30+
<div className={Styles.Track__Box} style={{backgroundColor}}>
31+
<div className={Styles.Track__Order}>{order}</div>
32+
<div className={Styles.Track__Greeting} style={{backgroundColor: greetingColor}}>{greeting}</div>
33+
<div className={Styles.Track__Play} style={{backgroundColor: playColor}} onClick={() => onClick(url)}>{emoji}</div>
34+
</div>
35+
</div>
36+
)
37+
}

0 commit comments

Comments
 (0)