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

Difference between revisions of "Template:Goboard9"

From Board Game Arena
Jump to navigation Jump to search
m (added 'game tip' go examples)
(simplifications: border-radius, examples)
 
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|30}}}px) {{{hideNotation|1.5rem}}} / {{{hideNotation|1.5rem}}} repeat({{{boardSize|9}}},{{{squareSize|30}}}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="
 
display:grid;
 
 
grid:repeat(calc({{{boardSize|9}}} - 1),{{{squareSize|30}}}px) / repeat(calc({{{boardSize|9}}} - 1),{{{squareSize|30}}}px);
 
grid:repeat(calc({{{boardSize|9}}} - 1),{{{squareSize|30}}}px) / repeat(calc({{{boardSize|9}}} - 1),{{{squareSize|30}}}px);
 
gap:{{{gridlineThickness|1}}}px;
 
gap:{{{gridlineThickness|1}}}px;
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|30}}}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|30}}}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|30}}}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|30}}}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|30}}}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|30}}}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|30}}}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|30}}}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|30}}}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|30}}}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|30}}}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|30}}}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|30}}}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|30}}}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|30}}}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|30}}}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|30}}}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|30}}}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|30}}}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|30}}}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|30}}}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|30}}}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|30}}}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|30}}}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|30}}}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|30}}}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|30}}}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|30}}}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|30}}}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|30}}}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|30}}}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|30}}}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|30}}}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|30}}}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|30}}}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|30}}}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|30}}}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|30}}}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|30}}}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|30}}}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|30}}}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|30}}}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|30}}}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|30}}}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|30}}}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|30}}}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|30}}}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|30}}}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|30}}}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|30}}}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|30}}}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|30}}}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|30}}}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|30}}}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|30}}}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|30}}}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|30}}}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|30}}}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|30}}}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|30}}}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|30}}}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|30}}}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|30}}}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|30}}}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|30}}}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|30}}}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|30}}}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|30}}}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|30}}}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|30}}}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|30}}}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|30}}}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|30}}}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|30}}}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|30}}}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|30}}}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|30}}}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|30}}}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|30}}}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|30}}}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|30}}}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|30}}}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|30}}}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|30}}}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|30}}}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|30}}}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 621: Line 601:
 
=== Go ===
 
=== Go ===
  
<div class="game-tip" 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="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;">
 
<div style="position:relative; width:210px; height:180px; overflow:hidden; margin:1rem;"><div style="position:absolute; bottom:0px;">
 
{{goboard9 | starSize=0
 
{{goboard9 | starSize=0
Line 637: Line 617:
 
}}</div></div>
 
}}</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.
 
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>
 
 
<div class="game-tip" style="float:right; width:260px; border:solid #aaa 1px; background:#fff; padding:1rem; margin-left:1rem;"><center><b>Capture of the opponent takes precedence over self-capture</b>
 
<div style="position:relative; width:160px; height:160px; overflow:hidden; margin:1rem;"><div style="position:absolute; bottom:0px;">
 
{{goboard9 | hideNotation= | starSize=0
 
 
| highlightc3=green 5
 
 
| a1={{whiteStone}}
 
| a2={{whiteStone}}
 
| a3={{whiteStone}}
 
| a4={{whiteStone}}
 
| a5={{whiteStone}}
 
| b1={{whiteStone}}
 
| b5={{whiteStone}}
 
| c1={{whiteStone}}
 
| c5={{whiteStone}}
 
| d1={{whiteStone}}
 
| d5={{whiteStone}}
 
| e1={{whiteStone}}
 
| e2={{whiteStone}}
 
| e3={{whiteStone}}
 
| e4={{whiteStone}}
 
| e5={{whiteStone}}
 
 
| b2={{blackStone}}
 
| b3={{blackStone}}
 
| b4={{blackStone}}
 
| c2={{blackStone}}
 
| c4={{blackStone}}
 
| d2={{blackStone}}
 
| d3={{blackStone}}
 
| d4={{blackStone}}
 
}}</div></div>
 
White can place their stone where it is surrounded only because this move captures the black stones.
 
</center></div>
 
 
<div class="game-tip" style="float:right; width:260px; border:solid #aaa 1px; background:#fff; padding:1rem; margin-left:1rem;"><center><b>Regions left uncounted</b>
 
<div style="position:relative; width:160px; height:130px; overflow:hidden; margin:1rem;"><div style="position:absolute; bottom:0px;">
 
{{goboard9 | hideNotation= | starSize=0
 
 
| highlightc1=grey 5
 
| highlightc2=grey 5
 
 
| a1={{whiteStone}}
 
| a2={{whiteStone}}
 
| a3={{whiteStone}}
 
| a4={{whiteStone}}
 
| b4={{whiteStone}}
 
| c4={{whiteStone}}
 
| d3={{whiteStone}}
 
| d2={{whiteStone}}
 
| d1={{whiteStone}}
 
 
| b1={{blackStone}}
 
| b2={{blackStone}}
 
| b3={{blackStone}}
 
| c3={{blackStone}}
 
| d4={{blackStone}}
 
| e4={{blackStone}}
 
| e3={{blackStone}}
 
| e2={{blackStone}}
 
| e1={{blackStone}}
 
}}</div></div>
 
There are situations (Japanese seki) in which a region of empty points is left at the end of the game which is not entirely surrounded by stones of a single colour, and which neither player would fill because to do so would lead to the capture of their own stones.
 
 
</center></div>
 
</center></div>
  
 
<pre>
 
<pre>
<div class="game-tip" style="float:right; width:260px; border:solid #aaa 1px; background:#fff; padding:1rem; margin-left:1rem;"><center><b>
+
<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>
 
 
Game Tip Title
 
 
 
</b>
 
 
<div style="position:relative; width:210px; height:180px; overflow:hidden; margin:1rem;"><div style="position:absolute; bottom:0px;">
 
<div style="position:relative; width:210px; height:180px; overflow:hidden; margin:1rem;"><div style="position:absolute; bottom:0px;">
 
{{goboard9 | starSize=0
 
{{goboard9 | starSize=0
Line 724: Line 635:
 
| c4={{blackStone}}
 
| c4={{blackStone}}
 
}}</div></div>
 
}}</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.
Game tip caption
 
 
 
 
</center></div>
 
</center></div>
 
</pre>
 
</pre>
  
 
+
----
 +
<div style="float:right;">
 
{{goboard19
 
{{goboard19
 
| c3={{blackStone}}
 
| c3={{blackStone}}
Line 741: Line 651:
 
| highlighte4=blue 2
 
| highlighte4=blue 2
 
}}
 
}}
 +
</div>
 +
 
<pre>
 
<pre>
 
{{goboard19
 
{{goboard19

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