This is a documentation for Board Game Arena: play board games online !

Template:Chessboard: Difference between revisions

From Board Game Arena
Jump to navigation Jump to search
(hideNotation also hides whitespace)
(swapped negative z-index for positive z-indexes)
 
(6 intermediate revisions by the same user not shown)
Line 1: Line 1:
<noinclude>
<noinclude>
== Basic empty chessboard ==
== Basic <nowiki>{{chessboard}}</nowiki> template ==
</noinclude>
</noinclude>
<div style="display:grid;grid:{{{hideNotation|1.5rem}}} repeat(8,{{{squareSize|46}}}px) {{{hideNotation|1.5rem}}} / {{{hideNotation|1.5rem}}} repeat(8, {{{squareSize|46}}}px) {{{hideNotation|1.5rem}}};width:calc({{{hideNotation|3rem + }}}8 * {{{squareSize|46}}}px);height:calc({{{hideNotation|3rem + }}}8 * {{{squareSize|46}}}px);">{{{hideNotation|
<div style="display:grid;grid:{{{hideNotation|1.5rem}}} repeat(8,{{{squareSize|46}}}px) {{{hideNotation|1.5rem}}} / {{{hideNotation|1.5rem}}} repeat(8,{{{squareSize|46}}}px) {{{hideNotation|1.5rem}}};gap:{{{gridlineThickness|0}}}px;width:calc({{{hideNotation|3rem + }}}8 * ({{{squareSize|46}}}px + {{{gridlineThickness|0}}}px) + {{{gridlineThickness|0}}}px);height:calc({{{hideNotation|3rem + }}}8 * ({{{squareSize|46}}}px + {{{gridlineThickness|0}}}px) + {{{gridlineThickness|0}}}px);position:relative;">
<div class="board background" style="position:absolute;background:{{{gridColour|}}};left:calc(2 * -{{{gridlineThickness|0}}}px);top:calc(2 * -{{{gridlineThickness|0}}}px);width:calc(100% + 4 * {{{gridlineThickness|0}}}px);height:calc(100% + 4 * {{{gridlineThickness|0}}}px);grid-area:calc({{{hideNotation|1 + }}}1) / calc({{{hideNotation|1 + }}}1) / calc(-1{{{hideNotation| - 1}}}) / calc(-1{{{hideNotation| - 1}}});border-radius:calc({{{cornerRadius|8}}}px + 2 * {{{gridlineThickness|0}}}px);"></div>{{{hideNotation|
<div></div>
<div></div>
<div style="align-self:end;text-align:center;">A</div>
<div style="align-self:end;text-align:center;">A</div>
Line 14: Line 15:
<div></div>
<div></div>
<div style="align-self:center;text-align:right;padding-right:4px;">8</div>}}}
<div style="align-self:center;text-align:right;padding-right:4px;">8</div>}}}
<div style="display:grid;background:{{{lightSquareColour|#fff}}};border-top:solid {{{borderThickness|2}}}px {{{darkSquareColour|#ddd}}};border-left:solid {{{borderThickness|2}}}px {{{darkSquareColour|#ddd}}};border-top-left-radius:{{{cornerRadius|8}}}px;">
<div style="display:grid;z-index:1;background:{{{lightSquareColour|#fff}}};border-top:solid {{{borderThickness|2}}}px {{{darkSquareColour|#ddd}}};border-left:solid {{{borderThickness|2}}}px {{{darkSquareColour|#ddd}}};border-top-left-radius:{{{cornerRadius|8}}}px;">
  <div style="display:grid;place-items:center;position:relative;background:{{{highlighta8|}}};">
  <div style="display:grid;place-items:center;position:relative;background:{{{highlighta8|}}};">
   <div style="position:absolute;">{{{a8|{{emptySquare}}}}}</div>
   <div style="position:absolute;">{{{a8|{{emptySquare}}}}}</div>
  </div>
  </div>
</div>
</div>
<div style="display:grid;background:{{{darkSquareColour|#ddd}}};border-top:solid {{{borderThickness|2}}}px {{{darkSquareColour|#ddd}}};">
<div style="display:grid;z-index:1;background:{{{darkSquareColour|#ddd}}};border-top:solid {{{borderThickness|2}}}px {{{darkSquareColour|#ddd}}};">
  <div style="display:grid;place-items:center;position:relative;background:{{{highlightb8|}}};">
  <div style="display:grid;place-items:center;position:relative;background:{{{highlightb8|}}};">
   <div style="position:absolute;">{{{b8|{{emptySquare}}}}}</div>
   <div style="position:absolute;">{{{b8|{{emptySquare}}}}}</div>
  </div>
  </div>
</div>
</div>
<div style="display:grid;background:{{{lightSquareColour|#fff}}};border-top:solid {{{borderThickness|2}}}px {{{darkSquareColour|#ddd}}};">
<div style="display:grid;z-index:1;background:{{{lightSquareColour|#fff}}};border-top:solid {{{borderThickness|2}}}px {{{darkSquareColour|#ddd}}};">
  <div style="display:grid;place-items:center;position:relative;background:{{{highlightc8|}}};">
  <div style="display:grid;place-items:center;position:relative;background:{{{highlightc8|}}};">
   <div style="position:absolute;">{{{c8|{{emptySquare}}}}}</div>
   <div style="position:absolute;">{{{c8|{{emptySquare}}}}}</div>
  </div>
  </div>
</div>
</div>
<div style="display:grid;background:{{{darkSquareColour|#ddd}}};border-top:solid {{{borderThickness|2}}}px {{{darkSquareColour|#ddd}}};">
<div style="display:grid;z-index:1;background:{{{darkSquareColour|#ddd}}};border-top:solid {{{borderThickness|2}}}px {{{darkSquareColour|#ddd}}};">
  <div style="display:grid;place-items:center;position:relative;background:{{{highlightd8|}}};">
  <div style="display:grid;place-items:center;position:relative;background:{{{highlightd8|}}};">
   <div style="position:absolute;">{{{d8|{{emptySquare}}}}}</div>
   <div style="position:absolute;">{{{d8|{{emptySquare}}}}}</div>
  </div>
  </div>
</div>
</div>
<div style="display:grid;background:{{{lightSquareColour|#fff}}};border-top:solid {{{borderThickness|2}}}px {{{darkSquareColour|#ddd}}};">
<div style="display:grid;z-index:1;background:{{{lightSquareColour|#fff}}};border-top:solid {{{borderThickness|2}}}px {{{darkSquareColour|#ddd}}};">
  <div style="display:grid;place-items:center;position:relative;background:{{{highlighte8|}}};">
  <div style="display:grid;place-items:center;position:relative;background:{{{highlighte8|}}};">
   <div style="position:absolute;">{{{e8|{{emptySquare}}}}}</div>
   <div style="position:absolute;">{{{e8|{{emptySquare}}}}}</div>
  </div>
  </div>
</div>
</div>
<div style="display:grid;background:{{{darkSquareColour|#ddd}}};border-top:solid {{{borderThickness|2}}}px {{{darkSquareColour|#ddd}}};">
<div style="display:grid;z-index:1;background:{{{darkSquareColour|#ddd}}};border-top:solid {{{borderThickness|2}}}px {{{darkSquareColour|#ddd}}};">
  <div style="display:grid;place-items:center;position:relative;background:{{{highlightf8|}}};">
  <div style="display:grid;place-items:center;position:relative;background:{{{highlightf8|}}};">
   <div style="position:absolute;">{{{f8|{{emptySquare}}}}}</div>
   <div style="position:absolute;">{{{f8|{{emptySquare}}}}}</div>
  </div>
  </div>
</div>
</div>
<div style="display:grid;background:{{{lightSquareColour|#fff}}};border-top:solid {{{borderThickness|2}}}px {{{darkSquareColour|#ddd}}};">
<div style="display:grid;z-index:1;background:{{{lightSquareColour|#fff}}};border-top:solid {{{borderThickness|2}}}px {{{darkSquareColour|#ddd}}};">
  <div style="display:grid;place-items:center;position:relative;background:{{{highlightg8|}}};">
  <div style="display:grid;place-items:center;position:relative;background:{{{highlightg8|}}};">
   <div style="position:absolute;">{{{g8|{{emptySquare}}}}}</div>
   <div style="position:absolute;">{{{g8|{{emptySquare}}}}}</div>
  </div>
  </div>
</div>
</div>
<div style="display:grid;background:{{{darkSquareColour|#ddd}}};border-top:solid {{{borderThickness|2}}}px {{{darkSquareColour|#ddd}}};border-right:solid 0.125rem {{{darkSquareColour|#ddd}}};border-top-right-radius:{{{cornerRadius|0.5}}}rem;">
<div style="display:grid;z-index:1;background:{{{darkSquareColour|#ddd}}};border-top:solid {{{borderThickness|2}}}px {{{darkSquareColour|#ddd}}};border-right:solid {{{borderThickness|2}}}px {{{darkSquareColour|#ddd}}};border-top-right-radius:{{{cornerRadius|8}}}px;">
  <div style="display:grid;place-items:center;position:relative;background:{{{highlighth8|}}};">
  <div style="display:grid;place-items:center;position:relative;background:{{{highlighth8|}}};">
   <div style="position:absolute;">{{{h8|{{emptySquare}}}}}</div>
   <div style="position:absolute;">{{{h8|{{emptySquare}}}}}</div>
Line 55: Line 56:
</div>{{{hideNotation|<div style="align-self:center;text-align:left ;padding-left :4px;">8</div>
</div>{{{hideNotation|<div style="align-self:center;text-align:left ;padding-left :4px;">8</div>
<div style="align-self:center;text-align:right;padding-right:4px;">7</div>}}}
<div style="align-self:center;text-align:right;padding-right:4px;">7</div>}}}
<div style="display:grid;background:{{{darkSquareColour|#ddd}}};border-left:solid {{{borderThickness|2}}}px {{{darkSquareColour|#ddd}}};">
<div style="display:grid;z-index:1;background:{{{darkSquareColour|#ddd}}};border-left:solid {{{borderThickness|2}}}px {{{darkSquareColour|#ddd}}};">
  <div style="display:grid;place-items:center;position:relative;background:{{{highlighta7|}}};">
  <div style="display:grid;place-items:center;position:relative;background:{{{highlighta7|}}};">
   <div style="position:absolute;">{{{a7|{{emptySquare}}}}}</div>
   <div style="position:absolute;">{{{a7|{{emptySquare}}}}}</div>
  </div>
  </div>
