cube.js random-state scrambler demo

This is a simple random state scrambler created with cube.js. After the initialization is complete, click on the "generate random scramble" button to generate a random-state scramble.

Graphics are generated using Conrad Rider's VisualCube.

The demo scrambler and its code are presented below. Click here for a standalone page.

The scrambler


The code

demo.html: 

        <!DOCTYPE html>
        <head>
          <style>
            #randomstate { visibility: hidden; }
          </style>
        </head>

        <body>
          <p id="status"></p>
          <p id="randomstate">
            <button>Generate random scramble</button><br>
            <span class="result"></span>
          </p>

          <script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
          <script src="/cubejs/lib/cube.js"></script>
          <script src="/cubejs/lib/async.js"></script>
          <script src="demo.js"></script>
        </body>

demo.js: 

        (function() {
        var start, progressHandle;

        var progress = function() {
            // Add a dot each second
            $('#status').text(function(index, text) { return text + '.'; });
        };

        var initialized = function() {
            // Precomputing finished, stop adding dots
            clearInterval(progressHandle);

            // Show the duration of initialization
            var end = new Date,
                duration = (end - start) / 1000;
            $('#status').text('Initialization done in ' + duration + ' seconds.');

            // Show the scrambler
            $('#randomstate').css('visibility', 'visible');
            $('#randomstate button').on('click', generateScramble);
        };

        var generateScramble = function() {
            // Hide the initialization status on first scramble
            $('#status').hide();

            // Generate a scramble
            Cube.asyncScramble(function(alg) {
                var s = alg.replace(/\s+/g, ''),  // remove spaces
                    url = "http://cube.rider.biz/visualcube.png?size=150&alg=" + s;
                $('#randomstate .result').html(alg + "<br><img src=\"" + url + "\">");
            });
        };

        $(function() {
            $('#status').text('Initializing');

            // Start measuring time
            start = new Date;

            // Start adding dots
            progressHandle = setInterval(progress, 1000);

            // Start precomputing
            Cube.asyncInit('/cubejs/lib/worker.js', initialized);
        });
        })();