feat(tournaments): Clicking on match title will display popup of matc…

…h summary closes #87
seiyria · Nov 24, 2015 · baea6b8 · seiyria · Nov 24, 2015 · baea6b8
1 parent d6fe5f3
commit baea6b8
Show file tree

Hide file tree

Showing 11 changed files with 106 additions and 27 deletions.
diff --git a/src/jade/partials/dialogs/bracket-information.jade b/src/jade/partials/dialogs/bracket-information.jade
@@ -0,0 +1,15 @@
+
+script(type="text/ng-template", id="/dialog/bracket-information")
+  md-dialog
+
+    .md-dialog-content
+      h2.md-title Match {{ title }}
+
+      md-list
+        md-list-item.md-2-line(ng-repeat="player in players")
+          .md-avatar.subhead {{ player.ordinal }}
+          .md-list-item-text
+            h3 {{ player.displayName }}
+            Total Points Scored: {{ player.score }}
+    .md-actions
+      md-button.md-primary(ng-click="cancel()", aria-label="close") Close
diff --git a/src/jade/partials/dialogs/results.jade b/src/jade/partials/dialogs/results.jade
@@ -1,10 +1,8 @@
 
 script(type="text/ng-template", id="/dialog/results")
   md-dialog
-
+    h2.md-title Results for {{tournamentName}}
     .md-dialog-content
-      h2.md-title Results for {{tournamentName}}
-
       md-list
         md-list-item.md-2-line(ng-repeat="result in results")
           .md-avatar.subhead {{toOrdinal(result.pos)}}
@@ -13,4 +11,4 @@ script(type="text/ng-template", id="/dialog/results")
             p Wins: {{result.wins}}, Total Points Scored: {{result.for}}
 
     .md-actions
-      md-button.md-primary(ng-click="cancel()", aria-label="close") Close
+      md-button.md-primary(ng-click="cancel()", aria-label="close") Close
diff --git a/src/jade/partials/tournaments/types/duel.jade b/src/jade/partials/tournaments/types/duel.jade
@@ -25,7 +25,7 @@ script(type="text/ng-template", id="tournament-duel")
 
         .match-data(ng-if="!noRender(match) && shouldMatchBeShown(match)", layout="row", layout-align="center center")
           .round-type(flex, layout="column", layout-align="space-around center", background-highlight="!invalidMatch(match) && !match.m")
-            .subhead {{getMatchIdString(match)}}
+            .subhead(ng-click="showBracketInformation($event, match)") {{getMatchIdString(match)}}
             station(value="ref.stations[getMatchStationIdString(match)]", can-click="{{hasAccess}}", on-unedit="save()")
 
           .match-name(layout="column")
@@ -40,4 +40,4 @@ script(type="text/ng-template", id="tournament-duel")
               .score-value -
 
           .margin-right-10.margin-left-10.confirm-score(flex, layout="column", layout-align="center center")
-            ng-md-icon(size="24", icon="check_circle", ng-click="confirmScore(match)", ng-if="!invalidMatch(match) && !scoresEqual(match)", style="fill: {{match.m ? '#ccc' : '#000'}}")
+            ng-md-icon(size="24", icon="check_circle", ng-click="confirmScore(match)", ng-if="!invalidMatch(match) && !scoresEqual(match)", style="fill: {{match.m ? '#ccc' : '#000'}}")
diff --git a/src/jade/partials/tournaments/types/ffa.jade b/src/jade/partials/tournaments/types/ffa.jade
@@ -23,7 +23,7 @@ script(type="text/ng-template", id="tournament-ffa")
 
         .match-data(ng-if="!noRender(match)", layout="row", layout-align="center center")
           .round-type(flex, layout="column", layout-align="space-around center", background-highlight="!invalidMatch(match) && !match.m")
-            .subhead {{getMatchIdString(match)}}
+            .subhead(ng-click="showBracketInformation($event, match)") {{getMatchIdString(match)}}
             station(value="ref.stations[getMatchStationIdString(match)]", can-click="{{hasAccess}}", on-unedit="save()")
 
           .match-name(layout="column")
@@ -38,4 +38,4 @@ script(type="text/ng-template", id="tournament-ffa")
               .score-value -
 
           div.margin-right-10.margin-left-10.confirm-score
