diff --git a/ui/learn/rollup.config.mjs b/ui/learn/rollup.config.mjs
index 5b767f5c20..4056937293 100644
--- a/ui/learn/rollup.config.mjs
+++ b/ui/learn/rollup.config.mjs
@@ -3,8 +3,7 @@ import rollupProject from '@build/rollupProject';
 export default rollupProject({
   main: {
     name: 'LichessLearn',
-    input: 'src/main.js',
+    input: 'src/main.ts',
     output: 'learn',
-    js: true,
   },
 });
diff --git a/ui/learn/src/assert.js b/ui/learn/src/assert.ts
similarity index 80%
rename from ui/learn/src/assert.js
rename to ui/learn/src/assert.ts
index 678dd99c63..501086a583 100644
--- a/ui/learn/src/assert.js
+++ b/ui/learn/src/assert.ts
@@ -1,14 +1,14 @@
-var readKeys = require('./util').readKeys;
+const readKeys = require('./util').readKeys;
 
 function pieceMatch(piece, matcher) {
   if (!piece) return false;
-  for (var k in matcher) if (piece[k] !== matcher[k]) return false;
+  for (const k in matcher) if (piece[k] !== matcher[k]) return false;
   return true;
 }
 
 function pieceOnAnyOf(matcher, keys) {
   return function (level) {
-    for (var i in keys) if (pieceMatch(level.chess.get(keys[i]), matcher)) return true;
+    for (const i in keys) if (pieceMatch(level.chess.get(keys[i]), matcher)) return true;
     return false;
   };
 }
