TypeScript hyperscript.hyperscript函数代码示例

function renderActionsBar(ctrl: TrainingCtrl) {
  return h('section#training_actions.actions_bar', [
    h('button.action_bar_button.training_action.fa.fa-area-chart', {
      key: 'puzzleMenu',
      oncreate: helper.ontap(ctrl.menu.open)
    }),
    h('button.action_bar_button.training_action.fa.fa-share-alt', {
      key: 'sharePuzzle',
      oncreate: helper.ontap(ctrl.share, () => window.plugins.toast.show('Share this puzzle', 'short', 'bottom'))
    }),
    h('button.action_bar_button.training_action[data-icon=A]', {
      key: 'analysePuzzle',
      oncreate: helper.ontap(ctrl.goToAnalysis, () => window.plugins.toast.show(i18n('analysis'), 'short', 'bottom')),
      disabled: ctrl.vm.mode !== 'view'
    }),
    h('button.action_bar_button.training_action.fa.fa-backward', {
      oncreate: helper.ontap(ctrl.rewind, undefined, ctrl.rewind),
      key: 'historyPrev',
      disabled: !ctrl.canGoBackward()
    }),
    h('button.action_bar_button.training_action.fa.fa-forward', {
      oncreate: helper.ontap(ctrl.fastforward, undefined, ctrl.fastforward),
      key: 'historyNext',
      disabled: !ctrl.canGoForward()
    })
  ])
}

export default function BoardBrush(bounds: ClientRect, orientation: Color, shapes: Shape[], pieceTheme: string) {
  if (!shapes) return null
  if (!bounds) return null
  if (bounds.width !== bounds.height) return null

  return h('svg', {
    xmlns: 'http://www.w3.org/2000/svg',
    version: '1.1'
  }, [
    usedBrushes,
    shapes.map(renderShape(orientation, false, brushes, bounds, pieceTheme))
  ])
}

function renderBody() {
  return [
    h('div.native_scroller.page.settings_list.radio_list', [
      h('ul#boardThemes', settings.general.theme.availableBoardThemes.map((t) => {
        return h('li.list_item', {}, [
          formWidgets.renderRadio(
            t[0], 'board_theme', t[1],
            settings.general.theme.board() === t[1],
            e => {
              settings.general.theme.board((e.target as HTMLInputElement).value)
              onBoardThemeChange((e.target as HTMLInputElement).value)
              redraw()
            }
          ),
          h('div.board_icon.vertical_align', {
            className: t[1]
          })
        ])
      }))
    ])
  ]
}

 h('ul', list.map((t) => {
   const selected = settings.general.theme.background() === t.key
   return h('li.list_item', [
     formWidgets.renderRadio(
       t.name,
       'bg_theme',
       t.key,
       selected,
       e => {
         const val = (e.target as HTMLInputElement).value
         const prevTheme = settings.general.theme.background()
         settings.general.theme.background(val)
         if (val === 'dark' || val === 'light') {
           layout.onBackgroundChange(val)
           redraw()
         } else {
           ctrl.loading = true
           loadImage(val + '.' + t.ext, ctrl.onProgress)
           .then(() => {
             layout.onBackgroundChange(val)
             ctrl.stopLoading()
           })
           .catch(() => {
             settings.general.theme.background(prevTheme)
             ctrl.stopLoading()
             handleError()
           })
           redraw()
         }
       },
       ctrl.loading
     ),
     selected && ctrl.progress ? h('div.theme-progressBarContainer', [
       h('div.theme-progressBar', { style: { transform: `translateX(-${100 - progressPercent(ctrl.progress)}%)` }}),
       h('div.theme-progressInner', progressAmount(ctrl.progress))
     ]) : null
   ])
 }))

function renderMoveTimes(ctrl: AnalyseCtrl, moveCentis: number[], vd: helper.ViewportDim, isPortrait: boolean) {
  return h('div.analyse-moveTimes', {
    key: 'move-times'
  }, [
    h('strong.title', i18n('moveTimes')),
    h('svg#moveTimes-chart.analyse-chart', {
      key: 'movetimes-chart',
      width: isPortrait ? vd.vw : vd.vw - vd.vh + helper.headerHeight,
      height: 150,
      oncreate({ dom }: Mithril.DOMNode) {
        setTimeout(() => {
          this.updateCurPly = drawMoveTimesChart(dom as SVGElement, ctrl.data, moveCentis, ctrl.node.ply)
        }, 100)
      },
      onupdate() {
        if (this.updateCurPly) batchRequestAnimationFrame(() => {
          if (ctrl.onMainline) this.updateCurPly(ctrl.node.ply)
          else this.updateCurPly(null)
        })
      }
    })
  ])
}

