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

Template:Goboard9: Difference between revisions

From Board Game Arena
Jump to navigation Jump to search
m (reduced squareSize)
m (added notation z-index)
Line 10: Line 10:
<div class="board background" style="
<div class="board background" style="
background:{{{boardColour|#e5c079}}};
background:{{{boardColour|#e5c079}}};
z-index:-3;
width:100%;
width:100%;
height:100%;
height:100%;
Line 21: Line 20:
grid:repeat(calc({{{boardSize|9}}} - 1),{{{squareSize|36}}}px) / repeat(calc({{{boardSize|9}}} - 1),{{{squareSize|36}}}px);
grid:repeat(calc({{{boardSize|9}}} - 1),{{{squareSize|36}}}px) / repeat(calc({{{boardSize|9}}} - 1),{{{squareSize|36}}}px);
gap:{{{gridlineThickness|1}}}px;
gap:{{{gridlineThickness|1}}}px;
z-index:-1;
left:calc(({{{squareSize|36}}}px / 2) + ({{{gridlineThickness|1}}}px / 2));
left:calc(({{{squareSize|36}}}px / 2) + ({{{gridlineThickness|1}}}px / 2));
top :calc(({{{squareSize|36}}}px / 2) + ({{{gridlineThickness|1}}}px / 2));
top :calc(({{{squareSize|36}}}px / 2) + ({{{gridlineThickness|1}}}px / 2));
Line 92: Line 90:
</div>{{{hideNotation|
</div>{{{hideNotation|
<div></div>
<div></div>
<div style="align-self:end;text-align:center;">A</div>
<div style="align-self:end;text-align:center;z-index:1;">A</div>
<div style="align-self:end;text-align:center;">B</div>
<div style="align-self:end;text-align:center;z-index:1;">B</div>
<div style="align-self:end;text-align:center;">C</div>
<div style="align-self:end;text-align:center;z-index:1;">C</div>
<div style="align-self:end;text-align:center;">D</div>
<div style="align-self:end;text-align:center;z-index:1;">D</div>
<div style="align-self:end;text-align:center;">E</div>
<div style="align-self:end;text-align:center;z-index:1;">E</div>
<div style="align-self:end;text-align:center;">F</div>
<div style="align-self:end;text-align:center;z-index:1;">F</div>
<div style="align-self:end;text-align:center;">G</div>
<div style="align-self:end;text-align:center;z-index:1;">G</div>
<div style="align-self:end;text-align:center;">H</div>
<div style="align-self:end;text-align:center;z-index:1;">H</div>
<div style="align-self:end;text-align:center;">J</div>
<div style="align-self:end;text-align:center;z-index:1;">J</div>
<div></div>
<div></div>
<div style="align-self:center;text-align:right;padding-right:4px;">9</div>}}}
<div style="align-self:center;text-align:right;z-index:1;padding-right:4px;">9</div>}}}
<div style="display:grid;">
<div style="display:grid;">
  <div style="display:grid;place-items:center;border-radius:calc({{{squareSize|36}}}px / 2);outline-offset:-5px;outline:solid {{{highlighta9|}}}px;position:relative;">
  <div style="display:grid;place-items:center;border-radius:calc({{{squareSize|36}}}px / 2);outline-offset:-5px;outline:solid {{{highlighta9|}}}px;position:relative;">
Line 147: Line 145:
   <div style="position:absolute;">{{{j9|}}}</div>
   <div style="position:absolute;">{{{j9|}}}</div>
  </div>
  </div>
</div>{{{hideNotation|<div style="align-self:center;text-align:left ;padding-left :4px;">9</div>
</div>{{{hideNotation|<div style="align-self:center;text-align:left ;z-index:1;padding-left :4px;">9</div>
<div style="align-self:center;text-align:right;padding-right:4px;">8</div>}}}
<div style="align-self:center;text-align:right;z-index:1;padding-right:4px;">8</div>}}}
<div style="display:grid;">
<div style="display:grid;">
  <div style="display:grid;place-items:center;border-radius:calc({{{squareSize|36}}}px / 2);outline-offset:-5px;outline:solid {{{highlighta8|}}}px;position:relative;">
  <div style="display:grid;place-items:center;border-radius:calc({{{squareSize|36}}}px / 2);outline-offset:-5px;outline:solid {{{highlighta8|}}}px;position:relative;">
Line 193: Line 191:
   <div style="position:absolute;">{{{j8|}}}</div>
   <div style="position:absolute;">{{{j8|}}}</div>
  </div>
  </div>
</div>{{{hideNotation|<div style="align-self:center;text-align:left ;padding-left :4px;">8</div>
</div>{{{hideNotation|<div style="align-self:center;text-align:left ;z-index:1;padding-left :4px;">8</div>
<div style="align-self:center;text-align:right;padding-right:4px;">7</div>}}}
<div style="align-self:center;text-align:right;z-index:1;padding-right:4px;">7</div>}}}
<div style="display:grid;">
<div style="display:grid;">
  <div style="display:grid;place-items:center;border-radius:calc({{{squareSize|36}}}px / 2);outline-offset:-5px;outline:solid {{{highlighta7|}}}px;position:relative;">
  <div style="display:grid;place-items:center;border-radius:calc({{{squareSize|36}}}px / 2);outline-offset:-5px;outline:solid {{{highlighta7|}}}px;position:relative;">
Line 241: Line 239:
   <div style="position:absolute;">{{{j7|}}}</div>
   <div style="position:absolute;">{{{j7|}}}</div>
  </div>
  </div>
</div>{{{hideNotation|<div style="align-self:center;text-align:left ;padding-left :4px;">7</div>
</div>{{{hideNotation|<div style="align-self:center;text-align:left ;z-index:1;padding-left :4px;">7</div>
<div style="align-self:center;text-align:right;padding-right:4px;">6</div>}}}
<div style="align-self:center;text-align:right;z-index:1;padding-right:4px;">6</div>}}}
<div style="display:grid;">
<div style="display:grid;">
  <div style="display:grid;place-items:center;border-radius:calc({{{squareSize|36}}}px / 2);outline-offset:-5px;outline:solid {{{highlighta6|}}}px;position:relative;">
  <div style="display:grid;place-items:center;border-radius:calc({{{squareSize|36}}}px / 2);outline-offset:-5px;outline:solid {{{highlighta6|}}}px;position:relative;">
Line 287: Line 285:
   <div style="position:absolute;">{{{j6|}}}</div>
   <div style="position:absolute;">{{{j6|}}}</div>
  </div>
  </div>
</div>{{{hideNotation|<div style="align-self:center;text-align:left ;padding-left :4px;">6</div>
</div>{{{hideNotation|<div style="align-self:center;text-align:left ;z-index:1;padding-left :4px;">6</div>
<div style="align-self:center;text-align:right;padding-right:4px;">5</div>}}}
<div style="align-self:center;text-align:right;z-index:1;padding-right:4px;">5</div>}}}
<div style="display:grid;">
<div style="display:grid;">
  <div style="display:grid;place-items:center;border-radius:calc({{{squareSize|36}}}px / 2);outline-offset:-5px;outline:solid {{{highlighta5|}}}px;position:relative;">
  <div style="display:grid;place-items:center;border-radius:calc({{{squareSize|36}}}px / 2);outline-offset:-5px;outline:solid {{{highlighta5|}}}px;position:relative;">
Line 334: Line 332:
   <div style="position:absolute;">{{{j5|}}}</div>
   <div style="position:absolute;">{{{j5|}}}</div>
  </div>
  </div>
</div>{{{hideNotation|<div style="align-self:center;text-align:left ;padding-left :4px;">5</div>
</div>{{{hideNotation|<div style="align-self:center;text-align:left ;z-index:1;padding-left :4px;">5</div>
<div style="align-self:center;text-align:right;padding-right:4px;">4</div>}}}
<div style="align-self:center;text-align:right;z-index:1;padding-right:4px;">4</div>}}}
<div style="display:grid;">
<div style="display:grid;">
  <div style="display:grid;place-items:center;border-radius:calc({{{squareSize|36}}}px / 2);outline-offset:-5px;outline:solid {{{highlighta4|}}}px;position:relative;">
  <div style="display:grid;place-items:center;border-radius:calc({{{squareSize|36}}}px / 2);outline-offset:-5px;outline:solid {{{highlighta4|}}}px;position:relative;">
Line 380: Line 378:
   <div style="position:absolute;">{{{j4|}}}</div>
   <div style="position:absolute;">{{{j4|}}}</div>
  </div>
  </div>
</div>{{{hideNotation|<div style="align-self:center;text-align:left ;padding-left :4px;">4</div>
</div>{{{hideNotation|<div style="align-self:center;text-align:left ;z-index:1;padding-left :4px;">4</div>
<div style="align-self:center;text-align:right;padding-right:4px;">3</div>}}}
<div style="align-self:center;text-align:right;z-index:1;padding-right:4px;">3</div>}}}
<div style="display:grid;">
<div style="display:grid;">
  <div style="display:grid;place-items:center;border-radius:calc({{{squareSize|36}}}px / 2);outline-offset:-5px;outline:solid {{{highlighta3|}}}px;position:relative;">
  <div style="display:grid;place-items:center;border-radius:calc({{{squareSize|36}}}px / 2);outline-offset:-5px;outline:solid {{{highlighta3|}}}px;position:relative;">
Line 428: Line 426:
   <div style="position:absolute;">{{{j3|}}}</div>
   <div style="position:absolute;">{{{j3|}}}</div>
  </div>
  </div>
</div>{{{hideNotation|<div style="align-self:center;text-align:left ;padding-left :4px;">3</div>
</div>{{{hideNotation|<div style="align-self:center;text-align:left ;z-index:1;padding-left :4px;">3</div>
<div style="align-self:center;text-align:right;padding-right:4px;">2</div>}}}
<div style="align-self:center;text-align:right;z-index:1;padding-right:4px;">2</div>}}}
<div style="display:grid;">
<div style="display:grid;">
  <div style="display:grid;place-items:center;border-radius:calc({{{squareSize|36}}}px / 2);outline-offset:-5px;outline:solid {{{highlighta2|}}}px;position:relative;">
  <div style="display:grid;place-items:center;border-radius:calc({{{squareSize|36}}}px / 2);outline-offset:-5px;outline:solid {{{highlighta2|}}}px;position:relative;">
Line 474: Line 472:
   <div style="position:absolute;">{{{j2|}}}</div>
   <div style="position:absolute;">{{{j2|}}}</div>
  </div>
  </div>
</div>{{{hideNotation|<div style="align-self:center;text-align:left ;padding-left :4px;">2</div>
</div>{{{hideNotation|<div style="align-self:center;text-align:left ;z-index:1;padding-left :4px;">2</div>
<div style="align-self:center;text-align:right;padding-right:4px;">1</div>}}}
<div style="align-self:center;text-align:right;z-index:1;padding-right:4px;">1</div>}}}
<div style="display:grid;">
<div style="display:grid;">
  <div style="display:grid;place-items:center;border-radius:calc({{{squareSize|36}}}px / 2);outline-offset:-5px;outline:solid {{{highlighta1|}}}px;position:relative;">
  <div style="display:grid;place-items:center;border-radius:calc({{{squareSize|36}}}px / 2);outline-offset:-5px;outline:solid {{{highlighta1|}}}px;position:relative;">
Line 520: Line 518:
   <div style="position:absolute;">{{{j1|}}}</div>
   <div style="position:absolute;">{{{j1|}}}</div>
  </div>
  </div>
</div>{{{hideNotation|<div style="align-self:center;text-align:left;padding-left:4px;">1</div>
</div>{{{hideNotation|<div style="align-self:center;text-align:left;z-index:1;padding-left:4px;">1</div>
<div></div>
<div></div>
<div style="align-self:start;text-align:center;">A</div>
<div style="align-self:start;text-align:center;z-index:1;">A</div>
<div style="align-self:start;text-align:center;">B</div>
<div style="align-self:start;text-align:center;z-index:1;">B</div>
<div style="align-self:start;text-align:center;">C</div>
<div style="align-self:start;text-align:center;z-index:1;">C</div>
<div style="align-self:start;text-align:center;">D</div>
<div style="align-self:start;text-align:center;z-index:1;">D</div>
<div style="align-self:start;text-align:center;">E</div>
<div style="align-self:start;text-align:center;z-index:1;">E</div>
<div style="align-self:start;text-align:center;">F</div>
<div style="align-self:start;text-align:center;z-index:1;">F</div>
<div style="align-self:start;text-align:center;">G</div>
<div style="align-self:start;text-align:center;z-index:1;">G</div>
<div style="align-self:start;text-align:center;">H</div>
<div style="align-self:start;text-align:center;z-index:1;">H</div>
<div style="align-self:start;text-align:center;">J</div>
<div style="align-self:start;text-align:center;z-index:1;">J</div>
<div></div>}}}
<div></div>}}}
</div>
</div>

Revision as of 22:30, 17 December 2021

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') also display on BGA's Rules Summary pages e.g. https://boardgamearena.com/gamepanel?game=classicgo under HOW TO PLAY? > See More > RULES SUMMARY

Empty board template

{{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= 
}}

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
36
{{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

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 5

| e6={{whiteStone}}

| highlighte4=blue 2
}}

Gomoku

Freestyle

Renju

Caro

Omok

Ninuki-renju

Pente

Connect 6