Skip to content

Commit

Permalink
Merge pull request #22 from chesslablab/issue/21-Implement-the-RavMov…
Browse files Browse the repository at this point in the history 
…esInline-class

Issue/21 implement the rav moves inline class
  • Loading branch information
@programarivm
programarivm authored Apr 18, 2024
2 parents e1a895d + 01a0db6 commit 196630c
Show file tree
Hide file tree
Showing 9 changed files with 410 additions and 87 deletions.
95 changes: 95 additions & 0 deletions examples/rav-moves-inline.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,95 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Examples</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/assets/chessboard.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script type="module" src="rav_moves_inline.js"></script>
<style>
.active-move {
background-color: rgba(0, 0, 0, 0.1) !important;
}

#ravMovesInline {
height: 465px;
overflow-y: scroll;
}

#ravMovesInline span[data-key] {
display: inline-block;
line-height: 2rem;
}

#ravMovesInline span[data-key] span {
padding: 0.4rem;
}

#ravMovesInline span[data-key] span:hover {
cursor: pointer;
background-color: rgba(0, 0, 0, 0.05) !important;
}
</style>
</head>
<body>
<div class="container p-4">
<h1>JsBlab</h1>
<p class="lead">
An easy-to-use JavaScript module library of chess components and utilities.
</p>
<hr class="hr">
<h5>Inline Recursive Annotation Variation (RAV) Moves</h5>
<div class="row gy-4">
<div class="col-md-6">
<div id="chessboard"></div>
</div>
<div class="col-md-6">
<div id="boardActionsDropdown" class="dropdown">
<button class="btn btn-light dropdown-toggle w-100 rounded-0" type="button" id="gameActionsMenu" data-bs-toggle="dropdown" aria-expanded="false">
Board Actions
</button>
<ul class="dropdown-menu rounded-0" aria-labelledby="gameActionsMenu">
<li>
<a class="dropdown-item" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-repeat" viewBox="0 0 16 16">
<path d="M11.534 7h3.932a.25.25 0 0 1 .192.41l-1.966 2.36a.25.25 0 0 1-.384 0l-1.966-2.36a.25.25 0 0 1 .192-.41m-11 2h3.932a.25.25 0 0 0 .192-.41L2.692 6.23a.25.25 0 0 0-.384 0L.342 8.59A.25.25 0 0 0 .534 9"/>
<path fill-rule="evenodd" d="M8 3c-1.552 0-2.94.707-3.857 1.818a.5.5 0 1 1-.771-.636A6.002 6.002 0 0 1 13.917 7H12.9A5 5 0 0 0 8 3M3.1 9a5.002 5.002 0 0 0 8.757 2.182.5.5 0 1 1 .771.636A6.002 6.002 0 0 1 2.083 9z"/>
</svg> Flip Board
</a>
</li>
<li>
<a class="dropdown-item" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-card-text" viewBox="0 0 16 16">
<path d="M14.5 3a.5.5 0 0 1 .5.5v9a.5.5 0 0 1-.5.5h-13a.5.5 0 0 1-.5-.5v-9a.5.5 0 0 1 .5-.5zm-13-1A1.5 1.5 0 0 0 0 3.5v9A1.5 1.5 0 0 0 1.5 14h13a1.5 1.5 0 0 0 1.5-1.5v-9A1.5 1.5 0 0 0 14.5 2z"/>
<path d="M3 5.5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5M3 8a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9A.5.5 0 0 1 3 8m0 2.5a.5.5 0 0 1 .5-.5h6a.5.5 0 0 1 0 1h-6a.5.5 0 0 1-.5-.5"/>
</svg> Copy Movetext
</a>
</li>
<li>
<a class="dropdown-item" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-input-cursor" viewBox="0 0 16 16">
<path d="M10 5h4a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1h-4v1h4a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2h-4zM6 5V4H2a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h4v-1H2a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1z"/>
<path fill-rule="evenodd" d="M8 1a.5.5 0 0 1 .5.5v13a.5.5 0 0 1-1 0v-13A.5.5 0 0 1 8 1"/>
</svg> Copy FEN
</a>
</li>
</ul>
</div>
<div id="historyButtons" class="btn-group w-100">
<button class="btn btn-light rounded-0" type="button"><i class="bi bi-skip-backward-fill"></i></button>
<button class="btn btn-light" type="button"><i class="bi bi-caret-left-fill"></i></button>
<button class="btn btn-light" type="button"><i class="bi bi-caret-right-fill"></i></button>
<button class="btn btn-light rounded-0" type="button"><i class="bi bi-skip-forward-fill"></i></button>
</div>
<div id="ravMovesInline">
</div>
<table id="openingTable" class="table table-light text-center">
<tbody></tbody>
</table>
</div>
</div>
</div>
</body>
</html>
180 changes: 180 additions & 0 deletions examples/rav_moves_inline.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,180 @@
import { Chessboard } from "https://cdn.jsdelivr.net/npm/[email protected]/src/Chessboard.js";
import { Markers } from "https://cdn.jsdelivr.net/npm/[email protected]/src/extensions/markers/Markers.js";
import { BoardActionsDropdown, HistoryButtons, OpeningTable, RavMovesInline } from '../src/index.js';

