export function renderInner(ctrl: RoundController): VNode {
  return h('div.table_inner',
    ctrl.data.player.spectator ? renderTableWatch(ctrl) : (
      game.playable(ctrl.data) ? renderTablePlay(ctrl) : renderTableEnd(ctrl)
    )
  );
}

export function findCurrentPath(c: AnalyseCtrl): Tree.Path | undefined {
  return (!synthetic(c.data) && playable(c.data) && c.initialPath) || (
    c.retro && c.retro.current() && c.retro.current().prev.path
  ) || (
    c.study && c.study.data.chapter.relay && c.study.data.chapter.relay.path
  );
}

function initMessage(d: RoundData) {
  return (game.playable(d) && d.game.turns === 0 && !d.player.spectator) ?
    h('div.message', util.justIcon(''), [
      h('div', [
        `You play the ${d.player.color} pieces`,
        ...(d.player.color === 'white' ? [h('br'), h('strong', "It's your turn!")] : [])
      ])
    ]) : null;
}

export function renderTable(ctrl: RoundController): VNode {
  const contents: MaybeVNodes = [
    renderPlayer(ctrl, ctrl.playerAt('top')),
    renderInner(ctrl)
  ],
    expiration = game.playable(ctrl.data) && renderExpiration(ctrl);
  return h('div.table_wrap', {
    class: { with_expiration: !!expiration }
  }, [
    anyClock(ctrl, 'top'),
    expiration && !expiration[1] ? expiration[0] : null,
    h('div.table', contents),
    expiration && expiration[1] ? expiration[0] : null,
    anyClock(ctrl, 'bottom')
  ]);
};

export function renderTable(ctrl: RoundController): MaybeVNodes {
  return [
    h('div.round__app__table'),
    renderExpiration(ctrl),
    renderPlayer(ctrl, 'top'),
    ...(ctrl.data.player.spectator ? renderTableWatch(ctrl) : (
      game.playable(ctrl.data) ? renderTablePlay(ctrl) : renderTableEnd(ctrl)
    )),
    renderPlayer(ctrl, 'bottom'),
    /* render clocks after players so they display on top of them in col1,
     * since they occupy the same grid cell. This is required to avoid
     * having two columns with min-content, which causes the horizontal moves
     * to overflow: it couldn't be contained in the parent anymore */
    anyClock(ctrl, 'top'),
    anyClock(ctrl, 'bottom'),
  ];
};

export default function(ctrl: RoundController): MaybeVNode {
  const d = playable(ctrl.data) && ctrl.data.expiration;
  if (!d) return;
  const timeLeft = Math.max(0, d.movedAt - Date.now() + d.millisToMove),
    secondsLeft = Math.floor(timeLeft / 1000),
    myTurn = isPlayerTurn(ctrl.data),
    emerg = myTurn && timeLeft < 8000;
  if (!rang && emerg) {
    window.lichess.sound.lowtime();
    rang = true;
  }
  const side = myTurn != ctrl.flip ? 'bottom' : 'top';
  return h('div.expiration.expiration-' + side, {
    class: {
      emerg,
      'bar-glider': myTurn
    }
  }, ctrl.trans.vdomPlural('nbSecondsToPlayTheFirstMove', secondsLeft, h('strong', '' + secondsLeft)));
}

function showBerserk(ctrl: RoundController, color: Color): boolean {
  return !!ctrl.goneBerserk[color] && ctrl.data.game.turns <= 1 && game.playable(ctrl.data);
}

