Ui Components:

• #ic_ui_board
• #ic_ui_board_tabs
• #ic_ui_material_diff
• Controls:
  • #ic_ui_nav_first
  • #ic_ui_nav_previous
  • #ic_ui_nav_next
  • #ic_ui_nav_last
  • #ic_ui_rotate
  • #ic_ui_promote
  • #ic_ui_move_list
  • #ic_ui_fen
• Information:
  • #ic_ui_push_alerts_top
  • #ic_ui_push_alerts_bottom
  • #ic_ui_debug_toggler
  • #ic_ui_debug

<div style="height:400px; width:400px;"><!-- The parent must have defined height and width -->
  <div class="ic_ui_board">
    <div id="ic_ui_board"></div>
  </div>
</div>

Like all the other components, the board component is optional.

The board is responsive and will expand 100% to the parent element. One of the parents must have defined height and width (and it should be the same value for both, a square of NxN).

The wrapper parent class .ic_ui_board is optional. However, there would be usability issues without it (unless you style the classes yourself).

<div class="ic_ui_board_tabs">
  <div id="ic_ui_board_tabs"></div>
</div>

Clicking a board link will trigger a board.refreshUi(0, false);.

The wrapper parent class .ic_ui_board_tabs is optional.

<div class="ic_ui_material_diff">
  <div id="ic_ui_material_diff"></div>
</div>

The wrapper parent class .ic_ui_material_diff is optional.

Adding the CSS display: inline-block; to the component (or to the parent wrapper) will make the horizontal line only expand as the component expands.

<div class="ic_ui_controls">
  <input id="ic_ui_nav_first" value="|<" type="button">
</div>

This component triggers a board.navFirst();.

It can be a <a>...</a> styled as a button. When this is the case, a return false; will automatically happen to prevent unwanted scrolling to the top.

Will get automatically disabled/enabled depending on the current move and the move list length.

You can group together multiple components under a single wrapper parent class .ic_ui_controls.

The wrapper parent class .ic_ui_controls is optional.

<div class="ic_ui_controls">
  <input id="ic_ui_nav_previous" value="<" type="button">
</div>

This component triggers a board.navPrevious();.

It can be a <a>...</a> styled as a button. When this is the case, a return false; will automatically happen to prevent unwanted scrolling to the top.

Will get automatically disabled/enabled depending on the current move and the move list length.

You can group together multiple components under a single wrapper parent class .ic_ui_controls.

The wrapper parent class .ic_ui_controls is optional.

<div class="ic_ui_controls">
  <input id="ic_ui_nav_next" value=">" type="button">
</div>

This component triggers a board.navNext();.

It can be a <a>...</a> styled as a button. When this is the case, a return false; will automatically happen to prevent unwanted scrolling to the top.

Will get automatically disabled/enabled depending on the current move and the move list length.

You can group together multiple components under a single wrapper parent class .ic_ui_controls.

The wrapper parent class .ic_ui_controls is optional.

<div class="ic_ui_controls">
  <input id="ic_ui_nav_last" value=">|" type="button">
</div>

This component triggers a board.navLast();.

It can be a <a>...</a> styled as a button. When this is the case, a return false; will automatically happen to prevent unwanted scrolling to the top.

Will get automatically disabled/enabled depending on the current move and the move list length.

You can group together multiple components under a single wrapper parent class .ic_ui_controls.

The wrapper parent class .ic_ui_controls is optional.

<div class="ic_ui_controls">
  <input id="ic_ui_rotate" value="rotate" type="button">
</div>

This component triggers a board.toggleIsRotated();.

It can be a <a>...</a> styled as a button. When this is the case, a return false; will automatically happen to prevent unwanted scrolling to the top.

You can disable the component by adding the class .ic_disabled. However, if you do this make sure it is wrapped inside a parent class .ic_ui_controls or there would be usability issues (unless you style the disabled class yourself).

You can group together multiple components under a single wrapper parent class .ic_ui_controls.

The wrapper parent class .ic_ui_controls is optional.

<div class="ic_ui_controls">
  <select id="ic_ui_promote">
    <option value="5" selected="selected">queen</option>
    <option value="4">rook</option>
    <option value="3">bishop</option>
    <option value="2">knight</option>
  </select>
</div>

This component triggers a board.setPromoteTo($(this).val());.

You can group together multiple components under a single wrapper parent class .ic_ui_controls.

The wrapper parent class .ic_ui_controls is optional.

<div class="ic_ui_controls">
  <div class="ic_ui_move_list">
    <div id="ic_ui_move_list"></div>
    <div id="ic_ui_move_tooltip"></div>
  </div>
</div>

Clicking a move link will trigger a board.navLinkMove($(this).attr("data-index"));.

Hovering a move link will display a chessboard tooltip of the move when enabled and if the component <div id="ic_ui_move_tooltip"></div> exists.

The configuration that can affect the move tooltip board:

• CFG.moveTooltip
• CFG.moveTooltipSize
• CFG.chessFont
• CFG.chessTheme
• CFG.highlightChecks
• CFG.highlightLastMove
• board.isRotated

You can group together multiple components under a single wrapper parent class .ic_ui_controls.

The wrapper parent class .ic_ui_controls is optional.

The wrapper parent class .ic_ui_move_list is optional. However, there would be usability issues without it (unless you style the classes yourself).

<div class="ic_ui_controls">
  <input id="ic_ui_fen" value="" type="text">
</div>

Clicking this component will autoselect the FEN $(this).select();.

You can group together multiple components under a single wrapper parent class .ic_ui_controls.

The wrapper parent class .ic_ui_controls is optional.

<div class="ic_ui_debug">
  <a id="ic_ui_debug_toggler" href="#">Debug ▼</a>
</div>

This component triggers a $("#ic_ui_debug").toggle();.

Upon clicking, its arrow direction is updated to reflect the current visibility state of #ic_ui_debug.

A return false; will automatically happen to prevent unwanted scrolling to the top.

In the case that you change the initial visibility of #ic_ui_debug to not visible, you should also change the initial arrow to point upwards Debug ▲ instead of downwards.

You can group together multiple components under a single wrapper parent class .ic_ui_debug.

The wrapper parent class .ic_ui_debug is optional.

<div class="ic_ui_push_alerts">
  <div class="ic_ui_push_alerts_top"></div>
</div>

This component lets you show a range of autogenerated alerts at the top of the UI.

You can group together multiple components under a single wrapper parent class .ic_ui_push_alerts.

Important: you must include the wrapper parent class .ic_ui_push_alerts in order for this component to work.

<div class="ic_ui_push_alerts">
  <div class="ic_ui_push_alerts_bottom"></div>
</div>

This component lets you show a range of autogenerated alerts at the bottom of the UI.

You can group together multiple components under a single wrapper parent class .ic_ui_push_alerts.

Important: you must include the wrapper parent class .ic_ui_push_alerts in order for this component to work.

<div class="ic_ui_debug">
  <div id="ic_ui_debug"></div>
</div>

You can group together multiple components under a single wrapper parent class .ic_ui_debug.

The wrapper parent class .ic_ui_debug is optional.