Eerste commit

statisch/sneeuw2.min.js

@@ -0,0 +1 @@
+snow={count:60,delay:20,flutter:0.2,wobble:0.5,spin:1,wind:1,w1:1,minSpeed:0.3,maxSpeed:4,cv:null,flakes:[],toggle:function(){if(window.snowtimer){snow.stop()}else{snow.start()}},resize:function(){snow.cv.width=innerWidth;snow.cv.height=innerHeight;snow.gt=snow.ct.createLinearGradient(0,0,0,snow.cv.height);snow.gt.addColorStop(0,"#6666ff");snow.gt.addColorStop(1,"#ffffff");snow.ct.fillStyle=snow.gt},start:function(){snow.cv=document.createElement("canvas");snow.cv.width=snow.cv.height=10;snow.cv.id="backgroundSnowCanvas";document.body.appendChild(snow.cv);snow.createFlake();snow.ct=snow.cv.getContext("2d"),snow.cv.style.position="fixed";snow.cv.style.top=0;snow.cv.style.left=0;snow.cv.style.zIndex=-1;snow.resize();var a=snow.count;snow.flakes=[];do{snow.flakes.push(new snow.flake())}while(--a);snow.ct.clearRect(0,0,snow.cv.width,snow.cv.height);window.snowtimer=window.setInterval(snow.draw,snow.delay);window.addEventListener("resize",snow.resize)},stop:function(){window.clearInterval(window.snowtimer);var a=document.getElementById("backgroundSnowCanvas");a.parentNode.removeChild(a);window.snowtimer=snow=null},draw:function(){var a=snow.ct,b=snow.flakes,d=snow.count;a.clearRect(0,0,snow.cv.width,snow.cv.height);do{if(b[--d].draw(a)&&++fdone){}}while(d);snow.wind+=Math.cos(snow.w1++/180)},flake:function(){this.draw=function(c){var b=this.x+snow.wind,e=this.y,a=b+this.sz/2,d=e+this.sz/2;c.translate(a,d);c.rotate(this.a);c.translate(-a,-d);c.drawImage(snow.flakeImages[this.flake],b,e,this.sz,this.sz);if(this.flakebits>=0){c.drawImage(snow.flakeBits[this.flakebits],b,e,this.sz,this.sz)}c.setTransform(1,0,0,1,0,0);this.animate()};this.animate=function(){this.y+=this.speed;this.x+=this.flutter*Math.cos(snow.flutter*snow.flutter*this.y);this.a=(this.spin*this.y)+(this.wobble*Math.sin(this.y/this.sz));if(this.y>innerHeight){this.init(1)}};this.init=function(a){this.speed=snow.minSpeed+(Math.random()*(snow.maxSpeed-snow.minSpeed));this.sz=~~(Math.random()*40)+20;this.flutter=~~(Math.random()*snow.flutter*(60-this.sz));this.wobble=Math.random()*snow.wobble;this.spin=snow.spin*0.1*(Math.random()-0.5);this.a=0;this.x=(Math.random()*(innerWidth+this.sz))-this.sz;this.y=a?-this.sz:Math.random()*innerHeight;this.flake=~~(Math.random()*snow.flakeImages.length);this.flakebits=~~(Math.random()*(snow.flakeBits.length+1))-1};this.init()},createFlake:function(){var A,z,B,s,r,j=document.createElement("canvas"),m,d;j.width=j.height=40;snow.flakeImages=[];snow.flakeBits=[];for(A=0;A<6;++A){snow.flakeImages[A]=s=j.cloneNode();B=s.getContext("2d");B.fillStyle="#fff";B.translate(20,20);B.beginPath();r=1+(A/2);B.rect(-r,-20,r*2,40);B.rotate(Math.PI/3);B.rect(-r,-20,r*2,40);B.rotate(Math.PI/3);B.rect(-r,-20,r*2,40);B.closePath();B.fill()}function x(f){f.arc(0,-16,4,0,7,0)}function b(I,F,f,H,G,g){I.moveTo(0,-f);I.lineTo(F,-H);I.lineTo(F,-G);I.lineTo(0,-H-g);I.lineTo(-F,-G);I.lineTo(-F,-H);I.lineTo(0,-f)}function i(f){b(f,5,6,8,10,0)}function v(f){b(f,5,10,12,14,0)}function u(f){b(f,4,6,8,12,2)}function k(f){b(f,9,6,8,11,0)}function y(f){b(f,4,16,16,18,2)}function E(f){b(f,5,12,12,14,2)}function e(f){x(f);u(f)}function t(f){v(f);u(f)}function l(f){i(f);v(f)}function o(f){x(f);i(f)}function a(f){y(f);E(f)}function D(f){y(f);k(f)}function n(f){y(f);u(f)}function C(f){y(f);i(f)}function q(f){E(f);i(f)}function p(f){y(f);v(f)}function h(f){x(f);k(f)}d=[h,q,p,C,n,D,y,E,a,k,x,i,v,u,e,t,l,o];for(A=0;A<d.length;++A){snow.flakeBits[A]=s=j.cloneNode();m=d[A];B=s.getContext("2d");B.translate(20,20);B.fillStyle="#fff";for(z=0;z<6;++z){B.beginPath();m(B);B.closePath();B.fill();B.rotate(Math.PI/3)}}}};

