function renderChildrenOf(ctx, node, opts): MaybeVNodes {
  const cs = node.children, main = cs[0];
  if (!main) return [];
  if (opts.isMainline) {
    const isWhite = main.ply % 2 === 1;
    if (!cs[1]) return [
      isWhite ? renderIndex(main.ply, false) : null,
      ...renderMoveAndChildrenOf(ctx, main, {
        parentPath: opts.parentPath,
        isMainline: true
      })
    ];
    const mainChildren = renderChildrenOf(ctx, main, {
      parentPath: opts.parentPath + main.id,
      isMainline: true
    }),
    passOpts = {
      parentPath: opts.parentPath,
      isMainline: true
    };
    return [
      isWhite ? renderIndex(main.ply, false) : null,
      renderMoveOf(ctx, main, passOpts),
      isWhite ? emptyMove() : null,
      h('interrupt', renderLines(ctx, cs.slice(1), {
        parentPath: opts.parentPath,
        isMainline: true
      })),
      ...(isWhite && mainChildren ? [
        renderIndex(main.ply, false),
        emptyMove()
      ] : []),
      ...mainChildren
    ];
  }
  return cs[1] ? [renderLines(ctx, cs, opts)] : renderMoveAndChildrenOf(ctx, main, opts);
}

export default function(ctrl: Controller): VNode {
  const showCeval = ctrl.vm.showComputer();
  if (cevalShown !== showCeval) {
    if (!cevalShown) ctrl.vm.autoScrollNow = true;
    cevalShown = showCeval;
  }
  return h('div#puzzle.cg-512', [
    h('div', {
      hook: {
        insert: _ => window.lichess.pubsub.emit('reset_zoom')()
      },
      class: { gauge_displayed: ctrl.showEvalGauge() }
    }, [
      h('div.lichess_game' + (ctrl.pref.blindfold ? '.blindfold' : ''), {
        hook: {
          insert: _ => window.lichess.pubsub.emit('content_loaded')()
        }
      }, [
        visualBoard(ctrl),
        h('div.lichess_ground', [
          // we need the wrapping div here
          // so the siblings are only updated when ceval is added
          h('div', showCeval ? [
            cevalView.renderCeval(ctrl),
            cevalView.renderPvs(ctrl)
          ] : []),
          renderAnalyse(ctrl),
          feedbackView(ctrl),
          buttons(ctrl)
        ])
      ])
    ]),
    h('div.underboard', [
      h('div.center', [
        historyView(ctrl)
      ])
    ])
  ]);
};

function renderTournament(ctrl, tour) {
  let width = tour.minutes * scale;
  const left = leftPos(tour.startsAt);
  // moves content into viewport, for long tourneys and marathons
  const paddingLeft = tour.minutes < 90 ? 0 : Math.max(0,
    Math.min(width - 250, // max padding, reserved text space
      leftPos(now) - left - 380)); // distance from Now
      // cut right overflow to fit viewport and not widen it, for marathons
      width = Math.min(width, leftPos(stopTime) - left);

      return h('a.tournament', {
        class: tournamentClass(tour),
        attrs: {
          href: '/tournament/' + tour.id,
          style: 'width: ' + width + 'px; left: ' + left + 'px; padding-left: ' + paddingLeft + 'px'
        },
      }, [
        h('span.icon', tour.perf ? {
          attrs: {
            'data-icon': tour.perf.icon,
            title: tour.perf.name
          }
        } : {}),
        h('span.body', [
          h('span.name', tour.fullName),
          h('span.infos', [
            h('span.text', [
              displayClock(tour.clock) + ' ',
              tour.variant.key === 'standard' ? null : tour.variant.name + ' ',
              tour.position ? 'Thematic ' : null,
              tour.rated ? ctrl.trans('rated') : ctrl.trans('casual')
            ]),
            tour.nbPlayers ? h('span.nb-players', {
              attrs: { 'data-icon': 'r' }
            }, tour.nbPlayers) : null
          ])
        ])
      ]);
}

