<commit_before>import * as xhr from 'common/xhr';
import sparkline from '@fnando/sparkline';
import throttle from 'common/throttle';

lichess.load.then(() => {
  $('#trainer').each(function (this: HTMLElement) {
    const $trainer = $(this);
    const $board = $('.coord-trainer__board .cg-wrap');
    let ground;
    const $side = $('.coord-trainer__side');
    const $right = $('.coord-trainer__table');
    const $bar = $trainer.find('.progress_bar');
    const $coords = [$('#next_coord0'), $('#next_coord1')];
    const $start = $right.find('.start');
    const $explanation = $right.find('.explanation');
    const $score = $('.coord-trainer__score');
    const $timer = $('.coord-trainer__timer');
    const scoreUrl = $trainer.data('score-url');
    const duration = 30 * 1000;
    const tickDelay = 50;
    let colorPref = $trainer.data('color-pref');
    let color;
    let startAt, score;
    let wrongTimeout;

    const showColor = function () {
      color = colorPref == 'random' ? ['white', 'black'][Math.round(Math.random())] : colorPref;
      if (!ground)
        ground = window.Chessground($board[0], {
          coordinates: false,
          drawable: { enabled: false },
          movable: {
            free: false,
            color: null,
          },
          orientation: color,
          addPieceZIndex: $('#main-wrap').hasClass('is3d'),
        });
      else if (color !== ground.state.orientation) ground.toggleOrientation();
      $trainer.removeClass('white black').addClass(color);
    };
    showColor();

    $trainer.find('form.color').each(function (this: HTMLFormElement) {
      const form = this,
        $form = $(this);
      $form.find('input').on('change', function () {
        const selected = $form.find('input:checked').val() as string;
        const c = {
          1: 'white',
          2: 'random',
          3: 'black',
        }[selected];
        if (c !== colorPref) xhr.formToXhr(form);
        colorPref = c;
        showColor();
        return false;
      });
    });

    const setZen = throttle(1000, zen =>
      xhr.text('/pref/zen', {
        method: 'post',
        body: xhr.form({ zen: zen ? 1 : 0 }),
      })
    );

    lichess.pubsub.on('zen', () => {
      const zen = !$('body').hasClass('zen');
      $('body').toggleClass('zen', zen);
      window.dispatchEvent(new Event('resize'));
      setZen(zen);
      requestAnimationFrame(showCharts);
    });

    $('body').addClass('playing'); // for zen
    window.Mousetrap.bind('z', () => {
      lichess.pubsub.emit('zen');
    });

    $('#zentog').on('click', () => lichess.pubsub.emit('zen'));

    function showCharts() {
      $side.find('.user_chart').each(function (this: HTMLElement) {
        const $svg = $('<svg class="sparkline" height="80px" stroke-width="3">')
          .attr('width', $(this).width() + 'px')
          .prependTo($(this).empty());
        sparkline(($svg[0] as unknown) as SVGSVGElement, $(this).data('points'), {
          interactive: true,
          /* onmousemove(event, datapoint) { */
          /*   var svg = findClosest(event.target, "svg"); */
          /*   var tooltip = svg.nextElementSibling; */
          /*   var date = new Date(datapoint.date).toUTCString().replace(/^.*?, (.*?) \d{2}:\d{2}:\d{2}.*?$/, "$1"); */

          /*   tooltip.hidden = false; */
          /*   tooltip.textContent = `${date}: $${datapoint.value.toFixed(2)} USD`; */
          /*   tooltip.style.top = `${event.offsetY}px`; */
          /*   tooltip.style.left = `${event.offsetX + 20}px`; */
          /* }, */

          /* onmouseout() { */<commit_msg>simplify coordinate zen - for #8665<commit_after>import * as xhr from 'common/xhr';
import sparkline from '@fnando/sparkline';
import throttle from 'common/throttle';

lichess.load.then(() => {
  $('#trainer').each(function (this: HTMLElement) {
    const $trainer = $(this);
    const $board = $('.coord-trainer__board .cg-wrap');
    let ground;
    const $side = $('.coord-trainer__side');
    const $right = $('.coord-trainer__table');
    const $bar = $trainer.find('.progress_bar');
    const $coords = [$('#next_coord0'), $('#next_coord1')];
    const $start = $right.find('.start');
    const $explanation = $right.find('.explanation');
    const $score = $('.coord-trainer__score');
    const $timer = $('.coord-trainer__timer');
    const scoreUrl = $trainer.data('score-url');
    const duration = 30 * 1000;
    const tickDelay = 50;
    let colorPref = $trainer.data('color-pref');
    let color;
    let startAt, score;
    let wrongTimeout;

    const showColor = function () {
      color = colorPref == 'random' ? ['white', 'black'][Math.round(Math.random())] : colorPref;
      if (!ground)
        ground = window.Chessground($board[0], {
          coordinates: false,
          drawable: { enabled: false },
          movable: {
            free: false,
            color: null,
          },
          orientation: color,
          addPieceZIndex: $('#main-wrap').hasClass('is3d'),
        });
      else if (color !== ground.state.orientation) ground.toggleOrientation();
      $trainer.removeClass('white black').addClass(color);
    };
    showColor();

    $trainer.find('form.color').each(function (this: HTMLFormElement) {
      const form = this,
        $form = $(this);
      $form.find('input').on('change', function () {
        const selected = $form.find('input:checked').val() as string;
        const c = {
          1: 'white',
          2: 'random',
          3: 'black',
        }[selected];
        if (c !== colorPref) xhr.formToXhr(form);
        colorPref = c;
        showColor();
        return false;
      });
    });

    const setZen = throttle(1000, zen =>
      xhr.text('/pref/zen', {
        method: 'post',
        body: xhr.form({ zen: zen ? 1 : 0 }),
      })
    );

    lichess.pubsub.on('zen', () => {
      const zen = !$('body').hasClass('zen');
      $('body').toggleClass('zen', zen);
      window.dispatchEvent(new Event('resize'));
      setZen(zen);
      requestAnimationFrame(showCharts);
    });

    window.Mousetrap.bind('z', () => lichess.pubsub.emit('zen'));

    $('#zentog').on('click', () => lichess.pubsub.emit('zen'));

    function showCharts() {
      $side.find('.user_chart').each(function (this: HTMLElement) {
        const $svg = $('<svg class="sparkline" height="80px" stroke-width="3">')
          .attr('width', $(this).width() + 'px')
          .prependTo($(this).empty());
        sparkline(($svg[0] as unknown) as SVGSVGElement, $(this).data('points'), {
          interactive: true,
          /* onmousemove(event, datapoint) { */
          /*   var svg = findClosest(event.target, "svg"); */
          /*   var tooltip = svg.nextElementSibling; */
          /*   var date = new Date(datapoint.date).toUTCString().replace(/^.*?, (.*?) \d{2}:\d{2}:\d{2}.*?$/, "$1"); */

          /*   tooltip.hidden = false; */
          /*   tooltip.textContent = `${date}: $${datapoint.value.toFixed(2)} USD`; */
          /*   tooltip.style.top = `${event.offsetY}px`; */
          /*   tooltip.style.left = `${event.offsetX + 20}px`; */
          /* }, */

          /* onmouseout() { */
{'fraction_non_alphanumeric': 0.1982987031097476, 'fraction_numerical': 0.009482638404685538, 'mean_word_length': 2.4580520732883318, 'pattern_counts': {'":': 0, '<': 5, '<?xml version=': 0, '>': 15, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2328909', 'n_tokens_mistral': 2346, 'n_tokens_neox': 2269, 'n_words': 439}