statisch/stijl.css

@@ -0,0 +1,45 @@
+html {
+	background-color: red;
+	color: green;
+}
+body {
+	font-family: "sans-serif";
+}
+
+main {
+	margin: 2em auto;
+	max-width: 600px;
+	padding: 1.5em;
+	border-image: url("rand-klein.png") 70 65 / 80px / 30px round;
+	border-style: solid;
+	background-color: cyan;
+}
+
+button {
+	border: 10px outset green;
+	background-color: green;
+	color: white;
+	font-size: 1.5em;
+	text-transform: uppercase;
+	font-weight: bold;
+	width: 100%;
+}
+
+img {
+	width: 100%;
+}
+
+p {
+	font-weight: bold;
+}
+
+button:disabled {
+	background-color: darkgreen;
+	border-style: groove;
+	color: red;
+	cursor: wait;
+}
+
+button:active, button:active:not(:disabled) {
+	border-style: inset;
+}

statisch/webbus.js

@@ -0,0 +1,69 @@
+var knop;
+var bus;
+
+function werkKnopBij(tekst, aan) {
+	knop.innerText = tekst;
+	knop.disabled = !aan;
+}
+
+function trommel() {
+	bus.send("trommel");
+}
+
+function aftellen(tijd) {
+	if (bus.readyState !== bus.OPEN) return;
+	werkKnopBij(v9n["knop.afkoelen"].replace("{seconden}", Math.ceil((tijd - Date.now()) / 1000)), false);
+	if (tijd - Date.now() > 0) {
+		window.setTimeout(function() { aftellen(tijd) }, 1000);
+	} else {
+		werkKnopBij(v9n["knop.activeer"], true);
+	}
+}
+
+function verbind() {
+	werkKnopBij(v9n["knop.initialiseren"], false);
+	var bestemming =( window.location.protocol == "http:" 
+		? "ws://" : "wss://") + window.location.hostname + ":" + window.location.port + "/arreslee";
+	bus = new WebSocket(bestemming);
+	bus.onopen = function() {
+		werkKnopBij(v9n["knop.initialiseren2"], false);
+		knop.removeEventListener("click", verbind);
+		knop.addEventListener("click", trommel);
+	}
+	bus.onmessage = function(bericht) {
+		var gegevens = JSON.parse(bericht.data);
+		if (gegevens.verbondenMetKerstman) {
+			var doelTijd = gegevens.trommelenVerbodenTot * 1000;
+			var tijdVerschil = Date.now() - doelTijd;
+			if (tijdVerschil > 0) {
+				werkKnopBij(v9n["knop.activeer"], true);
+			} else {
+				aftellen(doelTijd);
+			}
+		} else {
+			werkKnopBij(v9n["knop.initialiseren2"], false);
+		}
+	}
+	bus.onclose = function() {
+		werkKnopBij("Opnieuw verbinden", true);
+		knop.removeEventListener("click", trommel);
+		knop.addEventListener("click", verbind);
+	}
+}
+
+window.addEventListener("load", function() {
+	knop = document.getElementById("knop");
+	verbind();
+
+	try {
+		snow.count = 100;   // number of flakes
+		snow.delay = 20;   // timer interval
+		snow.minSpeed = 0.2; // minimum movement/time slice
+		snow.maxSpeed = 2; // maximum movement/time slice
+		snow.wobble = 2;
+		snow.flutter = 0.1;
+		snow.start();
+	} catch(e) {
+		console.log(e);
+	}
+});