diff --git a/public/app/app.js b/public/app/app.js index 46b9bf4..c1f8c5f 100644 --- a/public/app/app.js +++ b/public/app/app.js @@ -4,6 +4,5 @@ angular.module('myApp', [ 'app.routes', 'mainCtrl', 'robotCtrl', - 'overCtrl', 'robotService' ]); diff --git a/public/app/app.routes.js b/public/app/app.routes.js index 6aadc17..a8f1ffb 100644 --- a/public/app/app.routes.js +++ b/public/app/app.routes.js @@ -16,8 +16,9 @@ angular.module('app.routes', ['ngRoute']) }) .when('/:categoryName/overlay', { templateUrl: 'app/views/pages/overlay.html', - controller: 'overlayController', - controllerAs: 'over' + controller: 'mainController', + controllerAs: 'main', + overlay: true }) // get rid of the hash in the URL $locationProvider.html5Mode(true); diff --git a/public/app/controllers/mainCtrl.js b/public/app/controllers/mainCtrl.js index 14a2ed5..4f2dec3 100644 --- a/public/app/controllers/mainCtrl.js +++ b/public/app/controllers/mainCtrl.js @@ -1,5 +1,5 @@ angular.module('mainCtrl', []) -.controller('mainController', function($route, $routeParams, $rootScope, $location, $scope, $filter, Robot, ngDialog) { +.controller('mainController', function($route, $routeParams, $rootScope, $location, $scope, $timeout, $filter, Robot, ngDialog) { var vm = this; $scope.isActive = function (viewLocation) { @@ -14,10 +14,11 @@ angular.module('mainCtrl', []) vm.prettyTime = function(robotTime){ if(robotTime){ - return robotTime.minutes + ":" + pad(robotTime.seconds, 2, '0') + '.' + pad(robotTime.miliseconds, 3, '0'); - } else { - return "00:00.000" + if (timeToMiliseconds(robotTime) != 0) { + return robotTime.minutes + ":" + pad(robotTime.seconds, 2, '0') + '.' + pad(robotTime.miliseconds, 3, '0'); + } } + return "--:--.---" } vm.prettyCategory = function(categorySlug){ @@ -90,6 +91,10 @@ angular.module('mainCtrl', []) vm.categoryTitle = vm.prettyCategory(vm.categorySlug); vm.categoryId = vm.getCategoryId(vm.categorySlug); vm.routePath = "/"+vm.categorySlug; + vm.categoryRankingSize = 16; + if (vm.categoryId == 2){ + vm.categoryRankingSize = 12; + } var refreshRobotList = function(categoryId){ if (categoryId != 0 ){ @@ -99,6 +104,7 @@ angular.module('mainCtrl', []) vm.processing = false; // bind the robots that come back to vm.robots vm.robots = ret.data.message; + vm.ranking = getRanking(vm.robots, vm.categoryRankingSize); }); } else { Robot.all() @@ -107,11 +113,11 @@ angular.module('mainCtrl', []) vm.processing = false; // bind the robots that come back to vm.robots vm.robots = ret.data.message; + vm.ranking = getRanking(vm.robots, vm.categoryRankingSize); }); } - } - refreshRobotList(vm.categoryId); + } vm.bestTimeIndex = function(robot){ var times = robot.times; @@ -209,7 +215,7 @@ angular.module('mainCtrl', []) }); }; - vm.rankingDialog = function($event){ + getRanking = function(robots, size){ if (vm.categoryId != 2){ sortedRobots = vm.robots.slice(0); sortedRobots = sortedRobots.sort(function(a, b) { @@ -225,7 +231,11 @@ angular.module('mainCtrl', []) return 0; }); } + return sortedRobots.slice(0,size-1); + } + vm.rankingDialog = function($event){ + sortedRobots = vm.rankingRobots; var dialog = ngDialog.open({ template: 'app/views/modals/ranking.html', scope: $scope, @@ -260,6 +270,20 @@ angular.module('mainCtrl', []) }); } + + refreshRobotList(vm.categoryId); + + overlayRefresh = function(){ + $timeout(function() { + refreshRobotList(vm.categoryId); + vm.ranking = getRanking(vm.robots, vm.categoryRankingSize); + overlayRefresh(); + }, 500) + }; + + if ($route.current.$$route.overlay){ + overlayRefresh(); + } }); diff --git a/public/app/controllers/overCtrl.js b/public/app/controllers/overCtrl.js deleted file mode 100644 index ff7ca36..0000000 --- a/public/app/controllers/overCtrl.js +++ /dev/null @@ -1,50 +0,0 @@ -angular.module('overCtrl', []) -.controller('overlayController', function($route, $routeParams, $rootScope, $location, Robot) { - var vm = this; - - function pad(n, width, z) { - z = z || '0'; - n = n + ''; - return n.length >= width ? n : new Array(width - n.length + 1).join(z) + n; - } - - vm.prettyTime = function(robotTime){ - return robotTime.minutes + ":" + pad(robotTime.seconds, 2, '0') + '.' + pad(robotTime.miliseconds, 3, '0'); - } - - vm.prettyCategory = function(categorySlug){ - switch(categorySlug){ - case "laberinto": - return "de Laberinto"; - case "siguelineas": - return "Siguelineas"; - case "velocistas": - return "Velocistas"; - } - } - - vm.getCategoryId = function(categorySlug){ - switch(categorySlug){ - case "laberinto": - return 1; - case "siguelineas": - return 2; - case "velocistas": - return 3; - } - } - - - vm.categorySlug = $routeParams.categoryName; - vm.categoryTitle = vm.prettyCategory(vm.categorySlug); - vm.categoryId = vm.getCategoryId(vm.categorySlug); - - Robot.getByCategory(vm.categoryId) - .then(function(ret) { - // when all the robots come back, remove the processing variable - vm.processing = false; - // bind the robots that come back to vm.robots - vm.robots = ret.data.message; - }); - -}); diff --git a/public/app/views/index.html b/public/app/views/index.html index f58d738..245fc13 100644 --- a/public/app/views/index.html +++ b/public/app/views/index.html @@ -29,7 +29,6 @@ - diff --git a/public/app/views/pages/overlay.html b/public/app/views/pages/overlay.html index e8f2ba9..668f6f3 100644 --- a/public/app/views/pages/overlay.html +++ b/public/app/views/pages/overlay.html @@ -8,13 +8,67 @@

