refactor keyboardMove/blindInput WIP

app/views/round/player.scala

@@ -35,6 +35,7 @@ object player {
       underchat = Some(bits underchat pov.game),
       moreJs = frag(
         roundTag,
+        ctx.blindMode option jsAt("javascripts/keyboardMove.js"),
         embedJs(s"""window.customWS = true; window.onload = function() {
 LichessRound.boot({ data: ${safeJsonValue(data)}, i18n: ${jsI18n(pov.game)}, userId: $jsUserId, chat: ${jsOrNull(chatJson)},
 ${tour.??(t => s"tour: ${toJson(tour.flatMap(_.top).map(lila.tournament.JsonView.top(_, lightUser)))}")}

ui/gulp/tsProject.js

@@ -9,7 +9,7 @@ const uglify = require('gulp-uglify');
 const size = require('gulp-size');
 const tsify = require('tsify');
 
-module.exports = (standalone, fileBaseName, dir) => {
+module.exports = (standalone, fileBaseName, dir, standaloneFiles) => {
 
   const browserifyOpts = (debug) => ({
     entries: [`${dir}/src/main.ts`],
@@ -33,23 +33,42 @@ module.exports = (standalone, fileBaseName, dir) => {
     .pipe(source(`${fileBaseName}.js`))
     .pipe(destination());
 
+  const standalones = gulp.series(standaloneFiles.map(file => {
+    return function standalone() {
+      return browserify({
+        entries: [file],
+        debug: true
+      })
+        .plugin(tsify)
+        .bundle()
+        .pipe(source(file.replace(/\.ts/, '.min.js')))
+        .pipe(buffer())
+        .pipe(uglify())
+        .pipe(size())
+        .pipe(destination());
+    }
+  }));
+
+  const nonEmptyStandalones = standaloneFiles ? standalones : gulp.noop();
+
   const watch = () => {
 
-    const bundle = () => bundler
+    const bundle = gulp.series([nonEmptyStandalones, () => bundler
       .bundle()
       .on('error', error => logger.error(colors.red(error.message)))
       .pipe(source(`${fileBaseName}.js`))
-      .pipe(destination());
+      .pipe(destination())
+    ]);
 
     const bundler = watchify(
       browserify(Object.assign({}, watchify.args, browserifyOpts(true)))
-        .plugin(tsify)
+      .plugin(tsify)
     ).on('update', bundle).on('log', logger.info);
 
     return bundle();
   };
 
-  gulp.task('prod', prod);
-  gulp.task('dev', dev);
-  gulp.task('default', watch);
-};
+    gulp.task('prod', prod);
+    gulp.task('dev', gulp.series([standalones, dev]));
+    gulp.task('default', watch);
+  };

ui/round/gulpfile.js

@@ -1,3 +1,3 @@
 const lilaGulp = require('../gulp/tsProject.js');
 
-lilaGulp('LichessRound', 'lichess.round', __dirname);
+lilaGulp('LichessRound', 'lichess.round', __dirname, ['src/plugins/keyboardMove.ts']);

ui/round/src/blind.ts

@@ -1,5 +1,6 @@
 import { throttle } from 'common';
 import { router } from 'game';
+import * as round from './round';
 import RoundController from './ctrl';
 
 let element: HTMLElement;
@@ -11,18 +12,35 @@ export const reload = throttle(1000, (ctrl: RoundController) => {
       router.player(ctrl.data)
     ) + '/text',
     success(html) {
-      $(element).html(html).find('form').submit(function(this: HTMLElement) {
-        var text = $(this).find('.move').val();
-        var move = {
-          from: text.substr(0, 2),
-          to: text.substr(2, 2),
-          promotion: text.substr(4, 1)
-        };
-        ctrl.socket.send("move", move, {
-          ackable: true
+      $(element).html(html).find('form').each(function(this: HTMLFormElement) {
+        var $form = $(this);
+        var $input = $form.find('.move').focus();
+        // const movable = root.chessground.state.movable;
+        window.lichess.keyboardMove({
+          input: $input[0],
+          setFocus: $.noop,
+          select: function() {
+            console.log('select')
+          },
+          hasSelected: function () { return false; },
+          confirmMove: function() {
+            console.log('confirm')
+          },
+          san: function(orig: string, dest: string) {
+            console.log(orig, dest);
+            ctrl.socket.send("move", {
+              from: orig,
+              to: dest
+            }, {
+              ackable: true
+            });
+          }
+        })(round.plyStep(ctrl.data, ctrl.ply).fen, ctrl.chessground.state.movable.dests);
+        $form.submit(function() {
+          return false;
         });
-        return false;
-      }).find('.move').focus();
+      });
+      console.log($(element).find('form'));
     }
   });
 });

ui/round/src/keyboardMove.ts

@@ -26,14 +26,15 @@ export function ctrl(root: RoundController, step: Step, redraw: Redraw): Keyboar
     else root.chessground.selectSquare(key, true);
   };
   let usedSan = false;
+  const cgState = root.chessground.state;
   return {
     update(step) {
-      if (handler) handler(step.fen, root.chessground.state.movable.dests);
+      if (handler) handler(step.fen, cgState.movable.dests);
       else preHandlerBuffer = step.fen;
     },
     registerHandler(h: KeyboardMoveHandler) {
       handler = h;
-      if (preHandlerBuffer) handler(preHandlerBuffer, root.chessground.state.movable.dests);
+      if (preHandlerBuffer) handler(preHandlerBuffer, cgState.movable.dests);
     },
     hasFocus: () => focus,
     setFocus(v) {

ui/round/src/plugins/keyboardMove.ts

@@ -1,12 +1,12 @@
-var keyRegex = /^[a-h][1-8]$/;
-var fileRegex = /^[a-h]$/;
+const keyRegex = /^[a-h][1-8]$/;
+const fileRegex = /^[a-h]$/;
 
-lichess.keyboardMove = function(opts) {
+window.lichess.keyboardMove = function(opts) {
   if (opts.input.classList.contains('ready')) return;
   opts.input.classList.add('ready');
-  var writer = sanWriter();
-  var sans = null;
-  var submit = function(v, force) {
+  const writer = sanWriter();
+  let sans = null;
+  const submit = function(v: string, force?: boolean) {
     // consider 0's as O's for castling
     v = v.replace(/0/g, 'O');
     var foundUci = v.length >= 2 && sans && sanToUci(v, sans);
@@ -37,7 +37,7 @@ lichess.keyboardMove = function(opts) {
 }
 
 function makeBindings(opts, submit, clear) {
-  Mousetrap.bind('enter', function() {
+  window.Mousetrap.bind('enter', function() {
     opts.input.focus();
   });
   /* keypress doesn't cut it here;
@@ -237,6 +237,6 @@ function sanWriter() {
 }
 
 function focusChat() {
-  var chatInput = document.querySelector('.mchat input.lichess_say');
+  var chatInput = document.querySelector('.mchat input.lichess_say') as HTMLInputElement;
   if (chatInput) chatInput.focus();
 }