</div>
</div>
<div style="display:grid;background:{{{lightSquareColour|#fff}}};">
<div style="display:grid;z-index:1;background:{{{lightSquareColour|#fff}}};">
  <div style="display:grid;place-items:center;position:relative;background:{{{highlightb7|}}};">
  <div style="display:grid;place-items:center;position:relative;background:{{{highlightb7|}}};">
   <div style="position:absolute;">{{{b7|{{emptySquare}}}}}</div>
   <div style="position:absolute;">{{{b7|{{emptySquare}}}}}</div>
  </div>
  </div>
</div>
</div>
<div style="display:grid;background:{{{darkSquareColour|#ddd}}};">
<div style="display:grid;z-index:1;background:{{{darkSquareColour|#ddd}}};">
  <div style="display:grid;place-items:center;position:relative;background:{{{highlightc7|}}};">
  <div style="display:grid;place-items:center;position:relative;background:{{{highlightc7|}}};">
   <div style="position:absolute;">{{{c7|{{emptySquare}}}}}</div>
   <div style="position:absolute;">{{{c7|{{emptySquare}}}}}</div>
  </div>
  </div>
</div>
</div>
<div style="display:grid;background:{{{lightSquareColour|#fff}}};">
<div style="display:grid;z-index:1;background:{{{lightSquareColour|#fff}}};">
  <div style="display:grid;place-items:center;position:relative;background:{{{highlightd7|}}};">
  <div style="display:grid;place-items:center;position:relative;background:{{{highlightd7|}}};">
   <div style="position:absolute;">{{{d7|{{emptySquare}}}}}</div>
   <div style="position:absolute;">{{{d7|{{emptySquare}}}}}</div>
  </div>
  </div>
</div>
</div>
<div style="display:grid;background:{{{darkSquareColour|#ddd}}};">
<div style="display:grid;z-index:1;background:{{{darkSquareColour|#ddd}}};">
  <div style="display:grid;place-items:center;position:relative;background:{{{highlighte7|}}};">
  <div style="display:grid;place-items:center;position:relative;background:{{{highlighte7|}}};">
   <div style="position:absolute;">{{{e7|{{emptySquare}}}}}</div>
   <div style="position:absolute;">{{{e7|{{emptySquare}}}}}</div>
  </div>
  </div>
</div>
</div>
<div style="display:grid;background:{{{lightSquareColour|#fff}}};">
<div style="display:grid;z-index:1;background:{{{lightSquareColour|#fff}}};">
  <div style="display:grid;place-items:center;position:relative;background:{{{highlightf7|}}};">
  <div style="display:grid;place-items:center;position:relative;background:{{{highlightf7|}}};">
   <div style="position:absolute;">{{{f7|{{emptySquare}}}}}</div>
   <div style="position:absolute;">{{{f7|{{emptySquare}}}}}</div>
  </div>
  </div>
</div>
</div>
<div style="display:grid;background:{{{darkSquareColour|#ddd}}};">
<div style="display:grid;z-index:1;background:{{{darkSquareColour|#ddd}}};">
  <div style="display:grid;place-items:center;position:relative;background:{{{highlightg7|}}};">
  <div style="display:grid;place-items:center;position:relative;background:{{{highlightg7|}}};">
   <div style="position:absolute;">{{{g7|{{emptySquare}}}}}</div>
   <div style="position:absolute;">{{{g7|{{emptySquare}}}}}</div>
  </div>
  </div>
</div>
</div>
<div style="display:grid;background:{{{lightSquareColour|#fff}}};border-right:solid {{{borderThickness|2}}}px {{{darkSquareColour|#ddd}}};">
<div style="display:grid;z-index:1;background:{{{lightSquareColour|#fff}}};border-right:solid {{{borderThickness|2}}}px {{{darkSquareColour|#ddd}}};">
  <div style="display:grid;place-items:center;position:relative;background:{{{highlighth7|}}};">
  <div style="display:grid;place-items:center;position:relative;background:{{{highlighth7|}}};">
   <div style="position:absolute;">{{{h7|{{emptySquare}}}}}</div>
   <div style="position:absolute;">{{{h7|{{emptySquare}}}}}</div>
Line 96: Line 97:
</div>{{{hideNotation|<div style="align-self:center;text-align:left ;padding-left :4px;">7</div>
</div>{{{hideNotation|<div style="align-self:center;text-align:left ;padding-left :4px;">7</div>
<div style="align-self:center;text-align:right;padding-right:4px;">6</div>}}}
<div style="align-self:center;text-align:right;padding-right:4px;">6</div>}}}
<div style="display:grid;background:{{{lightSquareColour|#fff}}};border-left:solid {{{borderThickness|2}}}px {{{darkSquareColour|#ddd}}};">
<div style="display:grid;z-index:1;background:{{{lightSquareColour|#fff}}};border-left:solid {{{borderThickness|2}}}px {{{darkSquareColour|#ddd}}};">
  <div style="display:grid;place-items:center;position:relative;background:{{{highlighta6|}}};">
  <div style="display:grid;place-items:center;position:relative;background:{{{highlighta6|}}};">
   <div style="position:absolute;">{{{a6|{{emptySquare}}}}}</div>
   <div style="position:absolute;">{{{a6|{{emptySquare}}}}}</div>
  </div>
  </div>
</div>
</div>
<div style="display:grid;background:{{{darkSquareColour|#ddd}}};">
<div style="display:grid;z-index:1;background:{{{darkSquareColour|#ddd}}};">
  <div style="display:grid;place-items:center;position:relative;background:{{{highlightb6|}}};">
  <div style="display:grid;place-items:center;position:relative;background:{{{highlightb6|}}};">
   <div style="position:absolute;">{{{b6|{{emptySquare}}}}}</div>
   <div style="position:absolute;">{{{b6|{{emptySquare}}}}}</div>
  </div>
  </div>
</div>
</div>
<div style="display:grid;background:{{{lightSquareColour|#fff}}};">
<div style="display:grid;z-index:1;background:{{{lightSquareColour|#fff}}};">
  <div style="display:grid;place-items:center;position:relative;background:{{{highlightc6|}}};">
  <div style="display:grid;place-items:center;position:relative;background:{{{highlightc6|}}};">
   <div style="position:absolute;">{{{c6|{{emptySquare}}}}}</div>
   <div style="position:absolute;">{{{c6|{{emptySquare}}}}}</div>
  </div>
  </div>
</div>
</div>
<div style="display:grid;background:{{{darkSquareColour|#ddd}}};">
<div style="display:grid;z-index:1;background:{{{darkSquareColour|#ddd}}};">
  <div style="display:grid;place-items:center;position:relative;background:{{{highlightd6|}}};">
  <div style="display:grid;place-items:center;position:relative;background:{{{highlightd6|}}};">
   <div style="position:absolute;">{{{d6|{{emptySquare}}}}}</div>
   <div style="position:absolute;">{{{d6|{{emptySquare}}}}}</div>
  </div>
  </div>
</div>
</div>
<div style="display:grid;background:{{{lightSquareColour|#fff}}};">
<div style="display:grid;z-index:1;background:{{{lightSquareColour|#fff}}};">
  <div style="display:grid;place-items:center;position:relative;background:{{{highlighte6|}}};">
  <div style="display:grid;place-items:center;position:relative;background:{{{highlighte6|}}};">
   <div style="position:absolute;">{{{e6|{{emptySquare}}}}}</div>
   <div style="position:absolute;">{{{e6|{{emptySquare}}}}}</div>
  </div>
  </div>
</div>
</div>
<div style="display:grid;background:{{{darkSquareColour|#ddd}}};">
<div style="display:grid;z-index:1;background:{{{darkSquareColour|#ddd}}};">
  <div style="display:grid;place-items:center;position:relative;background:{{{highlightf6|}}};">
  <div style="display:grid;place-items:center;position:relative;background:{{{highlightf6|}}};">
   <div style="position:absolute;">{{{f6|{{emptySquare}}}}}</div>
   <div style="position:absolute;">{{{f6|{{emptySquare}}}}}</div>
  </div>
  </div>
</div>
</div>
<div style="display:grid;background:{{{lightSquareColour|#fff}}};">
<div style="display:grid;z-index:1;background:{{{lightSquareColour|#fff}}};">
  <div style="display:grid;place-items:center;position:relative;background:{{{highlightg6|}}};">
  <div style="display:grid;place-items:center;position:relative;background:{{{highlightg6|}}};">
   <div style="position:absolute;">{{{g6|{{emptySquare}}}}}</div>
   <div style="position:absolute;">{{{g6|{{emptySquare}}}}}</div>
  </div>
  </div>
</div>
</div>
<div style="display:grid;background:{{{darkSquareColour|#ddd}}};border-right:solid {{{borderThickness|2}}}px {{{darkSquareColour|#ddd}}};">
<div style="display:grid;z-index:1;background:{{{darkSquareColour|#ddd}}};border-right:solid {{{borderThickness|2}}}px {{{darkSquareColour|#ddd}}};">
  <div style="display:grid;place-items:center;position:relative;background:{{{highlighth6|}}};">
  <div style="display:grid;place-items:center;position:relative;background:{{{highlighth6|}}};">
   <div style="position:absolute;">{{{h6|{{emptySquare}}}}}</div>
   <div style="position:absolute;">{{{h6|{{emptySquare}}}}}</div>
Line 137: Line 138:
</div>{{{hideNotation|<div style="align-self:center;text-align:left ;padding-left :4px;">6</div>
</div>{{{hideNotation|<div style="align-self:center;text-align:left ;padding-left :4px;">6</div>
<div style="align-self:center;text-align:right;padding-right:4px;">5</div>}}}
<div style="align-self:center;text-align:right;padding-right:4px;">5</div>}}}
<div style="display:grid;background:{{{darkSquareColour|#ddd}}};border-left:solid {{{borderThickness|2}}}px {{{darkSquareColour|#ddd}}};">
<div style="display:grid;z-index:1;background:{{{darkSquareColour|#ddd}}};border-left:solid {{{borderThickness|2}}}px {{{darkSquareColour|#ddd}}};">
  <div style="display:grid;place-items:center;position:relative;background:{{{highlighta5|}}};">
  <div style="display:grid;place-items:center;position:relative;background:{{{highlighta5|}}};">
   <div style="position:absolute;">{{{a5|{{emptySquare}}}}}</div>
   <div style="position:absolute;">{{{a5|{{emptySquare}}}}}</div>
  </div>
  </div>