export function view(ctrl): VNode {
  const candidates = ctrl.candidates();
  return dialog.form({
    class: 'study_invite',
    onClose() {
      ctrl.open(false);
      ctrl.redraw();
    },
    content: [
      h('h2', 'Invite to the study'),
      h('p.info', { attrs: { 'data-icon': '' } }, [
        'Please only invite people you know,',
        h('br'),
        'and who actively want to join this study.'
      ]),
      candidates.length ? h('div.users', candidates.map(function(username) {
        return h('span.user_link.button', {
          key: username,
          attrs: { 'data-href': '/@/' + username },
          hook: bind('click', _ => ctrl.invite(username))
        }, username);
      })) : undefined,
      h('div.input-wrapper', [ // because typeahead messes up with snabbdom
        h('input', {
          attrs: { placeholder: 'Search by username' },
          hook: {
            insert: vnode => {
              const el = vnode.elm as HTMLInputElement;
              window.lichess.userAutocomplete($(el), {
                tag: 'span',
                onSelect(v) {
                  ctrl.invite(v.name);
                  $(el).typeahead('close');
                  el.value = '';
                  ctrl.redraw();
                }
              });
            }
          }
        })
      ])
    ]
  });
}

 ctrl.data.nowPlaying.map(function(pov) {
   return h('a.mini_board.is2d.' + pov.variant.key + (pov.isMyTurn ? '.my_turn' : ''), {
     key: pov.gameId,
     attrs: { href: '/' + pov.fullId }
   }, [
     h('div', [
       h('div.cg-board-wrap', {
         hook: {
           insert(vnode) {
             const lm = pov.lastMove;
             const config = {
               coordinates: false,
               drawable: { enabled: false, visible: false },
               resizable: false,
               viewOnly: true,
               orientation: pov.variant.key === 'racingKings' ? 'white' : pov.color,
               fen: pov.fen,
               lastMove: lm && [lm[0] + lm[1], lm[2] + lm[3]]
             };
             Chessground(vnode.elm as HTMLElement, config);
           }
         }
       }, [ h('div.cg-board') ])
     ]),
     h('span.meta', [
       pov.opponent.ai ? ctrl.trans('aiNameLevelAiLevel', 'Stockfish', pov.opponent.ai) : pov.opponent.username,
       h('span.indicator',
         pov.isMyTurn ?
         (pov.secondsLeft ? timer(pov) : ctrl.trans('yourTurn')) :
         h('span', {
           hook: {
             insert(vnode) {
               (vnode.elm as HTMLElement).innerHTML = ' ';
             }
           }
         }))
     ])
   ]);
 }));

export default function(ctrl, color, position) {
  if (!ctrl.node.crazy) return;
  const pocket = ctrl.node.crazy.pockets[color === 'white' ? 0 : 1];
  const dropped = ctrl.justDropped;
  let captured = ctrl.justCaptured;
  if (captured) {
    captured = captured.promoted ? 'pawn' : captured.role;
  }
  const activeColor = color === ctrl.turnColor();
  const usable = !ctrl.embed && activeColor;
  return h('div.pocket.is2d.' + position, {
    class: { usable },
    hook: {
      insert: vnode => {
        if (ctrl.embed) return;
        eventNames.forEach(name => {
          (vnode.elm as HTMLElement).addEventListener(name, e => drag(ctrl, color, e as MouchEvent));
        });
      }
    }
  }, oKeys.map(role => {
    let nb = pocket[role] || 0;
    if (activeColor) {
      if (dropped === role) nb--;
      if (captured === role) nb++;
    }
    return h('piece.' + role + '.' + color, {
      attrs: {
        'data-role': role,
        'data-color': color,
        'data-nb': nb
      }
    });
  })
  );
}

function renderMoves(ctrl: RoundController): MaybeVNodes {
  const steps = ctrl.data.steps,
    firstPly = round.firstPly(ctrl.data),
    lastPly = round.lastPly(ctrl.data);
  if (typeof lastPly === 'undefined') return [];

  const pairs: Array<Array<any>> = [];
  let startAt = 1;
  if (firstPly % 2 === 1) {
    pairs.push([null, steps[1]]);
    startAt = 2;
  }
  for (let i = startAt; i < steps.length; i += 2) pairs.push([steps[i], steps[i + 1]]);

  const els: MaybeVNodes = [], curPly = ctrl.ply;
  for (let i = 0; i < pairs.length; i++) {
    els.push(h('index', i + 1 + ''));
    els.push(renderMove(pairs[i][0], curPly));
    els.push(renderMove(pairs[i][1], curPly));
  }
  els.push(renderResult(ctrl));

  return els;
}

 return (c: Challenge) => {
   return h('div.challenge.' + dir + '.c-' + c.id, {
     class: {
       declined: !!c.declined
     }
   }, [
     h('div.content', [
       h('span.head', renderUser(dir === 'in' ? c.challenger : c.destUser)),
       h('span.desc', [
         ctrl.trans()(c.rated ? 'rated' : 'casual'),
         timeControl(c.timeControl),
         c.variant.name
       ].join(' • '))
     ]),
     h('i', {
       attrs: {'data-icon': c.perf.icon}
     }),
     h('div.buttons', (dir === 'in' ? inButtons : outButtons)(ctrl, c))
   ]);
 };

export function view(ctrl: BoardCtrl): VNode {

  return h('div.sub.board', [
    header(ctrl.trans.noarg('boardGeometry'), ctrl.close),
    h('div.selector', [
      h('a.text', {
        class: { active: !ctrl.data.is3d },
        attrs: { 'data-icon': 'E' },
        hook: bind('click', () => ctrl.setIs3d(false))
      }, '2D'),
      h('a.text', {
        class: { active: ctrl.data.is3d },
        attrs: { 'data-icon': 'E' },
        hook: bind('click', () => ctrl.setIs3d(true))
      }, '3D')
    ]),
    h('div.zoom', [
      h('h2', ctrl.trans.noarg('boardSize')),
      h('div.slider', {
        hook: { insert: vnode => makeSlider(ctrl, vnode.elm as HTMLElement) }
      })
    ])
  ]);
}

export function renderIndexAndMove(ctx: Ctx, node): VNode[] {
  return node.uci ?
  [renderIndex(node.ply, ctx.withDots)].concat(renderMove(ctx, node)) :
  [h('span.init', 'Initial position')];
}