nybble
/
paco_sako
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

add option to reverse board layout; style tweaks for controls

This commit is contained in:
Jesse D. McDonald 2020-03-22 23:49:51 -05:00
parent ef99fa07d1
commit ec1a2bd1fd
7 changed files with 672 additions and 383 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

81
css/chess.css
View File

@ -95,6 +95,9 @@ button:disabled .silhouette {
#cb_control_form { #cb_control_form {
flex: 0 1 auto; flex: 0 1 auto;
display: flex;
flex-flow: column nowrap;
margin-right: auto;
} }
#cb_scrollable { #cb_scrollable {
@ -107,17 +110,69 @@ button:disabled .silhouette {
margin-top: 0; margin-top: 0;
} }
#cb_controls, #cb_names, #cb_game, #cb_navigate { #cb_controls, #cb_names, #cb_message, #cb_game, #cb_navigate {
margin-top: 0.5em; margin-top: 0.5em;
white-space: nowrap; white-space: nowrap;
} }
#cb_undo {
margin-left: auto;
margin-right: 0.1em;
}
#cb_redo {
margin-left: 0.1em;
margin-right: auto;
}
#cb_resign {
margin-left: 0.1em;
margin-right: 0;
}
#cb_navigate {
display: flex;
flex-flow: row nowrap;
justify-items: center;
justify-content: center;
padding-left: 1em;
}
#cb_navigate button {
margin-left: 0.1em;
margin-right: 0.1em;
}
#cb_navigate button:first-child {
margin-left: 0;
}
#cb_navigate button:last-child {
margin-right: 0;
}
#cb_history { #cb_history {
max-width: 7.5in; max-width: 7.5in;
} }
#cb_reset, #cb_pass { .cb-hbox {
display: none; display: flex;
flex-flow: row nowrap;
align-items: center;
}
.cb-vbox {
display: flex;
flex-flow: column nowrap;
align-items: center;
}
.cb-align-start {
align-items: start;
}
.cb-align-stretch {
align-items: stretch;
} }
.cb-square { .cb-square {
@ -204,20 +259,27 @@ button:disabled .silhouette {
background-color: rgba(128,128,128,0.5); background-color: rgba(128,128,128,0.5);
} }
.cb-dk-piece { .cb-lt-piece, .cb-dk-piece {
position: absolute; position: absolute;
top: 17.5%; top: 17.5%;
left: 47.5%;
width: 55%; width: 55%;
height: 65%; height: 65%;
} }
.cb-lt-piece { .cb-lt-piece {
position: absolute;
top: 17.5%;
left: -2.5%; left: -2.5%;
width: 55%; }
height: 65%;
.cb-dk-piece {
left: 47.5%;
}
#cb_board.cb-reversed .cb-lt-piece {
left: 47.5%;
}
#cb_board.cb-reversed .cb-dk-piece {
left: -2.5%;
} }
#cb_phantom > .cb-dk-piece { #cb_phantom > .cb-dk-piece {
@ -267,6 +329,7 @@ button:disabled .silhouette {
} }
#cb_control_container { #cb_control_container {
margin-top: 0.5em;
margin-left: 8px; margin-left: 8px;
max-height: none; max-height: none;
overflow: visible; overflow: visible;

146
index.html
View File

