export default function(opts, redraw: () => void): Controller {

  let vm: Vm = {} as Vm;
  var data, tree, ceval, moveTest;
  const ground = prop<CgApi | undefined>(undefined);
  const threatMode = prop(false);

  // required by ceval
  vm.showComputer = () => vm.mode === 'view';
  vm.showAutoShapes = () => true;

  function setPath(path) {
    vm.path = path;
    vm.nodeList = tree.getNodeList(path);
    vm.node = treeOps.last(vm.nodeList)!;
    vm.mainline = treeOps.mainlineNodeList(tree.root);
  };

  function withGround<A>(f: (cg: CgApi) => A): A | undefined {
    const g = ground();
    if (g) return f(g);
  }

  function initiate(fromData) {
    data = fromData;
    tree = treeBuild(treeOps.reconstruct(data.game.treeParts));
    var initialPath = treePath.fromNodeList(treeOps.mainlineNodeList(tree.root));
    // play | try | view
    vm.mode = 'play';
    vm.loading = false;
    vm.round = undefined;
    vm.voted = undefined;
    vm.justPlayed = undefined;
    vm.resultSent = false;
    vm.lastFeedback = 'init';
    vm.initialPath = initialPath;
    vm.initialNode = tree.nodeAtPath(initialPath);

    setPath(treePath.init(initialPath));
    setTimeout(function() {
      jump(initialPath);
      redraw();
    }, 500);

    // just to delay button display
    vm.canViewSolution = false;
    setTimeout(function() {
      vm.canViewSolution = true;
      redraw();
    }, 5000);

    moveTest = moveTestBuild(vm, data.puzzle);

    withGround(function(g) {
      g.setAutoShapes([]);
      g.setShapes([]);
      showGround(g);
    });

    instanciateCeval();

    history.replaceState(null, '', '/training/' + data.puzzle.id);
  };

  var makeCgOpts = function() {
    const node = vm.node;
    const color: Color = node.ply % 2 === 0 ? 'white' : 'black';
    const dests = readDests(node.dests);
    const movable = (vm.mode === 'view' || color === data.puzzle.color) ? {
      color: (dests && Object.keys(dests).length > 0) ? color : null,
      dests: dests || {}
    } : {
      color: null,
      dests: {}
    };
    const config = {
      fen: node.fen,
      orientation: data.puzzle.color,
      turnColor: color,
      movable: movable,
      premovable: {
        enabled: false
      },
      check: !!node.check,
      lastMove: uciToLastMove(node.uci)
    };
    if (node.ply >= vm.initialNode.ply) {
      if (!dests && !node.check) {
        // premove while dests are loading from server
        // can't use when in check because it highlights the wrong king
        config.turnColor = opposite(color);
        config.movable.color = color;
        config.premovable.enabled = true;
      } else if (vm.mode !== 'view' && color !== data.puzzle.color) {
        config.movable.color = data.puzzle.color;
        config.premovable.enabled = true;
      }
    }
    vm.cgConfig = config;
    return config;
//.........这里部分代码省略.........

export function make(opts): EvalCache {
  const fenFetched: string[] = [];
  function hasFetched(node): boolean {
    return fenFetched.includes(node.fen);
  };
  let upgradable = prop(false);
  return {
    onCeval: throttle(500, function() {
      const node = opts.getNode(), ev = node.ceval;
      if (ev && !ev.cloud && hasFetched(node) && qualityCheck(ev) && opts.canPut(node)) {
        opts.send("evalPut", toPutData(opts.variant, ev));
      }
    }),
    fetch(path: Tree.Path, multiPv: number): void {
      const node = opts.getNode();
      if ((node.ceval && node.ceval.cloud) || !opts.canGet(node)) return;
      if (hasFetched(node)) return;
      fenFetched.push(node.fen);
      const obj: any = {
        fen: node.fen,
        path
      };
      if (opts.variant !== 'standard') obj.variant = opts.variant;
      if (multiPv > 1) obj.mpv = multiPv;
      if (upgradable()) obj.up = true;
      opts.send("evalGet", obj);
    },
    onCloudEval(serverEval): void {
      opts.receive(toCeval(serverEval), serverEval.path);
    },
    upgradable
  };
};

export function ctrl(root: AnalyseCtrl) {

  const all = prop<any | null>(null);

  function loadGlyphs() {
    if (!all()) xhr.glyphs().then(gs => {
      all(gs);
      root.redraw();
    });
  };

  const toggleGlyph = throttle(500, (id: string) => {
    root.study!.makeChange('toggleGlyph', root.study!.withPosition({
      id
    }));
  });

  return {
    root,
    all,
    loadGlyphs,
    toggleGlyph,
    redraw: root.redraw
  };
}

export function ctrl(root: AnalyseCtrl): CommentForm {

  const current = prop<Current | null>(null),
  focus = prop(false),
  opening = prop(false);

  function submit(text: string): void {
    if (!current()) return;
    doSubmit(text);
  };

  const doSubmit = throttle(500, (text: string) => {
    const cur = current();
    if (cur) root.study!.makeChange('setComment', {
      ch: cur.chapterId,
      path: cur.path,
      text
    });
  });

  function start(chapterId: string, path: Tree.Path, node: Tree.Node): void {
    opening(true);
    current({
      chapterId,
      path,
      node
    });
    root.userJump(path);
  };

  return {
    root,
    current,
    focus,
    opening,
    submit,
    start,
    onSetPath(chapterId: string, path: Tree.Path, node: Tree.Node, playedMyself: boolean): void {
      setTimeout(() => {
        const cur = current();
        if (cur && (path !== cur.path || chapterId !== cur.chapterId) && (!focus() || playedMyself)) {
          cur.chapterId = chapterId;
          cur.path = path;
          cur.node = node;
          root.redraw();
        }
      }, 100);
    },
    redraw: root.redraw,
    delete(chapterId: string, path: Tree.Path, id: string) {
      root.study!.makeChange('deleteComment', {
        ch: chapterId,
        path,
        id
      });
    }
  };
}

export function ctrl(root: AnalyseCtrl, getChapter: () => StudyChapter, types) {

  const submit = throttle(500, function(name, value) {
    root.study!.makeChange('setTag', {
      chapterId: getChapter().id,
      name,
      value: value.substr(0, 140)
    });
  });

  return {
    submit(name) {
      return value => submit(name, value);
    },
    getChapter,
    types
  }
}

        ctrl.autoScrollRequested = false;
      }
    }
  };
}

