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
(cardBackground)
(🡲, Template:cardholder4)
Line 1: Line 1:
<div style="position:relative;display:grid;grid:repeat(3, auto) / repeat({{{n|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;line-height:0.1;width:max-content;align-items:end;">
<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;line-height:0.1;width:max-content;align-items:end;">
<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:{{{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:{{{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>
Line 10: Line 10:
<div>{{card|={{{card4|&nbsp;&nbsp;}}}|background={{{card4Background|{{{cardBackground|#fafafa}}}}}}|colour={{{card4Colour|#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>{{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>
<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]]
[[Category:Card templates]]


== Available parameters ==
== Available parameters ==


<div style="display:grid;grid-template-columns:repeat(2,min-content) repeat(3,auto);gap:1rem;">
{|class="wikitable" style="text-align:left;"
  <div style="font-weight:bold;">Parameter</div>
!Parameter
  <div style="font-weight:bold;">Default value</div>
!Default value
  <div style="font-weight:bold;">Example</div>
!Example
  <div style="font-weight:bold;">Result</div>
!Result
  <div style="font-weight:bold;">Description</div>
!Description
  <div><code>card<b>#</b></code></div>
|-
  <div><code>&amp;nbsp;&amp;nbsp;</code> (two non-breaking spaces)</div>
|<code>card#</code>
  <div><code><nowiki>{{cardholder |card1=1 |card2=2}}</nowiki></code></div>
|<code>&amp;nbsp;&amp;nbsp;</code>
  <div>{{cardholder |card1=1 |card2=2}}</div>
(two non-breaking spaces)
  <div><b><i>Optional:</i></b> specify cards as text where <code><b>#</b></code> is the card number from left to right.</div>
|<code><nowiki>{{cardholder |card1=1}}</nowiki></code>
  <div><code>card<b>#</b>Colour</code></div>
|{{cardholder |card1=1}}<br>
  <div><code><nowiki>#000</nowiki></code></div>
|'''''Optional''''': specify cards as text where <code>#</code> is the card number from left to right.
  <div><code><nowiki>{{cardholder |card1=1 |card1Colour=green |card2=2 |card2Colour=green}}</nowiki></code></div>
|-
  <div>{{cardholder |card1=1 |card1Colour=green |card2=2 |card2Colour=green}}</div>
|<code>card#Colour</code>
  <div><b><i>Optional:</i></b> specify card colours as [https://developer.mozilla.org/en-US/docs/Web/CSS/color CSS colours] where <code><b>#</b></code> is the card number from left to right.</div>
|<code>#000</code>
  <div><code>card<b>#</b>Background</code></div>
(black)
  <div><code><nowiki>{{{cardBackground|#fafafa}}}</nowiki></code></div>
|<code><nowiki>{{cardholder |card1=1 |card1Colour=green}}</nowiki></code>
  <div><code><nowiki>{{cardholder |card1Background=green |card2Background=green}}</nowiki></code></div>
|{{cardholder |card1=1 |card1Colour=green}}<br>
  <div>{{cardholder |card1Background=green |card2Background=green}}</div>
|'''''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.
  <div><b><i>Optional:</i></b> specify card background colours as [https://developer.mozilla.org/en-US/docs/Web/CSS/color CSS colours] where <code><b>#</b></code> is the card number from left to right. This overrides the <code>cardBackground</code> parameter.</div>
|-
  <div><code>cardBackground</code></div>
|<code>cardBackground</code>
  <div><code>#fafafa</code> (almost white)</div>
|<code>#fafafa</code>
  <div><code><nowiki>{{cardholder |cardBackground=green}}</nowiki></code></div>
(almost white)
  <div>{{cardholder |cardBackground=green}}</div>
|<code><nowiki>{{cardholder |cardBackground=green}}</nowiki></code>
  <div><b><i>Optional:</i></b> specify all card background colours as [https://developer.mozilla.org/en-US/docs/Web/CSS/color CSS colours].</div>
|{{cardholder |cardBackground=green}}<br>
  <div><code>clue<b>#</b></code></div>
|'''''Optional''''': specify all card background colours as [https://developer.mozilla.org/en-US/docs/Web/CSS/color CSS colours].
  <div><code>?</code></div>
|-
  <div><code><nowiki>{{cardholder |clue1=1 |clue2=2}}</nowiki></code></div>
|<code>card#Background</code>
  <div>{{cardholder |clue1=1 |clue2=2}}</div>
|<code>#fafafa</code>
  <div><b><i>Optional:</i></b> specify clues as text</b> where <code><b>#</b></code> is the card number from left to right.</div>
(almost white)
  <div><code>clue<b>#</b>Colour</code></div>
|<code><nowiki>{{cardholder |card1Background=green}}</nowiki></code>
  <div><code>#fff0</code> (transparent)</div>
|{{cardholder |card1Background=green}}<br>
  <div><code><nowiki>{{cardholder |clue1Colour=green |clue2Colour=green}}</nowiki></code></div>
|'''''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.
  <div>{{cardholder|clue1Colour=green|clue2Colour=green}}</div>
|-
  <div><b><i>Optional:</i></b> specify clue colours as [https://developer.mozilla.org/en-US/docs/Web/CSS/color CSS colours] where <code><b>#</b></code> is the card number from left to right.</div>
|<code>clue#</code>
  <div><code>gap</code></div>
|<code>null</code>
  <div><code>2</code></div>
|<code><nowiki>{{cardholder |clue1=1}}</nowiki></code>
  <div><code><nowiki>{{cardholder |gap=10}}</nowiki></code></div>
|{{cardholder |clue1=1}}<br>
  <div>{{cardholder|gap=10}}</div>
|'''''Optional''''': specify clues as text where <code>#</code> is the card number from left to right.
  <div><b><i>Optional:</i></b> specify the gap between cards in px units.</div>
|-
  <div><code>background</code></div>
|<code>clue#Colour</code>
  <div><code>#fff0</code> (transparent)</div>
|<code>#fff0</code>
  <div><code><nowiki>{{cardholder |background=green}}</nowiki></code></div>
(transparent)
  <div>{{cardholder|background=green}}</div>
|<code><nowiki> {{cardholder |clue1Colour=green}}</nowiki></code>
  <div><b><i>Optional:</i></b> specify the background colour as a [https://developer.mozilla.org/en-US/docs/Web/CSS/color CSS colour].</div>
|  {{cardholder |clue1Colour=green}}<br>
  <div><code>player</code></div>
|'''''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.
  <div><code>A</code></div>
|-
  <div><code><nowiki>{{cardholder |player=Amy}}</nowiki></code></div>
|<code>gap</code>
  <div>{{cardholder|player=Amy}}</div>
|<code>2</code>
  <div><b><i>Optional:</i></b> specify the player name as text.</div>
|<code><nowiki>{{cardholder |gap=8}}</nowiki></code>
  <div><code>arrow</code></div>
|{{cardholder |gap=8}}<br>
  <div><code>➞</code></div>
|'''''Optional''''': specify the gap between cards in px units.
  <div><code><nowiki>{{cardholder |arrow=}}</nowiki></code></div>
|-
  <div>{{cardholder|arrow=}}</div>
|<code>background#</code>
  <div><b><i>Optional:</i></b> hide the arrow or use another symbol.</div>
|<code>#fff0</code>
</div>
(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 ==


=== 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 |cardBackground=#324
|clue1=1 |clue1Colour=white
|clue2=2 |clue2Colour=lightgreen
|clue3=3 |clue3Colour=yellow
|clue4=4 |clue4Colour=red
|clue5=5 |clue5Colour=deepskyblue
|card1=1 |card1Colour=white
|card2=2 |card2Colour=lightgreen
|card3=3 |card3Colour=yellow
|card4=4 |card4Colour=red
|card5=5 |card5Colour=deepskyblue
}}
}}
<pre>
<pre>
{{cardholder |cardBackground=#324
{{cardholder |cardBackground=#324 |player=Alice
|clue1=1 |clue1Colour=white
|card1=1 |card1Colour={{r}} |clue1=1 |clue1Colour={{r}}
|clue2=2 |clue2Colour=lightgreen
|card2=2 |card2Colour={{y}} |clue2=2 |clue2Colour={{y}}
|clue3=3 |clue3Colour=yellow
|card3=3 |card3Colour={{g}} |clue3=3 |clue3Colour={{g}}
|clue4=4 |clue4Colour=red
|card4=4 |card4Colour={{b}} |clue4=4 |clue4Colour={{b}}
|clue5=5 |clue5Colour=deepskyblue
|card5=5 |card5Colour={{w}} |clue5=5 |clue5Colour={{w}}
 
|card1=1 |card1Colour=white
|card2=2 |card2Colour=lightgreen
|card3=3 |card3Colour=yellow
|card4=4 |card4Colour=red
|card5=5 |card5Colour=deepskyblue
}}
}}
</pre>
</pre>
</div></div>
</noinclude>
</noinclude>

Revision as of 01:31, 20 October 2023

   
   
   
   
   
A 🡲

Available parameters

Parameter Default value Example Result Description
card# &nbsp;&nbsp;

(two non-breaking spaces)

{{cardholder |card1=1}}
   
   
   
   
   
A 🡲

 Optional: specify cards as text where # is the card number from left to right.
card#Colour #000

(black)

{{cardholder |card1=1 |card1Colour=green}}
   
   
   
   
   
A 🡲

 Optional: specify card colours as CSS colours where # is the card number from left to right.
cardBackground #fafafa

(almost white)

{{cardholder |cardBackground=green}}
   
   
   
   
   
A 🡲

 Optional: specify all card background colours as CSS colours.
card#Background #fafafa

(almost white)

{{cardholder |card1Background=green}}
   
   
   
   
   
A 🡲

 Optional: specify a card background colours as CSS colours where # is the card number from left to right. This overrides the cardBackground parameter.
clue# null {{cardholder |clue1=1}}
1
   
   
   
   
   
A 🡲

 Optional: specify clues as text where # is the card number from left to right.
clue#Colour #fff0

(transparent)

{{cardholder |clue1Colour=green}}
   
   
   
   
   
A 🡲

 Optional: specify clue colours as CSS colours where # is the card number from left to right.
gap 2 {{cardholder |gap=8}}
   
   
   
   
   
A 🡲

 Optional: specify the gap between cards in px units.
background# #fff0

(transparent)

{{cardholder |background=green}}
   
   
   
   
   
A 🡲

 Optional: specify the background colour as a CSS colour.
player A {{cardholder |player=Alice}}
   
   
   
   
   
Alice 🡲

 Optional: specify the player name as text.
arrow 🡲 {{cardholder |arrow=}}
   
   
   
   
   
A

Optional: hide the arrow or use another symbol.

Examples

Hanabi

1
2
3
4
1
2
3
4
Alice 🡲
{{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}}
}}
1
2
3
4
5
   
   
   
   
   
Alice 🡲
{{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}}
}}
Retrieved from "http:///index.php?title=Template:Cardholder&oldid=18480"