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

Template:Hex: Difference between revisions

From Board Game Arena
Jump to navigation Jump to search
(white-space:nowrap;)
m (parameters)
 
(7 intermediate revisions by the same user not shown)
Line 1: Line 1:
<span style="display:inline-grid;place-items:center;grid-area:{{{y|1}}}/{{{x|1}}};rotate:calc({{{r|0}}}*30deg);width:{{{w|67.2}}}px;aspect-ratio:cos(30deg);clip-path:polygon(-50% 50%,50% 100%,150% 50%,50% 0);background:{{{bg|#ddd}}};white-space:nowrap;"><span style="grid-area:1/1;">{{{1|&ZeroWidthSpace;}}}</span><span style="grid-area:1/1;rotate:calc({{{r|0}}}*-30deg);color:{{{textColor|#fff}}};font-family:Roboto,Arial,sans-serif;font-weight:700;font-size:16px;text-shadow:0 0 2px {{{outlineColor|#000}}},0 0 2px {{{outlineColor|#000}}},0 0 2px {{{outlineColor|#000}}},0 0 2px {{{outlineColor|#000}}},0 0 2px {{{outlineColor|#000}}},0 0 2px {{{outlineColor|#000}}},0 0 2px {{{outlineColor|#000}}},0 0 2px {{{outlineColor|#000}}},0 0 2px {{{outlineColor|#000}}},0 0 2px {{{outlineColor|#000}}},0 0 2px {{{outlineColor|#000}}},0 0 2px {{{outlineColor|#000}}};">{{{2|&ZeroWidthSpace;}}}</span></span><noinclude>
<div style="display:inline-grid;place-items:center;grid-area:{{{y|1}}}/{{{x|1}}}/span 1/span 2;z-index:{{{z}}};rotate:calc({{{r|0}}}*30deg);{{{|w}}}height:{{{w|67.195}}}px;{{{|w}}}idth:{{{w|67.195}}}px;aspect-ratio:calc(1/({{{|1/}}}cos(30deg)));clip-path:polygon(
 
20.6% 8.66%,23.1% 5.40%,26.2% 2.67%,29.7% 0.822%,33.2% 0,
== Examples ==
66.8% 0,70.3% 0.822%,73.8% 2.67%,76.9% 5.40%,79.3% 8.66%,
 
95.7% 41.3%,96.9% 45.4%,97.3% 50%,96.9% 54.6%,95.7% 58.7%,
{{hex |{{TaluvaClearing}} |A }} <code><nowiki>{{hex |{{TaluvaClearing}} |A }}</nowiki></code>
79.3% 91.3%,76.9% 94.6%,73.8% 97.3%,70.3% 99.2%,66.8% 100%,
 
