feat(tournaments): option to allow scores up to 999,999,999,999

closes #51

src/jade/directives/score.jade

@@ -1,4 +1,4 @@
 script(type="text/ng-template", id="score")
   .score-value.text-center(ng-click="edit()", ng-if="!editing") {{getValue()}}
   div(ng-if="editing")
-    input.score-input.hide-spinner(type="number", ng-model="editStuff.value", ng-blur="unedit()", ng-keydown="watchKeyPresses($event)", max="999")
+    input.score-input.hide-spinner(type="number", ng-model="editStuff.value", ng-blur="unedit()", ng-keydown="watchKeyPresses($event)", ng-max="{{maxScore}}")

src/jade/partials/tournaments/in-progress.jade

@@ -24,5 +24,5 @@ script(type="text/ng-template", id="/tournaments/in-progress")
         a(target="_blank", ng-href="https://plus.google.com/share?url={{url}}")
           ng-md-icon.pointer.margin-left-10.margin-right-10(size="20", icon="google-plus")
 
-  md-content.scroller.duel-area(md-scroll, flex, layout="column", ng-include="'tournament-'+includedTemplate", ng-if="hasAccess || ref.public")
+  md-content.scroller.duel-area(md-scroll, flex, layout="column", ng-include="'tournament-'+includedTemplate", ng-if="hasAccess || ref.public", ng-class="{ 'big-scores': ref.options.bigScore }")
   md-content(flex, layout="row", layout-align="center center", ng-include="'tournament-noaccess'", ng-if="!hasAccess && !ref.public")

src/jade/partials/tournaments/not-started.jade

@@ -63,6 +63,11 @@ script(type="text/ng-template", id="/tournaments/not-started")
             md-radio-button.md-primary(flex="25", value="masters") Masters
               md-tooltip A subset of free-for-all where only knockouts per round are calculated
 
+        md-list-item
+          ng-md-icon(icon="help", size="24")
+            md-tooltip Increase the max score from 999 to 999,999,999,999
+          md-checkbox(ng-model="tournamentOptions.bigScore", aria-label="larger scores") Big Scores
+
         md-list-item(ng-if="tournamentOptions.type === 'singles' || tournamentOptions.type === 'doubles'")
           ng-md-icon(icon="help", size="24")
             md-tooltip No 3rd/4th place matches or double grand final

src/js/controllers/tournaments/notStartedCtrl.js

