Back- and frontend improvements

- added graphql backend
- added mobile support for frontend
- improved username form
- improved access to html-elements
- added toggle to bingo fields
pull/3/head
Trivernis 6 years ago
parent 5cde198890
commit 1e96cbe68e

1
.gitignore vendored

@ -1,5 +1,4 @@
package-lock
bin
.idea
node_modules
scripts/*

@ -7,6 +7,9 @@ const createError = require('http-errors'),
session = require('express-session'),
fsx = require('fs-extra'),
yaml = require('js-yaml'),
graphqlHTTP = require('express-graphql'),
{ buildSchema } = require('graphql'),
{ importSchema } = require('graphql-import'),
indexRouter = require('./routes/index'),
usersRouter = require('./routes/users'),
@ -18,6 +21,12 @@ let settings = yaml.safeLoad(fsx.readFileSync('default-config.yaml'));
if (fsx.existsSync('config.yaml'))
Object.assign(settings, yaml.safeLoad(fsx.readFileSync('config.yaml')));
let graphqlResolver = (request) => {
return {
time: Date.now(),
bingo: bingoRouter.graphqlResolver(request)
}
};
let app = express();
// view engine setup
@ -33,7 +42,9 @@ app.use(session({
secret: settings.sessions.secret,
resave: false,
saveUninitialized: true,
cookie: { maxAge: settings.sessions.maxAge }
cookie: {
expires: 10000000
}
}));
app.use('/sass', compileSass({
root: './public/stylesheets/sass',
@ -46,7 +57,15 @@ app.use(express.static(path.join(__dirname, 'public')));
app.use('/', indexRouter);
app.use('/users', usersRouter);
app.use(/\/riddle(\/.*)?/, riddleRouter);
app.use(/\/bingo?.*/, bingoRouter);
app.use('/bingo', bingoRouter);
app.use('/graphql', graphqlHTTP(request => {
return {
schema: buildSchema(importSchema('./graphql/schema.graphql')),
rootValue: graphqlResolver(request),
context: {session: request.session},
graphiql: true
};
}));
// catch 404 and forward to error handler
app.use(function(req, res, next) {
@ -64,4 +83,6 @@ app.use(function(err, req, res, next) {
res.render('error');
});
app.listen(settings.port);
module.exports = app;
//app.listen(settings.port);

@ -0,0 +1,90 @@
#!/usr/bin/env node
/**
* Module dependencies.
*/
var app = require('../app');
var debug = require('debug')('whooshy:server');
var http = require('http');
/**
* Get port from environment and store in Express.
*/
var port = normalizePort(process.env.PORT || '3000');
app.set('port', port);
/**
* Create HTTP server.
*/
var server = http.createServer(app);
/**
* Listen on provided port, on all network interfaces.
*/
server.listen(port);
server.on('error', onError);
server.on('listening', onListening);
/**
* Normalize a port into a number, string, or false.
*/
function normalizePort(val) {
var port = parseInt(val, 10);
if (isNaN(port)) {
// named pipe
return val;
}
if (port >= 0) {
// port number
return port;
}
return false;
}
/**
* Event listener for HTTP server "error" event.
*/
function onError(error) {
if (error.syscall !== 'listen') {
throw error;
}
var 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;
}
}
/**
* Event listener for HTTP server "listening" event.
*/
function onListening() {
var addr = server.address();
var bind = typeof addr === 'string'
? 'pipe ' + addr
: 'port ' + addr.port;
debug('Listening on ' + bind);
}

@ -0,0 +1,82 @@
type BingoMutation {
# creates a game of bingo and returns the game id
createGame(words: [String!]!, size: Int = 3): BingoGame
# submit a bingo to the active game session
submitBingo: Boolean
# toggle a word (heared or not) on the sessions grid
toggleWord(word: String, base64Word: String): BingoGrid
# set the username of the current session
setUsername(username: String!): BingoUser
}
type BingoQuery {
# Returns the currently active bingo game
gameInfo(id: ID): BingoGame
# If there is a bingo in the fields.
checkBingo: Boolean
# Returns the grid of the active bingo game
activeGrid: BingoGrid
}
type BingoGame {
# the id of the bingo game
id: ID!
# the words used in the bingo game
words: [String]!
# the size of the square-grid
gridSize: Int
# an array of players active in the bingo game
players(id: ID): [BingoUser]
# the player-ids that scored a bingo
bingos: [String]!
# if the game has already finished
finished: Boolean
}
type BingoUser {
# the id of the bingo user
id: ID!
# the id of the currently active bingo game
game: ID
# the name of the user
username: String
}
type BingoGrid {
# the grid represented as string matrix
wordGrid: [[String]]!
# the grid represented as bingo field matrix
fieldGrid: [[BingoField]]!
# if there is a bingo
bingo: Boolean
}
type BingoField {
# the word contained in the bingo field
word: String
# if the word was already heared
submitted: Boolean!
base64Word: String
}

@ -0,0 +1,11 @@
# import BingoMutation from 'bingo.graphql'
# import BingoQuery from 'bingo.graphql'
type Query {
time: String
bingo: BingoQuery
}
type Mutation {
bingo: BingoMutation
}

3008
package-lock.json generated

File diff suppressed because it is too large Load Diff

@ -9,12 +9,16 @@
"cookie-parser": "~1.4.4",
"debug": "~2.6.9",
"express": "~4.16.1",
"express-compile-sass": "latest",
"express-graphql": "^0.8.0",
"express-session": "latest",
"fs-extra": "^7.0.1",
"graphql": "^14.3.0",
"graphql-import": "^0.7.1",
"http-errors": "~1.6.3",
"js-yaml": "latest",
"morgan": "~1.9.1",
"pug": "2.0.0-beta11",
"express-compile-sass": "latest",
"express-session": "latest",
"js-yaml": "latest"
"node-sass": "^4.12.0",
"pug": "2.0.0-beta11"
}
}

