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

Template:HexMap: Difference between revisions

From Board Game Arena
Jump to navigation Jump to search
m (padding)
m (max-width)
Line 1: Line 1:
<div style="position:relative;display:grid;grid:auto-flow calc(0.5*{{{x|67.195}}}px)/repeat({{{w|auto-fit}}},calc(0.75*{{{x|67.195}}}px/cos(30deg)));{{{|g}}}rid:auto-flow calc(0.75*{{{x|67.195}}}px/cos(30deg))/repeat({{{w|auto-fit}}},calc(0.5*{{{x|67.195}}}px));width:fit-content;background:{{{bg|#199}}};border-radius:8px;padding:16px calc(16px + (0.5*{{{x|67.195}}}px/cos(30deg))) calc(16px + (0.5*{{{x|67.195}}}px)) 16px;{{{|p}}}adding:16px 16px calc(16px + (0.25*{{{x|67.195}}}px/cos(30deg))) 16px;margin-top:8px;white-space:nowrap;"><div style="position:absolute;display:flex;justify-content:center;align-items:center;top:8px;left:16px;padding:4px;width:fit-content;min-width:28px;min-height:28px;background:{{{n-bg|#199}}};border-radius:8px;line-height:1;color:#fffe;font-family:Roboto,Arial,sans-serif;font-weight:700;font-size:24px;">{{{n|}}}</div>{{{1|}}}</div><noinclude>
<div style="position:relative;display:grid;grid:auto-flow calc(0.5*{{{x|67.195}}}px)/repeat({{{w|auto-fit}}},calc(0.75*{{{x|67.195}}}px/cos(30deg)));{{{|g}}}rid:auto-flow calc(0.75*{{{x|67.195}}}px/cos(30deg))/repeat({{{w|auto-fit}}},calc(0.5*{{{x|67.195}}}px));width:fit-content;max-width:100vw;background:{{{bg|#199}}};border-radius:8px;padding:16px calc(16px + (0.5*{{{x|67.195}}}px/cos(30deg))) calc(16px + (0.5*{{{x|67.195}}}px)) 16px;{{{|p}}}adding:16px 16px calc(16px + (0.25*{{{x|67.195}}}px/cos(30deg))) 16px;margin-top:8px;white-space:nowrap;"><div style="position:absolute;display:flex;justify-content:center;align-items:center;top:8px;left:16px;padding:4px;width:fit-content;min-width:28px;min-height:28px;background:{{{n-bg|#199}}};border-radius:8px;line-height:1;color:#fffe;font-family:Roboto,Arial,sans-serif;font-weight:700;font-size:24px;">{{{n|}}}</div>{{{1|}}}</div><noinclude>


