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

Template:Goboard9: Difference between revisions

From Board Game Arena
Jump to navigation Jump to search
m (reduced squareSize)
(simplifications: border-radius, examples)
 
(5 intermediate revisions by the same user not shown)
Line 2: Line 2:
== Basic <nowiki>{{goboard}}</nowiki> template ==
== Basic <nowiki>{{goboard}}</nowiki> template ==
</noinclude>
</noinclude>
<div class="notation grid" style="
<div class="notation grid" style="display:grid;
display:grid;
grid:{{{hideNotation|1.5rem}}} repeat({{{boardSize|9}}},{{{squareSize|30}}}px) {{{hideNotation|1.5rem}}} / {{{hideNotation|1.5rem}}} repeat({{{boardSize|9}}},{{{squareSize|30}}}px) {{{hideNotation|1.5rem}}};
grid:{{{hideNotation|1.5rem}}} repeat({{{boardSize|9}}},{{{squareSize|36}}}px) {{{hideNotation|1.5rem}}} / {{{hideNotation|1.5rem}}} repeat({{{boardSize|9}}},{{{squareSize|36}}}px) {{{hideNotation|1.5rem}}};
gap:{{{gridlineThickness|1}}}px;
gap:{{{gridlineThickness|1}}}px;
position:relative;">
position:relative;">
 