@@ -34,7 +34,7 @@ module.exports = {
   noPieceOn: function (keys) {
     keys = readKeys(keys);
     return function (level) {
-      for (var key in level.chess.occupation()) if (!keys.includes(key)) return true;
+      for (const key in level.chess.occupation()) if (!keys.includes(key)) return true;
       return false;
     };
   },
@@ -43,7 +43,7 @@ module.exports = {
   },
   extinct: function (color) {
     return function (level) {
-      var fen = level.chess.fen().split(' ')[0].replace(/\//g, '');
+      const fen = level.chess.fen().split(' ')[0].replace(/\//g, '');
       return fen === (color === 'white' ? fen.toLowerCase() : fen.toUpperCase());
     };
   },
@@ -55,7 +55,7 @@ module.exports = {
   },
   lastMoveSan: function (san) {
     return function (level) {
-      var moves = level.chess.instance.history();
+      const moves = level.chess.instance.history();
       return moves[moves.length - 1] === san;
     };
   },
@@ -75,7 +75,7 @@ module.exports = {
     };
   },
   and: function () {
-    var asserts = [].slice.call(arguments);
+    const asserts = [].slice.call(arguments);
     return function (level) {
       return asserts.every(function (a) {
         return a(level);
@@ -83,7 +83,7 @@ module.exports = {
     };
   },
   or: function () {
-    var asserts = [].slice.call(arguments);
+    const asserts = [].slice.call(arguments);
     return function (level) {
       return asserts.some(function (a) {
         return a(level);
diff --git a/ui/learn/src/chess.js b/ui/learn/src/chess.ts
similarity index 80%
rename from ui/learn/src/chess.js
rename to ui/learn/src/chess.ts
index f49d0fb49d..61161c06c8 100644
--- a/ui/learn/src/chess.js
+++ b/ui/learn/src/chess.ts
@@ -1,12 +1,12 @@
-var Chess = require('chess.js').Chess;
-var util = require('./util');
+const Chess = require('chess.js').Chess;
+const util = require('./util');
 
 module.exports = function (fen, appleKeys) {
-  var chess = new Chess(fen);
+  const chess = new Chess(fen);
 
   // adds enemy pawns on apples, for collisions
   if (appleKeys) {
-    var color = chess.turn() === 'w' ? 'b' : 'w';
+    const color = chess.turn() === 'w' ? 'b' : 'w';
     appleKeys.forEach(function (key) {
       chess.put(
         {
@@ -23,8 +23,8 @@ module.exports = function (fen, appleKeys) {
   }
 
   function setColor(c) {
-    var turn = c === 'white' ? 'w' : 'b';
-    var newFen = util.setFenTurn(chess.fen(), turn);
+    const turn = c === 'white' ? 'w' : 'b';
+    let newFen = util.setFenTurn(chess.fen(), turn);
     chess.load(newFen);
     if (getColor() !== c) {
       // the en passant square prevents setting color
@@ -33,7 +33,7 @@ module.exports = function (fen, appleKeys) {
     }
   }
 
-  var findCaptures = function () {
+  const findCaptures = function () {
     return chess
       .moves({
         verbose: true,
@@ -52,9 +52,9 @@ module.exports = function (fen, appleKeys) {
   return {
     dests: function (opts) {
       opts = opts || {};
-      var dests = {};
+      const dests = {};
       chess.SQUARES.forEach(function (s) {
-        var ms = chess.moves({
+        const ms = chess.moves({
           square: s,
           verbose: true,
           legal: !opts.illegal,
@@ -79,16 +79,16 @@ module.exports = function (fen, appleKeys) {
       });
     },
     occupation: function () {
-      var map = {};
+      const map = {};
       chess.SQUARES.forEach(function (s) {
-        var p = chess.get(s);
+        const p = chess.get(s);
         if (p) map[s] = p;
       });
       return map;
     },
     kingKey: function (color) {
-      for (var i in chess.SQUARES) {
-        var p = chess.get(chess.SQUARES[i]);
+      for (const i in chess.SQUARES) {
+        const p = chess.get(chess.SQUARES[i]);
         if (p && p.type === 'k' && p.color === (color === 'white' ? 'w' : 'b')) return chess.SQUARES[i];
       }
     },
@@ -97,7 +97,7 @@ module.exports = function (fen, appleKeys) {
     },
     findUnprotectedCapture: function () {
       return findCaptures().find(function (capture) {
-        var clone = new Chess(chess.fen());
+        const clone = new Chess(chess.fen());
         clone.move({ from: capture.orig, to: capture.dest });
         return !clone
           .moves({
@@ -110,9 +110,9 @@ module.exports = function (fen, appleKeys) {
     },
     checks: function () {
       if (!chess.in_check()) return null;
-      var color = getColor();
+      const color = getColor();
       setColor(color === 'white' ? 'black' : 'white');
-      var checks = chess
+      const checks = chess
         .moves({
           verbose: true,
         })
@@ -129,11 +129,11 @@ module.exports = function (fen, appleKeys) {
       return checks;
     },
     playRandomMove: function () {
-      var moves = chess.moves({
+      const moves = chess.moves({
         verbose: true,
       });
       if (moves.length) {
-        var move = moves[Math.floor(Math.random() * moves.length)];
+        const move = moves[Math.floor(Math.random() * moves.length)];
         chess.move(move);
         return {
           orig: move.from,
diff --git a/ui/learn/src/congrats.js b/ui/learn/src/congrats.ts
similarity index 90%
rename from ui/learn/src/congrats.js
rename to ui/learn/src/congrats.ts
index a62f683128..746d24aac8 100644
--- a/ui/learn/src/congrats.js
+++ b/ui/learn/src/congrats.ts
@@ -1,5 +1,5 @@
 function shuffle(a) {
-  var j, x, i;
+  let j, x, i;
   for (i = a.length; i; i -= 1) {
     j = Math.floor(Math.random() * i);
     x = a[i - 1];
@@ -8,7 +8,7 @@ function shuffle(a) {
   }
 }
 
-var list = [
+const list = [
   'awesome',
   'excellent',
   'greatJob',
@@ -22,7 +22,7 @@ var list = [
 ];
 shuffle(list);
 
-var it = 0;
+let it = 0;
 
 module.exports = function () {
   return list[it++ % list.length];
diff --git a/ui/learn/src/ground.js b/ui/learn/src/ground.ts
similarity index 82%
rename from ui/learn/src/ground.js
rename to ui/learn/src/ground.ts
index a84e58aab9..38b9aa9583 100644
--- a/ui/learn/src/ground.js
+++ b/ui/learn/src/ground.ts
@@ -1,14 +1,14 @@
-var chessground = require('chessground');
-var raf = chessground.util.requestAnimationFrame;
-var util = require('./util');
+const chessground = require('chessground');
+const raf = chessground.util.requestAnimationFrame;
+const util = require('./util');
 const timeouts = require('./timeouts');
 
-var cg = new chessground.controller();
+const cg = new chessground.controller();
 
 module.exports = {
   instance: cg,
   set: function (opts) {
-    var check = opts.chess.instance.in_check();
+    const check = opts.chess.instance.in_check();
     cg.set({
       fen: opts.chess.fen(),
       lastMove: null,
@@ -68,7 +68,7 @@ module.exports = {
     });
   },
   fen: function (fen, color, dests, lastMove) {
-    var config = {
+    const config = {
       turnColor: color,
       fen: fen,
       movable: {
@@ -80,7 +80,7 @@ module.exports = {
     cg.set(config);
   },
   check: function (chess) {
-    var checks = chess.checks();
+    const checks = chess.checks();
     cg.set({
       check: checks ? checks[0].dest : null,
     });
@@ -92,8 +92,8 @@ module.exports = {
       );
   },
   promote: function (key, role) {
-    var pieces = {};
-    var piece = cg.data.pieces[key];
+    const pieces = {};
+    const piece = cg.data.pieces[key];
     if (piece && piece.role === 'pawn') {
       pieces[key] = {
         color: piece.color,
@@ -114,7 +114,7 @@ module.exports = {
   },
   showCapture: function (move) {
     raf(function () {
-      var $square = $('#learn-app piece[data-key=' + move.orig + ']');
+      const $square = $('#learn-app piece[data-key=' + move.orig + ']');
       $square.addClass('wriggle');
       timeouts.setTimeout(function () {
         $square.removeClass('wriggle');
@@ -124,11 +124,11 @@ module.exports = {
     });
   },
   showCheckmate: function (chess) {
-    var turn = chess.instance.turn() === 'w' ? 'b' : 'w';
-    var fen = [cg.getFen(), turn, '- - 0 1'].join(' ');
+    const turn = chess.instance.turn() === 'w' ? 'b' : 'w';
+    const fen = [cg.getFen(), turn, '- - 0 1'].join(' ');
     chess.instance.load(fen);
-    var kingKey = chess.kingKey(turn === 'w' ? 'black' : 'white');
-    var shapes = chess.instance
+    const kingKey = chess.kingKey(turn === 'w' ? 'black' : 'white');
+    const shapes = chess.instance
       .moves({
         verbose: true,
       })
diff --git a/ui/learn/src/item.js b/ui/learn/src/item.ts
similarity index 72%
rename from ui/learn/src/item.js
rename to ui/learn/src/item.ts
index 85902d2f86..db05751b70 100644
--- a/ui/learn/src/item.js
+++ b/ui/learn/src/item.ts
@@ -1,18 +1,18 @@
-var m = require('mithril');
-var util = require('./util');
+const m = require('mithril');
+const util = require('./util');
 
 module.exports = {
   ctrl: function (blueprint) {
-    var items = {};
+    const items = {};
     util.readKeys(blueprint.apples).forEach(function (key) {
       items[key] = 'apple';
     });
 
-    var get = function (key) {
+    const get = function (key) {
       return items[key];
     };
 
-    var list = function () {
+    const list = function () {
       return Object.keys(items).map(get);
     };
 
@@ -28,8 +28,8 @@ module.exports = {
         return list().includes(item);
       },
       appleKeys: function () {
-        var keys = [];
-        for (var k in items) if (items[k] === 'apple') keys.push(k);
+        const keys = [];
+        for (const k in items) if (items[k] === 'apple') keys.push(k);
         return keys;
       },
     };
diff --git a/ui/learn/src/level.js b/ui/learn/src/level.ts
similarity index 78%
rename from ui/learn/src/level.js
rename to ui/learn/src/level.ts
index 16399b159c..7ce4854353 100644
--- a/ui/learn/src/level.js
+++ b/ui/learn/src/level.ts
@@ -1,20 +1,20 @@
-var m = require('mithril');
-var makeItems = require('./item').ctrl;
-var itemView = require('./item').view;
-var makeScenario = require('./scenario');
-var makeChess = require('./chess');
-var ground = require('./ground');
-var scoring = require('./score');
-var sound = require('./sound');
-var promotion = require('./promotion');
+const m = require('mithril');
+const makeItems = require('./item').ctrl;
+const itemView = require('./item').view;
+const makeScenario = require('./scenario');
+const makeChess = require('./chess');
+const ground = require('./ground');
+const scoring = require('./score');
+const sound = require('./sound');
+const promotion = require('./promotion');
 const timeouts = require('./timeouts');
 
 module.exports = function (blueprint, opts) {
-  var items = makeItems({
+  const items = makeItems({
     apples: blueprint.apples,
   });
 
-  var vm = {
+  const vm = {
     lastStep: false,
     completed: false,
     willComplete: false,
@@ -23,7 +23,7 @@ module.exports = function (blueprint, opts) {
     nbMoves: 0,
   };
 
-  var complete = function () {
+  const complete = function () {
     vm.willComplete = true;
     vm.score += scoring.getLevelBonus(blueprint, vm.nbMoves);
     opts.onCompleteImmediate();
@@ -43,7 +43,7 @@ module.exports = function (blueprint, opts) {
   // cheat
   // Mousetrap.bind(['shift+enter'], complete);
 
-  var assertData = function () {
+  const assertData = function () {
     return {
       scenario: scenario,
       chess: chess,
@@ -51,21 +51,21 @@ module.exports = function (blueprint, opts) {
     };
   };
 
-  var detectFailure = function () {
-    var failed = blueprint.failure && blueprint.failure(assertData());
+  const detectFailure = function () {
+    const failed = blueprint.failure && blueprint.failure(assertData());
     if (failed) sound.failure();
     return failed;
   };
 
-  var detectSuccess = function () {
+  const detectSuccess = function () {
     if (blueprint.success) return blueprint.success(assertData());
     else return !items.hasItem('apple');
   };
 
-  var detectCapture = function () {
+  const detectCapture = function () {
     if (!blueprint.detectCapture) return false;
-    var fun = blueprint.detectCapture === 'unprotected' ? 'findUnprotectedCapture' : 'findCapture';
-    var move = chess[fun]();
+    const fun = blueprint.detectCapture === 'unprotected' ? 'findUnprotectedCapture' : 'findCapture';
+    const move = chess[fun]();
     if (!move) return;
     vm.failed = true;
     ground.stop();
@@ -74,9 +74,9 @@ module.exports = function (blueprint, opts) {
     return true;
   };
 
-  var sendMove = function (orig, dest, prom) {
+  const sendMove = function (orig, dest, prom) {
     vm.nbMoves++;
-    var move = chess.move(orig, dest, prom);
+    const move = chess.move(orig, dest, prom);
     if (move) ground.fen(chess.fen(), blueprint.color, {});
     else {
       // moving into check
@@ -85,7 +85,7 @@ module.exports = function (blueprint, opts) {
       sound.failure();
       return m.redraw();
     }
-    var took = false,
+    let took = false,
       inScenario,
       captured = false;
     items.withItem(move.to, function (item) {
@@ -116,7 +116,7 @@ module.exports = function (blueprint, opts) {
     if (vm.failed) {
       if (blueprint.showFailureFollowUp && !captured)
         timeouts.setTimeout(function () {
-          var rm = chess.playRandomMove();
+          const rm = chess.playRandomMove();
           ground.fen(chess.fen(), blueprint.color, {}, [rm.orig, rm.dest]);
         }, 600);
     } else {
@@ -135,8 +135,8 @@ module.exports = function (blueprint, opts) {
     });
   };
 
-  var onMove = function (orig, dest) {
-    var piece = ground.get(dest);
+  const onMove = function (orig, dest) {
+    const piece = ground.get(dest);
     if (!piece || piece.color !== blueprint.color) return;
     if (!promotion.start(orig, dest, sendMove)) sendMove(orig, dest);
   };
diff --git a/ui/learn/src/main.js b/ui/learn/src/main.ts
similarity index 100%
rename from ui/learn/src/main.js
rename to ui/learn/src/main.ts
diff --git a/ui/learn/src/map/mapMain.js b/ui/learn/src/map/mapMain.ts
similarity index 64%
rename from ui/learn/src/map/mapMain.js
rename to ui/learn/src/map/mapMain.ts
index b8d34c9116..fd86012ed7 100644
--- a/ui/learn/src/map/mapMain.js
+++ b/ui/learn/src/map/mapMain.ts
@@ -1,6 +1,6 @@
-var mapView = require('./mapView');
-var stages = require('../stage/list');
-var scoring = require('../score');
+const mapView = require('./mapView');
+const stages = require('../stage/list');
+const scoring = require('../score');
 const timeouts = require('../timeouts');
 
 module.exports = function (opts, trans) {
@@ -15,15 +15,15 @@ module.exports = function (opts, trans) {
         data: opts.storage.data,
         trans: trans,
         isStageIdComplete: function (stageId) {
-          var stage = stages.byId[stageId];
+          const stage = stages.byId[stageId];
           if (!stage) return true;
-          var result = opts.storage.data.stages[stage.key];
+          const result = opts.storage.data.stages[stage.key];
           if (!result) return false;
           return result.scores.filter(scoring.gtz).length >= stage.levels.length;
         },
         stageProgress: function (stage) {
-          var result = opts.storage.data.stages[stage.key];
-          var complete = result ? result.scores.filter(scoring.gtz).length : 0;
+          const result = opts.storage.data.stages[stage.key];
+          const complete = result ? result.scores.filter(scoring.gtz).length : 0;
           return [complete, stage.levels.length];
         },
       };
diff --git a/ui/learn/src/map/mapSide.js b/ui/learn/src/map/mapSide.ts
similarity index 84%
rename from ui/learn/src/map/mapSide.js
rename to ui/learn/src/map/mapSide.ts
index d847d9d392..048143b9e5 100644
--- a/ui/learn/src/map/mapSide.js
+++ b/ui/learn/src/map/mapSide.ts
@@ -1,7 +1,7 @@
-var m = require('mithril');
-var util = require('../util');
-var stages = require('../stage/list');
-var scoring = require('../score');
+import m = require('mithril');
+let util = require('../util');
+let stages = require('../stage/list');
+let scoring = require('../score');
 
 function renderInStage(ctrl) {
   return m('div.learn__side-map', [
@@ -38,8 +38,8 @@ function renderInStage(ctrl) {
             m(
               'div.categ_stages',
               categ.stages.map(function (s) {
-                var result = ctrl.data.stages[s.key];
-                var status = s.id === ctrl.active() ? 'active' : result ? 'done' : 'future';
+                let result = ctrl.data.stages[s.key];
+                let status = s.id === ctrl.active() ? 'active' : result ? 'done' : 'future';
                 return m(
                   'a',
                   {
@@ -64,7 +64,7 @@ function renderInStage(ctrl) {
 }
 
 function renderHome(ctrl) {
-  var progress = ctrl.progress();
+  let progress = ctrl.progress();
   return m('div.learn__side-home', [
     m('i.fat'),
     m('h1', ctrl.trans.noarg('learnChess')),
@@ -96,7 +96,7 @@ function renderHome(ctrl) {
 module.exports = function (opts, trans) {
   return {
     controller: function () {
-      var categId = m.prop(0);
+      let categId = m.prop(0);
       m.redraw.strategy('diff');
       return {
         data: opts.storage.data,
@@ -111,10 +111,10 @@ module.exports = function (opts, trans) {
           categId(stages.stageIdToCategId(stage.id));
         },
         progress: function () {
-          var max = stages.list.length * 10;
-          var data = opts.storage.data.stages;
-          var total = Object.keys(data).reduce(function (t, key) {
-            var rank = scoring.getStageRank(stages.byKey[key], data[key].scores);
+          let max = stages.list.length * 10;
+          let data = opts.storage.data.stages;
+          let total = Object.keys(data).reduce(function (t, key) {
+            let rank = scoring.getStageRank(stages.byKey[key], data[key].scores);
             if (rank === 1) return t + 10;
             if (rank === 2) return t + 8;
             return t + 5;
diff --git a/ui/learn/src/map/mapView.js b/ui/learn/src/map/mapView.ts
similarity index 81%
rename from ui/learn/src/map/mapView.js
rename to ui/learn/src/map/mapView.ts
index f5d6bdaaac..0fbc2141f7 100644
--- a/ui/learn/src/map/mapView.js
+++ b/ui/learn/src/map/mapView.ts
@@ -1,11 +1,11 @@
-var m = require('mithril');
-var util = require('../util');
-var scoring = require('../score');
-var stages = require('../stage/list');
+const m = require('mithril');
+const util = require('../util');
+const scoring = require('../score');
+const stages = require('../stage/list');
 
 function makeStars(nb) {
-  var stars = [];
-  for (var i = 0; i < 4 - nb; i++)
+  const stars = [];
+  for (let i = 0; i < 4 - nb; i++)
     stars.push(
       m('i', {
         'data-icon': '',
@@ -16,9 +16,9 @@ function makeStars(nb) {
 
 function ribbon(ctrl, s, status, res) {
   if (status === 'future') return;
-  var content;
+  let content;
   if (status === 'ongoing') {
-    var p = ctrl.stageProgress(s);
+    const p = ctrl.stageProgress(s);
     content = p[0] ? p.join(' / ') : ctrl.trans.noarg('play');
   } else content = makeStars(scoring.getStageRank(s, res.scores));
   if (status !== 'future')
@@ -35,8 +35,8 @@ function ribbon(ctrl, s, status, res) {
 }
 
 function whatNext(ctrl) {
-  var makeStage = function (href, img, title, subtitle, done) {
-    var transTitle = ctrl.trans.noarg(title);
+  const makeStage = function (href, img, title, subtitle, done) {
+    const transTitle = ctrl.trans.noarg(title);
     return m(
       'a',
       {
@@ -52,7 +52,7 @@ function whatNext(ctrl) {
       ]
     );
   };
-  var userId = ctrl.data._id;
+  const userId = ctrl.data._id;
   return m('div.categ.what_next', [
     m('h2', ctrl.trans.noarg('whatNext')),
     m('p', ctrl.trans.noarg('youKnowHowToPlayChess')),
@@ -83,13 +83,13 @@ module.exports = function (ctrl) {
           m(
             'div.categ_stages',
             categ.stages.map(function (s) {
-              var res = ctrl.data.stages[s.key];
-              var complete = ctrl.isStageIdComplete(s.id);
-              var prevComplete = ctrl.isStageIdComplete(s.id - 1);
-              var status = 'future';
+              const res = ctrl.data.stages[s.key];
+              const complete = ctrl.isStageIdComplete(s.id);
+              const prevComplete = ctrl.isStageIdComplete(s.id - 1);
+              let status = 'future';
               if (complete) status = 'done';
               else if (prevComplete || res) status = 'ongoing';
-              var title = ctrl.trans.noarg(s.title);
+              const title = ctrl.trans.noarg(s.title);
               return m(
                 'a',
                 {
diff --git a/ui/learn/src/progress.js b/ui/learn/src/progress.ts
similarity index 61%
rename from ui/learn/src/progress.js
rename to ui/learn/src/progress.ts
index a64127af88..c180174661 100644
--- a/ui/learn/src/progress.js
+++ b/ui/learn/src/progress.ts
@@ -1,12 +1,12 @@
-var m = require('mithril');
-var scoring = require('./score');
+const m = require('mithril');
+const scoring = require('./score');
 
-var star = m('i[data-icon=]');
+const star = m('i[data-icon=]');
 
 function makeStars(level, score) {
-  var rank = scoring.getLevelRank(level, score);
-  var stars = [];
-  for (var i = 3; i >= rank; i--) stars.push(star);
+  const rank = scoring.getLevelRank(level, score);
+  const stars = [];
+  for (let i = 3; i >= rank; i--) stars.push(star);
   return m('span.stars.st' + stars.length, stars);
 }
 
@@ -24,9 +24,9 @@ module.exports = {
     return m(
       'div.progress',
       ctrl.stage.levels.map(function (level) {
-        var score = ctrl.score(level);
-        var status = level.id === ctrl.level.blueprint.id ? 'active' : score ? 'done' : 'future';
-        var label = score ? makeStars(level, score) : m('span.id', level.id);
+        const score = ctrl.score(level);
+        const status = level.id === ctrl.level.blueprint.id ? 'active' : score ? 'done' : 'future';
+        const label = score ? makeStars(level, score) : m('span.id', level.id);
         return m(
           'a',
           {
diff --git a/ui/learn/src/promotion.js b/ui/learn/src/promotion.ts
similarity index 80%
rename from ui/learn/src/promotion.js
rename to ui/learn/src/promotion.ts
index bade07a415..72e0b5a68c 100644
--- a/ui/learn/src/promotion.js
+++ b/ui/learn/src/promotion.ts
@@ -1,13 +1,13 @@
-var m = require('mithril');
-var chessground = require('chessground');
-var ground = require('./ground');
-var opposite = chessground.util.opposite;
-var key2pos = chessground.util.key2pos;
+const m = require('mithril');
+const chessground = require('chessground');
+const ground = require('./ground');
+const opposite = chessground.util.opposite;
+const key2pos = chessground.util.key2pos;
 
-var promoting = false;
+let promoting = false;
 
 function start(orig, dest, callback) {
-  var piece = ground.pieces()[dest];
+  const piece = ground.pieces()[dest];
   if (
     piece &&
     piece.role == 'pawn' &&
@@ -33,10 +33,10 @@ function finish(role) {
 function renderPromotion(ctrl, dest, pieces, color, orientation, explain) {
   if (!promoting) return;
 
-  var left = (8 - key2pos(dest)[0]) * 12.5;
+  let left = (8 - key2pos(dest)[0]) * 12.5;
   if (orientation === 'white') left = 87.5 - left;
 
-  var vertical = color === orientation ? 'top' : 'bottom';
+  const vertical = color === orientation ? 'top' : 'bottom';
 
   return m('div#promotion-choice.' + vertical, [
     pieces.map(function (serverRole, i) {
@@ -70,7 +70,7 @@ module.exports = {
 
   view: function (ctrl, stage) {
     if (!promoting) return;
-    var pieces = ['queen', 'knight', 'rook', 'bishop'];
+    const pieces = ['queen', 'knight', 'rook', 'bishop'];
 
     return renderPromotion(
       ctrl,
diff --git a/ui/learn/src/run/runCtrl.js b/ui/learn/src/run/runCtrl.ts
similarity index 81%
rename from ui/learn/src/run/runCtrl.js
rename to ui/learn/src/run/runCtrl.ts
index 01ce2fd420..6cadbbcc2c 100644
--- a/ui/learn/src/run/runCtrl.js
+++ b/ui/learn/src/run/runCtrl.ts
@@ -1,22 +1,22 @@
-var m = require('mithril');
-var stages = require('../stage/list');
-var makeLevel = require('../level');
-var makeProgress = require('../progress').ctrl;
-var sound = require('../sound');
+const m = require('mithril');
+const stages = require('../stage/list');
+const makeLevel = require('../level');
+const makeProgress = require('../progress').ctrl;
+const sound = require('../sound');
 const timeouts = require('../timeouts');
 
 module.exports = function (opts, trans) {
   timeouts.clearTimeouts();
 
-  var stage = stages.byId[m.route.param('stage')];
+  const stage = stages.byId[m.route.param('stage')];
   if (!stage) m.route('/');
   opts.side.ctrl.setStage(stage);
 
-  var levelId =
+  const levelId =
     m.route.param('level') ||
     (function () {
-      var result = opts.storage.data.stages[stage.key];
-      var it = 0;
+      const result = opts.storage.data.stages[stage.key];
+      let it = 0;
       if (result) while (result.scores[it]) it++;
       if (it >= stage.levels.length) it = 0;
       return it + 1;
@@ -38,8 +38,8 @@ module.exports = function (opts, trans) {
     },
   });
 
-  var stageScore = function () {
-    var res = opts.storage.data.stages[stage.key];
+  const stageScore = function () {
+    const res = opts.storage.data.stages[stage.key];
     return res
       ? res.scores.reduce(function (a, b) {
           return a + b;
@@ -59,7 +59,7 @@ module.exports = function (opts, trans) {
 
   isRestarting.set(false);
 
-  var getNext = function () {
+  const getNext = function () {
     return stages.byId[stage.id + 1];
   };
   if (vm.stageStarting()) sound.stageStart();
diff --git a/ui/learn/src/run/runMain.js b/ui/learn/src/run/runMain.ts
similarity index 66%
rename from ui/learn/src/run/runMain.js
rename to ui/learn/src/run/runMain.ts
index 12dcc6a97c..9f349d421e 100644
--- a/ui/learn/src/run/runMain.js
+++ b/ui/learn/src/run/runMain.ts
@@ -1,5 +1,5 @@
-var runCtrl = require('./runCtrl');
-var runView = require('./runView');
+const runCtrl = require('./runCtrl');
+const runView = require('./runView');
 
 module.exports = function (opts, trans) {
   return {
diff --git a/ui/learn/src/run/runView.js b/ui/learn/src/run/runView.ts
similarity index 79%
rename from ui/learn/src/run/runView.js
rename to ui/learn/src/run/runView.ts
index 258e60982d..cb0ed00aa0 100644
--- a/ui/learn/src/run/runView.js
+++ b/ui/learn/src/run/runView.ts
@@ -1,13 +1,13 @@
-var m = require('mithril');
-var chessground = require('chessground');
-var util = require('../util');
-var ground = require('../ground');
-var congrats = require('../congrats');
-var stageStarting = require('./stageStarting');
-var stageComplete = require('./stageComplete');
-var renderPromotion = require('../promotion').view;
-var renderProgress = require('../progress').view;
-var makeStars = require('../progress').makeStars;
+const m = require('mithril');
+const chessground = require('chessground');
+const util = require('../util');
+const ground = require('../ground');
+const congrats = require('../congrats');
+const stageStarting = require('./stageStarting');
+const stageComplete = require('./stageComplete');
+const renderPromotion = require('../promotion').view;
+const renderProgress = require('../progress').view;
+const makeStars = require('../progress').makeStars;
 
 function renderFailed(ctrl) {
   return m(
@@ -34,8 +34,8 @@ function renderCompleted(ctrl, level) {
 }
 
 module.exports = function (ctrl) {
-  var stage = ctrl.stage;
-  var level = ctrl.level;
+  const stage = ctrl.stage;
+  const level = ctrl.level;
 
   return m(
     'div',
diff --git a/ui/learn/src/run/stageComplete.js b/ui/learn/src/run/stageComplete.ts
similarity index 80%
rename from ui/learn/src/run/stageComplete.js
rename to ui/learn/src/run/stageComplete.ts
index 88d919f67a..4665fefe99 100644
--- a/ui/learn/src/run/stageComplete.js
+++ b/ui/learn/src/run/stageComplete.ts
@@ -1,18 +1,18 @@
-var m = require('mithril');
-var util = require('../util');
-var scoring = require('../score');
-var numberSpread = require('common/number').numberSpread;
+const m = require('mithril');
+const util = require('../util');
+const scoring = require('../score');
+const numberSpread = require('common/number').numberSpread;
 
 function makeStars(rank) {
-  var stars = [];
-  for (var i = 3; i > 0; i--) stars.push(m('div.star-wrap', rank <= i ? m('i.star') : null));
+  const stars = [];
+  for (let i = 3; i > 0; i--) stars.push(m('div.star-wrap', rank <= i ? m('i.star') : null));
   return stars;
 }
 
 module.exports = function (ctrl) {
-  var stage = ctrl.stage;
-  var next = ctrl.getNext();
-  var score = ctrl.stageScore();
+  const stage = ctrl.stage;
+  const next = ctrl.getNext();
+  const score = ctrl.stageScore();
   return m(
     'div.learn__screen-overlay',
     {
diff --git a/ui/learn/src/run/stageStarting.js b/ui/learn/src/run/stageStarting.ts
similarity index 89%
rename from ui/learn/src/run/stageStarting.js
rename to ui/learn/src/run/stageStarting.ts
index 849f6732e8..8cb94e7129 100644
--- a/ui/learn/src/run/stageStarting.js
+++ b/ui/learn/src/run/stageStarting.ts
@@ -1,5 +1,5 @@
-var m = require('mithril');
-var util = require('../util');
+const m = require('mithril');
+const util = require('../util');
 
 module.exports = function (ctrl) {
   return m(
diff --git a/ui/learn/src/scenario.js b/ui/learn/src/scenario.ts
similarity index 69%
rename from ui/learn/src/scenario.js
rename to ui/learn/src/scenario.ts
index 1010cbe682..461494b246 100644
--- a/ui/learn/src/scenario.js
+++ b/ui/learn/src/scenario.ts
@@ -1,9 +1,9 @@
-var util = require('./util');
-var ground = require('./ground');
+const util = require('./util');
+const ground = require('./ground');
 const timeouts = require('./timeouts');
 
 module.exports = function (blueprint, opts) {
-  var steps = (blueprint || []).map(function (step) {
+  const steps = (blueprint || []).map(function (step) {
     if (step.move) return step;
     return {
       move: step,
@@ -11,19 +11,19 @@ module.exports = function (blueprint, opts) {
     };
   });
 
-  var it = 0;
-  var isFailed = false;
+  let it = 0;
+  let isFailed = false;
 
-  var fail = function () {
+  const fail = function () {
     isFailed = true;
     return false;
   };
 
-  var opponent = function () {
-    var step = steps[it];
+  const opponent = function () {
+    const step = steps[it];
     if (!step) return;
-    var move = util.decomposeUci(step.move);
-    var res = opts.chess.move(move[0], move[1], move[2]);
+    const move = util.decomposeUci(step.move);
+    const res = opts.chess.move(move[0], move[1], move[2]);
     if (!res) return fail();
     it++;
     ground.fen(opts.chess.fen(), opts.chess.color(), opts.makeChessDests(), move);
@@ -42,7 +42,7 @@ module.exports = function (blueprint, opts) {
     },
     opponent: opponent,
     player: function (move) {
-      var step = steps[it];
+      const step = steps[it];
       if (!step) return;
       if (step.move !== move) return fail();
       it++;
diff --git a/ui/learn/src/score.js b/ui/learn/src/score.ts
similarity index 79%
rename from ui/learn/src/score.js
rename to ui/learn/src/score.ts
index 698f2cbb4e..0a79a7741f 100644
--- a/ui/learn/src/score.js
+++ b/ui/learn/src/score.ts
@@ -1,30 +1,30 @@
-var util = require('./util');
+const util = require('./util');
 
-var apple = 50;
-var capture = 50;
-var scenario = 50;
+const apple = 50;
+const capture = 50;
+const scenario = 50;
 
-var levelBonus = {
+const levelBonus = {
   1: 500,
   2: 300,
   3: 100,
 };
 
 function getLevelBonus(l, nbMoves) {
-  var late = nbMoves - l.nbMoves;
+  const late = nbMoves - l.nbMoves;
   if (late <= 0) return levelBonus[1];
   if (late <= Math.max(1, l.nbMoves / 8)) return levelBonus[2];
   return levelBonus[3];
 }
 
 function getLevelMaxScore(l) {
-  var score = util.readKeys(l.apples).length * apple;
+  let score = util.readKeys(l.apples).length * apple;
   if (l.pointsForCapture) score += (l.captures || 0) * capture;
   return score + levelBonus[1];
 }
 
 function getLevelRank(l, score) {
-  var max = getLevelMaxScore(l);
+  const max = getLevelMaxScore(l);
   if (score >= max) return 1;
   if (score >= max - 200) return 2;
   return 3;
@@ -37,14 +37,14 @@ function getStageMaxScore(s) {
 }
 
 function getStageRank(s, score) {
-  var max = getStageMaxScore(s);
+  const max = getStageMaxScore(s);
   if (typeof score !== 'number') score = score.reduce((a, b) => a + b, 0);
   if (score >= max) return 1;
   if (score >= max - Math.max(200, s.levels.length * 150)) return 2;
   return 3;
 }
 
-var pieceValues = {
+const pieceValues = {
   q: 90,
   r: 50,
   b: 30,
diff --git a/ui/learn/src/sound.js b/ui/learn/src/sound.ts
similarity index 93%
rename from ui/learn/src/sound.js
rename to ui/learn/src/sound.ts
index 514f04cade..75e1c8cf0e 100644
--- a/ui/learn/src/sound.js
+++ b/ui/learn/src/sound.ts
@@ -1,4 +1,4 @@
-var util = require('./util');
+const util = require('./util');
 
 const make = (file, volume) => {
   lichess.sound.loadOggOrMp3(file, `${lichess.sound.baseUrl}/${file}`);
diff --git a/ui/learn/src/stage/bishop.js b/ui/learn/src/stage/bishop.ts
similarity index 95%
rename from ui/learn/src/stage/bishop.js
rename to ui/learn/src/stage/bishop.ts
index 4c6f4f7a94..4f5206f19c 100644
--- a/ui/learn/src/stage/bishop.js
+++ b/ui/learn/src/stage/bishop.ts
@@ -1,5 +1,5 @@
-var util = require('../util');
-var arrow = util.arrow;
+const util = require('../util');
+const arrow = util.arrow;
 
 module.exports = {
   key: 'bishop',
diff --git a/ui/learn/src/stage/capture.js b/ui/learn/src/stage/capture.ts
similarity index 90%
rename from ui/learn/src/stage/capture.js
rename to ui/learn/src/stage/capture.ts
index 5d509466fd..2df26df674 100644
--- a/ui/learn/src/stage/capture.js
+++ b/ui/learn/src/stage/capture.ts
@@ -1,8 +1,8 @@
-var util = require('../util');
-var assert = require('../assert');
-var arrow = util.arrow;
+const util = require('../util');
+const assert = require('../assert');
+const arrow = util.arrow;
 
-var imgUrl = util.assetUrl + 'images/learn/bowman.svg';
+const imgUrl = util.assetUrl + 'images/learn/bowman.svg';
 
 module.exports = {
   key: 'capture',
diff --git a/ui/learn/src/stage/castling.js b/ui/learn/src/stage/castling.ts
similarity index 89%
rename from ui/learn/src/stage/castling.js
rename to ui/learn/src/stage/castling.ts
index 330a8fd9fc..1ebac805fc 100644
--- a/ui/learn/src/stage/castling.js
+++ b/ui/learn/src/stage/castling.ts
@@ -1,17 +1,17 @@
-var util = require('../util');
-var assert = require('../assert');
-var arrow = util.arrow,
+const util = require('../util');
+const assert = require('../assert');
+const arrow = util.arrow,
   circle = util.circle;
 
-var imgUrl = util.assetUrl + 'images/learn/castle.svg';
+const imgUrl = util.assetUrl + 'images/learn/castle.svg';
 
-var castledKingSide = assert.lastMoveSan('O-O');
-var castledQueenSide = assert.lastMoveSan('O-O-O');
-var cantCastleKingSide = assert.and(
+const castledKingSide = assert.lastMoveSan('O-O');
+const castledQueenSide = assert.lastMoveSan('O-O-O');
+const cantCastleKingSide = assert.and(
   assert.not(castledKingSide),
   assert.or(assert.pieceNotOn('K', 'e1'), assert.pieceNotOn('R', 'h1'))
 );
-var cantCastleQueenSide = assert.and(
+const cantCastleQueenSide = assert.and(
   assert.not(castledQueenSide),
   assert.or(assert.pieceNotOn('K', 'e1'), assert.pieceNotOn('R', 'a1'))
 );
diff --git a/ui/learn/src/stage/check1.js b/ui/learn/src/stage/check1.ts
similarity index 86%
rename from ui/learn/src/stage/check1.js
rename to ui/learn/src/stage/check1.ts
index 91d8516401..f847f49518 100644
--- a/ui/learn/src/stage/check1.js
+++ b/ui/learn/src/stage/check1.ts
@@ -1,8 +1,8 @@
-var util = require('../util');
-var assert = require('../assert');
-var arrow = util.arrow;
+const util = require('../util');
+const assert = require('../assert');
+const arrow = util.arrow;
 
-var imgUrl = util.assetUrl + 'images/learn/winged-sword.svg';
+const imgUrl = util.assetUrl + 'images/learn/winged-sword.svg';
 
 module.exports = {
   key: 'check1',
diff --git a/ui/learn/src/stage/check2.js b/ui/learn/src/stage/check2.ts
similarity index 86%
rename from ui/learn/src/stage/check2.js
rename to ui/learn/src/stage/check2.ts
index 9145b781b6..ce961b26c9 100644
--- a/ui/learn/src/stage/check2.js
+++ b/ui/learn/src/stage/check2.ts
@@ -1,8 +1,8 @@
-var util = require('../util');
-var assert = require('../assert');
-var arrow = util.arrow;
+const util = require('../util');
+const assert = require('../assert');
+const arrow = util.arrow;
 
-var imgUrl = util.assetUrl + 'images/learn/crossed-swords.svg';
+const imgUrl = util.assetUrl + 'images/learn/crossed-swords.svg';
 
 module.exports = {
   key: 'check2',
diff --git a/ui/learn/src/stage/checkmate1.js b/ui/learn/src/stage/checkmate1.ts
similarity index 89%
rename from ui/learn/src/stage/checkmate1.js
rename to ui/learn/src/stage/checkmate1.ts
index cad1df0122..b7944f5509 100644
--- a/ui/learn/src/stage/checkmate1.js
+++ b/ui/learn/src/stage/checkmate1.ts
@@ -1,8 +1,8 @@
-var util = require('../util');
-var assert = require('../assert');
-var arrow = util.arrow;
+const util = require('../util');
+const assert = require('../assert');
+const arrow = util.arrow;
 
-var imgUrl = util.assetUrl + 'images/learn/guillotine.svg';
+const imgUrl = util.assetUrl + 'images/learn/guillotine.svg';
 
 module.exports = {
   key: 'checkmate1',
diff --git a/ui/learn/src/stage/combat.js b/ui/learn/src/stage/combat.ts
similarity index 89%
rename from ui/learn/src/stage/combat.js
rename to ui/learn/src/stage/combat.ts
index a744f4c387..1f457e074f 100644
--- a/ui/learn/src/stage/combat.js
+++ b/ui/learn/src/stage/combat.ts
@@ -1,8 +1,8 @@
-var util = require('../util');
-var assert = require('../assert');
-var arrow = util.arrow;
+const util = require('../util');
+const assert = require('../assert');
+const arrow = util.arrow;
 
-var imgUrl = util.assetUrl + 'images/learn/battle-gear.svg';
+const imgUrl = util.assetUrl + 'images/learn/battle-gear.svg';
 
 module.exports = {
   key: 'combat',
diff --git a/ui/learn/src/stage/draw.js b/ui/learn/src/stage/draw.ts
similarity index 100%
rename from ui/learn/src/stage/draw.js
rename to ui/learn/src/stage/draw.ts
diff --git a/ui/learn/src/stage/enpassant.js b/ui/learn/src/stage/enpassant.ts
similarity index 92%
rename from ui/learn/src/stage/enpassant.js
rename to ui/learn/src/stage/enpassant.ts
index 26cd74aeb0..6c24db5b87 100644
--- a/ui/learn/src/stage/enpassant.js
+++ b/ui/learn/src/stage/enpassant.ts
@@ -1,8 +1,8 @@
-var util = require('../util');
-var assert = require('../assert');
-var arrow = util.arrow;
+const util = require('../util');
+const assert = require('../assert');
+const arrow = util.arrow;
 
-var imgUrl = util.assetUrl + 'images/learn/spinning-blades.svg';
+const imgUrl = util.assetUrl + 'images/learn/spinning-blades.svg';
 
 module.exports = {
   key: 'enpassant',
diff --git a/ui/learn/src/stage/fork.js b/ui/learn/src/stage/fork.ts
similarity index 81%
rename from ui/learn/src/stage/fork.js
rename to ui/learn/src/stage/fork.ts
index dc43f5c490..df05e13079 100644
--- a/ui/learn/src/stage/fork.js
+++ b/ui/learn/src/stage/fork.ts
@@ -1,10 +1,10 @@
-var util = require('../util');
-var assert = require('../assert');
-var arrow = util.arrow;
+const util = require('../util');
+const assert = require('../assert');
+const arrow = util.arrow;
 
-var imgUrl = util.assetUrl + 'images/learn/crossed-swords.svg';
+const imgUrl = util.assetUrl + 'images/learn/crossed-swords.svg';
 
-var twoMoves = 'Threaten the opponent king<br>in two moves!';
+const twoMoves = 'Threaten the opponent king<br>in two moves!';
 
 module.exports = {
   key: 'check2',
diff --git a/ui/learn/src/stage/king.js b/ui/learn/src/stage/king.ts
similarity index 93%
rename from ui/learn/src/stage/king.js
rename to ui/learn/src/stage/king.ts
index 345b0e4bf5..5fcf183392 100644
--- a/ui/learn/src/stage/king.js
+++ b/ui/learn/src/stage/king.ts
@@ -1,5 +1,5 @@
-var util = require('../util');
-var arrow = util.arrow;
+const util = require('../util');
+const arrow = util.arrow;
 
 module.exports = {
   key: 'king',
diff --git a/ui/learn/src/stage/knight.js b/ui/learn/src/stage/knight.ts
similarity index 95%
rename from ui/learn/src/stage/knight.js
rename to ui/learn/src/stage/knight.ts
index 132c857f55..a5bf20ac91 100644
--- a/ui/learn/src/stage/knight.js
+++ b/ui/learn/src/stage/knight.ts
@@ -1,5 +1,5 @@
-var util = require('../util');
-var arrow = util.arrow;
+const util = require('../util');
+const arrow = util.arrow;
 
 module.exports = {
   key: 'knight',
diff --git a/ui/learn/src/stage/list.js b/ui/learn/src/stage/list.ts
similarity index 89%
rename from ui/learn/src/stage/list.js
rename to ui/learn/src/stage/list.ts
index a3938089b0..08bc2471e8 100644
--- a/ui/learn/src/stage/list.js
+++ b/ui/learn/src/stage/list.ts
@@ -1,4 +1,4 @@
-var categs = [
+let categs = [
   {
     key: 'chess-pieces',
     name: 'chessPieces',
@@ -40,8 +40,8 @@ var categs = [
   },
 ];
 
-var stageId = 1;
-var stages = [];
+let stageId = 1;
+const stages = [];
 
 categs = categs.map(function (c) {
   c.stages = c.stages.map(function (stage) {
@@ -52,12 +52,12 @@ categs = categs.map(function (c) {
   return c;
 });
 
-var stagesByKey = {};
+const stagesByKey = {};
 stages.forEach(function (s) {
   stagesByKey[s.key] = s;
 });
 
-var stagesById = {};
+const stagesById = {};
 stages.forEach(function (s) {
   stagesById[s.id] = s;
 });
@@ -68,8 +68,8 @@ module.exports = {
   byKey: stagesByKey,
   categs: categs,
   stageIdToCategId: function (stageId) {
-    var stage = stagesById[stageId];
-    for (var id in categs)
+    const stage = stagesById[stageId];
+    for (const id in categs)
       if (
         categs[id].stages.some(function (s) {
           return s.key === stage.key;
diff --git a/ui/learn/src/stage/outOfCheck.js b/ui/learn/src/stage/outOfCheck.ts
similarity index 90%
rename from ui/learn/src/stage/outOfCheck.js
rename to ui/learn/src/stage/outOfCheck.ts
index 3c40abb4ad..92a27de874 100644
--- a/ui/learn/src/stage/outOfCheck.js
+++ b/ui/learn/src/stage/outOfCheck.ts
@@ -1,7 +1,7 @@
-var util = require('../util');
-var arrow = util.arrow;
+const util = require('../util');
+const arrow = util.arrow;
 
-var imgUrl = util.assetUrl + 'images/learn/guards.svg';
+const imgUrl = util.assetUrl + 'images/learn/guards.svg';
 
 module.exports = {
   key: 'outOfCheck',
diff --git a/ui/learn/src/stage/pawn.js b/ui/learn/src/stage/pawn.ts
similarity index 94%
rename from ui/learn/src/stage/pawn.js
rename to ui/learn/src/stage/pawn.ts
index 6cf48e5dbd..b53b40c9ea 100644
--- a/ui/learn/src/stage/pawn.js
+++ b/ui/learn/src/stage/pawn.ts
@@ -1,6 +1,6 @@
-var util = require('../util');
-var assert = require('../assert');
-var arrow = util.arrow;
+const util = require('../util');
+const assert = require('../assert');
+const arrow = util.arrow;
 
 module.exports = {
   key: 'pawn',
diff --git a/ui/learn/src/stage/protection.js b/ui/learn/src/stage/protection.ts
similarity index 91%
rename from ui/learn/src/stage/protection.js
rename to ui/learn/src/stage/protection.ts
index 56aba30e9d..187d1e5864 100644
--- a/ui/learn/src/stage/protection.js
+++ b/ui/learn/src/stage/protection.ts
@@ -1,7 +1,7 @@
-var util = require('../util');
-var arrow = util.arrow;
+const util = require('../util');
+const arrow = util.arrow;
 
-var imgUrl = util.assetUrl + 'images/learn/bolt-shield.svg';
+const imgUrl = util.assetUrl + 'images/learn/bolt-shield.svg';
 
 module.exports = {
   key: 'protection',
diff --git a/ui/learn/src/stage/queen.js b/ui/learn/src/stage/queen.ts
similarity index 94%
rename from ui/learn/src/stage/queen.js
rename to ui/learn/src/stage/queen.ts
index 789ec9796e..f5f2becdcb 100644
--- a/ui/learn/src/stage/queen.js
+++ b/ui/learn/src/stage/queen.ts
@@ -1,5 +1,5 @@
-var util = require('../util');
-var arrow = util.arrow;
+const util = require('../util');
+const arrow = util.arrow;
 
 module.exports = {
   key: 'queen',
diff --git a/ui/learn/src/stage/rook.js b/ui/learn/src/stage/rook.ts
similarity index 94%
rename from ui/learn/src/stage/rook.js
rename to ui/learn/src/stage/rook.ts
index d32743049a..fd9656439c 100644
--- a/ui/learn/src/stage/rook.js
+++ b/ui/learn/src/stage/rook.ts
@@ -1,5 +1,5 @@
-var util = require('../util');
-var arrow = util.arrow;
+const util = require('../util');
+const arrow = util.arrow;
 
 module.exports = {
   key: 'rook',
diff --git a/ui/learn/src/stage/setup.js b/ui/learn/src/stage/setup.ts
similarity index 90%
rename from ui/learn/src/stage/setup.js
rename to ui/learn/src/stage/setup.ts
index 776fa2ffb6..f2f22c84f2 100644
--- a/ui/learn/src/stage/setup.js
+++ b/ui/learn/src/stage/setup.ts
@@ -1,9 +1,9 @@
-var util = require('../util');
-var assert = require('../assert');
-var and = assert.and;
-var arrow = util.arrow;
+const util = require('../util');
+const assert = require('../assert');
+const and = assert.and;
+const arrow = util.arrow;
 
-var imgUrl = util.assetUrl + 'images/learn/rally-the-troops.svg';
+const imgUrl = util.assetUrl + 'images/learn/rally-the-troops.svg';
 
 module.exports = {
   key: 'setup',
diff --git a/ui/learn/src/stage/stalemate.js b/ui/learn/src/stage/stalemate.ts
similarity index 94%
rename from ui/learn/src/stage/stalemate.js
rename to ui/learn/src/stage/stalemate.ts
index 1beee7e101..f935755feb 100644
--- a/ui/learn/src/stage/stalemate.js
+++ b/ui/learn/src/stage/stalemate.ts
@@ -1,9 +1,9 @@
-var util = require('../util');
-var assert = require('../assert');
-var arrow = util.arrow,
+const util = require('../util');
+const assert = require('../assert');
+const arrow = util.arrow,
   circle = util.circle;
 
-var imgUrl = util.assetUrl + 'images/learn/scales.svg';
+const imgUrl = util.assetUrl + 'images/learn/scales.svg';
 
 module.exports = {
   key: 'stalemate',
diff --git a/ui/learn/src/stage/value.js b/ui/learn/src/stage/value.ts
similarity index 92%
rename from ui/learn/src/stage/value.js
rename to ui/learn/src/stage/value.ts
index 9143e5abb1..73e1285b8e 100644
--- a/ui/learn/src/stage/value.js
+++ b/ui/learn/src/stage/value.ts
@@ -1,8 +1,8 @@
-var util = require('../util');
-var assert = require('../assert');
-var arrow = util.arrow;
+const util = require('../util');
+const assert = require('../assert');
+const arrow = util.arrow;
 
-var imgUrl = util.assetUrl + 'images/learn/sprint.svg';
+const imgUrl = util.assetUrl + 'images/learn/sprint.svg';
 
 module.exports = {
   key: 'value',
diff --git a/ui/learn/src/storage.js b/ui/learn/src/storage.ts
similarity index 93%
rename from ui/learn/src/storage.js
rename to ui/learn/src/storage.ts
index a0b91822ed..429be4b6a4 100644
--- a/ui/learn/src/storage.js
+++ b/ui/learn/src/storage.ts
@@ -1,8 +1,8 @@
-var m = require('mithril');
+const m = require('mithril');
 
-var key = 'learn.progress';
+const key = 'learn.progress';
 
-var defaultValue = {
+const defaultValue = {
   stages: {},
 };
 
diff --git a/ui/learn/src/timeouts.js b/ui/learn/src/timeouts.ts
similarity index 100%
rename from ui/learn/src/timeouts.js
rename to ui/learn/src/timeouts.ts
diff --git a/ui/learn/src/util.js b/ui/learn/src/util.ts
similarity index 97%
rename from ui/learn/src/util.js
rename to ui/learn/src/util.ts
index 5c3797a382..6a4c11000a 100644
--- a/ui/learn/src/util.js
+++ b/ui/learn/src/util.ts
@@ -1,4 +1,4 @@
-var m = require('mithril');
+const m = require('mithril');
 
 module.exports = {
   toLevel: function (l, it) {
diff --git a/ui/learn/tsconfig.json b/ui/learn/tsconfig.json
new file mode 100644
index 0000000000..4eb37fee05
--- /dev/null
+++ b/ui/learn/tsconfig.json
@@ -0,0 +1,3 @@
+{
+  "extends": "../tsconfig.base.json"
+}