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

Template:Cardholder: Difference between revisions

From Board Game Arena
Jump to navigation Jump to search
m (padding:0.5rem 0.5rem 1.1rem;)
(redesign)
Line 1: Line 1:
<div style="position:relative;display:grid;grid:repeat(3,auto) / repeat(5,auto);gap:0rem {{{gap|2}}}px;background:{{{background|#fff0}}};border-radius:{{{corner|0.2}}}rem {{{corner|0.2}}}rem 0 0;padding:0.5rem 0.5rem 1.1rem;line-height:0.1;width:max-content;align-items:end;">
<span style="display:inline-grid;grid-template-rows:auto 8px 16px;background:{{{background|#fff0}}};padding:0.25rem 0.25rem 0 0.25rem;border-radius:0.25rem;justify-content:space-evenly;margin:0.25rem;"><span style="grid-row-start:1;grid-row-end:-2;place-self:center;display:inline-grid;grid-auto-flow:column;gap:0 {{{gap|2}}}px;white-space:nowrap;">{{{cards|{{diamond|=A}}{{club|=A}}{{heart|=A}}{{spade|=A}}}}}</span><span style="grid-row-start:-2;grid-row-end:-1;place-self:center;background:{{{holderColour|#000}}};color:{{{textColour|#fff}}};font-size:0.875rem;font-family:Roboto,Arial,sans-serif;font-weight:500;height:min-content;width:104%;padding:0 0.25rem;border-radius:0.25rem 0.25rem 0 0;">{{{1|A}}}</span></span><noinclude>
<div style="background:{{{clue1Colour|#fff0}}};margin-left:5%;padding-left:10%;height:1.4rem;width:75%;border-radius:{{{corner|0.2}}}rem {{{corner|0.2}}}rem 0 0;color:{{{colour|#000}}};font-size:calc({{{size|2}}}rem - 0.75rem);line-height:1.2;">{{{clue1|}}}</div>
<div style="background:{{{clue2Colour|#fff0}}};margin-left:5%;padding-left:10%;height:1.4rem;width:75%;border-radius:{{{corner|0.2}}}rem {{{corner|0.2}}}rem 0 0;color:{{{colour|#000}}};font-size:calc({{{size|2}}}rem - 0.75rem);line-height:1.2;">{{{clue2|}}}</div>
<div style="background:{{{clue3Colour|#fff0}}};margin-left:5%;padding-left:10%;height:1.4rem;width:75%;border-radius:{{{corner|0.2}}}rem {{{corner|0.2}}}rem 0 0;color:{{{colour|#000}}};font-size:calc({{{size|2}}}rem - 0.75rem);line-height:1.2;">{{{clue3|}}}</div>
<div style="background:{{{clue4Colour|#fff0}}};margin-left:5%;padding-left:10%;height:1.4rem;width:75%;border-radius:{{{corner|0.2}}}rem {{{corner|0.2}}}rem 0 0;color:{{{colour|#000}}};font-size:calc({{{size|2}}}rem - 0.75rem);line-height:1.2;">{{{clue4|}}}</div>
<div style="background:{{{clue5Colour|#fff0}}};margin-left:5%;padding-left:10%;height:1.4rem;width:75%;border-radius:{{{corner|0.2}}}rem {{{corner|0.2}}}rem 0 0;color:{{{colour|#000}}};font-size:calc({{{size|2}}}rem - 0.75rem);line-height:1.2;">{{{clue5|}}}</div>
<div>{{card|={{{card1|&nbsp;&nbsp;}}}|background={{{card1Background|{{{cardBackground|#fafafa}}}}}}|colour={{{card1Colour|#000}}}|size={{{size|2}}}}}</div>
<div>{{card|={{{card2|&nbsp;&nbsp;}}}|background={{{card2Background|{{{cardBackground|#fafafa}}}}}}|colour={{{card2Colour|#000}}}|size={{{size|2}}}}}</div>
<div>{{card|={{{card3|&nbsp;&nbsp;}}}|background={{{card3Background|{{{cardBackground|#fafafa}}}}}}|colour={{{card3Colour|#000}}}|size={{{size|2}}}}}</div>
<div>{{card|={{{card4|&nbsp;&nbsp;}}}|background={{{card4Background|{{{cardBackground|#fafafa}}}}}}|colour={{{card4Colour|#000}}}|size={{{size|2}}}}}</div>
<div>{{card|={{{card5|&nbsp;&nbsp;}}}|background={{{card5Background|{{{cardBackground|#fafafa}}}}}}|colour={{{card5Colour|#000}}}|size={{{size|2}}}}}</div>
<div style="position:absolute;grid-row-start:-1;top:-0.2rem;background:#000;color:{{{colour|#fff}}};font-size:{{{size|1}}}rem;width:calc(100% - 0.8rem);height:25%;padding:0.5rem;border-radius:0.2rem 0.2rem 0 0;">{{{player|A}}} {{{arrow|🡲}}}</div></div><noinclude>
[[Category:Card templates]]


== Available parameters ==
<code><nowiki>{{cardholder|</nowiki>'''A'''<nowiki>|cards=</nowiki>'''<span style="background:#fdd;"><nowiki>{{diamond|=A}}</nowiki></span><span style="background:#eee;"><nowiki>{{club|=A}}</nowiki></span><span style="background:#fdd;"><nowiki>{{heart|=A}}</nowiki></span><span style="background:#eee;"><nowiki>{{spade|=A}}</nowiki></span>'''<nowiki> }}</nowiki></code>
 
{|class="wikitable" style="text-align:left;"
!Parameter
!Default value
!Example
!Result
!Description
|-
|<code>card#</code>
|<code>&amp;nbsp;&amp;nbsp;</code>
(two non-breaking spaces)
|<code><nowiki>{{cardholder |card1=1}}</nowiki></code>
|{{cardholder |card1=1}}<br>
|'''''Optional''''': specify cards as text where <code>#</code> is the card number from left to right.
|-
|<code>card#Colour</code>
|<code>#000</code>
(black)
|<code><nowiki>{{cardholder |card1=1 |card1Colour=green}}</nowiki></code>
|{{cardholder |card1=1 |card1Colour=green}}<br>
|'''''Optional''''': specify card colours as [https://developer.mozilla.org/en-US/docs/Web/CSS/color CSS colours] where <code>#</code> is the card number from left to right.
|-
|<code>cardBackground</code>
|<code>#fafafa</code>
(almost white)
|<code><nowiki>{{cardholder |cardBackground=green}}</nowiki></code>
|{{cardholder |cardBackground=green}}<br>
|'''''Optional''''': specify all card background colours as [https://developer.mozilla.org/en-US/docs/Web/CSS/color CSS colours].
|-
|<code>card#Background</code>
|<code>#fafafa</code>
(almost white)
|<code><nowiki>{{cardholder |card1Background=green}}</nowiki></code>
|{{cardholder |card1Background=green}}<br>
|'''''Optional''''': specify a card background colours as [https://developer.mozilla.org/en-US/docs/Web/CSS/color CSS colours] where <code>#</code> is the card number from left to right. This overrides the <code>cardBackground</code> parameter.
|-
|<code>clue#</code>
|<code>null</code>
|<code><nowiki>{{cardholder |clue1=1}}</nowiki></code>
|{{cardholder |clue1=1}}<br>
|'''''Optional''''': specify clues as text where <code>#</code> is the card number from left to right.
|-
|<code>clue#Colour</code>
|<code>#fff0</code>
(transparent)
|<code><nowiki> {{cardholder |clue1Colour=green}}</nowiki></code>
|  {{cardholder |clue1Colour=green}}<br>
|'''''Optional''''': specify clue colours as [https://developer.mozilla.org/en-US/docs/Web/CSS/color CSS colours] where <code>#</code> is the card number from left to right.
|-
|<code>gap</code>
|<code>2</code>
|<code><nowiki>{{cardholder |gap=8}}</nowiki></code>
|{{cardholder |gap=8}}<br>
|'''''Optional''''': specify the gap between cards in px units.
|-
|<code>background#</code>
|<code>#fff0</code>
(transparent)
|<code><nowiki>{{cardholder |background=green}}</nowiki></code>
|{{cardholder |background=green}}<br>
|'''''Optional''''': specify the background colour as a [https://developer.mozilla.org/en-US/docs/Web/CSS/color CSS colour].
|-
|<code>player</code>
|<code>A</code>
|<code><nowiki>{{cardholder |player=Alice}}</nowiki></code>
|{{cardholder |player=Alice}}<br>
|'''''Optional''''': specify the player name as text.
|-
|<code>arrow</code>
|<code>🡲</code>
|<code><nowiki>{{cardholder |arrow=}}</nowiki></code>
|{{cardholder |arrow=}}<br>
|'''''Optional''''': hide the arrow or use another symbol.
|}


== Examples ==
== Examples ==


=== [[Gamehelphanabi|Hanabi]] ===
=== [[Gamehelphanabi|Hanabi]] ===
<div style="display:flex;flex-wrap:wrap;"><div>
{{cardholder4 |player=Alice
|card1=1 |card1Colour={{r}} |clue1=1 |clue1Colour={{r}}
|card2=2 |card2Colour={{y}} |clue2=2 |clue2Colour={{y}}
|card3=3 |card3Colour={{g}} |clue3=3 |clue3Colour={{g}}
|card4=4 |card4Colour={{b}} |clue4=4 |clue4Colour={{b}}
}}
<pre>
{{cardholder4 |player=Alice
|card1=1 |card1Colour={{r}} |clue1=1 |clue1Colour={{r}}
|card2=2 |card2Colour={{y}} |clue2=2 |clue2Colour={{y}}
|card3=3 |card3Colour={{g}} |clue3=3 |clue3Colour={{g}}
|card4=4 |card4Colour={{b}} |clue4=4 |clue4Colour={{b}}
}}
</pre>
</div><div>
{{cardholder |cardBackground=#324 |player=Alice
|card1=1 |card1Colour={{r}} |clue1=1 |clue1Colour={{r}}
|card2=2 |card2Colour={{y}} |clue2=2 |clue2Colour={{y}}
|card3=3 |card3Colour={{g}} |clue3=3 |clue3Colour={{g}}
|card4=4 |card4Colour={{b}} |clue4=4 |clue4Colour={{b}}
|card5=5 |card5Colour={{w}} |clue5=5 |clue5Colour={{w}}


}}
{{cardholder|Alice 🡲|cards={{Hr|1|n|c}}{{Hy|2|n=|c}}{{Hg|3|n|c=}}{{Hb|4|n=|c=}} }}
<pre>
{{cardholder|Bob 🡲|cards={{Hw|5|n|c}}{{Hm|1|{{g}}|2|0|n|c=}}{{Hm|2|{{m}}|5|0|n=|c=}}{{Hk|3|n=}} }}
{{cardholder |cardBackground=#324 |player=Alice
 
|card1=1 |card1Colour={{r}} |clue1=1 |clue1Colour={{r}}
<code><nowiki>{{cardholder|</nowiki>'''Alice 🡲'''<nowiki>|cards=</nowiki>'''<span style="background:#fdd;"><nowiki>{{Hr|1|n|c}}</nowiki></span><span style="background:#ffd;"><nowiki>{{Hy|2|n=|c}}</nowiki></span><span style="background:#dfd;"><nowiki>{{Hg|3|n|c=}}</nowiki></span><span style="background:#ddf;"><nowiki>{{Hb|4|n=|c=}}</nowiki></span>'''<nowiki> }}</nowiki></code>
|card2=2 |card2Colour={{y}} |clue2=2 |clue2Colour={{y}}
 
|card3=3 |card3Colour={{g}} |clue3=3 |clue3Colour={{g}}
<code><nowiki>{{cardholder|</nowiki>'''Bob 🡲'''<nowiki>|cards=</nowiki>'''<span style="background:#fff;"><nowiki>{{Hw|5|n=|c}}</nowiki></span><span style="background:#eef;"><nowiki>{{Hm|1|{{g}}|2|0|n|c=}}</nowiki></span><span style="background:#edf;"><nowiki>{{Hm|2|{{m}}|5|0|n=|c=}}</nowiki></span><span style="background:#ddd;"><nowiki>{{Hk|3|n=}}</nowiki></span>'''<nowiki> }}</nowiki></code>
|card4=4 |card4Colour={{b}} |clue4=4 |clue4Colour={{b}}
 
|card5=5 |card5Colour={{w}} |clue5=5 |clue5Colour={{w}}
== Available parameters ==
}}
<div style="display:grid;grid-template-columns:repeat(4,min-content) 2fr;gap:0.5rem;overflow:auto;text-overflow:ellipsis;">
</pre>
  <div style="font-weight:bold;width:8rem;">Parameter</div>
</div></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;">Result</div>
  <div style="font-weight:bold;width:8rem;">Description</div>
  <div><code>1</code></div>
  <div><code>A</code></div>
  <div><code><nowiki>|Alice</nowiki></code></div>
  <div>{{cardholder|Alice}}</div>
  <div>'''''Optional''''': specify holder text.</div>
  <div><code>cards</code></div>
  <div><code><nowiki>|cards=</nowiki></code><code><nowiki>{{diamond|=A}}</nowiki></code><code><nowiki>{{club|=A}}</nowiki></code><code><nowiki>{{heart|=A}}</nowiki></code><code><nowiki>{{spade|=A}}</nowiki></code></div>
  <div><code><nowiki>|cards=</nowiki></code><code><nowiki>{{spade|=1}}</nowiki></code><code><nowiki>{{spade|=2}}</nowiki></code><code><nowiki>{{spade|=3}}</nowiki></code><code><nowiki>{{spade|=4}}</nowiki></code></div>
  <div>{{cardholder|A|cards={{spade|=1}}{{spade|=2}}{{spade|=3}}{{spade|=4}}}}</div>
  <div>'''''Required''''': specify cards.</div>
  <div><code>holderColour</code></div>
  <div><code>#000</code>
(black)</div>
  <div><code><nowiki>|holderColour=green</nowiki></code></div>
  <div>{{cardholder|A|cards={{diamond|=A}}{{club|=A}}{{heart|=A}}{{spade|=A}} |holderColour=green}}</div>
  <div>'''''Optional''''': specify the holder colour as a [https://developer.mozilla.org/en-US/docs/Web/CSS/color CSS colour].</div>
  <div><code>textColour</code></div>
  <div><code>#fff</code>
(white)</div>
  <div><code><nowiki>|textColour=green</nowiki></code></div>
  <div>{{cardholder|holderColour=lightgrey|cards={{diamond|=A}}{{club|=A}}{{heart|=A}}{{spade|=A}} |textColour=green}}</div>
  <div>'''''Optional''''': specify the holder text colour as a [https://developer.mozilla.org/en-US/docs/Web/CSS/color CSS colour].</div>
  <div><code>background</code></div>
  <div><code>#fff0</code>
(transparent)</div>
  <div><code><nowiki>|background=green</nowiki></code></div>
  <div>{{cardholder|cards={{diamond|=A}}{{club|=A}}{{heart|=A}}{{spade|=A}} |background=green}}</div>
  <div>'''''Optional''''': specify the background colour as a [https://developer.mozilla.org/en-US/docs/Web/CSS/color CSS colour].</div>
  <div><code>gap</code></div>
  <div><code>2</code></div>
  <div><code><nowiki>|gap=8</nowiki></code></div>
  <div>{{cardholder|cards={{diamond|=A}}{{club|=A}}{{heart|=A}}{{spade|=A}} |gap=8}}</div>
  <div>'''''Optional''''': specify the gap between cards in px units.</div>
</div>
 
[[Category:HanabiCards]]
[[Category:Card templates]]
</noinclude>
</noinclude>

Revision as of 21:17, 19 December 2023

​♦​♣​♥​♠A

{{cardholder|A|cards={{diamond|=A}}{{club|=A}}{{heart|=A}}{{spade|=A}} }}

Examples

Hanabi

red1
,with a
red1clue,
yellow2
,with a
yellow2clue,
green3
,with a
green3clue,
blue4
,with a
blue4clue,
Alice 🡲
white5
,with a
white5clue,
multicolour1
,with a
21clue,
multicolour2
,with a
52clue,
black powder3
,with a
black powder3clue,
Bob 🡲

{{cardholder|Alice 🡲|cards={{Hr|1|n|c}}{{Hy|2|n=|c}}{{Hg|3|n|c=}}{{Hb|4|n=|c=}} }}

{{cardholder|Bob 🡲|cards={{Hw|5|n=|c}}{{Hm|1|{{g}}|2|0|n|c=}}{{Hm|2|{{m}}|5|0|n=|c=}}{{Hk|3|n=}} }}

Available parameters

Parameter
Default value
Example
Result
Description
1
A
|Alice
​♦​♣​♥​♠Alice
Optional: specify holder text.
cards
|cards={{diamond|=A}}{{club|=A}}{{heart|=A}}{{spade|=A}}
|cards={{spade|=1}}{{spade|=2}}{{spade|=3}}{{spade|=4}}
​♠​♠​♠​♠A
Required: specify cards.
holderColour
#000 (black)
|holderColour=green
​♦​♣​♥​♠A
Optional: specify the holder colour as a CSS colour.
textColour
#fff (white)
|textColour=green
​♦​♣​♥​♠A
Optional: specify the holder text colour as a CSS colour.
background
#fff0 (transparent)
|background=green
​♦​♣​♥​♠A
Optional: specify the background colour as a CSS colour.
gap
2
|gap=8
​♦​♣​♥​♠A
Optional: specify the gap between cards in px units.
Retrieved from "http:///index.php?title=Template:Cardholder&oldid=19281"