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

Wiki formatting: Difference between revisions

From Board Game Arena
Jump to navigation Jump to search
(Added a game piece and board sections, edited dice and table sections, added upload image link)
Line 40: Line 40:
'''Term''': Definition
'''Term''': Definition
</pre>
</pre>
==Dice==
Six-sided dice can be displayed during a line of text using the whiteDie template, eg. <code><nowiki>{{whiteDie|=6}}</nowiki></code>.
It looks like they have line breaks around them ''unless'' the sentence they are part of has a bullet, numbered list element or ":" indentation at the start, in which case the text flows before and after the die. For example:
* A {{whiteDie|=1}} is known as a "Paco".
Dice are available in four colours: whiteDie, yellowDie, orangeDie and blackDie:
{{whiteDie|=1}}
{{yellowDie|=2}}
{{orangeDie|=3}}
{{blackDie|=4}}


==Headings==
==Headings==
Line 85: Line 70:


==Images==
==Images==
'''[[Special:Upload|Upload an image]]'''


Attempting to specify an image size in image markup (eg. <code><nowiki>[[File:Marrakech example.jpg|300px]]</nowiki></code>) will work in the wiki view, but will cause the image to appear blank in the BGA view (as it tries to display a resized image which does not exist in the directory it's referencing).
Attempting to specify an image size in image markup (eg. <code><nowiki>[[File:Marrakech example.jpg|300px]]</nowiki></code>) will work in the wiki view, but will cause the image to appear blank in the BGA view (as it tries to display a resized image which does not exist in the directory it's referencing).
Line 131: Line 118:
3. Discard
3. Discard
</pre>
</pre>
==Game pieces==
'''[[:Category:GamePieceTemplates]]'''
Generic game pieces including:
* Chess pieces
* Go stones
* Reversi tokens
* Draughts
* Dice
===Dice===
Six-sided dice can be displayed using a template, eg. <code><nowiki>{{whiteDie|=6}}</nowiki></code>.
See '''[[Gamehelpdudo|GameHelpDudo]]''' for examples.
Dice are available in four colours: whiteDie, yellowDie, orangeDie and blackDie:
{{whiteDie|=1}}
{{yellowDie|=2}}
{{orangeDie|=3}}
{{blackDie|=4}}
==Game boards==
'''[[:Category:GameBoardTemplates]]'''
There are a few customisable game boards available:
* [[:Template:Chessboard]]
* [[:Template:Goboard9]]
* [[:Template:Quoridorboard]]


==Playing cards==
==Playing cards==
'''[[:Category:Card_templates]]'''


[[:Template:Card]] can be used to display playing card icons.
[[:Template:Card]] can be used to display playing card icons.
Line 159: Line 181:
|}
|}


[[:Template:Cardholder]] can display suitless cards (designed for Hanabi) in a "holder", with "clue" notes. See the linked template for further documentation.
[[:Template:Cardholder]] can display suitless cards (designed for [[Gamehelphanabi|GameHelpHanabi]]) in a "holder", with "clue" notes. See the linked template for further documentation.


==Tables==
==Tables==
Line 165: Line 187:
Table borders are stripped by the BGA display. They can be added back by adding a fixed width <code>border=</code> to the image markup, eg:
Table borders are stripped by the BGA display. They can be added back by adding a fixed width <code>border=</code> to the image markup, eg:


