Sentence padding, word count stats, etc.

src/handlers/audio_synth_handler.rs

@@ -94,12 +94,16 @@ impl AudioSynthHandler {
   // TODO: Return errors.
   /// Create audio from the sentence.
   fn create_audio(&self, sentence: &str) -> Vec<u8> {
-    let words = split_sentence(sentence);
+    let mut words = split_sentence(sentence);
 
     if words.len() == 0 {
       // TODO: Raise error!
     }
 
+    // This file adds extra silent padding at both ends.
+    words.insert(0, "_blank".to_string());
+    words.push("_blank".to_string());
+
     // Note: Keeping a list of buffered file readers is stupid and is simply 
     // being done for this example. I'll create a multithreaded shared LRU cache
     // that reads from the disk and uses the dictionary word as the lookup key.

src/handlers/vocab_list_handler.rs

@@ -56,6 +56,8 @@ impl VocabListHandler {
             Err(_) => { continue; },
             Ok(s) => {
               let word = s.replace(".wav", "");
+              if (word.starts_with("_")) { continue; }
+              if (word.ends_with("_")) { continue; }
               words.push(word);
             }
           }

src/web/css/style.css

@@ -58,3 +58,9 @@ button {
   padding: 5px;
   border: 1px;
 }
+
+#stats {
+  margin: 20px 0;
+  font-size: 0.8em;
+  color #777;
+}

src/web/js/dictionary.js

@@ -8,16 +8,22 @@
     words: [],
 
     /** Load the word list from the server. */
-    load: function() {
+    load: function(successCallback, failureCallback) {
       var that = this;
       $.get('/words')
           .done(function(data) {
             console.log('success', data);
             that.words = data.words;
+            if (typeof successCallback !== 'undefined') {
+              successCallback(that);
+            }
           })
           .fail(function() {
             // Page has catastrophically failed. Suggest reload.
             console.error('failure');
+            if (typeof successCallback !== 'undefined') {
+              failureCallback(that);
+            }
           });
     },
 

src/web/js/script.js

@@ -12,6 +12,12 @@
   var handleTyping = function(ev) {
     var sentence = $(this).val(),
         suggestedWords = [];
+
+    if (ev.keyCode === 27) {
+      $(this).val(''); // ESC key.
+      sentence = '';
+    }
+
     if (Dictionary.checkSentence(sentence)) {
       setState('ok');
     } else {
@@ -22,6 +28,14 @@
     uiSetSuggestedWords(suggestedWords);
   }
 
+  /** Handle typing outside of the input box. */
+  var handleBodyTyping = function(ev) {
+    if (ev.keyCode === 27) {
+      // Handle ESC key.
+      $('input').select();
+    }
+  }
+
   /** Handle form submission. */
   var formSubmit = function(ev) {
     var $audio = $('#sound'),
@@ -69,6 +83,10 @@
     $('ul').html(html);
   }
 
+  var uiDictionaryLoadCallback = function(dictionary) {
+    $('#wordcount').html(dictionary.words.length);
+  }
+
   // TODO: Temp for debug.
   window.setState = setState;
 
@@ -78,7 +96,8 @@
     //$('input').on('keypress', handleTyping);
     //$('input').on('keydown', handleTyping);
     $('input').on('keyup', handleTyping);
-    Dictionary.load();
+    $('body').on('keyup', handleBodyTyping);
+    Dictionary.load(uiDictionaryLoadCallback);
   }
 
   $(function() {

web/index.html

@@ -1,7 +1,7 @@
 <!doctype html>
 <html>
   <head>
-    <title>Title</title>
+    <title>Jungle Horse</title>
     <link rel="stylesheet" href="/assets/style.css" type="text/css">
     <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
     <meta name="viewport" content="initial-scale=1, maximum-scale=1">
@@ -17,6 +17,9 @@
           <button id="submit">Submit</button>
         </form>
       </div>
+      <div id="stats">
+        Currently featuring <span id="wordcount">0</span> words.
+      </div>
     </div>
     <audio id="sound"></audio>
     <script src="/assets/libraries.js"/></script>