Adds snow

6 年前 · 62af83b74f
--- a/src/ui/scss/main.scss
+++ b/src/ui/scss/main.scss
@ -10,6 +10,29 @@ body {
    line-height: 1.4;
 }

 canvas.snow {
    max-width: calc(100% - 20px);
    pointer-events: none;
    position: fixed;
    z-index: 2147483646;
 }

 .snow__trigger {
    cursor: pointer;
    position: fixed;
    right: 10px;
    top: 5px;
    transform: rotate(-20deg);
    width: 22px;
    z-index: 2147483647;

    & svg:hover {
        & path:first-child {
            fill: #f30000;
        }
    }
 }

 a {
    border: 0;
    color: var(--link-color);
--- a/src/ui/welcome/index.html
+++ b/src/ui/welcome/index.html
@ -5,6 +5,20 @@
    </head>

    <body class="preload">
        <canvas class="snow"></canvas>
        <div class="snow__trigger">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 125">
                <path
                    fill="#b21a18"
                    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"
                />
                <circle fill="#C5C5C5" cx="13.45" cy="69.81" r="8.45" />
                <path
                    fill="#C5C5C5"
                    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"
                />
            </svg>
        </div>
        <div class="container">
            <div class="content">
                <header>
--- a/src/ui/welcome/index.ts
+++ b/src/ui/welcome/index.ts
@ -1,4 +1,6 @@
 'use strict';
 import { WelcomeApp } from './app';
 import { Snow } from './snow';

 new WelcomeApp();
 requestAnimationFrame(() => new Snow());
--- a/src/ui/welcome/snow.ts
+++ b/src/ui/welcome/snow.ts
@ -0,0 +1,117 @@
 'use strict';

 function randomBetween(min: number, max: number) {
    return min + Math.random() * (max - min);
 }

 class Snowflake {
    alpha = 0;
    radius = 0;
    x = 0;
    y = 0;

    private _vx = 0;
    private _vy = 0;

    constructor() {
        this.reset();
    }

    reset() {
        this.alpha = randomBetween(0.1, 0.9);
        this.radius = randomBetween(1, 4);
        this.x = randomBetween(0, window.innerWidth);
        this.y = randomBetween(0, -window.innerHeight);
        this._vx = randomBetween(-3, 3);
        this._vy = randomBetween(2, 5);
    }

    update() {
        this.x += this._vx;
        this.y += this._vy;

        if (this.y + this.radius > window.innerHeight) {
            this.reset();
        }
    }
 }

 export class Snow {
    snowing = false;

    private readonly _canvas: any;
    private readonly _ctx: any;
    private _height: number = 0;
    private _width: number = 0;
    private readonly _snowflakes: Snowflake[] = [];

    private readonly _clearBound: any;
    private readonly _updateBound: any;

    constructor() {
        this._clearBound = this.clear.bind(this);
        this._updateBound = this.update.bind(this);

        this._canvas = document.querySelector('canvas.snow');
        this._ctx = this._canvas.getContext('2d');

        const trigger = document.querySelector('.snow__trigger');
        if (trigger) {
            trigger.addEventListener('click', () => this.onToggle());
        }

        window.addEventListener('resize', () => this.onResize());
        this.onResize();

        this.onToggle();
    }

    onToggle() {
        this.snowing = !this.snowing;
        if (this.snowing) {
            this.createSnowflakes();
            requestAnimationFrame(this._updateBound);
        }
    }

    onResize() {
        this._height = window.innerHeight;
        this._width = window.innerWidth;
        this._canvas.width = this._width;
        this._canvas.height = this._height;
    }

    clear() {
        this._ctx.clearRect(0, 0, this._canvas.width, this._canvas.height);
        this._snowflakes.length = 0;
    }

    createSnowflakes() {
        const flakes = window.innerWidth / 4;

        for (let i = 0; i < flakes; i++) {
            this._snowflakes.push(new Snowflake());
        }
    }

    update() {
        this._ctx.clearRect(0, 0, this._width, this._height);

        const color = document.body.classList.contains('vscode-light') ? '#424242' : '#fff';

        for (const flake of this._snowflakes) {
            flake.update();

            this._ctx.save();
            this._ctx.fillStyle = color;
            this._ctx.beginPath();
            this._ctx.arc(flake.x, flake.y, flake.radius, 0, Math.PI * 2);
            this._ctx.closePath();
            this._ctx.globalAlpha = flake.alpha;
            this._ctx.fill();
            this._ctx.restore();
        }

        requestAnimationFrame(this.snowing ? this._updateBound : this._clearBound);
    }
 }