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
m (ar)
(arrow, rotation & stack order, responsive ew & font-size)
Line 1: Line 1:
<onlyinclude><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);{{{f|w}}}height:{{{w|67.195}}}px;{{{f|w}}}idth:{{{w|67.195}}}px;aspect-ratio:calc(1/({{{f|1/}}}cos(30deg)));clip-path:polygon(
<onlyinclude><div style="container-type:size;display:inline-grid;place-items:center;grid-area:{{{y|1}}}/{{{x|1}}}/span 1/span 2;z-index:{{{z}}};{{{f|w}}}height:{{{w|67.195}}}px;{{{f|w}}}idth:{{{w|67.195}}}px;aspect-ratio:calc(1/({{{f|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,
20.6% 8.66%,23.1% 5.40%,26.2% 2.67%,29.7% 0.822%,33.2% 0,
66.8% 0,70.3% 0.822%,73.8% 2.67%,76.9% 5.40%,79.3% 8.66%,
66.8% 0,70.3% 0.822%,73.8% 2.67%,76.9% 5.40%,79.3% 8.66%,
Line 13: Line 13:
100% 33.2%,99.2% 29.7%,97.3% 26.2%,94.6% 23.1%,91.3% 20.7%,
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%
58.7% 4.33%,54.6% 3.11%,50% 2.67%,45.4% 3.11%,41.3% 4.33%
);c{{{c|l}}}ip-path:polygon(0 50%,50% -50%,100% 50%,50% 150%);{{{f|c}}}{{{c|l}}}ip-path:polygon(-50% 50%,50% 100%,150% 50%,50% 0);overflow:clip;background:{{{b|#ddd}}};"><div style="grid-area:1/1;">{{{1|&ZeroWidthSpace;}}}</div><div style="grid-area:1/1;width:100%;height:100%;clip-path:polygon(0 50%,50% -50%,100% 50%,50% 150%,0 50%,{{{ew|4}}}px 50%,calc(25% + {{{ew|4}}}px*cos(60deg)) calc(100% - {{{ew|4}}}px*sin(60deg)),calc(75% - {{{ew|4}}}px*cos(60deg)) calc(100% - {{{ew|4}}}px*sin(60deg)),calc(100% - {{{ew|4}}}px) 50%,calc(75% - {{{ew|4}}}px*cos(60deg)) calc({{{ew|4}}}px*sin(60deg)),calc(25% + {{{ew|4}}}px*cos(60deg)) calc({{{ew|4}}}px*sin(60deg)),{{{ew|4}}}px 50%);{{{f|c}}}lip-path:polygon(50% 0,-50% 50%,50% 100%,150% 50%,50% 0,50% {{{ew|4}}}px,calc(100% - {{{ew|4}}}px*sin(60deg)) calc(25% + {{{ew|4}}}px*cos(60deg)),calc(100% - {{{ew|4}}}px*sin(60deg)) calc(75% - {{{ew|4}}}px*cos(60deg)),50% calc(100% - {{{ew|4}}}px),calc({{{ew|4}}}px*sin(60deg)) calc(75% - {{{ew|4}}}px*cos(60deg)),calc({{{ew|4}}}px*sin(60deg)) calc(25% + {{{ew|4}}}px*cos(60deg)),50% {{{ew|4}}}px);background:{{{ec|#0000}}}"></div><div style="grid-area:1/1;height:100%;rotate:calc(({{{ar|0}}}{{{f| + .5}}})*60deg)"><div style="aspect-ratio:3/4;height:25%;clip-path:polygon(25% 0,25% 50%,0 50%,50% 100%,100% 50%,75% 50%,75% 0);background:{{{ac|#0000}}}"></div></div><div style="grid-area:1/1;rotate:calc({{{r|0}}}*-30deg);color:{{{tc|#fff}}};font-family:Roboto,Arial,sans-serif;font-weight:900;font-size:28px;-webkit-text-stroke:1.2px {{{to|#000}}};">{{{t|&ZeroWidthSpace;}}}</div></div></onlyinclude>
);c{{{c|l}}}ip-path:polygon(0 50%,50% -50%,100% 50%,50% 150%);{{{f|c}}}{{{c|l}}}ip-path:polygon(-50% 50%,50% 100%,150% 50%,50% 0);overflow:clip;background:{{{b|#ddd}}};"><div style="grid-area:1/1;rotate:calc({{{r|0}}}*60deg);">{{{1|&ZeroWidthSpace;}}}</div><div style="grid-area:1/1;width:100%;height:100%;clip-path:polygon(
0 50%,50% -50%,100% 50%,50% 150%,0 50%,
{{{ew|8}}}% 50%,
calc(25% + {{{ew|8}}}%*cos(60deg)) calc(100% - {{{ew|8}}}%*sin(60deg)),
calc(75% - {{{ew|8}}}%*cos(60deg)) calc(100% - {{{ew|8}}}%*sin(60deg)),
calc(100% - {{{ew|8}}}%) 50%,
calc(75% - {{{ew|8}}}%*cos(60deg)) calc({{{ew|8}}}%*sin(60deg)),
calc(25% + {{{ew|8}}}%*cos(60deg)) calc({{{ew|8}}}%*sin(60deg)),
{{{ew|8}}}% 50%
);{{{f|c}}}lip-path:polygon(
50% 0,-50% 50%,50% 100%,150% 50%,50% 0,
50% {{{ew|8}}}%,
calc(100% - {{{ew|8}}}%*sin(60deg)) calc(25% + {{{ew|8}}}%*cos(60deg)),
calc(100% - {{{ew|8}}}%*sin(60deg)) calc(75% - {{{ew|8}}}%*cos(60deg)),
50% calc(100% - {{{ew|8}}}%),
calc({{{ew|8}}}%*sin(60deg)) calc(75% - {{{ew|8}}}%*cos(60deg)),
calc({{{ew|8}}}%*sin(60deg)) calc(25% + {{{ew|8}}}%*cos(60deg)),
50% {{{ew|8}}}%
);background:{{{ec|#0000}}}"></div><div style="grid-area:1/1;height:100%;width:100%;rotate:calc(({{{ar|0}}}{{{f| + 2}}})*60deg);clip-path:polygon(
45% 0,45% 7%,40% 7%,50% 20%,60% 7%,55% 7%,55% 0
);{{{f|c}}}lip-path:polygon(
0 45%,7% 45%,7% 40%,20% 50%,7% 60%,7% 55%,0 55%
);background:{{{ac|#0000}}}"></div><div style="grid-area:1/1;color:{{{tc|#fff}}};font-family:Roboto,Arial,sans-serif;font-weight:900;font-size:clamp(1rem,45cqmin,28px);-webkit-text-stroke:1.2px {{{to|#000}}};z-index:0">{{{t|&ZeroWidthSpace;}}}</div></div></onlyinclude>


== Parameters ==
== Parameters ==
Line 35: Line 57:
   <div>{{code|<nowiki>{{hex|{{TaluvaClearing}}</nowiki>{{text|<nowiki>|r=1</nowiki>|#dfd}}<nowiki>}}</nowiki>}}</div>
   <div>{{code|<nowiki>{{hex|{{TaluvaClearing}}</nowiki>{{text|<nowiki>|r=1</nowiki>|#dfd}}<nowiki>}}</nowiki>}}</div>
   <div>{{hex|{{TaluvaClearing}}|r=1}}</div>
   <div>{{hex|{{TaluvaClearing}}|r=1}}</div>
   <div>'''''Optional:''''' rotation in units of 30° ({{code|0}}-{{code|11}}).</div>
   <div>'''''Optional:''''' rotation in units of 60° ({{code|0}}-{{code|5}}).</div>
   <div>{{code|f}}</div>
   <div>{{code|f}}</div>
   <div>Flat-top</div>
   <div>Flat-top</div>
Line 62: Line 84:
   <div>{{code|ew}}</div>
   <div>{{code|ew}}</div>
   <div>Edge width</div>
   <div>Edge width</div>
   <div>{{code|4}}</div>
   <div>{{code|8}}</div>
   <div>{{code|<nowiki>{{hex|ec=black</nowiki>{{text|<nowiki>|ew=8</nowiki>|#dfd}}<nowiki>}}</nowiki>}}</div>
   <div>{{code|<nowiki>{{hex|ec=black</nowiki>{{text|<nowiki>|ew=12</nowiki>|#dfd}}<nowiki>}}</nowiki>}}</div>
   <div>{{hex|ec=black|ew=8}}</div>
   <div>{{hex|ec=black|ew=12}}</div>
   <div>'''''Optional:''''' edge width in pixels.</div>
   <div>'''''Optional:''''' edge width as a percentage of the hex width.</div>
   <div>{{code|ac}}</div>
   <div>{{code|ac}}</div>
   <div>Arrow color</div>
   <div>Arrow color</div>
Line 106: Line 128:
   <div>{{code|1}}</div>
   <div>{{code|1}}</div>
   <div>{{code|<nowiki>{{hex</nowiki>{{text|<nowiki>|x=3</nowiki>|#dfd}}<nowiki>}}</nowiki>}}</div>
   <div>{{code|<nowiki>{{hex</nowiki>{{text|<nowiki>|x=3</nowiki>|#dfd}}<nowiki>}}</nowiki>}}</div>
   <div>{{hex|x=3}}</div>
   <div></div>
   <div>'''''Optional:''''' x coordinate of the hex on a '''[[Template:HexMap]]'''.</div>
   <div>'''''Optional:''''' x coordinate of the hex on a '''[[Template:HexMap]]'''.</div>
   <div>{{code|y}}</div>
   <div>{{code|y}}</div>
Line 112: Line 134:
   <div>{{code|1}}</div>
   <div>{{code|1}}</div>
   <div>{{code|<nowiki>{{hex</nowiki>{{text|<nowiki>|y=2</nowiki>|#dfd}}<nowiki>}}</nowiki>}}</div>
   <div>{{code|<nowiki>{{hex</nowiki>{{text|<nowiki>|y=2</nowiki>|#dfd}}<nowiki>}}</nowiki>}}</div>
   <div>{{hex|y=2}}</div>
   <div></div>
   <div>'''''Optional:''''' y coordinate of the hex on a '''[[Template:HexMap]]'''.</div>
   <div>'''''Optional:''''' y coordinate of the hex on a '''[[Template:HexMap]]'''.</div>
   <div>{{code|z}}</div>
   <div>{{code|z}}</div>
Line 118: Line 140:
   <div>empty</div>
   <div>empty</div>
   <div>{{code|<nowiki>{{hex</nowiki>{{text|<nowiki>|z=2</nowiki>|#dfd}}<nowiki>}}</nowiki>}}</div>
   <div>{{code|<nowiki>{{hex</nowiki>{{text|<nowiki>|z=2</nowiki>|#dfd}}<nowiki>}}</nowiki>}}</div>
   <div>{{hex|z=2}}</div>
   <div></div>
   <div>'''''Optional:''''' z-axis position stacking order.</div>
   <div>'''''Optional:''''' z-axis position stacking order.</div>
</div>
</div>

Revision as of 22:37, 6 December 2025

​
​

Parameters

Id
Name
Default
Example
Result
Description
1
Image
empty
{{hex|{{TaluvaClearing}}}}
Clearing​
​
Optional: Template:GameIcon image.
r
Rotation
0
{{hex|{{TaluvaClearing}}|r=1}}
Clearing​
​
Optional: rotation in units of 60° (0-5).
f
Flat-top
pointed-top
{{hex|f=}}
​
​
Optional: transform to a flat-top hex.
c
Corners
n/a
{{hex|c=}}
​
​
Optional: rounded corners.
b
Background
#ddd
{{hex|b=green}}
​
​
Optional: background as a CSS color.
ec
Edge color
transparent
{{hex|ec=green}}
​
​
Optional: edge color as a CSS color.
ew
Edge width
8
{{hex|ec=black|ew=12}}
​
​
Optional: edge width as a percentage of the hex width.
ac
Arrow color
transparent
{{hex|ac=green}}
​
​
Optional: arrow color as a CSS color.
ar
Arrow rotation
0
{{hex|ac=black|ar=1}}
​
​
Optional: arrow rotation in units of 60° (0-5).
t
Text
empty
{{hex|t=1}}
​
1
Optional: text value.
tc
Text color
white
{{hex|t=1|tc=green}}
​
1
Optional: text color as a CSS color.
to
Text outline
black
{{hex|t=1|to=green}}
​
1
Optional: text outline color as a CSS color.
w
Width
67.195
{{hex|w=50}}
​
​
Optional: width of the hex.
x
X
1
{{hex|x=3}}
Optional: x coordinate of the hex on a Template:HexMap.
y
Y
1
{{hex|y=2}}
Optional: y coordinate of the hex on a Template:HexMap.
z
Z
empty
{{hex|z=2}}
Optional: z-axis position stacking order.

Category:ShapeTemplates

Category:ShapeTemplates

Pages using Template:Hex

Retrieved from "http:///index.php?title=Template:Hex&oldid=27511"