@ -14,10 +14,15 @@ async function submitBingoWords() {
}
async function submitUsername() {
let username = document.querySelector('#username-input').value;
let unameInput = document.querySelector('#username-input');
let username = unameInput.value;
let response = await postLocData({
username: username
});
unameInput.value = '';
unameInput.placeholder = username;
document.querySelector('#username-form').remove();
document.querySelector('.greyover').remove();
console.log(response);
}
@ -31,12 +36,15 @@ async function submitWord(word) {
let data = JSON.parse(response.data);
for (let row of data.fieldGrid) {
for (let field of row) {
document.querySelector(`.bingo-word-panel[b-word="${field.word}"]`)
.setAttribute('b-sub', field.submitted);
document.querySelectorAll(`.bingo-word-panel[b-word="${field.base64Word}"]`).forEach(x => {
x.setAttribute('b-sub', field.submitted);
});
}
}
if (data.bingo) {
document.querySelector('#bingo-button').setAttribute('class', '');
} else {
document.querySelector('#bingo-button').setAttribute('class', 'hidden');
}
}

@ -9,14 +9,43 @@ textarea
display: block
margin: 1rem
border-radius: 0
height: 50%
width: 50%
font-size: 15pt
font-size: 0.8em
@media(max-device-width: 641px)
textarea
height: 80%
width: calc(100% - 2rem)
#words-container
width: 100%
height: 80%
@media(min-device-width: 641px)
textarea
height: 80%
width: 50%
#words-container
width: 100%
height: 88%
.number-input
width: 4rem
margin: 1rem
#bingoheader
display: table
width: 100%
div
display: table-cell
text-align: start
.stretchDiv
text-align: end
button
max-width: calc(100% - 2rem)
padding: 0.7rem 2rem
#words-container
display: table
@ -26,9 +55,18 @@ textarea
.bingo-word-panel
@include default-element
display: table-cell
padding: 3rem
padding: 1rem
transition-duration: 0.3s
max-width: 15rem
border-radius: 0
border-collapse: collapse
text-align: center
vertical-align: middle
span
vertical-align: middle
display: inline-block
word-break: break-word
.bingo-word-panel:hover
background-color: darken($primary, 2%)
@ -40,6 +78,32 @@ textarea
.bingo-word-panel[b-sub="true"]
background-color: forestgreen
#bingo-button
transition-duration: 0.8s
#username-form
@include default-element
position: fixed
display: block
height: calc(50% - 1rem)
width: calc(40% - 1rem)
top: 25%
left: 30%
text-align: center
vertical-align: middle
padding: 1rem
z-index: 1000
button
cursor: pointer
input[type='text']
cursor: text
#username-form *
display: inline-block
vertical-align: middle
.popup
@include default-element
height: 5%

@ -5,3 +5,4 @@
color: $primarySurface
border: 2px solid $primarySurface
border-radius: $borderRadius
transition-duration: 0.2s

@ -2,16 +2,39 @@
@import classes
@import mixins
@media (min-device-width: 320px)
html
font-size: 4.5vw
@media (min-device-width: 481px)
html
font-size: 4vw
@media (min-device-width: 641px)
html
font-size: 4vw
@media (min-device-width: 961px)
html
font-size: 3vw
@media (min-device-width: 1025px)
html
font-size: 2vw
@media (min-device-width: 1281px)
html
font-size: 1.5vw
body
background-color: $primary
color: $primarySurface
font-size: 18pt
font-family: Arial, sans-serif
button
@include default-element
font-size: 20pt
padding: 10px
font-size: 1.2rem
padding: 0.7rem
transition-duration: 0.2s
button:hover
@ -23,6 +46,6 @@ button:active
input
@include default-element
font-size: 20pt
font-size: 1.2rem
background-color: lighten($primary, 10%)
padding: 9px
padding: 0.7rem

