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

Template:HCard: Difference between revisions

From Board Game Arena
Jump to navigation Jump to search
No edit summary
(reduced)
Line 1: Line 1:
<span style="display:inline-grid;grid:17px 4px calc(1px*{{{size|40}}}*{{{numberScale|0.8}}}) calc(1px*{{{size|40}}}*{{{symbolScale|0.5}}} + 4px)/calc(1px*{{{size|40}}}*{{{numberScale|0.8}}}*(1 - 0.15));width:min-content;"><span style="grid-area:1/1/3/1;width:93%;margin:0 1px;border-radius:3px 3px 0 0;color:{{{clueTextColour|black}}};background-color:lightgrey;display:{{{showClueNumber|none}}};"></span><span style="grid-area:1/1/3/1;width:93%;margin:0 1px;border-radius:3px 3px 0 0;color:{{{clueTextColour|black}}};background-color:{{{clueColour|}}};display:{{{showClueColour|none}}};"></span><span style="grid-area:1/1/2/1;display:{{{showClueNumber|none}}};place-self:center start;padding:0 3px;line-height:normal;font-family:Roboto,Arial,sans-serif;font-weight:500;font-size:16px;color:{{{clueTextColour|black}}};">{{{1|1}}}</span><span style="grid-area:1/1/2/1;display:{{{showClueColour|none}}};place-self:center end;padding:0 2px;line-height:normal;">{{gameIcon|imageFileName=Hanabi_numbers_icons_280.png|scale={{{clueSymbolScale|0.35}}}|width={{{size|40}}}*{{{clueSymbolScale|0.35}}}|height={{{size|40}}}*{{{clueSymbolScale|0.35}}}|x={{{size|40}}}*{{{clueSymbolScale|0.35}}}*(5 + {{{clueDarkSymbol|0}}})|y={{{size|40}}}*{{{clueSymbolScale|0.35}}}*{{{clueY|{{{y|0}}}}}}}}</span><span alt="{{{colourName|}}} {{{1|1}}}" style="grid-area:2/1/4/1;display:grid;place-items:center;background-color:#2F2342;border-radius:3px 3px 0 0;">{{gameIcon|imageFileName=Hanabi_numbers_icons_280.png|tooltip={{{colourName|}}} {{{1|1}}}|scale={{{numberScale|0.8}}}|width={{{size|40}}}*{{{numberScale|0.8}}}*(1 - 0.15)|height={{{size|40}}}*{{{numberScale|0.8}}}|x={{{size|40}}}*{{{numberScale|0.8}}}*({{{1|1}}} - (1 - 0.1))|y={{{size|40}}}*{{{numberScale|0.8}}}*{{{y|0}}}}}</span><span style="grid-area:4/1/5/1;display:grid;place-items:start center;background-color:#2F2342;border-radius:0 0 3px 3px;">{{gameIcon|imageFileName=Hanabi_numbers_icons_280.png|scale={{{symbolScale|0.5}}}|width={{{size|40}}}*{{{symbolScale|0.5}}}|height={{{size|40}}}*{{{symbolScale|0.5}}}|x={{{size|40}}}*{{{symbolScale|0.5}}}*5|y={{{size|40}}}*{{{symbolScale|0.5}}}*{{{y|0}}}}}</span></span><noinclude>
<div style="display:inline-grid;grid:17px 4px 28px 25px/24px;"><div style="grid-area:1/1/3/1;width:22px;margin:0 1px;border-radius:3px 3px 0 0;background-color:lightgrey;display:{{{showClueNumber|none}}};"></div><div style="grid-area:1/1/3/1;width:22px;margin:0 1px;border-radius:3px 3px 0 0;background-color:{{{clueColour|}}};display:{{{showClueColour|none}}};"></div><div style="grid-area:1/1/2/1;display:{{{showClueNumber|none}}};place-self:center start;padding:0 2px;line-height:normal;font-family:Roboto,Arial,sans-serif;font-weight:500;font-size:16px;color:#000;">{{{1|1}}}</div><div style="grid-area:1/1/2/1;display:{{{showClueColour|none}}};place-self:center end;padding:0 2px;">{{gameIcon|imageFileName=Hanabi_numbers_icons_140.png|scale=0.5|width=10.5|height=10.5|x=63|y=14*{{{clueY|{{{y|0}}}}}}}}</div><div alt="{{{colourName|}}} {{{1|1}}}" style="grid-area:2/1/4/1;display:grid;place-items:center;background-color:#2F2342;border-radius:3px 3px 0 0;">{{gameIcon|imageFileName=Hanabi_numbers_icons_140.png|tooltip={{{colourName|}}} {{{1|1}}}|width=21|height=28|x=21*({{{1|1}}} - 1)|y=28*{{{y|0}}}}}</div><div style="grid-area:4/1/5/1;display:grid;place-items:start center;background-color:#2F2342;border-radius:0 0 3px 3px;">{{gameIcon|imageFileName=Hanabi_numbers_icons_140.png|width=21|height=21|x=105|y=28*{{{y|0}}}}}</div></div><noinclude>


