Autoplay / URL change state

bower.json

@@ -13,6 +13,7 @@
   ],
   "dependencies": {
     "jquery": "~2.2.0",
-    "underscore": "~1.8.3"
+    "underscore": "~1.8.3",
+    "urijs": "uri.js#~1.17.0"
   }
 }

gulpfile.js

@@ -25,6 +25,7 @@ var buildCss = function() {
 var buildJs = function() {
   return gulp.src([
       'src/web/js/dictionary.js',
+      'src/web/js/url.js',
       'src/web/js/script.js',
     ])
     .pipe(concat('script.js'))

src/web/css/style.css

@@ -1,7 +1,7 @@
 
 h1 {
+  font-family: ubuntu, tahoma;
   font-size: 1.8em;
-  font-family: arial;
   text-align: center;
   color: #333;
 }
@@ -64,3 +64,8 @@ button {
   font-size: 0.8em;
   color #777;
 }
+
+ul#stats {
+  list-style-type: none;
+}
+

src/web/js/dictionary.js

@@ -70,6 +70,14 @@
       }
     },
 
+    /**
+     * Process a raw sentence into a cleaned up sentence (no extra
+     * spaces, etc.). Returns a string sentence.
+     */
+    cleanSentence: function(rawSentence) {
+      return this.splitSentence(rawSentence).join(' ');
+    },
+
     /** Process a raw sentence into words and other tokens. */
     splitSentence: function(rawSentence) {
       return _.filter(_.map(rawSentence.split(/\s+/),

src/web/js/script.js

@@ -43,6 +43,8 @@
         query = encodeURIComponent(sentence),
         url = '/speak?q=' + query;
 
+    Url.setSentence(sentence);
+
     $audio.attr('src', url)
     $audio[0].addEventListener('canplaythrough', function() {
       // Play after a short delay, just to make sure sound doesn't tear.
@@ -80,13 +82,21 @@
       html += '<li>' + suggestedWord + '</li>';
     }
 
-    $('ul').html(html);
+    $('#typeahead ul').html(html);
   }
 
   var uiDictionaryLoadCallback = function(dictionary) {
     $('#wordcount').html(dictionary.words.length);
   }
 
+  var uiInitialize = function() {
+    var sentence = Url.getSentence();
+    if (sentence.length > 0) {
+      $('input').val(sentence);
+      $('form').submit();
+    }
+  }
+
   // TODO: Temp for debug.
   window.setState = setState;
 
@@ -98,6 +108,8 @@
     $('input').on('keyup', handleTyping);
     $('body').on('keyup', handleBodyTyping);
     Dictionary.load(uiDictionaryLoadCallback);
+
+    uiInitialize();
   }
 
   $(function() {

src/web/js/url.js

@@ -0,0 +1,37 @@
+'use strict';
+
+// TODO: Use real AMD.
+(function() {
+
+  // TODO: Don't install globally.
+  /** Manipulate the URL. */
+  window.Url = {
+
+    /** Get the sentence from the `window.location`. */
+    getSentence: function() {
+      return this.toSentence(window.location);
+    },
+
+    /** Set the `window.history` sentence. */
+    setSentence: function(rawSentence) {
+      var urlHash = this.fromSentence(rawSentence);
+      window.history.replaceState(null, null, urlHash);
+    },
+
+    /** Encode a sentence in a URL hash. */
+    fromSentence: function(rawSentence) {
+      var cleanedSentence = Dictionary.cleanSentence(rawSentence),
+          uriEncoded = encodeURIComponent(cleanedSentence);
+      return new URI("/").hash(uriEncoded).toString();
+    },
+
+    /** Decode a sentence from a URL. */
+    toSentence: function(url) {
+      var urlHash = new URI(url).hash(),
+          uriDecoded = decodeURIComponent(urlHash),
+          hashless = uriDecoded.replace('#', '');
+      return Dictionary.cleanSentence(hashless);
+    },
+  }
+
+}());

web/index.html

@@ -17,9 +17,10 @@
           <button id="submit">Submit</button>
         </form>
       </div>
-      <div id="stats">
-        Currently featuring <span id="wordcount">0</span> words.
-      </div>
+      <ul id="stats">
+        <li>Currently featuring <span id="wordcount">0</span> Trump words.</li>
+        <li>Next up: Hillary.</li>
+      </ul>
     </div>
     <audio id="sound"></audio>
     <script src="/assets/libraries.js"/></script>