add progress bar to game import

app/views/game/importGame.scala.html

@@ -19,7 +19,7 @@ moreCss = moreCss) {
       }
     </label>
     <button class="submit button" type="submit">@trans.importGame()</button>
-    <span class="wait">Be patient, the import can take some time</span>
+    <div class="progression"></div>
   </form>
 </div>
 }

public/javascripts/big.js

@@ -416,8 +416,14 @@ var lichess_translations = [];
       $(this).parent().submit();
     });
 
-    $("#import_game form").on('submit', function() {
-      $(this).find('button').hide().end().find('.wait').show();
+    $("#import_game form").submit(function() {
+      var pgn = $(this).find('textarea').val();
+      var nbMoves = parseInt(pgn.replace(/\n/g, ' ').replace(/^.+\s(\d+)\..+$/, '$1'));
+      var delay = 100;
+      var duration = nbMoves * delay * 2.1 + 1000;
+      $(this).find('button').hide().end()
+      .find('.error').hide().end()
+      .find('.progression').show().animate({width: '100%'}, duration);
       return true;
     });
 

public/stylesheets/common.css

@@ -675,7 +675,8 @@ div.hooks td.action:hover,
 div.hooks table.empty_table tr:hover,
 div.progressbar.flashy div,
 .button.strong:hover,
-div.locale_menu a.active
+div.locale_menu a.active,
+#import_game .progression 
 {
   color: #fff;
   background: #d85000;

public/stylesheets/import.css

@@ -29,3 +29,12 @@
 #import_game form .wait {
   display: none;
 }
+
+#import_game .progression {
+  margin: 20px 0;
+  width: 0px;
+  display: none;
+  height: 2em;
+  border-radius: 5px;
+  border: 1px solid #888;
+}

scalachess

@@ -1 +1 @@
-Subproject commit 82075a254e2ecae74f483cfc8f2605e41237ca55
+Subproject commit 430809275150ccb2af87dc63e1f8e39bb766df48