add option to reverse board layout; style tweaks for controls
This commit is contained in:
parent
ef99fa07d1
commit
ec1a2bd1fd
|
|
@ -95,6 +95,9 @@ button:disabled .silhouette {
|
|||
|
||||
#cb_control_form {
|
||||
flex: 0 1 auto;
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
#cb_scrollable {
|
||||
|
|
@ -107,17 +110,69 @@ button:disabled .silhouette {
|
|||
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;
|
||||
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 {
|
||||
max-width: 7.5in;
|
||||
}
|
||||
|
||||
#cb_reset, #cb_pass {
|
||||
display: none;
|
||||
.cb-hbox {
|
||||
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 {
|
||||
|
|
@ -204,20 +259,27 @@ button:disabled .silhouette {
|
|||
background-color: rgba(128,128,128,0.5);
|
||||
}
|
||||
|
||||
.cb-dk-piece {
|
||||
.cb-lt-piece, .cb-dk-piece {
|
||||
position: absolute;
|
||||
top: 17.5%;
|
||||
left: 47.5%;
|
||||
width: 55%;
|
||||
height: 65%;
|
||||
}
|
||||
|
||||
.cb-lt-piece {
|
||||
position: absolute;
|
||||
top: 17.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 {
|
||||
|
|
@ -267,6 +329,7 @@ button:disabled .silhouette {
|
|||
}
|
||||
|
||||
#cb_control_container {
|
||||
margin-top: 0.5em;
|
||||
margin-left: 8px;
|
||||
max-height: none;
|
||||
overflow: visible;
|
||||
|
|
|
|||
540
index.html
540
index.html
|
|
@ -1,270 +1,284 @@
|
|||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<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>
|
||||
<div id="page">
|
||||
<h1>Paco Ŝako</h1>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<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>
|
||||
<div id="page">
|
||||
<h1>Paco Ŝako</h1>
|
||||
|
||||
<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 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 id="cb_row9">
|
||||
<td id="cb_L9" class="cb-corner"></td>
|
||||
<td id="cb_a9" class="cb-horiz-label"><div>A</div></td>
|
||||
<td id="cb_b9" class="cb-horiz-label"><div>B</div></td>
|
||||
<td id="cb_c9" class="cb-horiz-label"><div>C</div></td>
|
||||
<td id="cb_d9" class="cb-horiz-label"><div>D</div></td>
|
||||
<td id="cb_e9" class="cb-horiz-label"><div>E</div></td>
|
||||
<td id="cb_f9" class="cb-horiz-label"><div>F</div></td>
|
||||
<td id="cb_g9" class="cb-horiz-label"><div>G</div></td>
|
||||
<td id="cb_h9" class="cb-horiz-label"><div>H</div></td>
|
||||
<td id="cb_R9" class="cb-corner"></td>
|
||||
</tr>
|
||||
<tr id="cb_row8">
|
||||
<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_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 id="cb_R8" class="cb-vert-label"><div>8</div></td>
|
||||
</tr>
|
||||
<tr id="cb_row7">
|
||||
<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_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 id="cb_R7" class="cb-vert-label"><div>7</div></td>
|
||||
</tr>
|
||||
<tr id="cb_row6">
|
||||
<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_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 id="cb_R6" class="cb-vert-label"><div>6</div></td>
|
||||
</tr>
|
||||
<tr id="cb_row5">
|
||||
<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_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 id="cb_R5" class="cb-vert-label"><div>5</div></td>
|
||||
</tr>
|
||||
<tr id="cb_row4">
|
||||
<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_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 id="cb_R4" class="cb-vert-label"><div>4</div></td>
|
||||
</tr>
|
||||
<tr id="cb_row3">
|
||||
<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_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 id="cb_R3" class="cb-vert-label"><div>3</div></td>
|
||||
</tr>
|
||||
<tr id="cb_row2">
|
||||
<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_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 id="cb_R2" class="cb-vert-label"><div>2</div></td>
|
||||
</tr>
|
||||
<tr id="cb_row1">
|
||||
<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_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 id="cb_R1" class="cb-vert-label"><div>1</div></td>
|
||||
</tr>
|
||||
<tr id="cb_row0">
|
||||
<td id="cb_L0" class="cb-corner"></td>
|
||||
<td id="cb_a0" class="cb-horiz-label"><div>A</div></td>
|
||||
<td id="cb_b0" class="cb-horiz-label"><div>B</div></td>
|
||||
<td id="cb_c0" class="cb-horiz-label"><div>C</div></td>
|
||||
<td id="cb_d0" class="cb-horiz-label"><div>D</div></td>
|
||||
<td id="cb_e0" class="cb-horiz-label"><div>E</div></td>
|
||||
<td id="cb_f0" class="cb-horiz-label"><div>F</div></td>
|
||||
<td id="cb_g0" class="cb-horiz-label"><div>G</div></td>
|
||||
<td id="cb_h0" class="cb-horiz-label"><div>H</div></td>
|
||||
<td id="cb_R0" class="cb-corner"></td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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_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">— New Game —</option>
|
||||
</select>
|
||||
</div>
|
||||
<div id="cb_navigate">
|
||||
<button id="cb_nav_first" title="View First Turn" type="button" disabled="true">
|
||||
<svg viewBox="0 0 144 144" class="media-button-svg silhouette">
|
||||
<path d="M 6 24 H 24 V 120 H 6"/>
|
||||
<path d="M 18 72 L 90 24 V 120"/>
|
||||
<path d="M 66 72 L 138 24 V 120"/>
|
||||
</svg>
|
||||
</button>
|
||||
<button id="cb_nav_prev_turn" title="View Prior Turn" type="button" disabled="true">
|
||||
<svg viewBox="0 0 144 144" class="media-button-svg silhouette">
|
||||
<path d="M 12 72 L 84 24 V 120"/>
|
||||
<path d="M 60 72 L 132 24 V 120"/>
|
||||
</svg>
|
||||
</button>
|
||||
<button id="cb_nav_prev_state" title="View Prior State" type="button" disabled="true">
|
||||
<svg viewBox="0 0 144 144" class="media-button-svg silhouette">
|
||||
<path d="M 36 72 L 108 24 V 120"/>
|
||||
</svg>
|
||||
</button>
|
||||
<button id="cb_nav_next_state" title="View Next State" type="button" disabled="true">
|
||||
<svg viewBox="0 0 144 144" class="media-button-svg silhouette">
|
||||
<path d="M 108 72 L 36 24 V 120"/>
|
||||
</svg>
|
||||
</button>
|
||||
<button id="cb_nav_next_turn" title="View Next Turn" type="button" disabled="true">
|
||||
<svg viewBox="0 0 144 144" class="media-button-svg silhouette">
|
||||
<path d="M 84 72 L 12 24 V 120"/>
|
||||
<path d="M 132 72 L 60 24 V 120"/>
|
||||
</svg>
|
||||
</button>
|
||||
<button id="cb_nav_last" title="View Current Move" type="button" disabled="true">
|
||||
<svg viewBox="0 0 144 144" class="media-button-svg silhouette">
|
||||
<path d="M 78 72 L 6 24 V 120"/>
|
||||
<path d="M 126 72 L 54 24 V 120"/>
|
||||
<path d="M 138 24 H 120 V 120 H 138"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
<div id="cb_scrollable">
|
||||
<p id="cb_history"></p>
|
||||
<details>
|
||||
<summary>Rule Reference</summary>
|
||||
<p>The basic movement for each piece is the same as traditional chess.</p>
|
||||
<p>Pieces are never removed from the board. Instead, the capturing piece shares the square with the captured piece, and the two pieces become a joined pair.</p>
|
||||
<p>When either piece moves from a square containing two pieces, the other piece moves with it.
|
||||
Each player can only move a joined pair according to the rules for their own piece. Joined pieces cannot capture other pieces.</p>
|
||||
<p>A free (non-joined) piece may move into a square occupied by pieces of both colors.
|
||||
When it does, the other piece of the same color becomes a free piece and must move to a new location following the normal movement rules.
|
||||
This process may be repeated multiple times in the same turn.</p>
|
||||
<p>Ŝako (checkmate) occurs when an opposing piece joins with the king.
|
||||
<strong>Important:</strong> The king is not permitted to join with (capture) other pieces.</p>
|
||||
<p>Due to joined movement, it is possible for a pawn to be moved backward to, or past, its starting row.
|
||||
Pawns may move forward two spaces from either of the first two rows on their own side of the board.</p>
|
||||
<p>When a pawn is captured <i>en passant</i> while joined with another piece, the captured pawn moves back one square to become joined with the capturing pawn
|
||||
and the joined piece from the capturing side moves to a new location from its original position as with any other capture.</p>
|
||||
<p>Pawns are promoted when they reach the final row on the opposite side of the board, even if they were moved there by the other player as part of a joined pair.</p>
|
||||
</details>
|
||||
<p id="cb_peers"></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="cb_control_container">
|
||||
<form id="cb_control_form" autocomplete="off" onsubmit="return false;">
|
||||
<div id="cb_controls">
|
||||
<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_redo" type="button" disabled="true">Redo</button>
|
||||
<button id="cb_resign" type="button" disabled="true">Resign</button>
|
||||
</div>
|
||||
<div id="cb_navigate">
|
||||
<button id="cb_nav_first" title="View First Turn" type="button" disabled="true">
|
||||
<svg viewBox="0 0 144 144" class="media-button-svg silhouette">
|
||||
<path d="M 6 24 H 24 V 120 H 6"/>
|
||||
<path d="M 18 72 L 90 24 V 120"/>
|
||||
<path d="M 66 72 L 138 24 V 120"/>
|
||||
</svg>
|
||||
</button>
|
||||
<button id="cb_nav_prev_turn" title="View Prior Turn" type="button" disabled="true">
|
||||
<svg viewBox="0 0 144 144" class="media-button-svg silhouette">
|
||||
<path d="M 12 72 L 84 24 V 120"/>
|
||||
<path d="M 60 72 L 132 24 V 120"/>
|
||||
</svg>
|
||||
</button>
|
||||
<button id="cb_nav_prev_state" title="View Prior State" type="button" disabled="true">
|
||||
<svg viewBox="0 0 144 144" class="media-button-svg silhouette">
|
||||
<path d="M 36 72 L 108 24 V 120"/>
|
||||
</svg>
|
||||
</button>
|
||||
<button id="cb_nav_next_state" title="View Next State" type="button" disabled="true">
|
||||
<svg viewBox="0 0 144 144" class="media-button-svg silhouette">
|
||||
<path d="M 108 72 L 36 24 V 120"/>
|
||||
</svg>
|
||||
</button>
|
||||
<button id="cb_nav_next_turn" title="View Next Turn" type="button" disabled="true">
|
||||
<svg viewBox="0 0 144 144" class="media-button-svg silhouette">
|
||||
<path d="M 84 72 L 12 24 V 120"/>
|
||||
<path d="M 132 72 L 60 24 V 120"/>
|
||||
</svg>
|
||||
</button>
|
||||
<button id="cb_nav_last" title="View Current Move" type="button" disabled="true">
|
||||
<svg viewBox="0 0 144 144" class="media-button-svg silhouette">
|
||||
<path d="M 78 72 L 6 24 V 120"/>
|
||||
<path d="M 126 72 L 54 24 V 120"/>
|
||||
<path d="M 138 24 H 120 V 120 H 138"/>
|
||||
</svg>
|
||||
</button>
|
||||
</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">— New Game —</option>
|
||||
</select>
|
||||
</div>
|
||||
</form>
|
||||
<div id="cb_scrollable">
|
||||
<p id="cb_history"></p>
|
||||
<details>
|
||||
<summary>Rule Reference</summary>
|
||||
<p>The basic movement for each piece is the same as traditional chess.</p>
|
||||
<p>Pieces are never removed from the board. Instead, the capturing piece shares the square with the captured piece, and the two pieces become a joined pair.</p>
|
||||
<p>When either piece moves from a square containing two pieces, the other piece moves with it.
|
||||
Each player can only move a joined pair according to the rules for their own piece. Joined pieces cannot capture other pieces.</p>
|
||||
<p>A free (non-joined) piece may move into a square occupied by pieces of both colors.
|
||||
When it does, the other piece of the same color becomes a free piece and must move to a new location following the normal movement rules.
|
||||
This process may be repeated multiple times in the same turn.</p>
|
||||
<p>Ŝako (checkmate) occurs when an opposing piece joins with the king.
|
||||
<strong>Important:</strong> The king is not permitted to join with (capture) other pieces.</p>
|
||||
<p>Due to joined movement, it is possible for a pawn to be moved backward to, or past, its starting row.
|
||||
Pawns may move forward two spaces from either of the first two rows on their own side of the board.</p>
|
||||
<p>When a pawn is captured <i>en passant</i> while joined with another piece, the captured pawn moves back one square to become joined with the capturing pawn
|
||||
and the joined piece from the capturing side moves to a new location from its original position as with any other capture.</p>
|
||||
<p>Pawns are promoted when they reach the final row on the opposite side of the board, even if they were moved there by the other player as part of a joined pair.</p>
|
||||
</details>
|
||||
<p id="cb_peers"></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="cb_hidden" style="display: none">
|
||||
<div id="cb_phantom" class="cb-phantom"></div>
|
||||
<div id="cb_hidden" style="display: none">
|
||||
<div id="cb_phantom" class="cb-phantom"></div>
|
||||
|
||||
<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_qd"><img src="svg/Chess_qdt45.svg" alt="qd" draggable="true" 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_nd"><img src="svg/Chess_ndt45.svg" alt="nd" draggable="true" 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_pd"><img src="svg/Chess_pdt45.svg" alt="pd" draggable="true" 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_ql"><img src="svg/Chess_qlt45.svg" alt="ql" draggable="true" 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_nl"><img src="svg/Chess_nlt45.svg" alt="nl" draggable="true" 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_pl"><img src="svg/Chess_plt45.svg" alt="pl" draggable="true" class="cb-piece cb-lt-piece cb-pawn"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="cb_pieces" style="display: none">
|
||||
<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" class="cb-piece cb-dk-piece cb-queen"></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" class="cb-piece cb-dk-piece cb-knight"></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" class="cb-piece cb-dk-piece cb-pawn"></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" class="cb-piece cb-lt-piece cb-queen"></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" class="cb-piece cb-lt-piece cb-knight"></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" class="cb-piece cb-lt-piece cb-pawn"></div>
|
||||
</div>
|
||||
|
||||
<script src="jquery-ui/external/jquery/jquery.js"></script>
|
||||
<script src="jquery-ui/dist/jquery-ui.min.js"></script>
|
||||
<script src="jquery-ui-touch-punch/jquery.ui.touch-punch.min.js"></script>
|
||||
<script>
|
||||
console.real_log = console.log;
|
||||
console.log = () => {};
|
||||
//console.STAT = console.real_log;
|
||||
</script>
|
||||
<script src="gun/gun.js"></script>
|
||||
<script src="gun/nts.js"></script>
|
||||
<script src="gun/sea.js"></script>
|
||||
<script src="gun/lib/webrtc.js"></script>
|
||||
<script>
|
||||
console.log = console.real_log;
|
||||
</script>
|
||||
<script src="node-deep-equal/index.js"></script>
|
||||
<script src="js/pacosako.js"></script>
|
||||
<script src="js/pacosako_ui.js"></script>
|
||||
</body>
|
||||
<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>
|
||||
|
||||
<script src="jquery-ui/external/jquery/jquery.js"></script>
|
||||
<script src="jquery-ui/dist/jquery-ui.min.js"></script>
|
||||
<script src="jquery-ui-touch-punch/jquery.ui.touch-punch.min.js"></script>
|
||||
<script>
|
||||
console.real_log = console.log;
|
||||
console.log = () => {};
|
||||
//console.STAT = console.real_log;
|
||||
</script>
|
||||
<script src="gun/gun.js"></script>
|
||||
<script src="gun/nts.js"></script>
|
||||
<script src="gun/sea.js"></script>
|
||||
<script src="gun/lib/webrtc.js"></script>
|
||||
<script>
|
||||
console.log = console.real_log;
|
||||
</script>
|
||||
<script src="node-deep-equal/index.js"></script>
|
||||
<script src="js/pacosako.js"></script>
|
||||
<script src="js/pacosako_ui.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
<!-- vim:set expandtab sw=3 ts=8: -->
|
||||
<!-- vim:set noexpandtab sw=2 ts=2: -->
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
const side = piece.data('side');
|
||||
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) {
|
||||
renderBoard();
|
||||
}
|
||||
|
|
@ -268,7 +275,19 @@ $(function (){
|
|||
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 */
|
||||
|
||||
function putState() {
|
||||
|
|
@ -380,10 +399,10 @@ $(function (){
|
|||
let callback = function(d) {
|
||||
d = d || {};
|
||||
debug('got meta', d);
|
||||
$('#cb_board').data('lightName', d.lightName || 'Light');
|
||||
$('#cb_board').data('darkName', d.darkName || 'Dark');
|
||||
$('#cb_light_name').val(d.lightName || '');
|
||||
$('#cb_dark_name').val(d.darkName || '');
|
||||
$('#cb_board').data('lightName', shortenName(String(d.lightName || 'Light')));
|
||||
$('#cb_board').data('darkName', shortenName(String(d.darkName || 'Dark')));
|
||||
$('#cb_light_name').val(String(d.lightName || ''));
|
||||
$('#cb_dark_name').val(String(d.darkName || ''));
|
||||
};
|
||||
|
||||
cancelMetaCallback = function() { callback = function() {}; };
|
||||
|
|
@ -453,6 +472,33 @@ $(function (){
|
|||
} 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 {
|
||||
if (Notification.permission === 'denied') {
|
||||
disableNotify();
|
||||
|
|
@ -463,25 +509,37 @@ $(function (){
|
|||
disableNotify();
|
||||
}
|
||||
|
||||
const LS_KEY_NOTIFY = 'pacosako/notify';
|
||||
const LS_KEY_REVERSE = 'pacosako/reverse';
|
||||
|
||||
if ('localStorage' in window) {
|
||||
function updateNotify(newValue){
|
||||
const doNotify = newValue === 'on';
|
||||
const cb_notify = $('#cb_notify')[0];
|
||||
if (doNotify) {
|
||||
if (!cb_notify.checked) {
|
||||
cb_notify.checked = true;
|
||||
function fromStorage(key, value) {
|
||||
debug('from localStorage', { key: key, value: value });
|
||||
if (key === LS_KEY_NOTIFY) {
|
||||
const doNotify = value === 'on';
|
||||
const cb_notify = $('#cb_notify')[0];
|
||||
cb_notify.checked = doNotify;
|
||||
if (doNotify && !cb_notify.checked) {
|
||||
requestNotify();
|
||||
}
|
||||
} else if (cb_notify.checked) {
|
||||
cb_notify.checked = false;
|
||||
} else if (key === LS_KEY_REVERSE) {
|
||||
const doReverse = value === 'on';
|
||||
const cb_reverse = $('#cb_reverse')[0];
|
||||
cb_reverse.checked = doReverse;
|
||||
arrangeBoard(doReverse);
|
||||
}
|
||||
}
|
||||
|
||||
$(window).on('storage', function(event){
|
||||
if (event.originalEvent.key === '/pacosako/notify') {
|
||||
updateNotify(event.originalEvent.newValue);
|
||||
}
|
||||
fromStorage(event.originalEvent.key, 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({
|
||||
|
|
@ -490,23 +548,24 @@ $(function (){
|
|||
deactivate: function(ev, ui){
|
||||
$(this).droppable('disable');
|
||||
},
|
||||
drop: function(ev, ui) {
|
||||
let dragged = ui.draggable;
|
||||
let from = dragged.data('location');
|
||||
let to = this.id.replace(/^cb_/, '');
|
||||
dragged.appendTo('#cb_hidden');
|
||||
drop: squareDropDestination,
|
||||
});
|
||||
|
||||
try {
|
||||
const meta = { timestamp: new Date(Gun.state()).getTime() };
|
||||
currentGame.move(from, to, meta);
|
||||
} catch (err) {
|
||||
debug('unable to move', err);
|
||||
}
|
||||
$('#cb_notify').on('change', function(){
|
||||
if ('localStorage' in window) {
|
||||
window.localStorage.setItem(LS_KEY_NOTIFY, this.checked ? 'on' : 'off');
|
||||
}
|
||||
if (this.checked) {
|
||||
requestNotify();
|
||||
}
|
||||
});
|
||||
|
||||
$('#cb_board').data('last_state', currentGame.moves);
|
||||
setCurrentBoard(currentGame);
|
||||
putState();
|
||||
},
|
||||
$('#cb_reverse').on('change', function(){
|
||||
debug('cb_reverse changed to ' + this.checked);
|
||||
if ('localStorage' in window) {
|
||||
window.localStorage.setItem(LS_KEY_REVERSE, this.checked ? 'on' : 'off');
|
||||
}
|
||||
arrangeBoard(this.checked);
|
||||
});
|
||||
|
||||
$('#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(); }
|
||||
$('#cb_light_name').on('input', updateMeta);
|
||||
$('#cb_dark_name').on('input', updateMeta);
|
||||
|
|
@ -637,59 +687,61 @@ $(function (){
|
|||
opt.text(opt.data('title') + age_str);
|
||||
}
|
||||
|
||||
gun.get(PacoSakoUUID).get('meta').map().on(function(d,key){
|
||||
if (key.match(/^[0-9a-f]{16}$/) && d) {
|
||||
debug('got meta for key ' + key, d);
|
||||
const lightName = d.lightName ? d.lightName : 'Light';
|
||||
const darkName = d.darkName ? d.darkName : 'Dark';
|
||||
const moves = !d.moves ? '' :
|
||||
(', ' + d.moves + (d.moves === 1 ? ' move' : ' moves'));
|
||||
window.setTimeout(function(){
|
||||
gun.get(PacoSakoUUID).get('meta').map().on(function(d,key){
|
||||
if (key.match(/^[0-9a-f]{16}$/) && d) {
|
||||
debug('got meta for key ' + key, d);
|
||||
const lightName = shortenName(String(d.lightName || 'Light'));
|
||||
const darkName = shortenName(String(d.darkName || 'Dark'));
|
||||
const moves = !d.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 (opt.length >= 1) {
|
||||
opt.remove();
|
||||
}
|
||||
} else {
|
||||
if (opt.length === 0) {
|
||||
opt = $('<option></option>');
|
||||
opt.attr('id', 'cb_game_' + key);
|
||||
if (!d.lightName && !d.darkName && !d.moves && key !== $('#cb_board').data('gameId')) {
|
||||
if (opt.length >= 1) {
|
||||
opt.remove();
|
||||
}
|
||||
} else {
|
||||
if (opt.length === 0) {
|
||||
opt = $('<option></option>');
|
||||
opt.attr('id', 'cb_game_' + key);
|
||||
}
|
||||
|
||||
let stat = '';
|
||||
if (d.status) {
|
||||
stat = ', ' + d.status;
|
||||
}
|
||||
|
||||
opt.data('gameId', key);
|
||||
opt.data('title', lightName + ' vs. ' + darkName + moves + stat);
|
||||
opt.data('then', d.timestamp || new Date(Gun.state()).getTime());
|
||||
opt.addClass('cb-game-option');
|
||||
opt.appendTo('#cb_select_game');
|
||||
updateTitle(opt);
|
||||
|
||||
let select = $('#cb_select_game');
|
||||
let list = select.children('.cb-game-option').get();
|
||||
list.sort(function(a,b) {
|
||||
const then_a = $(a).data('then');
|
||||
const then_b = $(b).data('then');
|
||||
return (then_a < then_b) ? 1 : (then_a === then_b) ? 0 : -1;
|
||||
});
|
||||
|
||||
for (const e of list) {
|
||||
$(e).appendTo(select);
|
||||
}
|
||||
}
|
||||
|
||||
let stat = '';
|
||||
if (d.status) {
|
||||
stat = ', ' + d.status;
|
||||
}
|
||||
|
||||
opt.data('gameId', key);
|
||||
opt.data('title', lightName + ' vs. ' + darkName + moves + stat);
|
||||
opt.data('then', d.timestamp || new Date(Gun.state()).getTime());
|
||||
opt.addClass('cb-game-option');
|
||||
opt.appendTo('#cb_select_game');
|
||||
updateTitle(opt);
|
||||
|
||||
let select = $('#cb_select_game');
|
||||
let list = select.children('.cb-game-option').get();
|
||||
list.sort(function(a,b) {
|
||||
const then_a = $(a).data('then');
|
||||
const then_b = $(b).data('then');
|
||||
return (then_a < then_b) ? 1 : (then_a === then_b) ? 0 : -1;
|
||||
});
|
||||
|
||||
for (const e of list) {
|
||||
$(e).appendTo(select);
|
||||
let selOpt = $('#cb_game_' + $('#cb_board').data('gameId'));
|
||||
if (selOpt.length === 1) {
|
||||
$('#cb_select_game')[0].selectedIndex = selOpt.index();
|
||||
} else {
|
||||
$('#cb_select_game')[0].selectedIndex = -1;
|
||||
}
|
||||
}
|
||||
|
||||
let selOpt = $('#cb_game_' + $('#cb_board').data('gameId'));
|
||||
if (selOpt.length === 1) {
|
||||
$('#cb_select_game')[0].selectedIndex = selOpt.index();
|
||||
} else {
|
||||
$('#cb_select_game')[0].selectedIndex = -1;
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
}, 1);
|
||||
|
||||
window.setInterval(function(){
|
||||
$('#cb_select_game').first().children('.cb-game-option').each(function(idx,opt){
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
After Width: | Height: | Size: 967 B |
|
|
@ -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>
|
||||
|
After Width: | Height: | Size: 696 B |
|
|
@ -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>
|
||||
|
After Width: | Height: | Size: 3.0 KiB |
|
|
@ -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>
|
||||
|
After Width: | Height: | Size: 2.6 KiB |
Loading…
Reference in New Issue