-            ng-md-icon(size="24", icon="check_circle", ng-click="confirmScore(match)", ng-if="!invalidMatch(match) && !scoresEqual(match)", style="fill: {{match.m ? '#ccc' : '#000'}}")
+            ng-md-icon(size="24", icon="check_circle", ng-click="confirmScore(match)", ng-if="!invalidMatch(match) && !scoresEqual(match)", style="fill: {{match.m ? '#ccc' : '#000'}}")
diff --git a/src/jade/partials/tournaments/types/groupstage.jade b/src/jade/partials/tournaments/types/groupstage.jade
@@ -23,7 +23,7 @@ script(type="text/ng-template", id="tournament-groupstage")
 
         .match-data(ng-if="!noRender(match)", layout="row", layout-align="center center")
           .round-type(flex, layout="column", layout-align="space-around center", background-highlight="!invalidMatch(match) && !match.m")
-            .subhead {{getMatchIdString(match)}}
+            .subhead(ng-click="showBracketInformation($event, match)") {{getMatchIdString(match)}}
             station(value="ref.stations[getMatchStationIdString(match)]", can-click="{{hasAccess}}", on-unedit="save()")
 
           .match-name(layout="column")
@@ -38,4 +38,4 @@ script(type="text/ng-template", id="tournament-groupstage")
               .score-value -
 
           div.margin-right-10.margin-left-10.confirm-score
-            ng-md-icon(size="24", icon="check_circle", ng-click="confirmScore(match)", ng-if="!invalidMatch(match) && !scoresEqual(match)", style="fill: {{match.m ? '#ccc' : '#000'}}")
+            ng-md-icon(size="24", icon="check_circle", ng-click="confirmScore(match)", ng-if="!invalidMatch(match) && !scoresEqual(match)", style="fill: {{match.m ? '#ccc' : '#000'}}")
diff --git a/src/jade/partials/tournaments/types/masters.jade b/src/jade/partials/tournaments/types/masters.jade
@@ -23,7 +23,7 @@ script(type="text/ng-template", id="tournament-masters")
 
         .match-data(ng-if="!noRender(match)", layout="row", layout-align="center center")
           .round-type(flex, layout="column", layout-align="space-around center", background-highlight="!invalidMatch(match) && !match.m")
-            .subhead {{getMatchIdString(match)}}
+            .subhead(ng-click="showBracketInformation($event, match)") {{getMatchIdString(match)}}
             station(value="ref.stations[getMatchStationIdString(match)]", can-click="{{hasAccess}}", on-unedit="save()")
 
           .match-name(layout="column")
@@ -38,4 +38,4 @@ script(type="text/ng-template", id="tournament-masters")
               .score-value -
 
           div.margin-right-10.margin-left-10.confirm-score
-            ng-md-icon(size="24", icon="check_circle", ng-click="confirmScore(match)", ng-if="!invalidMatch(match) && !scoresEqual(match)", style="fill: {{match.m ? '#ccc' : '#000'}}")
+            ng-md-icon(size="24", icon="check_circle", ng-click="confirmScore(match)", ng-if="!invalidMatch(match) && !scoresEqual(match)", style="fill: {{match.m ? '#ccc' : '#000'}}")
diff --git a/src/js/_init.js b/src/js/_init.js
@@ -24,6 +24,7 @@ import './services/auth';
 import './services/shareToken';
 import './services/tournamentInformation';
 import './services/urlShorten';
+import './services/placeService';
 
 import './services/currents/currentUsers';
 import './services/currents/currentEvents';
@@ -61,6 +62,7 @@ import './controllers/dialogs/inputPromptCtrl';
 import './controllers/dialogs/sharePromptCtrl';
 import './controllers/dialogs/selectPromptCtrl';
 import './controllers/dialogs/resultsDialogCtrl';
+import './controllers/dialogs/bracketInformationCtrl';
 
 import './filters/rawHtml.js';
 import './routes';
