230 lines
13 KiB
HTML
230 lines
13 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
|
|
<link rel="manifest" href="<%=require('./manifest.js')%>">
|
|
<meta name="application-name" content="Paco Ŝako">
|
|
<link rel="icon" sizes="64x64" type="image/png" href="<%=require('./png/pacosako-logo-64x64.png')%>">
|
|
<link rel="icon" sizes="128x128" type="image/png" href="<%=require('./png/pacosako-logo-128x128.png')%>">
|
|
<link rel="icon" sizes="192x192" type="image/png" href="<%=require('./png/pacosako-logo-192x192.png')%>">
|
|
<link rel="icon" sizes="256x256" type="image/png" href="<%=require('./png/pacosako-logo-256x256.png')%>">
|
|
<link rel="icon" sizes="512x512" type="image/png" href="<%=require('./png/pacosako-logo-512x512.png')%>">
|
|
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto|Vollkorn:700&display=swap">
|
|
<title><%= htmlWebpackPlugin.options.title %></title>
|
|
</head>
|
|
<body>
|
|
<div id="page">
|
|
<div id="board_ui">
|
|
<div id="header">
|
|
<button id="settings" title="Settings" type="button"><span class="fas fa-cog"></span></button>
|
|
<button id="cb_choose_game" title="Choose Game" type="button" class="cb-hide-if-private"><span class="fas fa-list"></span></button>
|
|
<h1>Paco Ŝako<span class="cb-show-if-private" style="display: none"> - Private Mode</span></h1>
|
|
<div class="checkbox-container"><input id="cb_reverse" title="Reverse Board" type="checkbox" autocomplete="off" class="image-checkbox fas fa-sync"></div>
|
|
<div class="checkbox-container cb-hide-if-private"><input id="cb_notify" title="Notify" type="checkbox" autocomplete="off" class="image-checkbox fas fa-bell-slash"></div>
|
|
<button id="help" title="Help" type="button"><span class="fas fa-question-circle"></span></button>
|
|
</div>
|
|
|
|
<div id="cb_container">
|
|
<table id="cb_board" class="noselect cb-theme-pacosako" style="visibility: hidden">
|
|
<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 id="cb_status">
|
|
<div class="hbox">
|
|
<div id="cb_message"></div>
|
|
<div class="cb-hide-if-private"><a class="private-link" target="_blank" title="Open Private Copy"><span class="fas fa-copy"></span></a></div>
|
|
</div>
|
|
<div id="cb_explain_check"></div>
|
|
<div id="cb_scrollable">
|
|
<div id="cb_history">
|
|
<span id="cb_history_past"></span><span id="cb_history_future"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="cb_names" class="cb-hide-if-private">
|
|
<div id="cb_names_text">
|
|
<input id="cb_light_name" autocomplete="off" placeholder="Light">
|
|
<span class="cb-names-vs">vs.</span>
|
|
<input id="cb_dark_name" autocomplete="off" placeholder="Dark">
|
|
</div>
|
|
</div>
|
|
<div id="cb_times" class="cb-hide-if-private">
|
|
<div id="cb_light_time">0:00:00</div>
|
|
<div id="cb_dark_time">0:00:00</div>
|
|
</div>
|
|
<div id="cb_navigate">
|
|
<button id="cb_undo" title="Undo" type="button" disabled="true"><span class="fas fa-undo"></span></button>
|
|
<button id="cb_redo" title="Redo" type="button" disabled="true"><span class="fas fa-redo"></span></button>
|
|
<div class="nav-spacer"></div>
|
|
<button id="cb_resign" title="Resign" type="button" disabled="true"><span class="fas fa-flag"></span></button>
|
|
<div class="nav-spacer"></div>
|
|
<button id="cb_nav_first" title="View First Turn" type="button" disabled="true"><span class="fas fa-fast-backward"></span></button>
|
|
<button id="cb_nav_prev_turn" title="View Prior Turn" type="button" disabled="true"><span class="fas fa-backward"></span></button>
|
|
<button id="cb_nav_prev_state" title="View Prior Move" type="button" disabled="true"><span class="fas fa-play fa-flip-horizontal"></span></button>
|
|
<button id="cb_nav_next_state" title="View Next Move" type="button" disabled="true"><span class="fas fa-play"></span></button>
|
|
<button id="cb_nav_next_turn" title="View Next Turn" type="button" disabled="true"><span class="fas fa-forward"></span></button>
|
|
<button id="cb_nav_last" title="View Current Move" type="button" disabled="true"><span class="fas fa-fast-forward"></span></button>
|
|
</div>
|
|
</div> <!-- board_ui -->
|
|
</div>
|
|
|
|
<div id="rules_content" style="display: none">
|
|
<div id="rules" class="rules">
|
|
<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>
|
|
</div>
|
|
<div class="badges">
|
|
<!-- "external-link-alt" by Font Awesome (fontawesome.com/icons/external-link-alt?style=solid) / CC BY 4.0 (creativecommons.org/licenses/by/4.0) -->
|
|
<div class="badge official-badge"><a href="https://pacosako.com/" rel="noopener noreferer" target="_blank"><img src="<%=require('./svg/pacosako-logo.svg')%>" alt="Official Site" title="Official Site"></a></div>
|
|
<div class="badge gogs-badge"><a href="https://jessemcdonald.info/gogs/nybble/paco_sako" rel="noopener noreferer" target="_blank"><img src="<%=require('./png/gogs.png')%>" alt="Source Code" title="Source Code"></a></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="settings_content" style="display: none">
|
|
<div id="settings">
|
|
<div><input id="cb_sound" type="checkbox"><label for="cb_sound">Sound</label></div>
|
|
<div id="cb_theme">
|
|
<label for="cb_select_theme">Theme:</label>
|
|
<select id="cb_select_theme">
|
|
<option value="pacosako">Paco Ŝako</option>
|
|
<option value="traditional">Traditional</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|
|
<!-- vim:set noexpandtab sw=2 ts=2: -->
|