feat: Oopsi I added snow, It's 2005 again

src/App.vue

@@ -1,27 +1,54 @@
 <template lang="html">
   <div class="souvenir">
+    <div id="snow" class="snow"></div>
     <router-view></router-view>
     <refresh-banner></refresh-banner>
   </div>
 </template>
 
 <script>
+/* eslint no-new: "off" */
+/* eslint import/no-absolute-path: "off" */
+
 import RefreshBanner from '/views/components/refresh'
+import Snow from '/services/snow.js'
 
 export default {
   name: 'souvenir',
   components: {
     RefreshBanner
   },
+  data: () => ({
+    snowInstance: null
+  }),
   methods: {
     handleVisibilityChange (event) {
       if (document.hidden) {
         this.$store.commit('updateCamera', null)
       }
+    },
+    setupSnow () {
+      this.snowInstance = new Snow('#snow', {
+        number: 40,
+        r: 3,
+        v: 0.8
+      })
+    },
+    resetSnow () {
+      const snowContainer = document.querySelector('#snow')
+      snowContainer.removeChild(snowContainer.querySelector('canvas'))
+      this.snowInstance = null
     }
   },
   mounted () {
     document.addEventListener('visibilitychange', this.handleVisibilityChange)
+    document.addEventListener('DOMContentLoaded', () => {
+      this.setupSnow()
+    })
+    window.addEventListener('resize', () => {
+      this.resetSnow()
+      this.setupSnow()
+    })
   },
   destroyed () {
     document.removeEventListener('visibilitychange', this.handleVisibilityChange)

src/assets/css/4-modules/snow.css

@@ -0,0 +1,18 @@
+/* ----------------------------------------------------------- */
+/* == Snow style yepeee */
+/* ----------------------------------------------------------- */
+
+.snow {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: -1;
+  width: 100%;
+  height: 100%;
+  opacity: .7;
+}
+
+.snow canvas {
+  width: 100% !important;
+  height: 100% !important;
+}

src/assets/css/style.css

@@ -35,6 +35,7 @@
 @import "/assets/css/4-modules/progress-bar.css";
 @import "/assets/css/4-modules/encoding.css";
 @import "/assets/css/4-modules/refresh-banner.css";
+@import "/assets/css/4-modules/snow.css";
 
 /* ----------------------------------------------------------- */
 /* == screens */

src/services/snow.js

@@ -0,0 +1,10 @@
+/*!
+* Snow.js v1.0.0
+* https://github.com/zmfe/snow.js
+*
+* Copyright (c) 2018 undefined
+* Released under the MIT license
+*
+* Date: 2018-01-16T11:55:01.675Z
+*/
+!(function (t, i) { typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = i() : typeof define === 'function' && define.amd ? define(i) : t.Snow = i() }(this, function () { 'use strict'; var t = window.document; var i = {}; var e = { index: 0, x: 0, y: 0, context: '', color: 'rgb(255, 255, 255)', r: 1 }; function n (t) { return Math.PI * (t / 180) } var h = function (t, i) { if (!(t instanceof i)) throw new TypeError('Cannot call a class as a function') }; var o = (function () { function t (t, i) { for (var e = 0; e < i.length; e++) { var n = i[e]; n.enumerable = n.enumerable || !1, n.configurable = !0, 'value' in n && (n.writable = !0), Object.defineProperty(t, n.key, n) } } return function (i, e, n) { return e && t(i.prototype, e), n && t(i, n), i } }()); var a = (function () { function t () { var i = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : {}; h(this, t), this.option = Object.assign({}, e, i); var n = this.option; var o = n.content; var a = n.color; var r = n.x; var s = n.y; var c = n.r; var l = n.v; this.color = a.replace('rgb', 'rgba').split(')')[0] + ',' + (Math.floor(50 * Math.random()) + 50) / 100 + ')', this.content = o, this.r = c * (0.4 * Math.random() + 0.6), this.x = r, this.y = s, this.v = l, this.angle = Math.PI * Math.random() } return o(t, [{ key: 'draw', value: function () { var t = this.content; var i = this.color; var e = this.x; var n = this.y; var h = this.r; t.beginPath(), t.arc(Math.floor(e), Math.floor(n), h, 0, 2 * Math.PI, !0), t.closePath(), t.fillStyle = i, t.fill() } }, { key: 'move', value: function () { var t; var i; var e = this.option; var h = e.width; var o = e.height; this.x += this.v * Math.cos(((t = this.angle) > n(15) && t <= n(90) ? t -= Math.PI / 6 : t > n(90) && t <= n(165) && (t += Math.PI / 6), t)) * 0.3, this.y += this.v * Math.sin(((i = this.angle) > n(165) ? i -= Math.PI / 4 : i < n(15) && (i += Math.PI / 4), i)), (this.y > o || this.x > h || this.x < 0) && (this.y = 0, this.x = Math.random() * h, this.angle = Math.PI * Math.random()) } }]), t }()); return (function () { function e (n) { var o = arguments.length > 1 && void 0 !== arguments[1] ? arguments[1] : {}; h(this, e), this.element = t.querySelector(n), this.canvas = '', this.ctx = '', this.width = 0, this.height = 0, this.option = Object.assign({}, i, o), this.number = this.option.number, this.partiles = [], this.init() } return o(e, [{ key: 'init', value: function () { var t = this.element; var i = t.clientWidth; var e = t.clientHeight; this.width = i, this.height = e, this.createCanvas(), this.createParticle() } }, { key: 'createCanvas', value: function () { var i = this.element; var e = this.width; var n = this.height; var h = t.createElement('canvas'); h.width = e, h.height = n, h.style.cssText = 'position:absolute;top:0;left:0;background:rgba(0,0,0,0);pointer-events:none;z-index:1;', i.appendChild(h), this.canvas = h, this.ctx = h.getContext('2d') } }, { key: 'createParticle', value: function () { for (var t = this.option, i = t.r, e = t.v, n = this.ctx, h = this.width, o = this.height, r = this.number, s = this.partiles, c = 0; c < r; c += 1) { var l = new a({ color: 'rgb(255,255,255)', content: n, y: Math.floor(Math.random() * o), x: Math.floor(Math.random() * h), r: i, v: e, width: this.width, height: this.height }); s.push(l), l.draw() }!(function t () { n.clearRect(0, 0, h, o), s.forEach(function (t) { t.move(), t.draw() }), requestAnimationFrame(t) }()) } }]), e }()) }))