</div>
</div>
<div style="display:grid;background:{{{lightSquareColour|#fff}}};">
<div style="display:grid;z-index:1;background:{{{lightSquareColour|#fff}}};">
  <div style="display:grid;place-items:center;position:relative;background:{{{highlightb5|}}};">
  <div style="display:grid;place-items:center;position:relative;background:{{{highlightb5|}}};">
   <div style="position:absolute;">{{{b5|{{emptySquare}}}}}</div>
   <div style="position:absolute;">{{{b5|{{emptySquare}}}}}</div>
  </div>
  </div>
</div>
</div>
<div style="display:grid;background:{{{darkSquareColour|#ddd}}};">
<div style="display:grid;z-index:1;background:{{{darkSquareColour|#ddd}}};">
  <div style="display:grid;place-items:center;position:relative;background:{{{highlightc5|}}};">
  <div style="display:grid;place-items:center;position:relative;background:{{{highlightc5|}}};">
   <div style="position:absolute;">{{{c5|{{emptySquare}}}}}</div>
   <div style="position:absolute;">{{{c5|{{emptySquare}}}}}</div>
  </div>
  </div>
</div>
</div>
<div style="display:grid;background:{{{lightSquareColour|#fff}}};">
<div style="display:grid;z-index:1;background:{{{lightSquareColour|#fff}}};">
  <div style="display:grid;place-items:center;position:relative;background:{{{highlightd5|}}};">
  <div style="display:grid;place-items:center;position:relative;background:{{{highlightd5|}}};">
   <div style="position:absolute;">{{{d5|{{emptySquare}}}}}</div>
   <div style="position:absolute;">{{{d5|{{emptySquare}}}}}</div>
  </div>
  </div>
</div>
</div>
<div style="display:grid;background:{{{darkSquareColour|#ddd}}};">
<div style="display:grid;z-index:1;background:{{{darkSquareColour|#ddd}}};">
  <div style="display:grid;place-items:center;position:relative;background:{{{highlighte5|}}};">
  <div style="display:grid;place-items:center;position:relative;background:{{{highlighte5|}}};">
   <div style="position:absolute;">{{{e5|{{emptySquare}}}}}</div>
   <div style="position:absolute;">{{{e5|{{emptySquare}}}}}</div>
  </div>
  </div>
</div>
</div>
<div style="display:grid;background:{{{lightSquareColour|#fff}}};">
<div style="display:grid;z-index:1;background:{{{lightSquareColour|#fff}}};">
  <div style="display:grid;place-items:center;position:relative;background:{{{highlightf5|}}};">
  <div style="display:grid;place-items:center;position:relative;background:{{{highlightf5|}}};">
   <div style="position:absolute;">{{{f5|{{emptySquare}}}}}</div>
   <div style="position:absolute;">{{{f5|{{emptySquare}}}}}</div>
  </div>
  </div>
</div>
</div>
<div style="display:grid;background:{{{darkSquareColour|#ddd}}};">
<div style="display:grid;z-index:1;background:{{{darkSquareColour|#ddd}}};">
  <div style="display:grid;place-items:center;position:relative;background:{{{highlightg5|}}};">
  <div style="display:grid;place-items:center;position:relative;background:{{{highlightg5|}}};">
   <div style="position:absolute;">{{{g5|{{emptySquare}}}}}</div>
   <div style="position:absolute;">{{{g5|{{emptySquare}}}}}</div>
  </div>
  </div>
</div>
</div>
<div style="display:grid;background:{{{lightSquareColour|#fff}}};border-right:solid {{{borderThickness|2}}}px {{{darkSquareColour|#ddd}}};">
<div style="display:grid;z-index:1;background:{{{lightSquareColour|#fff}}};border-right:solid {{{borderThickness|2}}}px {{{darkSquareColour|#ddd}}};">
  <div style="display:grid;place-items:center;position:relative;background:{{{highlighth5|}}};">
  <div style="display:grid;place-items:center;position:relative;background:{{{highlighth5|}}};">
   <div style="position:absolute;">{{{h5|{{emptySquare}}}}}</div>
   <div style="position:absolute;">{{{h5|{{emptySquare}}}}}</div>
Line 178: Line 179:
</div>{{{hideNotation|<div style="align-self:center;text-align:left ;padding-left :4px;">5</div>
</div>{{{hideNotation|<div style="align-self:center;text-align:left ;padding-left :4px;">5</div>
<div style="align-self:center;text-align:right;padding-right:4px;">4</div>}}}
<div style="align-self:center;text-align:right;padding-right:4px;">4</div>}}}
<div style="display:grid;background:{{{lightSquareColour|#fff}}};border-left:solid {{{borderThickness|2}}}px {{{darkSquareColour|#ddd}}};">
<div style="display:grid;z-index:1;background:{{{lightSquareColour|#fff}}};border-left:solid {{{borderThickness|2}}}px {{{darkSquareColour|#ddd}}};">
  <div style="display:grid;place-items:center;position:relative;background:{{{highlighta4|}}};">
  <div style="display:grid;place-items:center;position:relative;background:{{{highlighta4|}}};">
   <div style="position:absolute;">{{{a4|{{emptySquare}}}}}</div>
   <div style="position:absolute;">{{{a4|{{emptySquare}}}}}</div>
  </div>
  </div>
</div>
</div>
<div style="display:grid;background:{{{darkSquareColour|#ddd}}};">
<div style="display:grid;z-index:1;background:{{{darkSquareColour|#ddd}}};">
  <div style="display:grid;place-items:center;position:relative;background:{{{highlightb4|}}};">
  <div style="display:grid;place-items:center;position:relative;background:{{{highlightb4|}}};">
   <div style="position:absolute;">{{{b4|{{emptySquare}}}}}</div>
   <div style="position:absolute;">{{{b4|{{emptySquare}}}}}</div>
  </div>
  </div>
</div>
</div>
<div style="display:grid;background:{{{lightSquareColour|#fff}}};">
<div style="display:grid;z-index:1;background:{{{lightSquareColour|#fff}}};">
  <div style="display:grid;place-items:center;position:relative;background:{{{highlightc4|}}};">
  <div style="display:grid;place-items:center;position:relative;background:{{{highlightc4|}}};">
   <div style="position:absolute;">{{{c4|{{emptySquare}}}}}</div>
   <div style="position:absolute;">{{{c4|{{emptySquare}}}}}</div>
  </div>
  </div>
</div>
</div>
<div style="display:grid;background:{{{darkSquareColour|#ddd}}};">
<div style="display:grid;z-index:1;background:{{{darkSquareColour|#ddd}}};">
  <div style="display:grid;place-items:center;position:relative;background:{{{highlightd4|}}};">
  <div style="display:grid;place-items:center;position:relative;background:{{{highlightd4|}}};">
   <div style="position:absolute;">{{{d4|{{emptySquare}}}}}</div>
   <div style="position:absolute;">{{{d4|{{emptySquare}}}}}</div>
  </div>
  </div>
</div>
</div>
<div style="display:grid;background:{{{lightSquareColour|#fff}}};">
<div style="display:grid;z-index:1;background:{{{lightSquareColour|#fff}}};">
  <div style="display:grid;place-items:center;position:relative;background:{{{highlighte4|}}};">
  <div style="display:grid;place-items:center;position:relative;background:{{{highlighte4|}}};">
   <div style="position:absolute;">{{{e4|{{emptySquare}}}}}</div>
   <div style="position:absolute;">{{{e4|{{emptySquare}}}}}</div>
  </div>
  </div>
</div>
</div>
<div style="display:grid;background:{{{darkSquareColour|#ddd}}};">
<div style="display:grid;z-index:1;background:{{{darkSquareColour|#ddd}}};">
  <div style="display:grid;place-items:center;position:relative;background:{{{highlightf4|}}};">
  <div style="display:grid;place-items:center;position:relative;background:{{{highlightf4|}}};">
   <div style="position:absolute;">{{{f4|{{emptySquare}}}}}</div>
   <div style="position:absolute;">{{{f4|{{emptySquare}}}}}</div>
  </div>
  </div>
</div>
</div>
<div style="display:grid;background:{{{lightSquareColour|#fff}}};">
<div style="display:grid;z-index:1;background:{{{lightSquareColour|#fff}}};">
  <div style="display:grid;place-items:center;position:relative;background:{{{highlightg4|}}};">
  <div style="display:grid;place-items:center;position:relative;background:{{{highlightg4|}}};">
   <div style="position:absolute;">{{{g4|{{emptySquare}}}}}</div>
   <div style="position:absolute;">{{{g4|{{emptySquare}}}}}</div>
  </div>
  </div>
</div>
</div>
<div style="display:grid;background:{{{darkSquareColour|#ddd}}};border-right:solid {{{borderThickness|2}}}px {{{darkSquareColour|#ddd}}};">
<div style="display:grid;z-index:1;background:{{{darkSquareColour|#ddd}}};border-right:solid {{{borderThickness|2}}}px {{{darkSquareColour|#ddd}}};">
  <div style="display:grid;place-items:center;position:relative;background:{{{highlighth4|}}};">
  <div style="display:grid;place-items:center;position:relative;background:{{{highlighth4|}}};">
   <div style="position:absolute;">{{{h4|{{emptySquare}}}}}</div>
   <div style="position:absolute;">{{{h4|{{emptySquare}}}}}</div>
Line 219: Line 220:
</div>{{{hideNotation|<div style="align-self:center;text-align:left ;padding-left :4px;">4</div>
</div>{{{hideNotation|<div style="align-self:center;text-align:left ;padding-left :4px;">4</div>
<div style="align-self:center;text-align:right;padding-right:4px;">3</div>}}}
<div style="align-self:center;text-align:right;padding-right:4px;">3</div>}}}
<div style="display:grid;background:{{{darkSquareColour|#ddd}}};border-left:solid {{{borderThickness|2}}}px {{{darkSquareColour|#ddd}}};">
<div style="display:grid;z-index:1;background:{{{darkSquareColour|#ddd}}};border-left:solid {{{borderThickness|2}}}px {{{darkSquareColour|#ddd}}};">
  <div style="display:grid;place-items:center;position:relative;background:{{{highlighta3|}}};">
  <div style="display:grid;place-items:center;position:relative;background:{{{highlighta3|}}};">
   <div style="position:absolute;">{{{a3|{{emptySquare}}}}}</div>
   <div style="position:absolute;">{{{a3|{{emptySquare}}}}}</div>
  </div>
  </div>