@ -17,20 +17,20 @@
<div id="cb_container"> <div id="cb_container">
<div id="cb_inner"> <div id="cb_inner">
<table id="cb_board" class="noselect"> <table id="cb_board" class="noselect">
<tr> <tr id="cb_row9">
<td class="cb-corner"></td> <td id="cb_L9" class="cb-corner"></td>
<td class="cb-horiz-label"><div>A</div></td> <td id="cb_a9" class="cb-horiz-label"><div>A</div></td>
<td class="cb-horiz-label"><div>B</div></td> <td id="cb_b9" class="cb-horiz-label"><div>B</div></td>
<td class="cb-horiz-label"><div>C</div></td> <td id="cb_c9" class="cb-horiz-label"><div>C</div></td>
<td class="cb-horiz-label"><div>D</div></td> <td id="cb_d9" class="cb-horiz-label"><div>D</div></td>
<td class="cb-horiz-label"><div>E</div></td> <td id="cb_e9" class="cb-horiz-label"><div>E</div></td>
<td class="cb-horiz-label"><div>F</div></td> <td id="cb_f9" class="cb-horiz-label"><div>F</div></td>
<td class="cb-horiz-label"><div>G</div></td> <td id="cb_g9" class="cb-horiz-label"><div>G</div></td>
<td class="cb-horiz-label"><div>H</div></td> <td id="cb_h9" class="cb-horiz-label"><div>H</div></td>
<td class="cb-corner"></td> <td id="cb_R9" class="cb-corner"></td>
</tr> </tr>
<tr id="cb_row8"> <tr id="cb_row8">
<td class="cb-vert-label"><div>8</div></td> <td id="cb_L8" class="cb-vert-label"><div>8</div></td>
<td id="cb_a8" class="cb-square cb-lt-bg"></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_b8" class="cb-square cb-dk-bg"></td>
<td id="cb_c8" class="cb-square cb-lt-bg"></td> <td id="cb_c8" class="cb-square cb-lt-bg"></td>
@ -39,10 +39,10 @@
<td id="cb_f8" class="cb-square cb-dk-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_g8" class="cb-square cb-lt-bg"></td>
<td id="cb_h8" class="cb-square cb-dk-bg"></td> <td id="cb_h8" class="cb-square cb-dk-bg"></td>
<td class="cb-vert-label"><div>8</div></td> <td id="cb_R8" class="cb-vert-label"><div>8</div></td>
</tr> </tr>
<tr id="cb_row7"> <tr id="cb_row7">
<td class="cb-vert-label"><div>7</div></td> <td id="cb_L7" class="cb-vert-label"><div>7</div></td>
<td id="cb_a7" class="cb-square cb-dk-bg"></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_b7" class="cb-square cb-lt-bg"></td>
<td id="cb_c7" class="cb-square cb-dk-bg"></td> <td id="cb_c7" class="cb-square cb-dk-bg"></td>
@ -51,10 +51,10 @@
<td id="cb_f7" class="cb-square cb-lt-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_g7" class="cb-square cb-dk-bg"></td>
<td id="cb_h7" class="cb-square cb-lt-bg"></td> <td id="cb_h7" class="cb-square cb-lt-bg"></td>
<td class="cb-vert-label"><div>7</div></td> <td id="cb_R7" class="cb-vert-label"><div>7</div></td>
</tr> </tr>
<tr id="cb_row6"> <tr id="cb_row6">
<td class="cb-vert-label"><div>6</div></td> <td id="cb_L6" class="cb-vert-label"><div>6</div></td>
<td id="cb_a6" class="cb-square cb-lt-bg"></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_b6" class="cb-square cb-dk-bg"></td>
<td id="cb_c6" class="cb-square cb-lt-bg"></td> <td id="cb_c6" class="cb-square cb-lt-bg"></td>
@ -63,10 +63,10 @@
<td id="cb_f6" class="cb-square cb-dk-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_g6" class="cb-square cb-lt-bg"></td>
<td id="cb_h6" class="cb-square cb-dk-bg"></td> <td id="cb_h6" class="cb-square cb-dk-bg"></td>
<td class="cb-vert-label"><div>6</div></td> <td id="cb_R6" class="cb-vert-label"><div>6</div></td>
</tr> </tr>
<tr id="cb_row5"> <tr id="cb_row5">
<td class="cb-vert-label"><div>5</div></td> <td id="cb_L5" class="cb-vert-label"><div>5</div></td>
<td id="cb_a5" class="cb-square cb-dk-bg"></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_b5" class="cb-square cb-lt-bg"></td>
<td id="cb_c5" class="cb-square cb-dk-bg"></td> <td id="cb_c5" class="cb-square cb-dk-bg"></td>
@ -75,10 +75,10 @@
<td id="cb_f5" class="cb-square cb-lt-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_g5" class="cb-square cb-dk-bg"></td>
<td id="cb_h5" class="cb-square cb-lt-bg"></td> <td id="cb_h5" class="cb-square cb-lt-bg"></td>
<td class="cb-vert-label"><div>5</div></td> <td id="cb_R5" class="cb-vert-label"><div>5</div></td>
</tr> </tr>
<tr id="cb_row4"> <tr id="cb_row4">
<td class="cb-vert-label"><div>4</div></td> <td id="cb_L4" class="cb-vert-label"><div>4</div></td>
<td id="cb_a4" class="cb-square cb-lt-bg"></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_b4" class="cb-square cb-dk-bg"></td>
<td id="cb_c4" class="cb-square cb-lt-bg"></td> <td id="cb_c4" class="cb-square cb-lt-bg"></td>
@ -87,10 +87,10 @@
<td id="cb_f4" class="cb-square cb-dk-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_g4" class="cb-square cb-lt-bg"></td>
<td id="cb_h4" class="cb-square cb-dk-bg"></td> <td id="cb_h4" class="cb-square cb-dk-bg"></td>
<td class="cb-vert-label"><div>4</div></td> <td id="cb_R4" class="cb-vert-label"><div>4</div></td>
</tr> </tr>
<tr id="cb_row3"> <tr id="cb_row3">
<td class="cb-vert-label"><div>3</div></td> <td id="cb_L3" class="cb-vert-label"><div>3</div></td>
<td id="cb_a3" class="cb-square cb-dk-bg"></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_b3" class="cb-square cb-lt-bg"></td>
<td id="cb_c3" class="cb-square cb-dk-bg"></td> <td id="cb_c3" class="cb-square cb-dk-bg"></td>
@ -99,10 +99,10 @@
<td id="cb_f3" class="cb-square cb-lt-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_g3" class="cb-square cb-dk-bg"></td>
<td id="cb_h3" class="cb-square cb-lt-bg"></td> <td id="cb_h3" class="cb-square cb-lt-bg"></td>
<td class="cb-vert-label"><div>3</div></td> <td id="cb_R3" class="cb-vert-label"><div>3</div></td>
</tr> </tr>
<tr id="cb_row2"> <tr id="cb_row2">
<td class="cb-vert-label"><div>2</div></td> <td id="cb_L2" class="cb-vert-label"><div>2</div></td>
<td id="cb_a2" class="cb-square cb-lt-bg"></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_b2" class="cb-square cb-dk-bg"></td>
<td id="cb_c2" class="cb-square cb-lt-bg"></td> <td id="cb_c2" class="cb-square cb-lt-bg"></td>
@ -111,10 +111,10 @@
<td id="cb_f2" class="cb-square cb-dk-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_g2" class="cb-square cb-lt-bg"></td>
<td id="cb_h2" class="cb-square cb-dk-bg"></td> <td id="cb_h2" class="cb-square cb-dk-bg"></td>
<td class="cb-vert-label"><div>2</div></td> <td id="cb_R2" class="cb-vert-label"><div>2</div></td>
</tr> </tr>
<tr id="cb_row1"> <tr id="cb_row1">
<td class="cb-vert-label"><div>1</div></td> <td id="cb_L1" class="cb-vert-label"><div>1</div></td>
<td id="cb_a1" class="cb-square cb-dk-bg"></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_b1" class="cb-square cb-lt-bg"></td>
<td id="cb_c1" class="cb-square cb-dk-bg"></td> <td id="cb_c1" class="cb-square cb-dk-bg"></td>
@ -123,19 +123,19 @@
<td id="cb_f1" class="cb-square cb-lt-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_g1" class="cb-square cb-dk-bg"></td>
<td id="cb_h1" class="cb-square cb-lt-bg"></td> <td id="cb_h1" class="cb-square cb-lt-bg"></td>
<td class="cb-vert-label"><div>1</div></td> <td id="cb_R1" class="cb-vert-label"><div>1</div></td>
</tr> </tr>
<tr> <tr id="cb_row0">
<td class="cb-corner"></td> <td id="cb_L0" class="cb-corner"></td>
<td class="cb-horiz-label"><div>A</div></td> <td id="cb_a0" class="cb-horiz-label"><div>A</div></td>
<td class="cb-horiz-label"><div>B</div></td> <td id="cb_b0" class="cb-horiz-label"><div>B</div></td>
<td class="cb-horiz-label"><div>C</div></td> <td id="cb_c0" class="cb-horiz-label"><div>C</div></td>
<td class="cb-horiz-label"><div>D</div></td> <td id="cb_d0" class="cb-horiz-label"><div>D</div></td>
<td class="cb-horiz-label"><div>E</div></td> <td id="cb_e0" class="cb-horiz-label"><div>E</div></td>
<td class="cb-horiz-label"><div>F</div></td> <td id="cb_f0" class="cb-horiz-label"><div>F</div></td>
<td class="cb-horiz-label"><div>G</div></td> <td id="cb_g0" class="cb-horiz-label"><div>G</div></td>
<td class="cb-horiz-label"><div>H</div></td> <td id="cb_h0" class="cb-horiz-label"><div>H</div></td>
<td class="cb-corner"></td> <td id="cb_R0" class="cb-corner"></td>
</tr> </tr>
</table> </table>
</div> </div>
@ -144,25 +144,18 @@
</div> </div>
<div id="cb_control_container"> <div id="cb_control_container">
<form id="cb_control_form" onsubmit="return false;"> <form id="cb_control_form" autocomplete="off" onsubmit="return false;">
<div id="cb_controls"> <div id="cb_controls">
<input id="cb_notify" type="checkbox"><label for="cb_notify">Notify</label> <div class="cb-hbox">
<div class="cb-vbox cb-align-start">
<div><input id="cb_notify" type="checkbox"><label for="cb_notify">Notify</label></div>
<div><input id="cb_reverse" type="checkbox"><label for="cb_reverse">Reverse</label></div>
</div>
<div class="cb-vbox cb-align-stretch">
<div class="cb-hbox">
<button id="cb_undo" type="button" disabled="true">Undo</button> <button id="cb_undo" type="button" disabled="true">Undo</button>
<button id="cb_redo" type="button" disabled="true">Redo</button> <button id="cb_redo" type="button" disabled="true">Redo</button>
<button id="cb_resign" type="button" disabled="true">Resign</button> <button id="cb_resign" type="button" disabled="true">Resign</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">&mdash; New Game &mdash;</option>
</select>
</div> </div>
<div id="cb_navigate"> <div id="cb_navigate">
<button id="cb_nav_first" title="View First Turn" type="button" disabled="true"> <button id="cb_nav_first" title="View First Turn" type="button" disabled="true">
@ -202,6 +195,20 @@
</svg> </svg>
</button> </button>
</div> </div>
</div>
</div>
</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_message"></div>
<div id="cb_game">
<label for="cb_select_game">Select game:</label>
<select id="cb_select_game">
<option id="cb_new_game">&mdash; New Game &mdash;</option>
</select>
</div>
</form> </form>
<div id="cb_scrollable"> <div id="cb_scrollable">
<p id="cb_history"></p> <p id="cb_history"></p>
@ -231,18 +238,25 @@
<div id="cb_phantom" class="cb-phantom"></div> <div id="cb_phantom" class="cb-phantom"></div>
<div id="cb_pieces" style="display: none"> <div id="cb_pieces" style="display: none">
<div id="cb_piece_kd"><img src="svg/Chess_kdt45.svg" alt="kd" draggable="true" class="cb-piece cb-dk-piece cb-king"></div> <div id="cb_piece_kd"><img src="svg/Chess_kdt45.svg" alt="kd" class="cb-piece cb-dk-piece cb-king"></div>
<div id="cb_piece_qd"><img src="svg/Chess_qdt45.svg" alt="qd" draggable="true" class="cb-piece cb-dk-piece cb-queen"></div> <div id="cb_piece_qd"><img src="svg/Chess_qdt45.svg" alt="qd" class="cb-piece cb-dk-piece cb-queen"></div>
<div id="cb_piece_rd"><img src="svg/Chess_rdt45.svg" alt="rd" draggable="true" class="cb-piece cb-dk-piece cb-rook"></div> <div id="cb_piece_rd"><img src="svg/Chess_rdt45.svg" alt="rd" class="cb-piece cb-dk-piece cb-rook"></div>
<div id="cb_piece_nd"><img src="svg/Chess_ndt45.svg" alt="nd" draggable="true" class="cb-piece cb-dk-piece cb-knight"></div> <div id="cb_piece_nd"><img src="svg/Chess_ndt45.svg" alt="nd" class="cb-piece cb-dk-piece cb-knight"></div>
<div id="cb_piece_bd"><img src="svg/Chess_bdt45.svg" alt="bd" draggable="true" class="cb-piece cb-dk-piece cb-bishop"></div> <div id="cb_piece_bd"><img src="svg/Chess_bdt45.svg" alt="bd" class="cb-piece cb-dk-piece cb-bishop"></div>
<div id="cb_piece_pd"><img src="svg/Chess_pdt45.svg" alt="pd" draggable="true" class="cb-piece cb-dk-piece cb-pawn"></div> <div id="cb_piece_pd"><img src="svg/Chess_pdt45.svg" alt="pd" class="cb-piece cb-dk-piece cb-pawn"></div>
<div id="cb_piece_kl"><img src="svg/Chess_klt45.svg" alt="kl" draggable="true" class="cb-piece cb-lt-piece cb-king"></div> <div id="cb_piece_kl"><img src="svg/Chess_klt45.svg" alt="kl" class="cb-piece cb-lt-piece cb-king"></div>
<div id="cb_piece_ql"><img src="svg/Chess_qlt45.svg" alt="ql" draggable="true" class="cb-piece cb-lt-piece cb-queen"></div> <div id="cb_piece_ql"><img src="svg/Chess_qlt45.svg" alt="ql" class="cb-piece cb-lt-piece cb-queen"></div>
<div id="cb_piece_rl"><img src="svg/Chess_rlt45.svg" alt="rl" draggable="true" class="cb-piece cb-lt-piece cb-rook"></div> <div id="cb_piece_rl"><img src="svg/Chess_rlt45.svg" alt="rl" class="cb-piece cb-lt-piece cb-rook"></div>
<div id="cb_piece_nl"><img src="svg/Chess_nlt45.svg" alt="nl" draggable="true" class="cb-piece cb-lt-piece cb-knight"></div> <div id="cb_piece_nl"><img src="svg/Chess_nlt45.svg" alt="nl" class="cb-piece cb-lt-piece cb-knight"></div>
<div id="cb_piece_bl"><img src="svg/Chess_blt45.svg" alt="bl" draggable="true" class="cb-piece cb-lt-piece cb-bishop"></div> <div id="cb_piece_bl"><img src="svg/Chess_blt45.svg" alt="bl" class="cb-piece cb-lt-piece cb-bishop"></div>
<div id="cb_piece_pl"><img src="svg/Chess_plt45.svg" alt="pl" draggable="true" class="cb-piece cb-lt-piece cb-pawn"></div> <div id="cb_piece_pl"><img src="svg/Chess_plt45.svg" alt="pl" class="cb-piece cb-lt-piece cb-pawn"></div>
</div>
<div id="cb_flipped" style="display: none">
<img id="cb_img_nd_normal" src="svg/Chess_ndt45.svg" alt="nd">
<img id="cb_img_nl_normal" src="svg/Chess_nlt45.svg" alt="nl">
<img id="cb_img_nd_flipped" src="svg/Chess_ndt45_flip.svg" alt="nd_flip">
<img id="cb_img_nl_flipped" src="svg/Chess_nlt45_flip.svg" alt="nl_flip">
</div> </div>
</div> </div>
</div> </div>
@ -267,4 +281,4 @@
<script src="js/pacosako_ui.js"></script> <script src="js/pacosako_ui.js"></script>
</body> </body>
</html> </html>
<!-- vim:set expandtab sw=3 ts=8: --> <!-- vim:set noexpandtab sw=2 ts=2: -->

