feat(tournaments): there is now an upcoming matches view

closes #62
seiyria · Oct 18, 2015 · 9de9c1f · 9de9c1f
1 parent 2a8b387
commit 9de9c1f
Show file tree

Hide file tree

Showing 10 changed files with 239 additions and 44 deletions.
diff --git a/src/jade/partials/tournaments/in-progress.jade b/src/jade/partials/tournaments/in-progress.jade
@@ -57,6 +57,11 @@ script(type="text/ng-template", id="/tournaments/in-progress")
           md-tooltip(md-direction="left", ng-show="isOpen && trn.isDone()") View results
 
       md-fab-actions(ng-if="isOpen")
+
+        md-button.md-fab.md-raised.md-accent(aria-label="view upcoming", ng-click="viewUpcoming()")
+          ng-md-icon(size="24", icon="dashboard", style="fill: white")
+          md-tooltip(md-direction="left") Upcoming matches
+
         md-button.md-fab.md-raised.md-accent(aria-label="toggle public", ng-click="ref.public = !ref.public; savePublicity()", ng-if="hasAccess")
           ng-md-icon(size="24", icon="{{ref.public ? 'lock' : 'lock_open'}}", style="fill: white")
           md-tooltip(md-direction="left") Make {{ref.public ? 'private' : 'public'}}

diff --git a/src/jade/partials/tournaments/upcoming.jade b/src/jade/partials/tournaments/upcoming.jade
@@ -0,0 +1,50 @@
+script(type="text/ng-template", id="/tournaments/upcoming")
+
+  .header-bar(layout="row", hide-sm)
+    div(flex)
+
+    .text-center.md-title(flex)
+      span(ng-show="!ref.public && !hasAccess") Unavailable
+      span(ng-show="ref.public || hasAccess") {{tournamentName}}{{trn.isDone() ? ' (Complete)' : ' (' + matchesLeft() + ' matches left)'}}
+
+    .text-right.auto-vert-margin(flex, layout="row", layout-align="end center")
+      .hide-underline(ng-show="ref.public && hasAccess")
+        md-button.md-fab.md-mini.md-accent.copy-url(data-clipboard-text="{{url}}", aria-label="copy url to clipboard")
+          ng-md-icon(size="20", icon="link", style="fill:white")
+        md-button.md-fab.md-mini.color-facebook(ng-click="share('facebook')", aria-label="share on facebook")
+          ng-md-icon(size="20", icon="facebook", style="fill:white")
+        md-button.md-fab.md-mini.color-twitter(ng-click="share('twitter')", aria-label="share on twitter")
+          ng-md-icon(size="20", icon="twitter", style="fill:white")
+        md-button.md-fab.md-mini.color-google(ng-click="share('google')", aria-label="share on google+")
+          ng-md-icon(size="20", icon="google-plus", style="fill:white")
+
+  .header-bar(layout="row", hide-gt-sm)
+    .text-center.md-title(flex)
+      span(ng-show="!ref.public && !hasAccess") Unavailable
+      span(ng-show="ref.public || hasAccess") {{tournamentName}}{{trn.isDone() ? ' (Complete)' : ' (' + matchesLeft() + ' matches left)'}}
+
+  .abs-position-bottom-right
+
+    md-fab-speed-dial.md-scale(md-direction="up", md-open="isOpen", ng-mouseleave="isOpen = false")
+      md-fab-trigger.align-with-text
+
+        md-button.md-fab.md-primary(aria-label="menu view bracket", ng-click="isOpen = true", ng-mouseenter="isOpen = true")
+          ng-md-icon(size="24", icon="menu", style="fill: white")
+
+      md-fab-actions(ng-if="isOpen")
+        md-button.md-fab.md-raised.md-accent(aria-label="view bracket", ng-click="viewBracket()")
+          ng-md-icon(size="24", icon="call_merge", style="fill: white")
+          md-tooltip(md-direction="left") View bracket
+
+  md-content.duel-area(flex, layout="column", layout-align="start center")
+
+    md-card.upcoming-match(ng-repeat="match in trn.matches | orderBy:isReady:true", upcoming-highlight="isReady(match)", layout-gt-sm="row", layout-sm="column", layout-sm-align="center center", ng-if="!noRender(match) && shouldShow(match)", ng-class="{small: $mdMedia('sm')}")
+      .round-station-container(layout="row", layout-align="start center", flex, flex-offset="10")
+
+        .subhead.match-id.padding-15.text-center(flex-gt-sm="30", flex-sm="50") {{getMatchIdString(match)}}
+        .station.padding-15(flex-gt-sm="70", flex-sm="50", layout="row", layout-align="start center")
+          ng-md-icon(icon="tv", style="fill:{{isReady(match) < 2 ? '#000' : '#fff'}}")
+          span(ng-class="{indeterminate: !getStation(match)}") &nbsp;{{getStation(match) || 'TBD'}}
+      .player-container.padding-15(flex="65", layout="row", layout-wrap)
+        .player.padding-5(flex="50", ng-repeat="player in match.p track by $index")
+          span(ng-class="{indeterminate: match.p[$index] === 0}") {{getName(match.p[$index]-1) || getString(match.id, $index) || '???'}}
diff --git a/src/js/_init.js b/src/js/_init.js
@@ -9,6 +9,7 @@ import './directives/draw-to';
 import './directives/hover-highlight';
 import './directives/scroll-observe';
 import './directives/station';