@@ -30,7 +30,7 @@ site.controller('notStartedController', ($scope, EnsureLoggedIn, UserStatus, Sha
 
   $scope.getOptions = () => {
     const type = $scope.tournamentOptions.type;
-    if(type === 'singles' || type === 'doubles') return { type, last: type === 'singles' ? Duel.WB : Duel.LB, short: $scope.tournamentOptions.short };
+    if(type === 'singles' || type === 'doubles') return _.extend({ last: type === 'singles' ? Duel.WB : Duel.LB }, $scope.tournamentOptions);
     return $scope.tournamentOptions;
   };
 

src/js/directives/score.js

@@ -1,6 +1,6 @@
 import site from '../app';
 
-site.directive('score', ($timeout) => {
+site.directive('score', ($timeout, $filter) => {
   return {
     restrict: 'E',
     templateUrl: 'score',
@@ -10,8 +10,14 @@ site.directive('score', ($timeout) => {
     link: (scope, element, attrs) => {
       scope.editing = false;
       scope.editStuff = { value: scope.value }; // don't bind to primitives, they said
+      scope.maxScore = 999;
 
-      scope.getValue = () => _.isNumber(scope.value) ? scope.value : '-';
+      $timeout(() => {
+        const bigScores = $('.duel-area').hasClass('big-scores');
+        scope.maxScore = bigScores ? 999999999999 : 999;
+      }, 0);
+
+      scope.getValue = () => _.isNumber(scope.value) ? $filter('number')(scope.value, 0) : '-';
 
       scope.edit = () => {
         if(!attrs.canClick) return;

src/js/directives/scroll-observe.js

@@ -2,13 +2,14 @@ import site from '../app';
 
 // bind scroll so the stupid things move horizontally
 // fix the stupid vertical crap b/c its bad
-site.directive('scrollObserve', () => {
+site.directive('scrollObserve', ($timeout) => {
   return (scope, element, attrs) => {
     const window = $('.scroller');
     const setSize = () => {
-      $(element).css('left', -window.scrollLeft()+330*(+attrs.scrollObserve)+'px');
+      const width = $('.duel-area').hasClass('big-scores') ? 495 : 330;
+      $(element).css('left', -window.scrollLeft()+width*(+attrs.scrollObserve)+'px');
     };
-    setSize();
+    $timeout(setSize, 0);
     window.on('scroll', setSize);
   };
 });

src/scss/site.scss

@@ -1,3 +1,9 @@
+@mixin all-widths($width) {
+  min-width: $width;
+  max-width: $width;
+  width: $width;
+}
+
 .text-center {
   text-align: center;
 }
@@ -18,14 +24,6 @@ $match-column-width: 130px;
   font-weight: 500;
 }
 
-.round-header {
-  position: fixed;
-  width: $match-column-width;
-  z-index: 11;
-  text-align: center;
-  background-color: #fff;
-}
-
 .max-height {
   height: 100%;
 }
@@ -68,7 +66,6 @@ $duel-bg: #eee;
 $card-border: 1px solid #eee;
 
 .duel-area {
-  background-color: $duel-bg;
 }
 
 .pointer {
@@ -84,81 +81,117 @@ $card-border: 1px solid #eee;
   text-decoration: none;
 }
 
-.match-column {
-  width: $round-column-width;
-  min-width: $round-column-width;
-  max-width: $round-column-width;
-
+.duel-area {
+  background-color: $duel-bg;
 
-  .match {
-    min-height: 57px;
+  .round-header {
+    position: fixed;
+    @include all-widths($round-column-width);
+    z-index: 11;
+    text-align: center;
+    background-color: #fff;
+  }
 
-    &.unplayable {
-      color: #c76e06;
-    }
+  .match-column {
+    @include all-widths($round-column-width);
 
-    &.complete {
-      color: gray;
-    }
+    .match {
+      min-height: 57px;
 
-    &.walkover {
-      .confirm-score, .scores {
-        visibility: hidden;
+      &.unplayable {
+        color: #c76e06;
       }
-    }
 
-    .round-type {
-      width: 60px;
-      min-width: 60px;
-      max-width: 60px;
-      text-align: center;
-    }
+      &.complete {
+        color: gray;
+      }
 
-    .match-name {
-      width: $match-column-width;
+      &.walkover {
+        .confirm-score, .scores {
+          visibility: hidden;
+        }
+      }
 
-      .member {
-        width: $match-column-width;
-        max-width: $match-column-width;
-        overflow: hidden;
-        white-space: nowrap;
+      .round-type {
+        width: 60px;
+        min-width: 60px;
+        max-width: 60px;
         text-align: center;
-        text-overflow: ellipsis;
+      }
+
+      .match-name {
+        @include all-widths($match-column-width);
+
+        .member {
+          @include all-widths($match-column-width);
+          overflow: hidden;
+          white-space: nowrap;
+          text-align: center;
+          text-overflow: ellipsis;
+
+          border-left: $card-border;
 
-        border-left: $card-border;
+          &[hover-name=""] {
+            font-style: italic;
+          }
 
-        &[hover-name=""] {
-          font-style: italic;
+          &:not(:last-child) {
+            border-bottom: $card-border;
+          }
         }
+      }
+
+      .confirm-score {
+        cursor: pointer;
+        @include all-widths(24px);
+      }
 
-        &:not(:last-child) {
-          border-bottom: $card-border;
+      .scores {
+        .score-container {
+          width: 25px;
+          border-right: $card-border;
+          border-left: $card-border;
+
+          &:not(:last-child) {
+            border-bottom: $card-border;
+          }
+
+          .score-input {
+            width: 25px;
+            font-size: 12px;
+            margin: 0;
+            padding: 0;
+          }
         }
       }
     }
+  }
+}
 
-    .confirm-score {
-      cursor: pointer;
-      width: 24px;
-      min-width: 24px;
-      max-width: 24px;
-    }
+.duel-area.big-scores {
+
+  .round-header {
+    @include all-widths($round-column-width * 1.5);
+  }
+
+  .match-column {
+    @include all-widths($round-column-width * 1.5);
 
-    .scores {
-      .score-container {
-        width: 25px;
-        border-right: $card-border;
-        border-left: $card-border;
+    .match {
+      .match-name {
+        @include all-widths($match-column-width);
 
-        &:not(:last-child) {
-          border-bottom: $card-border;
+        .member {
+          @include all-widths($match-column-width);
         }
+      }
 
-        .score-input {
-          width: 25px;
-          font-size: 12px;
-          margin: 0;
-          padding: 0;
+      .scores {
+        .score-container {
+          @include all-widths($match-column-width);
+          .score-input {
+            @include all-widths($match-column-width);
+          }
         }
       }
     }