// -----------------------------------------------------------------------------
// Initialization
// -----------------------------------------------------------------------------

const props = {
"filtered": "{Adapted notes, originally by J. R. Capablanca.} 1.d4 d5 2.Nf3 e6 3.c4 Nf6 4.Bg5 Be7 5.e3 Nbd7 6.Nc3 O-O 7.Rc1 b6 8.cxd5 exd5 9.Bb5 {is a new move which has no merit outside of its novelty. I played it for the first time against Teichmann in Berlin in 1913.} (9.Bd3 {is the normal move but Qa4 may be the best, after all.}) 9...Bb7 10.Qa4 a6 (10...c5 {is the proper continuation.}) 11.Bxd7 Nxd7 12.Bxe7 Qxe7 13.Qb3 {with the idea of preventing c5, but still better would have been to castle.} Qd6 (13...c5 {could be played as well. Black would come out all right from the many complications arising from this move.}) 14.O-O Rfd8 15.Rfd1 Rab8 16.Ne1 {in order to draw the knight away from the line of the bishop, which would soon be open, as it actually occurred in the game.} Nf6 17.Rc2 c5 18.dxc5 bxc5 19.Ne2 Ne4 (19...Ng4 {begins a failed attack.}) (19...d4 {begins a failed attack.}) 20.Qa3 Rbc8 21.Ng3 Nxg3 22.hxg3 Qb6 23.Rcd2 (23.Rdc1 {would not have been better because of d4, etc.} d4) 23...h6 24.Nf3 d4 25.exd4 Bxf3 26.Qxf3 Rxd4 27.Rc2 Rxd1+ 28.Qxd1 Rd8 29.Qe2 Qd6 30.Kh2 Qd5 31.b3 Qf5 32.g4 Qg5 33.g3 Rd6 {is unquestionably the best move; with any other move Black would, perhaps, have found it impossible to draw.} 34.Kg2 g6 35.Qc4 Re6 36.Qxc5 Qxg4 37.f3 Qg5 38.Qxg5 hxg5 39.Kf2 Rd6 40.Ke3 Re6+ 41.Kd4 Rd6+ (42.Kc5 {is too risky. The way to win was not at all clear and I even thought that with that move Black might win.}) 42.Ke3 Re6+ 43.Kf2 Rd6 44.g4 Rd1 (45.Ke3 {is the right move to make. It is perhaps the only chance White has to win, or at least come near it.} Ra1 46.Kd4 {gains an important move.} Kg7 47.b4 Rf1 {accomplishes nothing with the white king on d4.}) 45.Ke2 {was played instead.} Ra1 46.Kd3 Kg7 47.b4 Rf1 {was the best move with the white king on d3.} 48.Ke3 {and the remainder of the game needs no comments.} Rb1 49.Rc6 Rxb4 50.Rxa6 Rb2",
"breakdown": [
"{Adapted notes, originally by J. R. Capablanca.} 1.d4 d5 2.Nf3 e6 3.c4 Nf6 4.Bg5 Be7 5.e3 Nbd7 6.Nc3 O-O 7.Rc1 b6 8.cxd5 exd5 9.Bb5 {is a new move which has no merit outside of its novelty. I played it for the first time against Teichmann in Berlin in 1913.}",
"9.Bd3 {is the normal move but Qa4 may be the best, after all.}",
"9...Bb7 10.Qa4 a6",
"10...c5 {is the proper continuation.}",
"11.Bxd7 Nxd7 12.Bxe7 Qxe7 13.Qb3 {with the idea of preventing c5, but still better would have been to castle.} Qd6",
"13...c5 {could be played as well. Black would come out all right from the many complications arising from this move.}",
"14.O-O Rfd8 15.Rfd1 Rab8 16.Ne1 {in order to draw the knight away from the line of the bishop, which would soon be open, as it actually occurred in the game.} Nf6 17.Rc2 c5 18.dxc5 bxc5 19.Ne2 Ne4",
"19...Ng4 {begins a failed attack.}",
"19...d4 {begins a failed attack.}",
"20.Qa3 Rbc8 21.Ng3 Nxg3 22.hxg3 Qb6 23.Rcd2",
"23.Rdc1 {would not have been better because of d4, etc.} d4",
"23...h6 24.Nf3 d4 25.exd4 Bxf3 26.Qxf3 Rxd4 27.Rc2 Rxd1+ 28.Qxd1 Rd8 29.Qe2 Qd6 30.Kh2 Qd5 31.b3 Qf5 32.g4 Qg5 33.g3 Rd6 {is unquestionably the best move; with any other move Black would, perhaps, have found it impossible to draw.} 34.Kg2 g6 35.Qc4 Re6 36.Qxc5 Qxg4 37.f3 Qg5 38.Qxg5 hxg5 39.Kf2 Rd6 40.Ke3 Re6+ 41.Kd4 Rd6+",
"42.Kc5 {is too risky. The way to win was not at all clear and I even thought that with that move Black might win.}",
"42.Ke3 Re6+ 43.Kf2 Rd6 44.g4 Rd1",
"45.Ke3 {is the right move to make. It is perhaps the only chance White has to win, or at least come near it.} Ra1 46.Kd4 {gains an important move.} Kg7 47.b4 Rf1 {accomplishes nothing with the white king on d4.}",
"45.Ke2 {was played instead.} Ra1 46.Kd3 Kg7 47.b4 Rf1 {was the best move with the white king on d3.} 48.Ke3 {and the remainder of the game needs no comments.} Rb1 49.Rc6 Rxb4 50.Rxa6 Rb2"
],
"fen": [
"rnbqkbnr\/pppppppp\/8\/8\/8\/8\/PPPPPPPP\/RNBQKBNR w KQkq -",
"rnbqkbnr\/pppppppp\/8\/8\/3P4\/8\/PPP1PPPP\/RNBQKBNR b KQkq d3",
"rnbqkbnr\/ppp1pppp\/8\/3p4\/3P4\/8\/PPP1PPPP\/RNBQKBNR w KQkq d6",
"rnbqkbnr\/ppp1pppp\/8\/3p4\/3P4\/5N2\/PPP1PPPP\/RNBQKB1R b KQkq -",
"rnbqkbnr\/ppp2ppp\/4p3\/3p4\/3P4\/5N2\/PPP1PPPP\/RNBQKB1R w KQkq -",
"rnbqkbnr\/ppp2ppp\/4p3\/3p4\/2PP4\/5N2\/PP2PPPP\/RNBQKB1R b KQkq c3",
"rnbqkb1r\/ppp2ppp\/4pn2\/3p4\/2PP4\/5N2\/PP2PPPP\/RNBQKB1R w KQkq -",
"rnbqkb1r\/ppp2ppp\/4pn2\/3p2B1\/2PP4\/5N2\/PP2PPPP\/RN1QKB1R b KQkq -",
"rnbqk2r\/ppp1bppp\/4pn2\/3p2B1\/2PP4\/5N2\/PP2PPPP\/RN1QKB1R w KQkq -",
"rnbqk2r\/ppp1bppp\/4pn2\/3p2B1\/2PP4\/4PN2\/PP3PPP\/RN1QKB1R b KQkq -",
"r1bqk2r\/pppnbppp\/4pn2\/3p2B1\/2PP4\/4PN2\/PP3PPP\/RN1QKB1R w KQkq -",
"r1bqk2r\/pppnbppp\/4pn2\/3p2B1\/2PP4\/2N1PN2\/PP3PPP\/R2QKB1R b KQkq -",
"r1bq1rk1\/pppnbppp\/4pn2\/3p2B1\/2PP4\/2N1PN2\/PP3PPP\/R2QKB1R w KQ -",
"r1bq1rk1\/pppnbppp\/4pn2\/3p2B1\/2PP4\/2N1PN2\/PP3PPP\/2RQKB1R b K -",
"r1bq1rk1\/p1pnbppp\/1p2pn2\/3p2B1\/2PP4\/2N1PN2\/PP3PPP\/2RQKB1R w K -",
"r1bq1rk1\/p1pnbppp\/1p2pn2\/3P2B1\/3P4\/2N1PN2\/PP3PPP\/2RQKB1R b K -",
"r1bq1rk1\/p1pnbppp\/1p3n2\/3p2B1\/3P4\/2N1PN2\/PP3PPP\/2RQKB1R w K -",
"r1bq1rk1\/p1pnbppp\/1p3n2\/1B1p2B1\/3P4\/2N1PN2\/PP3PPP\/2RQK2R b K -",
"r1bq1rk1\/p1pnbppp\/1p3n2\/3p2B1\/3P4\/2NBPN2\/PP3PPP\/2RQK2R b KQ -",
"r2q1rk1\/pbpnbppp\/1p3n2\/1B1p2B1\/3P4\/2N1PN2\/PP3PPP\/2RQK2R w K -",
"r2q1rk1\/pbpnbppp\/1p3n2\/1B1p2B1\/Q2P4\/2N1PN2\/PP3PPP\/2R1K2R b K -",
"r2q1rk1\/1bpnbppp\/pp3n2\/1B1p2B1\/Q2P4\/2N1PN2\/PP3PPP\/2R1K2R w K -",
"r2q1rk1\/pb1nbppp\/1p3n2\/1Bpp2B1\/Q2P4\/2N1PN2\/PP3PPP\/2R1K2R w K c6",
"r2q1rk1\/1bpBbppp\/pp3n2\/3p2B1\/Q2P4\/2N1PN2\/PP3PPP\/2R1K2R b K -",
"r2q1rk1\/1bpnbppp\/pp6\/3p2B1\/Q2P4\/2N1PN2\/PP3PPP\/2R1K2R w K -",
"r2q1rk1\/1bpnBppp\/pp6\/3p4\/Q2P4\/2N1PN2\/PP3PPP\/2R1K2R b K -",
"r4rk1\/1bpnqppp\/pp6\/3p4\/Q2P4\/2N1PN2\/PP3PPP\/2R1K2R w K -",
"r4rk1\/1bpnqppp\/pp6\/3p4\/3P4\/1QN1PN2\/PP3PPP\/2R1K2R b K -",
"r4rk1\/1bpn1ppp\/pp1q4\/3p4\/3P4\/1QN1PN2\/PP3PPP\/2R1K2R w K -",
"r4rk1\/1b1nqppp\/pp6\/2pp4\/3P4\/1QN1PN2\/PP3PPP\/2R1K2R w K c6",
"r4rk1\/1bpn1ppp\/pp1q4\/3p4\/3P4\/1QN1PN2\/PP3PPP\/2R2RK1 b - -",
"r2r2k1\/1bpn1ppp\/pp1q4\/3p4\/3P4\/1QN1PN2\/PP3PPP\/2R2RK1 w - -",
"r2r2k1\/1bpn1ppp\/pp1q4\/3p4\/3P4\/1QN1PN2\/PP3PPP\/2RR2K1 b - -",
"1r1r2k1\/1bpn1ppp\/pp1q4\/3p4\/3P4\/1QN1PN2\/PP3PPP\/2RR2K1 w - -",
"1r1r2k1\/1bpn1ppp\/pp1q4\/3p4\/3P4\/1QN1P3\/PP3PPP\/2RRN1K1 b - -",
"1r1r2k1\/1bp2ppp\/pp1q1n2\/3p4\/3P4\/1QN1P3\/PP3PPP\/2RRN1K1 w - -",
"1r1r2k1\/1bp2ppp\/pp1q1n2\/3p4\/3P4\/1QN1P3\/PPR2PPP\/3RN1K1 b - -",
"1r1r2k1\/1b3ppp\/pp1q1n2\/2pp4\/3P4\/1QN1P3\/PPR2PPP\/3RN1K1 w - c6",
"1r1r2k1\/1b3ppp\/pp1q1n2\/2Pp4\/8\/1QN1P3\/PPR2PPP\/3RN1K1 b - -",
"1r1r2k1\/1b3ppp\/p2q1n2\/2pp4\/8\/1QN1P3\/PPR2PPP\/3RN1K1 w - -",
"1r1r2k1\/1b3ppp\/p2q1n2\/2pp4\/8\/1Q2P3\/PPR1NPPP\/3RN1K1 b - -",
"1r1r2k1\/1b3ppp\/p2q4\/2pp4\/4n3\/1Q2P3\/PPR1NPPP\/3RN1K1 w - -",
"1r1r2k1\/1b3ppp\/p2q4\/2pp4\/6n1\/1Q2P3\/PPR1NPPP\/3RN1K1 w - -",
"1r1r2k1\/1b3ppp\/p2q1n2\/2p5\/3p4\/1Q2P3\/PPR1NPPP\/3RN1K1 w - -",
"1r1r2k1\/1b3ppp\/p2q4\/2pp4\/4n3\/Q3P3\/PPR1NPPP\/3RN1K1 b - -",
"2rr2k1\/1b3ppp\/p2q4\/2pp4\/4n3\/Q3P3\/PPR1NPPP\/3RN1K1 w - -",
"2rr2k1\/1b3ppp\/p2q4\/2pp4\/4n3\/Q3P1N1\/PPR2PPP\/3RN1K1 b - -",
"2rr2k1\/1b3ppp\/p2q4\/2pp4\/8\/Q3P1n1\/PPR2PPP\/3RN1K1 w - -",
"2rr2k1\/1b3ppp\/p2q4\/2pp4\/8\/Q3P1P1\/PPR2PP1\/3RN1K1 b - -",
"2rr2k1\/1b3ppp\/pq6\/2pp4\/8\/Q3P1P1\/PPR2PP1\/3RN1K1 w - -",
"2rr2k1\/1b3ppp\/pq6\/2pp4\/8\/Q3P1P1\/PP1R1PP1\/3RN1K1 b - -",
"2rr2k1\/1b3ppp\/pq6\/2pp4\/8\/Q3P1P1\/PPR2PP1\/2R1N1K1 b - -",
"2rr2k1\/1b3ppp\/pq6\/2p5\/3p4\/Q3P1P1\/PPR2PP1\/2R1N1K1 w - -",
"2rr2k1\/1b3pp1\/pq5p\/2pp4\/8\/Q3P1P1\/PP1R1PP1\/3RN1K1 w - -",
"2rr2k1\/1b3pp1\/pq5p\/2pp4\/8\/Q3PNP1\/PP1R1PP1\/3R2K1 b - -",
"2rr2k1\/1b3pp1\/pq5p\/2p5\/3p4\/Q3PNP1\/PP1R1PP1\/3R2K1 w - -",
"2rr2k1\/1b3pp1\/pq5p\/2p5\/3P4\/Q4NP1\/PP1R1PP1\/3R2K1 b - -",
"2rr2k1\/5pp1\/pq5p\/2p5\/3P4\/Q4bP1\/PP1R1PP1\/3R2K1 w - -",
"2rr2k1\/5pp1\/pq5p\/2p5\/3P4\/5QP1\/PP1R1PP1\/3R2K1 b - -",
"2r3k1\/5pp1\/pq5p\/2p5\/3r4\/5QP1\/PP1R1PP1\/3R2K1 w - -",
"2r3k1\/5pp1\/pq5p\/2p5\/3r4\/5QP1\/PPR2PP1\/3R2K1 b - -",
"2r3k1\/5pp1\/pq5p\/2p5\/8\/5QP1\/PPR2PP1\/3r2K1 w - -",
"2r3k1\/5pp1\/pq5p\/2p5\/8\/6P1\/PPR2PP1\/3Q2K1 b - -",
"3r2k1\/5pp1\/pq5p\/2p5\/8\/6P1\/PPR2PP1\/3Q2K1 w - -",
"3r2k1\/5pp1\/pq5p\/2p5\/8\/6P1\/PPR1QPP1\/6K1 b - -",
"3r2k1\/5pp1\/p2q3p\/2p5\/8\/6P1\/PPR1QPP1\/6K1 w - -",
"3r2k1\/5pp1\/p2q3p\/2p5\/8\/6P1\/PPR1QPPK\/8 b - -",
"3r2k1\/5pp1\/p6p\/2pq4\/8\/6P1\/PPR1QPPK\/8 w - -",
"3r2k1\/5pp1\/p6p\/2pq4\/8\/1P4P1\/P1R1QPPK\/8 b - -",
"3r2k1\/5pp1\/p6p\/2p2q2\/8\/1P4P1\/P1R1QPPK\/8 w - -",
"3r2k1\/5pp1\/p6p\/2p2q2\/6P1\/1P6\/P1R1QPPK\/8 b - -",
"3r2k1\/5pp1\/p6p\/2p3q1\/6P1\/1P6\/P1R1QPPK\/8 w - -",
"3r2k1\/5pp1\/p6p\/2p3q1\/6P1\/1P4P1\/P1R1QP1K\/8 b - -",
"6k1\/5pp1\/p2r3p\/2p3q1\/6P1\/1P4P1\/P1R1QP1K\/8 w - -",
"6k1\/5pp1\/p2r3p\/2p3q1\/6P1\/1P4P1\/P1R1QPK1\/8 b - -",
"6k1\/5p2\/p2r2pp\/2p3q1\/6P1\/1P4P1\/P1R1QPK1\/8 w - -",
"6k1\/5p2\/p2r2pp\/2p3q1\/2Q3P1\/1P4P1\/P1R2PK1\/8 b - -",
"6k1\/5p2\/p3r1pp\/2p3q1\/2Q3P1\/1P4P1\/P1R2PK1\/8 w - -",
"6k1\/5p2\/p3r1pp\/2Q3q1\/6P1\/1P4P1\/P1R2PK1\/8 b - -",
"6k1\/5p2\/p3r1pp\/2Q5\/6q1\/1P4P1\/P1R2PK1\/8 w - -",
"6k1\/5p2\/p3r1pp\/2Q5\/6q1\/1P3PP1\/P1R3K1\/8 b - -",
"6k1\/5p2\/p3r1pp\/2Q3q1\/8\/1P3PP1\/P1R3K1\/8 w - -",
"6k1\/5p2\/p3r1pp\/6Q1\/8\/1P3PP1\/P1R3K1\/8 b - -",
"6k1\/5p2\/p3r1p1\/6p1\/8\/1P3PP1\/P1R3K1\/8 w - -",
"6k1\/5p2\/p3r1p1\/6p1\/8\/1P3PP1\/P1R2K2\/8 b - -",
"6k1\/5p2\/p2r2p1\/6p1\/8\/1P3PP1\/P1R2K2\/8 w - -",
"6k1\/5p2\/p2r2p1\/6p1\/8\/1P2KPP1\/P1R5\/8 b - -",
"6k1\/5p2\/p3r1p1\/6p1\/8\/1P2KPP1\/P1R5\/8 w - -",
"6k1\/5p2\/p3r1p1\/6p1\/3K4\/1P3PP1\/P1R5\/8 b - -",
"6k1\/5p2\/p2r2p1\/6p1\/3K4\/1P3PP1\/P1R5\/8 w - -",
"6k1\/5p2\/p2r2p1\/2K3p1\/8\/1P3PP1\/P1R5\/8 b - -",
"6k1\/5p2\/p2r2p1\/6p1\/8\/1P2KPP1\/P1R5\/8 b - -",
"6k1\/5p2\/p3r1p1\/6p1\/8\/1P2KPP1\/P1R5\/8 w - -",
"6k1\/5p2\/p3r1p1\/6p1\/8\/1P3PP1\/P1R2K2\/8 b - -",
"6k1\/5p2\/p2r2p1\/6p1\/8\/1P3PP1\/P1R2K2\/8 w - -",
"6k1\/5p2\/p2r2p1\/6p1\/6P1\/1P3P2\/P1R2K2\/8 b - -",
"6k1\/5p2\/p5p1\/6p1\/6P1\/1P3P2\/P1R2K2\/3r4 w - -",
"6k1\/5p2\/p5p1\/6p1\/6P1\/1P2KP2\/P1R5\/3r4 b - -",
"6k1\/5p2\/p5p1\/6p1\/6P1\/1P2KP2\/P1R5\/r7 w - -",
"6k1\/5p2\/p5p1\/6p1\/3K2P1\/1P3P2\/P1R5\/r7 b - -",
"8\/5pk1\/p5p1\/6p1\/3K2P1\/1P3P2\/P1R5\/r7 w - -",
"8\/5pk1\/p5p1\/6p1\/1P1K2P1\/5P2\/P1R5\/r7 b - -",
"8\/5pk1\/p5p1\/6p1\/1P1K2P1\/5P2\/P1R5\/5r2 w - -",
"6k1\/5p2\/p5p1\/6p1\/6P1\/1P3P2\/P1R1K3\/3r4 b - -",
"6k1\/5p2\/p5p1\/6p1\/6P1\/1P3P2\/P1R1K3\/r7 w - -",
"6k1\/5p2\/p5p1\/6p1\/6P1\/1P1K1P2\/P1R5\/r7 b - -",
"8\/5pk1\/p5p1\/6p1\/6P1\/1P1K1P2\/P1R5\/r7 w - -",
"8\/5pk1\/p5p1\/6p1\/1P4P1\/3K1P2\/P1R5\/r7 b - -",
"8\/5pk1\/p5p1\/6p1\/1P4P1\/3K1P2\/P1R5\/5r2 w - -",
"8\/5pk1\/p5p1\/6p1\/1P4P1\/4KP2\/P1R5\/5r2 b - -",
"8\/5pk1\/p5p1\/6p1\/1P4P1\/4KP2\/P1R5\/1r6 w - -",
"8\/5pk1\/p1R3p1\/6p1\/1P4P1\/4KP2\/P7\/1r6 b - -",
"8\/5pk1\/p1R3p1\/6p1\/1r4P1\/4KP2\/P7\/8 w - -",
"8\/5pk1\/R5p1\/6p1\/1r4P1\/4KP2\/P7\/8 b - -",
"8\/5pk1\/R5p1\/6p1\/6P1\/4KP2\/Pr6\/8 w - -"
]
};

