mirror of
https://github.com/ENSL/ensl_gathers.git
synced 2024-11-10 07:11:53 +00:00
Christmas
This commit is contained in:
parent
d3d6cc5203
commit
0b0b245a92
8 changed files with 150 additions and 1 deletions
|
@ -158,6 +158,9 @@ var App = React.createClass({
|
|||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<ul className="nav navbar-top-links navbar-right">
|
||||
<SnowMachineMenu />
|
||||
</ul>
|
||||
</nav>
|
||||
<AdminPanel />
|
||||
<SettingsPanel
|
||||
|
|
34
lib/react/snowMachine.js
Normal file
34
lib/react/snowMachine.js
Normal file
|
@ -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>
|
||||
);
|
||||
}
|
||||
});
|
|
@ -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) {
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
BIN
public/images/christmas.png
Normal file
BIN
public/images/christmas.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 3 MiB |
88
public/js/snowmachine.js
Normal file
88
public/js/snowmachine.js
Normal file
|
@ -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;
|
||||
}
|
||||
};
|
|
@ -1,4 +1,5 @@
|
|||
<html>
|
||||
<canvas id="canvas"></canvas>
|
||||
{{>head}}
|
||||
<body>
|
||||
<div id="body_content">
|
||||
|
|
|
@ -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>
|
Loading…
Reference in a new issue