<div class="board background" style="background:{{{boardColour|#e5c079}}};
<div class="board background" style="
width:100%;height:100%;
background:{{{boardColour|#e5c079}}};
z-index:-3;
width:100%;
height:100%;
grid-area:1 / 1 / -1 / -1;
grid-area:1 / 1 / -1 / -1;
position:absolute;
position:absolute;
border-radius:{{{cornerRadius|8}}}px;"></div>
border-radius:{{{cornerRadius|8}}}px;"></div>
 
<div class="grid" style="display:grid;
<div class="grid" style="
grid:repeat(calc({{{boardSize|9}}} - 1),{{{squareSize|30}}}px) / repeat(calc({{{boardSize|9}}} - 1),{{{squareSize|30}}}px);
display:grid;
grid:repeat(calc({{{boardSize|9}}} - 1),{{{squareSize|36}}}px) / repeat(calc({{{boardSize|9}}} - 1),{{{squareSize|36}}}px);
gap:{{{gridlineThickness|1}}}px;
gap:{{{gridlineThickness|1}}}px;
z-index:-1;
left:calc(({{{squareSize|30}}}px / 2) + ({{{gridlineThickness|1}}}px / 2));
left:calc(({{{squareSize|36}}}px / 2) + ({{{gridlineThickness|1}}}px / 2));
top :calc(({{{squareSize|30}}}px / 2) + ({{{gridlineThickness|1}}}px / 2));
top :calc(({{{squareSize|36}}}px / 2) + ({{{gridlineThickness|1}}}px / 2));
grid-area:calc({{{hideNotation|1 + }}}1) / calc({{{hideNotation|1 + }}}1) / calc(-1{{{hideNotation| - 1}}}) / calc(-1{{{hideNotation| - 1}}});
grid-area:calc({{{hideNotation|1 + }}}1) / calc({{{hideNotation|1 + }}}1) / calc(-1{{{hideNotation| - 1}}}) / calc(-1{{{hideNotation| - 1}}});
position:absolute;">
position:absolute;">
Line 92: Line 84:
</div>{{{hideNotation|
</div>{{{hideNotation|
<div></div>
<div></div>
<div style="align-self:end;text-align:center;">A</div>
<div style="align-self:end;text-align:center;z-index:1;">A</div>
<div style="align-self:end;text-align:center;">B</div>
<div style="align-self:end;text-align:center;z-index:1;">B</div>
<div style="align-self:end;text-align:center;">C</div>
<div style="align-self:end;text-align:center;z-index:1;">C</div>
<div style="align-self:end;text-align:center;">D</div>
<div style="align-self:end;text-align:center;z-index:1;">D</div>
<div style="align-self:end;text-align:center;">E</div>
<div style="align-self:end;text-align:center;z-index:1;">E</div>
<div style="align-self:end;text-align:center;">F</div>
<div style="align-self:end;text-align:center;z-index:1;">F</div>
<div style="align-self:end;text-align:center;">G</div>
<div style="align-self:end;text-align:center;z-index:1;">G</div>
<div style="align-self:end;text-align:center;">H</div>
<div style="align-self:end;text-align:center;z-index:1;">H</div>
<div style="align-self:end;text-align:center;">J</div>
<div style="align-self:end;text-align:center;z-index:1;">J</div>
<div></div>
<div></div>
<div style="align-self:center;text-align:right;padding-right:4px;">9</div>}}}
<div style="align-self:center;text-align:right;z-index:1;padding-right:4px;">9</div>}}}
<div style="display:grid;">
<div style="display:grid;">
  <div style="display:grid;place-items:center;border-radius:calc({{{squareSize|36}}}px / 2);outline-offset:-5px;outline:solid {{{highlighta9|}}}px;position:relative;">
  <div style="display:grid;place-items:center;border-radius:50%;outline-offset:-5px;outline:solid {{{highlighta9|}}}px;position:relative;">
   <div style="position:absolute;">{{{a9|}}}</div>
   <div style="position:absolute;">{{{a9|}}}</div>
  </div>
  </div>
</div>
</div>
<div style="display:grid;">
<div style="display:grid;">
  <div style="display:grid;place-items:center;border-radius:calc({{{squareSize|36}}}px / 2);outline-offset:-5px;outline:solid {{{highlightb9|}}}px;position:relative;">
  <div style="display:grid;place-items:center;border-radius:50%;outline-offset:-5px;outline:solid {{{highlightb9|}}}px;position:relative;">
   <div style="position:absolute;">{{{b9|}}}</div>
   <div style="position:absolute;">{{{b9|}}}</div>
  </div>
  </div>
</div>
</div>
<div style="display:grid;">
<div style="display:grid;">
  <div style="display:grid;place-items:center;border-radius:calc({{{squareSize|36}}}px / 2);outline-offset:-5px;outline:solid {{{highlightc9|}}}px;position:relative;">
  <div style="display:grid;place-items:center;border-radius:50%;outline-offset:-5px;outline:solid {{{highlightc9|}}}px;position:relative;">
   <div style="position:absolute;">{{{c9|}}}</div>
   <div style="position:absolute;">{{{c9|}}}</div>
  </div>
  </div>
</div>
</div>
<div style="display:grid;">
<div style="display:grid;">
  <div style="display:grid;place-items:center;border-radius:calc({{{squareSize|36}}}px / 2);outline-offset:-5px;outline:solid {{{highlightd9|}}}px;position:relative;">
  <div style="display:grid;place-items:center;border-radius:50%;outline-offset:-5px;outline:solid {{{highlightd9|}}}px;position:relative;">
   <div style="position:absolute;">{{{d9|}}}</div>
   <div style="position:absolute;">{{{d9|}}}</div>
  </div>
  </div>
</div>
</div>
<div style="display:grid;">
<div style="display:grid;">
  <div style="display:grid;place-items:center;border-radius:calc({{{squareSize|36}}}px / 2);outline-offset:-5px;outline:solid {{{highlighte9|}}}px;position:relative;">
  <div style="display:grid;place-items:center;border-radius:50%;outline-offset:-5px;outline:solid {{{highlighte9|}}}px;position:relative;">
   <div style="position:absolute;">{{{e9|}}}</div>
   <div style="position:absolute;">{{{e9|}}}</div>
  </div>
  </div>
</div>
</div>
<div style="display:grid;">
<div style="display:grid;">
  <div style="display:grid;place-items:center;border-radius:calc({{{squareSize|36}}}px / 2);outline-offset:-5px;outline:solid {{{highlightf9|}}}px;position:relative;">
  <div style="display:grid;place-items:center;border-radius:50%;outline-offset:-5px;outline:solid {{{highlightf9|}}}px;position:relative;">
   <div style="position:absolute;">{{{f9|}}}</div>
   <div style="position:absolute;">{{{f9|}}}</div>
  </div>
  </div>
</div>
</div>
<div style="display:grid;">
<div style="display:grid;">
  <div style="display:grid;place-items:center;border-radius:calc({{{squareSize|36}}}px / 2);outline-offset:-5px;outline:solid {{{highlightg9|}}}px;position:relative;">
  <div style="display:grid;place-items:center;border-radius:50%;outline-offset:-5px;outline:solid {{{highlightg9|}}}px;position:relative;">
   <div style="position:absolute;">{{{g9|}}}</div>
   <div style="position:absolute;">{{{g9|}}}</div>
  </div>
  </div>
</div>
</div>
<div style="display:grid;">
<div style="display:grid;">
  <div style="display:grid;place-items:center;border-radius:calc({{{squareSize|36}}}px / 2);outline-offset:-5px;outline:solid {{{highlighth9|}}}px;position:relative;">
  <div style="display:grid;place-items:center;border-radius:50%;outline-offset:-5px;outline:solid {{{highlighth9|}}}px;position:relative;">
   <div style="position:absolute;">{{{h9|}}}</div>
   <div style="position:absolute;">{{{h9|}}}</div>
  </div>
  </div>
</div>
</div>
<div style="display:grid;">
<div style="display:grid;">
  <div style="display:grid;place-items:center;border-radius:calc({{{squareSize|36}}}px / 2);outline-offset:-5px;outline:solid {{{highlightj9|}}}px;position:relative;">
  <div style="display:grid;place-items:center;border-radius:50%;outline-offset:-5px;outline:solid {{{highlightj9|}}}px;position:relative;">
   <div style="position:absolute;">{{{j9|}}}</div>
   <div style="position:absolute;">{{{j9|}}}</div>
  </div>
  </div>
</div>{{{hideNotation|<div style="align-self:center;text-align:left ;padding-left :4px;">9</div>
</div>{{{hideNotation|<div style="align-self:center;text-align:left ;z-index:1;padding-left :4px;">9</div>
<div style="align-self:center;text-align:right;padding-right:4px;">8</div>}}}
<div style="align-self:center;text-align:right;z-index:1;padding-right:4px;">8</div>}}}
<div style="display:grid;">
<div style="display:grid;">
  <div style="display:grid;place-items:center;border-radius:calc({{{squareSize|36}}}px / 2);outline-offset:-5px;outline:solid {{{highlighta8|}}}px;position:relative;">
  <div style="display:grid;place-items:center;border-radius:50%;outline-offset:-5px;outline:solid {{{highlighta8|}}}px;position:relative;">
   <div style="position:absolute;">{{{a8|}}}</div>
   <div style="position:absolute;">{{{a8|}}}</div>
  </div>
  </div>
</div>
</div>
<div style="display:grid;">
<div style="display:grid;">
  <div style="display:grid;place-items:center;border-radius:calc({{{squareSize|36}}}px / 2);outline-offset:-5px;outline:solid {{{highlightb8|}}}px;position:relative;">
  <div style="display:grid;place-items:center;border-radius:50%;outline-offset:-5px;outline:solid {{{highlightb8|}}}px;position:relative;">
   <div style="position:absolute;">{{{b8|}}}</div>
   <div style="position:absolute;">{{{b8|}}}</div>
  </div>
  </div>
</div>
</div>
<div style="display:grid;">
<div style="display:grid;">
  <div style="display:grid;place-items:center;border-radius:calc({{{squareSize|36}}}px / 2);outline-offset:-5px;outline:solid {{{highlightc8|}}}px;position:relative;">
  <div style="display:grid;place-items:center;border-radius:50%;outline-offset:-5px;outline:solid {{{highlightc8|}}}px;position:relative;">
   <div style="position:absolute;">{{{c8|}}}</div>
   <div style="position:absolute;">{{{c8|}}}</div>
  </div>
  </div>
</div>
</div>
<div style="display:grid;">
<div style="display:grid;">
  <div style="display:grid;place-items:center;border-radius:calc({{{squareSize|36}}}px / 2);outline-offset:-5px;outline:solid {{{highlightd8|}}}px;position:relative;">
  <div style="display:grid;place-items:center;border-radius:50%;outline-offset:-5px;outline:solid {{{highlightd8|}}}px;position:relative;">
   <div style="position:absolute;">{{{d8|}}}</div>
   <div style="position:absolute;">{{{d8|}}}</div>
  </div>
  </div>
</div>
</div>
<div style="display:grid;">
<div style="display:grid;">
  <div style="display:grid;place-items:center;border-radius:calc({{{squareSize|36}}}px / 2);outline-offset:-5px;outline:solid {{{highlighte8|}}}px;position:relative;">
  <div style="display:grid;place-items:center;border-radius:50%;outline-offset:-5px;outline:solid {{{highlighte8|}}}px;position:relative;">
   <div style="position:absolute;">{{{e8|}}}</div>
   <div style="position:absolute;">{{{e8|}}}</div>
  </div>
  </div>
</div>
</div>
<div style="display:grid;">
<div style="display:grid;">
  <div style="display:grid;place-items:center;border-radius:calc({{{squareSize|36}}}px / 2);outline-offset:-5px;outline:solid {{{highlightf8|}}}px;position:relative;">
  <div style="display:grid;place-items:center;border-radius:50%;outline-offset:-5px;outline:solid {{{highlightf8|}}}px;position:relative;">
   <div style="position:absolute;">{{{f8|}}}</div>
   <div style="position:absolute;">{{{f8|}}}</div>
  </div>
  </div>
</div>
</div>
<div style="display:grid;">
<div style="display:grid;">
  <div style="display:grid;place-items:center;border-radius:calc({{{squareSize|36}}}px / 2);outline-offset:-5px;outline:solid {{{highlightg8|}}}px;position:relative;">
  <div style="display:grid;place-items:center;border-radius:50%;outline-offset:-5px;outline:solid {{{highlightg8|}}}px;position:relative;">
   <div style="position:absolute;">{{{g8|}}}</div>
   <div style="position:absolute;">{{{g8|}}}</div>
  </div>
  </div>
</div>
</div>
<div style="display:grid;">
<div style="display:grid;">
  <div style="display:grid;place-items:center;border-radius:calc({{{squareSize|36}}}px / 2);outline-offset:-5px;outline:solid {{{highlighth8|}}}px;position:relative;">
  <div style="display:grid;place-items:center;border-radius:50%;outline-offset:-5px;outline:solid {{{highlighth8|}}}px;position:relative;">
   <div style="position:absolute;">{{{h8|}}}</div>
   <div style="position:absolute;">{{{h8|}}}</div>
  </div>
  </div>
</div>
</div>
<div style="display:grid;">
<div style="display:grid;">
  <div style="display:grid;place-items:center;border-radius:calc({{{squareSize|36}}}px / 2);outline-offset:-5px;outline:solid {{{highlightj8|}}}px;position:relative;">
  <div style="display:grid;place-items:center;border-radius:50%;outline-offset:-5px;outline:solid {{{highlightj8|}}}px;position:relative;">
   <div style="position:absolute;">{{{j8|}}}</div>
   <div style="position:absolute;">{{{j8|}}}</div>
  </div>
  </div>
</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 ;z-index:1;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;z-index:1;padding-right:4px;">7</div>}}}
<div style="display:grid;">
<div style="display:grid;">
  <div style="display:grid;place-items:center;border-radius:calc({{{squareSize|36}}}px / 2);outline-offset:-5px;outline:solid {{{highlighta7|}}}px;position:relative;">
  <div style="display:grid;place-items:center;border-radius:50%;outline-offset:-5px;outline:solid {{{highlighta7|}}}px;position:relative;">
   <div style="position:absolute;">{{{a7|}}}</div>
   <div style="position:absolute;">{{{a7|}}}</div>
  </div>
  </div>
</div>
</div>
<div style="display:grid;">
<div style="display:grid;">
  <div style="display:grid;place-items:center;border-radius:calc({{{squareSize|36}}}px / 2);outline-offset:-5px;outline:solid {{{highlightb7|}}}px;position:relative;">
  <div style="display:grid;place-items:center;border-radius:50%;outline-offset:-5px;outline:solid {{{highlightb7|}}}px;position:relative;">
   <div style="position:absolute;">{{{b7|}}}</div>
   <div style="position:absolute;">{{{b7|}}}</div>
  </div>
  </div>
</div>
</div>
<div style="display:grid;">
<div style="display:grid;">
  <div style="display:grid;place-items:center;border-radius:calc({{{squareSize|36}}}px / 2);outline-offset:-5px;outline:solid {{{highlightc7|}}}px;position:relative;">
  <div style="display:grid;place-items:center;border-radius:50%;outline-offset:-5px;outline:solid {{{highlightc7|}}}px;position:relative;">
   <div style="position:absolute;border-radius:calc({{{squareSize|36}}}px / 2);background:{{{gridColour|#000}}};width:{{{starSize|6}}}px;height:{{{starSize|6}}}px;"></div>
   <div style="position:absolute;border-radius:50%;background:{{{gridColour|#000}}};width:{{{starSize|6}}}px;height:{{{starSize|6}}}px;"></div>
   <div style="position:absolute;">{{{c7|}}}</div>
   <div style="position:absolute;">{{{c7|}}}</div>
  </div>
  </div>
</div>
</div>
<div style="display:grid;">
<div style="display:grid;">
  <div style="display:grid;place-items:center;border-radius:calc({{{squareSize|36}}}px / 2);outline-offset:-5px;outline:solid {{{highlightd7|}}}px;position:relative;">
  <div style="display:grid;place-items:center;border-radius:50%;outline-offset:-5px;outline:solid {{{highlightd7|}}}px;position:relative;">
   <div style="position:absolute;">{{{d7|}}}</div>
   <div style="position:absolute;">{{{d7|}}}</div>
  </div>
  </div>
</div>
</div>
<div style="display:grid;">
<div style="display:grid;">
  <div style="display:grid;place-items:center;border-radius:calc({{{squareSize|36}}}px / 2);outline-offset:-5px;outline:solid {{{highlighte7|}}}px;position:relative;">
  <div style="display:grid;place-items:center;border-radius:50%;outline-offset:-5px;outline:solid {{{highlighte7|}}}px;position:relative;">
   <div style="position:absolute;">{{{e7|}}}</div>
   <div style="position:absolute;">{{{e7|}}}</div>
  </div>
  </div>
</div>
</div>
<div style="display:grid;">
<div style="display:grid;">
  <div style="display:grid;place-items:center;border-radius:calc({{{squareSize|36}}}px / 2);outline-offset:-5px;outline:solid {{{highlightf7|}}}px;position:relative;">
  <div style="display:grid;place-items:center;border-radius:50%;outline-offset:-5px;outline:solid {{{highlightf7|}}}px;position:relative;">
   <div style="position:absolute;">{{{f7|}}}</div>
   <div style="position:absolute;">{{{f7|}}}</div>
  </div>
  </div>
</div>
</div>
<div style="display:grid;">
<div style="display:grid;">
  <div style="display:grid;place-items:center;border-radius:calc({{{squareSize|36}}}px / 2);outline-offset:-5px;outline:solid {{{highlightg7|}}}px;position:relative;">
  <div style="display:grid;place-items:center;border-radius:50%;outline-offset:-5px;outline:solid {{{highlightg7|}}}px;position:relative;">
   <div style="position:absolute;border-radius:calc({{{squareSize|36}}}px / 2);background:{{{gridColour|#000}}};width:{{{starSize|6}}}px;height:{{{starSize|6}}}px;"></div>
   <div style="position:absolute;border-radius:50%;background:{{{gridColour|#000}}};width:{{{starSize|6}}}px;height:{{{starSize|6}}}px;"></div>
   <div style="position:absolute;">{{{g7|}}}</div>
   <div style="position:absolute;">{{{g7|}}}</div>
  </div>
  </div>
</div>
</div>
<div style="display:grid;">
<div style="display:grid;">
  <div style="display:grid;place-items:center;border-radius:calc({{{squareSize|36}}}px / 2);outline-offset:-5px;outline:solid {{{highlighth7|}}}px;position:relative;">
  <div style="display:grid;place-items:center;border-radius:50%;outline-offset:-5px;outline:solid {{{highlighth7|}}}px;position:relative;">
   <div style="position:absolute;">{{{h7|}}}</div>
   <div style="position:absolute;">{{{h7|}}}</div>
  </div>
  </div>
</div>
</div>
<div style="display:grid;">
<div style="display:grid;">
  <div style="display:grid;place-items:center;border-radius:calc({{{squareSize|36}}}px / 2);outline-offset:-5px;outline:solid {{{highlightj7|}}}px;position:relative;">
  <div style="display:grid;place-items:center;border-radius:50%;outline-offset:-5px;outline:solid {{{highlightj7|}}}px;position:relative;">
   <div style="position:absolute;">{{{j7|}}}</div>
   <div style="position:absolute;">{{{j7|}}}</div>
  </div>
  </div>
</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 ;z-index:1;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;z-index:1;padding-right:4px;">6</div>}}}
<div style="display:grid;">
<div style="display:grid;">
  <div style="display:grid;place-items:center;border-radius:calc({{{squareSize|36}}}px / 2);outline-offset:-5px;outline:solid {{{highlighta6|}}}px;position:relative;">
  <div style="display:grid;place-items:center;border-radius:50%;outline-offset:-5px;outline:solid {{{highlighta6|}}}px;position:relative;">
   <div style="position:absolute;">{{{a6|}}}</div>
   <div style="position:absolute;">{{{a6|}}}</div>
  </div>
  </div>
</div>
</div>
<div style="display:grid;">
<div style="display:grid;">
  <div style="display:grid;place-items:center;border-radius:calc({{{squareSize|36}}}px / 2);outline-offset:-5px;outline:solid {{{highlightb6|}}}px;position:relative;">
  <div style="display:grid;place-items:center;border-radius:50%;outline-offset:-5px;outline:solid {{{highlightb6|}}}px;position:relative;">
   <div style="position:absolute;">{{{b6|}}}</div>
   <div style="position:absolute;">{{{b6|}}}</div>
  </div>
  </div>
</div>
</div>
<div style="display:grid;">
<div style="display:grid;">
  <div style="display:grid;place-items:center;border-radius:calc({{{squareSize|36}}}px / 2);outline-offset:-5px;outline:solid {{{highlightc6|}}}px;position:relative;">
  <div style="display:grid;place-items:center;border-radius:50%;outline-offset:-5px;outline:solid {{{highlightc6|}}}px;position:relative;">
   <div style="position:absolute;">{{{c6|}}}</div>
   <div style="position:absolute;">{{{c6|}}}</div>
  </div>
  </div>
</div>
</div>
<div style="display:grid;">
<div style="display:grid;">
  <div style="display:grid;place-items:center;border-radius:calc({{{squareSize|36}}}px / 2);outline-offset:-5px;outline:solid {{{highlightd6|}}}px;position:relative;">
  <div style="display:grid;place-items:center;border-radius:50%;outline-offset:-5px;outline:solid {{{highlightd6|}}}px;position:relative;">
   <div style="position:absolute;">{{{d6|}}}</div>
   <div style="position:absolute;">{{{d6|}}}</div>
  </div>
  </div>
</div>
</div>
<div style="display:grid;">
<div style="display:grid;">
  <div style="display:grid;place-items:center;border-radius:calc({{{squareSize|36}}}px / 2);outline-offset:-5px;outline:solid {{{highlighte6|}}}px;position:relative;">
  <div style="display:grid;place-items:center;border-radius:50%;outline-offset:-5px;outline:solid {{{highlighte6|}}}px;position:relative;">
   <div style="position:absolute;">{{{e6|}}}</div>
   <div style="position:absolute;">{{{e6|}}}</div>
  </div>
  </div>
</div>
</div>
<div style="display:grid;">
<div style="display:grid;">
  <div style="display:grid;place-items:center;border-radius:calc({{{squareSize|36}}}px / 2);outline-offset:-5px;outline:solid {{{highlightf6|}}}px;position:relative;">
  <div style="display:grid;place-items:center;border-radius:50%;outline-offset:-5px;outline:solid {{{highlightf6|}}}px;position:relative;">
   <div style="position:absolute;">{{{f6|}}}</div>
   <div style="position:absolute;">{{{f6|}}}</div>
  </div>
  </div>
</div>
</div>
<div style="display:grid;">
<div style="display:grid;">
  <div style="display:grid;place-items:center;border-radius:calc({{{squareSize|36}}}px / 2);outline-offset:-5px;outline:solid {{{highlightg6|}}}px;position:relative;">
  <div style="display:grid;place-items:center;border-radius:50%;outline-offset:-5px;outline:solid {{{highlightg6|}}}px;position:relative;">
   <div style="position:absolute;">{{{g6|}}}</div>
   <div style="position:absolute;">{{{g6|}}}</div>
  </div>
  </div>
</div>
</div>
<div style="display:grid;">
<div style="display:grid;">
  <div style="display:grid;place-items:center;border-radius:calc({{{squareSize|36}}}px / 2);outline-offset:-5px;outline:solid {{{highlighth6|}}}px;position:relative;">
  <div style="display:grid;place-items:center;border-radius:50%;outline-offset:-5px;outline:solid {{{highlighth6|}}}px;position:relative;">
   <div style="position:absolute;">{{{h6|}}}</div>
   <div style="position:absolute;">{{{h6|}}}</div>
  </div>
  </div>
</div>
</div>
<div style="display:grid;">
<div style="display:grid;">
  <div style="display:grid;place-items:center;border-radius:calc({{{squareSize|36}}}px / 2);outline-offset:-5px;outline:solid {{{highlightj6|}}}px;position:relative;">
  <div style="display:grid;place-items:center;border-radius:50%;outline-offset:-5px;outline:solid {{{highlightj6|}}}px;position:relative;">
   <div style="position:absolute;">{{{j6|}}}</div>
   <div style="position:absolute;">{{{j6|}}}</div>
  </div>
  </div>
</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 ;z-index:1;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;z-index:1;padding-right:4px;">5</div>}}}
<div style="display:grid;">
<div style="display:grid;">
  <div style="display:grid;place-items:center;border-radius:calc({{{squareSize|36}}}px / 2);outline-offset:-5px;outline:solid {{{highlighta5|}}}px;position:relative;">
  <div style="display:grid;place-items:center;border-radius:50%;outline-offset:-5px;outline:solid {{{highlighta5|}}}px;position:relative;">
   <div style="position:absolute;">{{{a5|}}}</div>
   <div style="position:absolute;">{{{a5|}}}</div>
  </div>
  </div>
</div>
</div>
<div style="display:grid;">
<div style="display:grid;">
  <div style="display:grid;place-items:center;border-radius:calc({{{squareSize|36}}}px / 2);outline-offset:-5px;outline:solid {{{highlightb5|}}}px;position:relative;">
  <div style="display:grid;place-items:center;border-radius:50%;outline-offset:-5px;outline:solid {{{highlightb5|}}}px;position:relative;">
   <div style="position:absolute;">{{{b5|}}}</div>
   <div style="position:absolute;">{{{b5|}}}</div>
  </div>
  </div>
</div>
</div>
<div style="display:grid;">
<div style="display:grid;">
  <div style="display:grid;place-items:center;border-radius:calc({{{squareSize|36}}}px / 2);outline-offset:-5px;outline:solid {{{highlightc5|}}}px;position:relative;">
  <div style="display:grid;place-items:center;border-radius:50%;outline-offset:-5px;outline:solid {{{highlightc5|}}}px;position:relative;">
   <div style="position:absolute;">{{{c5|}}}</div>
   <div style="position:absolute;">{{{c5|}}}</div>
  </div>
  </div>
</div>
</div>
<div style="display:grid;">
<div style="display:grid;">
  <div style="display:grid;place-items:center;border-radius:calc({{{squareSize|36}}}px / 2);outline-offset:-5px;outline:solid {{{highlightd5|}}}px;position:relative;">
  <div style="display:grid;place-items:center;border-radius:50%;outline-offset:-5px;outline:solid {{{highlightd5|}}}px;position:relative;">
   <div style="position:absolute;">{{{d5|}}}</div>
   <div style="position:absolute;">{{{d5|}}}</div>
  </div>
  </div>
</div>
</div>
<div style="display:grid;">
<div style="display:grid;">
  <div style="display:grid;place-items:center;border-radius:calc({{{squareSize|36}}}px / 2);outline-offset:-5px;outline:solid {{{highlighte5|}}}px;position:relative;">
  <div style="display:grid;place-items:center;border-radius:50%;outline-offset:-5px;outline:solid {{{highlighte5|}}}px;position:relative;">
   <div style="position:absolute;border-radius:calc({{{squareSize|36}}}px / 2);background:{{{gridColour|#000}}};width:{{{starSize|6}}}px;height:{{{starSize|6}}}px;"></div>
   <div style="position:absolute;border-radius:50%;background:{{{gridColour|#000}}};width:{{{starSize|6}}}px;height:{{{starSize|6}}}px;"></div>
   <div style="position:absolute;">{{{e5|}}}</div>
   <div style="position:absolute;">{{{e5|}}}</div>
  </div>
  </div>
</div>
</div>
<div style="display:grid;">
<div style="display:grid;">
  <div style="display:grid;place-items:center;border-radius:calc({{{squareSize|36}}}px / 2);outline-offset:-5px;outline:solid {{{highlightf5|}}}px;position:relative;">
  <div style="display:grid;place-items:center;border-radius:50%;outline-offset:-5px;outline:solid {{{highlightf5|}}}px;position:relative;">
   <div style="position:absolute;">{{{f5|}}}</div>
   <div style="position:absolute;">{{{f5|}}}</div>
  </div>
  </div>
</div>
</div>
<div style="display:grid;">
<div style="display:grid;">
  <div style="display:grid;place-items:center;border-radius:calc({{{squareSize|36}}}px / 2);outline-offset:-5px;outline:solid {{{highlightg5|}}}px;position:relative;">
  <div style="display:grid;place-items:center;border-radius:50%;outline-offset:-5px;outline:solid {{{highlightg5|}}}px;position:relative;">
   <div style="position:absolute;">{{{g5|}}}</div>
   <div style="position:absolute;">{{{g5|}}}</div>
  </div>
  </div>
</div>
</div>
<div style="display:grid;">
<div style="display:grid;">
  <div style="display:grid;place-items:center;border-radius:calc({{{squareSize|36}}}px / 2);outline-offset:-5px;outline:solid {{{highlighth5|}}}px;position:relative;">
  <div style="display:grid;place-items:center;border-radius:50%;outline-offset:-5px;outline:solid {{{highlighth5|}}}px;position:relative;">
   <div style="position:absolute;">{{{h5|}}}</div>
   <div style="position:absolute;">{{{h5|}}}</div>
  </div>
  </div>
</div>
</div>
<div style="display:grid;">
<div style="display:grid;">
  <div style="display:grid;place-items:center;border-radius:calc({{{squareSize|36}}}px / 2);outline-offset:-5px;outline:solid {{{highlightj5|}}}px;position:relative;">
  <div style="display:grid;place-items:center;border-radius:50%;outline-offset:-5px;outline:solid {{{highlightj5|}}}px;position:relative;">
   <div style="position:absolute;">{{{j5|}}}</div>
   <div style="position:absolute;">{{{j5|}}}</div>
  </div>
  </div>
</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 ;z-index:1;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;z-index:1;padding-right:4px;">4</div>}}}
<div style="display:grid;">
<div style="display:grid;">
  <div style="display:grid;place-items:center;border-radius:calc({{{squareSize|36}}}px / 2);outline-offset:-5px;outline:solid {{{highlighta4|}}}px;position:relative;">
  <div style="display:grid;place-items:center;border-radius:50%;outline-offset:-5px;outline:solid {{{highlighta4|}}}px;position:relative;">
   <div style="position:absolute;">{{{a4|}}}</div>
   <div style="position:absolute;">{{{a4|}}}</div>
  </div>
  </div>
</div>
</div>
<div style="display:grid;">
<div style="display:grid;">
  <div style="display:grid;place-items:center;border-radius:calc({{{squareSize|36}}}px / 2);outline-offset:-5px;outline:solid {{{highlightb4|}}}px;position:relative;">
  <div style="display:grid;place-items:center;border-radius:50%;outline-offset:-5px;outline:solid {{{highlightb4|}}}px;position:relative;">
   <div style="position:absolute;">{{{b4|}}}</div>
   <div style="position:absolute;">{{{b4|}}}</div>
  </div>
  </div>
</div>
</div>
<div style="display:grid;">
<div style="display:grid;">
  <div style="display:grid;place-items:center;border-radius:calc({{{squareSize|36}}}px / 2);outline-offset:-5px;outline:solid {{{highlightc4|}}}px;position:relative;">
  <div style="display:grid;place-items:center;border-radius:50%;outline-offset:-5px;outline:solid {{{highlightc4|}}}px;position:relative;">
   <div style="position:absolute;">{{{c4|}}}</div>
   <div style="position:absolute;">{{{c4|}}}</div>
  </div>
  </div>
</div>
</div>
<div style="display:grid;">
<div style="display:grid;">
  <div style="display:grid;place-items:center;border-radius:calc({{{squareSize|36}}}px / 2);outline-offset:-5px;outline:solid {{{highlightd4|}}}px;position:relative;">
  <div style="display:grid;place-items:center;border-radius:50%;outline-offset:-5px;outline:solid {{{highlightd4|}}}px;position:relative;">
   <div style="position:absolute;">{{{d4|}}}</div>
   <div style="position:absolute;">{{{d4|}}}</div>
  </div>
  </div>
</div>
</div>
<div style="display:grid;">
<div style="display:grid;">
  <div style="display:grid;place-items:center;border-radius:calc({{{squareSize|36}}}px / 2);outline-offset:-5px;outline:solid {{{highlighte4|}}}px;position:relative;">
  <div style="display:grid;place-items:center;border-radius:50%;outline-offset:-5px;outline:solid {{{highlighte4|}}}px;position:relative;">
   <div style="position:absolute;">{{{e4|}}}</div>
   <div style="position:absolute;">{{{e4|}}}</div>
  </div>
  </div>
</div>
</div>
<div style="display:grid;">
<div style="display:grid;">
  <div style="display:grid;place-items:center;border-radius:calc({{{squareSize|36}}}px / 2);outline-offset:-5px;outline:solid {{{highlightf4|}}}px;position:relative;">
  <div style="display:grid;place-items:center;border-radius:50%;outline-offset:-5px;outline:solid {{{highlightf4|}}}px;position:relative;">
   <div style="position:absolute;">{{{f4|}}}</div>
   <div style="position:absolute;">{{{f4|}}}</div>
  </div>
  </div>
</div>
</div>
<div style="display:grid;">
<div style="display:grid;">
  <div style="display:grid;place-items:center;border-radius:calc({{{squareSize|36}}}px / 2);outline-offset:-5px;outline:solid {{{highlightg4|}}}px;position:relative;">
  <div style="display:grid;place-items:center;border-radius:50%;outline-offset:-5px;outline:solid {{{highlightg4|}}}px;position:relative;">
   <div style="position:absolute;">{{{g4|}}}</div>
   <div style="position:absolute;">{{{g4|}}}</div>
  </div>
  </div>
</div>
</div>
<div style="display:grid;">
<div style="display:grid;">
  <div style="display:grid;place-items:center;border-radius:calc({{{squareSize|36}}}px / 2);outline-offset:-5px;outline:solid {{{highlighth4|}}}px;position:relative;">
  <div style="display:grid;place-items:center;border-radius:50%;outline-offset:-5px;outline:solid {{{highlighth4|}}}px;position:relative;">
   <div style="position:absolute;">{{{h4|}}}</div>
   <div style="position:absolute;">{{{h4|}}}</div>
  </div>
  </div>
</div>
</div>
<div style="display:grid;">
<div style="display:grid;">
  <div style="display:grid;place-items:center;border-radius:calc({{{squareSize|36}}}px / 2);outline-offset:-5px;outline:solid {{{highlightj4|}}}px;position:relative;">
  <div style="display:grid;place-items:center;border-radius:50%;outline-offset:-5px;outline:solid {{{highlightj4|}}}px;position:relative;">
   <div style="position:absolute;">{{{j4|}}}</div>
   <div style="position:absolute;">{{{j4|}}}</div>
  </div>
  </div>
</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 ;z-index:1;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;z-index:1;padding-right:4px;">3</div>}}}
<div style="display:grid;">
<div style="display:grid;">
  <div style="display:grid;place-items:center;border-radius:calc({{{squareSize|36}}}px / 2);outline-offset:-5px;outline:solid {{{highlighta3|}}}px;position:relative;">
  <div style="display:grid;place-items:center;border-radius:50%;outline-offset:-5px;outline:solid {{{highlighta3|}}}px;position:relative;">
   <div style="position:absolute;">{{{a3|}}}</div>
   <div style="position:absolute;">{{{a3|}}}</div>
  </div>
  </div>
</div>
</div>
<div style="display:grid;">
<div style="display:grid;">
  <div style="display:grid;place-items:center;border-radius:calc({{{squareSize|36}}}px / 2);outline-offset:-5px;outline:solid {{{highlightb3|}}}px;position:relative;">
  <div style="display:grid;place-items:center;border-radius:50%;outline-offset:-5px;outline:solid {{{highlightb3|}}}px;position:relative;">
   <div style="position:absolute;">{{{b3|}}}</div>
   <div style="position:absolute;">{{{b3|}}}</div>
  </div>
  </div>
</div>
</div>
<div style="display:grid;">
<div style="display:grid;">
  <div style="display:grid;place-items:center;border-radius:calc({{{squareSize|36}}}px / 2);outline-offset:-5px;outline:solid {{{highlightc3|}}}px;position:relative;">
  <div style="display:grid;place-items:center;border-radius:50%;outline-offset:-5px;outline:solid {{{highlightc3|}}}px;position:relative;">
   <div style="position:absolute;border-radius:calc({{{squareSize|36}}}px / 2);background:{{{gridColour|#000}}};width:{{{starSize|6}}}px;height:{{{starSize|6}}}px;"></div>
   <div style="position:absolute;border-radius:50%;background:{{{gridColour|#000}}};width:{{{starSize|6}}}px;height:{{{starSize|6}}}px;"></div>
   <div style="position:absolute;">{{{c3|}}}</div>
   <div style="position:absolute;">{{{c3|}}}</div>
  </div>
  </div>
</div>
</div>
<div style="display:grid;">
<div style="display:grid;">
  <div style="display:grid;place-items:center;border-radius:calc({{{squareSize|36}}}px / 2);outline-offset:-5px;outline:solid {{{highlightd3|}}}px;position:relative;">
  <div style="display:grid;place-items:center;border-radius:50%;outline-offset:-5px;outline:solid {{{highlightd3|}}}px;position:relative;">
   <div style="position:absolute;">{{{d3|}}}</div>
   <div style="position:absolute;">{{{d3|}}}</div>
  </div>
  </div>
</div>
</div>
<div style="display:grid;">
<div style="display:grid;">
  <div style="display:grid;place-items:center;border-radius:calc({{{squareSize|36}}}px / 2);outline-offset:-5px;outline:solid {{{highlighte3|}}}px;position:relative;">
  <div style="display:grid;place-items:center;border-radius:50%;outline-offset:-5px;outline:solid {{{highlighte3|}}}px;position:relative;">
   <div style="position:absolute;">{{{e3|}}}</div>
   <div style="position:absolute;">{{{e3|}}}</div>
  </div>
  </div>
</div>
</div>
<div style="display:grid;">
<div style="display:grid;">
  <div style="display:grid;place-items:center;border-radius:calc({{{squareSize|36}}}px / 2);outline-offset:-5px;outline:solid {{{highlightf3|}}}px;position:relative;">
  <div style="display:grid;place-items:center;border-radius:50%;outline-offset:-5px;outline:solid {{{highlightf3|}}}px;position:relative;">
   <div style="position:absolute;">{{{f3|}}}</div>
   <div style="position:absolute;">{{{f3|}}}</div>
  </div>
  </div>
</div>
</div>
<div style="display:grid;">
<div style="display:grid;">
  <div style="display:grid;place-items:center;border-radius:calc({{{squareSize|36}}}px / 2);outline-offset:-5px;outline:solid {{{highlightg3|}}}px;position:relative;">
  <div style="display:grid;place-items:center;border-radius:50%;outline-offset:-5px;outline:solid {{{highlightg3|}}}px;position:relative;">
   <div style="position:absolute;border-radius:calc({{{squareSize|36}}}px / 2);background:{{{gridColour|#000}}};width:{{{starSize|6}}}px;height:{{{starSize|6}}}px;"></div>
   <div style="position:absolute;border-radius:50%;background:{{{gridColour|#000}}};width:{{{starSize|6}}}px;height:{{{starSize|6}}}px;"></div>
   <div style="position:absolute;">{{{g3|}}}</div>
   <div style="position:absolute;">{{{g3|}}}</div>
  </div>
  </div>
</div>
</div>
<div style="display:grid;">
<div style="display:grid;">
  <div style="display:grid;place-items:center;border-radius:calc({{{squareSize|36}}}px / 2);outline-offset:-5px;outline:solid {{{highlighth3|}}}px;position:relative;">
  <div style="display:grid;place-items:center;border-radius:50%;outline-offset:-5px;outline:solid {{{highlighth3|}}}px;position:relative;">
   <div style="position:absolute;">{{{h3|}}}</div>
   <div style="position:absolute;">{{{h3|}}}</div>
  </div>
  </div>
</div>
</div>
<div style="display:grid;">
<div style="display:grid;">
  <div style="display:grid;place-items:center;border-radius:calc({{{squareSize|36}}}px / 2);outline-offset:-5px;outline:solid {{{highlightj3|}}}px;position:relative;">
  <div style="display:grid;place-items:center;border-radius:50%;outline-offset:-5px;outline:solid {{{highlightj3|}}}px;position:relative;">
   <div style="position:absolute;">{{{j3|}}}</div>
   <div style="position:absolute;">{{{j3|}}}</div>
  </div>
  </div>
</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 ;z-index:1;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;z-index:1;padding-right:4px;">2</div>}}}
<div style="display:grid;">
<div style="display:grid;">
  <div style="display:grid;place-items:center;border-radius:calc({{{squareSize|36}}}px / 2);outline-offset:-5px;outline:solid {{{highlighta2|}}}px;position:relative;">
  <div style="display:grid;place-items:center;border-radius:50%;outline-offset:-5px;outline:solid {{{highlighta2|}}}px;position:relative;">
   <div style="position:absolute;">{{{a2|}}}</div>
   <div style="position:absolute;">{{{a2|}}}</div>
  </div>
  </div>
</div>
</div>
<div style="display:grid;">
<div style="display:grid;">
  <div style="display:grid;place-items:center;border-radius:calc({{{squareSize|36}}}px / 2);outline-offset:-5px;outline:solid {{{highlightb2|}}}px;position:relative;">
  <div style="display:grid;place-items:center;border-radius:50%;outline-offset:-5px;outline:solid {{{highlightb2|}}}px;position:relative;">
   <div style="position:absolute;">{{{b2|}}}</div>
   <div style="position:absolute;">{{{b2|}}}</div>
  </div>
  </div>
</div>
</div>
<div style="display:grid;">
<div style="display:grid;">
  <div style="display:grid;place-items:center;border-radius:calc({{{squareSize|36}}}px / 2);outline-offset:-5px;outline:solid {{{highlightc2|}}}px;position:relative;">
  <div style="display:grid;place-items:center;border-radius:50%;outline-offset:-5px;outline:solid {{{highlightc2|}}}px;position:relative;">
   <div style="position:absolute;">{{{c2|}}}</div>
   <div style="position:absolute;">{{{c2|}}}</div>
  </div>
  </div>
</div>
</div>
<div style="display:grid;">
<div style="display:grid;">
  <div style="display:grid;place-items:center;border-radius:calc({{{squareSize|36}}}px / 2);outline-offset:-5px;outline:solid {{{highlightd2|}}}px;position:relative;">
  <div style="display:grid;place-items:center;border-radius:50%;outline-offset:-5px;outline:solid {{{highlightd2|}}}px;position:relative;">
   <div style="position:absolute;">{{{d2|}}}</div>
   <div style="position:absolute;">{{{d2|}}}</div>
  </div>
  </div>
</div>
</div>
<div style="display:grid;">
<div style="display:grid;">
  <div style="display:grid;place-items:center;border-radius:calc({{{squareSize|36}}}px / 2);outline-offset:-5px;outline:solid {{{highlighte2|}}}px;position:relative;">
  <div style="display:grid;place-items:center;border-radius:50%;outline-offset:-5px;outline:solid {{{highlighte2|}}}px;position:relative;">
   <div style="position:absolute;">{{{e2|}}}</div>
   <div style="position:absolute;">{{{e2|}}}</div>
  </div>
  </div>
</div>
</div>
<div style="display:grid;">
<div style="display:grid;">
  <div style="display:grid;place-items:center;border-radius:calc({{{squareSize|36}}}px / 2);outline-offset:-5px;outline:solid {{{highlightf2|}}}px;position:relative;">
  <div style="display:grid;place-items:center;border-radius:50%;outline-offset:-5px;outline:solid {{{highlightf2|}}}px;position:relative;">
   <div style="position:absolute;">{{{f2|}}}</div>
   <div style="position:absolute;">{{{f2|}}}</div>
  </div>
  </div>
</div>
</div>
<div style="display:grid;">
<div style="display:grid;">
  <div style="display:grid;place-items:center;border-radius:calc({{{squareSize|36}}}px / 2);outline-offset:-5px;outline:solid {{{highlightg2|}}}px;position:relative;">
  <div style="display:grid;place-items:center;border-radius:50%;outline-offset:-5px;outline:solid {{{highlightg2|}}}px;position:relative;">
   <div style="position:absolute;">{{{g2|}}}</div>
   <div style="position:absolute;">{{{g2|}}}</div>
  </div>
  </div>
</div>
</div>
<div style="display:grid;">
<div style="display:grid;">
  <div style="display:grid;place-items:center;border-radius:calc({{{squareSize|36}}}px / 2);outline-offset:-5px;outline:solid {{{highlighth2|}}}px;position:relative;">
  <div style="display:grid;place-items:center;border-radius:50%;outline-offset:-5px;outline:solid {{{highlighth2|}}}px;position:relative;">
   <div style="position:absolute;">{{{h2|}}}</div>
   <div style="position:absolute;">{{{h2|}}}</div>
  </div>
  </div>
</div>
</div>
<div style="display:grid;">
<div style="display:grid;">
  <div style="display:grid;place-items:center;border-radius:calc({{{squareSize|36}}}px / 2);outline-offset:-5px;outline:solid {{{highlightj2|}}}px;position:relative;">
  <div style="display:grid;place-items:center;border-radius:50%;outline-offset:-5px;outline:solid {{{highlightj2|}}}px;position:relative;">
   <div style="position:absolute;">{{{j2|}}}</div>
   <div style="position:absolute;">{{{j2|}}}</div>
  </div>
  </div>
</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 ;z-index:1;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;z-index:1;padding-right:4px;">1</div>}}}
<div style="display:grid;">
<div style="display:grid;">
  <div style="display:grid;place-items:center;border-radius:calc({{{squareSize|36}}}px / 2);outline-offset:-5px;outline:solid {{{highlighta1|}}}px;position:relative;">
  <div style="display:grid;place-items:center;border-radius:50%;outline-offset:-5px;outline:solid {{{highlighta1|}}}px;position:relative;">
   <div style="position:absolute;">{{{a1|}}}</div>
   <div style="position:absolute;">{{{a1|}}}</div>
  </div>
  </div>
</div>
</div>
<div style="display:grid;">
<div style="display:grid;">
  <div style="display:grid;place-items:center;border-radius:calc({{{squareSize|36}}}px / 2);outline-offset:-5px;outline:solid {{{highlightb1|}}}px;position:relative;">
  <div style="display:grid;place-items:center;border-radius:50%;outline-offset:-5px;outline:solid {{{highlightb1|}}}px;position:relative;">
   <div style="position:absolute;">{{{b1|}}}</div>
   <div style="position:absolute;">{{{b1|}}}</div>
  </div>
  </div>
</div>
</div>
<div style="display:grid;">
<div style="display:grid;">
  <div style="display:grid;place-items:center;border-radius:calc({{{squareSize|36}}}px / 2);outline-offset:-5px;outline:solid {{{highlightc1|}}}px;position:relative;">
  <div style="display:grid;place-items:center;border-radius:50%;outline-offset:-5px;outline:solid {{{highlightc1|}}}px;position:relative;">
   <div style="position:absolute;">{{{c1|}}}</div>
   <div style="position:absolute;">{{{c1|}}}</div>
  </div>
  </div>
</div>
</div>
<div style="display:grid;">
<div style="display:grid;">
  <div style="display:grid;place-items:center;border-radius:calc({{{squareSize|36}}}px / 2);outline-offset:-5px;outline:solid {{{highlightd1|}}}px;position:relative;">
  <div style="display:grid;place-items:center;border-radius:50%;outline-offset:-5px;outline:solid {{{highlightd1|}}}px;position:relative;">
   <div style="position:absolute;">{{{d1|}}}</div>
   <div style="position:absolute;">{{{d1|}}}</div>
  </div>
  </div>
</div>
</div>
<div style="display:grid;">
<div style="display:grid;">
  <div style="display:grid;place-items:center;border-radius:calc({{{squareSize|36}}}px / 2);outline-offset:-5px;outline:solid {{{highlighte1|}}}px;position:relative;">
  <div style="display:grid;place-items:center;border-radius:50%;outline-offset:-5px;outline:solid {{{highlighte1|}}}px;position:relative;">
   <div style="position:absolute;">{{{e1|}}}</div>
   <div style="position:absolute;">{{{e1|}}}</div>
  </div>
  </div>
</div>
</div>
<div style="display:grid;">
<div style="display:grid;">
  <div style="display:grid;place-items:center;border-radius:calc({{{squareSize|36}}}px / 2);outline-offset:-5px;outline:solid {{{highlightf1|}}}px;position:relative;">
  <div style="display:grid;place-items:center;border-radius:50%;outline-offset:-5px;outline:solid {{{highlightf1|}}}px;position:relative;">
   <div style="position:absolute;">{{{f1|}}}</div>
   <div style="position:absolute;">{{{f1|}}}</div>
  </div>
  </div>
</div>
</div>
<div style="display:grid;">
<div style="display:grid;">
  <div style="display:grid;place-items:center;border-radius:calc({{{squareSize|36}}}px / 2);outline-offset:-5px;outline:solid {{{highlightg1|}}}px;position:relative;">
  <div style="display:grid;place-items:center;border-radius:50%;outline-offset:-5px;outline:solid {{{highlightg1|}}}px;position:relative;">
   <div style="position:absolute;">{{{g1|}}}</div>
   <div style="position:absolute;">{{{g1|}}}</div>
  </div>
  </div>
</div>
</div>
<div style="display:grid;">
<div style="display:grid;">
  <div style="display:grid;place-items:center;border-radius:calc({{{squareSize|36}}}px / 2);outline-offset:-5px;outline:solid {{{highlighth1|}}}px;position:relative;">
  <div style="display:grid;place-items:center;border-radius:50%;outline-offset:-5px;outline:solid {{{highlighth1|}}}px;position:relative;">
   <div style="position:absolute;">{{{h1|}}}</div>
   <div style="position:absolute;">{{{h1|}}}</div>
  </div>
  </div>
</div>
</div>
<div style="display:grid;">
<div style="display:grid;">
  <div style="display:grid;place-items:center;border-radius:calc({{{squareSize|36}}}px / 2);outline-offset:-5px;outline:solid {{{highlightj1|}}}px;position:relative;">
  <div style="display:grid;place-items:center;border-radius:50%;outline-offset:-5px;outline:solid {{{highlightj1|}}}px;position:relative;">
   <div style="position:absolute;">{{{j1|}}}</div>
   <div style="position:absolute;">{{{j1|}}}</div>
  </div>
  </div>
</div>{{{hideNotation|<div style="align-self:center;text-align:left;padding-left:4px;">1</div>
</div>{{{hideNotation|<div style="align-self:center;text-align:left;z-index:1;padding-left:4px;">1</div>
<div></div>
<div></div>
<div style="align-self:start;text-align:center;">A</div>
<div style="align-self:start;text-align:center;z-index:1;">A</div>
<div style="align-self:start;text-align:center;">B</div>
<div style="align-self:start;text-align:center;z-index:1;">B</div>
<div style="align-self:start;text-align:center;">C</div>
<div style="align-self:start;text-align:center;z-index:1;">C</div>
<div style="align-self:start;text-align:center;">D</div>
<div style="align-self:start;text-align:center;z-index:1;">D</div>
<div style="align-self:start;text-align:center;">E</div>
<div style="align-self:start;text-align:center;z-index:1;">E</div>
<div style="align-self:start;text-align:center;">F</div>
<div style="align-self:start;text-align:center;z-index:1;">F</div>
<div style="align-self:start;text-align:center;">G</div>
<div style="align-self:start;text-align:center;z-index:1;">G</div>
<div style="align-self:start;text-align:center;">H</div>
<div style="align-self:start;text-align:center;z-index:1;">H</div>
<div style="align-self:start;text-align:center;">J</div>
<div style="align-self:start;text-align:center;z-index:1;">J</div>
<div></div>}}}
<div></div>}}}
</div>
</div>
Line 536: Line 528:
To insert a goboard template into a BGA wiki page, simply type one of <code><nowiki>{{goboard9}}</nowiki></code>/<code><nowiki>{{goboard13}}</nowiki></code>/<code><nowiki>{{goboard15}}</nowiki></code>/<code><nowiki>{{goboard19}}</nowiki></code> depending on size when editing the page, or alternatively copy one of the examples below.
To insert a goboard template into a BGA wiki page, simply type one of <code><nowiki>{{goboard9}}</nowiki></code>/<code><nowiki>{{goboard13}}</nowiki></code>/<code><nowiki>{{goboard15}}</nowiki></code>/<code><nowiki>{{goboard19}}</nowiki></code> depending on size when editing the page, or alternatively copy one of the examples below.


'''Note:''' Game Help pages (e.g. '[[Gamehelpclassicgo|GameHelpClassicGo]]') also display on BGA's Rules Summary pages
'''Note:''' Game Help pages ''(e.g. '''[[Gamehelpclassicgo|GameHelpClassicGo]]''')'' display on:
e.g. https://boardgamearena.com/gamepanel?game=classicgo under HOW TO PLAY? > See More > RULES SUMMARY
# BGA's game pages: ''(e.g. '''https://boardgamearena.com/gamepanel?game=classicgo''')'' HOW TO PLAY? > See More > RULES SUMMARY and
 
# In-game: How to play? > GAME HELP.
=== Empty board template ===
<pre>
{{goboard9
| a9= | b9= | c9= | d9= | e9= | f9= | g9= | h9= | j9=
| a8= | b8= | c8= | d8= | e8= | f8= | g8= | h8= | j8=
| a7= | b7= | c7= | d7= | e7= | f7= | g7= | h7= | j7=
| a6= | b6= | c6= | d6= | e6= | f6= | g6= | h6= | j6=
| a5= | b5= | c5= | d5= | e5= | f5= | g5= | h5= | j5=
| a4= | b4= | c4= | d4= | e4= | f4= | g4= | h4= | j4=
| a3= | b3= | c3= | d3= | e3= | f3= | g3= | h3= | j3=
| a2= | b2= | c2= | d2= | e2= | f2= | g2= | h2= | j2=
| a1= | b1= | c1= | d1= | e1= | f1= | g1= | h1= | j1=
}}
</pre>


=== Available parameters ===
=== Available parameters ===
Line 577: Line 555:
  <div style="display:flex;flex-flow:row wrap;gap:0.5rem;">
  <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>squareSize</code></div>
   <div style="border-top:0.2rem solid red  ;border-left:0.15rem solid red  ;border-radius:0.5rem 0.5rem 0 0;"><code>squareSize</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><nowiki>36</nowiki></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><nowiki>30</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>{{goboard9 | squareSize=40}}</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>{{goboard9 | squareSize=40}}</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 square dimensions in px units</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 square dimensions in px units</div>
Line 623: Line 601:
=== Go ===
=== Go ===


<div style="float:right; width:260px; border:solid #aaa 1px; background:#fff; padding:1rem; margin-left:1rem;"><center><b>Repeating the same position with the same player turn is illegal</b>
<div style="position:relative; width:210px; height:180px; overflow:hidden; margin:1rem;"><div style="position:absolute; bottom:0px;">
{{goboard9 | starSize=0
| highlightd3=red 5
| c3={{whiteStone}}
| d2={{whiteStone}}
| d4={{whiteStone}}
| e3={{whiteStone}}
| b3={{blackStone}}
| c2={{blackStone}}
| c4={{blackStone}}
}}</div></div>
White has just placed their stone on c3 and captured black's stone on d3. Black cannot play on d3 again (capturing c3) because it would be the same position with the same player turn.
</center></div>
<pre>
<div style="float:right; width:260px; border:solid #aaa 1px; background:#fff; padding:1rem; margin-left:1rem;"><center><b>Repeating the same position with the same player turn is illegal</b>
<div style="position:relative; width:210px; height:180px; overflow:hidden; margin:1rem;"><div style="position:absolute; bottom:0px;">
{{goboard9 | starSize=0
| highlightd3=red 5
| c3={{whiteStone}}
| d2={{whiteStone}}
| d4={{whiteStone}}
| e3={{whiteStone}}
| b3={{blackStone}}
| c2={{blackStone}}
| c4={{blackStone}}
}}</div></div>
White has just placed their stone on c3 and captured black's stone on d3. Black cannot play on d3 again (capturing c3) because it would be the same position with the same player turn.
</center></div>
</pre>
----
<div style="float:right;">
{{goboard19
{{goboard19
| c3={{blackStone}}
| c3={{blackStone}}
| c7={{blackStone}}
| c7={{blackStone}}


| highlightc7=red 5
| highlightc7=red 7


| e6={{whiteStone}}
| e6={{whiteStone}}
Line 633: Line 651:
| highlighte4=blue 2
| highlighte4=blue 2
}}
}}
</div>
<pre>
<pre>
{{goboard19
{{goboard19
Line 638: Line 658:
| c7={{blackStone}}
| c7={{blackStone}}


| highlightc7=red 5
| highlightc7=red 7


| e6={{whiteStone}}
| e6={{whiteStone}}
Line 658: Line 678:
Ninuki-renju
Ninuki-renju


Pente
=== Pente ===
 
 


=== Connect 6 ===
=== Connect 6 ===
[[Category:GameBoardTemplates|Game board templates]]
</noinclude>

Latest revision as of 17:32, 7 March 2022

Basic {{goboard}} template

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

To insert a goboard template into a BGA wiki page, simply type one of {{goboard9}}/{{goboard13}}/{{goboard15}}/{{goboard19}} depending on size when editing the page, or alternatively copy one of the examples below.

Note: Game Help pages (e.g. GameHelpClassicGo) display on:

  1. BGA's game pages: (e.g. https://boardgamearena.com/gamepanel?game=classicgo) HOW TO PLAY? > See More > RULES SUMMARY and
  2. In-game: How to play? > GAME HELP.

Available parameters

Parameter
Default value
Example
Description
a1
null
{{goboard9 | a1={{BlackStone}}}}
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
highlighta1
null
{{goboard9 | highlighta1=red 3}}
Optional: highlight any intersection using highlight[letter][digit]=[string] [1-9] where [string] is any valid colour and [1-9] is the circle thickness in px units
squareSize
30
{{goboard9 | squareSize=40}}
Optional: specify the square dimensions in px units
boardColour
#e5c079 (light brown)
{{goboard9 | boardColour=lightgreen}}
Optional: specify the board colour as [string] where [string] is any valid style="background:[string];"
cornerRadius
8
{{goboard9 | cornerRadius=10}}
Optional: specify the corner radius in px units
hideNotation
[A-J]/[1-9]
{{goboard9 | hideNotation=}}
Optional: hide algebraic notation
gridlineThickness
1
{{goboard9 | gridlineThickness=2}}
Optional: specify the gridline thickness in px units
starSize
6
{{goboard9 | starSize=8}}
Optional: specify the star size (dots for handicap) in px units
gridColour
#000 (black)
{{goboard9 | gridColour=blue}}
Optional: specify the grid colour as [string] where [string] is any valid style="background:[string];"

Examples

Go

Repeating the same position with the same player turn is illegal
A
B
C
D
E
F
G
H
J
9
9
8
8
7
7
6
6
5
5
4
4
3
3
2
2
1
1
A
B
C
D
E
F
G
H
J

White has just placed their stone on c3 and captured black's stone on d3. Black cannot play on d3 again (capturing c3) because it would be the same position with the same player turn.

<div style="float:right; width:260px; border:solid #aaa 1px; background:#fff; padding:1rem; margin-left:1rem;"><center><b>Repeating the same position with the same player turn is illegal</b>
<div style="position:relative; width:210px; height:180px; overflow:hidden; margin:1rem;"><div style="position:absolute; bottom:0px;">
{{goboard9 | starSize=0

| highlightd3=red 5

| c3={{whiteStone}}
| d2={{whiteStone}}
| d4={{whiteStone}}
| e3={{whiteStone}}

| b3={{blackStone}}
| c2={{blackStone}}
| c4={{blackStone}}
}}</div></div>
White has just placed their stone on c3 and captured black's stone on d3. Black cannot play on d3 again (capturing c3) because it would be the same position with the same player turn.
</center></div>

A
B
C
D
E
F
G
H
J
K
L
M
N
O
P
Q
R
S
T
19
19
18
18
17
17
16
16
15
15
14
14
13
13
12
12
11
11
10
10
9
9
8
8
7
7
6
6
5
5
4
4
3
3
2
2
1
1
A
B
C
D
E
F
G
H
J
K
L
M
N
O
P
Q
R
S
T
{{goboard19
| c3={{blackStone}}
| c7={{blackStone}}

| highlightc7=red 7

| e6={{whiteStone}}

| highlighte4=blue 2
}}

Gomoku

Freestyle

Renju

Caro

Omok

Ninuki-renju

Pente

Connect 6