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
(simplifications: border-radius, examples)
 
(2 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}}};
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;
left:calc(({{{squareSize|36}}}px / 2) + ({{{gridlineThickness|1}}}px / 2));
left:calc(({{{squareSize|30}}}px / 2) + ({{{gridlineThickness|1}}}px / 2));
top :calc(({{{squareSize|36}}}px / 2) + ({{{gridlineThickness|1}}}px / 2));
top :calc(({{{squareSize|30}}}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 102: Line 96:
<div style="align-self:center;text-align:right;z-index:1;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>
Line 148: Line 142:
<div style="align-self:center;text-align:right;z-index:1;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>
Line 194: Line 188:
<div style="align-self:center;text-align:right;z-index:1;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>
Line 242: Line 236:
<div style="align-self:center;text-align:right;z-index:1;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>
Line 288: Line 282:
<div style="align-self:center;text-align:right;z-index:1;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>
Line 335: Line 329:
<div style="align-self:center;text-align:right;z-index:1;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>
Line 381: Line 375:
<div style="align-self:center;text-align:right;z-index:1;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>
Line 429: Line 423:
<div style="align-self:center;text-align:right;z-index:1;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>
Line 475: Line 469:
<div style="align-self:center;text-align:right;z-index:1;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>
Line 534: 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 575: 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 621: 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 631: Line 651:
| highlighte4=blue 2
| highlighte4=blue 2
}}
}}
</div>
<pre>
<pre>
{{goboard19
{{goboard19
Line 636: Line 658:
| c7={{blackStone}}
| c7={{blackStone}}


| highlightc7=red 5
| highlightc7=red 7


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


Pente
=== Pente ===
 
 


=== Connect 6 ===
=== Connect 6 ===

Latest revision as of 16: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