add local stepping through move history & flexbox layout
This commit is contained in:
parent
bde8eee5ad
commit
06fcc887fc
|
|
@ -1,4 +1,36 @@
|
|||
body {
|
||||
font-family: 'Roboto', sans-serif;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-family: 'Vollkorn', serif;
|
||||
}
|
||||
|
||||
button:disabled .silhouette {
|
||||
fill: #c0c0c0;
|
||||
}
|
||||
|
||||
.screen-reader {
|
||||
height: 1px;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
}
|
||||
|
||||
#content {
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
}
|
||||
|
||||
/*@media only screen and (max-width: 8in) {*/
|
||||
@media only screen and (max-aspect-ratio: 4/3) {
|
||||
#content {
|
||||
flex-flow: column nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
#cb_outer2 {
|
||||
width: 100%;
|
||||
max-width: 66.7vh;
|
||||
}
|
||||
|
||||
|
|
@ -37,10 +69,18 @@
|
|||
width: 8em;
|
||||
}
|
||||
|
||||
#cb_controls, #cb_names, #cb_game {
|
||||
#cb_control_container {
|
||||
margin-left: 1em;
|
||||
}
|
||||
|
||||
#cb_controls, #cb_names, #cb_game, #cb_navigate {
|
||||
margin-top: 0.5em;
|
||||
}
|
||||
|
||||
#cb_history {
|
||||
max-width: 7.5in;
|
||||
}
|
||||
|
||||
#cb_reset, #cb_pass {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -92,6 +132,10 @@
|
|||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.cb-archive .cb-horiz-label, .cb-archive .cb-vert-label, .cb-archive .cb-corner {
|
||||
background-color: #ffeeee;
|
||||
}
|
||||
|
||||
.cb-lt-bg {
|
||||
background-color: #FFFFF0;
|
||||
}
|
||||
|
|
@ -133,10 +177,6 @@
|
|||
height: 65%;
|
||||
}
|
||||
|
||||
#cb_phantom > .cb-dk-piece {
|
||||
left: 22.5%;
|
||||
}
|
||||
|
||||
.cb-lt-piece {
|
||||
position: absolute;
|
||||
top: 17.5%;
|
||||
|
|
@ -145,7 +185,13 @@
|
|||
height: 65%;
|
||||
}
|
||||
|
||||
#cb_phantom > .cb-dk-piece {
|
||||
top: 22.5%;
|
||||
left: 22.5%;
|
||||
}
|
||||
|
||||
#cb_phantom > .cb-lt-piece {
|
||||
top: 22.5%;
|
||||
left: 22.5%;
|
||||
}
|
||||
|
||||
|
|
|
|||
345
index.html
345
index.html
|
|
@ -4,164 +4,211 @@
|
|||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="stylesheet" type="text/css" href="css/chess.css">
|
||||
<link rel="stylesheet" type="text/css" href="jquery-ui/dist/jquery-ui.css">
|
||||
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto|Vollkorn:700&display=swap">
|
||||
<title>Paco Ŝako</title>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Paco Ŝako</h1>
|
||||
|
||||
<div id="cb_outer2">
|
||||
<div id="cb_outer">
|
||||
<div id="cb_container">
|
||||
<div id="cb_inner">
|
||||
<table id="cb_board" class="noselect">
|
||||
<tr>
|
||||
<td></td>
|
||||
<td class="cb-horiz-label"><div>A</div></td>
|
||||
<td class="cb-horiz-label"><div>B</div></td>
|
||||
<td class="cb-horiz-label"><div>C</div></td>
|
||||
<td class="cb-horiz-label"><div>D</div></td>
|
||||
<td class="cb-horiz-label"><div>E</div></td>
|
||||
<td class="cb-horiz-label"><div>F</div></td>
|
||||
<td class="cb-horiz-label"><div>G</div></td>
|
||||
<td class="cb-horiz-label"><div>H</div></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr id="cb_row8">
|
||||
<td class="cb-vert-label"><div>8</div></td>
|
||||
<td id="cb_a8" class="cb-square cb-lt-bg"></td>
|
||||
<td id="cb_b8" class="cb-square cb-dk-bg"></td>
|
||||
<td id="cb_c8" class="cb-square cb-lt-bg"></td>
|
||||
<td id="cb_d8" class="cb-square cb-dk-bg"></td>
|
||||
<td id="cb_e8" class="cb-square cb-lt-bg"></td>
|
||||
<td id="cb_f8" class="cb-square cb-dk-bg"></td>
|
||||
<td id="cb_g8" class="cb-square cb-lt-bg"></td>
|
||||
<td id="cb_h8" class="cb-square cb-dk-bg"></td>
|
||||
<td class="cb-vert-label"><div>8</div></td>
|
||||
</tr>
|
||||
<tr id="cb_row7">
|
||||
<td class="cb-vert-label"><div>7</div></td>
|
||||
<td id="cb_a7" class="cb-square cb-dk-bg"></td>
|
||||
<td id="cb_b7" class="cb-square cb-lt-bg"></td>
|
||||
<td id="cb_c7" class="cb-square cb-dk-bg"></td>
|
||||
<td id="cb_d7" class="cb-square cb-lt-bg"></td>
|
||||
<td id="cb_e7" class="cb-square cb-dk-bg"></td>
|
||||
<td id="cb_f7" class="cb-square cb-lt-bg"></td>
|
||||
<td id="cb_g7" class="cb-square cb-dk-bg"></td>
|
||||
<td id="cb_h7" class="cb-square cb-lt-bg"></td>
|
||||
<td class="cb-vert-label"><div>7</div></td>
|
||||
</tr>
|
||||
<tr id="cb_row6">
|
||||
<td class="cb-vert-label"><div>6</div></td>
|
||||
<td id="cb_a6" class="cb-square cb-lt-bg"></td>
|
||||
<td id="cb_b6" class="cb-square cb-dk-bg"></td>
|
||||
<td id="cb_c6" class="cb-square cb-lt-bg"></td>
|
||||
<td id="cb_d6" class="cb-square cb-dk-bg"></td>
|
||||
<td id="cb_e6" class="cb-square cb-lt-bg"></td>
|
||||
<td id="cb_f6" class="cb-square cb-dk-bg"></td>
|
||||
<td id="cb_g6" class="cb-square cb-lt-bg"></td>
|
||||
<td id="cb_h6" class="cb-square cb-dk-bg"></td>
|
||||
<td class="cb-vert-label"><div>6</div></td>
|
||||
</tr>
|
||||
<tr id="cb_row5">
|
||||
<td class="cb-vert-label"><div>5</div></td>
|
||||
<td id="cb_a5" class="cb-square cb-dk-bg"></td>
|
||||
<td id="cb_b5" class="cb-square cb-lt-bg"></td>
|
||||
<td id="cb_c5" class="cb-square cb-dk-bg"></td>
|
||||
<td id="cb_d5" class="cb-square cb-lt-bg"></td>
|
||||
<td id="cb_e5" class="cb-square cb-dk-bg"></td>
|
||||
<td id="cb_f5" class="cb-square cb-lt-bg"></td>
|
||||
<td id="cb_g5" class="cb-square cb-dk-bg"></td>
|
||||
<td id="cb_h5" class="cb-square cb-lt-bg"></td>
|
||||
<td class="cb-vert-label"><div>5</div></td>
|
||||
</tr>
|
||||
<tr id="cb_row4">
|
||||
<td class="cb-vert-label"><div>4</div></td>
|
||||
<td id="cb_a4" class="cb-square cb-lt-bg"></td>
|
||||
<td id="cb_b4" class="cb-square cb-dk-bg"></td>
|
||||
<td id="cb_c4" class="cb-square cb-lt-bg"></td>
|
||||
<td id="cb_d4" class="cb-square cb-dk-bg"></td>
|
||||
<td id="cb_e4" class="cb-square cb-lt-bg"></td>
|
||||
<td id="cb_f4" class="cb-square cb-dk-bg"></td>
|
||||
<td id="cb_g4" class="cb-square cb-lt-bg"></td>
|
||||
<td id="cb_h4" class="cb-square cb-dk-bg"></td>
|
||||
<td class="cb-vert-label"><div>4</div></td>
|
||||
</tr>
|
||||
<tr id="cb_row3">
|
||||
<td class="cb-vert-label"><div>3</div></td>
|
||||
<td id="cb_a3" class="cb-square cb-dk-bg"></td>
|
||||
<td id="cb_b3" class="cb-square cb-lt-bg"></td>
|
||||
<td id="cb_c3" class="cb-square cb-dk-bg"></td>
|
||||
<td id="cb_d3" class="cb-square cb-lt-bg"></td>
|
||||
<td id="cb_e3" class="cb-square cb-dk-bg"></td>
|
||||
<td id="cb_f3" class="cb-square cb-lt-bg"></td>
|
||||
<td id="cb_g3" class="cb-square cb-dk-bg"></td>
|
||||
<td id="cb_h3" class="cb-square cb-lt-bg"></td>
|
||||
<td class="cb-vert-label"><div>3</div></td>
|
||||
</tr>
|
||||
<tr id="cb_row2">
|
||||
<td class="cb-vert-label"><div>2</div></td>
|
||||
<td id="cb_a2" class="cb-square cb-lt-bg"></td>
|
||||
<td id="cb_b2" class="cb-square cb-dk-bg"></td>
|
||||
<td id="cb_c2" class="cb-square cb-lt-bg"></td>
|
||||
<td id="cb_d2" class="cb-square cb-dk-bg"></td>
|
||||
<td id="cb_e2" class="cb-square cb-lt-bg"></td>
|
||||
<td id="cb_f2" class="cb-square cb-dk-bg"></td>
|
||||
<td id="cb_g2" class="cb-square cb-lt-bg"></td>
|
||||
<td id="cb_h2" class="cb-square cb-dk-bg"></td>
|
||||
<td class="cb-vert-label"><div>2</div></td>
|
||||
</tr>
|
||||
<tr id="cb_row1">
|
||||
<td class="cb-vert-label"><div>1</div></td>
|
||||
<td id="cb_a1" class="cb-square cb-dk-bg"></td>
|
||||
<td id="cb_b1" class="cb-square cb-lt-bg"></td>
|
||||
<td id="cb_c1" class="cb-square cb-dk-bg"></td>
|
||||
<td id="cb_d1" class="cb-square cb-lt-bg"></td>
|
||||
<td id="cb_e1" class="cb-square cb-dk-bg"></td>
|
||||
<td id="cb_f1" class="cb-square cb-lt-bg"></td>
|
||||
<td id="cb_g1" class="cb-square cb-dk-bg"></td>
|
||||
<td id="cb_h1" class="cb-square cb-lt-bg"></td>
|
||||
<td class="cb-vert-label"><div>1</div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td class="cb-horiz-label"><div>A</div></td>
|
||||
<td class="cb-horiz-label"><div>B</div></td>
|
||||
<td class="cb-horiz-label"><div>C</div></td>
|
||||
<td class="cb-horiz-label"><div>D</div></td>
|
||||
<td class="cb-horiz-label"><div>E</div></td>
|
||||
<td class="cb-horiz-label"><div>F</div></td>
|
||||
<td class="cb-horiz-label"><div>G</div></td>
|
||||
<td class="cb-horiz-label"><div>H</div></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</table>
|
||||
<div id="content">
|
||||
<div id="cb_outer2">
|
||||
<div id="cb_outer">
|
||||
<div id="cb_container">
|
||||
<div id="cb_inner">
|
||||
<table id="cb_board" class="noselect">
|
||||
<tr>
|
||||
<td class="cb-corner"></td>
|
||||
<td class="cb-horiz-label"><div>A</div></td>
|
||||
<td class="cb-horiz-label"><div>B</div></td>
|
||||
<td class="cb-horiz-label"><div>C</div></td>
|
||||
<td class="cb-horiz-label"><div>D</div></td>
|
||||
<td class="cb-horiz-label"><div>E</div></td>
|
||||
<td class="cb-horiz-label"><div>F</div></td>
|
||||
<td class="cb-horiz-label"><div>G</div></td>
|
||||
<td class="cb-horiz-label"><div>H</div></td>
|
||||
<td class="cb-corner"></td>
|
||||
</tr>
|
||||
<tr id="cb_row8">
|
||||
<td class="cb-vert-label"><div>8</div></td>
|
||||
<td id="cb_a8" class="cb-square cb-lt-bg"></td>
|
||||
<td id="cb_b8" class="cb-square cb-dk-bg"></td>
|
||||
<td id="cb_c8" class="cb-square cb-lt-bg"></td>
|
||||
<td id="cb_d8" class="cb-square cb-dk-bg"></td>
|
||||
<td id="cb_e8" class="cb-square cb-lt-bg"></td>
|
||||
<td id="cb_f8" class="cb-square cb-dk-bg"></td>
|
||||
<td id="cb_g8" class="cb-square cb-lt-bg"></td>
|
||||
<td id="cb_h8" class="cb-square cb-dk-bg"></td>
|
||||
<td class="cb-vert-label"><div>8</div></td>
|
||||
</tr>
|
||||
<tr id="cb_row7">
|
||||
<td class="cb-vert-label"><div>7</div></td>
|
||||
<td id="cb_a7" class="cb-square cb-dk-bg"></td>
|
||||
<td id="cb_b7" class="cb-square cb-lt-bg"></td>
|
||||
<td id="cb_c7" class="cb-square cb-dk-bg"></td>
|
||||
<td id="cb_d7" class="cb-square cb-lt-bg"></td>
|
||||
<td id="cb_e7" class="cb-square cb-dk-bg"></td>
|
||||
<td id="cb_f7" class="cb-square cb-lt-bg"></td>
|
||||
<td id="cb_g7" class="cb-square cb-dk-bg"></td>
|
||||
<td id="cb_h7" class="cb-square cb-lt-bg"></td>
|
||||
<td class="cb-vert-label"><div>7</div></td>
|
||||
</tr>
|
||||
<tr id="cb_row6">
|
||||
<td class="cb-vert-label"><div>6</div></td>
|
||||
<td id="cb_a6" class="cb-square cb-lt-bg"></td>
|
||||
<td id="cb_b6" class="cb-square cb-dk-bg"></td>
|
||||
<td id="cb_c6" class="cb-square cb-lt-bg"></td>
|
||||
<td id="cb_d6" class="cb-square cb-dk-bg"></td>
|
||||
<td id="cb_e6" class="cb-square cb-lt-bg"></td>
|
||||
<td id="cb_f6" class="cb-square cb-dk-bg"></td>
|
||||
<td id="cb_g6" class="cb-square cb-lt-bg"></td>
|
||||
<td id="cb_h6" class="cb-square cb-dk-bg"></td>
|
||||
<td class="cb-vert-label"><div>6</div></td>
|
||||
</tr>
|
||||
<tr id="cb_row5">
|
||||
<td class="cb-vert-label"><div>5</div></td>
|
||||
<td id="cb_a5" class="cb-square cb-dk-bg"></td>
|
||||
<td id="cb_b5" class="cb-square cb-lt-bg"></td>
|
||||
<td id="cb_c5" class="cb-square cb-dk-bg"></td>
|
||||
<td id="cb_d5" class="cb-square cb-lt-bg"></td>
|
||||
<td id="cb_e5" class="cb-square cb-dk-bg"></td>
|
||||
<td id="cb_f5" class="cb-square cb-lt-bg"></td>
|
||||
<td id="cb_g5" class="cb-square cb-dk-bg"></td>
|
||||
<td id="cb_h5" class="cb-square cb-lt-bg"></td>
|
||||
<td class="cb-vert-label"><div>5</div></td>
|
||||
</tr>
|
||||
<tr id="cb_row4">
|
||||
<td class="cb-vert-label"><div>4</div></td>
|
||||
<td id="cb_a4" class="cb-square cb-lt-bg"></td>
|
||||
<td id="cb_b4" class="cb-square cb-dk-bg"></td>
|
||||
<td id="cb_c4" class="cb-square cb-lt-bg"></td>
|
||||
<td id="cb_d4" class="cb-square cb-dk-bg"></td>
|
||||
<td id="cb_e4" class="cb-square cb-lt-bg"></td>
|
||||
<td id="cb_f4" class="cb-square cb-dk-bg"></td>
|
||||
<td id="cb_g4" class="cb-square cb-lt-bg"></td>
|
||||
<td id="cb_h4" class="cb-square cb-dk-bg"></td>
|
||||
<td class="cb-vert-label"><div>4</div></td>
|
||||
</tr>
|
||||
<tr id="cb_row3">
|
||||
<td class="cb-vert-label"><div>3</div></td>
|
||||
<td id="cb_a3" class="cb-square cb-dk-bg"></td>
|
||||
<td id="cb_b3" class="cb-square cb-lt-bg"></td>
|
||||
<td id="cb_c3" class="cb-square cb-dk-bg"></td>
|
||||
<td id="cb_d3" class="cb-square cb-lt-bg"></td>
|
||||
<td id="cb_e3" class="cb-square cb-dk-bg"></td>
|
||||
<td id="cb_f3" class="cb-square cb-lt-bg"></td>
|
||||
<td id="cb_g3" class="cb-square cb-dk-bg"></td>
|
||||
<td id="cb_h3" class="cb-square cb-lt-bg"></td>
|
||||
<td class="cb-vert-label"><div>3</div></td>
|
||||
</tr>
|
||||
<tr id="cb_row2">
|
||||
<td class="cb-vert-label"><div>2</div></td>
|
||||
<td id="cb_a2" class="cb-square cb-lt-bg"></td>
|
||||
<td id="cb_b2" class="cb-square cb-dk-bg"></td>
|
||||
<td id="cb_c2" class="cb-square cb-lt-bg"></td>
|
||||
<td id="cb_d2" class="cb-square cb-dk-bg"></td>
|
||||
<td id="cb_e2" class="cb-square cb-lt-bg"></td>
|
||||
<td id="cb_f2" class="cb-square cb-dk-bg"></td>
|
||||
<td id="cb_g2" class="cb-square cb-lt-bg"></td>
|
||||
<td id="cb_h2" class="cb-square cb-dk-bg"></td>
|
||||
<td class="cb-vert-label"><div>2</div></td>
|
||||
</tr>
|
||||
<tr id="cb_row1">
|
||||
<td class="cb-vert-label"><div>1</div></td>
|
||||
<td id="cb_a1" class="cb-square cb-dk-bg"></td>
|
||||
<td id="cb_b1" class="cb-square cb-lt-bg"></td>
|
||||
<td id="cb_c1" class="cb-square cb-dk-bg"></td>
|
||||
<td id="cb_d1" class="cb-square cb-lt-bg"></td>
|
||||
<td id="cb_e1" class="cb-square cb-dk-bg"></td>
|
||||
<td id="cb_f1" class="cb-square cb-lt-bg"></td>
|
||||
<td id="cb_g1" class="cb-square cb-dk-bg"></td>
|
||||
<td id="cb_h1" class="cb-square cb-lt-bg"></td>
|
||||
<td class="cb-vert-label"><div>1</div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="cb-corner"></td>
|
||||
<td class="cb-horiz-label"><div>A</div></td>
|
||||
<td class="cb-horiz-label"><div>B</div></td>
|
||||
<td class="cb-horiz-label"><div>C</div></td>
|
||||
<td class="cb-horiz-label"><div>D</div></td>
|
||||
<td class="cb-horiz-label"><div>E</div></td>
|
||||
<td class="cb-horiz-label"><div>F</div></td>
|
||||
<td class="cb-horiz-label"><div>G</div></td>
|
||||
<td class="cb-horiz-label"><div>H</div></td>
|
||||
<td class="cb-corner"></td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<form id="cb_control_form" onsubmit="return false;">
|
||||
<div id="cb_controls">
|
||||
<input id="cb_notify" type="checkbox"><label for="cb_notify">Notify</label>
|
||||
<button id="cb_undo" type="button" disabled="true">Undo</button>
|
||||
<button id="cb_redo" type="button" disabled="true">Redo</button>
|
||||
<button id="cb_reset" type="button">Reset</button>
|
||||
<button id="cb_pass" type="button">Pass</button>
|
||||
<span id="cb_message"></span><br>
|
||||
</div>
|
||||
<div id="cb_names">
|
||||
<label for="cb_light_name">Players:</label>
|
||||
<input id="cb_light_name" placeholder="Light"> vs. <input id="cb_dark_name" placeholder="Dark">
|
||||
</div>
|
||||
<div id='cb_game'>
|
||||
<label for="cb_select_game">Select game:</label>
|
||||
<select id="cb_select_game">
|
||||
<option id="cb_new_game">— New Game —</option>
|
||||
</select>
|
||||
</div>
|
||||
</form>
|
||||
<p id="cb_history"></p>
|
||||
<div id="cb_control_container">
|
||||
<form id="cb_control_form" onsubmit="return false;">
|
||||
<div id="cb_controls">
|
||||
<input id="cb_notify" type="checkbox"><label for="cb_notify">Notify</label>
|
||||
<button id="cb_undo" type="button" disabled="true">Undo</button>
|
||||
<button id="cb_redo" type="button" disabled="true">Redo</button>
|
||||
<button id="cb_reset" type="button">Reset</button>
|
||||
<button id="cb_pass" type="button">Pass</button>
|
||||
<span id="cb_message"></span><br>
|
||||
</div>
|
||||
<div id="cb_names">
|
||||
<label for="cb_light_name">Players:</label>
|
||||
<input id="cb_light_name" placeholder="Light"> vs. <input id="cb_dark_name" placeholder="Dark">
|
||||
</div>
|
||||
<div id='cb_game'>
|
||||
<label for="cb_select_game">Select game:</label>
|
||||
<select id="cb_select_game">
|
||||
<option id="cb_new_game">— New Game —</option>
|
||||
</select>
|
||||
</div>
|
||||
<div id='cb_navigate'>
|
||||
<button id="cb_nav_first" type="button" disabled="true">
|
||||
<svg width="12pt" height="12pt" viewBox="0 0 144 144" tabindex="0">
|
||||
<path d="M 6 24 H 24 V 120 H 6" class="silhouette"/>
|
||||
<path d="M 18 72 L 90 24 V 120" class="silhouette"/>
|
||||
<path d="M 66 72 L 138 24 V 120" class="silhouette"/>
|
||||
</svg>
|
||||
<span class="screen-reader">View Start</span>
|
||||
</button>
|
||||
<button id="cb_nav_prev_turn" type="button" disabled="true">
|
||||
<svg width="12pt" height="12pt" viewBox="0 0 144 144" tabindex="0">
|
||||
<path d="M 12 72 L 84 24 V 120" class="silhouette"/>
|
||||
<path d="M 60 72 L 132 24 V 120" class="silhouette"/>
|
||||
</svg>
|
||||
<span class="screen-reader">View Prior Turn</span>
|
||||
</button>
|
||||
<button id="cb_nav_prev_state" type="button" disabled="true">
|
||||
<svg width="12pt" height="12pt" viewBox="0 0 144 144" tabindex="0">
|
||||
<path d="M 36 72 L 108 24 V 120" class="silhouette"/>
|
||||
</svg>
|
||||
<span class="screen-reader">View Prior State</span>
|
||||
</button>
|
||||
<button id="cb_nav_next_state" type="button" disabled="true">
|
||||
<svg width="12pt" height="12pt" viewBox="0 0 144 144" tabindex="0">
|
||||
<path d="M 108 72 L 36 24 V 120" class="silhouette"/>
|
||||
</svg>
|
||||
<span class="screen-reader">View Next State</span>
|
||||
</button>
|
||||
<button id="cb_nav_next_turn" type="button" disabled="true">
|
||||
<svg width="12pt" height="12pt" viewBox="0 0 144 144" tabindex="0">
|
||||
<path d="M 84 72 L 12 24 V 120" class="silhouette"/>
|
||||
<path d="M 132 72 L 60 24 V 120" class="silhouette"/>
|
||||
</svg>
|
||||
<span class="screen-reader">View Next Turn</span>
|
||||
</button>
|
||||
<button id="cb_nav_last" type="button" disabled="true">
|
||||
<svg width="12pt" height="12pt" viewBox="0 0 144 144" tabindex="0">
|
||||
<path d="M 78 72 L 6 24 V 120" class="silhouette"/>
|
||||
<path d="M 126 72 L 54 24 V 120" class="silhouette"/>
|
||||
<path d="M 138 24 H 120 V 120 H 138" class="silhouette"/>
|
||||
</svg>
|
||||
<span class="screen-reader">View Current Move</span>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
<p id="cb_history"></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="cb_hidden" style="display: none">
|
||||
|
|
|
|||
137
js/chess.js
137
js/chess.js
|
|
@ -498,10 +498,44 @@ function renderBoard(board){
|
|||
$('#cb_message').text(msg);
|
||||
|
||||
$('#cb_history').text(renderHistory(board));
|
||||
}
|
||||
|
||||
$('#cb_undo').attr('disabled', board['prior'] ? false : true);
|
||||
$('#cb_redo').attr('disabled', board['subsequent'] ? false : true);
|
||||
$('#cb_pass').attr('disabled', board['phantom'] ? true : false);
|
||||
function setVisibleBoard(board, live){
|
||||
$('#cb_board').data('visible_board', board);
|
||||
renderBoard(board);
|
||||
|
||||
$('#cb_nav_first').attr('disabled', board['prior'] ? false : true);
|
||||
$('#cb_nav_prev_turn').attr('disabled', board['prior'] ? false : true);
|
||||
$('#cb_nav_prev_state').attr('disabled', board['prior'] ? false : true);
|
||||
$('#cb_nav_next_state').attr('disabled', board['subsequent'] ? false : true);
|
||||
$('#cb_nav_next_turn').attr('disabled', board['subsequent'] ? false : true);
|
||||
|
||||
if (live) {
|
||||
const liveBoard = $('#cb_board').data('board');
|
||||
$('#cb_undo').attr('disabled', liveBoard['prior'] ? false : true);
|
||||
$('#cb_redo').attr('disabled', liveBoard['subsequent'] ? false : true);
|
||||
$('#cb_pass').attr('disabled', liveBoard['phantom'] ? true : false);
|
||||
$('#cb_nav_last').attr('disabled', true);
|
||||
$('#cb_board').addClass('cb-live');
|
||||
$('#cb_board').removeClass('cb-archive');
|
||||
} else {
|
||||
$('#cb_undo').attr('disabled', true);
|
||||
$('#cb_redo').attr('disabled', true);
|
||||
$('#cb_pass').attr('disabled', true);
|
||||
$('#cb_board .ui-draggable').draggable('disable');
|
||||
$('#cb_nav_last').attr('disabled', false);
|
||||
$('#cb_board').removeClass('cb-live');
|
||||
$('#cb_board').addClass('cb-archive');
|
||||
}
|
||||
}
|
||||
|
||||
function setCurrentBoard(board){
|
||||
$('#cb_board').data('board', board);
|
||||
|
||||
/* navigation should not include the redo stack */
|
||||
const visible = cloneJSON(board);
|
||||
delete visible.subsequent;
|
||||
setVisibleBoard(visible, true);
|
||||
}
|
||||
|
||||
function randomId(){
|
||||
|
|
@ -560,8 +594,7 @@ function switchGameId(newId){
|
|||
|
||||
/* this will be the starting state if no data is received from peers */
|
||||
var newBoard = initialBoard();
|
||||
boardElem.data('board', newBoard);
|
||||
renderBoard(newBoard);
|
||||
setCurrentBoard(newBoard);
|
||||
|
||||
$('#cb_notify')[0].checked = false;
|
||||
$('#cb_light_name').val('');
|
||||
|
|
@ -583,8 +616,7 @@ function switchGameId(newId){
|
|||
$('#cb_board').data('skip_notify', d['board']);
|
||||
}
|
||||
}
|
||||
$('#cb_board').data('board', board);
|
||||
renderBoard(board);
|
||||
setCurrentBoard(board);
|
||||
}
|
||||
});
|
||||
|
||||
|
|
@ -670,29 +702,88 @@ $(function (){
|
|||
},
|
||||
});
|
||||
|
||||
$('#cb_undo').on('click', function(){
|
||||
var board = $('#cb_board').data('board');
|
||||
if (board['prior']) {
|
||||
var newBoard = cloneJSON(board['prior']);
|
||||
var redoBoard = cloneJSON(board);
|
||||
delete redoBoard['prior'];
|
||||
newBoard['subsequent'] = redoBoard;
|
||||
putState(newBoard);
|
||||
function stepBack(board){
|
||||
if (!board.prior) {
|
||||
return cloneJSON(board);
|
||||
}
|
||||
|
||||
const redoBoard = cloneJSON(board);
|
||||
delete redoBoard.prior;
|
||||
|
||||
const newBoard = cloneJSON(board.prior);
|
||||
newBoard.subsequent = redoBoard;
|
||||
|
||||
return newBoard;
|
||||
}
|
||||
|
||||
function stepForward(board){
|
||||
if (!board.subsequent) {
|
||||
return cloneJSON(board);
|
||||
}
|
||||
|
||||
const undoBoard = cloneJSON(board);
|
||||
delete undoBoard.subsequent;
|
||||
|
||||
const newBoard = cloneJSON(board.subsequent);
|
||||
newBoard.prior = undoBoard;
|
||||
|
||||
return newBoard;
|
||||
}
|
||||
|
||||
$('#cb_undo').on('click', function(){
|
||||
putState(stepBack($('#cb_board').data('board')));
|
||||
});
|
||||
|
||||
$('#cb_redo').on('click', function(){
|
||||
var board = $('#cb_board').data('board');
|
||||
if (board['subsequent']) {
|
||||
var newBoard = cloneJSON(board['subsequent']);
|
||||
var undoBoard = cloneJSON(board);
|
||||
delete undoBoard['subsequent'];
|
||||
newBoard['prior'] = undoBoard;
|
||||
newBoard['timestamp'] = new Date().getTime();
|
||||
putState(newBoard);
|
||||
const board = stepForward($('#cb_board').data('board'));
|
||||
board.timestamp = new Date().getTime();
|
||||
putState(board);
|
||||
});
|
||||
|
||||
$('#cb_nav_first').on('click', function(){
|
||||
var board = $('#cb_board').data('visible_board');
|
||||
if (board) {
|
||||
while (board.prior) {
|
||||
board = stepBack(board);
|
||||
}
|
||||
setVisibleBoard(board);
|
||||
}
|
||||
});
|
||||
|
||||
$('#cb_nav_prev_turn').on('click', function(){
|
||||
var board = $('#cb_board').data('visible_board');
|
||||
board = stepBack(board);
|
||||
const player = board.player;
|
||||
while (board.prior && board.prior.player === player) {
|
||||
board = stepBack(board);
|
||||
}
|
||||
setVisibleBoard(board);
|
||||
});
|
||||
|
||||
$('#cb_nav_prev_state').on('click', function(){
|
||||
setVisibleBoard(stepBack($('#cb_board').data('visible_board')));
|
||||
});
|
||||
|
||||
$('#cb_nav_next_state').on('click', function(){
|
||||
setVisibleBoard(stepForward($('#cb_board').data('visible_board')));
|
||||
});
|
||||
|
||||
$('#cb_nav_next_turn').on('click', function(){
|
||||
var board = $('#cb_board').data('visible_board');
|
||||
const player = board.player;
|
||||
board = stepForward(board);
|
||||
while (board.subsequent && board.player === player) {
|
||||
board = stepForward(board);
|
||||
}
|
||||
setVisibleBoard(board);
|
||||
});
|
||||
|
||||
$('#cb_nav_last').on('click', function(){
|
||||
const visible = cloneJSON($('#cb_board').data('board'));
|
||||
delete visible.subsequent;
|
||||
setVisibleBoard(visible, true);
|
||||
});
|
||||
|
||||
$('#cb_reset').on('click', function(){
|
||||
putState(initialBoard());
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in New Issue