diff --git a/src/js/controllers/dialogs/bracketInformationCtrl.js b/src/js/controllers/dialogs/bracketInformationCtrl.js
@@ -0,0 +1,40 @@
+import site from '../../app';
+
+site.controller('bracketInformationController', ($scope, $mdDialog, $filter, placeService, title, match, players) => {
+
+  $scope.title = title;
+  $scope.cancel = $mdDialog.cancel;
+  $scope.players = [];
+
+  for(let i = 0; i < match.score.length; i++) {
+    const player = players[match.p[i] - 1];
+    $scope.players.push({
+      displayName: player.alias ? `${player.alias} (${player.name})` : player.name,
+      score: match.score[i]
+    });
+  }
+
+  $scope.players = $filter('orderBy')($scope.players, 'score', true);
+
+  // state machine for determining ordinals ('1st', '2nd' and so on)
+  const state = (() => {
+    let lastScore = 0;
+    let currentPlace = 0;
+    let ordinal = placeService.getPlaceString(1);
+    return {
+      getOrdinal: (score) => {
+        currentPlace++;
+        if(lastScore === score) {
+          return ordinal;
+        }
+
+        lastScore = score;
+        return ordinal = placeService.getPlaceString(currentPlace);
+      }
+    };
+  })();
+
+  _.each($scope.players, (player) => {
+    player.ordinal = state.getOrdinal(player.score);
+  });
+});
diff --git a/src/js/controllers/dialogs/resultsDialogCtrl.js b/src/js/controllers/dialogs/resultsDialogCtrl.js
@@ -1,6 +1,6 @@
 import site from '../../app';
 
-site.controller('resultsDialogController', ($scope, $mdDialog, tournamentName, results, players) => {
+site.controller('resultsDialogController', ($scope, $mdDialog, tournamentName, results, players, placeService) => {
 
   $scope.cancel = $mdDialog.cancel;
 
@@ -14,9 +14,5 @@ site.controller('resultsDialogController', ($scope, $mdDialog, tournamentName, r
     return player.name;
   };
 
-  $scope.toOrdinal = (num) => {
-    const s = ['th', 'st', 'nd', 'rd'];
-    const v = num % 100;
-    return num + (s[(v-20)%10] || s[v] || s[0]);
-  };
-});
+  $scope.toOrdinal = placeService.getPlaceString;
+});
diff --git a/src/js/controllers/tournaments/inProgressCtrl.js b/src/js/controllers/tournaments/inProgressCtrl.js
@@ -35,7 +35,23 @@ site.controller('inProgressController', ($scope, $timeout, EnsureLoggedIn, Sideb
 
   $scope.includedTemplate = 'duel';
 
-  $scope.doOrOpen = (event) => $scope.isOpen && $scope.trn.isDone() ? $scope.showResults(event) : $scope.isOpen = true;
+  const showResults = (event) => {
+    const mdDialogOptions = {
+      controller: 'resultsDialogController',
+      focusOnOpen: false,
+      templateUrl: '/dialog/results',
+      event,
+      locals: {
+        tournamentName: $scope.tournamentName,
+        results: $scope.trn.results(),
+        players: $scope.bucket
+      }
+    };
+
+    $mdDialog.show(mdDialogOptions);
+  };
+
+  $scope.doOrOpen = (event) => $scope.isOpen && $scope.trn.isDone() ? showResults(event) : $scope.isOpen = true;
 
   $scope.share = (service) => {
     const services = {
@@ -52,19 +68,19 @@ site.controller('inProgressController', ($scope, $timeout, EnsureLoggedIn, Sideb
     return hash[options.type];
   };
 
-  $scope.showResults = (event) => {
+  $scope.showBracketInformation = (event, match) => {
     const mdDialogOptions = {
-      controller: 'resultsDialogController',
+      controller: 'bracketInformationController',
       focusOnOpen: false,
-      templateUrl: '/dialog/results',
+      templateUrl: '/dialog/bracket-information',
       event,
       locals: {
-        tournamentName: $scope.tournamentName,
-        results: $scope.trn.results(),
+        title: $scope.getMatchIdString(match),
+        match: match,
         players: $scope.bucket
       }
     };
-
+    
     $mdDialog.show(mdDialogOptions);
   };
 
@@ -165,4 +181,4 @@ site.controller('inProgressController', ($scope, $timeout, EnsureLoggedIn, Sideb
     }
   });
 
-});
+});
diff --git a/src/js/services/placeService.js b/src/js/services/placeService.js
@@ -0,0 +1,12 @@
+import site from '../app';
+
+site.service('placeService', () => {
+
+  return {
+    getPlaceString: (numberPlace) => {
+      const postStrings = ['th', 'st', 'nd', 'rd'];
+      const baseNumber = numberPlace % 100;
+      return numberPlace + (postStrings[(baseNumber - 20) % 10] || postStrings[baseNumber] || postStrings[0]);
+    }
+  };
+});