From fbab0e265373fe683a17d4ecb07a4a30025d4b2a Mon Sep 17 00:00:00 2001 From: Eric Amodio Date: Thu, 17 Dec 2020 03:42:22 -0500 Subject: [PATCH] Adds winter easter egg --- images/snowman.png | Bin 0 -> 1936 bytes src/webviews/apps/rebase/rebase.html | 3 + src/webviews/apps/rebase/rebase.ts | 2 + src/webviews/apps/scss/base.scss | 23 ------ src/webviews/apps/scss/rebase.scss | 2 + src/webviews/apps/scss/settings.scss | 1 + src/webviews/apps/scss/snow.scss | 43 +++++++++++ src/webviews/apps/scss/welcome.scss | 1 + src/webviews/apps/settings/settings.html | 3 + src/webviews/apps/settings/settings.ts | 2 + src/webviews/apps/shared/snow.ts | 118 +++++++++++++++++++++++++++++++ src/webviews/apps/welcome/snow.ts | 118 ------------------------------- src/webviews/apps/welcome/welcome.html | 17 +---- src/webviews/apps/welcome/welcome.ts | 4 +- 14 files changed, 180 insertions(+), 157 deletions(-) create mode 100644 images/snowman.png create mode 100644 src/webviews/apps/scss/snow.scss create mode 100644 src/webviews/apps/shared/snow.ts delete mode 100644 src/webviews/apps/welcome/snow.ts diff --git a/images/snowman.png b/images/snowman.png new file mode 100644 index 0000000000000000000000000000000000000000..b8ed1776085589432be4b6fe9461d7485232c0ef GIT binary patch literal 1936 zcmV;B2XFX^P)Px#1ZP1_K>z@;j|==^1poj532;bRa{vGi!TyNJOYGnMWLuv3TUf^mX@V-ySv@p8PA=$yY1|Dw?)wt&fdq&^q#rjcfao& z6pRpaZ(p9t=4!H(oJAIq1!N8>t_cLmGvrC~71lVKM3{pwuFLxXXP*n4%sH*#L*_?jGf@<5BL`< zssh#Ngrbc23?v~O3Lwzajc~yK=C6CVY?ISTNV~%H((;^0IP@pGqo@W>R|Xs|4GyOZ zs>10G>T{>LiQulALNef<~^#zIj7nC?Ll)e1cnqe_qGbL$^v%R zxXyOpe9GVJI3I>{^M$m$f^XP;&497Famxoue>O=FPu4Ux?~>PxaS=jzME?t4`xWd7 zs%RJI zE{I~pokHytb7Bx?F#tcQb|6oQ$eD9Pl*@dg=io!*0y$%Yi0GG6R9FlKAN$#4k{E#| zW`;_=5F7Pz@ETe0r;ZkJ2oXmN4Rv}hDx-y|#0V6VA{&?(yh9V&{7w$Lnz&&sBFHB_ zN)(!PzRWP(%Sh5?IM5Ck`t2T(3gY2n?vPm9{sct{XMWHc{cotEmTeY!U-4RrbYMQKtV|-hlN#h zm5_BMS&YDZ_pZTRUBwr<;vT@63M*CQ&3e~z5&(I~xY4lcX;TFjh1lTlv9 zyY!mwe%whxU&`B(1Z})|9M)7!k`od-!~T)uZ8&uJDBk;^7VRBfG`5R$GM%^(rFh|+ zT1E!4+?mMD@xV!EIQ;WL7!kgFIDn=1-i61Wcmlr;N~_zrKaD=TK|!nKRFa_GD~oW= z^?7n)2+W%|4}QO2j)1jm*P^1LLXHMdTU(0_8wSdrtgI~T*s;SD6qO0%5DSpaC(%Gb zq6#&U=+sm4gcqejL4l}R2auniFMD<*&d0{Fs4bAqO(txyFD__Bqakk1%}kV-fc5Lw zqqw-(eB;H77o)7KOkS~L{`~n^vSf*QUr|w!`J8~<921(gRyHjYFN5NGO+f~NPhX0R zOGZ#R8!X&x^^qP%$om{3%{Bb1DjWsZz&Uv#)WUM8nn&IQ{6dqNE=RPp?EkP8B4xN~ zHZyI<_oM16Mcn2)V`h}$kyxySyw4(h@HH5rE*Qa1M2>GlaC;^C>SnTCjcEIBgy=jm zF#>)oHTJ~B2qYTl*q;H}J4ZyCYh^D15kDeF>JZp`2ST4+2hVTsKn+_*?UYqO95sI> z5(PChrL1<-<7{gddRoV%XIlm$J{BrbYinAqm-m{#5{ZK9TX>>RjOdfj4)KU(PRRz1a)+L&b%s)Wh!jnz8%%o z)#&T%lQVXNLLt=E)uCq7R`^)*4#xMVAWX(z^Q+i~A&o-iOWAyM>v-S>rjZG5dxRAb z`EA|0b=bLcCrV38F?H%xcsw36t+ceXVBfxdxOmp(So6$_{A?PiqYto(uJ16r%V;VF zEjxx3w7gM=VkmFWhaOtUh(9ZvMLWG~4AaWs2ZX4ani^D9Rl(;IU)>h6MtgAkeao=$ z{uOXI2E;VekG?!%2FAB(&C2SMWCIN;NMN~F=cXth@rK1Wjs;3`0T%}%|BT`qBE`gZ zE!ZE%{-&SN+R+WoGX_(p&wwjKoR0xCoTiy+Bp$ra80ME$m8e60F{BhEAVs~-?yAXI z080}LmwXe!dI#UJ%s6hj+S}x6nkwbzOIkq!%l9*9MR7m78@VatrZLaW&H*OTuTq5t zksd^hIl%Hln2BTIz>l*2uc^8s{gT59ih+(!qv3J#Au=z6>I!I;T<(}#x3KRc*S1u{Obj5d7?4ygGV&*214(iFRX@g!8fWHBT WJLs{2T(Lv|0000 + + +