+import './directives/upcoming-highlight';
 
 import './services/scoring';
 import './services/userStatus';
@@ -19,7 +20,7 @@ import './services/toaster';
 import './services/filterUtils';
 import './services/auth';
 import './services/shareToken';
-import './services/tournamentInformaton';
+import './services/tournamentInformation';
 
 import './services/currents/currentUsers';
 import './services/currents/currentEvents';
@@ -48,6 +49,7 @@ import './controllers/tournamentSidebarCtrl';
 
 import './controllers/tournaments/notStartedCtrl';
 import './controllers/tournaments/inProgressCtrl';
+import './controllers/tournaments/upcomingCtrl';
 
 import './controllers/dialogs/userDialogCtrl';
 import './controllers/dialogs/eventDialogCtrl';

diff --git a/src/js/controllers/tournaments/inProgressCtrl.js b/src/js/controllers/tournaments/inProgressCtrl.js
@@ -23,6 +23,7 @@ site.controller('inProgressController', ($scope, $timeout, EnsureLoggedIn, Sideb
     });
   }
 
+  $scope.strings = [];
   $timeout(() => $scope.url = window.location.href, 0);
   $scope.includedTemplate = 'duel';
 
@@ -44,12 +45,6 @@ site.controller('inProgressController', ($scope, $timeout, EnsureLoggedIn, Sideb
     return hash[options.type];
   };
 
-  const determineTournament = (options) => {
-    const hash = { singles: Duel, doubles: Duel, groupstage: GroupStage, ffa: FFA , masters: Masters };
-    if(!options.type && options.last) return Duel;
-    return hash[options.type];
-  };
-
   $scope.showResults = (event) => {
     const mdDialogOptions = {
       clickOutsideToClose: true,
@@ -69,15 +64,16 @@ site.controller('inProgressController', ($scope, $timeout, EnsureLoggedIn, Sideb
 
   $scope.loadTournament = (ref, makeNew = false) => {
     $scope.tournamentName = $scope.ref.name;
-    $scope.includedTemplate = determineTemplate(ref.options);
 
     $scope.bucket = ref.players;
 
     const oldScores = _.cloneDeep(ref.trn);
-    const tournamentProto = determineTournament(ref.options);
+    const tournamentProto = TournamentInformation.determineTournament(ref.options);
 
     $scope.trn = ref.trn && !makeNew ? tournamentProto.restore($scope.bucket.length, ref.options, ref.trn) : new tournamentProto($scope.bucket.length, ref.options);
 
+    $scope.includedTemplate = determineTemplate(ref.options);
+
     if(ref.trn && !makeNew) {
       _.each(oldScores, match => {
         const existingMatch = _.findWhere($scope.trn.matches, { id: match.id });
@@ -87,13 +83,7 @@ site.controller('inProgressController', ($scope, $timeout, EnsureLoggedIn, Sideb
     }
   };
 
-  $scope.strings = [];
-  $scope.getString = (matchId, idx = 0) => {
-    const obj = _.findWhere($scope.strings, { id: matchId });
-    if(!obj) return 'TBD';
-    return obj.strings[idx];
-  };
-
+  $scope.getString = (id, idx) => TournamentInformation.getString($scope.strings, id, idx);
   $scope.getMatchIdString = TournamentInformation.getMatchIdString;
   $scope.getMatchStationIdString = TournamentInformation.getMatchStationIdString;
   $scope.noRender = TournamentInformation.noRender;
@@ -122,33 +112,27 @@ site.controller('inProgressController', ($scope, $timeout, EnsureLoggedIn, Sideb
     $scope.ref.$save();
   };
 
-  $scope.changeOptions = () => {
-    $state.go('setupTournament', { tournamentId: $scope.ref.$id });
-  };
+  $scope.viewUpcoming = () => $state.go('upcomingTournament', $stateParams);
+
+  $scope.changeOptions = () => $state.go('setupTournament', { tournamentId: $scope.ref.$id });
 
   $scope.ref.$watch(() => $scope.loadTournament($scope.ref));
 
   $scope.ref.$loaded().then(() => {
     $scope.loadTournament($scope.ref);
 
     const horizMatches = _.max($scope.trn.matches, 'id.r').id.r; // these start at 1 I guess.
-    const totalSections = _.max($scope.trn.matches, 'id.s').id.s; // get the highest section
 
-    TournamentInformation.reset({ totalSections });
+    TournamentInformation.reset($scope.trn);
 
     $scope.maxMatches = new Array(horizMatches);
     $scope.nextMatch = (match) => $scope.trn.right(match);
 
-    $scope.matchesLeft = () => _.reduce($scope.trn.matches, ((prev, m) => prev + ($scope.noRender(m) ? 0 : ~~!m.m)), 0);
+    $scope.matchesLeft = () => TournamentInformation.matchesLeft($scope.trn);
 
     $scope.getIdForMatch = TournamentInformation.getIdForMatch;
 
-    $scope.getName = (idx) => {
-      const user = $scope.bucket[idx];
-      if(!user) return;
-      if(user.alias) return user.alias;
-      return user.name;
-    };
+    $scope.getName = (idx) => TournamentInformation.playerName($scope.bucket[idx]);
 
     $scope.invalidMatch = (match) => !$scope.trn.isPlayable(match);
     $scope.scoresEqual = (match) => {

diff --git a/src/js/controllers/tournaments/upcomingCtrl.js b/src/js/controllers/tournaments/upcomingCtrl.js
@@ -0,0 +1,54 @@
+import site from '../../app';
+
+site.controller('upcomingController', ($scope, $mdMedia, $state, $stateParams, $firebaseObject, $timeout, FirebaseURL, SidebarManagement, EnsureLoggedIn, TournamentInformation) => {
+  SidebarManagement.hasSidebar = false;
+  EnsureLoggedIn.check(false);
+
+  $scope.$mdMedia = $mdMedia;
+
+  $scope.strings = [];
+
+  $scope.viewBracket = () => $state.go('tournamentInProgress', $stateParams);
+
+  $scope.matchesLeft = () => TournamentInformation.matchesLeft($scope.trn);
+
+  $scope.shouldShow = (match) => !match.m && !_.all(match.p, p => p === 0);
+
+  $scope.getString = (id, idx) => TournamentInformation.getString($scope.strings, id, idx);
+  $scope.noRender = TournamentInformation.noRender;
+  $scope.getMatchIdString = TournamentInformation.getMatchIdString;
+  $scope.getStation = (match) => $scope.ref.stations[TournamentInformation.getMatchStationIdString(match)];
+
+  const hasAnyZeroes = (match) => _.any(match.p, p => p === 0);
+
+  $scope.isReady = (match) => {
+    if($scope.noRender(match) || !$scope.shouldShow(match)) return;
+    console.log($scope.getMatchIdString(match), ~~!!$scope.getStation(match), ~~!hasAnyZeroes(match));
+    return ~~!!$scope.getStation(match) + ~~!hasAnyZeroes(match);
+  };
+
+  $scope.ref = $firebaseObject(new Firebase(`${FirebaseURL}/users/${atob($stateParams.userId)}/players/${$stateParams.setId}/tournaments/${$stateParams.tournamentId}`));
+
+  $scope.getName = (idx) => TournamentInformation.playerName($scope.bucket[idx]);
+
+  $scope.loadTournament = (ref, makeNew = false) => {
+    $scope.tournamentName = $scope.ref.name;
+
+    $scope.bucket = ref.players;
+
+    const tournamentProto = TournamentInformation.determineTournament(ref.options);
+
+    $scope.trn = ref.trn && !makeNew ? tournamentProto.restore($scope.bucket.length, ref.options, ref.trn) : new tournamentProto($scope.bucket.length, ref.options);
+
+    TournamentInformation.reset($scope.trn);
+
+    // cache them ids
+    _.each($scope.trn.matches, $scope.getMatchIdString);
+
+    if(!_.contains(['groupstage', 'ffa', 'masters'], ref.options.type)) {
+      $timeout(() => $scope.strings = TournamentInformation.loadTournamentWinnerStrings($scope.trn), 0);
+    }
+  };
+
+  $scope.ref.$watch(() => $scope.loadTournament($scope.ref));
+});
diff --git a/src/js/directives/hover-highlight.js b/src/js/directives/hover-highlight.js
@@ -5,13 +5,15 @@ site.directive('hoverHighlight', () => {
     restrict: 'A',
     link: (scope, element, attrs) => {
 
-      $(element).hover(() => {
-        if(!attrs.hoverName) return;
-        const ref = $('body > md-toolbar');
-        $(`[hover-name='${attrs.hoverName}']`).css('background-color', ref.css('background-color')).css('color', ref.css('color'));
-      }, () => {
-        $(`[hover-name='${attrs.hoverName}']`).css('background-color', '').css('color', '');
-      });
+      $(element).hover(
+        () => {
+          if(!attrs.hoverName) return;
+          const ref = $('body > md-toolbar');
+          $(`[hover-name='${attrs.hoverName}']`).css('background-color', ref.css('background-color')).css('color', ref.css('color'));
+        }, () => {
+          $(`[hover-name='${attrs.hoverName}']`).css('background-color', '').css('color', '');
+        }
+      );
     }
   };
 });
diff --git a/src/js/directives/upcoming-highlight.js b/src/js/directives/upcoming-highlight.js
@@ -0,0 +1,21 @@
+import site from '../app';
+
+site.directive('upcomingHighlight', () => {
+  return {
+    restrict: 'A',
+    scope: {
+      upcomingHighlight: '&'
+    },
+    link: (scope, element) => {
+      scope.$watch(() => scope.upcomingHighlight(), (newVal) => {
+        if(newVal < 2) return;
+        const ref = $('body > md-toolbar');
+        if(newVal) {
+          $(element).css('background-color', ref.css('background-color')).css('color', ref.css('color'));
+        } else {
+          $(element).css('background-color', '').css('color', '');
+        }
+      });
+    }
+  };
+});
diff --git a/src/js/routes.js b/src/js/routes.js
@@ -51,5 +51,11 @@ site.config(($stateProvider, $urlRouterProvider) => {
       views: {
         'content@': { templateUrl: '/tournaments/in-progress', controller: 'inProgressController' }
       }
+    })
+    .state('upcomingTournament', {
+      url: '/tournaments/:userId/:setId/:tournamentId/upcoming',
+      views: {
+        'content@': { templateUrl: '/tournaments/upcoming', controller: 'upcomingController' }
+      }
     });
 });
diff --git a/src/js/services/tournamentInformaton.js → src/js/services/tournamentInformation.js b/src/js/services/tournamentInformaton.js → src/js/services/tournamentInformation.js
@@ -7,10 +7,12 @@ site.service('TournamentInformation', () => {
   let idMap = {};
   let badIds = 0;
 
-  const reset = (opts) => {
+  const reset = (trn) => {
     idMap = {};
     badIds = 0;
-    numMatchesPerSection = _.map(new Array(opts.totalSections), () => 0);
+
+    const totalSections = _.max(trn.matches, 'id.s').id.s; // get the highest section
+    numMatchesPerSection = _.map(new Array(totalSections), () => 0);
   };
 
   const toCharacter = (round) => {
@@ -40,6 +42,14 @@ site.service('TournamentInformation', () => {
     return ''+match.id;
   };
 
+  const determineTournament = (options) => {
+    const hash = { singles: Duel, doubles: Duel, groupstage: GroupStage, ffa: FFA , masters: Masters };
+    if(!options.type && options.last) return Duel;
+    return hash[options.type];
+  };
+
+  const matchesLeft = (trn) => trn ? _.reduce(trn.matches, ((prev, m) => prev + (noRender(m) ? 0 : ~~!m.m)), 0) : 0;
+
   const loadTournamentWinnerStrings = (trn) => {
 
     const strings = [];
@@ -94,12 +104,28 @@ site.service('TournamentInformation', () => {
     return strings;
   };
 
+  const playerName = (user) => {
+    if(!user) return;
+    if(user.alias) return user.alias;
+    return user.name;
+  };
+
+  const getString = (strings, matchId, idx = 0) => {
+    const obj = _.findWhere(strings, { id: matchId });
+    if(!obj) return 'TBD';
+    return obj.strings[idx];
+  };
+
   return {
     loadTournamentWinnerStrings,
+    determineTournament,
     getIdForMatch,
     getMatchIdString,
     getMatchStationIdString,
+    getString,
+    matchesLeft,
     noRender,
+    playerName,
     reset
   };
 });