</div>
</div>
<div style="display:grid;background:{{{lightSquareColour|#fff}}};">
<div style="display:grid;z-index:1;background:{{{lightSquareColour|#fff}}};">
  <div style="display:grid;place-items:center;position:relative;background:{{{highlightb3|}}};">
  <div style="display:grid;place-items:center;position:relative;background:{{{highlightb3|}}};">
   <div style="position:absolute;">{{{b3|{{emptySquare}}}}}</div>
   <div style="position:absolute;">{{{b3|{{emptySquare}}}}}</div>
  </div>
  </div>
</div>
</div>
<div style="display:grid;background:{{{darkSquareColour|#ddd}}};">
<div style="display:grid;z-index:1;background:{{{darkSquareColour|#ddd}}};">
  <div style="display:grid;place-items:center;position:relative;background:{{{highlightc3|}}};">
  <div style="display:grid;place-items:center;position:relative;background:{{{highlightc3|}}};">
   <div style="position:absolute;">{{{c3|{{emptySquare}}}}}</div>
   <div style="position:absolute;">{{{c3|{{emptySquare}}}}}</div>
  </div>
  </div>
</div>
</div>
<div style="display:grid;background:{{{lightSquareColour|#fff}}};">
<div style="display:grid;z-index:1;background:{{{lightSquareColour|#fff}}};">
  <div style="display:grid;place-items:center;position:relative;background:{{{highlightd3|}}};">
  <div style="display:grid;place-items:center;position:relative;background:{{{highlightd3|}}};">
   <div style="position:absolute;">{{{d3|{{emptySquare}}}}}</div>
   <div style="position:absolute;">{{{d3|{{emptySquare}}}}}</div>
  </div>
  </div>
</div>
</div>
<div style="display:grid;background:{{{darkSquareColour|#ddd}}};">
<div style="display:grid;z-index:1;background:{{{darkSquareColour|#ddd}}};">
  <div style="display:grid;place-items:center;position:relative;background:{{{highlighte3|}}};">
  <div style="display:grid;place-items:center;position:relative;background:{{{highlighte3|}}};">
   <div style="position:absolute;">{{{e3|{{emptySquare}}}}}</div>
   <div style="position:absolute;">{{{e3|{{emptySquare}}}}}</div>
  </div>
  </div>
</div>
</div>
<div style="display:grid;background:{{{lightSquareColour|#fff}}};">
<div style="display:grid;z-index:1;background:{{{lightSquareColour|#fff}}};">
  <div style="display:grid;place-items:center;position:relative;background:{{{highlightf3|}}};">
  <div style="display:grid;place-items:center;position:relative;background:{{{highlightf3|}}};">
   <div style="position:absolute;">{{{f3|{{emptySquare}}}}}</div>
   <div style="position:absolute;">{{{f3|{{emptySquare}}}}}</div>
  </div>
  </div>
</div>
</div>
<div style="display:grid;background:{{{darkSquareColour|#ddd}}};">
<div style="display:grid;z-index:1;background:{{{darkSquareColour|#ddd}}};">
  <div style="display:grid;place-items:center;position:relative;background:{{{highlightg3|}}};">
  <div style="display:grid;place-items:center;position:relative;background:{{{highlightg3|}}};">
   <div style="position:absolute;">{{{g3|{{emptySquare}}}}}</div>
   <div style="position:absolute;">{{{g3|{{emptySquare}}}}}</div>
  </div>
  </div>
</div>
</div>
<div style="display:grid;background:{{{lightSquareColour|#fff}}};border-right:solid {{{borderThickness|2}}}px {{{darkSquareColour|#ddd}}};">
<div style="display:grid;z-index:1;background:{{{lightSquareColour|#fff}}};border-right:solid {{{borderThickness|2}}}px {{{darkSquareColour|#ddd}}};">
  <div style="display:grid;place-items:center;position:relative;background:{{{highlighth3|}}};">
  <div style="display:grid;place-items:center;position:relative;background:{{{highlighth3|}}};">
   <div style="position:absolute;">{{{h3|{{emptySquare}}}}}</div>
   <div style="position:absolute;">{{{h3|{{emptySquare}}}}}</div>
Line 260: Line 261:
</div>{{{hideNotation|<div style="align-self:center;text-align:left ;padding-left :4px;">3</div>
</div>{{{hideNotation|<div style="align-self:center;text-align:left ;padding-left :4px;">3</div>
<div style="align-self:center;text-align:right;padding-right:4px;">2</div>}}}
<div style="align-self:center;text-align:right;padding-right:4px;">2</div>}}}
<div style="display:grid;background:{{{lightSquareColour|#fff}}};border-left:solid {{{borderThickness|2}}}px {{{darkSquareColour|#ddd}}};">
<div style="display:grid;z-index:1;background:{{{lightSquareColour|#fff}}};border-left:solid {{{borderThickness|2}}}px {{{darkSquareColour|#ddd}}};">
  <div style="display:grid;place-items:center;position:relative;background:{{{highlighta2|}}};">
  <div style="display:grid;place-items:center;position:relative;background:{{{highlighta2|}}};">
   <div style="position:absolute;">{{{a2|{{emptySquare}}}}}</div>
   <div style="position:absolute;">{{{a2|{{emptySquare}}}}}</div>
  </div>
  </div>
</div>
</div>
<div style="display:grid;background:{{{darkSquareColour|#ddd}}};">
<div style="display:grid;z-index:1;background:{{{darkSquareColour|#ddd}}};">
  <div style="display:grid;place-items:center;position:relative;background:{{{highlightb2|}}};">
  <div style="display:grid;place-items:center;position:relative;background:{{{highlightb2|}}};">
   <div style="position:absolute;">{{{b2|{{emptySquare}}}}}</div>
   <div style="position:absolute;">{{{b2|{{emptySquare}}}}}</div>
  </div>
  </div>
</div>
</div>
<div style="display:grid;background:{{{lightSquareColour|#fff}}};">
<div style="display:grid;z-index:1;background:{{{lightSquareColour|#fff}}};">
  <div style="display:grid;place-items:center;position:relative;background:{{{highlightc2|}}};">
  <div style="display:grid;place-items:center;position:relative;background:{{{highlightc2|}}};">
   <div style="position:absolute;">{{{c2|{{emptySquare}}}}}</div>
   <div style="position:absolute;">{{{c2|{{emptySquare}}}}}</div>
  </div>
  </div>
</div>
</div>
<div style="display:grid;background:{{{darkSquareColour|#ddd}}};">
<div style="display:grid;z-index:1;background:{{{darkSquareColour|#ddd}}};">
  <div style="display:grid;place-items:center;position:relative;background:{{{highlightd2|}}};">
  <div style="display:grid;place-items:center;position:relative;background:{{{highlightd2|}}};">
   <div style="position:absolute;">{{{d2|{{emptySquare}}}}}</div>
   <div style="position:absolute;">{{{d2|{{emptySquare}}}}}</div>
  </div>
  </div>
</div>
</div>
<div style="display:grid;background:{{{lightSquareColour|#fff}}};">
<div style="display:grid;z-index:1;background:{{{lightSquareColour|#fff}}};">
  <div style="display:grid;place-items:center;position:relative;background:{{{highlighte2|}}};">
  <div style="display:grid;place-items:center;position:relative;background:{{{highlighte2|}}};">
   <div style="position:absolute;">{{{e2|{{emptySquare}}}}}</div>
   <div style="position:absolute;">{{{e2|{{emptySquare}}}}}</div>
  </div>
  </div>
</div>
</div>
<div style="display:grid;background:{{{darkSquareColour|#ddd}}};">
<div style="display:grid;z-index:1;background:{{{darkSquareColour|#ddd}}};">
  <div style="display:grid;place-items:center;position:relative;background:{{{highlightf2|}}};">
  <div style="display:grid;place-items:center;position:relative;background:{{{highlightf2|}}};">
   <div style="position:absolute;">{{{f2|{{emptySquare}}}}}</div>
   <div style="position:absolute;">{{{f2|{{emptySquare}}}}}</div>
  </div>
  </div>
</div>
</div>
<div style="display:grid;background:{{{lightSquareColour|#fff}}};">
<div style="display:grid;z-index:1;background:{{{lightSquareColour|#fff}}};">
  <div style="display:grid;place-items:center;position:relative;background:{{{highlightg2|}}};">
  <div style="display:grid;place-items:center;position:relative;background:{{{highlightg2|}}};">
   <div style="position:absolute;">{{{g2|{{emptySquare}}}}}</div>
   <div style="position:absolute;">{{{g2|{{emptySquare}}}}}</div>
  </div>
  </div>
</div>
</div>
<div style="display:grid;background:{{{darkSquareColour|#ddd}}};border-right:solid {{{borderThickness|2}}}px {{{darkSquareColour|#ddd}}};">
<div style="display:grid;z-index:1;background:{{{darkSquareColour|#ddd}}};border-right:solid {{{borderThickness|2}}}px {{{darkSquareColour|#ddd}}};">
  <div style="display:grid;place-items:center;position:relative;background:{{{highlighth2|}}};">
  <div style="display:grid;place-items:center;position:relative;background:{{{highlighth2|}}};">
   <div style="position:absolute;">{{{h2|{{emptySquare}}}}}</div>
   <div style="position:absolute;">{{{h2|{{emptySquare}}}}}</div>
Line 301: Line 302:
</div>{{{hideNotation|<div style="align-self:center;text-align:left ;padding-left :4px;">2</div>
</div>{{{hideNotation|<div style="align-self:center;text-align:left ;padding-left :4px;">2</div>
<div style="align-self:center;text-align:right;padding-right:4px;">1</div>}}}
<div style="align-self:center;text-align:right;padding-right:4px;">1</div>}}}
<div style="display:grid;background:{{{darkSquareColour|#ddd}}};border-bottom:solid {{{borderThickness|2}}}px {{{darkSquareColour|#ddd}}};border-left:solid {{{borderThickness|2}}}px {{{darkSquareColour|#ddd}}};border-bottom-left-radius:{{{cornerRadius|8}}}px;">
<div style="display:grid;z-index:1;background:{{{darkSquareColour|#ddd}}};border-bottom:solid {{{borderThickness|2}}}px {{{darkSquareColour|#ddd}}};border-left:solid {{{borderThickness|2}}}px {{{darkSquareColour|#ddd}}};border-bottom-left-radius:{{{cornerRadius|8}}}px;">
  <div style="display:grid;place-items:center;position:relative;background:{{{highlighta1|}}};">
  <div style="display:grid;place-items:center;position:relative;background:{{{highlighta1|}}};">
   <div style="position:absolute;">{{{a1|{{emptySquare}}}}}</div>
   <div style="position:absolute;">{{{a1|{{emptySquare}}}}}</div>
  </div>
  </div>