export function retroLine(ctx: Ctx, node: Tree.Node, opts: Opts): VNode | undefined {
  return node.comp && ctx.ctrl.retro && ctx.ctrl.retro.hideComputerLine(node, opts.parentPath) ?
  h('line', ctx.ctrl.trans.noarg('learnFromThisMistake')) : undefined;
}

function eventPath(e: MouseEvent): Tree.Path | null {
  return (e.target as HTMLElement).getAttribute('p') ||
  ((e.target as HTMLElement).parentNode as HTMLElement).getAttribute('p');
}

export const autoScroll = throttle(200, (ctrl: AnalyseCtrl, el: HTMLElement) => {
  const cont = el.parentNode as HTMLElement;
  if (!cont) return;
  const target = el.querySelector('.active') as HTMLElement;
  if (!target) {
    cont.scrollTop = ctrl.path ? 99999 : 0;
    return;
  }
  cont.scrollTop = target.offsetTop - cont.offsetHeight / 2 + target.offsetHeight;
});

export function nonEmpty(x: any): boolean {
  return !!x;
}

export function make(send: SocketSend, ctrl: RoundController): RoundSocket {

  function reload(o: Incoming, isRetry?: boolean) {
    // avoid reload if possible!
    if (o && o.t) {
      ctrl.setLoading(false);
      handlers[o.t](o.d);
    }
    else xhr.reload(ctrl).then(data => {
      if (li.socket.getVersion() > data.player.version) {
        // race condition! try to reload again
        if (isRetry) li.reload(); // give up and reload the page
        else reload(o, true);
      }
      else ctrl.reload(data);
    });
  };

  const handlers: Handlers = {
    takebackOffers(o) {
      ctrl.setLoading(false);
      ctrl.data.player.proposingTakeback = o[ctrl.data.player.color];
      const fromOp = ctrl.data.opponent.proposingTakeback = o[ctrl.data.opponent.color];
      if (fromOp) notify(ctrl.trans('yourOpponentProposesATakeback'));
      ctrl.redraw();
    },
    move: ctrl.apiMove,
    drop: ctrl.apiMove,
    reload,
    redirect: ctrl.setRedirecting,
    clockInc(o) {
      if (ctrl.clock) {
        ctrl.clock.addTime(o.color, o.time);
        ctrl.redraw();
      }
    },
    cclock(o) {
      if (ctrl.corresClock) {
        ctrl.data.correspondence.white = o.white;
        ctrl.data.correspondence.black = o.black;
        ctrl.corresClock.update(o.white, o.black);
        ctrl.redraw();
      }
    },
    crowd(o) {
      game.setOnGame(ctrl.data, 'white', o['white']);
      game.setOnGame(ctrl.data, 'black', o['black']);
      ctrl.redraw();
    },
    // end: function(winner) { } // use endData instead
    endData(o: ApiEnd) {
      ctrl.endWithData(o);
    },
    rematchOffer(by: Color) {
      ctrl.data.player.offeringRematch = by === ctrl.data.player.color;
      const fromOp = ctrl.data.opponent.offeringRematch = by === ctrl.data.opponent.color;
      if (fromOp) notify(ctrl.trans('yourOpponentWantsToPlayANewGameWithYou'));
      ctrl.redraw();
    },
    rematchTaken(nextId: string) {
      ctrl.data.game.rematch = nextId;
      if (!ctrl.data.player.spectator) ctrl.setLoading(true);
      else ctrl.redraw();
    },
    drawOffer(by) {
      ctrl.data.player.offeringDraw = by === ctrl.data.player.color;
      const fromOp = ctrl.data.opponent.offeringDraw = by === ctrl.data.opponent.color;
      if (fromOp) notify(ctrl.trans('yourOpponentOffersADraw'));
      ctrl.redraw();
    },
    berserk(color: Color) {
      ctrl.setBerserk(color);
    },
    gone(isGone) {
      if (!ctrl.data.opponent.ai) {
        game.setIsGone(ctrl.data, ctrl.data.opponent.color, isGone);
        ctrl.redraw();
      }
    },
    checkCount(e) {
      ctrl.data.player.checks = ctrl.data.player.color == 'white' ? e.white : e.black;
      ctrl.data.opponent.checks = ctrl.data.opponent.color == 'white' ? e.white : e.black;
      ctrl.redraw();
    },
    simulPlayerMove(gameId: string) {
      if (
        ctrl.opts.userId &&
        ctrl.data.simul &&
        ctrl.opts.userId == ctrl.data.simul.hostId &&
        gameId !== ctrl.data.game.id &&
        ctrl.moveOn.get() &&
        ctrl.chessground.state.turnColor !== ctrl.chessground.state.movable.color) {
        ctrl.setRedirecting();
        sound.move();
        li.hasToReload = true;
        location.href = '/' + gameId;
      }
    },
    simulEnd(simul: game.Simul) {
      li.loadCssPath('modal');
//.........这里部分代码省略.........

  return h('div.hint', [
    h('div.legend', [
      iconTag(''),
      h('p', 'Optional, on-demand hint for the player:')
    ]),
    h('textarea', {
      attrs: { placeholder: 'Give the player a tip so they can find the right move' },
      hook: textareaHook(ctrl, field)
    })
  ]);
}

const saveNode = throttle(500, (ctrl: AnalyseCtrl, gamebook: Tree.Gamebook) => {
  ctrl.socket.send('setGamebook', {
    path: ctrl.path,
    ch: ctrl.study!.vm.chapterId,
    gamebook: gamebook
  });
  ctrl.redraw();
});

function nodeGamebookValue(node: Tree.Node, field: string): string {
  return (node.gamebook && node.gamebook[field]) || '';
}

function textareaHook(ctrl: AnalyseCtrl, field: string): Hooks {
  const value = nodeGamebookValue(ctrl.node, field);
  return {
    insert(vnode: VNode) {
      const el = vnode.elm as HTMLInputElement;
      el.value = value;
      el.onkeyup = el.onpaste = () => {

import { h } from 'snabbdom'
import { VNode } from 'snabbdom/vnode'
import { defined } from 'common';
import throttle from 'common/throttle';
import { renderEval as normalizeEval } from 'chess';
import { path as treePath } from 'tree';
import { MaybeVNodes } from '../interfaces';

const autoScroll = throttle(150, (ctrl, el) => {
  var cont = el.parentNode;
  var target = el.querySelector('.active');
  if (!target) {
    cont.scrollTop = ctrl.vm.path === treePath.root ? 0 : 99999;
    return;
  }
  cont.scrollTop = target.offsetTop - cont.offsetHeight / 2 + target.offsetHeight;
});

function pathContains(ctx, path) {
  return treePath.contains(ctx.ctrl.vm.path, path);
}

function plyToTurn(ply) {
  return Math.floor((ply - 1) / 2) + 1;
}

export function renderIndex(ply, withDots): VNode {
  return h('index', plyToTurn(ply) + (withDots ? (ply % 2 === 1 ? '.' : '...') : ''));
}

function renderChildrenOf(ctx, node, opts): MaybeVNodes {

import viewStatus from 'game/view/status';
import * as util from '../util';
import RoundController from '../ctrl';
import { Step, MaybeVNodes, RoundData } from '../interfaces';

const scrollMax = 99999, moveTag = 'm1';

const autoScroll = throttle(100, (movesEl: HTMLElement, ctrl: RoundController) => {
  if (ctrl.data.steps.length < 7) return;
  let st: number | undefined = undefined;
  if (ctrl.ply < 3) st = 0;
  else if (ctrl.ply == round.lastPly(ctrl.data)) st = scrollMax;
  else {
    const plyEl = movesEl.querySelector('.active') as HTMLElement | undefined;
    if (plyEl) st = window.lichess.isCol1() ?
      plyEl.offsetLeft - movesEl.offsetWidth / 2 + plyEl.offsetWidth / 2 :
      plyEl.offsetTop - movesEl.offsetHeight / 2 + plyEl.offsetHeight / 2;
  }
  if (typeof st == 'number') {
    if (st == scrollMax) movesEl.scrollLeft = movesEl.scrollTop = st;
    else if (window.lichess.isCol1()) movesEl.scrollLeft = st;
    else movesEl.scrollTop = st;
  }
});

function renderMove(step: Step, curPly: number) {
  return step ? h(moveTag, {
    class: { active: step.ply === curPly }
  }, step.san[0] === 'P' ? step.san.slice(1) : step.san) : null;
}