182
js/pacosako_ui.js
View File

@ -57,29 +57,6 @@ $(function (){
} }
} }
function squareClickDestination(ev, ui) {
let selected = $('#cb_board .cb-selected');
if (selected.length !== 1) {
renderBoard();
return;
}
let from = selected.data('location');
let to = this.id.replace(/^cb_/, '');
selected.appendTo('#cb_hidden');
try {
const meta = { timestamp: new Date(Gun.state()).getTime() };
currentGame.move(from, to, meta);
} catch (err) {
debug('unable to move', err);
}
$('#cb_board').data('last_state', currentGame.moves);
setCurrentBoard(currentGame);
putState();
}
function pieceStartMove(piece, event) { function pieceStartMove(piece, event) {
const side = piece.data('side'); const side = piece.data('side');
const type = piece.data('type'); const type = piece.data('type');
@ -96,6 +73,36 @@ $(function (){
} }
} }
function pieceEndMove(piece, to) {
let from = piece.data('location');
piece.appendTo('#cb_hidden');
try {
const meta = { timestamp: new Date(Gun.state()).getTime() };
currentGame.move(from, to, meta);
} catch (err) {
debug('unable to move', err);
}
$('#cb_board').data('last_state', currentGame.moves);
setCurrentBoard(currentGame);
putState();
}
function squareClickDestination(ev, ui) {
let selected = $('#cb_board .cb-selected');
if (selected.length !== 1) {
renderBoard();
return;
}
pieceEndMove(selected, this.id.replace(/^cb_/, ''));
}
function squareDropDestination(ev, ui) {
pieceEndMove(ui.draggable, this.id.replace(/^cb_/, ''));
}
function pieceClickUnselect(ev, ui) { function pieceClickUnselect(ev, ui) {
renderBoard(); renderBoard();
} }
@ -268,7 +275,19 @@ $(function (){
return res; return res;
} }
//const PacoSakoUUID = '7c38edd4-c931-49c8-9f1a-84de560815db'; /* V1 release */ function shortenName(name) {
name = name.replace(/^\s+/, '');
name = name.replace(/\s+$/, '');
name = name.replace(/\s+/, ' ');
let found = name.match(/^(.{0,20})(\s|$)/);
if (found) {
return found[1];
}
return name.slice(0, 20) + '…';
}
const PacoSakoUUID = 'b425b812-6bdb-11ea-9414-6f946662bac3'; /* V2 release */ const PacoSakoUUID = 'b425b812-6bdb-11ea-9414-6f946662bac3'; /* V2 release */
function putState() { function putState() {
@ -380,10 +399,10 @@ $(function (){
let callback = function(d) { let callback = function(d) {
d = d || {}; d = d || {};
debug('got meta', d); debug('got meta', d);
$('#cb_board').data('lightName', d.lightName || 'Light'); $('#cb_board').data('lightName', shortenName(String(d.lightName || 'Light')));
$('#cb_board').data('darkName', d.darkName || 'Dark'); $('#cb_board').data('darkName', shortenName(String(d.darkName || 'Dark')));
$('#cb_light_name').val(d.lightName || ''); $('#cb_light_name').val(String(d.lightName || ''));
$('#cb_dark_name').val(d.darkName || ''); $('#cb_dark_name').val(String(d.darkName || ''));
}; };
cancelMetaCallback = function() { callback = function() {}; }; cancelMetaCallback = function() { callback = function() {}; };
@ -453,6 +472,33 @@ $(function (){
} catch (err) {} } catch (err) {}
} }
function arrangeBoard(reversed) {
let rows = '9876543210'.split('');
let columns = 'LabcdefghR'.split('');
const boardElem = $('#cb_board');
if (reversed) {
rows.reverse();
columns.reverse();
boardElem.addClass('cb-reversed');
} else {
boardElem.removeClass('cb-reversed');
}
const nd_img_src = $('#cb_img_nd_' + (reversed ? 'flipped' : 'normal'))[0].src;
const nl_img_src = $('#cb_img_nl_' + (reversed ? 'flipped' : 'normal'))[0].src;
$('.cb-piece.cb-dk-piece.cb-knight').attr('src', nd_img_src);
$('.cb-piece.cb-lt-piece.cb-knight').attr('src', nl_img_src);
for (const row of rows) {
const rowElem = $('#cb_row' + row);
rowElem.appendTo(boardElem);
for (const column of columns) {
$('#cb_' + column + row).appendTo(rowElem);
}
}
}
try { try {
if (Notification.permission === 'denied') { if (Notification.permission === 'denied') {
disableNotify(); disableNotify();
@ -463,25 +509,37 @@ $(function (){
disableNotify(); disableNotify();
} }
const LS_KEY_NOTIFY = 'pacosako/notify';
const LS_KEY_REVERSE = 'pacosako/reverse';
if ('localStorage' in window) { if ('localStorage' in window) {
function updateNotify(newValue){ function fromStorage(key, value) {
const doNotify = newValue === 'on'; debug('from localStorage', { key: key, value: value });
if (key === LS_KEY_NOTIFY) {
const doNotify = value === 'on';
const cb_notify = $('#cb_notify')[0]; const cb_notify = $('#cb_notify')[0];
if (doNotify) { cb_notify.checked = doNotify;
if (!cb_notify.checked) { if (doNotify && !cb_notify.checked) {
cb_notify.checked = true;
requestNotify(); requestNotify();
} }
} else if (cb_notify.checked) { } else if (key === LS_KEY_REVERSE) {
cb_notify.checked = false; const doReverse = value === 'on';
const cb_reverse = $('#cb_reverse')[0];
cb_reverse.checked = doReverse;
arrangeBoard(doReverse);
} }
} }
$(window).on('storage', function(event){ $(window).on('storage', function(event){
if (event.originalEvent.key === '/pacosako/notify') { fromStorage(event.originalEvent.key, event.originalEvent.newValue);
updateNotify(event.originalEvent.newValue);
}
}); });
updateNotify(window.localStorage.getItem('/pacosako/notify'));
for (const key of [LS_KEY_NOTIFY, LS_KEY_REVERSE]) {
const value = window.localStorage.getItem(key);
if (value !== null) {
fromStorage(key, value);
}
}
} }
$('.cb-square').droppable({ $('.cb-square').droppable({
@ -490,23 +548,24 @@ $(function (){
deactivate: function(ev, ui){ deactivate: function(ev, ui){
$(this).droppable('disable'); $(this).droppable('disable');
}, },
drop: function(ev, ui) { drop: squareDropDestination,
let dragged = ui.draggable; });
let from = dragged.data('location');
let to = this.id.replace(/^cb_/, '');
dragged.appendTo('#cb_hidden');
try { $('#cb_notify').on('change', function(){
const meta = { timestamp: new Date(Gun.state()).getTime() }; if ('localStorage' in window) {
currentGame.move(from, to, meta); window.localStorage.setItem(LS_KEY_NOTIFY, this.checked ? 'on' : 'off');
} catch (err) {
debug('unable to move', err);
} }
if (this.checked) {
requestNotify();
}
});
$('#cb_board').data('last_state', currentGame.moves); $('#cb_reverse').on('change', function(){
setCurrentBoard(currentGame); debug('cb_reverse changed to ' + this.checked);
putState(); if ('localStorage' in window) {
}, window.localStorage.setItem(LS_KEY_REVERSE, this.checked ? 'on' : 'off');
}
arrangeBoard(this.checked);
}); });
$('#cb_undo').on('click', function(){ $('#cb_undo').on('click', function(){
@ -603,15 +662,6 @@ $(function (){
} }
}); });
$('#cb_notify').on('change', function(){
if ('localStorage' in window) {
window.localStorage.setItem('/pacosako/notify', this.checked ? 'on' : 'off');
}
if (this.checked) {
requestNotify();
}
});
let updateMeta = function() { putMeta(); } let updateMeta = function() { putMeta(); }
$('#cb_light_name').on('input', updateMeta); $('#cb_light_name').on('input', updateMeta);
$('#cb_dark_name').on('input', updateMeta); $('#cb_dark_name').on('input', updateMeta);
@ -637,17 +687,18 @@ $(function (){
opt.text(opt.data('title') + age_str); opt.text(opt.data('title') + age_str);
} }
window.setTimeout(function(){
gun.get(PacoSakoUUID).get('meta').map().on(function(d,key){ gun.get(PacoSakoUUID).get('meta').map().on(function(d,key){
if (key.match(/^[0-9a-f]{16}$/) && d) { if (key.match(/^[0-9a-f]{16}$/) && d) {
debug('got meta for key ' + key, d); debug('got meta for key ' + key, d);
const lightName = d.lightName ? d.lightName : 'Light'; const lightName = shortenName(String(d.lightName || 'Light'));
const darkName = d.darkName ? d.darkName : 'Dark'; const darkName = shortenName(String(d.darkName || 'Dark'));
const moves = !d.moves ? '' : const moves = !d.moves ? '' :
(', ' + d.moves + (d.moves === 1 ? ' move' : ' moves')); (', ' + d.moves + (d.moves === 1 ? ' move' : ' moves'));
let opt = $('#cb_game_' + key); let opt = $('#cb_game_' + key);
if (!(d.lightName || d.darkName) && !d.moves && key !== $('#cb_board').data('gameId')) { if (!d.lightName && !d.darkName && !d.moves && key !== $('#cb_board').data('gameId')) {
if (opt.length >= 1) { if (opt.length >= 1) {
opt.remove(); opt.remove();
} }
@ -690,6 +741,7 @@ $(function (){
} }
} }
}); });
}, 1);
window.setInterval(function(){ window.setInterval(function(){
$('#cb_select_game').first().children('.cb-game-option').each(function(idx,opt){ $('#cb_select_game').first().children('.cb-game-option').each(function(idx,opt){

2
svg/Chess_ndt45_flip.svg Normal file
View File

@ -0,0 +1,2 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="45" height="45" version="1.1" xmlns="http://www.w3.org/2000/svg"><g transform="matrix(-1 0 0 1 44.029 0)" fill-rule="evenodd" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><path d="m22 10c10.5 1 16.5 8 16 29h-23c0-9 10-6.5 8-21" stroke="#000"/><path d="m24 18c0.38 2.91-5.55 7.37-8 9-3 2-2.82 4.34-5 4-1.042-0.94 1.41-3.04 0-3-1 0 0.19 1.23-1 2-1 0-4.003 1-4-4 0-2 6-12 6-12s1.89-1.9 2-3.5c-0.73-0.994-0.5-2-0.5-3 1-1 3 2.5 3 2.5h2s0.78-1.992 2.5-3c1 0 1 3 1 3" stroke="#000"/><g fill="#fff"><path d="m9.5 25.5a0.5 0.5 0 1 1-1 0 0.5 0.5 0 1 1 1 0z" stroke="#fff"/><path transform="matrix(.866 .5 -.5 .866 9.693 -5.173)" d="m15 15.5a0.5 1.5 0 1 1-1 0 0.5 1.5 0 1 1 1 0z" stroke="#fff"/><path d="m24.55 10.4-0.45 1.45 0.5 0.15c3.15 1 5.65 2.49 7.9 6.75s3.25 10.31 2.75 20.25l-0.05 0.5h2.25l0.05-0.5c0.5-10.06-0.88-16.85-3.25-21.34s-5.79-6.64-9.19-7.16z" stroke="none"/></g></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 967 B

2
svg/Chess_nlt45_flip.svg Normal file
View File

@ -0,0 +1,2 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="45" height="45" version="1.1" xmlns="http://www.w3.org/2000/svg"><g fill-rule="evenodd" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><path d="m22 10c10.5 1 16.5 8 16 29h-23c0-9 10-6.5 8-21" fill="#fff"/><path d="m24 18c0.38 2.91-5.55 7.37-8 9-3 2-2.82 4.34-5 4-1.042-0.94 1.41-3.04 0-3-1 0 0.19 1.23-1 2-1 0-4.003 1-4-4 0-2 6-12 6-12s1.89-1.9 2-3.5c-0.73-0.994-0.5-2-0.5-3 1-1 3 2.5 3 2.5h2s0.78-1.992 2.5-3c1 0 1 3 1 3" fill="#fff"/><path d="m9.5 25.5a0.5 0.5 0 1 1-1 0 0.5 0.5 0 1 1 1 0z"/><path transform="matrix(.866 .5 -.5 .866 9.693 -5.173)" d="m15 15.5a0.5 1.5 0 1 1-1 0 0.5 1.5 0 1 1 1 0z"/></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 696 B

81
svg/unoptimized/Chess_ndt45_flip.svg Normal file
View File

@ -0,0 +1,81 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
version="1.1"
width="45"
height="45"
id="svg14"
sodipodi:docname="Chess_ndt45_flip.svg"
inkscape:version="0.92.4 (5da689c313, 2019-01-14)">
<metadata
id="metadata20">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<defs
id="defs18" />
<sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="1920"
inkscape:window-height="999"
id="namedview16"
showgrid="false"
inkscape:zoom="5.2444444"
inkscape:cx="-0.28601695"
inkscape:cy="22.5"
inkscape:window-x="0"
inkscape:window-y="0"
inkscape:window-maximized="1"
inkscape:current-layer="svg14" />
<g
style="opacity:1;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="g12"
transform="matrix(-1,0,0,1,44.029252,0)">
<path
d="m 22,10 c 10.5,1 16.5,8 16,29 H 15 c 0,-9 10,-6.5 8,-21"
style="fill:#000000;stroke:#000000"
id="path2"
inkscape:connector-curvature="0" />
<path
d="m 24,18 c 0.38,2.91 -5.55,7.37 -8,9 -3,2 -2.82,4.34 -5,4 -1.042,-0.94 1.41,-3.04 0,-3 -1,0 0.19,1.23 -1,2 -1,0 -4.003,1 -4,-4 0,-2 6,-12 6,-12 0,0 1.89,-1.9 2,-3.5 -0.73,-0.994 -0.5,-2 -0.5,-3 1,-1 3,2.5 3,2.5 h 2 c 0,0 0.78,-1.992 2.5,-3 1,0 1,3 1,3"
style="fill:#000000;stroke:#000000"
id="path4"
inkscape:connector-curvature="0" />
<path
d="m 9.5,25.5 a 0.5,0.5 0 1 1 -1,0 0.5,0.5 0 1 1 1,0 z"
style="fill:#ffffff;stroke:#ffffff"
id="path6"
inkscape:connector-curvature="0" />
<path
d="m 15,15.5 a 0.5,1.5 0 1 1 -1,0 0.5,1.5 0 1 1 1,0 z"
transform="matrix(0.866,0.5,-0.5,0.866,9.693,-5.173)"
style="fill:#ffffff;stroke:#ffffff"
id="path8"
inkscape:connector-curvature="0" />
<path
d="M 24.55,10.4 24.1,11.85 24.6,12 c 3.15,1 5.65,2.49 7.9,6.75 2.25,4.26 3.25,10.31 2.75,20.25 l -0.05,0.5 h 2.25 L 37.5,39 C 38,28.94 36.62,22.15 34.25,17.66 31.88,13.17 28.46,11.02 25.06,10.5 Z"
style="fill:#ffffff;stroke:none"
id="path10"
inkscape:connector-curvature="0" />
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.0 KiB

75
svg/unoptimized/Chess_nlt45_flip.svg Normal file
View File

@ -0,0 +1,75 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
version="1.1"
width="45"
height="45"
id="svg12"
sodipodi:docname="Chess_nlt45_flip.svg"
inkscape:version="0.92.4 (5da689c313, 2019-01-14)">
<metadata
id="metadata18">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<defs
id="defs16" />
<sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="1920"
inkscape:window-height="999"
id="namedview14"
showgrid="false"
inkscape:zoom="5.2444444"
inkscape:cx="-23.095717"
inkscape:cy="22.5"
inkscape:window-x="0"
inkscape:window-y="0"
inkscape:window-maximized="1"
inkscape:current-layer="svg12" />
<g
style="opacity:1;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="g10">
<path
d="m 22,10 c 10.5,1 16.5,8 16,29 H 15 c 0,-9 10,-6.5 8,-21"
style="fill:#ffffff;stroke:#000000"
id="path2"
inkscape:connector-curvature="0" />
<path
d="m 24,18 c 0.38,2.91 -5.55,7.37 -8,9 -3,2 -2.82,4.34 -5,4 -1.042,-0.94 1.41,-3.04 0,-3 -1,0 0.19,1.23 -1,2 -1,0 -4.003,1 -4,-4 0,-2 6,-12 6,-12 0,0 1.89,-1.9 2,-3.5 -0.73,-0.994 -0.5,-2 -0.5,-3 1,-1 3,2.5 3,2.5 h 2 c 0,0 0.78,-1.992 2.5,-3 1,0 1,3 1,3"
style="fill:#ffffff;stroke:#000000"
id="path4"
inkscape:connector-curvature="0" />
<path
d="m 9.5,25.5 a 0.5,0.5 0 1 1 -1,0 0.5,0.5 0 1 1 1,0 z"
style="fill:#000000;stroke:#000000"
id="path6"
inkscape:connector-curvature="0" />
<path
d="m 15,15.5 a 0.5,1.5 0 1 1 -1,0 0.5,1.5 0 1 1 1,0 z"
transform="matrix(0.866,0.5,-0.5,0.866,9.693,-5.173)"
style="fill:#000000;stroke:#000000"
id="path8"
inkscape:connector-curvature="0" />
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.6 KiB