Created
April 5, 2022 21:46
-
-
Save kevin-chau/0587ffff63b873e699565389d8b0b0da to your computer and use it in GitHub Desktop.
Chess board editor for chessboardjs
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| <title>chessboardjs.com » Homepage</title> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <link rel="icon" href="/favicon.ico"> | |
| <link rel="icon" href="/icon.svg" type="image/svg+xml"> | |
| <link rel="apple-touch-icon" href="/apple-touch-icon.png"> | |
| <link rel="manifest" href="/manifest.webmanifest"> | |
| <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600|Roboto+Mono"> | |
| <link rel="stylesheet" href="css/website2.css" /> | |
| <link rel="stylesheet" href="https://unpkg.com/@chrisoakman/chessboardjs@1.0.0/dist/chessboard-1.0.0.min.css" integrity="sha384-q94+BZtLrkL1/ohfjR8c6L+A6qzNH9R2hBLwyoAfu3i/WCvQjzL2RQJ3uNHDISdU" crossorigin="anonymous"> | |
| </head> | |
| <body class="homepage"> | |
| <main> | |
| <section class="homepage-section-88e4a body-width-115f6"> | |
| <div class="col-11bcf"> | |
| <div id="board" style="width: 500px"></div> | |
| <button id="startBtn">Start Position</button> | |
| <button id="clearBtn">Clear Board</button> | |
| <button id="fenBtn">Print FEN to Console</button> | |
| </div> | |
| </section> | |
| </main> | |
| <script src="js/jquery-3.4.1.min.js"></script> | |
| <script src="js/prettify.min.js"></script> | |
| <script src="https://unpkg.com/@chrisoakman/chessboardjs@1.0.0/dist/chessboard-1.0.0.min.js" integrity="sha384-8Vi8VHwn3vjQ9eUHUxex3JSN/NFqUg3QbPyX8kWyb93+8AC/pPWTzj+nHtbC5bxD" crossorigin="anonymous"></script> | |
| <script> | |
| ;(function () { | |
| function isTouchDevice () { | |
| return ('ontouchstart' in document.documentElement) | |
| } | |
| function init () { | |
| prettyPrint() | |
| // Set up the main chess board | |
| var board = Chessboard('board', { | |
| draggable: true, | |
| dropOffBoard: 'trash', | |
| sparePieces: true | |
| }) | |
| // Initialize with an FEN | |
| // board.position('rnbqkbnr/pppppppp/8/2RR1P2/4B3/2K5/PP1PPPPP/RN1Q1BNR') | |
| function clickShowPositionBtn () { | |
| console.log('Current position as an Object:') | |
| console.log(board.position()) | |
| console.log('Current position as a FEN string:') | |
| console.log(board.fen()) | |
| } | |
| $('#startBtn').on('click', board.start) | |
| $('#clearBtn').on('click', board.clear) | |
| $('#fenBtn').on('click', clickShowPositionBtn) | |
| // prevent "browser drag" of the black king | |
| $('.hero-inner-556fe img').on('mousedown', function (evt) { evt.preventDefault() }) | |
| // prevent hover problems on touch devices | |
| if (isTouchDevice()) { | |
| $('.navbar-a57cc').removeClass('hover-effect') | |
| } | |
| } | |
| $(document).ready(init) | |
| })() | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment