make game search a TS module

Author: ornicar

app/views/search/index.scala

@@ -21,7 +21,7 @@ object index {
     views.html.base.layout(
       title = searchInXGames.txt(nbGames.localize, nbGames),
       moreJs = frag(
-        jsTag("search.js"),
+        jsModule("game-search"),
         infiniteScrollTag
       ),
       moreCss = cssTag("search")

app/views/user/show/page.scala

@@ -1,18 +1,17 @@
 package views.html.user.show
 
+import controllers.routes
 import play.api.data.Form
 
 import lila.api.Context
+import lila.app.mashup.UserInfo
 import lila.app.mashup.UserInfo.Angle
 import lila.app.templating.Environment._
 import lila.app.ui.ScalatagsTemplate._
 import lila.common.paginator.Paginator
-import lila.app.mashup.UserInfo
 import lila.game.Game
 import lila.user.User
 
-import controllers.routes
-
 object page {
 
   def activity(
@@ -87,7 +86,7 @@ object page {
           embedJsUnsafeLoadThen(s"lichess.ratingHistoryChart($ratingChart);")
         )
       },
-      withSearch option frag(jsTag("search.js")),
+      withSearch option jsModule("game-search"),
       isGranted(_.UserSpy) option jsModule("mod.user")
     )
 

ui/build

@@ -16,7 +16,7 @@ mkdir -p public/compiled
 apps1="common"
 apps2="chess ceval game tree chat nvui"
 apps3="site swiss msg chat cli challenge notify learn insight editor puzzle round analyse lobby tournament tournamentSchedule tournamentCalendar simul dasher speech palantir serviceWorker"
-site_plugins="tvEmbed puzzleEmbed analyseEmbed user modUser clas coordinate captcha expandText team forum account coachForm challengePage checkout login teamBattleForm dgt"
+site_plugins="tvEmbed puzzleEmbed analyseEmbed user modUser clas coordinate captcha expandText team forum account coachForm challengePage checkout login teamBattleForm dgt gameSearch"
 round_plugins="keyboardMove nvui"
 analyse_plugins="nvui"
 

ui/site/rollup.config.js

@@ -153,5 +153,9 @@ export default rollupProject({
     input: 'src/dgt/dgt.ts',
     output: 'dgt',
     name: 'lichessDgt'
+  },
+  gameSearch: {
+    input: 'src/gameSearch.ts',
+    output: 'game-search'
   }
 });

public/javascripts/search.js renamed to ui/site/src/gameSearch.ts

@@ -1,14 +1,15 @@
-$(function() {
+window.lichess.load.then(() => {
 
-  var $form = $(".search__form");
-  var $usernames = $form.find(".usernames input");
-  var $userRows = $form.find(".user-row");
-  var $result = $(".search__result");
+  const form = document.querySelector('.search__form') as HTMLFormElement,
+  $form = $(form),
+  $usernames = $form.find(".usernames input"),
+  $userRows = $form.find(".user-row"),
+  $result = $(".search__result");
 
   function getUsernames() {
-    var us = [];
-    $usernames.each(function() {
-      var u = $(this).val().trim();
+    const us: string[] = [];
+    $usernames.each(function(this: HTMLInputElement) {
+      const u = this.value.trim();
       if (u) us.push(u);
     });
     return us;
@@ -21,7 +22,7 @@ $(function() {
       return (row.classList.contains(rowClassName) && player.length && user == player) ? "selected" : ""
     }
     getUsernames().forEach(function(user) {
-      var option = [];
+      const option: string[] = [];
       option.push("<option value='" + user + "'");
       option.push(isSelected(row, "winner", user, 'req-winner'));
       option.push(isSelected(row, "loser", user, 'req-loser'));
@@ -35,25 +36,24 @@ $(function() {
   }
 
   function reloadUserChoices() {
-    $userRows.each(function() {
+    $userRows.each(function(this: HTMLTableRowElement) {
       userChoices(this);
     });
   }
   reloadUserChoices();
   $usernames.on("input paste", reloadUserChoices);
 
   var toggleAiLevel = function() {
-    $form.find(".opponent select").each(function() {
-      $form[0].querySelector('.aiLevel')?.classList.toggle('none', $(this).val() != 1);
-      $form[0].querySelector('.opponentName')?.classList.toggle('none', $(this).val() == 1);
+    $form.find(".opponent select").each(function(this: HTMLSelectElement) {
+      $form[0].querySelector('.aiLevel')?.classList.toggle('none', this.value != "1");
+      $form[0].querySelector('.opponentName')?.classList.toggle('none', this.value == "1");
     });
   };
   toggleAiLevel();
   $form.find(".opponent select").change(toggleAiLevel);
 
   function serialize() {
-    const data = new FormData($form[0]),
-    params = new URLSearchParams(data),
+    const params = new URLSearchParams(new FormData(form) as any),
     keys = Array.from(params.keys());
     for (let k of keys) {
       if (params.get(k) == '') params.delete(k);
@@ -62,10 +62,10 @@ $(function() {
   }
 
   const serialized = serialize();
-  $result.find("a.permalink").each(function() {
+  $result.find("a.permalink").each(function(this: HTMLAnchorElement) {
     $(this).attr("href", $(this).attr("href").split('?')[0] + "?" + serialized);
   });
-  $result.find('.search__rows').each(function() {
+  $result.find('.search__rows').each(function(this: HTMLTableRowElement) {
     var $next = $(this).find(".pager a");
     if (!$next.length) return;
     $next.attr("href", $next.attr("href") + "&" + serialized);
@@ -79,12 +79,12 @@ $(function() {
       }
     }, function() {
       $("#infscr-loading").remove();
-      lichess.pubsub.emit('content_loaded');
+      window.lichess.pubsub.emit('content_loaded');
     });
   });
 
   $form.submit(function() {
-    $form.find("input,select").filter(function() { return !this.value; }).attr("disabled", "disabled");
+    $form.find("input,select").filter(function(this: HTMLInputElement) { return !this.value; }).attr("disabled", "disabled");
     $form.addClass('searching');
   });
 });