33.2% 100%,29.7% 99.2%,26.2% 97.3%,23.1% 94.6%,20.7% 91.3%,
{{hex |{{TaluvaClearing}} |B |r=1 }} <code><nowiki>{{hex |{{TaluvaClearing}} |B |r=1 }}</nowiki></code>
4.33% 58.7%,3.11% 54.6%,2.67% 50%,3.11% 45.4%,4.33% 41.3%
);{{{|c}}}lip-path:polygon(
8.66% 20.6%,5.40% 23.1%,2.67% 26.2%,0.822% 29.7%,0 33.2%,
0 66.8%,0.822% 70.3%,2.67% 73.8%,5.40% 76.9%,8.66% 79.3%,
41.3% 95.7%,45.4% 96.9%,50% 97.3%,54.6% 96.9%,58.7% 95.7%,
91.3% 79.3%,94.6% 76.9%,97.3% 73.8%,99.2% 70.3%,100% 66.8%,
100% 33.2%,99.2% 29.7%,97.3% 26.2%,94.6% 23.1%,91.3% 20.7%,
58.7% 4.33%,54.6% 3.11%,50% 2.67%,45.4% 3.11%,41.3% 4.33%
);c{{{rounded|l}}}ip-path:polygon(0 50%,50% -50%,100% 50%,50% 150%);{{{|c}}}{{{rounded|l}}}ip-path:polygon(-50% 50%,50% 100%,150% 50%,50% 0);background:{{{bg|#ddd}}};"><div style="grid-area:1/1;">{{{1|&ZeroWidthSpace;}}}</div><div style="grid-area:1/1;rotate:calc({{{r|0}}}*-30deg);color:{{{textColor|#fff}}};font-family:Roboto,Arial,sans-serif;font-weight:900;font-size:28px;-webkit-text-stroke:1.2px {{{textOutline|#000}}};">{{{2|&ZeroWidthSpace;}}}</div></div><noinclude>


== Parameters ==
== Parameters ==


<div style="display:grid;grid:min-content repeat(8,minmax(140px,1fr))/5rem min-content 18rem min-content 1fr;gap:0 0.25rem;overflow:auto;text-overflow:ellipsis;">
<div style="display:grid;grid-template-columns:min-content min-content 18rem min-content 1fr;gap:0.25rem;overflow:auto;text-overflow:ellipsis;">
   <div style="font-weight:bold;width:8rem;">Parameter</div>
   <div style="font-weight:bold;width:8rem;">Parameter</div>
   <div style="font-weight:bold;width:8rem;">Default value</div>
   <div style="font-weight:bold;width:8rem;">Default value</div>
Line 22: Line 30:
   <div><code>2</code></div>
   <div><code>2</code></div>
   <div><code>&amp;ZeroWidthSpace;</code></div>
   <div><code>&amp;ZeroWidthSpace;</code></div>
   <div><code><nowiki>{{hex | |text }}</nowiki></code></div>
   <div><code><nowiki>{{hex | |1 }}</nowiki></code></div>
   <div>{{hex | |text }}</div>
   <div>{{hex | |1 }}</div>
   <div>'''''Optional:''''' specify a text value.</div>
   <div>'''''Optional:''''' specify a text value.</div>
  <div><code>textColor</code></div>
  <div><code>#fff</code> (white)</div>
  <div><code><nowiki>{{hex | |1 |textColor=green }}</nowiki></code></div>
  <div>{{hex | |1 |textColor=green }}</div>
  <div>'''''Optional:''''' specify the text color as a [https://developer.mozilla.org/en-US/docs/Web/CSS/color CSS color].</div>
  <div><code>textOutline</code></div>
  <div><code>#000</code> (black)</div>
  <div><code><nowiki>{{hex | |1 |textOutline=green }}</nowiki></code></div>
  <div>{{hex | |1 |textOutline=green }}</div>
  <div>'''''Optional:''''' specify the text outline color as a [https://developer.mozilla.org/en-US/docs/Web/CSS/color CSS color].</div>
   <div><code>bg</code></div>
   <div><code>bg</code></div>
   <div><code>#ddd</code></div>
   <div><code>#ddd</code></div>
Line 30: Line 48:
   <div>{{hex |bg=green }}</div>
   <div>{{hex |bg=green }}</div>
   <div>'''''Optional:''''' specify the background as a [https://developer.mozilla.org/en-US/docs/Web/CSS/color CSS color].</div>
   <div>'''''Optional:''''' specify the background as a [https://developer.mozilla.org/en-US/docs/Web/CSS/color CSS color].</div>
  <div><code>rounded</code></div>
  <div><code>n/a</code></div>
  <div><code><nowiki>{{hex |rounded= }}</nowiki></code></div>
  <div>{{hex |rounded= }}</div>
  <div>'''''Optional:''''' rounded corners.</div>
  <div><code>w</code></div>
  <div><code>67.195</code></div>
  <div><code><nowiki>{{hex |w=50 }}</nowiki></code></div>
  <div>{{hex |w=50 }}</div>
  <div>'''''Optional:''''' specify the width of the hex.</div>
   <div><code>x</code></div>
   <div><code>x</code></div>
   <div><code>1</code></div>
   <div><code>1</code></div>
Line 40: Line 68:
   <div>{{hex |y=2 }}</div>
   <div>{{hex |y=2 }}</div>
   <div>'''''Optional:''''' specify the y co-ordinate of the hex on a '''[[Template:HexMap]]'''.</div>
   <div>'''''Optional:''''' specify the y co-ordinate of the hex on a '''[[Template:HexMap]]'''.</div>
  <div><code>z</code></div>
  <div><code>null</code></div>
  <div><code><nowiki>{{hex |z=2 }}</nowiki></code></div>
  <div>{{hex |z=2 }}</div>
  <div>'''''Optional:''''' specify the z-axis position.</div>
   <div><code>r</code></div>
   <div><code>r</code></div>
   <div><code>0</code></div>
   <div><code>0</code></div>
   <div><code><nowiki>{{hex |r=1 }}</nowiki></code></div>
   <div><code><nowiki>{{hex |r=1 |🡅 }}</nowiki></code></div>
   <div>{{hex |r=1 }}</div>
   <div>{{hex |r=1 |🡅 }}</div>
   <div>'''''Optional:''''' specify the rotation in units of 30° (<code>0</code>-<code>11</code>).</div>
   <div>'''''Optional:''''' specify the rotation in units of 30° (<code>0</code>-<code>11</code>).</div>
  <div><code>null</code></div>
  <div><code>n/a</code></div>
  <div><code><nowiki>{{hex |= |🡅 }}</nowiki></code></div>
  <div>{{hex |= |🡅 }}</div>
  <div>'''''Optional:''''' transform to a flat-top hex.</div>
</div>
</div>


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

Latest revision as of 15:34, 30 May 2024

​
​

Parameters

Parameter
Default value
Example
Result
Description
1
&ZeroWidthSpace;
{{hex |{{TaluvaClearing}} }}
Clearing​
​
Optional: specify a Template:GameIcon image.
2
&ZeroWidthSpace;
{{hex | |1 }}
1
Optional: specify a text value.
textColor
#fff (white)
{{hex | |1 |textColor=green }}
1
Optional: specify the text color as a CSS color.
textOutline
#000 (black)
{{hex | |1 |textOutline=green }}
1
Optional: specify the text outline color as a CSS color.
bg
#ddd
{{hex |bg=green }}
​
​
Optional: specify the background as a CSS color.
rounded
n/a
{{hex |rounded= }}
​
​
Optional: rounded corners.
w
67.195
{{hex |w=50 }}
​
​
Optional: specify the width of the hex.
x
1
{{hex |x=3 }}
​
​
Optional: specify the x co-ordinate of the hex on a Template:HexMap.
y
1
{{hex |y=2 }}
​
​
Optional: specify the y co-ordinate of the hex on a Template:HexMap.
z
null
{{hex |z=2 }}
​
​
Optional: specify the z-axis position.
r
0
{{hex |r=1 |🡅 }}
🡅
​
Optional: specify the rotation in units of 30° (0-11).
null
n/a
{{hex |= |🡅 }}
🡅
​
Optional: transform to a flat-top hex.
Retrieved from "http:///index.php?title=Template:Hex&oldid=21402"