== Examples ==
== Examples ==
Line 47: Line 47:
   <div><code><nowiki>|clueColour={{g}}</nowiki></code></div>
   <div><code><nowiki>|clueColour={{g}}</nowiki></code></div>
   <div>'''''Required:''''' specify the clue colour: <code><nowiki>{{r}}</nowiki></code> <code><nowiki>{{y}}</nowiki></code> <code><nowiki>{{g}}</nowiki></code> <code><nowiki>{{b}}</nowiki></code> <code><nowiki>{{w}}</nowiki></code> <code><nowiki>{{m}}</nowiki></code></div>
   <div>'''''Required:''''' specify the clue colour: <code><nowiki>{{r}}</nowiki></code> <code><nowiki>{{y}}</nowiki></code> <code><nowiki>{{g}}</nowiki></code> <code><nowiki>{{b}}</nowiki></code> <code><nowiki>{{w}}</nowiki></code> <code><nowiki>{{m}}</nowiki></code></div>
   <div><code>clueTextColour</code></div>
   <div><code>darkSymbol</code></div>
  <div><code>black</code></div>
  <div><code><nowiki>|clueTextColour=white</nowiki></code></div>
  <div>'''''Required:''''' specify the number clue text colour as a [https://developer.mozilla.org/en-US/docs/Web/CSS/color CSS colour].</div>
  <div><code>clueDarkSymbol</code></div>
   <div><code>0</code></div>
   <div><code>0</code></div>
   <div><code><nowiki>|clueDarkSymbol=1</nowiki></code></div>
   <div><code><nowiki>|darkSymbol=1</nowiki></code></div>
   <div>'''''Required:''''' specify the clue symbol shade: light ⇨<code>0</code>, dark ⇨<code>1</code>.</div>
   <div>'''''Optional:''''' set the clue symbol shade to dark ⇨<code>1</code>.</div>
   <div><code>showClueNumber</code></div>
   <div><code>showClueNumber</code></div>
   <div><code>none</code></div>
   <div><code>none</code></div>
Line 63: Line 59:
   <div><code><nowiki>|showClueColour=</nowiki></code></div>
   <div><code><nowiki>|showClueColour=</nowiki></code></div>
   <div>'''''Optional:''''' display the colour clue.</div>
   <div>'''''Optional:''''' display the colour clue.</div>
  <div><code>size</code></div>
  <div><code>40</code></div>
  <div><code><nowiki>|size=30</nowiki></code></div>
  <div>'''''Optional:''''' specify the icon dimensions.</div>
  <div><code>numberScale</code></div>
  <div><code>0.8</code></div>
  <div><code><nowiki>|numberScale=1</nowiki></code></div>
  <div>'''''Optional:''''' specify the scale factor of the number image.</div>
  <div><code>colourScale</code></div>
  <div><code>0.5</code></div>
  <div><code><nowiki>|colourScale=1</nowiki></code></div>
  <div>'''''Optional:''''' specify the scale factor of the colour symbol image.</div>
  <div><code>clueColourScale</code></div>
  <div><code>0.35</code></div>
  <div><code><nowiki>|clueColourScale=0.5</nowiki></code></div>
  <div>'''''Optional:''''' specify the scale factor of the clue colour symbol image.</div>
</div>
</div>


[[Category:HanabiCards]]
[[Category:HanabiCards]]
</noinclude>
</noinclude>

Revision as of 03:48, 21 December 2023

1
​
1
​

Examples

1
​
1
​
2
​
2
​
3
​
3
​
4
​
4
​
5
​
5
​
5
​
5
​
5
​
5
​
{{Hr|1|n=|c=}}
{{Hy|2|n=|c=}}
{{Hg|3|n=|c=}}
{{Hb|4|n=|c=}}
{{Hw|5|n=|c=}}
{{Hm|5|{{g}}|2|n=|c=}}
{{Hk|5|n=}}

Available parameters

Parameter
Default value
Example
Description
1
1
|5
Required: specify the card rank (1/2/3/4/5).
y
0
|y=2
Required: specify the card colour as an integer: red ⇨0, yellow ⇨1, green ⇨2, blue ⇨3, white ⇨4, multicolour ⇨5, black powder ⇨6.
clueY
{{{y|0}}}
|clueY=2
Optional: specify the clue symbol colour for multicolour as an integer: red ⇨0, yellow ⇨1, green ⇨2, blue ⇨3, white ⇨4, multicolour ⇨5.
colourName
null
|colourName=green
Required: specify the colour word used for tooltips and screen readers.
clueColour
null
|clueColour={{g}}
Required: specify the clue colour: {{r}} {{y}} {{g}} {{b}} {{w}} {{m}}
darkSymbol
0
|darkSymbol=1
Optional: set the clue symbol shade to dark ⇨1.
showClueNumber
none
|showClueNumber=
Optional: display the rank clue.
showClueColour
none
|showClueColour=
Optional: display the colour clue.