|
|
|
@ -1,6 +1,21 @@
|
|
|
|
|
<?php
|
|
|
|
|
require "adventCalendar.php";
|
|
|
|
|
$dev = isset($_GET['dev']) ? $_GET['dev'] : false;
|
|
|
|
|
if ($dev) {
|
|
|
|
|
$config = file_get_contents("./calendar_dev.json");
|
|
|
|
|
} else {
|
|
|
|
|
$config = file_get_contents("./calendar_prod.json");
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
require "adventCalendar.php";
|
|
|
|
|
$calendar = new adventCalendar();
|
|
|
|
|
$calendar->load_from_json($config);
|
|
|
|
|
|
|
|
|
|
echo $calendar->showExtras;
|
|
|
|
|
echo $calendar->enableSnow;
|
|
|
|
|
|
|
|
|
|
$showExtras = ($calendar->showExtras == 'true') ? true : false;
|
|
|
|
|
$snow_enabled = ($calendar->enableSnow == 'true') ? true : false;
|
|
|
|
|
|
|
|
|
|
?>
|
|
|
|
|
|
|
|
|
|
<!DOCTYPE html>
|
|
|
|
@ -48,22 +63,18 @@ $dev = isset($_GET['dev']) ? $_GET['dev'] : false;
|
|
|
|
|
<?php } ?>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
|
|
|
|
|
<?php if ($snow_enabled) { ?>
|
|
|
|
|
<canvas class="snow" id="snow"></canvas>
|
|
|
|
|
<?php } ?>
|
|
|
|
|
<center>
|
|
|
|
|
<p style="color: white; font-family: christmasFont; font-size: 48px; margin: 16px 0px 20px 0px;">Adventskalender Seline</p>
|
|
|
|
|
<div class="mainCalendar">
|
|
|
|
|
<?php if ($dev) {
|
|
|
|
|
$config = file_get_contents("./calendar_dev.json");
|
|
|
|
|
} else {
|
|
|
|
|
$config = file_get_contents("./calendar_prod.json");
|
|
|
|
|
}
|
|
|
|
|
$calendar = new adventCalendar();
|
|
|
|
|
$calendar->load_from_json($config);
|
|
|
|
|
<?php
|
|
|
|
|
$calendar->render();
|
|
|
|
|
?>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<?php if ($calendar->showExtras == "true") { ?>
|
|
|
|
|
<?php if ($showExtras) { ?>
|
|
|
|
|
<hr>
|
|
|
|
|
<p style="color: white; font-family: christmasFont; font-size: 40px; margin: 16px 0px 20px 0px;">Zite wod nüt sötsch abmache :</p>
|
|
|
|
|
|
|
|
|
@ -75,5 +86,131 @@ $dev = isset($_GET['dev']) ? $_GET['dev'] : false;
|
|
|
|
|
<?php } ?>
|
|
|
|
|
</center>
|
|
|
|
|
|
|
|
|
|
<?php if ($snow_enabled) { ?>
|
|
|
|
|
<script src='https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js'></script>
|
|
|
|
|
<script>
|
|
|
|
|
const Snow = (canvas, count, options) => {
|
|
|
|
|
const ctx = canvas.getContext('2d');
|
|
|
|
|
const snowflakes = [];
|
|
|
|
|
|
|
|
|
|
const add = item => snowflakes.push(item(canvas));
|
|
|
|
|
|
|
|
|
|
const update = () => _.forEach(snowflakes, el => el.update());
|
|
|
|
|
|
|
|
|
|
const resize = () => {
|
|
|
|
|
ctx.canvas.width = canvas.offsetWidth;
|
|
|
|
|
ctx.canvas.height = canvas.offsetHeight;
|
|
|
|
|
|
|
|
|
|
_.forEach(snowflakes, el => el.resized());
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const draw = () => {
|
|
|
|
|
ctx.clearRect(0, 0, canvas.offsetWidth, canvas.offsetHeight);
|
|
|
|
|
_.forEach(snowflakes, el => el.draw());
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const events = () => {
|
|
|
|
|
window.addEventListener('resize', resize);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const loop = () => {
|
|
|
|
|
draw();
|
|
|
|
|
update();
|
|
|
|
|
animFrame(loop);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const init = () => {
|
|
|
|
|
_.times(count, () => add(canvas => SnowItem(canvas, null, options)));
|
|
|
|
|
events();
|
|
|
|
|
loop();
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
init(count);
|
|
|
|
|
resize();
|
|
|
|
|
|
|
|
|
|
return { add, resize };
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const defaultOptions = {
|
|
|
|
|
color: 'orange',
|
|
|
|
|
radius: [0.5, 3.0],
|
|
|
|
|
speed: [1, 3],
|
|
|
|
|
wind: [-0.5, 3.0] };
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const SnowItem = (canvas, drawFn = null, opts) => {
|
|
|
|
|
const options = { ...defaultOptions, ...opts };
|
|
|
|
|
const { radius, speed, wind, color } = options;
|
|
|
|
|
const params = {
|
|
|
|
|
color,
|
|
|
|
|
x: _.random(0, canvas.offsetWidth),
|
|
|
|
|
y: _.random(-canvas.offsetHeight, 0),
|
|
|
|
|
radius: _.random(...radius),
|
|
|
|
|
speed: _.random(...speed),
|
|
|
|
|
wind: _.random(...wind),
|
|
|
|
|
isResized: false };
|
|
|
|
|
|
|
|
|
|
const ctx = canvas.getContext('2d');
|
|
|
|
|
|
|
|
|
|
const updateData = () => {
|
|
|
|
|
params.x = _.random(0, canvas.offsetWidth);
|
|
|
|
|
params.y = _.random(-canvas.offsetHeight, 0);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const resized = () => params.isResized = true;
|
|
|
|
|
|
|
|
|
|
const drawDefault = () => {
|
|
|
|
|
ctx.beginPath();
|
|
|
|
|
ctx.arc(params.x, params.y, params.radius, 0, 2 * Math.PI);
|
|
|
|
|
ctx.fillStyle = params.color;
|
|
|
|
|
ctx.fill();
|
|
|
|
|
ctx.closePath();
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const draw = drawFn ?
|
|
|
|
|
() => drawFn(ctx, params) :
|
|
|
|
|
drawDefault;
|
|
|
|
|
|
|
|
|
|
const translate = () => {
|
|
|
|
|
params.y += params.speed;
|
|
|
|
|
params.x += params.wind;
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const onDown = () => {
|
|
|
|
|
if (params.y < canvas.offsetHeight) return;
|
|
|
|
|
|
|
|
|
|
if (params.isResized) {
|
|
|
|
|
updateData();
|
|
|
|
|
params.isResized = false;
|
|
|
|
|
} else {
|
|
|
|
|
params.y = 0;
|
|
|
|
|
params.x = _.random(0, canvas.offsetWidth);
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const update = () => {
|
|
|
|
|
translate();
|
|
|
|
|
onDown();
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
return {
|
|
|
|
|
update,
|
|
|
|
|
resized,
|
|
|
|
|
draw };
|
|
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const el = document.querySelector('.container');
|
|
|
|
|
const wrapper = document.querySelector('body');
|
|
|
|
|
const canvas = document.getElementById('snow');
|
|
|
|
|
|
|
|
|
|
const animFrame = window.requestAnimationFrame ||
|
|
|
|
|
window.mozRequestAnimationFrame ||
|
|
|
|
|
window.webkitRequestAnimationFrame ||
|
|
|
|
|
window.msRequestAnimationFrame;
|
|
|
|
|
|
|
|
|
|
Snow(canvas, 150, { color: 'white' });
|
|
|
|
|
</script>
|
|
|
|
|
<?php } ?>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
|
|
|
|