From 380be2e3f65ec8f7e60afaa49370da156111bcd8 Mon Sep 17 00:00:00 2001 From: Chinazor Allen Date: Sat, 11 Feb 2017 16:23:25 +0100 Subject: [PATCH 1/3] Adding firebase CDN --- app/views/includes/foot.jade | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/app/views/includes/foot.jade b/app/views/includes/foot.jade index 46db28c..97414c9 100755 --- a/app/views/includes/foot.jade +++ b/app/views/includes/foot.jade @@ -43,5 +43,12 @@ script(type='text/javascript', src='/js/init.js') //Socket.io Client Library script(type='text/javascript', src='/socket.io/socket.io.js') +//Firebase JavaScript client library +script(type='text/javascript, src="https://cdn.firebase.com/js/client/2.0.6/firebase.js") + +//jquery +script(type='text/javascript, src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js") + + //Livereload script rendered //script(type='text/javascript', src='http://localhost:35729/livereload.js') \ No newline at end of file From b336e6ba607a8ffe9c7267f81fbab4ea1370943b Mon Sep 17 00:00:00 2001 From: Chinazor Allen Date: Mon, 13 Feb 2017 17:04:14 +0100 Subject: [PATCH 2/3] Chat App --- app/views/includes/foot.jade | 15 ++++++--- public/css/common.css | 3 +- public/css/common.scss | 2 ++ public/js/app.js | 11 ++++++- public/js/controllers/game.js | 9 ++++-- public/js/directives.js | 58 +++++++++++++++++++++++++++++------ public/views/app.html | 19 +----------- public/views/chat.html | 38 +++++++++++++++++++++++ server.js | 3 +- 9 files changed, 122 insertions(+), 36 deletions(-) create mode 100644 public/views/chat.html diff --git a/app/views/includes/foot.jade b/app/views/includes/foot.jade index 97414c9..b01278f 100755 --- a/app/views/includes/foot.jade +++ b/app/views/includes/foot.jade @@ -6,6 +6,14 @@ script. script(type='text/javascript', src='/lib/jquery/jquery.js') script(type='text/javascript', src='/lib/underscore/underscore-min.js') +//firebase init +script(type='text/javascript', src='https://www.gstatic.com/firebasejs/3.6.9/firebase.js') + +//Firebase JavaScript client library +script(type='text/javascript', src='https://cdn.firebase.com/js/client/2.4.0/firebase.js') +//- script(type='text/javascript', src='https://cdn.firebase.com/libs/angularfire/2.3.0/angularfire.min.js') + + //Bootstrap script(type='text/javascript', src='/lib/bootstrap/js/bootstrap.js') @@ -16,11 +24,13 @@ script(type='text/javascript', src='https://cdnjs.cloudflare.com/ajax/libs/mater script(type='text/javascript', src='https://code.angularjs.org/1.1.5/angular.js') script(type='text/javascript', src='https://code.angularjs.org/1.1.5/angular-resource.js') script(type='text/javascript', src='https://code.angularjs.org/1.1.5/angular-cookies.js') +//- script(type='text/javascript', src='https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js') //Angular UI script(type='text/javascript', src='/lib/angular-bootstrap/ui-bootstrap-tpls.js') script(type='text/javascript', src='/lib/angular-ui-utils/modules/route.js') + //Application Init script(type='text/javascript', src='/js/init.js') script(type='text/javascript', src='/js/app.js') @@ -43,11 +53,8 @@ script(type='text/javascript', src='/js/init.js') //Socket.io Client Library script(type='text/javascript', src='/socket.io/socket.io.js') -//Firebase JavaScript client library -script(type='text/javascript, src="https://cdn.firebase.com/js/client/2.0.6/firebase.js") - //jquery -script(type='text/javascript, src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js") +script(type='text/javascript', src='https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js') //Livereload script rendered diff --git a/public/css/common.css b/public/css/common.css index d99eea9..d1f660c 100644 --- a/public/css/common.css +++ b/public/css/common.css @@ -928,7 +928,8 @@ Messages top: 0; left: 0; height: 101%; - width: 100%; } + width: 100%; + overflow-y: scroll; } .messages .message { clear: both; float: left; diff --git a/public/css/common.scss b/public/css/common.scss index fba7edc..1ade42c 100644 --- a/public/css/common.scss +++ b/public/css/common.scss @@ -1425,6 +1425,7 @@ Messages left: 0; height: 101%; width: 100%; + overflow-y: scroll; } @@ -1656,3 +1657,4 @@ Message Box transition: all 1.5s; } } + diff --git a/public/js/app.js b/public/js/app.js index 642e444..a9dcfc3 100644 --- a/public/js/app.js +++ b/public/js/app.js @@ -36,7 +36,16 @@ angular.module('mean', ['ngCookies', 'ngResource', 'ui.bootstrap', 'ui.route', ' redirectTo: '/' }); } - ]).config(['$locationProvider', + ]).config([function () { + var config = { + apiKey: 'AIzaSyAAU_0vcioI8gYtO4XD3z3eSDz3wVYOmYs', + authDomain: 'cards-for-humanity-e3686.firebaseapp.com', + databaseURL: 'https://cards-for-humanity-e3686.firebaseio.com', + storageBucket: 'cards-for-humanity-e3686.appspot.com', + messagingSenderId: '324856728467' + }; + firebase.initializeApp(config); + }]).config(['$locationProvider', function($locationProvider) { $locationProvider.hashPrefix("!"); } diff --git a/public/js/controllers/game.js b/public/js/controllers/game.js index 4d44dbe..dbd7555 100644 --- a/public/js/controllers/game.js +++ b/public/js/controllers/game.js @@ -1,15 +1,19 @@ angular.module('mean.system') -.controller('GameController', ['$scope', 'game', '$timeout', '$location', 'MakeAWishFactsService', '$dialog', function ($scope, game, $timeout, $location, MakeAWishFactsService, $dialog) { +.controller('GameController', ['$scope', 'game', '$timeout', '$location', 'MakeAWishFactsService', '$dialog', '$window', function ($scope, game, $timeout, $location, MakeAWishFactsService, $dialog, $window) { $scope.hasPickedCards = false; $scope.winningCardPicked = false; $scope.showTable = false; $scope.modalShown = false; $scope.game = game; + $timeout(function(){ + $window.sessionStorage.setItem('gameID', game.gameID); + }, 500); + $scope.pickedCards = []; var makeAWishFacts = MakeAWishFactsService.getMakeAWishFacts(); $scope.makeAWishFact = makeAWishFacts.pop(); - $scope.pickCard = function(card) { + $scope.pickCard = function (card) { if (!$scope.hasPickedCards) { if ($scope.pickedCards.indexOf(card.id) < 0) { $scope.pickedCards.push(card.id); @@ -86,6 +90,7 @@ angular.module('mean.system') }; $scope.isPlayer = function($index) { + $window.sessionStorage.setItem('Username', game.players[game.playerIndex].username); return $index === game.playerIndex; }; diff --git a/public/js/directives.js b/public/js/directives.js index 445bba7..537ca06 100644 --- a/public/js/directives.js +++ b/public/js/directives.js @@ -3,7 +3,7 @@ angular.module('mean.directives', []) return { restrict: 'EA', templateUrl: '/views/player.html', - link: function (scope, elem, attr) { + link(scope, elem, attr) { scope.colors = ['#7CE4E8', '#FFFFa5', '#FC575E', '#F2ADFF', '#398EC4', '#8CFF95']; } }; @@ -16,8 +16,8 @@ angular.module('mean.directives', []) if (scope.game.state === 'winner has been chosen') { var curQ = scope.game.curQuestion; var curQuestionArr = curQ.text.split('_'); - var startStyle = ""; - var endStyle = ""; + var startStyle = ``; + var endStyle = ''; var shouldRemoveQuestionPunctuation = false; var removePunctuation = function (cardIndex) { var cardText = scope.game.table[scope.game.winningCard].card[cardIndex].text; @@ -37,7 +37,7 @@ angular.module('mean.directives', []) cardText = removePunctuation(1); curQuestionArr.splice(3, 0, startStyle + cardText + endStyle); } - curQ.text = curQuestionArr.join(""); + curQ.text = curQuestionArr.join(''); // Clean up the last punctuation mark in the question if there already is one in the answer if (shouldRemoveQuestionPunctuation) { if (curQ.text.indexOf('.', curQ.text.length - 2) === curQ.text.length - 1) { @@ -45,7 +45,7 @@ angular.module('mean.directives', []) } } } else { - curQ.text += ' ' + startStyle + scope.game.table[scope.game.winningCard].card[0].text + endStyle; + curQ.text += ` ${startStyle}${scope.game.table[scope.game.winningCard].card[0].text}${endStyle}`; } } }); @@ -55,19 +55,59 @@ angular.module('mean.directives', []) return { restrict: 'EA', templateUrl: '/views/question.html', - link: function (scope, elem, attr) { } + link(scope, elem, attr) { } }; }) .directive('timer', function () { return { restrict: 'EA', templateUrl: '/views/timer.html', - link: function (scope, elem, attr) { } + link(scope, elem, attr) { } + }; + }) + .directive('chat', function () { + return { + restrict: 'EA', + templateUrl: '/views/chat.html', + link: function(scope, elem, attr) { + $('#post').on('click', function () { + const database = firebase.database(); + const gameID = sessionStorage.getItem('gameID'); + const usernameInput = sessionStorage.getItem('Username'); + const textInput = document.querySelector('#text'); + var msgUser = usernameInput; + var msgText = textInput.value; + // replace myFirebase.set(...); with the next line + database.ref('msg').push({ username: msgUser, text: msgText }); + textInput.value = ''; + }); + + /** Function to add a data listener **/ + var startListening = function () { + firebase.database().ref('msg').on('child_added', function (snapshot) { + var msg = snapshot.val(); + var msgUsernameElement = $(''); + msgUsernameElement.html(msg.username); + var msgTextElement = $('

