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
(div ⇨ span)
m ({{{N|card}}})
 
(16 intermediate revisions by the same user not shown)
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:16px 4px 24px 28px/26px;place-items:baseline center;width:26px;vertical-align:-webkit-baseline-middle;"><div style="z-index:1;grid-area:2/1/4/1;display:grid;place-items:center;width:26px;border-radius:3px 3px 0 0;background:{{{b|#2F2342}}};color:{{{c}}};font:700 28px/1.1 Roboto;-webkit-text-stroke:1px rgba(255,255,255,{{{o|0}}});"><span style="font-size:0;">{{{N|card}}}</span>{{{1|&#8203;}}}</div><div aria-hidden="true" style="grid-area:4/1/5/1;display:grid;place-items:start center;width:26px;height:100%;border-radius:0 0 3px 3px;background:{{{b|#2F2342}}};color:{{{c|transparent}}};font:20px/1.1 cursive;">&#8203;{{{L|}}}</div><span style="visibility:hidd{{{sc|e}}}{{{sn|n}}};font-size:0;">,with a </span><div style="grid-area:1/1/3/1;place-self:start;width:12px;height:16px;margin:0 1px;border-radius:3px 3px 0 0;border:1px solid #2F2342;background:#ccc8;visibility:hidde{{{sn|n}}};"></div><span style="grid-area:1/1/3/1;width:22px;height:16px;border-radius:3px 3px 0 0;border:1px solid #2F2342;background:{{{cc|{{{c|transparent}}}}}};visibility:hidd{{{sc|e}}}n;"><span style="visibility:hidd{{{sc|e}}}n;font-size:0;">{{{cN|{{{N|card}}}}}}</span></span><span style="grid-area:1/1/3/1;place-self:start;visibility:hidde{{{sn|n}}};padding:0 3px;font:500 16px/1.15 Roboto;color:#2F2342;">{{{cn|{{{1|&#8203;}}}}}}</span><span style="visibility:hidd{{{sc|e}}}{{{sn|n}}};font-size:0;">clue,</span></div><noinclude>


== Examples ==
== Examples ==


<pre>
* {{Hr|1}} {{Hy|2|c=}} {{Hg|3|n=|c=}} {{Hb|4|n=|c}} {{Hw|5|n|c=}} {{Hm|5|n=|c=}} {{Hk|5|n=}} {{HBack|5|{{g}}|green|n=|c=}}
{{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=}}
</pre>


{{Hr|1|n=|c=}}
<code><nowiki>{{Hr|1}}</nowiki></code>
{{Hy|2|n=|c=}}
 
{{Hg|3|n=|c=}}
<code><nowiki>{{Hy|2|n|c=}}</nowiki></code>
{{Hb|4|n=|c=}}
 
{{Hw|5|n=|c=}}
<code><nowiki>{{Hg|3|n=|c=}}</nowiki></code>
{{Hm|5|{{g}}|2|n=|c=}}
 
{{Hk|5|n=}}
<code><nowiki>{{Hb|4|n=|c}}</nowiki></code>
 
<code><nowiki>{{Hw|5|n|c=}}</nowiki></code>
 
<code><nowiki>{{Hm|5|n=|c=}}</nowiki></code>
 
<code><nowiki>{{Hk|5|n=}}</nowiki></code>
 
<code><nowiki>{{HBack|5|{{g}}|green|n=|c=}}</nowiki></code>


== Available parameters ==
== Available parameters ==
<div style="display:grid;grid-template-columns:repeat(3,max-content) 2fr;gap:0.5rem;overflow:auto;text-overflow:ellipsis;">
<div style="display:grid;grid-template-columns:repeat(4,max-content) 2fr;gap:0.5rem;overflow:auto;text-overflow:ellipsis;">
   <div style="font-weight:bold;width:8rem;">Parameter</div>
   <div style="font-weight:bold;width:8rem;">Parameter Id</div>
  <div style="font-weight:bold;width:8rem;">Parameter Name</div>
   <div style="font-weight:bold;width:8rem;">Default value</div>
   <div style="font-weight:bold;width:8rem;">Default value</div>
   <div style="font-weight:bold;width:8rem;">Example</div>
   <div style="font-weight:bold;width:8rem;">Example</div>
   <div style="font-weight:bold;width:8rem;">Description</div>
   <div style="font-weight:bold;width:8rem;">Description</div>
   <div><code>1</code></div>
   <div><code>1</code></div>
   <div><code>1</code></div>
   <div><code>null</code></div>
  <div><code>&amp;#8203;</code> (ZeroWidthSpace)</div>
   <div><code><nowiki>|5</nowiki></code></div>
   <div><code><nowiki>|5</nowiki></code></div>
   <div>'''''Required:''''' specify the card rank (<code>1</code>/<code>2</code>/<code>3</code>/<code>4</code>/<code>5</code>).</div>
   <div>'''''Required:''''' specify the card rank (<code>1</code>/<code>2</code>/<code>3</code>/<code>4</code>/<code>5</code>).</div>
   <div><code>y</code></div>
   <div><code>c</code></div>
   <div><code>0</code></div>
  <div><code>colour</code></div>
   <div><code><nowiki>|y=2</nowiki></code></div>
   <div><code>transparent</code></div>
   <div>'''''Required:''''' specify the card colour as an integer: red ⇨<code>0</code>, yellow ⇨<code>1</code>, green ⇨<code>2</code>, blue ⇨<code>3</code>, white ⇨<code>4</code>, multicolour ⇨<code>5</code>, black powder ⇨<code>6</code>.</div>
   <div><code><nowiki>|c={{g}}</nowiki></code></div>
   <div><code>clueY</code></div>
   <div>'''''Required:''''' specify the card 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><nowiki>{{{y|0}}}</nowiki></code></div>
   <div><code>L</code></div>
   <div><code><nowiki>|clueY=2</nowiki></code></div>
   <div><code>colourLetter</code></div>
   <div>'''''Optional:''''' specify the clue symbol colour for multicolour as an integer: red ⇨<code>0</code>, yellow ⇨<code>1</code>, green ⇨<code>2</code>, blue ⇨<code>3</code>, white ⇨<code>4</code>, multicolour ⇨<code>5</code>.</div>
  <div><code>null</code></div>
   <div><code><nowiki>|L=g</nowiki></code></div>
   <div>'''''Required:''''' specify the card colour letter: red ⇨<code>r</code>, yellow ⇨<code>y</code>, green ⇨<code>g</code>, blue ⇨<code>b</code>, white ⇨<code>w</code>, multicolour ⇨<code>m</code>.</div>
  <div><code>N</code></div>
   <div><code>colourName</code></div>
   <div><code>colourName</code></div>
   <div><code>null</code></div>
   <div><code>card</code></div>
   <div><code><nowiki>|colourName=green</nowiki></code></div>
   <div><code><nowiki>|N=green</nowiki></code></div>
   <div>'''''Required:''''' specify the colour word used for tooltips and screen readers.</div>
   <div>'''''Required:''''' specify the colour word used for tooltips and screen readers.</div>
  <div><code>cN</code></div>
  <div><code>clueColourName</code></div>
  <div><code><nowiki>{{{N|card}}}</nowiki></code></div>
  <div><code><nowiki>|cN=green</nowiki></code></div>
  <div>'''''Optional:''''' specify the clue colour word used for tooltips and screen readers.</div>
  <div><code>cc</code></div>
   <div><code>clueColour</code></div>
   <div><code>clueColour</code></div>
   <div><code>null</code></div>
   <div><code><nowiki>{{{c|transparent}}}</nowiki></code></div>
   <div><code><nowiki>|clueColour={{g}}</nowiki></code></div>
   <div><code><nowiki>|cc={{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>'''''Optional:''''' 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>cn</code></div>
   <div><code>black</code></div>
  <div><code>clueNumber</code></div>
   <div><code><nowiki>|clueTextColour=white</nowiki></code></div>
   <div><code><nowiki>{{{1|&amp;#8203;}}}</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><nowiki>|cn={{1}}</nowiki></code></div>
   <div><code>clueDarkSymbol</code></div>
   <div>'''''Optional:''''' specify the clue rank: (<code>1</code>/<code>2</code>/<code>3</code>/<code>4</code>/<code>5</code>).</div>
   <div><code>o</code></div>
  <div><code>textOutline</code></div>
   <div><code>0</code></div>
   <div><code>0</code></div>
   <div><code><nowiki>|clueDarkSymbol=1</nowiki></code></div>
   <div><code><nowiki>|o=1</nowiki></code></div>
   <div>'''''Required:''''' specify the clue symbol shade: light ⇨<code>0</code>, dark ⇨<code>1</code>.</div>
   <div>'''''Optional:''''' specify the text outline opacity: transparent ⇨<code><nowiki>0</nowiki></code>, opaque ⇨<code><nowiki>1</nowiki></code></div>
<div><code>b</code></div>
<div><code>backgroundColour</code></div>
  <div><code>#2F2342</code> (black)</div>
  <div><code><nowiki>|b=grey</nowiki></code></div>
  <div>'''''Optional:''''' specify the background colour.</div>
  <div><code>sn</code></div>
   <div><code>showClueNumber</code></div>
   <div><code>showClueNumber</code></div>
   <div><code>none</code></div>
   <div>''visibility:hidde''<code>n</code></div>
   <div><code><nowiki>|showClueNumber=</nowiki></code></div>
   <div><code><nowiki>|sn=</nowiki></code></div>
   <div>'''''Optional:''''' display the rank clue.</div>
   <div>'''''Optional:''''' display the rank clue.</div>
  <div><code>sc</code></div>
   <div><code>showClueColour</code></div>
   <div><code>showClueColour</code></div>
   <div><code>none</code></div>
   <div>''visibility:hidd''<code>e</code>''n''</div>
   <div><code><nowiki>|showClueColour=</nowiki></code></div>
   <div><code><nowiki>|sc=</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>

Latest revision as of 08:00, 3 January 2024

card​
,with a
card​clue,

Examples

  • red1
    ,with a
    red1clue,
    yellow2
    ,with a
    yellow2clue,
    green3
    ,with a
    green3clue,
    blue4
    ,with a
    blue4clue,
    white5
    ,with a
    white5clue,
    multicolour5
    ,with a
    multicolour5clue,
    black powder5
    ,with a
    black powder5clue,
    card back​
    ,with a
    green5clue,

{{Hr|1}}

{{Hy|2|n|c=}}

{{Hg|3|n=|c=}}

{{Hb|4|n=|c}}

{{Hw|5|n|c=}}

{{Hm|5|n=|c=}}

{{Hk|5|n=}}

{{HBack|5|{{g}}|green|n=|c=}}

Available parameters

Parameter Id
Parameter Name
Default value
Example
Description
1
null
&#8203; (ZeroWidthSpace)
|5
Required: specify the card rank (1/2/3/4/5).
c
colour
transparent
|c={{g}}
Required: specify the card colour: {{r}} {{y}} {{g}} {{b}} {{w}} {{m}}
L
colourLetter
null
|L=g
Required: specify the card colour letter: red ⇨r, yellow ⇨y, green ⇨g, blue ⇨b, white ⇨w, multicolour ⇨m.
N
colourName
card
|N=green
Required: specify the colour word used for tooltips and screen readers.
cN
clueColourName
{{{N|card}}}
|cN=green
Optional: specify the clue colour word used for tooltips and screen readers.
cc
clueColour
{{{c|transparent}}}
|cc={{g}}
Optional: specify the clue colour: {{r}} {{y}} {{g}} {{b}} {{w}} {{m}}
cn
clueNumber
{{{1|&#8203;}}}
|cn={{1}}
Optional: specify the clue rank: (1/2/3/4/5).
o
textOutline
0
|o=1
Optional: specify the text outline opacity: transparent ⇨0, opaque ⇨1
b
backgroundColour
#2F2342 (black)
|b=grey
Optional: specify the background colour.
sn
showClueNumber
visibility:hidden
|sn=
Optional: display the rank clue.
sc
showClueColour
visibility:hidden
|sc=
Optional: display the colour clue.
Retrieved from "http:///index.php?title=Template:HCard&oldid=19449"