export default function(ctrl: AnalyseCtrl): VNode {
  if (ctrl.nvui) return ctrl.nvui.render(ctrl);
  const concealOf = makeConcealOf(ctrl),
  study = ctrl.study,
  showCevalPvs = !(ctrl.retro && ctrl.retro.isSolving()) && !ctrl.practice,
  menuIsOpen = ctrl.actionMenu.open,
  chapter = study && study.data.chapter,
  studyStateClass = chapter ? chapter.id + study!.vm.loading : 'nostudy',
  gamebookPlay = ctrl.gamebookPlay(),
  gamebookPlayView = gamebookPlay && gbPlay.render(gamebookPlay),
  gamebookEditView = gbEdit.running(ctrl) ? gbEdit.render(ctrl) : undefined,
  relayEdit = study && study.relay && relayManager(study.relay),
  playerBars = renderPlayerBars(ctrl),
  gaugeDisplayed = ctrl.showEvalGauge(),
  needsInnerCoords = !!gaugeDisplayed || !!playerBars;
  return h('div.analyse.cg-512', [
    h('div.' + studyStateClass, {
      hook: {
        insert: _ => {
          if (firstRender) {
            firstRender = false;
            if (ctrl.data.pref.coords === 1) li.loadedCss[innerCoordsCss] = true;
          }
          else li.pubsub.emit('reset_zoom')();
          forceInnerCoords(ctrl, needsInnerCoords);
        },
        update(_, _2) {
          forceInnerCoords(ctrl, needsInnerCoords);
        }
      },
      class: {
        'gauge_displayed': gaugeDisplayed,
        'no_computer': !ctrl.showComputer(),
        'gb_edit': !!gamebookEditView,
        'gb_play': !!gamebookPlayView,
        'relay_edit': !!relayEdit,
        'player_bars': !!playerBars,
      }
    }, [
      h('div.lichess_game', {
        hook: {
          insert: _ => li.pubsub.emit('content_loaded')()
        }
      }, [
        visualBoard(ctrl, playerBars),
        h('div.lichess_ground', gamebookPlayView || [
          menuIsOpen || playerBars ? null : renderClocks(ctrl),
          menuIsOpen ? null : crazyView(ctrl, ctrl.topColor(), 'top'),
          ...(menuIsOpen ? [actionMenu(ctrl)] : [
            cevalView.renderCeval(ctrl),
            showCevalPvs ? cevalView.renderPvs(ctrl) : null,
            renderAnalyse(ctrl, concealOf),
            gamebookEditView ? null : forkView(ctrl, concealOf),
            retroView(ctrl) || practiceView(ctrl) || explorerView(ctrl)
          ]),
          menuIsOpen ? null : crazyView(ctrl, ctrl.bottomColor(), 'bottom'),
          buttons(ctrl),
          gamebookEditView || relayEdit
        ])
      ])
    ]),
    ctrl.embed ? null : h('div.underboard', {
      class: { no_computer: !ctrl.showComputer() }
    }, [
      h('div.center', ctrl.study ? studyView.underboard(ctrl) : [inputs(ctrl)]),
      h('div.right', [acplView(ctrl)])
    ]),
    ctrl.embed || synthetic(ctrl.data) ? null : h('div.analeft', [
      ctrl.forecast ? forecastView(ctrl, ctrl.forecast) : null,
      playable(ctrl.data) ? h('div.back_to_game',
        h('a.button.text', {
          attrs: {
            href: ctrl.data.player.id ? router.player(ctrl.data) : router.game(ctrl.data),
            'data-icon': 'i'
          }
        }, ctrl.trans('backToGame'))
      ) : null
    ])
  ]);
}

