TypeScript game.router類代碼示例

function analysisButton(ctrl: RoundController): VNode | null {
  const d = ctrl.data,
  url = router.game(d, analysisBoardOrientation(d)) + '#' + ctrl.ply;
  return game.replayable(d) ? h('a.button', {
    attrs: { href: url },
    hook: util.bind('click', _ => {
      // force page load in case the URL is the same
      if (location.pathname === url.split('#')[0]) location.reload();
    })
  }, ctrl.trans.noarg('analysis')) : null;
}

 hook: util.bind('click', () => {
   const d = ctrl.data;
   if (d.game.rematch) location.href = router.game(d.game.rematch, d.opponent.color);
   else if (d.player.offeringRematch) {
     d.player.offeringRematch = false;
     ctrl.socket.send('rematch-no');
   }
   else if (d.opponent.onGame) {
     d.player.offeringRematch = true;
     ctrl.socket.send('rematch-yes');
   }
   else ctrl.challengeRematch();
 }, ctrl.redraw)

export const reload = throttle(1000, false, (ctrl: RoundController) => {
  $.ajax({
    url: (ctrl.data.player.spectator ?
      router.game(ctrl.data, ctrl.data.player.color) :
      router.player(ctrl.data)
    ) + '/text',
    success(html) {
      $(element).html(html).find('form').submit(function(this: HTMLElement) {
        var text = $(this).find('.move').val();
        var move = {
          from: text.substr(0, 2),
          to: text.substr(2, 2),
          promotion: text.substr(4, 1)
        };
        ctrl.socket.send("move", move, {
          ackable: true
        });
        return false;
      }).find('.move').focus();
    }
  });
});

 hook: util.bind('mousedown', e => {
   const target = e.target as HTMLElement;
   const ply = parseInt(target.getAttribute('data-ply') || '');
   if (!isNaN(ply)) ctrl.userJump(ply);
   else {
     const action = target.getAttribute('data-act') || (target.parentNode as HTMLElement).getAttribute('data-act');
     if (action === 'flip') {
       if (d.tv) location.href = '/tv/' + d.tv.channel + (d.tv.flip ? '' : '?flip=1');
       else if (d.player.spectator) location.href = router.game(d, d.opponent.color);
       else ctrl.flipNow();
     }
   }
 }, ctrl.redraw)

 hook: util.bind('click', e => {
   const d = ctrl.data;
   if (d.game.rematch) location.href = router.game(d.game.rematch, d.opponent.color);
   else if (d.player.offeringRematch) {
     d.player.offeringRematch = false;
     ctrl.socket.send('rematch-no');
   }
   else if (d.opponent.onGame) {
     d.player.offeringRematch = true;
     ctrl.socket.send('rematch-yes');
   }
   else if (!(e.target as HTMLElement).classList.contains('disabled')) ctrl.challengeRematch();
 }, ctrl.redraw)

function analyseButton(ctrl: RoundController) {
  const showInfo = ctrl.forecastInfo(),
  forecastCount = ctrl.data.forecastCount;
  const data: VNodeData = {
    class: {
      'hint--top': !showInfo,
      'hint--bottom': showInfo,
      'glowed': showInfo,
      'text': !!forecastCount
    },
    attrs: {
      'data-hint': ctrl.trans.noarg('analysis'),
      href: router.game(ctrl.data, ctrl.data.player.color) + '/analysis#' + ctrl.ply
    }
  };
  if (showInfo) data.hook = {
    insert(vnode) {
      setTimeout(() => {
        $(vnode.elm as HTMLElement).powerTip({
          closeDelay: 200,
          placement: 'n'
        }).data('powertipjq', $(vnode.elm as HTMLElement).siblings('.forecast-info').clone().removeClass('none')).powerTip('show');
      }, 1000);
    }
  };
  return [
    h('a.fbt.analysis', data, [
      h('span', {
        attrs: { 'data-icon': 'A' },
        class: {text: !!forecastCount}
      }),
      forecastCount ? '' + forecastCount : undefined
    ]),
    showInfo ? h('div.forecast-info.info.none', [
      h('strong.title.text', util.justIcon(''), 'Speed up your game!'),
      h('span.content', 'Use the analysis board to create conditional premoves.')
    ]) : null
  ];
}