</div>
</div>
<div style="display:grid;background:{{{lightSquareColour|#fff}}};border-bottom:solid {{{borderThickness|2}}}px {{{darkSquareColour|#ddd}}};">
<div style="display:grid;z-index:1;background:{{{lightSquareColour|#fff}}};border-bottom:solid {{{borderThickness|2}}}px {{{darkSquareColour|#ddd}}};">
  <div style="display:grid;place-items:center;position:relative;background:{{{highlightb1|}}};">
  <div style="display:grid;place-items:center;position:relative;background:{{{highlightb1|}}};">
   <div style="position:absolute;">{{{b1|{{emptySquare}}}}}</div>
   <div style="position:absolute;">{{{b1|{{emptySquare}}}}}</div>
  </div>
  </div>
</div>
</div>
<div style="display:grid;background:{{{darkSquareColour|#ddd}}};border-bottom:solid {{{borderThickness|2}}}px {{{darkSquareColour|#ddd}}};">
<div style="display:grid;z-index:1;background:{{{darkSquareColour|#ddd}}};border-bottom:solid {{{borderThickness|2}}}px {{{darkSquareColour|#ddd}}};">
  <div style="display:grid;place-items:center;position:relative;background:{{{highlightc1|}}};">
  <div style="display:grid;place-items:center;position:relative;background:{{{highlightc1|}}};">
   <div style="position:absolute;">{{{c1|{{emptySquare}}}}}</div>
   <div style="position:absolute;">{{{c1|{{emptySquare}}}}}</div>
  </div>
  </div>
</div>
</div>
<div style="display:grid;background:{{{lightSquareColour|#fff}}};border-bottom:solid {{{borderThickness|2}}}px {{{darkSquareColour|#ddd}}};">
<div style="display:grid;z-index:1;background:{{{lightSquareColour|#fff}}};border-bottom:solid {{{borderThickness|2}}}px {{{darkSquareColour|#ddd}}};">
  <div style="display:grid;place-items:center;position:relative;background:{{{highlightd1|}}};">
  <div style="display:grid;place-items:center;position:relative;background:{{{highlightd1|}}};">
   <div style="position:absolute;">{{{d1|{{emptySquare}}}}}</div>
   <div style="position:absolute;">{{{d1|{{emptySquare}}}}}</div>
  </div>
  </div>
</div>
</div>
<div style="display:grid;background:{{{darkSquareColour|#ddd}}};border-bottom:solid {{{borderThickness|2}}}px {{{darkSquareColour|#ddd}}};">
<div style="display:grid;z-index:1;background:{{{darkSquareColour|#ddd}}};border-bottom:solid {{{borderThickness|2}}}px {{{darkSquareColour|#ddd}}};">
  <div style="display:grid;place-items:center;position:relative;background:{{{highlighte1|}}};">
  <div style="display:grid;place-items:center;position:relative;background:{{{highlighte1|}}};">
   <div style="position:absolute;">{{{e1|{{emptySquare}}}}}</div>
   <div style="position:absolute;">{{{e1|{{emptySquare}}}}}</div>
  </div>
  </div>
</div>
</div>
<div style="display:grid;background:{{{lightSquareColour|#fff}}};border-bottom:solid {{{borderThickness|2}}}px {{{darkSquareColour|#ddd}}};">
<div style="display:grid;z-index:1;background:{{{lightSquareColour|#fff}}};border-bottom:solid {{{borderThickness|2}}}px {{{darkSquareColour|#ddd}}};">
  <div style="display:grid;place-items:center;position:relative;background:{{{highlightf1|}}};">
  <div style="display:grid;place-items:center;position:relative;background:{{{highlightf1|}}};">
   <div style="position:absolute;">{{{f1|{{emptySquare}}}}}</div>
   <div style="position:absolute;">{{{f1|{{emptySquare}}}}}</div>
  </div>
  </div>
</div>
</div>
<div style="display:grid;background:{{{darkSquareColour|#ddd}}};border-bottom:solid {{{borderThickness|2}}}px {{{darkSquareColour|#ddd}}};">
<div style="display:grid;z-index:1;background:{{{darkSquareColour|#ddd}}};border-bottom:solid {{{borderThickness|2}}}px {{{darkSquareColour|#ddd}}};">
  <div style="display:grid;place-items:center;position:relative;background:{{{highlightg1|}}};">
  <div style="display:grid;place-items:center;position:relative;background:{{{highlightg1|}}};">
   <div style="position:absolute;">{{{g1|{{emptySquare}}}}}</div>
   <div style="position:absolute;">{{{g1|{{emptySquare}}}}}</div>
  </div>
  </div>
</div>
</div>
<div style="display:grid;background:{{{lightSquareColour|#fff}}};border-bottom:solid {{{borderThickness|2}}}px {{{darkSquareColour|#ddd}}};border-right:solid {{{borderThickness|2}}}px {{{darkSquareColour|#ddd}}};border-bottom-right-radius:{{{cornerRadius|8}}}px;">
<div style="display:grid;z-index:1;background:{{{lightSquareColour|#fff}}};border-bottom:solid {{{borderThickness|2}}}px {{{darkSquareColour|#ddd}}};border-right:solid {{{borderThickness|2}}}px {{{darkSquareColour|#ddd}}};border-bottom-right-radius:{{{cornerRadius|8}}}px;">
  <div style="display:grid;place-items:center;position:relative;background:{{{highlighth1|}}};">
  <div style="display:grid;place-items:center;position:relative;background:{{{highlighth1|}}};">
   <div style="position:absolute;">{{{h1|{{emptySquare}}}}}</div>
   <div style="position:absolute;">{{{h1|{{emptySquare}}}}}</div>
Line 358: Line 359:
e.g. https://boardgamearena.com/gamepanel?game=chess under HOW TO PLAY? > See More > RULES SUMMARY
e.g. https://boardgamearena.com/gamepanel?game=chess under HOW TO PLAY? > See More > RULES SUMMARY


Empty board template:
=== Empty board template ===
<pre>
<pre>
{{chessboard
{{chessboard
Line 371: Line 372:
}}
}}
</pre>
</pre>
=== Available parameters ===
<div style="display:grid;grid-template-columns:minmax(min-content,max-content);gap:1.5rem;overflow:hidden;text-overflow:ellipsis;">
<div style="display:grid;grid-template-columns:minmax(min-content,max-content);gap:1.5rem;overflow:hidden;text-overflow:ellipsis;">
  <div style="display:flex;flex-flow:row wrap;gap:0.5rem;">
  <div style="display:flex;flex-flow:row wrap;gap:0.5rem;">
Line 425: Line 429:
   <div style="border-top:0.2rem solid green ;border-left:0.15rem solid green ;border-radius:0.5rem 0.5rem 0 0;"><code><nowiki>{{chessboard | hideNotation=}}</nowiki></code></div>
   <div style="border-top:0.2rem solid green ;border-left:0.15rem solid green ;border-radius:0.5rem 0.5rem 0 0;"><code><nowiki>{{chessboard | hideNotation=}}</nowiki></code></div>
   <div style="border-top:0.2rem solid cyan  ;border-left:0.15rem solid cyan  ;border-radius:0.5rem 0.5rem 0 0;padding-left:0.2rem;"><b><i>Optional:</i></b> hide algebraic notation</div>
   <div style="border-top:0.2rem solid cyan  ;border-left:0.15rem solid cyan  ;border-radius:0.5rem 0.5rem 0 0;padding-left:0.2rem;"><b><i>Optional:</i></b> hide algebraic notation</div>
</div>
<div style="display:flex;flex-flow:row wrap;gap:0.5rem;">
  <div style="border-top:0.2rem solid red  ;border-left:0.15rem solid red  ;border-radius:0.5rem 0.5rem 0 0;"><code>gridlineThickness</code></div>
  <div style="border-top:0.2rem solid orange;border-left:0.15rem solid orange;border-radius:0.5rem 0.5rem 0 0;"><code>0</code></div>
  <div style="border-top:0.2rem solid green ;border-left:0.15rem solid green ;border-radius:0.5rem 0.5rem 0 0;"><code><nowiki>{{chessboard | gridlineThickness=2}}</nowiki></code></div>
  <div style="border-top:0.2rem solid cyan  ;border-left:0.15rem solid cyan  ;border-radius:0.5rem 0.5rem 0 0;padding-left:0.2rem;"><b><i>Optional:</i></b> specify the gridline thickness in px units</div>
</div>
<div style="display:flex;flex-flow:row wrap;gap:0.5rem;">
  <div style="border-top:0.2rem solid red  ;border-left:0.15rem solid red  ;border-radius:0.5rem 0.5rem 0 0;"><code>gridColour</code></div>
  <div style="border-top:0.2rem solid orange;border-left:0.15rem solid orange;border-radius:0.5rem 0.5rem 0 0;"><code>null</code></div>
  <div style="border-top:0.2rem solid green ;border-left:0.15rem solid green ;border-radius:0.5rem 0.5rem 0 0;"><code><nowiki>{{chessboard | gridColour=black}}</nowiki></code></div>
  <div style="border-top:0.2rem solid cyan  ;border-left:0.15rem solid cyan  ;border-radius:0.5rem 0.5rem 0 0;padding-left:0.2rem;"><b><i>Optional:</i></b> specify the  grid colour as <code><b>[string]</b></code> where <code><b>[string]</b></code> is any valid <code>style="background:<b>[string]</b>;"</code></div>
  </div>
  </div>
</div>
</div>
== Chess starting position ==