window.lichess.RoundNVUI = function(redraw: Redraw) {

  const notify = new Notify(redraw),
    moveStyle = styleSetting();

  window.lichess.pubsub.on('socket.in.message', line => {
    if (line.u === 'lichess') notify.set(line.t);
  });
  window.lichess.pubsub.on('round.suggestion', notify.set);

  return {
    render(ctrl: RoundController): VNode {
      const d = ctrl.data, step = plyStep(d, ctrl.ply), style = moveStyle.get(),
        variantNope = !supportedVariant(d.game.variant.key) && 'Sorry, this variant is not supported in blind mode.';
      if (!ctrl.chessground) {
        ctrl.setChessground(Chessground(document.createElement("div"), {
          ...makeCgConfig(ctrl),
          animation: { enabled: false },
          drawable: { enabled: false },
          coordinates: false
        }));
        if (variantNope) setTimeout(() => notify.set(variantNope), 3000);
      }
      return h('div.nvui', [
        h('h1', 'Textual representation'),
        h('h2', 'Game info'),
        ...(['white', 'black'].map((color: Color) => h('p', [
          color + ' player: ',
          renderPlayer(ctrl, ctrl.playerByColor(color))
        ]))),
        h('p', `${d.game.rated ? 'Rated' : 'Casual'} ${d.game.perf}`),
        d.clock ? h('p', `Clock: ${d.clock.initial / 60} + ${d.clock.increment}`) : null,
        h('h2', 'Moves'),
        h('p.moves', {
          attrs: {
            role : 'log',
            'aria-live': 'off'
          }
        }, renderMoves(d.steps.slice(1), style)),
        h('h2', 'Pieces'),
        h('div.pieces', renderPieces(ctrl.chessground.state.pieces, style)),
        h('h2', 'Game status'),
        h('div.status', {
          attrs: {
            role : 'status',
            'aria-live' : 'assertive',
            'aria-atomic' : true
          }
        }, [ctrl.data.game.status.name === 'started' ? 'Playing' : renderResult(ctrl)]),
        h('h2', 'Last move'),
        h('p.lastMove', {
          attrs: {
            'aria-live' : 'assertive',
            'aria-atomic' : true
          }
        }, renderSan(step.san, step.uci, style)),
        ...(ctrl.isPlaying() ? [
          h('h2', 'Move form'),
          h('form', {
            hook: onInsert(el => {
              const $form = $(el as HTMLFormElement),
                $input = $form.find('.move').val('').focus();
              $form.submit(onSubmit(ctrl, notify.set, moveStyle.get, $input));
            })
          }, [
            h('label', [
              d.player.color === d.game.player ? 'Your move' : 'Waiting',
              h('input.move.mousetrap', {
                attrs: {
                  name: 'move',
                  'type': 'text',
                  autocomplete: 'off',
                  autofocus: true,
                  disabled: !!variantNope,
                  title: variantNope
                }
              })
            ])
          ])
        ]: []),
        h('h2', 'Your clock'),
        h('div.botc', anyClock(ctrl, 'bottom')),
        h('h2', 'Opponent clock'),
        h('div.topc', anyClock(ctrl, 'top')),
        notify.render(),
        h('h2', 'Actions'),
        ...(ctrl.data.player.spectator ? renderTableWatch(ctrl) : (
          game.playable(ctrl.data) ? renderTablePlay(ctrl) : renderTableEnd(ctrl)
        )),
        h('h2', 'Board'),
        h('pre.board', renderBoard(ctrl.chessground.state.pieces, ctrl.data.player.color)),
        h('h2', 'Settings'),
        h('label', [
          'Move notation',
          renderSetting(moveStyle, ctrl.redraw)
        ]),
        h('h2', 'Commands'),
        h('p', [
          'Type these commands in the move input.', h('br'),
          '/c: Read clocks.', h('br'),
//.........这里部分代码省略.........

export default function(ctrl: AnalyseCtrl): VNode {
  if (ctrl.nvui) return ctrl.nvui.render(ctrl);
  const concealOf = makeConcealOf(ctrl),
    study = ctrl.study,
    showCevalPvs = !(ctrl.retro && ctrl.retro.isSolving()) && !ctrl.practice,
    menuIsOpen = ctrl.actionMenu.open,
    chapter = study && study.data.chapter,
    gamebookPlay = ctrl.gamebookPlay(),
    gamebookPlayView = gamebookPlay && gbPlay.render(gamebookPlay),
    gamebookEditView = gbEdit.running(ctrl) ? gbEdit.render(ctrl) : undefined,
    playerBars = renderPlayerBars(ctrl),
    clocks = !playerBars && renderClocks(ctrl),
    gaugeOn = ctrl.showEvalGauge(),
    needsInnerCoords = !!gaugeOn || !!playerBars;
  return h('main.analyse.variant-' + ctrl.data.game.variant.key + (chapter ? '.' + chapter.id : ''), {
    hook: {
      insert: vn => {
        forceInnerCoords(ctrl, needsInnerCoords);
        if (!!playerBars != $('body').hasClass('header-margin')) {
          li.raf(() => {
            $('body').toggleClass('header-margin', !!playerBars);
            ctrl.redraw();
          });
        }
        gridHacks.start(vn.elm as HTMLElement);
      },
      update(_, _2) {
        forceInnerCoords(ctrl, needsInnerCoords);
      },
      postpatch(old, vnode) {
        if (old.data!.gaugeOn !== gaugeOn) li.dispatchEvent(document.body, 'chessground.resize');
        vnode.data!.gaugeOn = gaugeOn;
      }
    },
    class: {
      'comp-off': !ctrl.showComputer(),
      'gauge-on': gaugeOn,
      'has-players': !!playerBars,
      'has-clocks': !!clocks
    }
  }, [
    ctrl.keyboardHelp ? keyboardView(ctrl) : null,
    ctrl.study ? studyView.overboard(ctrl.study) : null,
    h('div.analyse__board.main-board', {
      hook: (window.lichess.hasTouchEvents || ctrl.gamebookPlay()) ? undefined : bind('wheel', (e: WheelEvent) => wheel(ctrl, e))
    }, [
      ...(clocks || []),
      playerBars ? playerBars[ctrl.bottomIsWhite() ? 1 : 0] : null,
      chessground.render(ctrl),
      playerBars ? playerBars[ctrl.bottomIsWhite() ? 0 : 1] : null,
      renderPromotion(ctrl)
    ]),
    gaugeOn ? cevalView.renderGauge(ctrl) : null,
    menuIsOpen ? null : crazyView(ctrl, ctrl.topColor(), 'top'),
    gamebookPlayView || h('div.analyse__tools', [
      ...(menuIsOpen ? [actionMenu(ctrl)] : [
        cevalView.renderCeval(ctrl),
        showCevalPvs ? cevalView.renderPvs(ctrl) : null,
        renderAnalyse(ctrl, concealOf),
        gamebookEditView,
        retroView(ctrl) || practiceView(ctrl) || explorerView(ctrl)
      ])
    ]),
    menuIsOpen ? null : crazyView(ctrl, ctrl.bottomColor(), 'bottom'),
    gamebookPlayView ? null : controls(ctrl),
    ctrl.embed ? null : h('div.analyse__underboard', {
      hook: (ctrl.synthetic || playable(ctrl.data)) ? undefined : onInsert(elm => serverSideUnderboard(elm, ctrl))
    }, ctrl.study ? studyView.underboard(ctrl) : [inputs(ctrl)]),
    acplView(ctrl),
    ctrl.embed ? null : (
      ctrl.studyPractice ? studyPracticeView.side(ctrl.study!) :
      h('aside.analyse__side', {
        hook: onInsert(elm => {
          ctrl.opts.$side && ctrl.opts.$side.length && $(elm).replaceWith(ctrl.opts.$side);
          $(elm).append($('.streamers').clone().removeClass('none'));
        })
      },
        ctrl.studyPractice ? [studyPracticeView.side(ctrl.study!)] : (
          ctrl.study ? [studyView.side(ctrl.study)] : [
            ctrl.forecast ? forecastView(ctrl, ctrl.forecast) : null,
            (!ctrl.synthetic && playable(ctrl.data)) ? h('div.back-to-game',
              h('a.button.button-empty.text', {
                attrs: {
                  href: router.game(ctrl.data),
                  'data-icon': 'i'
                }
              }, ctrl.trans.noarg('backToGame'))
            ) : null
          ]
        )
      )
    ),
    study && study.relay && relayManager(study.relay),
    ctrl.opts.chat && h('section.mchat', {
      hook: onInsert(_ => {
        if (ctrl.opts.chat.instance) ctrl.opts.chat.instance.destroy();
        ctrl.opts.chat.parseMoves = true;
        li.makeChat(ctrl.opts.chat, chat => {
          ctrl.opts.chat.instance = chat;
        });
//.........这里部分代码省略.........