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 (max-width)
(n-c n-bg)
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.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|transparent}}};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;{{{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.
A map for '''[[Template:Hex]]es''' and other hexagonal pieces.
Line 128: Line 128:
   <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>#199</code> (teal)</div>
   <div><code>transparent</code></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 135:
   <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-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>n-bg</code></div>
   <div><code>#199</code> (teal)</div>
   <div><code>#199</code> (teal)</div>

Revision as of 17:18, 26 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
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.