本文整理汇总了TypeScript中chessground.Chessground函数的典型用法代码示例。如果您正苦于以下问题：TypeScript Chessground函数的具体用法？TypeScript Chessground怎么用？TypeScript Chessground使用的例子？那么恭喜您, 这里精选的函数代码示例或许可以为您提供帮助。
在下文中一共展示了Chessground函数的7个代码示例，这些例子默认根据受欢迎程度排序。您可以为喜欢或者感觉有用的代码点赞，您的评价将有助于系统推荐出更棒的TypeScript代码示例。
示例1: render
export function render(ctrl: RoundController) {
return h('div.cg-board-wrap', {
hook: {
insert(vnode) {
ctrl.setChessground(Chessground((vnode.elm as HTMLElement), makeConfig(ctrl)));
}
}
}, [
h('div.cg-board')
]);
};示例2: h
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 = ' ';
}
}
}))
])
]);
}));示例3: function
window.lichess.AnalyseNVUI = function(redraw: Redraw) {
const notify = new Notify(redraw),
moveStyle = styleSetting(),
analysisInProgress = prop(false);
window.lichess.pubsub.on('analysis.server.progress', (data: AnalyseData) => {
if (data.analysis && !data.analysis.partial) notify.set('Server-side analysis complete')
});
return {
render(ctrl: AnalyseController): VNode {
const d = ctrl.data, style = moveStyle.get();
if (!ctrl.chessground) ctrl.chessground = Chessground(document.createElement("div"), {
...makeCgConfig(ctrl),
animation: { enabled: false },
drawable: { enabled: false },
coordinates: false
});
return h('main.analyse', [
h('div.nvui', [
h('h1', 'Textual representation'),
h('h2', 'Game info'),
...(['white', 'black'].map((color: Color) => h('p', [
color + ' player: ',
renderPlayer(ctrl, playerByColor(d, 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'
}
}, renderMainline(ctrl.mainline, ctrl.path, style)),
h('h2', 'Pieces'),
h('div.pieces', renderPieces(ctrl.chessground.state.pieces, style)),
h('h2', 'Current position'),
h('p.position', {
attrs: {
'aria-live' : 'assertive',
'aria-atomic' : true
}
}, renderCurrentNode(ctrl.node, style)),
h('h2', 'Move form'),
h('form', {
hook: {
insert(vnode) {
const $form = $(vnode.elm as HTMLFormElement),
$input = $form.find('.move').val('').focus();
$form.submit(onSubmit(ctrl, notify.set, moveStyle.get, $input));
}
}
}, [
h('label', [
'Command input',
h('input.move.mousetrap', {
attrs: {
name: 'move',
'type': 'text',
autocomplete: 'off',
autofocus: true
}
})
])
]),
notify.render(),
// h('h2', 'Actions'),
// h('div.actions', tableInner(ctrl)),
h('h2', 'Computer analysis'),
...(renderAcpl(ctrl, style) || [requestAnalysisButton(ctrl, analysisInProgress, notify.set)]),
h('h2', 'Board'),
h('pre.board', renderBoard(ctrl.chessground.state.pieces, ctrl.data.player.color)),
h('div.content', {
hook: {
insert: vnode => {
$(vnode.elm as HTMLElement).append($('.blind-content').removeClass('none'));
}
}
}),
h('h2', 'Settings'),
h('label', [
'Move notation',
renderSetting(moveStyle, ctrl.redraw)
]),
h('h2', 'Keyboard shortcuts'),
h('p', [
'Use arrow keys to navigate in the game.'
]),
h('h2', 'Commands'),
h('p', [
'Type these commands in the command input.', h('br'),
commands.piece.help, h('br'),
commands.scan.help, h('br')
])
])
]);
}
};
//.........这里部分代码省略.........
示例4: Chessground
insert: vnode => {
ctrl.chessground = Chessground((vnode.elm as HTMLElement), makeConfig(ctrl));
ctrl.setAutoShapes();
if (ctrl.node.shapes) ctrl.chessground.setShapes(ctrl.node.shapes as DrawShape[]);
ctrl.cgVersion.dom = ctrl.cgVersion.js;
},示例5: makeConfig
hook: util.onInsert(el => ctrl.setChessground(Chessground(el, makeConfig(ctrl))))示例6: makeConfig
insert: vnode => ctrl.ground(Chessground((vnode.elm as HTMLElement), makeConfig(ctrl))),示例7: function
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'),
//.........这里部分代码省略.........