Competición de Robots {{over.categoryTitle}}

--> - - - - - - - - -
{{$index + 1}}{{ robot.name }}{{ over.prettyTime(robot.times[0]) }}
+
+ + + + + + + + + + + + + + + +
{{$index + 1}}{{ robot.name }} + + + + + +
{{$index + 1}}{{main.prettyTime(time)}}
+ {{ main.prettyTime(robot[main.bestTimeIndex(robot)]) }} +
{{$index + 1}} + + + + + + + + +
{{ robot.name }}
+ + + + + {{robot.extra.retweetCount}} RT + + + + + + + {{robot.extra.retweetCount}} RT + +
+ 		+ + + + + + + + + +
{{$index + 1}}{{main.prettyTime(time)}}
Score: {{main.calculateScore(robot)}} pts
+ {{ main.prettyTime(robot[main.bestTimeIndex(robot)]) }} + {{ main.calculateScore(robot) }} pts +
+
diff --git a/public/assets/css/style.less b/public/assets/css/style.less index 8c7226e..2c98ec2 100644 --- a/public/assets/css/style.less +++ b/public/assets/css/style.less @@ -81,16 +81,123 @@ body { } #robot-ranking{ + font-size: 9pt; + font-weight: bold; color: @light_gray; position: absolute; text-shadow: 0px 0px 4px #000; top: 6%; - right: 3%; - padding: 10px; - background: @dark_gray; - border-radius: 3px; + width: 22%; + height: 80%; + right: 0; + + #ranking-container{ + width: 100%; + } + + .ranking-line{ + position: relative; + } + .ranking-line:before{ + content: " "; + position:absolute; + width: 100%; + height: 100%; + top: 0; + left: 0; + z-index: 50; + border: 1px solid @chroma_green; + border-right: 0px; + } + + tr{ + padding: 20px 0px; + border-spacing: 20px; + + td { + padding: 2px; + background-color: @dark_gray; + } + .ranking-number{ + font-size: 11pt; + padding: 0px 20px; + padding-right: 25px; + color: @dark_gray; + background-color: @light_gray; + position: relative; + z-index: 5; + } + .ranking-name{ + padding: 0px 10px; + position: relative; + z-index: 15; + } + .ranking-name:after{ + position: absolute; + content: ""; + background-color: @dark_gray; + display: block; + width: 25px; + height: 101%; + top: 0px; + left: -1px; + z-index: -1; + transform-origin: top right; + -ms-transform: skew(-10deg, 0deg); + -webkit-transform: skew(-10deg, 0deg); + transform: skew(-10deg, 0deg); + } + .ranking-name.big-name{ + font-size: 11pt; + } + } + + .ranking-icons{ + i{ + color: darken(@light_gray, 50%); + } - td { - padding: 5px 10px; + i.recycle.icon-color{ + color: #1c800f; + } + i.original.icon-color{ + color: #f6c209; + } + i.onlineDocs.icon-color{ + color: white; + } + i.twitter.icon-color{ + color: #1bb1d2; + } } + + .ranking-name .small-name{ + padding: 1px; + } + + .ranking-icons.icons-mini{ + padding: 2px 0px; + font-size: 7pt; + } + + .mini-score{ + display: inline-block; + margin-left: 5px; + } + + .times-subtable{ + tr{ + border-bottom: 1px solid lighten(@dark_gray, 10%); + + td { + padding: 0 5px; + width: 100%; + } + } + + tr:last-child{ + border: 0px; + } + } + }