Isepic Chess UI is the user interface for isepic-chess.js. It uses jQuery for DOM manipulation and animations.
- Add the necessary files (the order of the .js files is important):
<link rel="stylesheet" href="./css/isepic-chess-ui.css" />
<script src="./js/jquery-3.3.1.min.js"></script>
<script src="./js/isepic-chess.js"></script>
<script src="./js/isepic-chess-ui.js"></script>- Wrap your code inside
$(function(){...});to wait for the DOM to be ready.
<script>
$(function () {
//you can overwrite configuration options
IcUi.setCfg('soundEffects', false);
IcUi.setCfg('scrollNavigation', false);
IcUi.setCfg('animationTime', 150);
//initialize a board
var board = Ic.initBoard({
boardName: 'main',
});
});
</script>Note: documentation for Ic.initBoard() can be found here.
-
Add some components (don't add them more than once) inside
<body>. -
Open the .html file.
https://ajax333221.github.io/isepic-chess-ui/
- Responsive board size
- Both drag-and-drop and click-from-click-to in parallel
- Highlight last move, legal moves and checks
- Components:
- Chess board
- Board tabs (with switch-to-board links)
- Material difference (small piece icons)
- Navigation buttons (first, previous, next and last)
- Rotate board button
- Promotion dropdown
- SAN move list (with jump-to-move links)
- Selectable FEN text
- Push alerts top
- Push alerts bottom
- Debug toggler
- Debug
- Automatic component binding, no need to do anything manually to the DOM elements (they will simply work just by having their correct id property at any given time)
- Piece displacement animation
- Chess fonts:
- Merida
- isepic-chess-font (by ajax333221)
- Merida
- Chess themes: "wood" (default), "olive", "magenta" and "aqua"
- Sound effects
- Move navigation via scrolling and arrow keys
- Puzzle mode (:construction: work in progress :construction:)
- Push alerts (:construction: work in progress :construction:)
- The idea is to have dimissible boxes with game events, board events, ui events, debug errors, etc.
Note: make sure to also read the isepic-chess.js Documentation.
Copyright © 2023 Ajax Isepic (ajax333221)
Licensed under MIT License: http://opensource.org/licenses/mit-license.php