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 ({{{w|auto-fit}}})
(flat-top hexes, background)
Line 1: Line 1:
<div style="position:relative;display:grid;grid: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|#ddd4}}};border-radius:8px;padding:16px 16px calc(16px + (0.25*{{{x|67.195}}}px/cos(30deg))) 16px;margin-top:8px;white-space:nowrap;"><div style="position:absolute;top:8px;left:16px;color:#fffc;font-family:Roboto,Arial,sans-serif;font-weight:700;font-size:24px;text-shadow:1px 1px 5px #000;">{{{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;background:{{{bg|#199}}};border-radius:8px;padding:16px calc(16px + (0.75*{{{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'''.
A map for '''[[Template:Hex]]es''' and other hexagonal pieces.


== Example ==
== Examples ==


<div style="display:flex;gap:0 8px;flex-wrap:wrap;">
<div style="display:flex;gap:0 8px;flex-wrap:wrap;">
{{hexMap |bg=deepskyblue |n=1 |
{{hexMap |n=1 |
{{hex |x=3 |y=1 |{{TaluvaSand}} |{{meeple|red}}
{{hex |x=3 |y=1 |{{TaluvaSand}} |{{meeple|red}}
}}
}}
Line 39: Line 39:
}}
}}


{{hexMap |bg=deepskyblue |n=2 |
{{hexMap |n=2 |
{{hex |x=3 |y=1 |{{TaluvaSand}} |{{meeple|red}}
{{hex |x=3 |y=1 |{{TaluvaSand}} |{{meeple|red}}
}}
}}
Line 74: Line 74:


<pre style="background:none;border:none;">
<pre style="background:none;border:none;">
{{hexMap |bg=deepskyblue |n=1 |
{{hexMap |n=1 |
{{hex |x=3 |y=1 |{{TaluvaSand}} |{{meeple|red}}
{{hex |x=3 |y=1 |{{TaluvaSand}} |{{meeple|red}}
}}
}}
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>
Line 128: Line 180:
   <div>'''''Optional:''''' specify the grid width in hexes.</div>
   <div>'''''Optional:''''' specify the grid width in hexes.</div>
   <div><code>bg</code></div>
   <div><code>bg</code></div>
   <div><code>#ddd</code></div>
   <div><code>#199</code> (teal)</div>
   <div><code><nowiki>{{hexMap |bg=green }}</nowiki></code></div>
   <div><code><nowiki>{{hexMap |bg=green }}</nowiki></code></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>
Line 135: Line 187:
   <div><code><nowiki>{{HexMap |n=1 }}</nowiki></code></div>
   <div><code><nowiki>{{HexMap |n=1 }}</nowiki></code></div>
   <div>'''''Optional:''''' specify text in the top left corner of the map.</div>
   <div>'''''Optional:''''' specify text in the top left corner of the map.</div>
  <div><code>n-bg</code></div>
  <div><code>#199</code> (teal)</div>
  <div><code><nowiki>{{hexMap |n-bg=green }}</nowiki></code></div>
  <div>'''''Optional:''''' specify the text background as a [https://developer.mozilla.org/en-US/docs/Web/CSS/color CSS color].</div>
</div>
</div>


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

Revision as of 01:13, 18 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}}
}}
}}
1
Queen Bee
Soldier Ant
Beetle
Grasshopper
Spider
Ladybug
Queen Bee
Soldier Ant
Beetle
Grasshopper
Spider
Ladybug
2
Queen Bee
Soldier Ant
Beetle
Grasshopper
Spider
Ladybug
Queen Bee
Soldier Ant
Beetle
Grasshopper
Spider
Ladybug
{{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 }}
}}

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.