@ -30,29 +30,55 @@ class BingoSession {
let id = user.id;
this.users[id] = user;
}
/**
* Graphql endpoint
* @param args {Object} - the arguments passed on the graphql interface
* @returns {any[]|*}
*/
players(args) {
if (args.id)
return [this.users[args.id]];
else
return Object.values(this.users);
}
}
class BingoUser {
/**
* Bingo User class to store user information
*/
constructor() {
this.id = generateBingoId();
this.game = null;
this.username = 'anonymous';
this.grids = {};
this.submittedWords = {};
}
}
class BingoWordField {
/**
* Represents a single bingo field with the word an the status.
* It also holds the base64-encoded word.
* @param word
*/
constructor(word) {
this.word = word;
this.base64Word = Buffer.from(word).toString('base64');
this.submitted = false;
}
}
class BingoGrid {
/**
* Represents the bingo grid containing all the words.
* @param wordGrid
* @returns {BingoGrid}
*/
constructor(wordGrid) {
this.wordGrid = wordGrid;
this.fieldGrid = wordGrid.map(x => x.map(y => new BingoWordField(y)));
this.bingo = false;
return this;
}
}
@ -74,6 +100,20 @@ function shuffleArray(array) {
return array;
}
/**
* Inflates an array to a minimum Size
* @param array {Array} - the array to inflate
* @param minSize {Number} - the minimum size that the array needs to have
* @returns {Array}
*/
function inflateArray(array, minSize) {
let resultArray = array;
let iterations = Math.ceil(minSize/array.length);
for (let i = 0; i < iterations; i++)
resultArray = [...resultArray, ...resultArray];
return resultArray
}
/**
* Generates an id for a subreddit download.
* @returns {string}
@ -89,7 +129,7 @@ function generateBingoId() {
* @returns {BingoGrid}
*/
function generateWordGrid(dimensions, words) {
let shuffledWords = shuffleArray(words);
let shuffledWords = shuffleArray(inflateArray(words, dimensions[0]*dimensions[1]));
let grid = [];
for (let x = 0; x < dimensions[1]; x++) {
grid[x] = [];
@ -102,19 +142,17 @@ function generateWordGrid(dimensions, words) {
/**
* Sets the submitted parameter of the words in the bingo grid that match to true.
* @param word {String}
* @param bingoGrid {BingoGrid}
* @param base64Word {String} - base64 encoded bingo word
* @param bingoGrid {BingoGrid} - the grid where the words are stored
* @returns {boolean}
*/
function submitWord(word, bingoGrid) {
let results = bingoGrid.fieldGrid.find(x => x.find(y => (y.word === word))).find(x => x.word === word);
if (results) {
(results instanceof Array)? results.forEach(x => {x.submitted = true}): results.submitted = true;
checkBingo(bingoGrid);
return true;
}
return false;
function toggleHeared(base64Word, bingoGrid) {
for (let row of bingoGrid.fieldGrid)
for (let field of row)
if (base64Word === field.base64Word)
field.submitted = !field.submitted;
checkBingo(bingoGrid);
return true;
}
/**
@ -146,8 +184,10 @@ function checkBingo(bingoGrid) {
bingoCheck = true;
for (let field of row)
bingoCheck = field && bingoCheck;
if (bingoCheck)
break;
if (bingoCheck) {
bingoGrid.bingo = true;
return true;
}
}
if (bingoCheck) {
bingoGrid.bingo = true;
@ -159,13 +199,16 @@ function checkBingo(bingoGrid) {
bingoCheck = true;
for (let j = 0; j < fg.length; j++)
bingoCheck = fg[j][i] && bingoCheck;
if (bingoCheck)
break;
if (bingoCheck) {
bingoGrid.bingo = true;
return true;
}
}
if (bingoCheck) {
bingoGrid.bingo = true;
return true;
}
bingoGrid.bingo = false;
return false;
}
@ -191,7 +234,7 @@ router.get('/', (req, res) => {
if (!bingoUser.grids[gameId]) {
bingoUser.grids[gameId] = generateWordGrid([bingoSession.gridSize, bingoSession.gridSize], bingoSession.words);
}
res.render('bingo/bingo-game', {grid: bingoUser.grids[gameId].wordGrid, username: bingoUser.username});
res.render('bingo/bingo-game', {grid: bingoUser.grids[gameId].fieldGrid, username: bingoUser.username});
} else {
res.render('bingo/bingo-submit');
}
@ -226,12 +269,9 @@ router.post('/', (req, res) => {
} else if (data.game) {
res.send(bingoSessions[data.game]);
} else if (data.bingoWord) {
if (!bingoUser.submittedWords[gameId])
bingoUser.submittedWords[gameId] = [];
bingoUser.submittedWords[gameId].push(data.bingoWord);
console.log(typeof bingoUser.grids[gameId]);
if (bingoUser.grids[gameId])
submitWord(data.bingoWord, bingoUser.grids[gameId]);
toggleHeared(data.bingoWord, bingoUser.grids[gameId]);
res.send(bingoUser.grids[gameId]);
} else if (data.bingo) {
if (checkBingo(bingoUser.grids[gameId])) {
@ -239,7 +279,7 @@ router.post('/', (req, res) => {
bingoSession.bingos.push(bingoUser.id);
bingoSession.finished = true;
setTimeout(() => { // delete the finished game after five minutes
delete bingoSessions[game.id];
delete bingoSessions[gameId];
}, 360000);
res.send(bingoSession);
} else {
@ -256,4 +296,68 @@ router.post('/', (req, res) => {
}
});
router.graphqlResolver = (req) => {
let bingoUser = req.session.bingoUser || new BingoUser();
let gameId = req.query.game || bingoUser.game || null;
let bingoSession = bingoSessions[gameId];
return {
// queries
gameInfo: (args) => {
if (args.id)
return bingoSessions[args.id];
else
return bingoSession;
},
checkBingo: (args) => {
return checkBingo(bingoUser.grids[gameId])
},
activeGrid: (args) => {
return bingoUser.grids[gameId];
},
// mutation
createGame: (args) => {
let words = args.words;
let size = args.size;
let game = new BingoSession(words, size);
bingoSessions[game.id] = game;
setTimeout(() => { // delete the game after one day
delete bingoSessions[game.id];
}, 86400000);
return game;
},
submitBingo: (args) => {
if (checkBingo(bingoUser.grids[gameId])) {
if (!bingoSession.bingos.includes(bingoUser.id))
bingoSession.bingos.push(bingoUser.id);
bingoSession.finished = true;
setTimeout(() => { // delete the finished game after five minutes
delete bingoSessions[gameId];
}, 360000);
return true;
} else {
return false;
}
},
toggleWord: (args) => {
if (args.word || args.base64Word) {
args.base64Word = args.base64Word || Buffer.from(args.word).toString('base-64');
if (bingoUser.grids[gameId])
toggleHeared(args.base64Word, bingoUser.grids[gameId]);
return bingoUser.grids[gameId];
}
},
setUsername: (args) => {
if (args.username) {
bingoUser.username = args.username;
bingoSession.addUser(bingoUser);
return bingoUser;
}
}
};
};
module.exports = router;

@ -1,13 +1,15 @@
include bingo-layout
block content
div(id='username-form')
input(type='text', id='username-input', placeholder='username', value=username)
button(onclick='submitUsername()') Set Username
button(id='bingo-button' onclick='submitBingo()', class='hidden') Bingo!
if username === 'anonymous'
div(class='greyover')
div(id='username-form')
input(type='text', id='username-input', placeholder=username)
button(onclick='submitUsername()') Set Username
div(id='words-container')
each val in grid
div(class='bingo-word-row')
each word in val
div(class='bingo-word-panel', onclick=`submitWord('${word}')`, b-word=word, b-sub='false')
span= word
each field in val
div(class='bingo-word-panel', onclick=`submitWord('${field.base64Word}')`, b-word=field.base64Word, b-sub='false')
span= field.word
button(id='bingo-button' onclick='submitBingo()', class='hidden') Bingo!

@ -3,6 +3,5 @@ html
include ../includes/head
script(type='text/javascript', src='/javascripts/bingo-web.js')
link(rel='stylesheet', href='/sass/bingo/style.sass')
body
block content

@ -2,8 +2,11 @@ extends bingo-layout
block content
div(id='bingoform')
input(type='number', id='bingo-grid-size', class='number-input', value=3, min=1, max=8)
span x
span(id='bingo-grid-y', class='number-input') 3
button(onclick='submitBingoWords()') Submit
div(id='bingoheader')
div
input(type='number', id='bingo-grid-size', class='number-input', value=3, min=1, max=8)
span x
span(id='bingo-grid-y', class='number-input') 3
div(class='stretchDiv')
button(onclick='submitBingoWords()') Submit
textarea(id='bingo-textarea', placeholder='Bingo Words')
Loading…
Cancel
Save