Template:HexMap: Difference between revisions

Latest revision as of 00:27, 28 May 2024

A map for Template:Hexes and other hexagonal pieces.

Examples

Hive

{{hexMap|gap=2|

{{hiveAnt           |r=3  |x=1 |y=2 }}
{{hiveBeetle        |r=1  |x=2 |y=3 }}
{{hiveGrasshopper   |r=11 |x=4 |y=3 }}
{{hiveSpider        |r=9  |x=5 |y=2 }}

{{hiveBee|w=        |r=0  |x=3 |y=2 }}
{{hiveGrasshopper|w=|r=0  |x=2 |y=1 }}
{{hiveSpider|w=     |r=0  |x=4 |y=1 }}
}}

1

2

{{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.

gap

0

{{hexMap |gap=4 }}

Optional: specify the gap between hexes in px units.

w

auto-fit

{{hexMap |w=20 }}

Optional: specify the grid width in hexes.

bg

transparent

{{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-c

#fff (white)

{{hexMap |n-c=green }}

Optional: specify the text color as a CSS color.

n-bg

#199 (teal)

{{hexMap |n-bg=green }}

Optional: specify the text background as a CSS color.

@@ 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;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>
+<div style="position:relative;display:grid;grid:auto-flow calc(0.5px*{{{x|67.195}}})/repeat({{{w|auto-fit}}},calc(0.75px*{{{x|67.195}}}/cos(30deg)));{{{|g}}}rid:auto-flow calc(0.75px*{{{x|67.195}}}/cos(30deg))/repeat({{{w|auto-fit}}},calc(0.5px*{{{x|67.195}}}));place-items:center;gap:calc(1px*{{{gap|0}}});width:fit-content;max-width:100vw;background:{{{bg|transparent}}};border-radius:8px;padding:16px;margin-top:8px;white-space:nowrap;"><div style="position:absolute;display:flex;{{{n|display:none}}};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:28px;line-height:1;color:{{{n-c|#fff}}};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.
@@ Line 5: / Line 5: @@
 == Examples ==
+=== [[Gamehelphive|Hive]] ===
+{{hexMap|
+{{hiveAnt           |r=3  |x=1 |y=2 }}
+{{hiveBeetle        |r=1  |x=2 |y=3 }}
+{{hiveGrasshopper   |r=11 |x=4 |y=3 }}
+{{hiveSpider        |r=9  |x=5 |y=2 }}
+{{hiveBee|w=        |r=0  |x=3 |y=2 }}
+{{hiveGrasshopper|w=|r=0  |x=2 |y=1 }}
+{{hiveSpider|w=     |r=0  |x=4 |y=1 }}
+}}
+<pre style="background:none;border:none;">
+{{hexMap|gap=2|
+{{hiveAnt           |r=3  |x=1 |y=2 }}
+{{hiveBeetle        |r=1  |x=2 |y=3 }}
+{{hiveGrasshopper   |r=11 |x=4 |y=3 }}
+{{hiveSpider        |r=9  |x=5 |y=2 }}
+{{hiveBee|w=        |r=0  |x=3 |y=2 }}
+{{hiveGrasshopper|w=|r=0  |x=2 |y=1 }}
+{{hiveSpider|w=     |r=0  |x=4 |y=1 }}
+}}
+</pre>
+----
 <div style="display:flex;gap:0 8px;flex-wrap:wrap;">
 {{hexMap |n=1 |
@@ Line 123: / Line 151: @@
    <div><code><nowiki>{{hexMap |x=80 }}</nowiki></code></div>
    <div>'''''Optional:''''' specify the grid hex width in px units.</div>
+  <div><code>gap</code></div>
+  <div><code>0</code></div>
+  <div><code><nowiki>{{hexMap |gap=4 }}</nowiki></code></div>
+  <div>'''''Optional:''''' specify the gap between hexes in px units.</div>
    <div><code>w</code></div>
    <div><code>auto-fit</code></div>
@@ Line 128: / Line 160: @@
    <div>'''''Optional:''''' specify the grid width in hexes.</div>
    <div><code>bg</code></div>
-   <div><code>#199</code> (teal)</div>
+   <div><code>transparent</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>
@@ Line 135: / Line 167: @@
    <div><code><nowiki>{{HexMap |n=1 }}</nowiki></code></div>
    <div>'''''Optional:''''' specify text in the top left corner of the map.</div>
+  <div><code>n-c</code></div>
+  <div><code>#fff</code> (white)</div>
+  <div><code><nowiki>{{hexMap |n-c=green }}</nowiki></code></div>
+  <div>'''''Optional:''''' specify the text color as a [https://developer.mozilla.org/en-US/docs/Web/CSS/color CSS color].</div>
    <div><code>n-bg</code></div>
    <div><code>#199</code> (teal)</div>

Template:HexMap: Difference between revisions

Latest revision as of 00:27, 28 May 2024

Examples

Hive

Parameters

Navigation menu

Search