diff --git a/README.markdown b/README.markdown index 315cc3a1..35d1395d 100644 --- a/README.markdown +++ b/README.markdown @@ -39,7 +39,7 @@ my goal was to avoid buttons and ui (almost everything is edit in place or dragg how to install and run on your own computer (linux/osx) ------------------------------------------------------- -- [install redis](http://redis.io/download) (last tested on v2.8.4) +- [install redis](http://redis.io/download) (last tested on v2.8.4) (Not required if using file based JSON saving) - [install node.js](http://nodejs.org/) (last tested on v0.10.30) - install npm (if you're running node.js [v0.6.3](https://github.com/joyent/node/commit/b159c6) or newer it's already installed!) - cd to the scrumblr directory; you should see server.js and config.js and other files. diff --git a/client/css/bigcards.css b/client/css/bigcards.css index fceed9a6..d3de4ca3 100644 --- a/client/css/bigcards.css +++ b/client/css/bigcards.css @@ -1,6 +1,6 @@ .card { - width: 230px; - height: 152px; + width: 277px; + height: 183px; xpadding: 5px; float: left; xmargin: 0 10px 10px 0; font-size: .9em; @@ -43,12 +43,12 @@ .content { overflow: hidden; display: block; - width: 158px; - height: 88px; - margin: 5px 23px 0px 34px; + width: 190px; + height: 106px; + margin: 5px 23px 0px 43px; font-family: 'Covered By Your Grace',"Arial Rounded MT Bold", arial, serif; - font-size: 18px; + font-size: 19px; letter-spacing: 0px; xtext-shadow: 0px 0px 1px #444; diff --git a/client/css/mediumcards.css b/client/css/mediumcards.css new file mode 100644 index 00000000..fceed9a6 --- /dev/null +++ b/client/css/mediumcards.css @@ -0,0 +1,75 @@ +.card { + width: 230px; + height: 152px; + xpadding: 5px; float: left; + xmargin: 0 10px 10px 0; + font-size: .9em; + + + + overflow: hidden; + + position: absolute; + z-index: 10; + + top: 460px; + left: 0px; + + display: block; +} + +.pink { +} + +.yellow { +} + +.blue { +} + +.green { +} + +.card-image { + position: absolute; + xtop: -10; + left: -3px; + width: 100%; + height: 100%; + overflow: hidden; + z-index: -1000; +} + +.content { + overflow: hidden; + display: block; + width: 158px; + height: 88px; + margin: 5px 23px 0px 34px; + + font-family: 'Covered By Your Grace',"Arial Rounded MT Bold", arial, serif; + font-size: 18px; + letter-spacing: 0px; + + xtext-shadow: 0px 0px 1px #444; + + opacity: 1; + + color: black; + text-align: center; + padding-top: 18px; + xline-height: 16px; + + xopacity: .8; + +} + +.filler { + margin-right: 34px; + margin-bottom: 42px; + margin-left: 25px; +} + +.stickertarget { + position: absolute; +} diff --git a/client/css/style.css b/client/css/style.css index 34bb56b6..dee2cb75 100644 --- a/client/css/style.css +++ b/client/css/style.css @@ -76,6 +76,16 @@ body { xborder: solid rgba(92, 157, 181,0.5) 3px; } +#password-form input, #lock-form input, #lock-form button { + font-family: roboto; + font-size: 16px; + padding: 10px; + margin: 5px; + border-radius: 5px; + border: none; + box-shadow: none; +} + .card-icon { display:none; @@ -210,7 +220,18 @@ h2 { } .buttons { - float: left; + position: fixed; + z-index: 1000; + top: 15px; + right: 15px; + padding: 10px; + background: white; + border-radius: 5px; + opacity: 0.5; +} + +.buttons:hover { + opacity: 0.95; } .names { diff --git a/client/fonts/stylesheet.css b/client/fonts/stylesheet.css index d71f5c02..8ad017dd 100755 --- a/client/fonts/stylesheet.css +++ b/client/fonts/stylesheet.css @@ -10,6 +10,5 @@ url('GoodDog-webfont.svg#webfonthc2mR75o') format('svg'); font-weight: normal; font-style: normal; - } diff --git a/client/script.js b/client/script.js index fc288b0f..16884dac 100644 --- a/client/script.js +++ b/client/script.js @@ -1,7 +1,10 @@ var cards = {}; var totalcolumns = 0; var columns = []; +var requiredPassword = null; +var passwordAttempts = 0; var currentTheme = "bigcards"; +var currentFont = null; var boardInitialized = false; var keyTrap = null; @@ -78,12 +81,17 @@ function getMessage(m) { case 'roomAccept': //okay we're accepted, then request initialization //(this is a bit of unnessary back and forth but that's okay for now) - sendAction('initializeMe', null); + sendAction('initializeMe'); break; case 'roomDeny': //this doesn't happen yet break; + + case 'requirePassword': + initPasswordForm(false); + requiredPassword = data; + break; case 'moveCard': moveCard($("#" + data.id), data.position); @@ -122,6 +130,10 @@ function getMessage(m) { case 'changeTheme': changeThemeTo(data); break; + + case 'changeFont': + changeFontTo(data); + break; case 'join-announce': displayUserJoined(data.sid, data.user_name); @@ -160,6 +172,88 @@ $(document).bind('keyup', function(event) { keyTrap = event.which; }); +// password functions +function initPasswordForm(attempt) { + + blockUI((attempt === true ? '

Invalid password!


' : '' ) + + '
'); + + $('#password-form').submit(function(event) { + event.preventDefault(); + + if (validatePassword($('#room-password').val()) === true) { + sendAction('passwordValidated', null); + } + }); + +} + +function initLockForm(attempt) { + + blockUI((attempt === true ? '

The passwords do not match!


' : '' ) + + '
' + + '
' + + '
' + + (requiredPassword !== null ? '' : '') + + '
'); + + $('#lock-form').submit(function(event) { + event.preventDefault(); + + var passwrd = $('#lock-password').val(); + var confirmPasswrd = $('#lock-password-confirm').val(); + + if (validateLock(passwrd, confirmPasswrd) === true) { + sendAction('setPassword', (passwrd !== null ? window.btoa(passwrd) : null)); + unblockUI(); + } + }); + + $('#lock-form').on('click', '#lock-cancel', function() { + sendAction('setPassword', null); + }); + + $('#lock-form').on('click', '#lock-remove', function() { + sendAction('clearPassword', null); + }); +} + +function validateLock(passwrd, confirmPasswrd) { + + if (passwrd == null || passwrd.length == 0) { + return true; + } + + if (passwrd != confirmPasswrd) { + initLockForm(true); + return false; + } + + requiredPassword = passwrd; + return true; +} + +function validatePassword(passwrd) { + + passwordAttempts++; + + if (passwordAttempts > 5) { + blockUI('

You have attempted to login too many times. Please return to the homepage


'); + return false; + } + + var modified = window.btoa(passwrd); + + if (requiredPassword == modified) { + return true; + } + + initPasswordForm(true); + return false; +} + + +// card functions function drawNewCard(id, text, x, y, rot, colour, sticker, animationspeed) { //cards[id] = {id: id, text: text, x: x, y: y, rot: rot, colour: colour}; @@ -177,6 +271,9 @@ function drawNewCard(id, text, x, y, rot, colour, sticker, animationspeed) { var card = $(h); card.appendTo('#board'); + + // Initialize any custom room font onto the card + changeFontTo(currentFont); //@TODO //Draggable has a bug which prevents blur event @@ -243,7 +340,7 @@ function drawNewCard(id, text, x, y, rot, colour, sticker, animationspeed) { hoverClass: 'card-hover-draggable' }); - var speed = Math.floor(Math.random() * 1000); + var speed = Math.floor(Math.random() * 800) + 200; if (typeof(animationspeed) != 'undefined') speed = animationspeed; var startPosition = $("#create-card").position(); @@ -529,6 +626,12 @@ function changeThemeTo(theme) { $("link[title=cardsize]").attr("href", "css/" + theme + ".css"); } +function changeFontTo(font) { + currentFont = font; + $(".card .content").css("font-family", font.family); + $(".card .content").css("font-size", font.size); +} + ////////////////////////////////////////////////////////// ////////// NAMES STUFF /////////////////////////////////// @@ -696,11 +799,16 @@ $(function() { .click(function() { var rotation = Math.random() * 10 - 5; //add a bit of random rotation (+/- 10deg) uniqueID = Math.round(Math.random() * 99999999); //is this big enough to assure uniqueness? + var x = (window.innerWidth / 2) + $(window).scrollLeft(); + var y = (window.innerHeight / 2) + $(window).scrollTop(); + + //alert(uniqueID); //alert(uniqueID); createCard( 'card' + uniqueID, '', - 58, $('div.board-outline').height(), // hack - not a great way to get the new card coordinates, but most consistant ATM + x, + y, rotation, randomCardColour()); }); @@ -709,24 +817,108 @@ $(function() { // Style changer $("#smallify").click(function() { - if (currentTheme == "bigcards") { - changeThemeTo('smallcards'); - } else if (currentTheme == "smallcards") { + + if (currentTheme == "smallcards") { + changeThemeTo('mediumcards'); + } else if (currentTheme == "mediumcards") { changeThemeTo('bigcards'); - } - /*else if (currentTheme == "nocards") - { - currentTheme = "bigcards"; - $("link[title=cardsize]").attr("href", "css/bigcards.css"); - }*/ + } else { + changeThemeTo('smallcards'); + } sendAction('changeTheme', currentTheme); return false; }); + + // Style changer + $("#fontify").click(function() { + + var font = currentFont; + + if (font != null) { + if (font.family == "Covered By Your Grace") { + font.family = 'Chela One'; + } else if (font.family == "Chela One") { + font.family = 'Gaegu'; + } else if (font.family == "Gaegu") { + font.family = 'Merienda'; + } else if (font.family == "Merienda") { + font.family = 'Oswald'; + } else if (font.family == "Oswald") { + font.family = 'Roboto'; + } else if (font.family == "Roboto") { + font.family = 'Ubuntu'; + } else { + font.family = 'Covered By Your Grace'; + } + } else { + font = { + family: 'Covered By Your Grace', + size: '12' + }; + } + + changeFontTo(font); + sendAction('changeFont', currentFont); + + return false; + }); + + // Increase card font size + $('#font-increase').click(function() { + + var font = currentFont; + + if (font != null) { + font.size = font.size + 1; + + if (font.size > 20) { + font.size = 8; + } + } else { + font = { + family: 'Covered By Your Grace', + size: 12 + }; + } + + changeFontTo(font); + sendAction('changeFont', currentFont); + return false; + }); + + // Decrease card font size + $('#font-decrease').click(function() { + + var font = currentFont; + + if (font != null) { + font.size = font.size - 1; + + if (font.size < 8) { + font.size = 22; + } + } else { + font = { + family: 'Covered By Your Grace', + size: 12 + }; + } + + changeFontTo(font); + sendAction('changeFont', currentFont); + return false; + }); + + // Setup a password + $('#protect-room').click(function() { + initLockForm(false); + return false; + }); $('#icon-col').hover( function() { diff --git a/lib/data/json.js b/lib/data/json.js new file mode 100644 index 00000000..e68a4b75 --- /dev/null +++ b/lib/data/json.js @@ -0,0 +1,313 @@ +var fs = require('fs'); + +var db = function(callback) { + + fs.writeFile('/cihwrk/ECPSScrumblr/save-data/write-test.txt', 'Should be deleted!', function(err) { + if(err) { + console.log(err); + } + }); + + fs.unlink('/cihwrk/ECPSScrumblr/save-data/write-test.txt', (err) => { + if (err) { + console.log(err); + } + // Remove comment if you want to create the demo room on startup + //callback(); + }); +}; + +db.prototype = { + clearRoom: function(room, callback) { + fs.unlink('/cihwrk/ECPSScrumblr/save-data' + room, function(err) { + if (err) { + console.log(err); + } + callback(); + }); + + }, + + // password commands + setPassword: function(room, theme) { + fs.writeFile('/cihwrk/ECPSScrumblr/save-data' + room + '/password.json', theme, function(err) { + if(err) { + console.log(err); + } + }); + }, + + getPassword: function(room, callback) { + fs.readFile('/cihwrk/ECPSScrumblr/save-data' + room + '/password.json', 'utf8', function (err, data) { + if (err) { + callback(null); + return console.log('No password.json file found to load for the room ' + room); + } + + callback(data); + }); + }, + + clearPassword: function(room, callback) { + fs.unlink('/cihwrk/ECPSScrumblr/save-data' + room + '/password.json', function(err) { + if (err) { + console.log(err); + } + if (typeof callback != "undefined" && callback !== null) callback(); + }); + }, + + // theme commands + setTheme: function(room, theme) { + fs.writeFile('/cihwrk/ECPSScrumblr/save-data' + room + '/theme.json', theme, function(err) { + if(err) { + console.log(err); + } + }); + }, + + getTheme: function(room, callback) { + fs.readFile('/cihwrk/ECPSScrumblr/save-data' + room + '/theme.json', 'utf8', function (err, data) { + if (err) { + callback(null); + return console.log('No theme.json file found to load for the room ' + room); + } + + callback(data); + }); + }, + + // font commands + setFont: function(room, font) { + fs.writeFile('/cihwrk/ECPSScrumblr/save-data' + room + '/font.json', JSON.stringify(font), function(err) { + if(err) { + console.log(err); + } + }); + }, + + getFont: function(room, callback) { + fs.readFile('/cihwrk/ECPSScrumblr/save-data' + room + '/font.json', 'utf8', function (err, data) { + if (err) { + callback(null); + return console.log('No font.json file found to load for the room ' + room); + } + + callback(JSON.parse(data)); + }); + }, + + // Column commands + createColumn: function(room, name, callback) { + if (fs.exists('/cihwrk/ECPSScrumblr/save-data' + room + '/columns.json')) { + + fs.readFile('/cihwrk/ECPSScrumblr/save-data' + room + '/columns.json', 'utf8', function (err, data) { + if (err) { + return console.log('Unable to read the columns.json file for the room ' + room); + } + + var columns = JSON.stringify(data); + columns.push(name); + + fs.writeFile('/cihwrk/ECPSScrumblr/save-data' + room + '/columns.json', JSON.stringify(columns), function(err) { + if(err) { + console.log(err); + } + + if (typeof callback != "undefined" && callback !== null) callback(); + }); + }); + } + }, + + getAllColumns: function(room, callback) { + fs.readFile('/cihwrk/ECPSScrumblr/save-data' + room + '/columns.json', 'utf8', function (err, data) { + if (err) { + callback([]); + return console.log('No columns.json file found to load for the room ' + room); + } + + callback(JSON.parse(data)); + }); + }, + + deleteColumn: function(room) { + if (fs.exists('/cihwrk/ECPSScrumblr/save-data' + room + '/columns.json')) { + + fs.readFile('/cihwrk/ECPSScrumblr/save-data' + room + '/columns.json', 'utf8', function (err, data) { + if (err) { + return console.log('Unable to read the columns.json file for the room ' + room); + } + + var columns = JSON.stringify(data); + columns.pop(); + + fs.writeFile('/cihwrk/ECPSScrumblr/save-data' + room + '/columns.json', JSON.stringify(columns), function(err) { + if(err) { + console.log(err); + } + + if (typeof callback != "undefined" && callback !== null) callback(); + }); + }); + } + }, + + setColumns: function(room, columns) { + fs.writeFile('/cihwrk/ECPSScrumblr/save-data' + room + '/columns.json', JSON.stringify(columns), function(err) { + if(err) { + console.log(err); + } + }); + }, + + // Card commands + createCard: function(room, id, card) { + var cardString = JSON.stringify(card); + + fs.writeFile('/cihwrk/ECPSScrumblr/save-data' + room + '/cards/' + id + '.json', cardString, function(err) { + if(err) { + console.log(err); + } + }); + }, + + getAllCards: function(room, callback) { + var dir = '/cihwrk/ECPSScrumblr/save-data' + room + '/cards'; + var cards = []; + + fs.readdir(dir, (err, files) => { + + if (err) { + // Attempt to make the card directory + console.log('Creating the save data directory for ' + room); + fs.mkdir('/cihwrk/ECPSScrumblr/save-data' + room); + fs.mkdir(dir); + } + + if (files == null || files.length == 0) { + callback(cards); + return console.log('There were no cards found to load for ' + room); + } + + files.forEach(file => { + + fs.readFile(dir + '/' + file, 'utf8', function (err, data) { + if (err) { + console.log(err); + } + + cards.push(JSON.parse(data)); + callback(cards); + }); + }); + }) + }, + + cardEdit: function(room, id, text) { + var dir = '/cihwrk/ECPSScrumblr/save-data' + room + '/cards/'; + + fs.readFile(dir + id + '.json', 'utf8', function (err, data) { + if (err) { + return console.log('Unable to locate the card ' + id + ' for the room ' + room); + } + + var card = JSON.parse(data); + if (card !== null) { + + card.text = text; + + fs.writeFile(dir + id + '.json', JSON.stringify(card), function(err) { + if(err) { + console.log(err); + } + }); + } + }); + }, + + cardSetXY: function(room, id, x, y) { + var dir = '/cihwrk/ECPSScrumblr/save-data' + room + '/cards/'; + + fs.readFile(dir + id + '.json', 'utf8', function (err, data) { + if (err) { + return console.log('Unable to locate the card ' + id + ' for the room ' + room); + } + + var card = JSON.parse(data); + if (card !== null) { + + card.x = x; + card.y = y; + + fs.writeFile(dir + id + '.json', JSON.stringify(card), function(err) { + if(err) { + console.log(err); + } + }); + } + }); + }, + + deleteCard: function(room, id) { + fs.unlink('/cihwrk/ECPSScrumblr/save-data' + room + '/cards/' + id + '.json', (err) => { + if (err) { + console.log(err); + } + }); + }, + + addSticker: function(room, cardId, stickerId) { + var dir = '/cihwrk/ECPSScrumblr/save-data' + room + '/cards/'; + + fs.readFile(dir + cardId + '.json', 'utf8', function (err, data) { + if (err) { + return console.log('Unable to locate the card ' + cardId + ' for the room ' + room); + } + + var card = JSON.parse(data); + if (card !== null) { + if (stickerId === "nosticker") { + card.sticker = null; + } else { + + var stickerSet = []; + + if (card.sticker !== null) { + stickerSet = card.sticker; + } + + stickerSet.push(stickerId); + card.sticker = stickerSet; + } + + fs.writeFile(dir + cardId + '.json', JSON.stringify(card), function(err) { + if(err) { + console.log(err); + } + }); + } + }); + }, + + setBoardSize: function(room, size) { + fs.writeFile('/cihwrk/ECPSScrumblr/save-data' + room + '/size.json', JSON.stringify(size), function(err) { + if(err) { + console.log(err); + } + }); + }, + + getBoardSize: function(room, callback) { + fs.readFile('/cihwrk/ECPSScrumblr/save-data' + room + "/size.json", 'utf8', function (err, data) { + if (err) { + callback(null); + return console.log('No size.json file found to load for the room ' + room); + } + + callback(JSON.parse(data)); + }); + } + +}; +exports.db = db; diff --git a/server.js b/server.js index 39d7a6fa..a2d909cd 100644 --- a/server.js +++ b/server.js @@ -119,6 +119,10 @@ io.sockets.on('connection', function (client) { case 'initializeMe': initClient(client); break; + + case 'passwordValidated': + initUser(client); + break; case 'joinRoom': joinRoom(client, message.data, function(clients) { @@ -128,6 +132,23 @@ io.sockets.on('connection', function (client) { }); break; + + case 'clearPassword': + getRoom( client, function(room) { + db.clearPassword(room, null); + }); + break; + + case 'setPassword': + + if (message.data === null || message.data.length == 0) { + break; + } + + getRoom( client, function(room) { + db.setPassword(room, message.data); + }); + break; case 'moveCard': //report to all other browsers @@ -178,7 +199,6 @@ io.sockets.on('connection', function (client) { break; case 'editCard': - clean_data = {}; clean_data.value = scrub(message.data.value); clean_data.id = scrub(message.data.id); @@ -264,6 +284,20 @@ io.sockets.on('connection', function (client) { broadcastToRoom( client, clean_message ); break; + + case 'changeFont': + clean_message = {}; + clean_message.data = message.data; + + getRoom( client, function(room) { + db.setFont( room, message.data ); + }); + + clean_message.action = 'changeFont'; + + broadcastToRoom( client, clean_message ); + break; + case 'setUserName': clean_message = {}; @@ -290,7 +324,6 @@ io.sockets.on('connection', function (client) { break; case 'setBoardSize': - var size = {}; size.width = scrub(message.data.width); size.height = scrub(message.data.height); @@ -303,7 +336,7 @@ io.sockets.on('connection', function (client) { break; default: - //console.log('unknown action'); + // console.log('unknown action'); break; } }); @@ -326,31 +359,21 @@ io.sockets.on('connection', function (client) { **************/ function initClient ( client ) { - //console.log ('initClient Started'); getRoom(client, function(room) { + + + db.getFont( room, function(font) { - db.getAllCards( room , function (cards) { - + if (font === null) font = {font: 'Covered By Your Grace', size: 12}; + client.json.send( { - action: 'initCards', - data: cards - } - ); - - }); - - - db.getAllColumns ( room, function (columns) { - client.json.send( - { - action: 'initColumns', - data: columns + action: 'changeFont', + data: font } ); }); - db.getTheme( room, function(theme) { if (theme === null) theme = 'bigcards'; @@ -374,6 +397,48 @@ function initClient ( client ) ); } }); + + db.getAllColumns ( room, function (columns) { + + client.json.send( + { + action: 'initColumns', + data: columns + } + ); + }); + + db.getPassword( room, function(passwrd) { + + if (passwrd !== null) { + client.json.send ( + { + action: 'requirePassword', + data: passwrd + } + ); + return; + } + + initUser(client); + }); + }); +} + +function initUser(client) { + + getRoom(client, function(room) { + + db.getAllCards( room , function (cards) { + + client.json.send( + { + action: 'initCards', + data: cards + } + ); + + }); roommates_clients = rooms.room_clients(room); roommates = []; @@ -391,14 +456,12 @@ function initClient ( client ) } } - //console.log('initialusers: ' + roommates); client.json.send( { action: 'initialUsers', data: roommates } ); - }); } @@ -470,6 +533,7 @@ function setUserName ( client, name ) function cleanAndInitializeDemoRoom() { + console.log('Initializing demo room'); // DUMMY DATA db.clearRoom('/demo', function() { db.createColumn( '/demo', 'Not Started' ); @@ -498,4 +562,4 @@ function cleanAndInitializeDemoRoom() // (runs only once on startup) var db = new data(function() { cleanAndInitializeDemoRoom(); -}); +}) \ No newline at end of file diff --git a/views/home.jade b/views/home.jade index c9374987..a3e8aebd 100644 --- a/views/home.jade +++ b/views/home.jade @@ -10,7 +10,7 @@ html(lang="en") title scrumblr body - h1 scrumblr by aliasaria + h1 scrumblr by aliasaria, modified by Jacob Culley div.board-outline div#board diff --git a/views/index.jade b/views/index.jade index f7a11021..566e3123 100644 --- a/views/index.jade +++ b/views/index.jade @@ -21,11 +21,20 @@ block body td#icon-col(width='1%') image#add-col.col-icon(width='20', height='20', src='images/icons/iconic/raster/black/plus_alt_32x32.png') image#delete-col.col-icon(width='20', height='20', src='images/icons/iconic/raster/black/minus_alt_32x32.png') - - + + div.buttons i#create-card.fa.fa-plus-circle.fa-2x.bottom-icon + br i#smallify.fa.fa-expand.fa-2x.bottom-icon + br + i#fontify.fa.fa-font.fa-2x.bottom-icon + br + i#font-increase.fa.fa-search-plus.fa-2x.bottom-icon + br + i#font-decrease.fa.fa-search-minus.fa-2x.bottom-icon + br + i#protect-room.fa.fa-eye-slash.fa-2x.bottom-icon div.stickers diff --git a/views/layout.jade b/views/layout.jade index 6897ff49..a914dae5 100644 --- a/views/layout.jade +++ b/views/layout.jade @@ -11,6 +11,7 @@ html(lang="en") +