{{chessboard | lightSquareColour=#efe | darkSquareColour=#cdc | hideNotation=
== Examples ==
 
=== Chess ===
 
{{chessboard | lightSquareColour=#efe | darkSquareColour=#cdc
| a8={{blackRook}}  | b8={{blackKnight}}| c8={{blackBishop}}| d8={{blackQueen}} | e8={{blackKing}}  | f8={{blackBishop}}| g8={{blackKnight}}| h8={{blackRook}}
| a8={{blackRook}}  | b8={{blackKnight}}| c8={{blackBishop}}| d8={{blackQueen}} | e8={{blackKing}}  | f8={{blackBishop}}| g8={{blackKnight}}| h8={{blackRook}}
| a7={{blackPawn}}  | b7={{blackPawn}}  | c7={{blackPawn}}  | d7={{blackPawn}}  | e7={{blackPawn}}  | f7={{blackPawn}}  | g7={{blackPawn}}  | h7={{blackPawn}}
| a7={{blackPawn}}  | b7={{blackPawn}}  | c7={{blackPawn}}  | d7={{blackPawn}}  | e7={{blackPawn}}  | f7={{blackPawn}}  | g7={{blackPawn}}  | h7={{blackPawn}}
Line 451: Line 470:
}}
}}
</pre>
</pre>
=== Draughts / Checkers ===
<div style="display:flex; flex-flow:row wrap; gap:0.5rem;">
{{chessboard | hideNotation= | squareSize=50 | lightSquareColour=#eed | darkSquareColour=#5a5
| d8={{whiteDraughtsKing}}
| highlightd8=gold
| highlightc7=blue
| highlighte7=blue
| b4={{whiteDraughtsMan}}
| f4={{whiteDraughtsMan}}
| c3={{whiteDraughtsMan}}
| b6={{blackDraughtsMan}}
| d6={{blackDraughtsMan}}
| e1={{blackDraughtsKing}}
}}
{{chessboard | hideNotation= | squareSize=50 | lightSquareColour=#eed | darkSquareColour=#5a5
| e7={{whiteDraughtsKing}}
| highlighte7=gold
| highlightd6=red
| highlightc5=blue
| highlightb6=red
| highlighta7=blue
| b4={{whiteDraughtsMan}}
| f4={{whiteDraughtsMan}}
| c3={{whiteDraughtsMan}}
| b6={{blackDraughtsMan}}
| d6={{blackDraughtsMan}}
| f2={{blackDraughtsKing}}
}}
{{chessboard | hideNotation= | squareSize=50 | lightSquareColour=#eed | darkSquareColour=#5a5
| a7={{whiteDraughtsKing}}
| highlighte7=gold
| highlightd6=red
| highlightc5=blue
| highlightb6=red
| highlighta7=blue
| b4={{whiteDraughtsMan}}
| f4={{whiteDraughtsMan}}
| c3={{whiteDraughtsMan}}
| f2={{blackDraughtsKing}}
}}
</div>
<pre>
<div style="display:flex; flex-flow:row wrap; gap:0.5rem;">
{{chessboard | hideNotation= | squareSize=50 | lightSquareColour=#eed | darkSquareColour=#5a5
| d8={{whiteDraughtsKing}}
| highlightd8=gold
| highlightc7=blue
| highlighte7=blue
| b4={{whiteDraughtsMan}}
| f4={{whiteDraughtsMan}}
| c3={{whiteDraughtsMan}}
| b6={{blackDraughtsMan}}
| d6={{blackDraughtsMan}}
| e1={{blackDraughtsKing}}
}}
{{chessboard | hideNotation= | squareSize=50 | lightSquareColour=#eed | darkSquareColour=#5a5
| e7={{whiteDraughtsKing}}
| highlighte7=gold
| highlightd6=red
| highlightc5=blue
| highlightb6=red
| highlighta7=blue
| b4={{whiteDraughtsMan}}
| f4={{whiteDraughtsMan}}
| c3={{whiteDraughtsMan}}
| b6={{blackDraughtsMan}}
| d6={{blackDraughtsMan}}
| f2={{blackDraughtsKing}}
}}
{{chessboard | hideNotation= | squareSize=50 | lightSquareColour=#eed | darkSquareColour=#5a5
| a7={{whiteDraughtsKing}}
| highlighte7=gold
| highlightd6=red
| highlightc5=blue
| highlightb6=red
| highlighta7=blue
| b4={{whiteDraughtsMan}}
| f4={{whiteDraughtsMan}}
| c3={{whiteDraughtsMan}}
| f2={{blackDraughtsKing}}
}}
</div>
</pre>
=== Othello / Reversi ===
<div style="display:flex; flex-flow:row wrap; gap:0.25rem;">
{{chessboard | hideNotation= | squareSize=54 | lightSquareColour=darkgreen | darkSquareColour=darkgreen | cornerRadius=4 | gridlineThickness=2 | gridColour=black
| highlightc5=rgba(255,255,255,0.25)
| highlightd6=rgba(255,255,255,0.25)
| highlighte3=rgba(255,255,255,0.25)
| highlightf4=rgba(255,255,255,0.25)
| d4={{blackReversiToken}}
| e5={{blackReversiToken}}
| e4={{whiteReversiToken}}
| d5={{whiteReversiToken}}
}}
{{chessboard | hideNotation= | squareSize=54 | lightSquareColour=darkgreen | darkSquareColour=darkgreen | cornerRadius=4 | gridlineThickness=2 | gridColour=black
| d4={{blackReversiToken}}
| e5={{blackReversiToken}}
| e4={{blackReversiToken}}
| f4={{blackReversiToken}}
| d5={{whiteReversiToken}}
}}
{{chessboard | hideNotation= | squareSize=54 | lightSquareColour=darkgreen | darkSquareColour=darkgreen | cornerRadius=4 | gridlineThickness=2 | gridColour=black
| highlightc5=rgba(255,255,255,0.25)
| highlightd6=rgba(255,255,255,0.25)
| highlighte3=rgba(255,255,255,0.25)
| highlightf2=rgba(255,255,255,0.25)
| d4={{blackReversiToken}}
| e5={{blackReversiToken}}
| f4={{blackReversiToken}}
| d5={{whiteReversiToken}}
| e4={{whiteReversiToken}}
| f3={{whiteReversiToken}}
}}
</div>
<pre>
<div style="display:flex; flex-flow:row wrap; gap:0.25rem;">
{{chessboard | hideNotation= | squareSize=54 | lightSquareColour=darkgreen | darkSquareColour=darkgreen | cornerRadius=4 | gridlineThickness=2 | gridColour=black
| highlightc5=rgba(255,255,255,0.25)
| highlightd6=rgba(255,255,255,0.25)
| highlighte3=rgba(255,255,255,0.25)
| highlightf4=rgba(255,255,255,0.25)
| d4={{blackReversiToken}}
| e5={{blackReversiToken}}
| e4={{whiteReversiToken}}
| d5={{whiteReversiToken}}
}}
{{chessboard | hideNotation= | squareSize=54 | lightSquareColour=darkgreen | darkSquareColour=darkgreen | cornerRadius=4 | gridlineThickness=2 | gridColour=black
| d4={{blackReversiToken}}
| e5={{blackReversiToken}}
| e4={{blackReversiToken}}
| f4={{blackReversiToken}}
| d5={{whiteReversiToken}}
}}
{{chessboard | hideNotation= | squareSize=54 | lightSquareColour=darkgreen | darkSquareColour=darkgreen | cornerRadius=4 | gridlineThickness=2 | gridColour=black
| highlightc5=rgba(255,255,255,0.25)
| highlightd6=rgba(255,255,255,0.25)
| highlighte3=rgba(255,255,255,0.25)
| highlightf2=rgba(255,255,255,0.25)
| d4={{blackReversiToken}}
| e5={{blackReversiToken}}
| f4={{blackReversiToken}}
| d5={{whiteReversiToken}}
| e4={{whiteReversiToken}}
| f3={{whiteReversiToken}}
}}
</div>
</pre>
=== Lines of Action (LOA) ===
<div style="display:flex; flex-flow:row wrap; gap:1rem;">
<div style="display:grid; grid:repeat(2,auto)/min-content;">
  <div style="padding-left:1.5rem; padding-right:1.5rem;">
<b>A piece may not jump over an enemy piece</b>
White cannot play a6-d6, even though there are three pieces in row 6. White might instead play a6-c4, moving two spaces because there are two pieces in the diagonal (a6-f1).
  </div><div style="align-self:end;">
{{chessboard | lightSquareColour=#b85 | darkSquareColour=#831
| highlighta6=rgba(0,255,0,0.5)
| highlightc4=rgba(0,255,0,0.5)
| highlightd6=rgba(255,0,0,0.5)
| a2={{whiteCylinder}}
| a3={{whiteCylinder}}
| a4={{whiteCylinder}}
| a5={{whiteCylinder}}
| c4={{whiteCylinder}}
| a7={{whiteCylinder}}
| h2={{whiteCylinder}}
| h3={{whiteCylinder}}
| h4={{whiteCylinder}}
| h5={{whiteCylinder}}
| h6={{whiteCylinder}}
| h7={{whiteCylinder}}
| b1={{redCylinder}}
| c1={{redCylinder}}
| d1={{redCylinder}}
| e1={{redCylinder}}
| f1={{redCylinder}}
| g1={{redCylinder}}
| b8={{redCylinder}}
| c6={{redCylinder}}
| d8={{redCylinder}}
| e8={{redCylinder}}
| f8={{redCylinder}}
| g8={{redCylinder}}
}}
  </div>
</div>
<div style="display:grid; grid:repeat(2,auto)/min-content;">
  <div style="padding-left:1.5rem; padding-right:1.5rem;">
<b>A piece may jump over friendly pieces</b>
Red may continue with e8-b5, jumping their own piece. It moves three spaces because there are three pieces in the diagonal (a4-e8).
  </div><div style="align-self:end;">
{{chessboard | lightSquareColour=#b85 | darkSquareColour=#831
| highlighte8=rgba(0,255,0,0.5)
| highlightb5=rgba(0,255,0,0.5)
| a2={{whiteCylinder}}
| a3={{whiteCylinder}}
| a4={{whiteCylinder}}
| a5={{whiteCylinder}}
| c4={{whiteCylinder}}
| a7={{whiteCylinder}}
| h2={{whiteCylinder}}
| h3={{whiteCylinder}}
| h4={{whiteCylinder}}
| h5={{whiteCylinder}}
| h6={{whiteCylinder}}
| h7={{whiteCylinder}}
| b1={{redCylinder}}
| c1={{redCylinder}}
| d1={{redCylinder}}
| e1={{redCylinder}}
| f1={{redCylinder}}
| g1={{redCylinder}}
| b8={{redCylinder}}
| c6={{redCylinder}}
| d8={{redCylinder}}
| b5={{redCylinder}}
| f8={{redCylinder}}
| g8={{redCylinder}}
}}
  </div>
</div>
<div style="display:grid; grid:repeat(2,auto)/min-content;">
  <div style="padding-left:1.5rem; padding-right:1.5rem;">