GitLens Interactive Rebase

diff --git a/src/webviews/apps/rebase/rebase.ts b/src/webviews/apps/rebase/rebase.ts index 6fdd8e6..18e5346 100644 --- a/src/webviews/apps/rebase/rebase.ts +++ b/src/webviews/apps/rebase/rebase.ts @@ -16,6 +16,7 @@ import { } from '../../protocol'; import { App } from '../shared/appBase'; import { DOM } from '../shared/dom'; +import { Snow } from '../shared/snow'; const rebaseActions = ['pick', 'reword', 'edit', 'squash', 'fixup', 'drop']; const rebaseActionsMap = new Map([ @@ -432,3 +433,4 @@ class RebaseEditor extends App { } new RebaseEditor(); +requestAnimationFrame(() => new Snow(false)); diff --git a/src/webviews/apps/scss/base.scss b/src/webviews/apps/scss/base.scss index 4a7d4aa..50edcf4 100644 --- a/src/webviews/apps/scss/base.scss +++ b/src/webviews/apps/scss/base.scss @@ -13,29 +13,6 @@ body { font-size: 100% !important; } -// 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(--color-link-foreground); diff --git a/src/webviews/apps/scss/rebase.scss b/src/webviews/apps/scss/rebase.scss index 071b45c..6d4241a 100644 --- a/src/webviews/apps/scss/rebase.scss +++ b/src/webviews/apps/scss/rebase.scss @@ -353,3 +353,5 @@ $entry-padding: 5px; margin: 0 1px 0 -1px; } } + +@import 'snow'; diff --git a/src/webviews/apps/scss/settings.scss b/src/webviews/apps/scss/settings.scss index fa25ea0..ba4f277 100644 --- a/src/webviews/apps/scss/settings.scss +++ b/src/webviews/apps/scss/settings.scss @@ -678,3 +678,4 @@ section { @import 'utils'; @import 'popup'; +@import 'snow'; diff --git a/src/webviews/apps/scss/snow.scss b/src/webviews/apps/scss/snow.scss new file mode 100644 index 0000000..4b6df5a --- /dev/null +++ b/src/webviews/apps/scss/snow.scss @@ -0,0 +1,43 @@ +canvas.snow { + max-width: calc(100% - 20px); + pointer-events: none; + position: fixed; + z-index: 2147483646; +} + +.snow__trigger { + cursor: pointer; + position: fixed; + left: 7px; + top: 7px; + transform: rotate(-7deg); + width: 36px; + z-index: 2147483647; + opacity: 0.6; + transition: filter 250ms, opacity 250ms, transform 250ms; + + body:not(.snowing) & { + filter: grayscale(100%); + opacity: 0.5; + } + + &:hover { + filter: unset !important; + opacity: 0.9 !important; + transform: rotate(-4deg) scale(1.1); + } +} + +.snow__trigger--right { + right: 15px; + left: unset; + top: 3px; + + transform: rotate(4deg) scaleX(-1); + + &:hover { + filter: unset !important; + opacity: 0.9 !important; + transform: rotate(1deg) scaleX(-1) scale(1.1); + } +} diff --git a/src/webviews/apps/scss/welcome.scss b/src/webviews/apps/scss/welcome.scss index 3b1a3f9..46b90c8 100644 --- a/src/webviews/apps/scss/welcome.scss +++ b/src/webviews/apps/scss/welcome.scss @@ -551,3 +551,4 @@ section { } @import 'utils'; +@import 'snow'; diff --git a/src/webviews/apps/settings/settings.html b/src/webviews/apps/settings/settings.html index b174397..c868c58 100644 --- a/src/webviews/apps/settings/settings.html +++ b/src/webviews/apps/settings/settings.html @@ -156,6 +156,9 @@ + + +
diff --git a/src/webviews/apps/settings/settings.ts b/src/webviews/apps/settings/settings.ts index b90fd0d..a622b8c 100644 --- a/src/webviews/apps/settings/settings.ts +++ b/src/webviews/apps/settings/settings.ts @@ -4,6 +4,7 @@ import '../scss/settings.scss'; import { IpcMessage, onIpcNotification, SettingsDidRequestJumpToNotificationType, SettingsState } from '../../protocol'; import { AppWithConfig } from '../shared/appWithConfigBase'; import { DOM } from '../shared/dom'; +import { Snow } from '../shared/snow'; export class SettingsApp extends AppWithConfig { private _scopes: HTMLSelectElement | null = null; @@ -228,3 +229,4 @@ export class SettingsApp extends AppWithConfig { } new SettingsApp(); +requestAnimationFrame(() => new Snow()); diff --git a/src/webviews/apps/shared/snow.ts b/src/webviews/apps/shared/snow.ts new file mode 100644 index 0000000..cbfb4cb --- /dev/null +++ b/src/webviews/apps/shared/snow.ts @@ -0,0 +1,118 @@ +'use strict'; +/*global window document requestAnimationFrame*/ + +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 { + 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(public snowing: boolean = true) { + 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 != null) { + trigger.addEventListener('click', () => this.onToggle(!this.snowing)); + } + + window.addEventListener('resize', () => this.onResize()); + this.onResize(); + + this.onToggle(snowing); + } + + onToggle(snowing: boolean) { + this.snowing = snowing; + document.body.classList.toggle('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); + } +} diff --git a/src/webviews/apps/welcome/snow.ts b/src/webviews/apps/welcome/snow.ts deleted file mode 100644 index 28a5c5c..0000000 --- a/src/webviews/apps/welcome/snow.ts +++ /dev/null @@ -1,118 +0,0 @@ -'use strict'; -/*global window document requestAnimationFrame*/ - -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 != null) { - 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); - } -} diff --git a/src/webviews/apps/welcome/welcome.html b/src/webviews/apps/welcome/welcome.html index b0a3dd2..80bed8d 100644 --- a/src/webviews/apps/welcome/welcome.html +++ b/src/webviews/apps/welcome/welcome.html @@ -11,20 +11,9 @@ - + + +
diff --git a/src/webviews/apps/welcome/welcome.ts b/src/webviews/apps/welcome/welcome.ts index f1001d3..0759548 100644 --- a/src/webviews/apps/welcome/welcome.ts +++ b/src/webviews/apps/welcome/welcome.ts @@ -2,8 +2,8 @@ /*global window*/ import '../scss/welcome.scss'; import { WelcomeState } from '../../protocol'; -// import { Snow } from './snow'; import { AppWithConfig } from '../shared/appWithConfigBase'; +import { Snow } from '../shared/snow'; export class WelcomeApp extends AppWithConfig { constructor() { @@ -13,4 +13,4 @@ export class WelcomeApp extends AppWithConfig { } new WelcomeApp(); -// requestAnimationFrame(() => new Snow()); +requestAnimationFrame(() => new Snow());