<pre>{| class="wikitable" border="2"
<pre>{| class="wikitable" style="width:auto;text-align:center;" border="2"
|-
|-
!0-90
!0-90
Line 179: Line 201:
will display as:
will display as:


{| class="wikitable" border="2"
{| class="wikitable" style="width:auto;text-align:center;" border="2"
|-
|-
!0-90
!0-90
Line 192: Line 214:


Tables default to 100% width on the BGA view: if you want to override that, you can do so by adding something like <code>style="width:10%"</code> after the <code>border="2"</code>.
Tables default to 100% width on the BGA view: if you want to override that, you can do so by adding something like <code>style="width:10%"</code> after the <code>border="2"</code>.
<code>style="width:auto;text-align:center;"</code>:
# <code>width:auto;</code> fits column width to the contents
# <code>text-align:center;</code> centres the contents
===Option grids===
Where a game has multiple interdependent options, it can be useful to have a visual option grid.
Not for the faint-hearted, but with a lot of inline css, it is possible to create a nice aesthetic and intuitive grid that is responsive to screen size. For example for '''[[Gamehelppente|GameHelpPente]]''':
<div style="display:flex;flex-flow:row wrap;max-width:max-content;border:0.1rem solid #aaa;">
<div style="box-shadow:inset 0 0 0 0.1rem #f0f;background:#fef;padding:0.5rem;width:max-content;">Training mode only</div>
<div style="box-shadow:inset 0 0 0 0.1rem #0f0;background:#efe;padding:0.5rem;width:max-content;">Default</div>
<div style="box-shadow:inset 0 0 0 0.1rem #ddd;background:#fff;padding:0.5rem;width:max-content;">Other</div>
</div>
<div style="display:grid;max-width:50rem;border:0.1rem solid #aaa;">
<div  style="grid-area: 1 / 1 /  3 / 2;box-shadow:inset 0 0 0 0.1rem #ddd;background:#fff;padding:0.5rem;font-weight:bold;"># of players</div>
  <div  style="grid-area: 1 / 2 /  3 / 3;box-shadow:inset 0 0 0 0.1rem #ddd;background:#fff;padding:0.5rem;font-weight:bold;text-align:center;font-size:1.2rem;">2</div>
  <div  style="grid-area: 1 / 5 /  3 / 6;box-shadow:inset 0 0 0 0.1rem #ddd;background:#fff;padding:0.5rem;font-weight:bold;text-align:center;font-size:1.2rem;">3</div>
  <div  style="grid-area: 1 / 3 /  2 / 5;box-shadow:inset 0 0 0 0.1rem #ddd;background:#fff;padding:0.5rem;font-weight:bold;text-align:center;font-size:1.2rem;">4</div>
  <div style="grid-area: 2 / 4 /  3 / 5;box-shadow:inset 0 0 0 0.1rem #0f0;background:#efe;padding:0.5rem;font-weight:bold;text-align:center;">Free-for-all</div>
  <div style="grid-area: 2 / 3 /  3 / 4;box-shadow:inset 0 0 0 0.1rem #ddd;background:#fff;padding:0.5rem;font-weight:bold;text-align:center;">Team</div>
<div  style="grid-area: 3 / 1 /  4 / 2;box-shadow:inset 0 0 0 0.1rem #0f0;background:#efe;padding:0.5rem;font-weight:bold;">All options win</div>
  <div  style="grid-area: 3 / 2 /  4 / 4;box-shadow:inset 0 0 0 0.1rem #ddd;background:#fff;padding:0.5rem;">Align exactly <b>5</b> stones in a row</div>
  <div  style="grid-area: 3 / 4 /  4 / 6;box-shadow:inset 0 0 0 0.1rem #ddd;background:#fff;padding:0.5rem;">Align exactly <b>4</b> stones in a row</div>
<div  style="grid-area: 4 / 1 /  5 / 2;box-shadow:inset 0 0 0 0.1rem #0f0;background:#efe;padding:0.5rem;font-weight:bold;">Overline win</div>
  <div  style="grid-area: 4 / 2 /  5 / 4;box-shadow:inset 0 0 0 0.1rem #ddd;background:#fff;padding:0.5rem;">May align more than <b>5</b> stones in a row</div>
  <div  style="grid-area: 4 / 4 /  5 / 6;box-shadow:inset 0 0 0 0.1rem #ddd;background:#fff;padding:0.5rem;">May align more than <b>4</b> stones in a row</div>
<div  style="grid-area: 5 / 1 /  6 / 2;box-shadow:inset 0 0 0 0.1rem #0f0;background:#efe;padding:0.5rem;font-weight:bold;">Capture win</div>
  <div  style="grid-area: 5 / 2 /  6 / 4;box-shadow:inset 0 0 0 0.1rem #ddd;background:#fff;padding:0.5rem;">Make <b>5</b> captures</div>
  <div  style="grid-area: 5 / 4 /  6 / 6;box-shadow:inset 0 0 0 0.1rem #ddd;background:#fff;padding:0.5rem;">Make <b>4</b> captures</div>
<div  style="grid-area: 6 / 1 /  7 / 2;box-shadow:inset 0 0 0 0.1rem #ddd;background:#fff;padding:0.5rem;font-weight:bold;">Capture three</div>
  <div  style="grid-area: 6 / 2 /  7 / 6;box-shadow:inset 0 0 0 0.1rem #ddd;background:#fff;padding:0.5rem;">May capture two <b>or three</b> stones (Keryo Pente)</div>
<div  style="grid-area: 7 / 1 / 10 / 2;box-shadow:inset 0 0 0 0.1rem #0f0;background:#efe;padding:0.5rem;font-weight:bold;">Self-capture</div>
  <div  style="grid-area: 7 / 2 /  8 / 6;box-shadow:inset 0 0 0 0.1rem #0f0;background:#efe;padding:0.5rem;">No effect: a stone may be placed in a capture position</div>
  <div  style="grid-area: 8 / 2 /  9 / 6;box-shadow:inset 0 0 0 0.1rem #ddd;background:#fff;padding:0.5rem;">Self-capture: results in <b>self-capture!</b> (Poof Pente)</div>
  <div  style="grid-area: 9 / 2 / 10 / 6;box-shadow:inset 0 0 0 0.1rem #ddd;background:#fff;padding:0.5rem;">Forbidden: a stone may <b>not</b> be placed in a capture position</b></div>
<div  style="grid-area:10 / 1 / 12 / 2;box-shadow:inset 0 0 0 0.1rem #ddd;background:#fff;padding:0.5rem;font-weight:bold;">Overtime capture</div>
  <div  style="grid-area:10 / 2 / 11 / 6;box-shadow:inset 0 0 0 0.1rem #ddd;background:#fff;padding:0.5rem;">Break the line: may capture to break a winning line (Boat Pente)</div>
  <div  style="grid-area:11 / 2 / 12 / 6;box-shadow:inset 0 0 0 0.1rem #ddd;background:#fff;padding:0.5rem;">Capture the line: may capture an entire winning line</div>
<div  style="grid-area:12 / 1 / 14 / 2;box-shadow:inset 0 0 0 0.1rem #0f0;background:#efe;padding:0.5rem;font-weight:bold;">Mixed capture</div>
  <div  style="grid-area:12 / 3 / 13 / 6;box-shadow:inset 0 0 0 0.1rem #0f0;background:#efe;padding:0.5rem;">Enabled: May capture stones of mixed colour</div>
  <div  style="grid-area:13 / 2 / 14 / 6;box-shadow:inset 0 0 0 0.1rem #ddd;background:#fff;padding:0.5rem;">Disabled: Captures of one colour only</div>
</div>
<pre>
<div style="display:flex;flex-flow:row wrap;max-width:max-content;border:0.1rem solid #aaa;">
<div style="box-shadow:inset 0 0 0 0.1rem #f0f;background:#fef;padding:0.5rem;width:max-content;">Training mode only</div>
<div style="box-shadow:inset 0 0 0 0.1rem #0f0;background:#efe;padding:0.5rem;width:max-content;">Default</div>
<div style="box-shadow:inset 0 0 0 0.1rem #ddd;background:#fff;padding:0.5rem;width:max-content;">Other</div>
</div>
<div style="display:grid;max-width:50rem;border:0.1rem solid #aaa;">
<div  style="grid-area: 1 / 1 /  3 / 2;box-shadow:inset 0 0 0 0.1rem #ddd;background:#fff;padding:0.5rem;font-weight:bold;"># of players</div>
  <div  style="grid-area: 1 / 2 /  3 / 3;box-shadow:inset 0 0 0 0.1rem #ddd;background:#fff;padding:0.5rem;font-weight:bold;text-align:center;font-size:1.2rem;">2</div>
  <div  style="grid-area: 1 / 5 /  3 / 6;box-shadow:inset 0 0 0 0.1rem #ddd;background:#fff;padding:0.5rem;font-weight:bold;text-align:center;font-size:1.2rem;">3</div>
  <div  style="grid-area: 1 / 3 /  2 / 5;box-shadow:inset 0 0 0 0.1rem #ddd;background:#fff;padding:0.5rem;font-weight:bold;text-align:center;font-size:1.2rem;">4</div>
  <div style="grid-area: 2 / 4 /  3 / 5;box-shadow:inset 0 0 0 0.1rem #0f0;background:#efe;padding:0.5rem;font-weight:bold;text-align:center;">Free-for-all</div>
  <div style="grid-area: 2 / 3 /  3 / 4;box-shadow:inset 0 0 0 0.1rem #ddd;background:#fff;padding:0.5rem;font-weight:bold;text-align:center;">Team</div>
<div  style="grid-area: 3 / 1 /  4 / 2;box-shadow:inset 0 0 0 0.1rem #0f0;background:#efe;padding:0.5rem;font-weight:bold;">All options win</div>
  <div  style="grid-area: 3 / 2 /  4 / 4;box-shadow:inset 0 0 0 0.1rem #ddd;background:#fff;padding:0.5rem;">Align exactly <b>5</b> stones in a row</div>
  <div  style="grid-area: 3 / 4 /  4 / 6;box-shadow:inset 0 0 0 0.1rem #ddd;background:#fff;padding:0.5rem;">Align exactly <b>4</b> stones in a row</div>
<div  style="grid-area: 4 / 1 /  5 / 2;box-shadow:inset 0 0 0 0.1rem #0f0;background:#efe;padding:0.5rem;font-weight:bold;">Overline win</div>
  <div  style="grid-area: 4 / 2 /  5 / 4;box-shadow:inset 0 0 0 0.1rem #ddd;background:#fff;padding:0.5rem;">May align more than <b>5</b> stones in a row</div>
  <div  style="grid-area: 4 / 4 /  5 / 6;box-shadow:inset 0 0 0 0.1rem #ddd;background:#fff;padding:0.5rem;">May align more than <b>4</b> stones in a row</div>
<div  style="grid-area: 5 / 1 /  6 / 2;box-shadow:inset 0 0 0 0.1rem #0f0;background:#efe;padding:0.5rem;font-weight:bold;">Capture win</div>
  <div  style="grid-area: 5 / 2 /  6 / 4;box-shadow:inset 0 0 0 0.1rem #ddd;background:#fff;padding:0.5rem;">Make <b>5</b> captures</div>
  <div  style="grid-area: 5 / 4 /  6 / 6;box-shadow:inset 0 0 0 0.1rem #ddd;background:#fff;padding:0.5rem;">Make <b>4</b> captures</div>
<div  style="grid-area: 6 / 1 /  7 / 2;box-shadow:inset 0 0 0 0.1rem #ddd;background:#fff;padding:0.5rem;font-weight:bold;">Capture three</div>
  <div  style="grid-area: 6 / 2 /  7 / 6;box-shadow:inset 0 0 0 0.1rem #ddd;background:#fff;padding:0.5rem;">May capture two <b>or three</b> stones (Keryo Pente)</div>
<div  style="grid-area: 7 / 1 / 10 / 2;box-shadow:inset 0 0 0 0.1rem #0f0;background:#efe;padding:0.5rem;font-weight:bold;">Self-capture</div>
  <div  style="grid-area: 7 / 2 /  8 / 6;box-shadow:inset 0 0 0 0.1rem #0f0;background:#efe;padding:0.5rem;">No effect: a stone may be placed in a capture position</div>
  <div  style="grid-area: 8 / 2 /  9 / 6;box-shadow:inset 0 0 0 0.1rem #ddd;background:#fff;padding:0.5rem;">Self-capture: results in <b>self-capture!</b> (Poof Pente)</div>
  <div  style="grid-area: 9 / 2 / 10 / 6;box-shadow:inset 0 0 0 0.1rem #ddd;background:#fff;padding:0.5rem;">Forbidden: a stone may <b>not</b> be placed in a capture position</b></div>
<div  style="grid-area:10 / 1 / 12 / 2;box-shadow:inset 0 0 0 0.1rem #ddd;background:#fff;padding:0.5rem;font-weight:bold;">Overtime capture</div>
  <div  style="grid-area:10 / 2 / 11 / 6;box-shadow:inset 0 0 0 0.1rem #ddd;background:#fff;padding:0.5rem;">Break the line: may capture to break a winning line (Boat Pente)</div>
  <div  style="grid-area:11 / 2 / 12 / 6;box-shadow:inset 0 0 0 0.1rem #ddd;background:#fff;padding:0.5rem;">Capture the line: may capture an entire winning line</div>
<div  style="grid-area:12 / 1 / 14 / 2;box-shadow:inset 0 0 0 0.1rem #0f0;background:#efe;padding:0.5rem;font-weight:bold;">Mixed capture</div>
  <div  style="grid-area:12 / 3 / 13 / 6;box-shadow:inset 0 0 0 0.1rem #0f0;background:#efe;padding:0.5rem;">Enabled: May capture stones of mixed colour</div>
  <div  style="grid-area:13 / 2 / 14 / 6;box-shadow:inset 0 0 0 0.1rem #ddd;background:#fff;padding:0.5rem;">Disabled: Captures of one colour only</div>
</div>
</pre>

Revision as of 13:30, 14 April 2023

These are some tips on how to make wiki rules pages display in a readable way on the BGA site beneath a game, with some notes on elements which do not work as expected, and useful elements which don't appear to be documented anywhere. Many tags and methods of formatting are completely stripped out by the BGA website when displaying wiki ruleset, but there are some workarounds. Note also that some elements display differently depending on whether you're reading the rules at the bottom of a live game page, or on the game's "about" page.

Feel free to add additional issues and advice.

(This page was created as a result of this forum thread. A bug report to make bullets visible within the rulesets on the BGA interface has been open with no response since April 2020.)

Bullet points

The BGA rules display strips all bullet points, if the regular wiki bullet markup of asterisks is used.

A common solution seems to be to add bullet-point unicode symbols, or hyphens. This also requires lines to be separated by paragraph breaks or <br/> tags, or to be used in addition to asterisked bullet points, otherwise all the points appear on the same line.

• Draw

• Play

• Discard
• Draw<br/>
• Play<br/>
• Discard
*• Draw
*• Play
*• Discard

In the first two cases a blank line should be left between the start of the list and the end of the previous paragraph, otherwise the first point is merged into the previous paragraph.

Definition list

";Term: Definition" wiki markup lists don't bold the terms or indent the definitions in the BGA view, making them much harder to read. A workaround is to manually bold each term, eg:

'''Term''': Definition

Headings

When viewed during a game: A level two heading ("==") will appear with a box around it on the BGA view, and be uppercased. A level three heading ("===") will give a heading within that box, in a bold font the same size as all other text. A level four heading ("====") is indistinguishable from a level three heading.

When viewed on a game's about page: All rules are in a single box, with level two through four headings both being bold fonts in their original cases. Level two headings are slightly larger than the other two.

For example, in the rules to Hardback are marked up as:

== How To Play ==

Hardback is a deck-building word game. Each player starts with their own deck of 10 Starter cards: The 8 letters (A, E, I, L, N, R, S, T) plus 2 random letters from the set (B, C, D, G, H, M, O, P, U, Y). Each player has their own draw and discard piles. A shared deck of 140 cards from 4 other genres is used to form the offer row. The 5 genres in the game are: Starter (grey), Adventure (yellow), Horror (green), Mystery (blue), Romance (red). A colored bar in the player panel displays the current composition of each player's deck.

=== Spell A Word ===

Each round you receive a hand of 5 cards from your deck...

which will be rendered during a game as:

Ruleset heading example.png

Icons

Some game rules, including Gamehelpjumpdrive and Gamehelpspacestationphoenix, use keywords such as [METAL] and [PLANET].

When a player reads these rules during a BGA game, these tags get converted into icons. When the player reads the rules on the game panel page or the wiki, they remain as text.

This feature seems to be undocumented, and has been confirmed as a custom option that a developer can choose to create for a game.

Images

Upload an image

Attempting to specify an image size in image markup (eg. [[File:Marrakech example.jpg|300px]]) will work in the wiki view, but will cause the image to appear blank in the BGA view (as it tries to display a resized image which does not exist in the directory it's referencing).

A solution is to display images at the default size (meaning that they must also be uploaded at the size you want them to appear), eg:

[[File:Marrakech example.jpg]]

It's also possible to add rollover text if desired:

[[File:Marrakech example.jpg|Example move]]

Also, external links will also work within BGA if you want the image to link to a URL:

[[File:Versions.png|link=https://lumberjacks-studio.com/en/project/trek-12_en/]]

Infoboxes

These are only used by a few game pages, but Template:InfoBox, Template:InfoBoxes and Template:InfoBoxes3 allow game information to be displayed in one, two or three coloured boxes, in a way that also works in the BGA view. They look like this:

Example
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Click through to the templates above for usage instructions.

In-article links

Linking to a section within a rules page (eg. [[#endgame|the Endgame phase]]) will work within the rules on a live game, but not on the gamepanel page (eg. https://boardgamearena.com/gamepanel?game=hanabi#Black_Powder). If the user clicks on such a link on a gamepanel page, the page will simply reload without taking them to that section.

Numbered lists

Like bullet points, a numbered list in wiki markup (with a "#" before each line) doesn't display correctly: all of the numbers are stripped out.

Workarounds are to write out the numbers by hand, with either paragraph breaks or <br/> tags between them:

1. Draw

2. Play

3. Discard
1. Draw<br/>
2. Play<br/>
3. Discard

Game pieces

Category:GamePieceTemplates

Generic game pieces including:

  • Chess pieces
  • Go stones
  • Reversi tokens
  • Draughts
  • Dice

Dice

Six-sided dice can be displayed using a template, eg. {{whiteDie|=6}}.

See GameHelpDudo for examples.

Dice are available in four colours: whiteDie, yellowDie, orangeDie and blackDie:

white die yellow die orange die black die

Game boards

Category:GameBoardTemplates

There are a few customisable game boards available:

Playing cards

Category:Card_templates

Template:Card can be used to display playing card icons.

Playing card template examples for a BGA wiki page
Type {{club}} {{spade}} {{heart}} {{diamond}} {{cardBack}} {{card|=A}} {{club|=A}} {{club|=A|colour=green}}
Result ​♣ ​♠ ​♥ ​♦ 🟔     ​♣ ​♣

Template:Cardholder can display suitless cards (designed for GameHelpHanabi) in a "holder", with "clue" notes. See the linked template for further documentation.

Tables

Table borders are stripped by the BGA display. They can be added back by adding a fixed width border= to the image markup, eg:

{| class="wikitable" style="width:auto;text-align:center;" border="2"
|-
!0-90
|⭐
|-
!91-110
|⭐⭐
|-
!111-125
|⭐⭐⭐
|}

will display as:

0-90
91-110 ⭐⭐
111-125 ⭐⭐⭐

Tables default to 100% width on the BGA view: if you want to override that, you can do so by adding something like style="width:10%" after the border="2".

style="width:auto;text-align:center;":

  1. width:auto; fits column width to the contents
  2. text-align:center; centres the contents

Option grids

Where a game has multiple interdependent options, it can be useful to have a visual option grid.

Not for the faint-hearted, but with a lot of inline css, it is possible to create a nice aesthetic and intuitive grid that is responsive to screen size. For example for GameHelpPente:

Training mode only
Default
Other
# of players
2
3
4
Free-for-all
Team
All options win
Align exactly 5 stones in a row
Align exactly 4 stones in a row
Overline win
May align more than 5 stones in a row
May align more than 4 stones in a row
Capture win
Make 5 captures
Make 4 captures
Capture three
May capture two or three stones (Keryo Pente)
Self-capture
No effect: a stone may be placed in a capture position
Self-capture: results in self-capture! (Poof Pente)
Forbidden: a stone may not be placed in a capture position
Overtime capture
Break the line: may capture to break a winning line (Boat Pente)
Capture the line: may capture an entire winning line
Mixed capture
Enabled: May capture stones of mixed colour
Disabled: Captures of one colour only
<div style="display:flex;flex-flow:row wrap;max-width:max-content;border:0.1rem solid #aaa;">
 <div style="box-shadow:inset 0 0 0 0.1rem #f0f;background:#fef;padding:0.5rem;width:max-content;">Training mode only</div>
 <div style="box-shadow:inset 0 0 0 0.1rem #0f0;background:#efe;padding:0.5rem;width:max-content;">Default</div>
 <div style="box-shadow:inset 0 0 0 0.1rem #ddd;background:#fff;padding:0.5rem;width:max-content;">Other</div> 
</div>

<div style="display:grid;max-width:50rem;border:0.1rem solid #aaa;">
 <div   style="grid-area: 1 / 1 /  3 / 2;box-shadow:inset 0 0 0 0.1rem #ddd;background:#fff;padding:0.5rem;font-weight:bold;"># of players</div>
  <div  style="grid-area: 1 / 2 /  3 / 3;box-shadow:inset 0 0 0 0.1rem #ddd;background:#fff;padding:0.5rem;font-weight:bold;text-align:center;font-size:1.2rem;">2</div>
  <div  style="grid-area: 1 / 5 /  3 / 6;box-shadow:inset 0 0 0 0.1rem #ddd;background:#fff;padding:0.5rem;font-weight:bold;text-align:center;font-size:1.2rem;">3</div>
  <div  style="grid-area: 1 / 3 /  2 / 5;box-shadow:inset 0 0 0 0.1rem #ddd;background:#fff;padding:0.5rem;font-weight:bold;text-align:center;font-size:1.2rem;">4</div>
   <div style="grid-area: 2 / 4 /  3 / 5;box-shadow:inset 0 0 0 0.1rem #0f0;background:#efe;padding:0.5rem;font-weight:bold;text-align:center;">Free-for-all</div>
   <div style="grid-area: 2 / 3 /  3 / 4;box-shadow:inset 0 0 0 0.1rem #ddd;background:#fff;padding:0.5rem;font-weight:bold;text-align:center;">Team</div>
 <div   style="grid-area: 3 / 1 /  4 / 2;box-shadow:inset 0 0 0 0.1rem #0f0;background:#efe;padding:0.5rem;font-weight:bold;">All options win</div>
  <div  style="grid-area: 3 / 2 /  4 / 4;box-shadow:inset 0 0 0 0.1rem #ddd;background:#fff;padding:0.5rem;">Align exactly <b>5</b> stones in a row</div>
  <div  style="grid-area: 3 / 4 /  4 / 6;box-shadow:inset 0 0 0 0.1rem #ddd;background:#fff;padding:0.5rem;">Align exactly <b>4</b> stones in a row</div>
 <div   style="grid-area: 4 / 1 /  5 / 2;box-shadow:inset 0 0 0 0.1rem #0f0;background:#efe;padding:0.5rem;font-weight:bold;">Overline win</div>
  <div  style="grid-area: 4 / 2 /  5 / 4;box-shadow:inset 0 0 0 0.1rem #ddd;background:#fff;padding:0.5rem;">May align more than <b>5</b> stones in a row</div>
  <div  style="grid-area: 4 / 4 /  5 / 6;box-shadow:inset 0 0 0 0.1rem #ddd;background:#fff;padding:0.5rem;">May align more than <b>4</b> stones in a row</div>
 <div   style="grid-area: 5 / 1 /  6 / 2;box-shadow:inset 0 0 0 0.1rem #0f0;background:#efe;padding:0.5rem;font-weight:bold;">Capture win</div>
  <div  style="grid-area: 5 / 2 /  6 / 4;box-shadow:inset 0 0 0 0.1rem #ddd;background:#fff;padding:0.5rem;">Make <b>5</b> captures</div>
  <div  style="grid-area: 5 / 4 /  6 / 6;box-shadow:inset 0 0 0 0.1rem #ddd;background:#fff;padding:0.5rem;">Make <b>4</b> captures</div>
 <div   style="grid-area: 6 / 1 /  7 / 2;box-shadow:inset 0 0 0 0.1rem #ddd;background:#fff;padding:0.5rem;font-weight:bold;">Capture three</div>
  <div  style="grid-area: 6 / 2 /  7 / 6;box-shadow:inset 0 0 0 0.1rem #ddd;background:#fff;padding:0.5rem;">May capture two <b>or three</b> stones (Keryo Pente)</div>
 <div   style="grid-area: 7 / 1 / 10 / 2;box-shadow:inset 0 0 0 0.1rem #0f0;background:#efe;padding:0.5rem;font-weight:bold;">Self-capture</div>
  <div  style="grid-area: 7 / 2 /  8 / 6;box-shadow:inset 0 0 0 0.1rem #0f0;background:#efe;padding:0.5rem;">No effect: a stone may be placed in a capture position</div>
  <div  style="grid-area: 8 / 2 /  9 / 6;box-shadow:inset 0 0 0 0.1rem #ddd;background:#fff;padding:0.5rem;">Self-capture: results in <b>self-capture!</b> (Poof Pente)</div>
  <div  style="grid-area: 9 / 2 / 10 / 6;box-shadow:inset 0 0 0 0.1rem #ddd;background:#fff;padding:0.5rem;">Forbidden: a stone may <b>not</b> be placed in a capture position</b></div>
 <div   style="grid-area:10 / 1 / 12 / 2;box-shadow:inset 0 0 0 0.1rem #ddd;background:#fff;padding:0.5rem;font-weight:bold;">Overtime capture</div>
  <div  style="grid-area:10 / 2 / 11 / 6;box-shadow:inset 0 0 0 0.1rem #ddd;background:#fff;padding:0.5rem;">Break the line: may capture to break a winning line (Boat Pente)</div>
  <div  style="grid-area:11 / 2 / 12 / 6;box-shadow:inset 0 0 0 0.1rem #ddd;background:#fff;padding:0.5rem;">Capture the line: may capture an entire winning line</div>
 <div   style="grid-area:12 / 1 / 14 / 2;box-shadow:inset 0 0 0 0.1rem #0f0;background:#efe;padding:0.5rem;font-weight:bold;">Mixed capture</div>
  <div  style="grid-area:12 / 3 / 13 / 6;box-shadow:inset 0 0 0 0.1rem #0f0;background:#efe;padding:0.5rem;">Enabled: May capture stones of mixed colour</div>
  <div  style="grid-area:13 / 2 / 14 / 6;box-shadow:inset 0 0 0 0.1rem #ddd;background:#fff;padding:0.5rem;">Disabled: Captures of one colour only</div>
</div>