Commits

Anonymous committed 64e858c

Proportional position of the cube, Controller button + play

Comments (0)

Files changed (3)

coffee/app.coffee

 
     # cube colors to css colors correspondance
     colors:
-        '1': 'yellow'
-        '2': 'blue'
-        '3': 'red'
-        '4': 'green'
-        '5': 'orange'
-        '6': 'white'
+        1: 'yellow'
+        2: 'blue'
+        3: 'red'
+        4: 'green'
+        5: 'orange'
+        6: 'white'
 
     # list of movements where the specified face is hidden on the showcube
     invisibles:
 
     movcallback: undefined
 
+    coef: 2/3
+
+    minlength: undefined
+
     constructor:($container) ->
         @$container = $container
         @model = new Cube
 
         # set the maximum width of the future cube
         minlength = $container.clientWidth
-        if $container.clientHeight < minlength
-            minlength = $container.clientHeight
-        perspective = minlength * 10
+        height = $container.clientHeight
+        if height < minlength
+            minlength = height
+        @minlength = minlength
+
+        # center the viewer in the container
+        minlength = minlength * @coef
+        perspective = minlength * 10 / @coef
+        offsetX = perspective / 200 * @coef * 4
+        offsetY = perspective / 200 * @coef * 2
+        remaining_spaceX = (1-@coef)*(@minlength) - offsetX
+        remaining_spaceY = (1-@coef)*(@minlength) - offsetY
+        offsetX+=remaining_spaceX/4
+        offsetY+=remaining_spaceY/4
 
         transforms =
             'F': ''
             'D': 'rotateX(-90deg)'
 
         # create the showcube
-        htmlstring = '<div class="viewer" style="-moz-perspective: ' + perspective + 'px"><div class="cube showcube">'
+        htmlstring = '<div class="viewer" style="left:' + offsetX + 'px;top:' + offsetY + 'px;-moz-perspective: ' + perspective + 'px"><div class="cube showcube" style="height:' + minlength + 'px;width:' + minlength + 'px;">'
         for i, face of @faces
-            htmlstring+= '<div style="-moz-transform: ' + transforms[face] + ' translateZ('  + minlength/2 + 'px);" class="face-' + face + '">'
+            htmlstring+= '<div style="-moz-transform: ' + transforms[face] + ' translateZ('  + (minlength/2-1) + 'px);" class="face-' + face + '">'
             for facet, j in @model.state[i]
                 hideclass = ("turn-#{mov}-hidden" for mov in @invisibles[face][j]).join(' ')
                 htmlstring+= '<div class="facet-' + face + j + ' ' + hideclass + '"><div></div></div>'
         for eventtype in ['transitionend', 'oTransitionEnd', 'webkitTransitionEnd']
             @$showcube.addEventListener eventtype, @transitionend
 
+        # force a repaint of the cube to avoid display bugs
+        $cubeofcoffee = document.querySelectorAll '.cubeofcoffee'
+        for $container in $cubeofcoffee
+            $container.style.visibility = 'hidden'
+
+        window.setTimeout ->
+            for $container in $cubeofcoffee
+                $container.style.borderWidth = "" + 2 + 'px'
+                $container.style.visibility = 'visible'
+        , 0
+
+
     renderColors: =>
         for face, i in @model.state
             for facet, j in face
 
 class CubeController
 
+    current: -1
+
+    mode: 'stop'
+
     view: undefined
 
     turnlist: ["R2", "U", "R", "U", "R'", "U'", "R'", "U'", "R'", "U", "R'"]
     constructor:(cubeview) ->
         @view = cubeview
 
-    emptyTurnList: =>
+        # add the text movements
+        @view.$container.insertAdjacentHTML "beforeend", '<div class="movtext">' + @turnlist.join(' ') + '</div><div class="movbuttons"><a class="first" href="#">|◀</a><a class="previous" href="#">◀|</a><a class="previous-play" href="#">◀</a><a class="stop" href="#">◼</a><a class="next-play" href="#">▶</a><a class="next" href="#">|▶</a><a class="last" href="#">▶|</a></div>'
+
+        # buttons clicks
+        @view.$container.querySelector('.next-play').addEventListener 'click', =>
+            @next_play()
+
+    end_callback: =>
+        if @mode is 'play'
+            if @current < @turnlist.length - 1
+                @next_play()
+            else
+                @mode = 'stop'
+                @current = -1
+        else if @mode is 'play_stop'
+            @mode = 'stop'
+
+
+    next_play: =>
         window.setTimeout =>
-            @view.turn @turnlist.shift(), =>
-                if @turnlist.length > 0
-                    @emptyTurnList()
+            @mode = 'play'
+            @current++
+            @view.turn @turnlist[@current], @end_callback
 
 document.addEventListener 'DOMContentLoaded', ->
 
     for $container in document.querySelectorAll '.cubeofcoffee'
         window.$test = new CubeController(new CubeView($container))
