JChessBoard/engine.html at master · ghua/JChessBoard · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        canvas {
            border: 1px solid #000000;
            cursor: default;
        }

        input {
            width: 515px;
        }

        .left {
            float: left;
            width: 515px;
        }

        .right {
            margin-left: 515px;
        }

    </style>


    <script src="//code.jquery.com/jquery-2.1.4.js"></script>
    <script src="jcanvas.js"></script>
    <script src="jchessboard.js"></script>
    <script src="jchessengine.js"></script>

</head>
<body>
<div class="left">
    <canvas width="512" height="512">
    </canvas>
    <button id="think_n_move">Press the button to play</button>
</div>
<div class="right">
    <div id="fen"></div>
</div>
<script>

    var problems = [
        // two steps
        'k7/1R6/nK6/8/8/8/8/8 w -',
        '7k/7b/5Kp1/8/8/8/8/5Q2 w -',

        // three steps
        'k2N4/7R/8/4K3/8/8/8/8 w -'
//        '5B1R/8/7N/8/8/2b5/p1K5/k7 w -' // broken
    ];

    var canvas = $('canvas').jschessboard({numbers: true, numbersType: 'number'});
    var board = canvas.board;
    var eventDispatcher = board.eventDispatcher;

    eventDispatcher.addEventListener('board_checkmate_detected', function (event) {
        alert('Checkmate');
    });

    eventDispatcher.addEventListener('board_pawn_promotion', function (event) {
        board.onPawnPromotion(event.subject, 'q');
    });

    var problem = parseInt(localStorage.getItem('problem'));
    if (problem < problems.length - 1) {
        problem += 1;
    } else {
        problem = 0;
    }
    localStorage.setItem('problem', problem);

    var redButton = $('#think_n_move');
    var originalText = redButton.html();

    board.fenToPosition(problems[problem]);
    board.eventDispatcher.addEventListener('board_piece_move', function () {
        setTimeout(function () {
            if (board.nextStepSide === 'b') {
                redButton.html('Your turn, move the black piece');
            } else {
                redButton.html(originalText).prop('disabled', false);
            }
        }, 100);
    });

    var engine = new JChessEngine(board, 'w', 3);

    redButton.click(function () {
        $(this).html('Wait! I\'m thinking...').prop('disabled', true);

        setTimeout(function () {
            var choice = engine.think();
            board.move.apply(board, choice);
        }, 100);
    });

</script>

</body>
</html>