<b>A piece may capture an enemy piece</b>
For example, White may play h3-f1, capturing the red piece on f1.
  </div><div style="align-self:end;">
{{chessboard | lightSquareColour=#b85 | darkSquareColour=#831
| highlighth3=rgba(0,255,0,0.5)
| highlightf1=rgba(0,255,0,0.5)
| a2={{whiteCylinder}}
| a3={{whiteCylinder}}
| a4={{whiteCylinder}}
| a5={{whiteCylinder}}
| c4={{whiteCylinder}}
| a7={{whiteCylinder}}
| h2={{whiteCylinder}}
| f1={{whiteCylinder}}
| h4={{whiteCylinder}}
| h5={{whiteCylinder}}
| h6={{whiteCylinder}}
| h7={{whiteCylinder}}
| b1={{redCylinder}}
| c1={{redCylinder}}
| d1={{redCylinder}}
| e1={{redCylinder}}
| g1={{redCylinder}}
| b8={{redCylinder}}
| c6={{redCylinder}}
| d8={{redCylinder}}
| b5={{redCylinder}}
| f8={{redCylinder}}
| g8={{redCylinder}}
}}
  </div>
</div>
</div>
<pre>
<div style="display:flex; flex-flow:row wrap; gap:1rem;">
<div style="display:grid; grid:repeat(2,auto)/min-content;">
  <div style="padding-left:1.5rem; padding-right:1.5rem;">
<b>A piece may not jump over an enemy piece</b>
White cannot play a6-d6, even though there are three pieces in row 6. White might instead play a6-c4, moving two spaces because there are two pieces in the diagonal (a6-f1).
  </div><div style="align-self:end;">
{{chessboard | lightSquareColour=#b85 | darkSquareColour=#831
| highlighta6=rgba(0,255,0,0.5)
| highlightc4=rgba(0,255,0,0.5)
| highlightd6=rgba(255,0,0,0.5)
| a2={{whiteCylinder}}
| a3={{whiteCylinder}}
| a4={{whiteCylinder}}
| a5={{whiteCylinder}}
| c4={{whiteCylinder}}
| a7={{whiteCylinder}}
| h2={{whiteCylinder}}
| h3={{whiteCylinder}}
| h4={{whiteCylinder}}
| h5={{whiteCylinder}}
| h6={{whiteCylinder}}
| h7={{whiteCylinder}}
| b1={{redCylinder}}
| c1={{redCylinder}}
| d1={{redCylinder}}
| e1={{redCylinder}}
| f1={{redCylinder}}
| g1={{redCylinder}}
| b8={{redCylinder}}
| c6={{redCylinder}}
| d8={{redCylinder}}
| e8={{redCylinder}}
| f8={{redCylinder}}
| g8={{redCylinder}}
}}
  </div>
</div>
<div style="display:grid; grid:repeat(2,auto)/min-content;">
  <div style="padding-left:1.5rem; padding-right:1.5rem;">
<b>A piece may jump over friendly pieces</b>
Red may continue with e8-b5, jumping their own piece. It moves three spaces because there are three pieces in the diagonal (a4-e8).
  </div><div style="align-self:end;">
{{chessboard | lightSquareColour=#b85 | darkSquareColour=#831
| highlighte8=rgba(0,255,0,0.5)
| highlightb5=rgba(0,255,0,0.5)
| a2={{whiteCylinder}}
| a3={{whiteCylinder}}
| a4={{whiteCylinder}}
| a5={{whiteCylinder}}
| c4={{whiteCylinder}}
| a7={{whiteCylinder}}
| h2={{whiteCylinder}}
| h3={{whiteCylinder}}
| h4={{whiteCylinder}}
| h5={{whiteCylinder}}
| h6={{whiteCylinder}}
| h7={{whiteCylinder}}
| b1={{redCylinder}}
| c1={{redCylinder}}
| d1={{redCylinder}}
| e1={{redCylinder}}
| f1={{redCylinder}}
| g1={{redCylinder}}
| b8={{redCylinder}}
| c6={{redCylinder}}
| d8={{redCylinder}}
| b5={{redCylinder}}
| f8={{redCylinder}}
| g8={{redCylinder}}
}}
  </div>
</div>
<div style="display:grid; grid:repeat(2,auto)/min-content;">
  <div style="padding-left:1.5rem; padding-right:1.5rem;">
<b>A piece may capture an enemy piece</b>
For example, White may play h3-f1, capturing the red piece on f1.
  </div><div style="align-self:end;">
{{chessboard | lightSquareColour=#b85 | darkSquareColour=#831
| highlighth3=rgba(0,255,0,0.5)
| highlightf1=rgba(0,255,0,0.5)
| a2={{whiteCylinder}}
| a3={{whiteCylinder}}
| a4={{whiteCylinder}}
| a5={{whiteCylinder}}
| c4={{whiteCylinder}}
| a7={{whiteCylinder}}
| h2={{whiteCylinder}}
| f1={{whiteCylinder}}
| h4={{whiteCylinder}}
| h5={{whiteCylinder}}
| h6={{whiteCylinder}}
| h7={{whiteCylinder}}
| b1={{redCylinder}}
| c1={{redCylinder}}
| d1={{redCylinder}}
| e1={{redCylinder}}
| g1={{redCylinder}}
| b8={{redCylinder}}
| c6={{redCylinder}}
| d8={{redCylinder}}
| b5={{redCylinder}}
| f8={{redCylinder}}
| g8={{redCylinder}}
}}
  </div>
</div>
</div>
</pre>
[[Category:GameBoardTemplates|Game board templates]]
</noinclude>
</noinclude>

Latest revision as of 23:50, 21 December 2021

Basic {{chessboard}} template

A
B
C
D
E
F
G
H
8
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
8
7
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
7
6
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
6
5
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
5
4
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
4
3
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
3
2
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
2
1
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
1
A
B
C
D
E
F
G
H

To insert this chessboard template into a BGA wiki page, simply type {{chessboard}} when editing the page, or alternatively copy one of the examples below.

Note: Game Help pages (e.g. 'GameHelpChess') also display on BGA's Rules Summary pages e.g. https://boardgamearena.com/gamepanel?game=chess under HOW TO PLAY? > See More > RULES SUMMARY

Empty board template

{{chessboard
| a8= | b8= | c8= | d8= | e8= | f8= | g8= | h8= 
| a7= | b7= | c7= | d7= | e7= | f7= | g7= | h7= 
| a6= | b6= | c6= | d6= | e6= | f6= | g6= | h6= 
| a5= | b5= | c5= | d5= | e5= | f5= | g5= | h5= 
| a4= | b4= | c4= | d4= | e4= | f4= | g4= | h4= 
| a3= | b3= | c3= | d3= | e3= | f3= | g3= | h3= 
| a2= | b2= | c2= | d2= | e2= | f2= | g2= | h2= 
| a1= | b1= | c1= | d1= | e1= | f1= | g1= | h1= 
}}

Available parameters

Parameter
Default value
Example
Description
a8
{{emptySquare}}
{{chessboard | a8={{BlackRook}}}}
Optional: place an image in any square using [letter][digit]=[[File:ImageFileName|Image Tooltip]] or [letter][digit]={{templateName}} where [letter][digit] is the algebraic coordinate
Upload your game piece image here
highlighta8
null
{{chessboard | highlighta8=red}}
Optional: highlight any square using highlight[letter][digit]=[string] where [string] is any valid style="background:[string];" e.g. blue or rgba(0,0,255,0.5) for semi-transparency
squareSize
46
{{chessboard | squareSize=50}}
Optional: specify the square dimensions in px units
lightSquareColour
#fff (white)
{{chessboard | lightSquareColour=lightgreen}}
Optional: specify the light square colour as [string] where [string] is any valid style="background:[string];"
darkSquareColour
#ddd (grey)
{{chessboard | darkSquareColour=darkblue}}
Optional: specify the dark square colour as [string] where [string] is any valid style="background:[string];"
borderThickness
2
{{chessboard | borderThickness=3}}
Optional: specify the border thickness in px units
cornerRadius
8
{{chessboard | cornerRadius=10}}
Optional: specify the corner radius in px units
hideNotation
[A-H]/[1-8]
{{chessboard | hideNotation=}}
Optional: hide algebraic notation
gridlineThickness
0
{{chessboard | gridlineThickness=2}}
Optional: specify the gridline thickness in px units
gridColour
null
{{chessboard | gridColour=black}}
Optional: specify the grid colour as [string] where [string] is any valid style="background:[string];"

Examples

Chess

A
B
C
D
E
F
G
H
8
Rook
Knight
Bishop
Queen
King
Bishop
Knight
Rook
8
7
Pawn
Pawn
Pawn
Pawn
Pawn
Pawn
Pawn
Pawn
7
6
6
5
5
4
4
3
3
2
Pawn
Pawn
Pawn
Pawn
Pawn
Pawn
Pawn
Pawn
2
1
Rook
Knight
Bishop
Queen
King
Bishop
Knight
Rook
1
A
B
C
D
E
F
G
H
{{chessboard | lightSquareColour=#efe | darkSquareColour=#cdc
| a8={{blackRook}}  | b8={{blackKnight}}| c8={{blackBishop}}| d8={{blackQueen}} | e8={{blackKing}}  | f8={{blackBishop}}| g8={{blackKnight}}| h8={{blackRook}}
| a7={{blackPawn}}  | b7={{blackPawn}}  | c7={{blackPawn}}  | d7={{blackPawn}}  | e7={{blackPawn}}  | f7={{blackPawn}}  | g7={{blackPawn}}  | h7={{blackPawn}}
| a6=               | b6=               | c6=               | d6=               | e6=               | f6=               | g6=               | h6=               
| a5=               | b5=               | c5=               | d5=               | e5=               | f5=               | g5=               | h5=               
| a4=               | b4=               | c4=               | d4=               | e4=               | f4=               | g4=               | h4=               
| a3=               | b3=               | c3=               | d3=               | e3=               | f3=               | g3=               | h3=               
| a2={{whitePawn}}  | b2={{whitePawn}}  | c2={{whitePawn}}  | d2={{whitePawn}}  | e2={{whitePawn}}  | f2={{whitePawn}}  | g2={{whitePawn}}  | h2={{whitePawn}}
| a1={{whiteRook}}  | b1={{whiteKnight}}| c1={{whiteBishop}}| d1={{whiteQueen}} | e1={{whiteKing}}  | f1={{whiteBishop}}| g1={{whiteKnight}}| h1={{whiteRook}}
}}

Draughts / Checkers

