diff --git a/src/components/App.jsx b/src/components/App.jsx index f33fbd8b..75256a69 100644 --- a/src/components/App.jsx +++ b/src/components/App.jsx @@ -14,7 +14,6 @@ import OnlineBox from './OnlineBox'; import ChatButton from './buttons/ChatButton'; import Menu from './Menu'; import UI from './UI'; -import ChristmasButton from './ChristmasButton'; import ExpandMenuButton from './buttons/ExpandMenuButton'; import WindowManager from './WindowManager'; @@ -27,7 +26,6 @@ const App = () => ( - diff --git a/src/components/ChristmasButton.jsx b/src/components/ChristmasButton.jsx deleted file mode 100644 index 7f117d33..00000000 --- a/src/components/ChristmasButton.jsx +++ /dev/null @@ -1,76 +0,0 @@ -/** - * - * @flow - */ - -import React, { useState } from 'react'; -import { GiPineTree } from 'react-icons/gi'; - -import SnowStorm from '../ui/snow'; - -const videoIds = [ - 'cHtjXowWhVg', // last christmas - 'kLUKXX0sfII', // snowy - 'nhiNuN1OI6A', // cherry box - 'iTgcp1oDk2M', // red velvet vs. aespa - 'AZ2Oemlyuo4', // apink - 'o21QhCZZQJA', // weeekly - 'NtIHncxKSRM', // lightsum - 's4m6QM2mokI', // dont speak everglow - 'Gq7UubHYoag', // pinkfantasy - '_6DyJqVYSaU', // hot issue - '8A2t_tAjMz8', // knock knock twice - 'SIh8IwlDrMU', // TT live - 'w6gbPWJPXUI', // bopeep -]; - -const snowStorm = new SnowStorm(window, document); - -const ChristmasButton = () => { - const [playing, setPlaying] = useState(false); - const prot = window.location.protocol; - - const video = videoIds[Math.floor(Math.random() * videoIds.length)]; - // eslint-disable-next-line no-console - console.log('chose', video); - const url = `${prot}//www.youtube.com/embed/${video}?autoplay=1&loop=1`; - - let style; - if (playing) { - style = { - boxShadow: '0 0 9px 6px rgba(0, 189, 47, 0.8)', - width: 'initial', - height: 'initial', - lineHeight: 0, - }; - } else { - style = { - boxShadow: '0 0 9px 6px rgba(189, 0, 0, 0.8)', - }; - } - - return ( -
{ - setPlaying(!playing); - snowStorm.toggleSnow(); - }} - style={style} - > - {(playing) ? ( - - ) : } -
- ); -}; - -export default ChristmasButton; diff --git a/src/styles/default.css b/src/styles/default.css index ca58d02d..46db0c38 100644 --- a/src/styles/default.css +++ b/src/styles/default.css @@ -452,10 +452,6 @@ tr:nth-child(even) { left: 57px; top: 16px; } -#christmasbutton { - top: 16px; - right: 16px; -} #palselbutton { bottom: 16px; right: 16px; diff --git a/src/ui/snow.js b/src/ui/snow.js deleted file mode 100644 index 369f8016..00000000 --- a/src/ui/snow.js +++ /dev/null @@ -1,670 +0,0 @@ -/** @license - * DHTML Snowstorm! JavaScript-based snow for web pages - * Making it snow on the internets since 2003. You're welcome. - * ----------------------------------------------------------- - * Version 1.44.20131215 (Previous rev: 1.44.20131208) - * Copyright (c) 2007, Scott Schiller. All rights reserved. - * Code provided under the BSD License - * http://schillmania.com/projects/snowstorm/license.txt - */ - -/* jslint nomen: true, plusplus: true, sloppy: true, vars: true, white: true */ -/* global window, document, navigator, clearInterval, setInterval */ - -/* eslint-disable */ - -function SnowStorm(window, document) { - - // --- common properties --- - - this.autoStart = false; // Whether the snow should start automatically or not. - this.flakesMax = 256; // Limit total amount of snow made (falling + sticking) - this.flakesMaxActive = 128; // Limit amount of snow falling at once (less = lower CPU use) - this.animationInterval = 33; // Theoretical "miliseconds per frame" measurement. 20 = fast + smooth, but high CPU use. 50 = more conservative, but slower - this.useGPU = true; // Enable transform-based hardware acceleration, reduce CPU load. - this.className = null; // CSS class name for further customization on snow elements - this.excludeMobile = false; // Snow is likely to be bad news for mobile phones' CPUs (and batteries.) By default, be nice. - this.flakeBottom = null; // Integer for Y axis snow limit, 0 or null for "full-screen" snow effect - this.followMouse = true; // Snow movement can respond to the user's mouse - this.snowColor = '#fff'; // Don't eat (or use?) yellow snow. - this.snowCharacter = '•'; // • = bullet, · is square on some systems etc. - this.snowStick = true; // Whether or not snow should "stick" at the bottom. When off, will never collect. - this.targetElement = null; // element which snow will be appended to (null = document.body) - can be an element ID eg. 'myDiv', or a DOM node reference - this.useMeltEffect = true; // When recycling fallen snow (or rarely, when falling), have it "melt" and fade out if browser supports it - this.useTwinkleEffect = false; // Allow snow to randomly "flicker" in and out of view while falling - this.usePositionFixed = false; // true = snow does not shift vertically when scrolling. May increase CPU load, disabled by default - if enabled, used only where supported - this.usePixelPosition = false; // Whether to use pixel values for snow top/left vs. percentages. Auto-enabled if body is position:relative or targetElement is specified. - - // --- less-used bits --- - - this.freezeOnBlur = true; // Only snow when the window is in focus (foreground.) Saves CPU. - this.flakeLeftOffset = 0; // Left margin/gutter space on edge of container (eg. browser window.) Bump up these values if seeing horizontal scrollbars. - this.flakeRightOffset = 0; // Right margin/gutter space on edge of container - this.flakeWidth = 8; // Max pixel width reserved for snow element - this.flakeHeight = 8; // Max pixel height reserved for snow element - this.vMaxX = 5; // Maximum X velocity range for snow - this.vMaxY = 4; // Maximum Y velocity range for snow - this.zIndex = 0; // CSS stacking order applied to each snowflake - - // --- "No user-serviceable parts inside" past this point, yadda yadda --- - - var storm = this, - features, - // UA sniffing and backCompat rendering mode checks for fixed position, etc. - isIE = navigator.userAgent.match(/msie/i), - isIE6 = navigator.userAgent.match(/msie 6/i), - isMobile = navigator.userAgent.match(/mobile|opera m(ob|in)/i), - isBackCompatIE = (isIE && document.compatMode === 'BackCompat'), - noFixed = (isBackCompatIE || isIE6), - screenX = null, screenX2 = null, screenY = null, scrollY = null, docHeight = null, vRndX = null, vRndY = null, - windOffset = 1, - windMultiplier = 2, - flakeTypes = 6, - fixedForEverything = false, - targetElementIsRelative = false, - opacitySupported = (function(){ - try { - document.createElement('div').style.opacity = '0.5'; - } catch(e) { - return false; - } - return true; - }()), - didInit = false, - docFrag = document.createDocumentFragment(); - - features = (function() { - - var getAnimationFrame; - - /** - * hat tip: paul irish - * http://paulirish.com/2011/requestanimationframe-for-smart-animating/ - * https://gist.github.com/838785 - */ - - function timeoutShim(callback) { - window.setTimeout(callback, 1000/(storm.animationInterval || 20)); - } - - var _animationFrame = (window.requestAnimationFrame || - window.webkitRequestAnimationFrame || - window.mozRequestAnimationFrame || - window.oRequestAnimationFrame || - window.msRequestAnimationFrame || - timeoutShim); - - // apply to window, avoid "illegal invocation" errors in Chrome - getAnimationFrame = _animationFrame ? function() { - return _animationFrame.apply(window, arguments); - } : null; - - var testDiv; - - testDiv = document.createElement('div'); - - function has(prop) { - - // test for feature support - var result = testDiv.style[prop]; - return (result !== undefined ? prop : null); - - } - - // note local scope. - var localFeatures = { - - transform: { - ie: has('-ms-transform'), - moz: has('MozTransform'), - opera: has('OTransform'), - webkit: has('webkitTransform'), - w3: has('transform'), - prop: null // the normalized property value - }, - - getAnimationFrame: getAnimationFrame - - }; - - localFeatures.transform.prop = ( - localFeatures.transform.w3 || - localFeatures.transform.moz || - localFeatures.transform.webkit || - localFeatures.transform.ie || - localFeatures.transform.opera - ); - - testDiv = null; - - return localFeatures; - - }()); - - this.timer = null; - this.flakes = []; - this.disabled = false; - this.active = false; - this.meltFrameCount = 20; - this.meltFrames = []; - - this.setXY = function(o, x, y) { - - if (!o) { - return false; - } - - if (storm.usePixelPosition || targetElementIsRelative) { - - o.style.left = (x - storm.flakeWidth) + 'px'; - o.style.top = (y - storm.flakeHeight) + 'px'; - - } else if (noFixed) { - - o.style.right = (100-(x/screenX*100)) + '%'; - // avoid creating vertical scrollbars - o.style.top = (Math.min(y, docHeight-storm.flakeHeight)) + 'px'; - - } else { - - if (!storm.flakeBottom) { - - // if not using a fixed bottom coordinate... - o.style.right = (100-(x/screenX*100)) + '%'; - o.style.bottom = (100-(y/screenY*100)) + '%'; - - } else { - - // absolute top. - o.style.right = (100-(x/screenX*100)) + '%'; - o.style.top = (Math.min(y, docHeight-storm.flakeHeight)) + 'px'; - - } - - } - - }; - - this.events = (function() { - - var old = (!window.addEventListener && window.attachEvent), slice = Array.prototype.slice, - evt = { - add: (old?'attachEvent':'addEventListener'), - remove: (old?'detachEvent':'removeEventListener') - }; - - function getArgs(oArgs) { - var args = slice.call(oArgs), len = args.length; - if (old) { - args[1] = 'on' + args[1]; // prefix - if (len > 3) { - args.pop(); // no capture - } - } else if (len === 3) { - args.push(false); - } - return args; - } - - function apply(args, sType) { - var element = args.shift(), - method = [evt[sType]]; - if (old) { - element[method](args[0], args[1]); - } else { - element[method].apply(element, args); - } - } - - function addEvent() { - apply(getArgs(arguments), 'add'); - } - - function removeEvent() { - apply(getArgs(arguments), 'remove'); - } - - return { - add: addEvent, - remove: removeEvent - }; - - }()); - - function rnd(n,min) { - if (isNaN(min)) { - min = 0; - } - return (Math.random()*n)+min; - } - - function plusMinus(n) { - return (parseInt(rnd(2),10)===1?n*-1:n); - } - - this.randomizeWind = function() { - var i; - vRndX = plusMinus(rnd(storm.vMaxX,0.2)); - vRndY = rnd(storm.vMaxY,0.2); - if (this.flakes) { - for (i=0; i=0 && s.vX<0.2) { - s.vX = 0.2; - } else if (s.vX<0 && s.vX>-0.2) { - s.vX = -0.2; - } - if (s.vY>=0 && s.vY<0.2) { - s.vY = 0.2; - } - }; - - this.move = function() { - var vX = s.vX*windOffset, yDiff; - s.x += vX; - s.y += (s.vY*s.vAmp); - if (s.x >= screenX || screenX-s.x < storm.flakeWidth) { // X-axis scroll check - s.x = 0; - } else if (vX < 0 && s.x-storm.flakeLeftOffset < -storm.flakeWidth) { - s.x = screenX-storm.flakeWidth-1; // flakeWidth; - } - s.refresh(); - yDiff = screenY+scrollY-s.y+storm.flakeHeight; - if (yDiff0.998) { - // ~1/1000 chance of melting mid-air, with each frame - s.melting = true; - s.melt(); - // only incrementally melt one frame - // s.melting = false; - } - if (storm.useTwinkleEffect) { - if (s.twinkleFrame < 0) { - if (Math.random() > 0.97) { - s.twinkleFrame = parseInt(Math.random() * 8, 10); - } - } else { - s.twinkleFrame--; - if (!opacitySupported) { - s.o.style.visibility = (s.twinkleFrame && s.twinkleFrame % 2 === 0 ? 'hidden' : 'visible'); - } else { - s.o.style.opacity = (s.twinkleFrame && s.twinkleFrame % 2 === 0 ? 0 : 1); - } - } - } - } - }; - - this.animate = function() { - // main animation loop - // move, check status, die etc. - s.move(); - }; - - this.setVelocities = function() { - s.vX = vRndX+rnd(storm.vMaxX*0.12,0.1); - s.vY = vRndY+rnd(storm.vMaxY*0.12,0.1); - }; - - this.setOpacity = function(o,opacity) { - if (!opacitySupported) { - return false; - } - o.style.opacity = opacity; - }; - - this.melt = function() { - if (!storm.useMeltEffect || !s.melting) { - s.recycle(); - } else { - if (s.meltFrame < s.meltFrameCount) { - s.setOpacity(s.o,s.meltFrames[s.meltFrame]); - s.o.style.fontSize = s.fontSize-(s.fontSize*(s.meltFrame/s.meltFrameCount))+'px'; - s.o.style.lineHeight = storm.flakeHeight+2+(storm.flakeHeight*0.75*(s.meltFrame/s.meltFrameCount))+'px'; - s.meltFrame++; - } else { - s.recycle(); - } - } - }; - - this.recycle = function() { - s.o.style.display = 'none'; - s.o.style.position = (fixedForEverything?'fixed':'absolute'); - s.o.style.bottom = 'auto'; - s.setVelocities(); - s.vCheck(); - s.meltFrame = 0; - s.melting = false; - s.setOpacity(s.o,1); - s.o.style.padding = '0px'; - s.o.style.margin = '0px'; - s.o.style.fontSize = s.fontSize+'px'; - s.o.style.lineHeight = (storm.flakeHeight+2)+'px'; - s.o.style.textAlign = 'center'; - s.o.style.verticalAlign = 'baseline'; - s.x = parseInt(rnd(screenX-storm.flakeWidth-20),10); - s.y = parseInt(rnd(screenY)*-1,10)-storm.flakeHeight; - s.refresh(); - s.o.style.display = 'block'; - s.active = 1; - }; - - this.recycle(); // set up x/y coords etc. - this.refresh(); - - }; - - this.snow = function() { - var active = 0, flake = null, i, j; - for (i=0, j=storm.flakes.length; istorm.flakesMaxActive) { - storm.flakes[storm.flakes.length-1].active = -1; - } - } - storm.targetElement.appendChild(docFrag); - }; - - this.timerInit = function() { - storm.timer = true; - storm.snow(); - }; - - this.init = function() { - var i; - for (i=0; i