Cookie Dialog

- added a cookie dialog
- removed riddle (temporary)
- removed users (temporary)

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
 

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('/users', usersRouter);
-    app.use(/\/riddle(\/.*)?/, riddleRouter);
+    //app.use(/\/riddle(\/.*)?/, riddleRouter);
     app.use('/bingo', bingoRouter);
     app.use('/graphql', graphqlHTTP(async (request, response) => {
         return await {

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'))
+    if (fsx.existsSync('config.yaml')) {
-    Object.assign(settings, yaml.safeLoad(fsx.readFileSync('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.listen(port);
-  server.on('error', (error) => onError(error));
+    server.on('error', (error) => onError(error));
-  server.on('listening', () => onListening(server));
+    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.message);
-  console.error(err.stack);
+    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')
+    if (error.syscall !== 'listen') {
-    throw error;
+        throw error;
-
+    }
-  let bind = typeof port === 'string'
+
-    ? 'Pipe ' + port
+    let bind = typeof port === 'string'
-    : 'Port ' + port;
+        ? 'Pipe ' + port
-
+        : 'Port ' + port;
-  // handle specific listen errors with friendly messages
+
-  switch (error.code) {
+    // handle specific listen errors with friendly messages
-    case 'EACCES':
+    switch (error.code) {
-      console.error(bind + ' requires elevated privileges');
+        case 'EACCES':
-      process.exit(1);
+            console.error(bind + ' requires elevated privileges');
-      break;
+            process.exit(1);
-    case 'EADDRINUSE':
+            break;
-      console.error(bind + ' is already in use');
+        case 'EADDRINUSE':
-      process.exit(1);
+            console.error(bind + ' is already in use');
-      break;
+            process.exit(1);
-    default:
+            break;
-      throw error;
+        default:
-  }
+            throw error;
+    }
 }
 
 /**
@@ -96,9 +102,9 @@ function onError(error) {
  */
 
 function onListening(server) {
-  let addr = server.address();
+    let addr = server.address();
-  let bind = typeof addr === 'string'
+    let bind = typeof addr === 'string'
-    ? 'pipe ' + addr
+        ? 'pipe ' + addr
-    : 'port ' + addr.port;
+        : 'port ' + addr.port;
-  debug('Listening on ' + bind);
+    debug('Listening on ' + bind);
 }

graphql/schema.graphql

@@ -8,4 +8,5 @@ type Query {
 
 type Mutation {
     bingo: BingoMutation
+    acceptCookies: Boolean
 }

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!'
+    }
 });

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();
+}

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

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%)

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)
+    let info = req.session.acceptedCookies? null: globals.cookieInfo;
-    //     req.session.bingoPlayerId = playerId = (await bdm.addPlayer(shuffleArray(playerNames)[0])).id;
     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});
     }
 });
 

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;

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

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

views/index.pug

@@ -1,6 +1,10 @@
 extends layout
 
 block content
-  h1= title
+  div(id='content')
-  p Welcome to #{title}
+    div(id='info')
-  button(onclick='window.location.href="/bingo"') Bingo
+      h1= title
+      p Welcome to #{title}
+    button(id='bingo-button' onclick='window.location.href="/bingo"') Bingo
+
+    include includes/info-container

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