Skip to content

Commit

Permalink
Merge pull request #14 from countcain/master
Browse files Browse the repository at this point in the history 
Merge Chat Widget
  • Loading branch information
@skyhit
skyhit committed May 30, 2014
2 parents bb61bbd + 104a382 commit d070d58
Show file tree
Hide file tree
Showing 13 changed files with 1,191 additions and 9 deletions.
415 changes: 413 additions & 2 deletions app/css/app.css
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion app/index.html
View file
Expand Up @@ -3,7 +3,7 @@
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="description" content="{{$state.current.data.pageTitle}}" />
<meta name="author" content="" />
<link rel="shortcut icon" href="img/favicon.ico" />
Expand Down
4 changes: 4 additions & 0 deletions app/js/app.js
View file
Expand Up @@ -60,6 +60,7 @@ controllers.errorCtrl = require('./controllers/errorCtrl');
controllers.userProfileCtrl = require('./controllers/userProfileCtrl');
controllers.leaderboardUsersCtrl = require('./controllers/leaderboardUsersCtrl');
controllers.activeContestsCtrl = require('./controllers/activeContestsCtrl');
controllers.chatAreaCtrl = require('./controllers/chatAreaCtrl');
controllers.userCodingCtrl = require('./controllers/userCodingCtrl');
controllers.userCodingEditorCtrl = require('./controllers/userCodingEditorCtrl');
controllers.userContestCtrl = require('./controllers/userContestCtrl');
Expand All @@ -78,6 +79,7 @@ controllers.userContestDetailCtrl = require('./controllers/userContestDetailCtrl
// load directives
directives.leaderboardusers = require('./directives/leaderboardusers');
directives.activecontests = require('./directives/activecontests');
directives.chatarea = require('./directives/chatarea');
directives.codingproblem = require('./directives/codingproblem');
directives.codingeditor = require('./directives/codingeditor');
directives.contestcountdown = require('./directives/contestcountdown');
Expand Down Expand Up @@ -126,6 +128,7 @@ main.controller('errorCtrl', controllers.errorCtrl);
main.controller('userProfileCtrl', controllers.userProfileCtrl);
main.controller('leaderboardUsersCtrl', controllers.leaderboardUsersCtrl);
main.controller('activeContestsCtrl', controllers.activeContestsCtrl);
main.controller('chatAreaCtrl', controllers.chatAreaCtrl);
main.controller('userCodingCtrl', controllers.userCodingCtrl);
main.controller('userCodingEditorCtrl', controllers.userCodingEditorCtrl);
main.controller('userContestCtrl', controllers.userContestCtrl);
Expand All @@ -147,6 +150,7 @@ main.controller('userContestDetailCtrl', controllers.userContestDetailCtrl);

main.directive('leaderboardusers', directives.leaderboardusers);
main.directive('activecontests', directives.activecontests);
main.directive('chatarea', directives.chatarea);
main.directive('codingproblem', directives.codingproblem);
main.directive('codingeditor', directives.codingeditor);
main.directive('contestcountdown', directives.contestcountdown);
Expand Down
346 changes: 346 additions & 0 deletions app/js/controllers/chatAreaCtrl.js
View file
@@ -0,0 +1,346 @@
'use strict';

//global chat area, module

var chatAreaCtrl = ['$scope', '$timeout', '$http', '$rootScope', '$modal', function($scope, $timeout, $http, $rootScope, $modal){

$scope.showRatingKey = true;
$scope.showRegistrant = false;
$scope.showMemberHere = true;

$http.get('data/profile-' + $rootScope.username() + '.json').success(function (data) {
$scope.userProfile = data;
$scope.whosHereArray.push({
name: $scope.userProfile.username,
rating: $scope.userProfile.rating
});
});

var rebuildAllScrollbar = function(){
$scope.$broadcast('rebuild:methods');
$scope.$broadcast('rebuild:members');
if(!$scope.collapseMemberHere)
$scope.$broadcast('rebuild:whosHere');
else
$scope.$broadcast('rebuild:registrants');
};

function systemNotification(){
// in current arena implementation, system will give a
// message after a user step in lobby
$timeout(function(){
$scope.chatContent.push({
text: "System> " + $scope.userProfile.username + " has entered the room.",
type: "system"
});
}, 500);

$timeout(function(){
$scope.chatContent.push({
text: "System>" + $scope.whosHereArray[3].name + " has left the room.",
type: "system"
});
$scope.whosHereArray.splice(3, 1);
}, 2000);

$timeout(function(){
$scope.whosHereArray.push({name: "Iron man", rating: 2499});
$scope.chatContent.push({
text: "System>" + $scope.whosHereArray[$scope.whosHereArray.length-1].name + " has entered the room.",
type: "system"
});
}, 3000);

$timeout(function(){
$scope.chatText = "Username 6> " + $scope.userProfile.username + ": Hi, I have some questions..." + " ";
$scope.chatContent.push({
text: $scope.chatText,
type: "general toMe"
});
$scope.chatText = "";
$scope.$broadcast('rebuild:chatboard');

// when all this done rebuild the scroll bar
rebuildAllScrollbar();
}, 4000);
}

systemNotification.call();

//initialize showRegistrant by directive's attribute, default to false, not to show the registrants section
this.init = function(registrantsConfig){
if(registrantsConfig !== undefined && registrantsConfig === "true")
$scope.showRegistrant = true;
};

// lobby dropdown
$scope.lobbyIdx = 0;
$scope.lobbiesArray = [
"Lobby1",
"Lobby2",
"Lobby3",
"Lobby4",
"Lobby5"
];
$scope.getLobbyName = function(lobbyIdx){
return $scope.lobbiesArray[lobbyIdx];
};
$scope.setLobby = function(index){
systemNotification.call();
$scope.whosHereArray.splice($scope.whosHereArray.length-1, 1);
$scope.chatContent = [];
$scope.lobbyIdx = index;
// reset the chatboard and whos here and registrant area.
$scope.$broadcast('rebuild:chatboard');
rebuildAllScrollbar();
};

// this function return the css class of rating value
$scope.getRatingClass = function(rating){
if (rating >= 2200)
return "rating-red";
else if (rating >= 1500)
return "rating-yellow";
else if (rating >= 1200)
return "rating-purple";
else if (rating >= 900)
return "rating-green";
else if (rating >= 1)
return "rating-grey";
else if (rating === 0)
return "rating-none";
else if (rating === -1)
return "rating-admin";
else
return "";
};

// array of rating key dropdown
$scope.ratingKeyArray = [
{name: "2200+", class: "rating-red"},
{name: "1500-2199", class: "rating-yellow"},
{name: "1200-1499", class: "rating-purple"},
{name: "0900-1199", class: "rating-green"},
{name: "0001-0899", class: "rating-grey"},
{name: "Non-Rated", class: "rating-none"},
{name: "Admin", class: "rating-admin"}
];
$scope.collapseRatingKey = false;

// array of who's Here
$scope.whosHereArray = [
{name: "Username1", rating: 2200},
{name: "Username2", rating: 2400},
{name: "Username3", rating: 1500},
{name: "Username4", rating: 2199},
{name: "Username5", rating: 1200},
{name: "Username6", rating: 1499},
{name: "Username7", rating: 900},
{name: "Username8", rating: 1199},
{name: "Username9", rating: 1},
{name: "Username10", rating: 899},
{name: "Username11", rating: 0},
{name: "Username12", rating: -1} //this is admin
];

var coderInfoModal;
$scope.showCoderInfo = function(index){
var coderInfo = {
username: $scope.whosHereArray[index].name,
rating: $scope.whosHereArray[index].rating,
rated: 1,
since: "Otc 25, 2013",
country: "China",
coderType: "Student",
school: "Hogwarts School of Witchcraft and Wizardry",
quote: "Member of ...."
};
coderInfoModal = $modal.open({
templateUrl: 'partials/user.chat.area.coderinfo.html',
controller: function($scope, $modalInstance, coderInfo){
$scope.coderInfo = coderInfo;
$scope.ok = function () {
$modalInstance.close();
};
},
resolve:{
coderInfo: function(){
return coderInfo;
}
}
});
};

$scope.collapseMemberHere = true;
$scope.collapseRegistrant = true;

$scope.getMethodName = function(methodIdx){
return $scope.methodsArray[methodIdx];
};
$scope.disableSelect = true;
$scope.setChatMethod = function(index){
$scope.methodIdx = index;
//if user choose "Admins", "General", "Me",
// there is no need to specify a user to talk to
// in current arena implementation. so set memberIdx to null
if(index<3) {
$scope.memberIdx = null;
$scope.disableSelect = true;
}else{
$scope.disableSelect = false;
}
};
$scope.methodIdx = 1;
$scope.methodsArray = [
"Admins",
"General",
"Me",
"Question",
"Reply to",
"Whisper"
];

$scope.memberIdx = null;
$scope.getMemberName = function(memberIdx){
if( memberIdx === null ) return " ";
else return $scope.whosHereArray[memberIdx].name;
};
$scope.getMemberRatingClass = function(memberIdx){
if( memberIdx === null ) return "";
else return $scope.getRatingClass($scope.whosHereArray[memberIdx].rating);
};
$scope.talkTo = function(index){
$scope.memberIdx = index;
};


// this function rebuild the multi ng-scrollbars in this widget.
$scope.rebuildScrollbar = function(bar){
//the left aside have a fixed height, so we need to customize the height of each
// ng-scrollbar which belong to registrants, who's here and rating key section.
//
// the height is calculate by the height of left aside, header of each section and
// height of the rating key ul
if($scope.collapseRatingKey){
if($scope.showRegistrant){
$scope.whosHereScrollHeight = "scroll-height-1"; // 351-3*41
$scope.registrantsScrollHeight = "scroll-height-1";
}else{
$scope.whosHereScrollHeight = "scroll-height-2"; //351-2*41
}
}else{
if($scope.showRegistrant){
$scope.whosHereScrollHeight = "scroll-height-3"; // 351-186-41*2
$scope.registrantsScrollHeight = "scroll-height-3";
}else{
$scope.whosHereScrollHeight = "scroll-height-4"; //351-184-41
}
}
// this function is reusable, can rebuild a specify ng-scrollbar according to
// "bar" param
if(bar === "methods")
$scope.$broadcast('rebuild:methods');
else if(bar === "members")
$scope.$broadcast('rebuild:members');
else if(bar === "registrants")
$scope.$broadcast('rebuild:registrants');
else if(bar === 'whoshere')
$scope.$broadcast('rebuild:whosHere');
else
if(!$scope.collapseMemberHere)
$scope.$broadcast('rebuild:whosHere');
else
$scope.$broadcast('rebuild:registrants');
};


// this is the array of the chat texts in the chat area
$scope.chatContent = [];
$scope.chatText = "";

var modalInstance;
var openAlertModal = function (){
modalInstance = $modal.open({
templateUrl: 'partials/user.chat.area.alert.html',
controller: function($scope, $modalInstance){
$scope.ok = function () {
$modalInstance.close();
};
}
});
};

// this function adjust the chatText content and style according to chat method.
// current arena implementation have three text style:
// system style: green color
// general style: white color
// secret style: italic and grey
$scope.chatSubmit = function(){
if($scope.chatText==="") return;
var type = "general";
switch ($scope.methodIdx) {
case 0:
$scope.chatText = $scope.userProfile.username + "> admins: " + $scope.chatText;
break;
case 1:
$scope.chatText = $scope.userProfile.username + "> " + $scope.chatText;
break;
case 2:
$scope.chatText = "**" + $scope.userProfile.username +" " + $scope.chatText+" ";
type = "secret";
break;
case 3:
if($scope.memberIdx===null){
openAlertModal();
$scope.chatText="";
return;
}
$scope.chatText = $scope.userProfile.username + "> " + $scope.whosHereArray[$scope.memberIdx].name + ": "+ $scope.chatText + " ";
if($scope.whosHereArray[$scope.memberIdx].name===$scope.userProfile.username){
type += " toMe";
}
break;
case 4:
if($scope.memberIdx===null){
openAlertModal();
$scope.chatText="";
return;
}
$scope.chatText = $scope.userProfile.username + "> " + $scope.whosHereArray[$scope.memberIdx].name + ": "+ $scope.chatText + " ";
if($scope.whosHereArray[$scope.memberIdx].name===$scope.userProfile.username){
type += " toMe";
}
break;
case 5:
if($scope.memberIdx===null){
openAlertModal();
$scope.chatText="";
return;
}
type = "secret";
if($scope.whosHereArray[$scope.memberIdx].name===$scope.userProfile.username){
$scope.chatText = $scope.userProfile.username + " whisper to " + "you: "+ $scope.chatText;
type += " toMe";
break;
}
$scope.chatText = "You whisper to " + $scope.whosHereArray[$scope.memberIdx].name + ": "+ $scope.chatText;
break;
default:
}
$scope.chatContent.push({
text: $scope.chatText,
type: type
});
$scope.chatText = "";
// after user submit the text, rebuild the ng-scrollbar of chat area
$scope.$broadcast('rebuild:chatboard');
};

$scope.findMode = false;
$scope.findText = "";
$scope.matchCheck = false;
$scope.highlightCheck = true;

}];

module.exports = chatAreaCtrl;

0 comments on commit d070d58

Please sign in to comment.