Christmas

lib/react/main.jsx

@@ -158,6 +158,9 @@ var App = React.createClass({
 						</ul>
 					</li>
 			  </ul>
+			  <ul className="nav navbar-top-links navbar-right">
+			  	<SnowMachineMenu />
+			  </ul>
 			</nav>
 			<AdminPanel />
 			<SettingsPanel 

lib/react/snowMachine.js

@@ -0,0 +1,34 @@
+var SnowMachineMenu = React.createClass({
+	getInitialState() {
+		return {
+			snowMachine: null
+		}
+	},
+
+	componentDidMount() {
+		const snowMachine = new SnowMachine();
+		snowMachine.start();
+		this.setState({ snowMachine: snowMachine });
+	},
+
+	toggle() {
+		const snowMachine = this.state.snowMachine;
+		if (snowMachine.timer) {
+			snowMachine.stop();
+		} else {
+			snowMachine.start();
+		}
+	},
+
+	render() {
+		return (
+			<ul className="nav navbar-top-links navbar-right">
+			  <li>
+					<a href="#" onClick={this.toggle}>
+						Snow
+					</a>
+				</li>
+		  </ul>
+	  );
+	}
+});

lib/react/sound.jsx

@@ -24,6 +24,10 @@ class SoundController {
 				description: "Gathers Classic",
 				url: 'http://www.ensl.org/files/audio/gather-1.mp3'
 			},
+			"christmas": {
+				description: "Christmas",
+				url: 'http://www.ensl.org/files/audio/christmas.mp3'
+			},
 			"nights": {
 				description: "Nights",
 				url: 'http://www.ensl.org/files/audio/nights.mp3'
@@ -102,7 +106,7 @@ class SoundController {
 	}
 
 	defaultGatherMusic() {
-		return "classic";
+		return "christmas";
 	}
 
 	setupGatherMusic (musicName) {

public/css/app.css

@@ -2,6 +2,24 @@ html, body {
 	height: 100%;
 }
 
+/* Christmas stuff starts here*/
+.panel {
+	opacity: 0.9;
+}
+
+canvas {
+	position: fixed;
+	top: 0;
+	left: 0;
+	z-index: -50;
+	background: url(/images/christmas.png) no-repeat center center fixed; 
+  -webkit-background-size: cover;
+  -moz-background-size: cover;
+  -o-background-size: cover;
+  background-size: cover;
+}
+/* Christmas stuff ends here*/
+
 #side-menu {
 	margin-top: 1em;
 }

public/js/snowmachine.js

@@ -0,0 +1,88 @@
+var SnowMachine = function () {
+	this.canvas = document.getElementById("canvas");
+	this.ctx = this.canvas.getContext("2d");
+	this.mp = 25;
+	this.angle = 0;
+	window.addEventListener('resize', this.resizeCanvas, false);	
+	this.resizeCanvas();
+};
+
+SnowMachine.prototype.resizeCanvas = function () {
+	var canvas = this.canvas;
+	this.W = window.innerWidth;
+	this.H = window.innerHeight;
+	canvas.width = this.W;
+	canvas.height = this.H;
+};
+
+SnowMachine.prototype.initCanvas = function () {
+	this.particles = [];
+	for(var i = 0; i < this.mp; i++) {
+		this.particles.push({
+			x: Math.random() * this.W,
+			y: Math.random() * this.H,
+			r: Math.random() * 4 + 1,
+			d: Math.random() * this.mp
+		});
+	}
+};
+
+SnowMachine.prototype.draw = function () {
+	var ctx = this.ctx;
+	var W = this.W;
+	var H = this.H;
+	ctx.clearRect(0, 0, W, H);
+	ctx.fillStyle = "rgba(255, 255, 255, 0.8)";
+	ctx.beginPath();
+	for(var i = 0; i < this.mp; i++) {
+		var p = this.particles[i];
+		ctx.moveTo(p.x, p.y);
+		ctx.arc(p.x, p.y, p.r, 0, Math.PI*2, true);
+	}
+	ctx.fill();
+	this.update();
+};
+
+SnowMachine.prototype.update = function () {
+	var particles = this.particles
+	var W = this.W;
+	var H = this.H;
+	var mp = this.mp;
+	this.angle += 0.01;
+
+	for (var i = 0; i < mp; i++) {
+		var p = particles[i];
+		p.y += Math.cos(this.angle+p.d) + 1 + p.r/2;
+		p.x += Math.sin(this.angle) * 2;
+		
+		//Sending flakes back from the top when it exits
+		//Lets make it a bit more organic and let flakes enter from the left and right also.
+		if(p.x > W+5 || p.x < -5 || p.y > H) {
+			if(i%3 > 0) {
+				//66.67% of the flakes 
+				particles[i] = {x: Math.random()*W, y: -10, r: p.r, d: p.d};
+			} else {
+				//If the flake is exitting from the right
+				if(Math.sin(this.angle) > 0) {
+					//Enter from the left
+					particles[i] = {x: -5, y: Math.random()*H, r: p.r, d: p.d};
+				} else {
+					//Enter from the right
+					particles[i] = {x: W+5, y: Math.random()*H, r: p.r, d: p.d};
+				}
+			}
+		}
+	}
+};
+
+SnowMachine.prototype.start = function () {
+	this.initCanvas();
+	this.timer = setInterval(this.draw.bind(this), 33);
+};
+
+SnowMachine.prototype.stop = function () {
+	if (this.timer) {
+		window.clearInterval(this.timer);
+		this.timer = null;
+	}
+};

views/layouts/main.hbs

@@ -1,4 +1,5 @@
 <html>
+	<canvas id="canvas"></canvas>
 	{{>head}}
 	<body>
 		<div id="body_content">

views/partials/head.hbs

@@ -24,5 +24,6 @@
   <script src="/js/autolinker.min.js"></script>
   <script src="/js/emoji.min.js"></script>
   <script src="/js/slider.min.js"></script>
+  <script src="/js/snowmachine.js"></script>
   <script src="/js/app.js"></script>
 </head>