'); + msgTextElement.append(`${msgUsernameElement.text()}: `); + msgTextElement.append(msg.text); + + var msgElement = document.createElement('div'); + + msgElement.className = 'msg'; + $('#results').append(msgTextElement); + }); + }; + + // Begin listening for data + startListening(); + } }; - }).directive('landing', function () { + }) + .directive('landing', function () { return { restrict: 'EA', - link: function (scope, elem, attr) { + link(scope, elem, attr) { scope.showOptions = true; scope.showNavBar = true; diff --git a/public/views/app.html b/public/views/app.html index becded5..ff6baa8 100644 --- a/public/views/app.html +++ b/public/views/app.html @@ -59,24 +59,7 @@ -

- -
-
- -
-
-
-
-
- - -
-
- -
+
diff --git a/public/views/chat.html b/public/views/chat.html new file mode 100644 index 0000000..19a0460 --- /dev/null +++ b/public/views/chat.html @@ -0,0 +1,38 @@ + +
+ +
+
+ +
+
+
+ +
+
+
+ + +
+
+
+ + + + \ No newline at end of file diff --git a/server.js b/server.js index 309e112..8485324 100755 --- a/server.js +++ b/server.js @@ -67,4 +67,5 @@ console.log('Express app started on port ' + port); logger.init(app, passport, mongoose); //expose app -exports = module.exports = app; \ No newline at end of file +exports = module.exports = app; + From 8816041c48f341f21ae4b98c8c5e06d6c2654351 Mon Sep 17 00:00:00 2001 From: Chinazor Allen Date: Thu, 16 Feb 2017 19:48:32 +0100 Subject: [PATCH 3/3] Positioning Chat bubble --- public/css/common.css | 2 +- public/css/common.scss | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/public/css/common.css b/public/css/common.css index 97fcb93..432fdc2 100644 --- a/public/css/common.css +++ b/public/css/common.css @@ -934,7 +934,7 @@ Messages margin: 8px 0; font-size: 11px; line-height: 1.4; - margin-left: 100px; + margin-left: 20px; margin-right: 20px; position: relative; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); } diff --git a/public/css/common.scss b/public/css/common.scss index a179c8b..8c7c7d9 100644 --- a/public/css/common.scss +++ b/public/css/common.scss @@ -1425,7 +1425,7 @@ Messages margin: 8px 0; font-size: 11px; line-height: 1.4; - margin-left: 100px; + margin-left: 20px; margin-right: 20px; position: relative; text-shadow: 0 1px 1px rgba(0, 0, 0, .2);