Viewing Program

Program Data

Program thumbnail for "{props.program.title}"

Title	LeaferStudios ChessAI
ID	5459582691753984
Created	2 months ago, 1729541809556
Updated	2 months ago, 1729541963434
Code	<!DOCTYPE html> <!-- LeaferStudios ChessAI Subscribe to me for cool projects! https://www.khanacademy.org/computer-programming/leaferstudios/4934504502870016 All rules are implemented. Checkmate works. Stalemate/draw works but it goes to the checkmate screen. Bot thinks around ~1.5 moves ahead with an estimated ELO of 1200. Bot responds in ~0.1-0.2 seconds with ~30,000 moves analyzed per second but it may depend on the power of your computer. For more quality programs, subscribe: https://www.khanacademy.org/computer-programming/leaferstudios/4934504502870016 Project Released: Monday, October 21, 2024 First released for the Khan Academy Computing community. Any questions, tips, comments, or bug reports? Tell me in the comments section of this program on Khan Academy. All code by LeaferStudios (https://www.khanacademy.org/profile/kaid_553656479258879622339276/projects) --> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <!-- SEO: add this to my subpage too --> <meta name="description" content="LeaferStudios ChessAI is a JavaScript chess bot designed and developed by LeaferStudios@LeaferStudios (https://www.khanacademy.org/profile/kaid_553656479258879622339276/)" /> <meta name="author" content="LeaferStudios" /> <meta name="keywords" content="LeaferStudios ChessAI,Educational,Chess,AI,Bot,Smart,Responsive,HTML,CSS,JS,JavaScript,LeaferStudios,Khan Academy" /> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&family=IBM+Plex+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=Roboto+Serif:ital,wght@0,100..700;1,100..700&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Inclusive+Sans:ital@0;1&family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&family=Noto+Color+Emoji&display=swap" rel="stylesheet"> <title>LeaferStudios ChessAI</title> <style> * { --link-color: rgb(151, 204, 90); --link-border-color: rgb(97, 150, 32); --link-color-hover: rgb(97, 150, 32); --link-border-color-hover: rgb(102, 153, 40); --white-square: rgb(235, 236, 208); --black-square: rgb(119, 149, 86); } html, body { background-color: #333; color: #FFF; font-family: 'IBM Plex Sans', helvetica; margin: 0; height: 100%; width: 100%; } .board { width: 85vh; float: left; } .info { height: 85vh; max-height: 85vh; font-family: 'IBM Plex Sans', helvetica, arial, sans-serif; position: fixed; right: 0; top: 0; width: 15vh; max-width: 15vh; text-align: right; font-size: 14px; } .history { display: block; position: absolute; bottom: 0; border-radius: 0px; border-top: 2px solid var(--black-square); height: 15vh; width: 100%; padding-left: 5px; font-family: 'Roboto Serif', helvetica; overflow-y: scroll; } .clearfix-7da63 { clear: both; } .board-b72b1 { border: 2px solid #404040; -moz-box-sizing: content-box; box-sizing: content-box; } .square-55d63 { float: left; position: relative; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; box-shadow: inset 0px 0px 23px 20px transparent; } .white-1e1d7 { background: var(--white-square); color: var(--black-square); font-weight: 500; } .black-3c85d { background: var(--black-square); color: var(--white-square); font-weight: 500; } .highlight1-32417, .highlight2-9c5d2 { transition: all 0.15s; -webkit-box-shadow: inset 0 0 0px 3px rgb(212, 212, 212); -moz-box-shadow: inset 0 0 0px 3px rgb(212, 212, 212); box-shadow: inset 0 0 0px 3px rgb(212, 212, 212); } .notation-322f9 { cursor: default; font-family: Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; position: absolute; } .alpha-d2270 { bottom: 1px; right: 3px; } .numeric-fc462 { top: 2px; left: 2px; } .play-btn { border-radius: 19px; padding: 0 90px; height: 90px; border: none; background-color: var(--black-square); color: var(--white-square); cursor: pointer; font-size: 22px; font-family: 'Roboto Serif'; letter-spacing: 2px; text-transform: uppercase; transition: all 0.17s ease-in-out, background-color 0.3s; } .play-btn:hover { background-color: var(--white-square); color: var(--black-square); border-radius: 4px; transform: scale(1.2); } .play-btn:active { transform: scale(1); background-color: var(--black-square); color: var(--white-square); } h1, h2, h3, h4, h5, h6 { line-height: 1.2; font-weight: 500; color: var(--text); } h1 { font-size: calc(1.375rem + 1.5vw); color: var(--text); } /* no select / .no-select { -webkit-user-select: none; / Safari / -khtml-user-select: none; / KHTML / -moz-user-select: none; / Older Firefox / -ms-user-select: none; / IE / user-select: none; / Chrome, Edge, Opera and Firefox / } / container / .container { margin: 0 auto; padding: 1rem; width: 100%; } .no-space { margin: 0 !important; padding: 0 !important; } hr { background: gainsboro; height: 1px; border: none; } .text-left { text-align: left; } .text-center { text-align: center; } .text-right { text-align: right; } p { font-size: 1em; line-height: 24px; color: var(--text); } a { color: var(--link-color); text-decoration: none; border: 1px solid transparent; } a:hover { color: var(--link-color-hover); text-decoration: none; border-bottom: 1px solid var(--link-border-color); } a:focus { border: 1px dashed var(--link-border-color); } .full-height { height: 100%; } .no-margin { margin: 0; } .no-padding { padding: 0; } #title { font-size: 2.9em; font-family: 'Roboto Serif'; border-bottom: 2px solid var(--black-square); } </style> <!-- Keyframe animations --> <style> @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } </style> <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Longfields/LeaferStudiosCSS/css/grid.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Longfields/LeaferStudiosCSS/css/spacing.css"> <style> / Responsive Grid System / .row{display:flex;flex-wrap:wrap;margin:0 -.75rem}.col{flex:1 1 0;padding:0 .75rem}@media (min-width:576px){.col-sm-1{flex:0 0 8.33333333%}.col-sm-2{flex:0 0 16.66666667%}.col-sm-3{flex:0 0 25%}.col-sm-4{flex:0 0 33.33333333%}.col-sm-5{flex:0 0 41.66666667%}.col-sm-6{flex:0 0 50%}.col-sm-7{flex:0 0 58.33333333%}.col-sm-8{flex:0 0 66.66666667%}.col-sm-9{flex:0 0 75%}.col-sm-10{flex:0 0 83.33333333%}.col-sm-11{flex:0 0 91.66666667%}.col-sm-12{flex:0 0 100%}}@media (min-width:768px){.col-md-1{flex:0 0 8.33333333%}.col-md-2{flex:0 0 16.66666667%}.col-md-3{flex:0 0 25%}.col-md-4{flex:0 0 33.33333333%}.col-md-5{flex:0 0 41.66666667%}.col-md-6{flex:0 0 50%}.col-md-7{flex:0 0 58.33333333%}.col-md-8{flex:0 0 66.66666667%}.col-md-9{flex:0 0 75%}.col-md-10{flex:0 0 83.33333333%}.col-md-11{flex:0 0 91.66666667%}.col-md-12{flex:0 0 100%}}@media (min-width:992px){.col-lg-1{flex:0 0 8.33333333%}.col-lg-2{flex:0 0 16.66666667%}.col-lg-3{flex:0 0 25%}.col-lg-4{flex:0 0 33.33333333%}.col-lg-5{flex:0 0 41.66666667%}.col-lg-6{flex:0 0 50%}.col-lg-7{flex:0 0 58.33333333%}.col-lg-8{flex:0 0 66.66666667%}.col-lg-9{flex:0 0 75%}.col-lg-10{flex:0 0 83.33333333%}.col-lg-11{flex:0 0 91.66666667%}.col-lg-12{flex:0 0 100%}}@media (min-width:1200px){.col-xl-1{flex:0 0 8.33333333%}.col-xl-2{flex:0 0 16.66666667%}.col-xl-3{flex:0 0 25%}.col-xl-4{flex:0 0 33.33333333%}.col-xl-5{flex:0 0 41.66666667%}.col-xl-6{flex:0 0 50%}.col-xl-7{flex:0 0 58.33333333%}.col-xl-8{flex:0 0 66.66666667%}.col-xl-9{flex:0 0 75%}.col-xl-10{flex:0 0 83.33333333%}.col-xl-11{flex:0 0 91.66666667%}.col-xl-12{flex:0 0 100%}} </style> <style> / Margin & Padding Utilities / / Padding Top / .p-t-0{padding-top:0}.p-t-1{padding-top:.25rem}.p-t-2{padding-top:.5rem}.p-t-3{padding-top:1rem}.p-t-4{padding-top:1.5rem}.p-t-5{padding-top:3rem}.p-b-0{padding-bottom:0}.p-b-1{padding-bottom:.25rem}.p-b-2{padding-bottom:.5rem}.p-b-3{padding-bottom:1rem}.p-b-4{padding-bottom:1.5rem}.p-b-5{padding-bottom:3rem}.p-l-0{padding-left:0}.p-l-1{padding-left:.25rem}.p-l-2{padding-left:.5rem}.p-l-3{padding-left:1rem}.p-l-4{padding-left:1.5rem}.p-l-5{padding-left:3rem}.p-r-0{padding-right:0}.p-r-1{padding-right:.25rem}.p-r-2{padding-right:.5rem}.p-r-3{padding-right:1rem}.p-r-4{padding-right:1.5rem}.p-r-5{padding-right:3rem}[class=m-1]{margin:.25rem}[class=m-2]{margin:.5rem}[class=m-3]{margin:1rem}[class=m-4]{margin:1.5rem}[class=m-5]{margin:3rem}.m-t-0{margin-top:0}.m-t-1{margin-top:.25rem}.m-t-2{margin-top:.5rem}.m-t-3{margin-top:1rem}.m-t-4{margin-top:1.5rem}.m-t-5{margin-top:3rem}.m-b-0{margin-bottom:0}.m-b-1{margin-bottom:.25rem}.m-b-2{margin-bottom:.5rem}.m-b-3{margin-bottom:1rem}.m-b-4{margin-bottom:1.5rem}.m-b-5{margin-bottom:3rem}.m-l-0{margin-left:0}.m-l-1{margin-left:.25rem}.m-l-2{margin-left:.5rem}.m-l-3{margin-left:1rem}.m-l-4{margin-left:1.5rem}.m-l-5{margin-left:3rem}.m-r-0{margin-right:0}.m-r-1{margin-right:.25rem}.m-r-2{margin-right:.5rem}.m-r-3{margin-right:1rem}.m-r-4{margin-right:1.5rem}.m-r-5{margin-right:3rem}[class=p-1]{padding:.25rem}[class=p-2]{padding:.5rem}[class=p-3]{padding:1rem}[class=p-4]{padding:1.5rem}[class=p-5]{padding:3rem} </style> </head> <body> <div class='scene text-center full-height' style='box-shadow:inset -100vw -100vh 0px rgb(0, 20, 15, 0.8);background-image:url("https://upload.wikimedia.org/wikipedia/commons/6/64/Dall-e_3_%28jan_%2724%29_artificial_intelligence_icon.png");background-size:100%;background-position:bottom;'> <h1 id='title' class='no-margin p-t-5 p-l-2 p-r-2 p-b-5'> LeaferStudios ChessAI </h1> <h2>Version 1 • <a href='javascript:alert("All rules are implemented. Checkmate works. Stalemate/draw works but it goes to the checkmate screen. Bot thinks around ~1.5 moves ahead with an estimated ELO of 1200. Bot responds in ~0.1-0.2 seconds with ~30,000 moves analyzed per second but it may depend on the power of your computer.");'>Program Info</a></h2> <button class='play-btn' onclick='scene(1);'>Play</button> <br /> <a href='https://www.khanacademy.org/computer-programming/leaferstudios/4934504502870016' target='_blank'><button class='play-btn m-t-5' style='letter-spacing: 8.5px'>Sub</button></a> <div style='position:absolute;bottom:0;left:50%;transform:translateX(-50%);border-top: 2px solid var(--black-square);width: 100%;padding-top:10px;padding-bottom:10px;display:flex;justify-content:space-between;'> <p style='margin-left: 15px;'>Released 21 October 2024</p> <p style='margin-right: 15px;'>© 2024 <a href='https://www.khanacademy.org/profile/kaid_553656479258879622339276/projects' target='_blank'>LeaferStudios </a> </p> </div> </div> <div class='scene'> <div id="board" class="board"></div> <br> <div class="info"> <div style='padding: 0 8px;'> <span>Search Depth: <span id="search-depth">0</span> (~<span id='estimated-elo'>0</span> ELO)</span><br> <br><br> <span><span id="position-count">0</span> Positions Analyzed</span><br><span> in <span id="time">0</span>s</span> <br><br><span><span id="positions-per-s">0</span> Positions per second</span> </div> </div> <div id="history" class="history"> </div> </div> <div class='dynamic-overlay text-center full-height' style='background-color:rgba(0,0,0,0.65);position:fixed;top:0;left:0;right:0;bottom:0;'> <h1 id='title' class='no-margin p-t-5 p-l-2 p-r-2 p-b-5'> Checkmate! </h1> <h2>Feedback is appreciated.</h2> <button class='play-btn' onclick='restartGame();scene(1);'>Replay</button> <br /> <a href='https://www.khanacademy.org/computer-programming/leaferstudios/4934504502870016' target='_blank'><button class='play-btn m-t-5' style='letter-spacing: 18.2px'>Sub</button></a> <div style='position:absolute;bottom:0;left:50%;transform:translateX(-50%);border-top: 2px solid var(--black-square);width: 100%;padding-top:10px;padding-bottom:10px;display:flex;justify-content:space-between;'> <p style='margin-left: 15px;'>Released 21 October 2024</p> <p style='margin-right: 15px;'>© 2024 <a href='https://www.khanacademy.org/profile/kaid_553656479258879622339276/projects' target='_blank'>LeaferStudios </a> </p> </div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/gh/lhartikk/simple-chess-ai@master/lib/js/chess.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/chessboard-js/1.0.0/chessboard-1.0.0.min.js"></script> <!-- Main JS --> <script type='application/javascript'> / remove if using JQUERY function $(selector) { if (selector.startsWith('#')) { return document.getElementById(selector.substring(1)); } else { return document.querySelectorAll(selector); } }/ function scene(index) { //LeaferStudios ChessAI layout version 1 specific if(index===2){ setTimeout(function() { $('.scene')[0].style.display = 'none'; $('.scene')[1].style.display = 'block'; $('.dynamic-overlay')[0].style.display = 'block'; $('.dynamic-overlay')[0].style.animation = '2.5s fadeIn forwards'; }, 600); }else{ $('.dynamic-overlay')[0].style.display = 'none'; for (var i = 0; i < $('.scene').length; i++) { $('.scene')[i].style.display = 'none'; // visibility = hidden/visible does not work with fadeIn if (index !== 0&&index!==1) { $('.scene')[i].style.animation = '1s fadeIn forwards'; } } for (var i = 0; i < $('.navlink').length; i++) { $('.navlink')[i].className = 'navlink'; } $('.scene')[index].style.display = 'block'; $('.navlink')[index].className = 'navlink active'; } // peculiar window.scroll({ top: 0, left: 0, behavior: 'smooth' }); } scene(0); </script> <script src="https://cdn.jsdelivr.net/gh/Longfields/LeaferStudios-ChessAI/main.min.js"></script> <script type="application/javascript"> sD = 3; //<script> </script> <script src="https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js"></script> <script type> // credit to Bluebird@birdwatcher03 for this thumbnail script (only needed on Khan Academy, makes the thumbnail resolution better) var r = 600; var s = document.documentElement.clientWidth; window.parent.html2canvas = (e) => { try { html2canvas(document.body, { width: s, height: s, useCORS: true, }) .then((e) => { var c = document.createElement("canvas"); c.width = r; c.height = r; c.getContext("2d").drawImage( e, 0, 0, e.width, e.height, 0, 0, r, r ); window.top.postMessage(c.toDataURL(), ""); }) .catch((e) => { alert("Thumbnail Script Error: " + e); }); } catch { window.top.postMessage( document.createElement("canvas").toDataURL(), "*" ); } }; </script> </body> </html>
Folds	21,452
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgNu34q7ZCQw
Votes	60
Spin-Offs	6
Type	WEBPAGE
Width	400
Height	600
User Flagged	false
Origin Scratchpad	null
Hidden From Hotlist	false
Restricted Posting	false
By Child	false
Author Nick	LeaferStudios
Author Name	LeaferStudios
Author ID	kaid_553656479258879622339276
Author Profile Access	PUBLIC

Archive Data

Added	2 months ago, 1729644204645
Updated	2 months ago, 1729725641009
Source Deleted	unknown