export function view(ctrl: AnalyseCtrl): VNode {
  const d = ctrl.data,
  noarg = ctrl.trans.noarg;

  const flipOpts = d.userAnalysis ? {
    hook: bind('click', ctrl.flip)
  } : {
    attrs: { href: router.game(d, d.opponent.color, ctrl.embed) + '#' + ctrl.node.ply }
  };

  const canContinue = !ctrl.ongoing && !ctrl.embed && d.game.variant.key === 'standard';
  const ceval = ctrl.getCeval();
  const mandatoryCeval = ctrl.mandatoryCeval();

  const tools: MaybeVNodes = [
    h('div.tools', [
      h('a.fbt', flipOpts, [
        h('i.icon', { attrs: dataIcon('B') }),
        noarg('flipBoard')
      ]),
      ctrl.ongoing ? null : h('a.fbt', {
        attrs: {
          href: d.userAnalysis ? '/editor?fen=' + ctrl.node.fen : '/' + d.game.id + '/edit?fen=' + ctrl.node.fen,
          rel: 'nofollow',
          target: ctrl.embed ? '_blank' : ''
        }
      }, [
        h('i.icon', { attrs: dataIcon('m') }),
        noarg('boardEditor')
      ]),
      canContinue ? h('a.fbt', {
        hook: bind('click', _ => $.modal($('.continue_with.g_' + d.game.id)))
      }, [
        h('i.icon', {
          attrs: dataIcon('U')
        }),
        noarg('continueFromHere')
      ]) : null,
      studyButton(ctrl)
    ])
  ];

  const cevalConfig: MaybeVNodes = (ceval && ceval.possible && ceval.allowed()) ? ([
    h('h2', noarg('computerAnalysis'))
  ] as MaybeVNodes).concat([
    boolSetting(ctrl, {
      name: 'enable',
      title: mandatoryCeval ? "Required by practice mode" : window.lichess.engineName,
      id: 'all',
      checked: ctrl.showComputer(),
      disabled: mandatoryCeval,
      change: ctrl.toggleComputer
    })
  ]).concat(
    ctrl.showComputer() ? [
      boolSetting(ctrl, {
        name: 'bestMoveArrow',
        title: 'a',
        id: 'shapes',
        checked: ctrl.showAutoShapes(),
        change: ctrl.toggleAutoShapes
      }),
      boolSetting(ctrl, {
        name: 'evaluationGauge',
        id: 'gauge',
        checked: ctrl.showGauge(),
        change: ctrl.toggleGauge
      }),
      boolSetting(ctrl, {
        name: 'infiniteAnalysis',
        title: 'removesTheDepthLimit',
        id: 'infinite',
        checked: ceval.infinite(),
        change: ctrl.cevalSetInfinite
      }),
      (id => {
        const max = 5;
        return h('div.setting', [
          h('label', { attrs: { 'for': id } }, noarg('multipleLines')),
          h('input#' + id, {
            attrs: {
              type: 'range',
              min: 1,
              max,
              step: 1
            },
            hook: rangeConfig(
              () => parseInt(ceval!.multiPv()),
              ctrl.cevalSetMultiPv)
          }),
          h('div.range_value', ceval.multiPv() + ' / ' + max)
        ]);
      })('analyse-multipv'),
      ceval.pnaclSupported ? (id => {
        let max = navigator.hardwareConcurrency;
        if (!max) return;
        if (max > 2) max--; // don't overload your computer, you dummy
        return h('div.setting', [
          h('label', { attrs: { 'for': id } }, noarg('cpus')),
          h('input#' + id, {
//.........這裏部分代碼省略.........

export default function(ctrl: AnalyseCtrl): VNode {
  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,
      game.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
    ])
  ]);
};