A map for '''[[Template:Hex]]es''' and other hexagonal pieces.
A map for '''[[Template:Hex]]es''' and other hexagonal pieces.
Line 105: Line 105:
{{hex |x=8 |y=4 |{{TaluvaClearing}}
{{hex |x=8 |y=4 |{{TaluvaClearing}}
}}
}}
}}
</pre>
<div style="display:flex;gap:0 8px;flex-wrap:wrap;">
{{hexMap|= |bg=transparent |n=1 |
{{hiveBee          |x=2 |y=2 }}
{{hiveAnt          |x=3 |y=5 }}
{{hiveBeetle        |x=1 |y=7 }}
{{hiveGrasshopper  |x=4 |y=8 }}
{{hiveSpider        |x=2 |y=4 }}
{{hiveLadybug      |x=2 |y=8 }}
{{hiveBee|1        |x=2 |y=6 }}
{{hiveAnt|1        |x=3 |y=1 }}
{{hiveBeetle|1      |x=3 |y=3 }}
{{hiveGrasshopper|1 |x=1 |y=3 }}
{{hiveSpider|1      |x=3 |y=7 }}
{{hiveLadybug|1    |x=4 |y=2 }}
}}
{{hexMap|= |bg=transparent |n=2 |
{{hiveBee          |x=2 |y=2 }}
{{hiveAnt          |x=3 |y=5 }}
{{hiveBeetle        |x=1 |y=7 }}
{{hiveGrasshopper  |x=1 |y=5 }}
{{hiveSpider        |x=2 |y=4 }}
{{hiveLadybug      |x=2 |y=8 }}
{{hiveBee|1        |x=2 |y=6 }}
{{hiveAnt|1        |x=3 |y=1 }}
{{hiveBeetle|1      |x=3 |y=3 }}
{{hiveGrasshopper|1 |x=1 |y=3 }}
{{hiveSpider|1      |x=3 |y=7 }}
{{hiveLadybug|1    |x=4 |y=2 }}
}}
</div>
<pre style="background:none;border:none;">
{{hexMap|= |bg=transparent |n=1 |
{{hiveBee          |x=2 |y=2 }}
{{hiveAnt          |x=3 |y=5 }}
{{hiveBeetle        |x=1 |y=7 }}
{{hiveGrasshopper  |x=4 |y=8 }}
{{hiveSpider        |x=2 |y=4 }}
{{hiveLadybug      |x=2 |y=8 }}
{{hiveBee|1        |x=2 |y=6 }}
{{hiveAnt|1        |x=3 |y=1 }}
{{hiveBeetle|1      |x=3 |y=3 }}
{{hiveGrasshopper|1 |x=1 |y=3 }}
{{hiveSpider|1      |x=3 |y=7 }}
{{hiveLadybug|1    |x=4 |y=2 }}
}}
}}
</pre>
</pre>

Revision as of 21:24, 23 May 2024

A map for Template:Hexes and other hexagonal pieces.

Examples

1
Sand
red meeple
Sand
Sand
Sand
Jungle
green meeple
Jungle
Jungle
Sand
Jungle
Clearing
blue meeple
Clearing
red meeple
Sand
green meeple
Jungle
Clearing
blue meeple
Clearing
2
Sand
red meeple
Sand
Sand
Sand
red meeple
Jungle
green meeple
Jungle
green meeple
Jungle
Sand
Jungle
Clearing
blue meeple
Clearing
red meeple
Sand
green meeple
Jungle
Clearing
blue meepleblue meeple
Clearing
{{hexMap |n=1 |
{{hex |x=3 |y=1 |{{TaluvaSand}} |{{meeple|red}}
}}
{{hex |x=5 |y=1 |{{TaluvaSand}}
}}
{{hex |x=7 |y=1 |{{TaluvaSand}}
}}
{{hex |x=2 |y=2 |{{TaluvaSand}}
}}
{{hex |x=4 |y=2 |{{TaluvaJungle}} |{{meeple|green}}
}}
{{hex |x=6 |y=2 |{{TaluvaJungle}}
}}
{{hex |x=8 |y=2 |{{TaluvaJungle}}
}}
{{hex |x=1 |y=3 |{{TaluvaSand}}
}}
{{hex |x=3 |y=3 |{{TaluvaJungle}}
}}
{{hex |x=5 |y=3 |{{TaluvaClearing}} |{{meeple|blue}}
}}
{{hex |x=7 |y=3 |{{TaluvaClearing}} |{{meeple|red}}
}}
{{hex |x=2 |y=4 |{{TaluvaSand}} |{{meeple|green}}
}}
{{hex |x=4 |y=4 |{{TaluvaJungle}}
}}
{{hex |x=6 |y=4 |{{TaluvaClearing}} |{{meeple|blue}}
}}
{{hex |x=8 |y=4 |{{TaluvaClearing}}
}}
}}

Parameters

Parameter
Default value
Example
Description
1
null
{{HexMap |{{hex}} }}
Optional: place Template:Hex tiles on the map.
x
67.195
{{hexMap |x=80 }}
Optional: specify the grid hex width in px units.
w
auto-fit
{{hexMap |w=20 }}
Optional: specify the grid width in hexes.
bg
#199 (teal)
{{hexMap |bg=green }}
Optional: specify the background as a CSS color.
n
null
{{HexMap |n=1 }}
Optional: specify text in the top left corner of the map.
n-bg
#199 (teal)
{{hexMap |n-bg=green }}
Optional: specify the text background as a CSS color.