bert/isdefoobaropen
1
0
Fork 0
Code Pull Requests Releases Activity

Implement basic background animation for closed screen.

Browse Source
This commit is contained in:
Bert Peters
2019-03-03 17:22:29 +01:00
parent bfea8896de
commit ebe4e85fad
8 changed files with 148 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@@ -2,3 +2,4 @@
vendor vendor
node_modules node_modules
.php_cs.cache .php_cs.cache
public/bundle.js

16
package.json Normal file
View File

@@ -0,0 +1,16 @@
{
"name": "isdefoobaropen.nl",
"version": "1.0.0",
"description": "Source code for isdefoobaropen.nl",
"main": "index.js",
"repository": "gitea@git.bertptrs.nl:bert/isdefoobaropen.nl.git",
"author": "Bert Peters <bert@bertptrs.nl>",
"license": "GPLv3",
"private": true,
"dependencies": {
},
"devDependencies": {
"webpack": "^4.29.6",
"webpack-cli": "^3.2.3"
}
}

21
public/foobar.css
View File

@@ -61,6 +61,16 @@ transform: rotate(360deg);
} }
} }
@keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
body.open { body.open {
height:100%; height:100%;
background-color: #a3d165; background-color: #a3d165;
@@ -96,5 +106,14 @@ animation:starrotation 10s;
-o-animation:starration 10s; /* Opera */ -o-animation:starration 10s; /* Opera */
-o-animation-iteration-count: infinite; -o-animation-iteration-count: infinite;
-o-animation-timing-function: linear; -o-animation-timing-function: linear;
}
.closed_notice {
position: absolute;
font-weight: bold;
font-size: 16pt;
text-transform: uppercase;
animation: fadeOut 3s forwards;
animation-timing-function: linear;
animation-iteration-count: 1;
} }

2
public/index.php
View File

@@ -4,5 +4,5 @@ require_once '../vendor/autoload.php';
if (\FooBar\Configuration::loadConfig()->isOpen()) { if (\FooBar\Configuration::loadConfig()->isOpen()) {
require 'isOpen.php'; require 'isOpen.php';
} else { } else {
require 'isGesloten.php'; require '../templates/closed.html';
} }

80
src/closed.js Normal file
View File

@@ -0,0 +1,80 @@
/**
* This file contains the animation logic for the closed screen.
*
* In it, we fill the screen evenly with "closed" messages. The locations are
*/
/**
* Contains the state for this demo.
*
* @type {{popups: Array, popup_index: number}}
*/
const state = {
popups: [],
popup_index: 0,
};
const MAX_POPUPS = 200;
function startClosedAnimation() {
window.setInterval(animationTick, 100);
}
function minDist(x, y) {
let min = 0;
let element;
for (element of state.popups) {
if (element == null) {
continue;
}
const dx = x - element.x;
const dy = y - element.y;
const dist = Math.sqrt(dx * dx + dy * dy);
min = Math.min(dist, min);
}
return min;
}
function animationTick() {
const index = state.popup_index;
if (state.popups.length >= MAX_POPUPS) {
document.body.removeChild(state.popups[index].element);
state.popups[index] = null;
}
const width = window.innerWidth;
const height = window.innerHeight;
// Generate new candidates
const candidates = [];
for (let i = 0; i < MAX_POPUPS; ++i) {
candidates.push({x: Math.random() * width, y: Math.random() * height});
}
let best = candidates[0];
let max = minDist(candidates[0].x, candidates[0].y);
let candidate;
for (candidate of candidates) {
const dist = minDist(candidate.x, candidate.y);
if (dist > max) {
best = candidate;
max = dist;
}
}
let element = document.createElement('div');
element.innerText = 'Nee';
element.classList.add('closed_notice');
element.style.left = best.x + 'px';
element.style.top = best.y + 'px';
element.style.transform = 'rotate(' + (Math.random() * 360) + 'deg)';
document.body.appendChild(element);
best.element = element;
state.popups[index] = best;
state.popup_index = (index + 1) % MAX_POPUPS;
}
export {startClosedAnimation}

9
src/index.js Normal file
View File

@@ -0,0 +1,9 @@
import {startClosedAnimation} from "./closed";
window.addEventListener('load', function () {
if (document.body.classList.contains('open')) {
// TODO: leave it in HTML/CSS for now.
} else {
startClosedAnimation();
}
});

12
templates/closed.html Normal file
View File

@@ -0,0 +1,12 @@
<!DOCTYPE HTML>
<html lang="nl">
<head>
<meta charset="UTF-8">
<meta name="creator" value="Genetic Lifeform and Beer Operating System - GLaBOS">
<title>Nee... &bull; IsDeFooBarOpen.nl</title>
<link rel="stylesheet" href="foobar.css" type="text/css">
<script src="bundle.js"></script>
</head>
<body class="closed">
</body>
</html>

9
webpack.config.js Normal file
View File

@@ -0,0 +1,9 @@
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'public')
}
};