minor adaptive layout improvements
This commit is contained in:
parent
3410e2d4f0
commit
c6e02d15eb
|
|
@ -1,10 +1,23 @@
|
|||
body {
|
||||
font-family: 'Roboto', sans-serif;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#page {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-family: 'Vollkorn', serif;
|
||||
font-size: 2em;
|
||||
line-height: 1.4em;
|
||||
height: 1.4em;
|
||||
margin-top: 8px;
|
||||
margin-left: 8px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
|
|
@ -22,10 +35,16 @@ button:disabled .silhouette {
|
|||
flex-flow: row nowrap;
|
||||
}
|
||||
|
||||
#cb_outer2 {
|
||||
flex: 1 1 auto;
|
||||
width: 100%;
|
||||
max-width: calc(100vh - (8px + 2.8em + 8px));
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
#cb_outer {
|
||||
width: 100%;
|
||||
max-width: calc(100vh - 4em);
|
||||
flex: 1 0 auto;
|
||||
max-width: calc(100vw - (8px + 24px));
|
||||
}
|
||||
|
||||
#cb_container {
|
||||
|
|
@ -65,11 +84,32 @@ button:disabled .silhouette {
|
|||
}
|
||||
|
||||
#cb_control_container {
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
flex: 0 1000 auto;
|
||||
margin-left: 1em;
|
||||
width: 100%;
|
||||
min-width: 24em;
|
||||
max-height: calc(100vh - (8px + 2.8em));
|
||||
}
|
||||
|
||||
#cb_control_form {
|
||||
flex: 0 1 auto;
|
||||
}
|
||||
|
||||
#cb_scrollable {
|
||||
flex: 1 1000 auto;
|
||||
padding-right: 8px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
#cb_scrollable p {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
#cb_controls, #cb_names, #cb_game, #cb_navigate {
|
||||
margin-top: 0.5em;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
#cb_history {
|
||||
|
|
@ -212,14 +252,21 @@ button:disabled .silhouette {
|
|||
color: #cccccc;
|
||||
}
|
||||
|
||||
/*@media only screen and (max-width: 8in) {*/
|
||||
@media only screen and (max-aspect-ratio: 4/3) {
|
||||
@media only screen and (max-aspect-ratio: 3/2) {
|
||||
#content {
|
||||
flex-flow: column nowrap;
|
||||
}
|
||||
|
||||
#cb_outer2 {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
#cb_control_container {
|
||||
margin-left: 0;
|
||||
margin-left: 8px;
|
||||
max-height: none;
|
||||
overflow: visible;
|
||||
width: 100%;
|
||||
max-width: calc(100vw - (8px + 24px));
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
488
index.html
488
index.html
|
|
@ -8,255 +8,261 @@
|
|||
<title>Paco Ŝako</title>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Paco Ŝako</h1>
|
||||
<div id="page">
|
||||
<h1>Paco Ŝako</h1>
|
||||
|
||||
<div id="content">
|
||||
<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 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="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" 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" 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" 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>
|
||||
<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 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_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 style="margin-top: 1em; display: none">
|
||||
<form id="sign" onsubmit="return false;">
|
||||
<input id="alias" placeholder="username">
|
||||
<input id="pass" type="password" placeholder="passphrase">
|
||||
<input id="in" type="submit" value="sign in">
|
||||
<input id="up" type="button" value="sign up">
|
||||
<p id="message" style="display: none"></p>
|
||||
</form>
|
||||
|
||||
<div id="todo" style="display: none">
|
||||
<ul id="todo_list"></ul>
|
||||
|
||||
<form id="said" onsubmit="return false;">
|
||||
<input id="say">
|
||||
<input id="speak" type="submit" value="speak">
|
||||
<input id="sign_out" type="button" value="sign out">
|
||||
<div style="margin-top: 1em; display: none">
|
||||
<form id="sign" onsubmit="return false;">
|
||||
<input id="alias" placeholder="username">
|
||||
<input id="pass" type="password" placeholder="passphrase">
|
||||
<input id="in" type="submit" value="sign in">
|
||||
<input id="up" type="button" value="sign up">
|
||||
<p id="message" style="display: none"></p>
|
||||
</form>
|
||||
|
||||
<div id="todo" style="display: none">
|
||||
<ul id="todo_list"></ul>
|
||||
|
||||
<form id="said" onsubmit="return false;">
|
||||
<input id="say">
|
||||
<input id="speak" type="submit" value="speak">
|
||||
<input id="sign_out" type="button" value="sign out">
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue