diff --git a/ui/lobby/src/boot.ts b/ui/lobby/src/boot.ts index 995dba72fc..335353a6b0 100644 --- a/ui/lobby/src/boot.ts +++ b/ui/lobby/src/boot.ts @@ -1,6 +1,7 @@ import { LobbyOpts } from './interfaces'; import main from './main'; import modal from 'common/modal'; +import * as xhr from 'common/xhr'; export default function LichessLobby(opts: LobbyOpts) { @@ -40,12 +41,9 @@ export default function LichessLobby(opts: LobbyOpts) { setTimeout(() => nbRoundSpread(msg.r), li.socket.pingInterval() / 2); }, reload_timeline() { - $.ajax({ - url: '/timeline', - success: function(html) { - $('.timeline').html(html); - li.pubsub.emit('content_loaded'); - } + xhr.text('/timeline').then(html => { + $('.timeline').html(html); + li.pubsub.emit('content_loaded'); }); }, featured(o: { html: string }) { @@ -63,9 +61,11 @@ export default function LichessLobby(opts: LobbyOpts) { } }); li.StrongSocket.firstConnect.then(() => { - var gameId = getParameterByName('hook_like'); + const gameId = getParameterByName('hook_like'); if (!gameId) return; - $.post(`/setup/hook/${li.sri}/like/${gameId}?rr=${lobby.setup.ratingRange() || ''}`); + xhr.text( + `/setup/hook/${li.sri}/like/${gameId}?rr=${lobby.setup.ratingRange() || ''}`, + { method: 'post' }); lobby.setTab('real_time'); history.replaceState(null, '', '/'); }); @@ -78,27 +78,20 @@ export default function LichessLobby(opts: LobbyOpts) { const $startButtons = $('.lobby__start'), clickEvent = opts.blindMode ? 'click' : 'mousedown'; - $startButtons.find('a:not(.disabled)').on(clickEvent, function(this: HTMLElement) { + $startButtons.find('a:not(.disabled)').on(clickEvent, function(this: HTMLAnchorElement) { $(this).addClass('active').siblings().removeClass('active'); li.loadCssPath('lobby.setup'); lobby.leavePool(); - $.ajax({ - url: $(this).attr('href'), - success: function(html) { + xhr.text(this.href) + .then(html => { lobby.setup.prepareForm(modal(html, 'game-setup', () => { $startButtons.find('.active').removeClass('active'); })); li.pubsub.emit('content_loaded'); - }, - error: function(res) { - if (res.status == 400) alert(res.responseText); - li.reload(); - } - }); + }) + .catch(li.reload); return false; - }).on('click', function() { - return false; - }); + }).on('click', () => false); if (['#ai', '#friend', '#hook'].includes(location.hash)) { $startButtons diff --git a/ui/lobby/src/ctrl.ts b/ui/lobby/src/ctrl.ts index 7e3fa8dbbf..880dedb0a9 100644 --- a/ui/lobby/src/ctrl.ts +++ b/ui/lobby/src/ctrl.ts @@ -153,9 +153,7 @@ export default class LobbyController { clickPool = (id: string) => { if (!this.data.me) { - xhr.anonPoolSeek(this.pools.find(function(p) { - return p.id === id; - })); + xhr.anonPoolSeek(this.pools.find(p => p.id == id)!); this.setTab('real_time'); } else if (this.poolMember && this.poolMember.id === id) this.leavePool(); else { diff --git a/ui/lobby/src/setup.ts b/ui/lobby/src/setup.ts index efd0b2d7f4..4d57bf39fa 100644 --- a/ui/lobby/src/setup.ts +++ b/ui/lobby/src/setup.ts @@ -1,6 +1,7 @@ import { FormStore, toFormLines, makeStore } from './form'; import modal from 'common/modal'; import debounce from 'common/debounce'; +import * as xhr from 'common/xhr'; import LobbyController from './ctrl'; const li = window.lichess; @@ -206,11 +207,17 @@ export default class Setup { this.root.redraw(); } else { this.root.setTab($timeModeSelect.val() === '1' ? 'real_time' : 'seeks'); - $.ajax({ - url: $form.attr('action').replace(/sri-placeholder/, li.sri), - data: $form.serialize() + "&color=" + color, - type: 'post' - }); + xhr.text( + $form.attr('action').replace(/sri-placeholder/, li.sri), + { + method: 'post', + body: (() => { + const data = new FormData($form[0] as HTMLFormElement) + data.append('color', color); + console.log(data); + return data; + })() + }); } return false; }; @@ -310,28 +317,21 @@ export default class Setup { var validateFen = debounce(() => { $fenInput.removeClass("success failure"); var fen = $fenInput.val(); - if (fen) { - $.ajax({ - url: $fenInput.parent().data('validate-url'), - data: { - fen: fen - }, - success: function(data) { - $fenInput.addClass("success"); - $fenPosition.find('.preview').html(data); - $fenPosition.find('a.board_editor').each(function(this: HTMLElement) { - $(this).attr('href', $(this).attr('href').replace(/editor\/.+$/, "editor/" + fen)); - }); - $submits.removeClass('nope'); - li.pubsub.emit('content_loaded'); - }, - error: function() { - $fenInput.addClass("failure"); - $fenPosition.find('.preview').html(""); - $submits.addClass('nope'); - } - }); - } + if (fen) xhr.text(xhr.url($fenInput.parent().data('validate-url'), { fen })) + .then(data => { + $fenInput.addClass("success"); + $fenPosition.find('.preview').html(data); + $fenPosition.find('a.board_editor').each(function(this: HTMLElement) { + $(this).attr('href', $(this).attr('href').replace(/editor\/.+$/, "editor/" + fen)); + }); + $submits.removeClass('nope'); + li.pubsub.emit('content_loaded'); + }) + .catch(() => { + $fenInput.addClass("failure"); + $fenPosition.find('.preview').html(""); + $submits.addClass('nope'); + }) }, 200); $fenInput.on('keyup', validateFen); diff --git a/ui/lobby/src/view/realTime/filter.ts b/ui/lobby/src/view/realTime/filter.ts index a62afe3b9d..cfcb958335 100644 --- a/ui/lobby/src/view/realTime/filter.ts +++ b/ui/lobby/src/view/realTime/filter.ts @@ -1,4 +1,5 @@ import { h } from 'snabbdom'; +import * as xhr from 'common/xhr'; import { bind } from '../util'; import LobbyController from '../../ctrl'; @@ -71,21 +72,18 @@ export interface FilterNode extends HTMLElement { filterLoaded?: boolean; } -export function render(ctrl: LobbyController) { - return h('div.hook__filters', { +export const render = (ctrl: LobbyController) => + h('div.hook__filters', { hook: { insert(vnode) { const el = vnode.elm as FilterNode; if (el.filterLoaded) return; - $.ajax({ - url: '/setup/filter', - success(html) { + xhr.text('/setup/filter') + .then(html => { el.innerHTML = html; el.filterLoaded = true; initialize(ctrl, el); - } - }); + }); } } }); -} diff --git a/ui/lobby/src/xhr.ts b/ui/lobby/src/xhr.ts index 4d692819ba..2bb5baa958 100644 --- a/ui/lobby/src/xhr.ts +++ b/ui/lobby/src/xhr.ts @@ -1,32 +1,19 @@ -const headers = { - 'Accept': 'application/vnd.lichess.v3+json' -}; +import * as xhr from 'common/xhr'; +import { Pool } from './interfaces'; -export function seeks() { - return $.ajax({ - url: '/lobby/seeks', - headers: headers - }); -} +export const seeks = () => xhr.json('/lobby/seeks'); -export function nowPlaying() { - return $.ajax({ - url: '/account/now-playing', - headers: headers - }).then(o => o.nowPlaying); -} +export const nowPlaying = () => xhr.json('/account/now-playing').then(o => o.nowPlaying); -export function anonPoolSeek(pool) { - return $.ajax({ +export const anonPoolSeek = (pool: Pool) => + xhr.json('/setup/hook/' + window.lichess.sri, { method: 'POST', - url: '/setup/hook/' + window.lichess.sri, - data: { + body: xhr.form({ variant: 1, timeMode: 1, time: pool.lim, increment: pool.inc, days: 1, color: 'random' - } + }) }); -}