const chessboard = new Chessboard(
document.getElementById('chessboard'),
{
assetsUrl: "https://cdn.jsdelivr.net/npm/[email protected]/assets/",
position: props.fen[props.fen.length - 1],
style: {pieces: {file: "pieces/staunty.svg"}},
extensions: [{class: Markers}]
}
);

const ravMovesInline = new RavMovesInline(
document.querySelector('#ravMovesInline'),
{
...props,
chessboard: chessboard
}
);

const historyButtons = new HistoryButtons(
document.querySelector('#historyButtons'),
{
moves: ravMovesInline
}
);

const boardActionsDropdown = new BoardActionsDropdown(
document.querySelector('#boardActionsDropdown ul'),
{
moves: ravMovesInline
}
);

ravMovesInline.mount();
1 change: 1 addition & 0 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ <h5>Examples</h5>
<li><a href="/examples/san-moves-table.html">HTML Table of Standard Algebraic Notation (SAN) Moves</a></li>
<li><a href="/examples/san-moves-inline.html">Inline Standard Algebraic Notation (SAN) Moves</a></li>
<li><a href="/examples/rav-moves-table.html">HTML Table of Recursive Annotation Variation (RAV) Moves</a></li>
<li><a href="/examples/rav-moves-inline.html">Inline Recursive Annotation Variation (RAV) Moves</a></li>
<li><a href="/examples/timer-table.html">Timer</a></li>
<li><a href="/examples/moves-metadata-table.html">Moves Metadata</a></li>
</ul>
Expand Down
21 changes: 21 additions & 0 deletions src/AbstractMoves.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
import AbstractComponent from '../src/AbstractComponent.js';