function renderAppPrefs() {
  return [
    h('li.list_item',
      formWidgets.renderMultipleChoiceButton(
        'How do you move pieces?', [
          { label: 'Tap two squares', value: 'tap' },
          { label: 'Drag a piece', value: 'drag' },
          { label: 'Either', value: 'both' },
        ],
        settings.game.pieceMove
      )
    ),
  ]
}

export default function view(ctrl: Editor) {
  const color = ctrl.chessground.state.orientation
  const opposite = color === 'white' ? 'black' : 'white'
  const isPortrait = helper.isPortrait()
  const bounds = helper.getBoardBounds(helper.viewportDim(), isPortrait)

  const board = h(Board, {
    variant: ctrl.data.game.variant.key,
    chessground: ctrl.chessground,
    bounds
  })

  return layout.board(
    header(i18n('boardEditor')),
    h.fragment({ key: isPortrait ? 'portrait' : 'landscape' }, [
      board,
      h('div.editor-wrapper', [
        h('div#boardEditor.editor-table', {
          className: settings.general.theme.piece(),
          oncreate: ctrl.editorOnCreate,
          onremove: ctrl.editorOnRemove
        }, [
          h('div.editor-piecesDrawer', [
            sparePieces(opposite, color, 'top'),
            sparePieces(color, color, 'bottom')
          ]),
        ]),
        renderActionsBar(ctrl)
      ])
    ]),
    [
      menu.view(ctrl.menu),
      continuePopup.view(ctrl.continuePopup),
      pasteFenPopup.view(ctrl.pasteFenPopup)
    ]
  )
}

function renderBody() {
  return h('div', {
    style: { width: '100%', height: '100%' }
  }, [
    h('ul.settings_list.general.native_scroller.page', [
      utils.hasNetwork() && session.isConnected() ? h('li.list_item.nav', {
        key: 'preferences',
        oncreate: helper.ontapY(() => router.set('/settings/preferences'))
      }, i18n('preferences')) : null,
      h('li.list_item.nav', {
        key: 'lang',
        oncreate: helper.ontapY(() => router.set('/settings/lang'))
      }, i18n('language')),
      h('li.list_item.nav', {
        key: 'gameDisplay',
        oncreate: helper.ontapY(() => router.set('/settings/gameDisplay'))
      }, i18n('gameDisplay')),
      h('li.list_item.nav', {
        key: 'theme',
        oncreate: helper.ontapY(() => router.set('/settings/theme'))
      }, `${i18n('theming')}`),
      h('li.list_item.nav', {
        key: 'boardTheme',
        oncreate: helper.ontapY(() => router.set('/settings/themes/board'))
      }, i18n('board')),
      h('li.list_item.nav', {
        key: 'piecesTheme',
        oncreate: helper.ontapY(() => router.set('/settings/themes/piece'))
      }, i18n('pieces')),
      h('li.list_item.nav', {
        key: 'soundNotifications',
        oncreate: helper.ontapY(() => router.set('/settings/soundNotifications'))
      }, i18n('soundAndNotifications'))
    ]),
    window.AppVersion ? h('section.app_version', 'v' + window.AppVersion.version) : null
  ])
}

function renderTitle(ctrl: IRetroCtrl): Mithril.BaseNode {
  const completion = ctrl.completion()
  return h('div.title', [
    h('span', 'Learn from your mistakes'),
    h('span', Math.min(completion[0] + 1, completion[1]) + ' / ' + completion[1]),
    h('div.retro-actions', [
      h('button.window-button', {
        oncreate: helper.ontap(ctrl.toggleWindow)
      }, h('span.fa', {
        className: ctrl.vm.minimized ? 'fa-window-maximize' : 'fa-window-minimize'
      })),
      h('button.window-button', {
        oncreate: helper.ontap(ctrl.close)
      }, h('span.fa.fa-window-close'))
    ])
  ])
}

    return h('div.analyse-evalSummary', ['white', 'black'].map((color: Color) => {
      const p = gameApi.getPlayer(d, color)
      const pName = study ? findTag(study, color) || 'Anonymous' : playerName(p)

      return h('table', [
        h('thead', h('tr', [
          h('th', h('span.color-icon.' + color)),
          h('td', [pName, p ? helper.renderRatingDiff(p) : null])
        ])),
        h('tbody', [
          advices.map(a => {
            const nb = analysis && analysis[color][a[0]]
            return h('tr', [
              h('th', nb),
              h('td', i18n(a[1]))
            ])
          }),
          h('tr', [
            h('th', analysis && analysis[color].acpl),
            h('td', i18n('averageCentipawnLoss'))
          ])
        ])
      ])
    }))