From e35cfabc49480b43180dfc5c24cfe3ad876bbb2d Mon Sep 17 00:00:00 2001 From: Trivernis Date: Sun, 19 May 2019 12:09:28 +0200 Subject: [PATCH] Cookie Dialog - added a cookie dialog - removed riddle (temporary) - removed users (temporary) --- CHANGELOG.md | 2 + app.js | 10 ++- bin/www | 108 ++++++++++++----------- graphql/schema.graphql | 1 + lib/globals.js | 9 +- public/javascripts/common.js | 8 ++ public/stylesheets/sass/classes.sass | 17 ++++ public/stylesheets/sass/index/style.sass | 29 ++++++ routes/bingo.js | 14 +-- routes/index.js | 5 +- views/bingo/includes/bingo-layout.pug | 1 + views/includes/info-container.pug | 5 ++ views/index.pug | 10 ++- views/layout.pug | 4 +- 14 files changed, 157 insertions(+), 66 deletions(-) create mode 100644 public/stylesheets/sass/index/style.sass create mode 100644 views/includes/info-container.pug diff --git a/CHANGELOG.md b/CHANGELOG.md index 940886d..37cde06 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -28,6 +28,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - grid size input - bingo status bar - bingo chat commands +- cookie info dialog ## Changed @@ -42,6 +43,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - sqlite3 sesssion storage - old frontend - old bingo pug files +- riddle and users (currently deactivated) ### Fixed diff --git a/app.js b/app.js index 3447de8..0719d11 100644 --- a/app.js +++ b/app.js @@ -25,7 +25,11 @@ async function init() { let graphqlResolver = async (request, response) => { return { time: Date.now(), - bingo: await bingoRouter.graphqlResolver(request, response) + bingo: await bingoRouter.graphqlResolver(request, response), + acceptCookies: () => { + request.session.acceptedCookies = true; + return true; + } }; }; // database setup @@ -65,8 +69,8 @@ async function init() { app.use(express.static(path.join(__dirname, 'public'))); app.use('/', indexRouter); - app.use('/users', usersRouter); - app.use(/\/riddle(\/.*)?/, riddleRouter); + //app.use('/users', usersRouter); + //app.use(/\/riddle(\/.*)?/, riddleRouter); app.use('/bingo', bingoRouter); app.use('/graphql', graphqlHTTP(async (request, response) => { return await { diff --git a/bin/www b/bin/www index 2a09075..7a326cc 100644 --- a/bin/www +++ b/bin/www @@ -13,12 +13,13 @@ const fsx = require('fs-extra'); let settings = {}; try { - settings = yaml.safeLoad(fsx.readFileSync('default-config.yaml')); + settings = yaml.safeLoad(fsx.readFileSync('default-config.yaml')); - if (fsx.existsSync('config.yaml')) - Object.assign(settings, yaml.safeLoad(fsx.readFileSync('config.yaml'))); + if (fsx.existsSync('config.yaml')) { + Object.assign(settings, yaml.safeLoad(fsx.readFileSync('config.yaml'))); + } } catch (err) { - console.error(err); + console.error(err); } /** @@ -28,40 +29,44 @@ try { let port = normalizePort(process.env.PORT || settings.port || '3000'); appInit().then((app) => { - app.set('port', port); + app.set('port', port); - /** - * Create HTTP server. - */ + /** + * Create HTTP server. + */ - let server = http.createServer(app); + let server = http.createServer(app); - /** - * Listen on provided port, on all network interfaces. - */ + /** + * Listen on provided port, on all network interfaces. + */ - server.listen(port); - server.on('error', (error) => onError(error)); - server.on('listening', () => onListening(server)); + server.listen(port); + server.on('error', (error) => onError(error)); + server.on('listening', () => onListening(server)); - /** - * Normalize a port into a number, string, or false. - */ + /** + * Normalize a port into a number, string, or false. + */ }).catch((err) => { - console.error(err.message); - console.error(err.stack); + console.error(err.message); + console.error(err.stack); }); function normalizePort(val) { - let port = parseInt(val, 10); + let port = parseInt(val, 10); - if (isNaN(port)) + if (isNaN(port)) // named pipe - return val; - if (port >= 0) + { + return val; + } + if (port >= 0) // port number - return port; - return false; + { + return port; + } + return false; } /** @@ -69,26 +74,27 @@ function normalizePort(val) { */ function onError(error) { - if (error.syscall !== 'listen') - throw error; - - let bind = typeof port === 'string' - ? 'Pipe ' + port - : 'Port ' + port; - - // handle specific listen errors with friendly messages - switch (error.code) { - case 'EACCES': - console.error(bind + ' requires elevated privileges'); - process.exit(1); - break; - case 'EADDRINUSE': - console.error(bind + ' is already in use'); - process.exit(1); - break; - default: - throw error; - } + if (error.syscall !== 'listen') { + throw error; + } + + let bind = typeof port === 'string' + ? 'Pipe ' + port + : 'Port ' + port; + + // handle specific listen errors with friendly messages + switch (error.code) { + case 'EACCES': + console.error(bind + ' requires elevated privileges'); + process.exit(1); + break; + case 'EADDRINUSE': + console.error(bind + ' is already in use'); + process.exit(1); + break; + default: + throw error; + } } /** @@ -96,9 +102,9 @@ function onError(error) { */ function onListening(server) { - let addr = server.address(); - let bind = typeof addr === 'string' - ? 'pipe ' + addr - : 'port ' + addr.port; - debug('Listening on ' + bind); + let addr = server.address(); + let bind = typeof addr === 'string' + ? 'pipe ' + addr + : 'port ' + addr.port; + debug('Listening on ' + bind); } diff --git a/graphql/schema.graphql b/graphql/schema.graphql index a5ac58a..9d430c6 100644 --- a/graphql/schema.graphql +++ b/graphql/schema.graphql @@ -8,4 +8,5 @@ type Query { type Mutation { bingo: BingoMutation + acceptCookies: Boolean } diff --git a/lib/globals.js b/lib/globals.js index 29cb7ad..e4d7c0a 100644 --- a/lib/globals.js +++ b/lib/globals.js @@ -11,5 +11,12 @@ Object.assign(exports, { user: settings.postgres.user, password: settings.postgres.password, database: settings.postgres.database - }) + }), + cookieInfo: { + headline: 'This website uses cookies', + content: 'This website uses cookies to store your session data (like for bingo).', + onclick: 'acceptCookies()', + id: 'cookie-container', + button: 'All right!' + } }); diff --git a/public/javascripts/common.js b/public/javascripts/common.js index f9564b4..ac8a1fe 100644 --- a/public/javascripts/common.js +++ b/public/javascripts/common.js @@ -127,3 +127,11 @@ async function indicateStatus(func, indicatorSelector) { statusIndicator.setAttribute('status', 'error'); } } + +async function acceptCookies() { + await postGraphqlQuery(` + mutation { + acceptCookies + }`); + document.querySelector('#cookie-container').remove(); +} diff --git a/public/stylesheets/sass/classes.sass b/public/stylesheets/sass/classes.sass index cd283e0..6172c8d 100644 --- a/public/stylesheets/sass/classes.sass +++ b/public/stylesheets/sass/classes.sass @@ -50,3 +50,20 @@ animation-name: pulse-opacity animation-duration: 2s animation-iteration-count: infinite + + +.infoContainer + position: absolute + bottom: 0 + left: 0 + background: lighten($primary, 5%) + padding: 1rem + border: 1px solid $primarySurface + z-index: 9999 + + h1 + margin: 0 0 1rem + + button + display: block + margin: 1rem auto 0 diff --git a/public/stylesheets/sass/index/style.sass b/public/stylesheets/sass/index/style.sass new file mode 100644 index 0000000..0d17292 --- /dev/null +++ b/public/stylesheets/sass/index/style.sass @@ -0,0 +1,29 @@ +@import ../vars +@import ../mixins + +#content + display: grid + grid-template: 25% 50% 25% / 25% 50% 25% + height: 100% + width: 100% + position: absolute + top: 0 + left: 0 + +#info + @include gridPosition(1, 2, 2, 3) + margin: auto + + h1, p + margin: auto + +#bingo-button + background-color: $secondary + height: 100% + width: 50vh + border-radius: 25rem + margin: auto + @include gridPosition(2, 3, 2, 3) + +#bingo-button:hover + background-color: mix($secondary, $primary, 75%) diff --git a/routes/bingo.js b/routes/bingo.js index 93cbc0e..89101d1 100644 --- a/routes/bingo.js +++ b/routes/bingo.js @@ -1347,8 +1347,7 @@ router.use(async (req, res, next) => { router.get('/', async (req, res) => { let playerId = req.session.bingoPlayerId; - // if (!playerId) - // req.session.bingoPlayerId = playerId = (await bdm.addPlayer(shuffleArray(playerNames)[0])).id; + let info = req.session.acceptedCookies? null: globals.cookieInfo; let lobbyWrapper = new LobbyWrapper(req.query.g); if (playerId && req.query.g && await lobbyWrapper.exists()) { let lobbyId = req.query.g; @@ -1365,7 +1364,8 @@ router.get('/', async (req, res) => { adminId: admin.id, words: words, wordString: words.join('\n'), - gridSize: await lobbyWrapper.gridSize() + gridSize: await lobbyWrapper.gridSize(), + info: info }); } else { if (await lobbyWrapper.hasPlayer(playerId)) { @@ -1376,7 +1376,8 @@ router.get('/', async (req, res) => { players: playerData, grid: grid, isAdmin: (playerId === admin.id), - adminId: admin.id + adminId: admin.id, + info: info }); } else { let playerData = await getPlayerData(lobbyWrapper); @@ -1388,12 +1389,13 @@ router.get('/', async (req, res) => { adminId: admin.id, words: words, wordString: words.join('\n'), - gridSize: await lobbyWrapper.gridSize() + gridSize: await lobbyWrapper.gridSize(), + info: info }); } } } else { - res.render('bingo/bingo-create'); + res.render('bingo/bingo-create', {info: info}); } }); diff --git a/routes/index.js b/routes/index.js index f4f0679..daaeb4b 100644 --- a/routes/index.js +++ b/routes/index.js @@ -1,9 +1,12 @@ const express = require('express'); const router = express.Router(); +const globals = require('../lib/globals'); + /* GET home page. */ router.get('/', function(req, res) { - res.render('index', { title: 'Trivernis.net' }); + let info = req.session.acceptedCookies? null: globals.cookieInfo; + res.render('index', { title: 'Trivernis.net', info: info}); }); module.exports = router; diff --git a/views/bingo/includes/bingo-layout.pug b/views/bingo/includes/bingo-layout.pug index d2e2d91..70695ab 100644 --- a/views/bingo/includes/bingo-layout.pug +++ b/views/bingo/includes/bingo-layout.pug @@ -6,4 +6,5 @@ html link(rel='stylesheet', href='/sass/bingo/style.sass') base(target='_blank') body + include ../../includes/info-container block content diff --git a/views/includes/info-container.pug b/views/includes/info-container.pug new file mode 100644 index 0000000..26d5582 --- /dev/null +++ b/views/includes/info-container.pug @@ -0,0 +1,5 @@ +if info + div(class='infoContainer' id=info.id) + h1=info.headline + span= info.content + button(onclick=info.onclick)= info.button diff --git a/views/index.pug b/views/index.pug index 8b93234..4797e93 100644 --- a/views/index.pug +++ b/views/index.pug @@ -1,6 +1,10 @@ extends layout block content - h1= title - p Welcome to #{title} - button(onclick='window.location.href="/bingo"') Bingo + div(id='content') + div(id='info') + h1= title + p Welcome to #{title} + button(id='bingo-button' onclick='window.location.href="/bingo"') Bingo + + include includes/info-container diff --git a/views/layout.pug b/views/layout.pug index 6f767bf..32f1880 100644 --- a/views/layout.pug +++ b/views/layout.pug @@ -2,6 +2,8 @@ doctype html html head title= title - link(rel='stylesheet', href='/sass/style.sass') + link(rel='stylesheet' href='/sass/style.sass') + link(rel='stylesheet' href='/sass/index/style.sass') + script(type='text/javascript' src='/javascripts/common.js') body block content