From 8990a3d4acc8f810a6f038842a8732fd1ae5befa Mon Sep 17 00:00:00 2001 From: Bert Peters Date: Mon, 4 Mar 2019 00:02:43 +0100 Subject: [PATCH] Finish unopened page. --- gulpfile.js | 25 +++++++++++++ package.json | 12 +++--- public/foobar.css | 4 -- src/closed.js | 70 ----------------------------------- src/index.js | 74 ++++++++++++++++++++++++++++++++++++- styles/base.scss | 3 ++ {src => styles}/closed.scss | 5 +++ templates/closed.html | 4 +- 8 files changed, 112 insertions(+), 85 deletions(-) create mode 100644 gulpfile.js create mode 100644 styles/base.scss rename {src => styles}/closed.scss (81%) diff --git a/gulpfile.js b/gulpfile.js new file mode 100644 index 0000000..2f115a3 --- /dev/null +++ b/gulpfile.js @@ -0,0 +1,25 @@ +const {src, dest, parallel} = require('gulp'); +const sass = require('gulp-sass'); +const minifyCSS = require('gulp-csso'); +const concat = require('gulp-concat'); +const browserify = require('gulp-browserify'); + +function css() { + return src('styles/*.scss') + .pipe(sass()) + .pipe(minifyCSS()) + .pipe(concat('bundle.css')) + .pipe(dest('public')) +} + +function js() { + return src('src/index.js') + .pipe(browserify({ + insertGlobals: true, + })) + .pipe(dest('public')) +} + +exports.js = js; +exports.css = css; +exports.default = parallel(css, js); diff --git a/package.json b/package.json index c9b4d99..bfcce95 100644 --- a/package.json +++ b/package.json @@ -10,13 +10,11 @@ "dependencies": {}, "devDependencies": { "autoprefixer": "^9.4.9", - "css-loader": "^2.1.0", + "gulp": "^4.0.0", + "gulp-concat": "^2.6.1", + "gulp-csso": "^3.0.1", + "gulp-sass": "^4.0.2", "node-sass": "^4.11.0", - "postcss": "^7.0.14", - "postcss-loader": "^3.0.0", - "sass-loader": "^7.1.0", - "style-loader": "^0.23.1", - "webpack": "^4.29.6", - "webpack-cli": "^3.2.3" + "postcss": "^7.0.14" } } diff --git a/public/foobar.css b/public/foobar.css index b51f0aa..e23a883 100644 --- a/public/foobar.css +++ b/public/foobar.css @@ -67,10 +67,6 @@ height:100%; text-align: center; } -* { - font-family: verdana, sans-serif; -} - #wrapper { margin: auto; width: 999px; diff --git a/src/closed.js b/src/closed.js index f820f94..1b7eb82 100644 --- a/src/closed.js +++ b/src/closed.js @@ -3,79 +3,9 @@ * * In it, we fill the screen evenly with "closed" messages. The locations are */ -require('./closed.scss'); /** * 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} diff --git a/src/index.js b/src/index.js index e87c5b4..2a09bd4 100644 --- a/src/index.js +++ b/src/index.js @@ -1,5 +1,3 @@ -import {startClosedAnimation} from "./closed"; - window.addEventListener('load', function () { if (document.body.classList.contains('open')) { // TODO: leave it in HTML/CSS for now. @@ -7,3 +5,75 @@ window.addEventListener('load', function () { startClosedAnimation(); } }); + + +function startClosedAnimation() { + const state = { + popups: [], + popup_index: 0, + }; + + const MAX_POPUPS = 200; + + 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; + } + + window.setInterval(animationTick, 100); +} + + diff --git a/styles/base.scss b/styles/base.scss new file mode 100644 index 0000000..0df4640 --- /dev/null +++ b/styles/base.scss @@ -0,0 +1,3 @@ +* { + font-family: verdana, sans-serif; +} diff --git a/src/closed.scss b/styles/closed.scss similarity index 81% rename from src/closed.scss rename to styles/closed.scss index 11d26bd..0cdbd07 100644 --- a/src/closed.scss +++ b/styles/closed.scss @@ -1,3 +1,5 @@ +@import "base"; + @keyframes fadeOut { 0% { opacity: 1; @@ -30,5 +32,8 @@ body.closed { width: 100%; height: 100%; background-size: contain; + background-image: url(stop.svg); + background-repeat: no-repeat; + background-position: 50% 50%; } } diff --git a/templates/closed.html b/templates/closed.html index 4e5c88f..0482a72 100644 --- a/templates/closed.html +++ b/templates/closed.html @@ -4,8 +4,8 @@ Nee... • IsDeFooBarOpen.nl - - + +