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

bin/www

@@ -15,8 +15,9 @@ let settings = {};
 try {
     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')));
+    }
 } catch (err) {
     console.error(err);
 }
@@ -57,10 +58,14 @@ function normalizePort(val) {
 
     if (isNaN(port))
     // named pipe
+    {
         return val;
+    }
     if (port >= 0)
     // port number
+    {
         return port;
+    }
     return false;
 }
 
@@ -69,8 +74,9 @@ function normalizePort(val) {
  */
 
 function onError(error) {
-  if (error.syscall !== 'listen')
+    if (error.syscall !== 'listen') {
         throw error;
+    }
 
     let bind = typeof port === 'string'
         ? 'Pipe ' + port

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)
-    //     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});
     }
 });
 

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
+  div(id='content')
+    div(id='info')
       h1= title
       p Welcome to #{title}
-  button(onclick='window.location.href="/bingo"') Bingo
+    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