Empty Square
Empty Square
Empty Square
King
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Man
Empty Square
Man
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
King
Empty Square
Empty Square
Empty Square
King
Empty Square
Empty Square
Empty Square
Empty Square
King
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
King
Empty Square
Empty Square
Empty Square


Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
King
Empty Square
Empty Square
Empty Square
Empty Square
Man
Empty Square
Man
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
King
Empty Square
Empty Square
Empty Square
King
Empty Square
Empty Square
Empty Square
Empty Square
King
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
King
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square


Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
King
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
King
Empty Square
Empty Square
Empty Square
King
Empty Square
Empty Square
Empty Square
Empty Square
King
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
King
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
<div style="display:flex; flex-flow:row wrap; gap:0.5rem;">
{{chessboard | hideNotation= | squareSize=50 | lightSquareColour=#eed | darkSquareColour=#5a5

| d8={{whiteDraughtsKing}}
| highlightd8=gold
| highlightc7=blue
| highlighte7=blue

| b4={{whiteDraughtsMan}}
| f4={{whiteDraughtsMan}}
| c3={{whiteDraughtsMan}}

| b6={{blackDraughtsMan}}
| d6={{blackDraughtsMan}}
| e1={{blackDraughtsKing}}
}}
{{chessboard | hideNotation= | squareSize=50 | lightSquareColour=#eed | darkSquareColour=#5a5 

| e7={{whiteDraughtsKing}}
| highlighte7=gold
| highlightd6=red
| highlightc5=blue
| highlightb6=red
| highlighta7=blue

| b4={{whiteDraughtsMan}}
| f4={{whiteDraughtsMan}}
| c3={{whiteDraughtsMan}}

| b6={{blackDraughtsMan}}
| d6={{blackDraughtsMan}}
| f2={{blackDraughtsKing}}
}}
{{chessboard | hideNotation= | squareSize=50 | lightSquareColour=#eed | darkSquareColour=#5a5 

| a7={{whiteDraughtsKing}}
| highlighte7=gold
| highlightd6=red
| highlightc5=blue
| highlightb6=red
| highlighta7=blue

| b4={{whiteDraughtsMan}}
| f4={{whiteDraughtsMan}}
| c3={{whiteDraughtsMan}}

| f2={{blackDraughtsKing}}
}}
</div>

Othello / Reversi

Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square


Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square


Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
<div style="display:flex; flex-flow:row wrap; gap:0.25rem;">
{{chessboard | hideNotation= | squareSize=54 | lightSquareColour=darkgreen | darkSquareColour=darkgreen | cornerRadius=4 | gridlineThickness=2 | gridColour=black

| highlightc5=rgba(255,255,255,0.25)
| highlightd6=rgba(255,255,255,0.25)
| highlighte3=rgba(255,255,255,0.25)
| highlightf4=rgba(255,255,255,0.25)

| d4={{blackReversiToken}}
| e5={{blackReversiToken}}

| e4={{whiteReversiToken}}
| d5={{whiteReversiToken}}
}}
{{chessboard | hideNotation= | squareSize=54 | lightSquareColour=darkgreen | darkSquareColour=darkgreen | cornerRadius=4 | gridlineThickness=2 | gridColour=black

| d4={{blackReversiToken}}
| e5={{blackReversiToken}}
| e4={{blackReversiToken}}
| f4={{blackReversiToken}}

| d5={{whiteReversiToken}}
}}
{{chessboard | hideNotation= | squareSize=54 | lightSquareColour=darkgreen | darkSquareColour=darkgreen | cornerRadius=4 | gridlineThickness=2 | gridColour=black

| highlightc5=rgba(255,255,255,0.25)
| highlightd6=rgba(255,255,255,0.25)
| highlighte3=rgba(255,255,255,0.25)
| highlightf2=rgba(255,255,255,0.25)

| d4={{blackReversiToken}}
| e5={{blackReversiToken}}
| f4={{blackReversiToken}}

| d5={{whiteReversiToken}}
| e4={{whiteReversiToken}}
| f3={{whiteReversiToken}}
}}
</div>

Lines of Action (LOA)

A piece may not jump over an enemy piece

White cannot play a6-d6, even though there are three pieces in row 6. White might instead play a6-c4, moving two spaces because there are two pieces in the diagonal (a6-f1).

A
B
C
D
E
F
G
H
8
Empty Square
red token
Empty Square
red token
red token
red token
red token
Empty Square
8
7
white token
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
white token
7
6
Empty Square
Empty Square
red token
Empty Square
Empty Square
Empty Square
Empty Square
white token
6
5
white token
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
white token
5
4
white token
Empty Square
white token
Empty Square
Empty Square
Empty Square
Empty Square
white token
4
3
white token
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
white token
3
2
white token
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
white token
2
1
Empty Square
red token
red token
red token
red token
red token
red token
Empty Square
1
A
B
C
D
E
F
G
H

A piece may jump over friendly pieces

Red may continue with e8-b5, jumping their own piece. It moves three spaces because there are three pieces in the diagonal (a4-e8).

A
B
C
D
E
F
G
H
8
Empty Square
red token
Empty Square
red token
Empty Square
red token
red token
Empty Square
8
7
white token
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
white token
7
6
Empty Square
Empty Square
red token
Empty Square
Empty Square
Empty Square
Empty Square
white token
6
5
white token
red token
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
white token
5
4
white token
Empty Square
white token
Empty Square
Empty Square
Empty Square
Empty Square
white token
4
3
white token
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
white token
3
2
white token
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
white token
2
1
Empty Square
red token
red token
red token
red token
red token
red token
Empty Square
1
A
B
C
D
E
F
G
H

A piece may capture an enemy piece

For example, White may play h3-f1, capturing the red piece on f1.

A
B
C
D
E
F
G
H
8
Empty Square
red token
Empty Square
red token
Empty Square
red token
red token
Empty Square
8
7
white token
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
white token
7
6
Empty Square
Empty Square
red token
Empty Square
Empty Square
Empty Square
Empty Square
white token
6
5
white token
red token
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
white token
5
4
white token
Empty Square
white token
Empty Square
Empty Square
Empty Square
Empty Square
white token
4
3
white token
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
3
2
white token
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
Empty Square
white token
2
1
Empty Square
red token
red token
red token
red token
white token
red token
Empty Square
1
A
B
C
D
E
F
G
H
<div style="display:flex; flex-flow:row wrap; gap:1rem;">
 <div style="display:grid; grid:repeat(2,auto)/min-content;">
  <div style="padding-left:1.5rem; padding-right:1.5rem;">
<b>A piece may not jump over an enemy piece</b>

White cannot play a6-d6, even though there are three pieces in row 6. White might instead play a6-c4, moving two spaces because there are two pieces in the diagonal (a6-f1).
  </div><div style="align-self:end;">
{{chessboard | lightSquareColour=#b85 | darkSquareColour=#831

| highlighta6=rgba(0,255,0,0.5)
| highlightc4=rgba(0,255,0,0.5)
| highlightd6=rgba(255,0,0,0.5)

| a2={{whiteCylinder}}
| a3={{whiteCylinder}}
| a4={{whiteCylinder}}
| a5={{whiteCylinder}}
| c4={{whiteCylinder}}
| a7={{whiteCylinder}}

| h2={{whiteCylinder}}
| h3={{whiteCylinder}}
| h4={{whiteCylinder}}
| h5={{whiteCylinder}}
| h6={{whiteCylinder}}
| h7={{whiteCylinder}}

| b1={{redCylinder}}
| c1={{redCylinder}}
| d1={{redCylinder}}
| e1={{redCylinder}}
| f1={{redCylinder}}
| g1={{redCylinder}}

| b8={{redCylinder}}
| c6={{redCylinder}}
| d8={{redCylinder}}
| e8={{redCylinder}}
| f8={{redCylinder}}
| g8={{redCylinder}}
}}
  </div>
 </div>
 <div style="display:grid; grid:repeat(2,auto)/min-content;">
  <div style="padding-left:1.5rem; padding-right:1.5rem;">
<b>A piece may jump over friendly pieces</b>

Red may continue with e8-b5, jumping their own piece. It moves three spaces because there are three pieces in the diagonal (a4-e8).
  </div><div style="align-self:end;">
{{chessboard | lightSquareColour=#b85 | darkSquareColour=#831

| highlighte8=rgba(0,255,0,0.5)
| highlightb5=rgba(0,255,0,0.5)

| a2={{whiteCylinder}}
| a3={{whiteCylinder}}
| a4={{whiteCylinder}}
| a5={{whiteCylinder}}
| c4={{whiteCylinder}}
| a7={{whiteCylinder}}

| h2={{whiteCylinder}}
| h3={{whiteCylinder}}
| h4={{whiteCylinder}}
| h5={{whiteCylinder}}
| h6={{whiteCylinder}}
| h7={{whiteCylinder}}

| b1={{redCylinder}}
| c1={{redCylinder}}
| d1={{redCylinder}}
| e1={{redCylinder}}
| f1={{redCylinder}}
| g1={{redCylinder}}

| b8={{redCylinder}}
| c6={{redCylinder}}
| d8={{redCylinder}}
| b5={{redCylinder}}
| f8={{redCylinder}}
| g8={{redCylinder}}
}}
  </div>
 </div>
 <div style="display:grid; grid:repeat(2,auto)/min-content;">
  <div style="padding-left:1.5rem; padding-right:1.5rem;">
<b>A piece may capture an enemy piece</b>

For example, White may play h3-f1, capturing the red piece on f1.
  </div><div style="align-self:end;">
{{chessboard | lightSquareColour=#b85 | darkSquareColour=#831

| highlighth3=rgba(0,255,0,0.5)
| highlightf1=rgba(0,255,0,0.5)

| a2={{whiteCylinder}}
| a3={{whiteCylinder}}
| a4={{whiteCylinder}}
| a5={{whiteCylinder}}
| c4={{whiteCylinder}}
| a7={{whiteCylinder}}

| h2={{whiteCylinder}}
| f1={{whiteCylinder}}
| h4={{whiteCylinder}}
| h5={{whiteCylinder}}
| h6={{whiteCylinder}}
| h7={{whiteCylinder}}

| b1={{redCylinder}}
| c1={{redCylinder}}
| d1={{redCylinder}}
| e1={{redCylinder}}
| g1={{redCylinder}}

| b8={{redCylinder}}
| c6={{redCylinder}}
| d8={{redCylinder}}
| b5={{redCylinder}}
| f8={{redCylinder}}
| g8={{redCylinder}}
}}
  </div>
 </div>
</div>