-        $container.style.visibility = 'hidden'
-
-    # to force a reflow
-    window.setTimeout ->
-        for $container in document.querySelectorAll '.cubeofcoffee'
-            $container.style.width = $container.clientWidth + 1 + 'px'
-            $container.style.visibility = 'visible'
-            window.$test.emptyTurnList()
-    , 0
-
-
 
 
         #       window.setInterval ->
         -ms-perspective-origin: 400% -200%;
         perspective-origin: 400% -200%;
         width: 100%;
-        height: 100%;
+        height: 70%;
         position: relative;
     }
+    .movtext {
+        font-family: arial, serif;
+        font-size: 0.8em;
+        color: black;
+        position: absolute;
+        bottom: 0;
+    }
+    .movbuttons {
+        text-align: center;
+        position: absolute;
+        bottom: -1.4em;
+        width: 100%;
+    }
+    .movbuttons a {
+        text-decoration: none;
+        color: black;
+        font-weight: bold;
+        font-size: 1em;
+        font-family: tahoma,verdana,geneva,lucida,'lucida grande',arial,helvetica,sans-serif;
+        border-right: 2px solid black;
+        border-bottom: 2px solid black;
+        padding: 0.1em;
+    }
+    .movbuttons a:hover {
+        color: white;
+        background-color: black;
+    }
+    .first {
+        border-left: 2px solid black;
+    }
     .cube {
-        width: 100%;
-        height: 100%;
         position: absolute;
         -moz-transform-style: preserve-3d;
         -webkit-transform-style: preserve-3d;
     }
 
     .cube.transitioned {
-        -moz-transition: -moz-transform 0.3s;
+        -moz-transition: -moz-transform 0.2s;
+        -moz-transition-timing-function: ease-in;
         -webkit-transition: -webkit-transform 1s;
         -o-transition: -o-transform 1s;
         -ms-transition: -ms-transform 1s;
-// Generated by CoffeeScript 1.3.1
+// Generated by CoffeeScript 1.3.3
 (function() {
   var CubeController, CubeView,
     __bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; };
 
   CubeView = (function() {
 
-    CubeView.name = 'CubeView';
-
     CubeView.prototype.faces = {
       3: 'B',
       5: 'D',
     };
 
     CubeView.prototype.colors = {
-      '1': 'yellow',
-      '2': 'blue',
-      '3': 'red',
-      '4': 'green',
-      '5': 'orange',
-      '6': 'white'
+      1: 'yellow',
+      2: 'blue',
+      3: 'red',
+      4: 'green',
+      5: 'orange',
+      6: 'white'
     };
 
     CubeView.prototype.invisibles = {
 
     CubeView.prototype.movcallback = void 0;
 
+    CubeView.prototype.coef = 2 / 3;
+
+    CubeView.prototype.minlength = void 0;
+
     function CubeView($container) {
       this.transitionend = __bind(this.transitionend, this);
 
       this.renderColors = __bind(this.renderColors, this);
 
-      var $viewer, eventtype, face, facet, hideclass, htmlstring, i, j, minlength, mov, perspective, transforms, _i, _j, _len, _len1, _ref, _ref1, _ref2;
+      var $cubeofcoffee, $viewer, eventtype, face, facet, height, hideclass, htmlstring, i, j, minlength, mov, offsetX, offsetY, perspective, remaining_spaceX, remaining_spaceY, transforms, _i, _j, _k, _len, _len1, _len2, _ref, _ref1, _ref2;
       this.$container = $container;
       this.model = new Cube;
       minlength = $container.clientWidth;
-      if ($container.clientHeight < minlength) {
-        minlength = $container.clientHeight;
+      height = $container.clientHeight;
+      if (height < minlength) {
+        minlength = height;
       }
-      perspective = minlength * 10;
+      this.minlength = minlength;
+      minlength = minlength * this.coef;
+      perspective = minlength * 10 / this.coef;
+      offsetX = perspective / 200 * this.coef * 4;
+      offsetY = perspective / 200 * this.coef * 2;
+      remaining_spaceX = (1 - this.coef) * this.minlength - offsetX;
+      remaining_spaceY = (1 - this.coef) * this.minlength - offsetY;
+      offsetX += remaining_spaceX / 4;
+      offsetY += remaining_spaceY / 4;
       transforms = {
         'F': '',
         'B': 'rotateY(180deg)',
         'U': 'rotateX(90deg)',
         'D': 'rotateX(-90deg)'
       };
-      htmlstring = '<div class="viewer" style="-moz-perspective: ' + perspective + 'px"><div class="cube showcube">';
+      htmlstring = '<div class="viewer" style="left:' + offsetX + 'px;top:' + offsetY + 'px;-moz-perspective: ' + perspective + 'px"><div class="cube showcube" style="height:' + minlength + 'px;width:' + minlength + 'px;">';
       _ref = this.faces;
       for (i in _ref) {
         face = _ref[i];
-        htmlstring += '<div style="-moz-transform: ' + transforms[face] + ' translateZ(' + minlength / 2 + 'px);" class="face-' + face + '">';
+        htmlstring += '<div style="-moz-transform: ' + transforms[face] + ' translateZ(' + (minlength / 2 - 1) + 'px);" class="face-' + face + '">';
         _ref1 = this.model.state[i];
         for (j = _i = 0, _len = _ref1.length; _i < _len; j = ++_i) {
           facet = _ref1[j];
         eventtype = _ref2[_j];
         this.$showcube.addEventListener(eventtype, this.transitionend);
       }
+      $cubeofcoffee = document.querySelectorAll('.cubeofcoffee');
+      for (_k = 0, _len2 = $cubeofcoffee.length; _k < _len2; _k++) {
+        $container = $cubeofcoffee[_k];
+        $container.style.visibility = 'hidden';
+      }
+      window.setTimeout(function() {
+        var _l, _len3, _results;
+        _results = [];
+        for (_l = 0, _len3 = $cubeofcoffee.length; _l < _len3; _l++) {
+          $container = $cubeofcoffee[_l];
+          $container.style.borderWidth = "" + 2 + 'px';
+          _results.push($container.style.visibility = 'visible');
+        }
+        return _results;
+      }, 0);
     }
 
     CubeView.prototype.renderColors = function() {
 
   CubeController = (function() {
 
-    CubeController.name = 'CubeController';
+    CubeController.prototype.current = -1;
+
+    CubeController.prototype.mode = 'stop';
 
     CubeController.prototype.view = void 0;
 
     CubeController.prototype.turnlist = ["R2", "U", "R", "U", "R'", "U'", "R'", "U'", "R'", "U", "R'"];
 
     function CubeController(cubeview) {
-      this.emptyTurnList = __bind(this.emptyTurnList, this);
+      this.next_play = __bind(this.next_play, this);
+
+      this.end_callback = __bind(this.end_callback, this);
+
+      var _this = this;
       this.view = cubeview;
+      this.view.$container.insertAdjacentHTML("beforeend", '<div class="movtext">' + this.turnlist.join(' ') + '</div><div class="movbuttons"><a class="first" href="#">|◀</a><a class="previous" href="#">◀|</a><a class="previous-play" href="#">◀</a><a class="stop" href="#">◼</a><a class="next-play" href="#">▶</a><a class="next" href="#">|▶</a><a class="last" href="#">▶|</a></div>');
+      this.view.$container.querySelector('.next-play').addEventListener('click', function() {
+        return _this.next_play();
+      });
     }
 
-    CubeController.prototype.emptyTurnList = function() {
+    CubeController.prototype.end_callback = function() {
+      if (this.mode === 'play') {
+        if (this.current < this.turnlist.length - 1) {
+          return this.next_play();
+        } else {
+          this.mode = 'stop';
+          return this.current = -1;
+        }
+      } else if (this.mode === 'play_stop') {
+        return this.mode = 'stop';
+      }
+    };
+
+    CubeController.prototype.next_play = function() {
       var _this = this;
       return window.setTimeout(function() {
-        return _this.view.turn(_this.turnlist.shift(), function() {
-          if (_this.turnlist.length > 0) {
-            return _this.emptyTurnList();
-          }
-        });
+        _this.mode = 'play';
+        _this.current++;
+        return _this.view.turn(_this.turnlist[_this.current], _this.end_callback);
       });
     };
 
   })();
 
   document.addEventListener('DOMContentLoaded', function() {
-    var $container, _i, _len, _ref;
+    var $container, _i, _len, _ref, _results;
     _ref = document.querySelectorAll('.cubeofcoffee');
+    _results = [];
     for (_i = 0, _len = _ref.length; _i < _len; _i++) {
       $container = _ref[_i];
-      window.$test = new CubeController(new CubeView($container));
-      $container.style.visibility = 'hidden';
+      _results.push(window.$test = new CubeController(new CubeView($container)));
     }
-    return window.setTimeout(function() {
-      var $container, _j, _len1, _ref1, _results;
-      _ref1 = document.querySelectorAll('.cubeofcoffee');
-      _results = [];
-      for (_j = 0, _len1 = _ref1.length; _j < _len1; _j++) {
-        $container = _ref1[_j];
-        $container.style.width = $container.clientWidth + 1 + 'px';
-        $container.style.visibility = 'visible';
-        _results.push(window.$test.emptyTurnList());
-      }
-      return _results;
-    }, 0);
+    return _results;
   });
 
 }).call(this);
Tip: Filter by directory path e.g. /media app.js to search for public/media/app.js.
Tip: Use camelCasing e.g. ProjME to search for ProjectModifiedEvent.java.
Tip: Filter by extension type e.g. /repo .js to search for all .js files in the /repo directory.
Tip: Separate your search with spaces e.g. /ssh pom.xml to search for src/ssh/pom.xml.
Tip: Use ↑ and ↓ arrow keys to navigate and return to view the file.
Tip: You can also navigate files with Ctrl+j (next) and Ctrl+k (previous) and view the file with Ctrl+o.
Tip: You can also navigate files with Alt+j (next) and Alt+k (previous) and view the file with Alt+o.