export default class AbstractMoves extends AbstractComponent {
_className = 'active-move';

_current;

constructor(el, props) {
super(el, props);

this._current = props.fen.length;
}

get current() {
return this._current;
}

set current(current) {
this._current = current;
}
}
49 changes: 49 additions & 0 deletions src/AbstractRavMoves.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
import { Movetext } from '../src/common/Movetext.js';
import AbstractMoves from '../src/AbstractMoves.js';

export class AbstractRavMoves extends AbstractMoves {
_level(rows) {
let haystack = Movetext.haystack(this.props.filtered);
let needles = Movetext.needles(rows, this.props.breakdown);
for (let i = needles.length - 1; i >= 0; i--) {
const position = haystack.lastIndexOf(needles[i]);
rows[i].level = Movetext.openParentheses(haystack.substring(0, position));
haystack = haystack.substring(0, position).slice(0, -1).trim();
}

return rows;
}

_color(rows) {
return this._level(rows).map(row => {
return {
background: Movetext.rgb(255 - (row.level * 10), 255 - (row.level * 10), 255 - (row.level * 10))
}
});
}

_moves() {
let j = 1;
let rows = [];
this.props.breakdown.forEach((breakdown, i) => {
rows = [...rows, ...Movetext.toCommentedRows(breakdown, i)];
});
rows.forEach((row, i) => {
if (row.w !== '...') {
row.wFen = j;
j += 1;
}
if (row.b) {
row.bFen = j;
j += 1;
}
});

return rows;
}

_activeMove(el) {
Array.from(document.querySelectorAll(`.${this._className}`)).forEach(el => el.classList.remove(this._className));
el.classList.add(this._className);
}
}
Loading

0 comments on commit 196630c

Please sign in to comment.