Skip to content

Commit 62af83b

Browse files
eamodioeamodio
committed
Adds snow
1 parent da79411 commit 62af83b

File tree

4 files changed

+156
-0
lines changed

4 files changed

+156
-0
lines changed

‎src/ui/scss/main.scss‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,29 @@ body {
1010
line-height: 1.4;
1111
}
1212

13+
canvas.snow {
14+
max-width: calc(100% - 20px);
15+
pointer-events: none;
16+
position: fixed;
17+
z-index: 2147483646;
18+
}
19+
20+
.snow__trigger {
21+
cursor: pointer;
22+
position: fixed;
23+
right: 10px;
24+
top: 5px;
25+
transform: rotate(-20deg);
26+
width: 22px;
27+
z-index: 2147483647;
28+
29+
& svg:hover {
30+
& path:first-child {
31+
fill: #f30000;
32+
}
33+
}
34+
}
35+
1336
a {
1437
border: 0;
1538
color: var(--link-color);

‎src/ui/welcome/index.html‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,20 @@
55
</head>
66

77
<body class="preload">
8+
<canvas class="snow"></canvas>
9+
<div class="snow__trigger">
10+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 125">
11+
<path
12+
fill="#b21a18"
13+
d="M31.25 23.64C45.96 13.15 70.42 11.19 80.7 29.1c3.1 5.4 5.18 11.4 6.86 17.37 1.16 4.1 4.48 12.42.08 15.67-2.96 2.18-10.78 3.95-22.16 3.95s-23.17-2.3-25.32-7.87c-1.02-2.65 1.26-5.5.97-8.31-.63-6.2-7.5-5.97-10.86-3.75-4.58 3-5.17 6.66-9.64 10-1.5 1.12-3.6 1.93-5.22.98-1.5-.9-1.96-2.88-1.96-4.63 0-12.08 10.88-23.94 17.8-28.87z"
14+
/>
15+
<circle fill="#C5C5C5" cx="13.45" cy="69.81" r="8.45" />
16+
<path
17+
fill="#C5C5C5"
18+
d="M64.66 84.31c-17.4 0-35.17-1.38-28.93-25.06.37 13.72 29 12.57 29 12.57s30.12.28 29.88-11.27C97.69 85.43 82.06 84.3 64.66 84.3z"
19+
/>
20+
</svg>
21+
</div>
822
<div class="container">
923
<div class="content">
1024
<header>

‎src/ui/welcome/index.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11
'use strict';
22
import { WelcomeApp } from './app';
3+
import { Snow } from './snow';
34

45
new WelcomeApp();
6+
requestAnimationFrame(() => new Snow());

‎src/ui/welcome/snow.ts‎

Lines changed: 117 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,117 @@
1+
'use strict';
2+
3+
function randomBetween(min: number, max: number) {
4+
return min + Math.random() * (max - min);
5+
}
6+
7+
class Snowflake {
8+
alpha = 0;
9+
radius = 0;
10+
x = 0;
11+
y = 0;
12+
13+
private _vx = 0;
14+
private _vy = 0;
15+
16+
constructor() {
17+
this.reset();
18+
}
19+
20+
reset() {
21+
this.alpha = randomBetween(0.1, 0.9);
22+
this.radius = randomBetween(1, 4);
23+
this.x = randomBetween(0, window.innerWidth);
24+
this.y = randomBetween(0, -window.innerHeight);
25+
this._vx = randomBetween(-3, 3);
26+
this._vy = randomBetween(2, 5);
27+
}
28+
29+
update() {
30+
this.x += this._vx;
31+
this.y += this._vy;
32+
33+
if (this.y + this.radius > window.innerHeight) {
34+
this.reset();
35+
}
36+
}
37+
}
38+
39+
export class Snow {
40+
snowing = false;
41+
42+
private readonly _canvas: any;
43+
private readonly _ctx: any;
44+
private _height: number = 0;
45+
private _width: number = 0;
46+
private readonly _snowflakes: Snowflake[] = [];
47+
48+
private readonly _clearBound: any;
49+
private readonly _updateBound: any;
50+
51+
constructor() {
52+
this._clearBound = this.clear.bind(this);
53+
this._updateBound = this.update.bind(this);
54+
55+
this._canvas = document.querySelector('canvas.snow');
56+
this._ctx = this._canvas.getContext('2d');
57+
58+
const trigger = document.querySelector('.snow__trigger');
59+
if (trigger) {
60+
trigger.addEventListener('click', () => this.onToggle());
61+
}
62+
63+
window.addEventListener('resize', () => this.onResize());
64+
this.onResize();
65+
66+
this.onToggle();
67+
}
68+
69+
onToggle() {
70+
this.snowing = !this.snowing;
71+
if (this.snowing) {
72+
this.createSnowflakes();
73+
requestAnimationFrame(this._updateBound);
74+
}
75+
}
76+
77+
onResize() {
78+
this._height = window.innerHeight;
79+
this._width = window.innerWidth;
80+
this._canvas.width = this._width;
81+
this._canvas.height = this._height;
82+
}
83+
84+
clear() {
85+
this._ctx.clearRect(0, 0, this._canvas.width, this._canvas.height);
86+
this._snowflakes.length = 0;
87+
}
88+
89+
createSnowflakes() {
90+
const flakes = window.innerWidth / 4;
91+
92+
for (let i = 0; i < flakes; i++) {
93+
this._snowflakes.push(new Snowflake());
94+
}
95+
}
96+
97+
update() {
98+
this._ctx.clearRect(0, 0, this._width, this._height);
99+
100+
const color = document.body.classList.contains('vscode-light') ? '#424242' : '#fff';
101+
102+
for (const flake of this._snowflakes) {
103+
flake.update();
104+
105+
this._ctx.save();
106+
this._ctx.fillStyle = color;
107+
this._ctx.beginPath();
108+
this._ctx.arc(flake.x, flake.y, flake.radius, 0, Math.PI * 2);
109+
this._ctx.closePath();
110+
this._ctx.globalAlpha = flake.alpha;
111+
this._ctx.fill();
112+
this._ctx.restore();
113+
}
114+
115+
requestAnimationFrame(this.snowing ? this._updateBound : this._clearBound);
116+
}
117+
}

0 commit comments

Comments
 (0)