-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
#130341363 Add In-game chat feature (#24)
* chore(readme-update): update read me with new relevant info Finishes #130373385 * feature(chat): in game chat - Add branch for creating in game chat. Start #130341363 * feature(chat):in game chat Includes firebase reference and setup in foot.jade add reference to css file in head.jade add router to redirect to the game chat screen add a game-chat controller add a game chat service add test for the game-chat Start #130341363 * feature(chat): in game chat - Add images for the chat widget - Correct padding for elenents of the chat #130341363 * feature(chat): in game chat - Integrate front end with controller - Implment <user> is typing feature - Implement auto scroll to the newest chat #130341363 * feature(chat): in game chat -Remove border from message input in chat window #130341363 * feature(chat): in game chat -Update foot.jade to reference the firebase lib -update bower dependency to reference firebase -update karma.conf.js to be aware of firebase lib Start #130341363 * feature(chat): in game Refactor game-chat controller and integrate it to frontend Refactor gamechat factory, add isTyping functionality Complete writing tests for game-chat controller and game-chat factory Start #130341363 * feature(chat): in game -Resolve conflict in css file -Update game.tpl.html to remove Doctype template -Update game-chat.js controller to send message when enter key is pressed Start #130341363 * feature(chat): in game chat -Fix broken package.json Start #130341363 * feature(chat): in game chat Add fix for travis build failure 130341363 * feature(chat): in game chat Fix travis build failure 130341363 * feature(chat): in game chat Resolve HoundCI reported issues Start 130341363 * feature(chat): in-game-chat - Convert css to sass/scss - add folder to gulp task #130341363 * merge * feature(chat): in-game-chat - Make chat fixed with no retracting feature. - Change color to blue #130341363 * feature(chat): in-game-chat - Make changes to pass hound test. #130341363 * Hound Changes * Fix Chat Text * feature(chat): in game chat Update karma.conf.js to load socket.io.js Update app.js to add mean.system as dependency Add socket.io.js library 130341363 * feature(chat): in game chat Separate controller test and service test 130341363 * feature(chat): in game chat Remove hardcoded values in game-chat controller Add isTyping feature to controller Add Jquery code to controller Fix typo error in game-chat service Remove jquery code from game.tpl.html 130341363 * feature(chat): in game chat Mock the game service in the game-chat-ctrl.test.js Remove the socket.io.js library 130341363 * feature(game): in-game-chat - Remove css files from repo and from being tracked. - Create seperate scss file for variables called variables.scss #130341363 * feature(game): in-game-chat - Make Hound Changes. #130341363
- Loading branch information
1 parent
1e3afa4
commit 8dd0c7e
Showing
18 changed files
with
695 additions
and
4 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,150 @@ | ||
| @import "variable"; | ||
|
|
||
| .chat-box { | ||
| background: $main-color; | ||
| bottom: 0; | ||
| color: $primary-text; | ||
| height: 100%; | ||
| position: absolute; | ||
| right: 0; | ||
| text-align: center; | ||
| width: 100%; | ||
|
|
||
| .box { | ||
| background: $main-color; | ||
| border: thin solid $ascent; | ||
| border-radius: $box-radius; | ||
| bottom: 2px; | ||
| height: 360px; | ||
| position: absolute; | ||
| width: 300px; | ||
| z-index: 1; | ||
| } | ||
|
|
||
| .chat-messages { | ||
| height: 280px; | ||
| overflow-y: scroll; | ||
| } | ||
|
|
||
| .chat-top { | ||
| background: $ascent; | ||
| border-color: $secondary-text; | ||
| color: $main-color; | ||
| height: 20px; | ||
| top: 0; | ||
| } | ||
|
|
||
| .chat { | ||
| background: $url-0; | ||
| border: thin solid; | ||
| border-bottom: 0; | ||
| border-radius: $box-radius; | ||
| bottom: 0; | ||
| color: $primary-text; | ||
| height: 35px; | ||
| position: absolute; | ||
| width: 300px; | ||
| z-index: 2; | ||
| } | ||
|
|
||
| .chat-bottom { | ||
| background-color: $main-color; | ||
| bottom: 5px; | ||
| box-shadow: ($grey-shadow-radius, $grey-shadow-75); | ||
| display: inline-block; | ||
| height: 35px; | ||
| padding: $chat-bottom-padding; | ||
| position: absolute; | ||
| right: 0; | ||
| text-align: left; | ||
| width: 297px; | ||
| } | ||
|
|
||
| .message { | ||
| display: inline-block; | ||
| height: 35px; | ||
| padding-left: 5px; | ||
| padding-right: 5px; | ||
| position: relative; | ||
| top: 0; | ||
| width: 220px; | ||
| } | ||
| } | ||
|
|
||
| .close-chat { | ||
| background: $ascent; | ||
| border: thin solid $ascent; | ||
| border-width: thin; | ||
| bottom: 0; | ||
| height: 2px; | ||
| position: absolute; | ||
| width: 300px; | ||
| z-index: 1; | ||
| } | ||
|
|
||
| li { | ||
| &.chat-li { | ||
| border-bottom: 1px; | ||
| border-bottom-style: solid; | ||
| border-bottom-width: thin; | ||
| border-color: $secondary-light; | ||
| display: inline-block; | ||
| margin-bottom: 5px; | ||
| min-height: 50px; | ||
| width: 270px; | ||
| } | ||
|
|
||
| img { | ||
| float: left; | ||
| margin-right: 10px; | ||
| width: 42px; | ||
| } | ||
| } | ||
|
|
||
| ul { | ||
| &.chat-ul { | ||
| padding-left: 10px; | ||
| padding-right: 5px; | ||
| text-align: left; | ||
| } | ||
| } | ||
|
|
||
| .chat-side-text { | ||
| text-align: left; | ||
| width: 270px; | ||
| } | ||
|
|
||
|
|
||
| .chat-name { | ||
| font-size: 15px; | ||
| font-style: oblique; | ||
| margin: 0; | ||
| padding: 0; | ||
| text-align: left; | ||
| } | ||
|
|
||
| .chat-text { | ||
| color: $secondary-text; | ||
| font-size: 12px; | ||
| margin: 0; | ||
| overflow-x: auto; | ||
| padding: 0; | ||
| text-align: left; | ||
| } | ||
|
|
||
| .chat-time { | ||
| color: $secondary-text; | ||
| font-size: 10px; | ||
| margin-left: 5px; | ||
| } | ||
|
|
||
| .is-typing { | ||
| color: $secondary-text; | ||
| float: left; | ||
| font-size: 10px; | ||
| } | ||
|
|
||
| .chat-sign { | ||
| display: block; | ||
| padding: 2px; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,14 @@ | ||
| $main-color: #fff; | ||
| $primary-text: #000; | ||
| $secondary-text: #444; | ||
| $ascent: #006ce5; | ||
| $secondary-light: #d6d6d6; | ||
| $black-shadow-radius: 0 -2px 5px 0; | ||
| $black-shadow-75: rgba(0, 0, 0, 0.75); | ||
| $grey-shadow-radius: 0 -1px 2px 0; | ||
| $grey-shadow-75: rgba(65, 65, 65, 0.75); | ||
| $box-radius: 5px 5px 0 0; | ||
| $chat-bottom-padding: 0 5px 0 10px; | ||
|
|
||
| $url-0: url("../img/chatnone1.png"); | ||
| $url-1: url("../img/chatnone.png"); |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,106 @@ | ||
| 'use strict'; | ||
| angular.module('mean.gameChat') | ||
| .controller('GameChatCtrl', function ($scope, GameChat, game, Global) { | ||
| $scope.gameId = game.gameID; | ||
| $scope.users = game.players; | ||
| $scope.currentUser = Global.user; | ||
|
|
||
| $scope.GameChat = GameChat; | ||
| $scope.messages = {}; | ||
|
|
||
| $scope.newMessage = function(messages) { | ||
| $scope.messages = messages; | ||
| $scope.$apply(); | ||
| }; | ||
|
|
||
| $scope.sendMessage = function() { | ||
| return $scope.GameChat.sendMessage($scope.message, $scope.gameId, $scope.currentUser); | ||
| }; | ||
|
|
||
| //triggerIsTyping : function($scope.gameId, typist){ | ||
| $scope.showIsTyping = function(){ | ||
| //we need to make the user unique for same user so the listener is triggered | ||
| $scope.currentUser.rand = Math.ceil(Math.random() * 10000); | ||
| $scope.GameChat.triggerIsTyping($scope.gameId, $scope.currentUser); | ||
| }; | ||
|
|
||
| var firstCheck = false, waitTime = 2, timer; | ||
| $scope.typingListener = function(typist){ | ||
|
|
||
| if (firstCheck) { | ||
| waitTime = 2; | ||
| clearInterval(timer); | ||
| if ($scope.currentUser.name !== typist.name) { | ||
| $('#isTyping').html(typist.name + ' is typing...'); | ||
| } | ||
|
|
||
| timer = setInterval(function() { | ||
| waitTime--; | ||
| if(waitTime === 0){ | ||
| $('#isTyping').html(''); | ||
| clearInterval(timer); | ||
| } | ||
| }, 1000); | ||
|
|
||
| } | ||
| firstCheck = true; | ||
| }; | ||
|
|
||
| /* | ||
| *Checks if a game chat session already exists | ||
| */ | ||
| $scope.GameChat.sessionExists($scope.gameId) | ||
| .then(function() { | ||
| // Loads message from that section | ||
| $scope.GameChat.loadMessages($scope.gameId) | ||
| .then(function(messages) { | ||
| $scope.messages = messages; | ||
| $scope.$apply(); | ||
| //Listen for new incoming message | ||
| $scope.GameChat.listenForMessage($scope.gameId, function(messages){ | ||
| $scope.newMessage(messages); | ||
| }); | ||
|
|
||
| //Listen for user typing | ||
| $scope.GameChat.listenForTyping($scope.gameId, $scope.typingListener); | ||
| }); | ||
| }) | ||
| .catch(function(){ | ||
| //No game chat session existed before | ||
| $scope.GameChat.startSession($scope.gameId, $scope.users).then(function(){ | ||
| //now listen for messages | ||
| $scope.GameChat.listenForMessage($scope.gameId, function(messages){ | ||
| $scope.newMessage(messages); | ||
| }); | ||
|
|
||
| //Listen for user typing | ||
| $scope.GameChat.listenForTyping($scope.gameId, $scope.typingListener); | ||
| }); | ||
| }); | ||
|
|
||
| $(document).ready( function () { | ||
| var scrolled = 100000, messageInput = $('#message'); | ||
| messageInput.keyup(function(){ | ||
| $scope.showIsTyping(); | ||
| }); | ||
|
|
||
| $('#send').click( function () { | ||
| $('#message').val(''); | ||
| $('#chatMessages').animate({ | ||
| scrollTop: scrolled | ||
| }); | ||
| }); | ||
|
|
||
| messageInput.keypress(function (e) { | ||
| if(e.which === 13) { | ||
| $scope.sendMessage(); | ||
| $('#message').val(''); | ||
| $('#chatMessages').animate({ | ||
| scrollTop: scrolled | ||
| }); | ||
| } | ||
| }); | ||
|
|
||
| }); | ||
|
|
||
| }); |
Oops, something went wrong.