Mezzodrinker: Re-size demonstration table to 100% width, as the hex would otherwise have a size of 0×0

2024-11-30T15:30:44Z

Re-size demonstration table to 100% width, as the hex would otherwise have a size of 0×0

← Older revision		Revision as of 15:30, 30 November 2024
Line 7:		Line 7:
	'''IMPORTANT NOTE:''' The stat hexagon will ''always'' scale to the surrounding element's bounds! This means that, unless you put the result of this template into a width- and/or height-constrained element, the hexagon will use the entire width available in its parent element.		'''IMPORTANT NOTE:''' The stat hexagon will ''always'' scale to the surrounding element's bounds! This means that, unless you put the result of this template into a width- and/or height-constrained element, the hexagon will use the entire width available in its parent element.

	<table class="wikitable mw-collapsible mw-collapsed">		<table class="wikitable mw-collapsible mw-collapsed" style="width: 100%">
	<tr>		<tr>
	<th colspan="2">Automatic scaling demonstration</th>		<th colspan="2">Automatic scaling demonstration</th>

Mezzodrinker: Created page with "

2024-11-30T15:28:26Z

Created page with "<div style="width: 300px;"><onlyinclude><div style="position: relative; box-sizing: border-box; width: 100%; height: 100%; padding: calc(2lh + 0.25..."

New page
<div style="width: 300px;"><onlyinclude><div style="position: relative; box-sizing: border-box; width: 100%; height: 100%; padding: calc(2lh + 0.25em) calc(6ch + 0.25em); text-align: center; font-size: 12pt; line-height: 1.5; font-weight: bold; white-space: nowrap;"><div style="position: relative; aspect-ratio: cos(30deg); clip-path: polygon(-50% 50%, 50% 100%, 150% 50%, 50% 0); background: white;"><div style="position: absolute; top: 2.5%; right: 2.5%; bottom: 2.5%; left: 2.5%; clip-path: polygon(-50% 50%, 50% 100%, 150% 50%, 50% 0); background: #9dacc3;"><div style="position: absolute; top: 0; bottom: 0; left: 50%; width: 2.5%; background: white; transform: translateX(-50%);"><div style="position: absolute; top: 0; bottom: 0; width: 100%; background: white; transform: rotate(60deg);"></div><div style="position: absolute; top: 0; bottom: 0; width: 100%; background: white; transform: rotate(-60deg);"></div></div>{{#tag: div|
{{#tag: div|
| style = position: absolute; top: 5%; right: 5%; bottom: 5%; left: 5%; background: #3fbb9f; clip-path: polygon(50% calc(50% - {{{maxhp|50}}} / {{{max|300}}} * 47.5%), calc(50% + {{{matk|50}}} / {{{max|300}}} * 47.5%) calc(50% - {{{matk|50}}} / {{{max|300}}} * 47.5% * cos(60deg)), calc(50% + {{{mdef|50}}} / {{{max|300}}} * 47.5%) calc(50% - {{{mdef|50}}} / {{{max|300}}} * 47.5% * cos(120deg)), 50% calc(50% + {{{speed|50}}} / {{{max|300}}} * 47.5%), calc(50% - {{{rdef|50}}} / {{{max|300}}} * 47.5%) calc(50% - {{{rdef|50}}} / {{{max|300}}} * 47.5% * cos(240deg)), calc(50% - {{{ratk|50}}} / {{{max|300}}} * 47.5%) calc(50% - {{{ratk|50}}} / {{{max|300}}} * 47.5% * cos(300deg)))
}}
| style = position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: #ab75e8; opacity: 0.85; clip-path: polygon(50% calc(50% - {{{maxhp|50}}} / {{{max|300}}} * 47.5%), calc(50% + {{{matk|50}}} / {{{max|300}}} * 47.5%) calc(50% - {{{matk|50}}} / {{{max|300}}} * 47.5% * cos(60deg)), calc(50% + {{{mdef|50}}} / {{{max|300}}} * 47.5%) calc(50% - {{{mdef|50}}} / {{{max|300}}} * 47.5% * cos(120deg)), 50% calc(50% + {{{speed|50}}} / {{{max|300}}} * 47.5%), calc(50% - {{{rdef|50}}} / {{{max|300}}} * 47.5%) calc(50% - {{{rdef|50}}} / {{{max|300}}} * 47.5% * cos(240deg)), calc(50% - {{{ratk|50}}} / {{{max|300}}} * 47.5%) calc(50% - {{{ratk|50}}} / {{{max|300}}} * 47.5% * cos(300deg)))
}}</div></div><span style="position: absolute; top: 0; left: 50%; transform: translateX(-50%);"><abbr title="Maximum Hitpoints">Max HP</abbr><br>{{{maxhp|50}}}</span><span style="position: absolute; top: calc(50% - 50% * cos(60deg)); right: 0;"><abbr title="Melee Attack">M. Atk</abbr><br>{{{matk|50}}}</span><span style="position: absolute; bottom: calc(50% - 50% * cos(60deg)); right: 0;"><abbr title="Melee Defence">M. Def</abbr><br>{{{mdef|50}}}</span><span style="position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);">Speed<br>{{{speed|50}}}</span><span style="position: absolute; bottom: calc(50% - 50% * cos(60deg)); left: 0;"><abbr title="Ranged Defence">R. Def</abbr><br>{{{rdef|50}}}</span><span style="position: absolute; top: calc(50% - 50% * cos(60deg)); left: 0;"><abbr title="Ranged Attack">R. Atk</abbr><br>{{{ratk|50}}}</span></div></onlyinclude></div>
'''IMPORTANT NOTE:''' The stat hexagon will ''always'' scale to the surrounding element's bounds! This means that, unless you put the result of this template into a width- and/or height-constrained element, the hexagon will use the entire width available in its parent element.

<table class="wikitable mw-collapsible mw-collapsed">
<tr>
<th colspan="2">Automatic scaling demonstration</th>
</tr>
<tr>
<td>constrained to a width of 300px</td>
<td>unconstrained</td>
</tr>
<tr>
<td style="width: 300px">{{StatsHex}}</td>
<td>{{StatsHex}}</td>
</tr>
</table>

In order to achieve the same size as the example at the beginning of the page, use the template as follows:
{{#tag: pre | <div style="width: 300px;"><nowiki>{{</nowiki>{{PAGENAME}}<nowiki>}}</nowiki></div> }}

== Parameters ==
; maxhp
: ''(optional, defaults to 50)''<br>Value of the "Max HP" stat.
; matk
: ''(optional, defaults to 50)''<br>Value of the "M. Atk" stat.
; mdef
: ''(optional, defaults to 50)''<br>Value of the "M. Def" stat.
; ratk
: ''(optional, defaults to 50)''<br>Value of the "R. Def" stat.
; rdef
: ''(optional, defaults to 50)''<br>Value of the "R. Atk" stat.
; speed
: ''(optional, defaults to 50)''<br>Value of the "Speed" stat.
; max
: ''(optional, defaults to 300)''<br>Maximum value that can be shown in the stats hexagon. The higher the value, the lower the scaling factor for all stats. Should not be lower than any stat's value or things might start to look... odd.

== Examples ==
<ul>
<li>
<pre>
<div style="width: 300px;">{{StatsHex|maxhp=144|matk=100|mdef=100|ratk=100|rdef=100|speed=100|max=150}}</div>
</pre> → <div style="width: 300px;">{{StatsHex|maxhp=144|matk=100|mdef=100|ratk=100|rdef=100|speed=100|max=150}}</div>
</li>
<li>
<pre>
<div style="width: 300px;">{{StatsHex|maxhp=80|matk=150|mdef=80|ratk=80|rdef=80|speed=190}}</div>
</pre> → <div style="width: 300px;">{{StatsHex|maxhp=80|matk=150|mdef=80|ratk=80|rdef=80|speed=190}}</div>
</li>
</ul>