Module:LegendaryPokemon - Revision history

Cae at 18:45, 4 August 2026

2026-08-04T18:45:59Z

← Older revision		Revision as of 18:45, 4 August 2026
Line 74:		Line 74:
	end		end

			-- Same 3-column shape as Module:Pokemon's statBarRow: a nowrap label that
			-- only takes the width its own text needs, a bar column pinned to width:
			-- 100% that soaks up all the leftover space, and a small fixed-width value
			-- column after it -- rather than forcing the label into a fixed 40%, which
			-- is what was crowding the bar and making the whole row look right-heavy.
	local function statBar(frame, label, value, dark)		local function statBar(frame, label, value, dark)
	value = tonumber(value) or 0		value = tonumber(value) or 0
	local pct = math.~~max(0, math.min(100,~~ (value / STAT_MAX) * 100))		local pct = math.floor(value / STAT_MAX * 100 + 0.5)
	local hue = math.floor((math.max(0, math.min(~~STAT_MAX~~, value)) / STAT_MAX) * 130) -- red (low) -> teal (high)		if pct < 2 then pct = 2 end
	~~-- box-sizing here matters because width is a percentage of a~~		if pct > 100 then pct = 100 end
	~~-- table-layout: fixed column: without it~~, ~~this td's own padding would~~		local hue = math.floor(math.max(0, math.min(180, value * 180 / STAT_MAX)) + 0.5) -- red (low) -> teal (high)
	~~-- add on top of that 60~~%, ~~throwing the bar past the column~~'~~s actual box.~~		local fill = 'hsl(' .. hue .. ', 85%, 45%)'
	return '<tr><td style="~~width~~: ~~40%~~; ~~box-sizing~~: ~~border-box~~; ~~text~~-~~align~~: ~~left~~; ~~padding~~: ~~2px 4px~~; ' ..		return '<tr>' ..
	'~~font-size: 11px;~~ color: #' .. dark .. ';">' .. label .. '</td>' ..		'<td style="text-align: right; padding: 2px 6px 2px 2px; font-weight: bold; font-size: 10px; ' ..
	'<td style="width: 60%~~; box-sizing: border-box; text-align: left~~; padding: 2px ~~4px~~;">~~' ..~~		'color: #' .. dark .. '; white-space: nowrap;">' .. label .. '</td>' ..
	'<div style="background: #FFFFFF; border: 1px solid #' .. ~~dark ..~~ '; border-radius: 8px; overflow: hidden;">' ..		'<td style="width: 100%; padding: 2px 0;"><div style="background-color: #FFFFFF; border: 1px solid ' ..
	'<div style="width: ' .. pct .. '%; background: ~~hsl(~~' .. ~~hue~~ ..		'#999999; border-radius: 8px; height: 12px; overflow: hidden;">' ..
	'~~, 65%, 45%); color~~: ~~#FFFFFF~~; ~~font-size~~: ~~10px~~; font-weight: ~~normal~~; ~~text~~-~~align~~: ~~left; padding: 1px 4px~~; ' ..		'<div style="width: ' .. pct .. '%; height: 100%; background-color: ' .. fill .. ';"></div>' ..
	'~~white-space~~: ~~nowrap~~;">' .. value .. '~~</div></div>~~</td></tr>'		'</div></td>' ..
			'<td style="text-align: left; padding: 2px 2px 2px 6px; font-weight: bold; font-size: 10px; ' ..
			'width: 28px;">' .. value .. '</td></tr>'
	end		end

Line 158:		Line 165:
	buf[#buf + 1] = typeBadges(frame, row)		buf[#buf + 1] = typeBadges(frame, row)

	buf[#buf + 1] = '<table style="width: 100%~~; table-layout: fixed~~; border: none; border-collapse: collapse; ~~' ..~~		buf[#buf + 1] = '<table style="width: 100%; border: none; border-collapse: collapse; margin-top: 6px;">' ..
	'margin-top: 6px;">' ..
	statBar(frame, 'HP', row.hp, c.dark) ..		statBar(frame, 'HP', row.hp, c.dark) ..
	statBar(frame, 'Attack', row.atk, c.dark) ..		statBar(frame, 'Attack', row.atk, c.dark) ..
Line 166:		Line 172:
	statBar(frame, 'Sp. Def', row.spdef, c.dark) ..		statBar(frame, 'Sp. Def', row.spdef, c.dark) ..
	statBar(frame, 'Speed', row.spd, c.dark) ..		statBar(frame, 'Speed', row.spd, c.dark) ..
	'<tr><td style="text-align: ~~left~~; ~~padding~~: ~~3px~~ 4px~~; font-size: 11px~~;"~~>Total</td~~>' ..		'</table>'
	'<td style="padding: ~~3px 4px~~; font-size: 11px;">' .. bst .. '</td></~~tr></table~~>'
			buf[#buf + 1] = '<div style="text-align: center; margin-top: 4px;">' ..
			'<div style="display: inline-block; background-color: #FFFFFF; border: 1px solid #' .. c.dark ..
			'; padding: 2px 10px; border-radius: 10px; font-size: 11px;">Total: ' .. bst .. '</div></div>'

	buf[#buf + 1] = '</div>'		buf[#buf + 1] = '</div>'

Cae at 18:39, 4 August 2026

2026-08-04T18:39:13Z

← Older revision		Revision as of 18:39, 4 August 2026
Line 78:		Line 78:
	local pct = math.max(0, math.min(100, (value / STAT_MAX) * 100))		local pct = math.max(0, math.min(100, (value / STAT_MAX) * 100))
	local hue = math.floor((math.max(0, math.min(STAT_MAX, value)) / STAT_MAX) * 130) -- red (low) -> teal (high)		local hue = math.floor((math.max(0, math.min(STAT_MAX, value)) / STAT_MAX) * 130) -- red (low) -> teal (high)
	return '<tr><td style="width: 40%; text-align: left; padding: 2px 4px; font-size: 11px; color: #' .. dark ..		-- box-sizing here matters because width is a percentage of a
	';">' .. label .. '</td><td style="padding: 2px 4px;">' ..		-- table-layout: fixed column: without it, this td's own padding would
			-- add on top of that 60%, throwing the bar past the column's actual box.
			return '<tr><td style="width: 40%; box-sizing: border-box; text-align: left; padding: 2px 4px; ' ..
			'font-size: 11px; color: #' .. dark .. ';">' .. label .. '</td>' ..
			'<td style="width: 60%; box-sizing: border-box; text-align: left; padding: 2px 4px;">' ..
	'<div style="background: #FFFFFF; border: 1px solid #' .. dark .. '; border-radius: 8px; overflow: hidden;">' ..		'<div style="background: #FFFFFF; border: 1px solid #' .. dark .. '; border-radius: 8px; overflow: hidden;">' ..
	'<div style="width: ' .. pct .. '%; background: hsl(' .. hue ..		'<div style="width: ' .. pct .. '%; background: hsl(' .. hue ..
	', 65%, 45%); color: #FFFFFF; font-size: 10px; font-weight: normal; padding: 1px 4px; ' ..		', 65%, 45%); color: #FFFFFF; font-size: 10px; font-weight: normal; text-align: left; padding: 1px 4px; ' ..
	'white-space: nowrap;">' .. value .. '</div></div></td></tr>'		'white-space: nowrap;">' .. value .. '</div></div></td></tr>'
	end		end
Line 144:		Line 148:
	'\|<span style="color: #' .. c.dark .. ';">' .. name .. '</span>]]</span>' .. genLine .. '</div>'		'\|<span style="color: #' .. c.dark .. ';">' .. name .. '</span>]]</span>' .. genLine .. '</div>'

	buf[#buf + 1] = '<div style="background-color: #FFFFFF; border-radius: 15px; height: 150px; ~~display~~: ~~flex~~; ' ..		-- 150x150px (not just 150px) fits the sprite within a 150x150 box on
	'align-items: center; justify-content: center; margin-bottom: 6px;">[[File:' .. (row.number or '') ..		-- whichever dimension is the constraint, instead of only fixing width
	name .. '.png\|~~150px~~]]</div>'		-- and leaving height to the image's own aspect ratio -- a tall/narrow
			-- sprite was overflowing the fixed-height box under the old \|150px form.
			buf[#buf + 1] = '<div style="background-color: #FFFFFF; border-radius: 15px; height: 150px; overflow: hidden; ' ..
			'display: flex; align-items: center; justify-content: center; margin-bottom: 6px;">[[File:' ..
			(row.number or '') .. name .. '.png\|150x150px]]</div>'

	buf[#buf + 1] = typeBadges(frame, row)		buf[#buf + 1] = typeBadges(frame, row)

	buf[#buf + 1] = '<table style="width: 100%; border: none; border-collapse: collapse; margin-top: 6px;">' ..		buf[#buf + 1] = '<table style="width: 100%; table-layout: fixed; border: none; border-collapse: collapse; ' ..
			'margin-top: 6px;">' ..
	statBar(frame, 'HP', row.hp, c.dark) ..		statBar(frame, 'HP', row.hp, c.dark) ..
	statBar(frame, 'Attack', row.atk, c.dark) ..		statBar(frame, 'Attack', row.atk, c.dark) ..

Cae at 18:22, 4 August 2026

2026-08-04T18:22:47Z

← Older revision		Revision as of 18:22, 4 August 2026
Line 216:		Line 216:
	-- shrink-to-fit, so a long sentence just wraps instead of stretching it.		-- shrink-to-fit, so a long sentence just wraps instead of stretching it.
	return '<div style="display: inline-block; vertical-align: top; box-sizing: border-box; ' ..		return '<div style="display: inline-block; vertical-align: top; box-sizing: border-box; ' ..
	'width: calc(50% - 10px); border: 1px solid #' .. c.dark ..		'width: calc(50% - 10px); background-color: #' .. c.base .. '; border: 1px solid #' .. c.dark ..
	'; border-radius: 22px; padding: 4px; margin: 5px;">' ..		'; border-radius: 22px; padding: 4px; margin: 5px;">' ..
	cardHtml .. requirementsBox(c.dark, requirements) .. '</div>'		cardHtml .. requirementsBox(c.dark, requirements) .. '</div>'

Cae at 18:12, 4 August 2026

2026-08-04T18:12:25Z

Show changes

Cae: Undo revision 41041 by Cae (talk)

2026-08-04T18:01:00Z

Undo revision 41041 by Cae (talk)

← Older revision		Revision as of 18:01, 4 August 2026
Line 78:		Line 78:
	local pct = math.max(0, math.min(100, (value / STAT_MAX) * 100))		local pct = math.max(0, math.min(100, (value / STAT_MAX) * 100))
	local hue = math.floor((math.max(0, math.min(STAT_MAX, value)) / STAT_MAX) * 130) -- red (low) -> teal (high)		local hue = math.floor((math.max(0, math.min(STAT_MAX, value)) / STAT_MAX) * 130) -- red (low) -> teal (high)
	return '<tr><td style="width: 38%; text-align: left; padding: ~~1px~~ 4px; font-size: ~~10px~~; color: #' .. dark ..		return '<tr><td style="width: 40%; text-align: left; padding: 2px 4px; font-size: 11px; color: #' .. dark ..
	';">' .. label .. '</td><td style="padding: ~~1px~~ 4px;">' ..		';">' .. label .. '</td><td style="padding: 2px 4px;">' ..
	'<div style="background: #FFFFFF; border: 1px solid #' .. dark .. '; border-radius: ~~7px~~; overflow: hidden;">' ..		'<div style="background: #FFFFFF; border: 1px solid #' .. dark .. '; border-radius: 8px; overflow: hidden;">' ..
	'<div style="width: ' .. pct .. '%; background: hsl(' .. hue ..		'<div style="width: ' .. pct .. '%; background: hsl(' .. hue ..
	', 65%, 45%); color: #FFFFFF; font-size: ~~9px~~; font-weight: normal; padding: 1px 4px; ' ..		', 65%, 45%); color: #FFFFFF; font-size: 10px; font-weight: normal; padding: 1px 4px; ' ..
	'white-space: nowrap;">' .. value .. '</div></div></td></tr>'		'white-space: nowrap;">' .. value .. '</div></div></td></tr>'
	end		end

	~~-- Cells are forced to an even 50/50 split (rather than sizing to content) so~~
	~~-- a longer type name -- "Fighting" next to "Psychic", say -- can't crowd the~~
	~~-- other cell into overflowing; text is still free to wrap onto a second~~
	~~-- line at that width rather than being clipped.~~
	local function typeBadges(frame, row)		local function typeBadges(frame, row)
	local t1 = nonEmpty(row.type1)		local t1 = nonEmpty(row.type1)
Line 95:		Line 91:
	local c1 = typeColor(frame, t1)		local c1 = typeColor(frame, t1)
	if not t2 then		if not t2 then
	return '<table align="center" style="width: 85%; font-weight: bold; font-size: ~~11px~~;"><tr>' ..		return '<table align="center" style="width: 80%; font-weight: bold; font-size: 12px;"><tr>' ..
	'<td style="background-color: #' .. c1.dark .. '; border-radius: ~~12px~~; padding: ~~3px~~;">[[' .. t1 ..		'<td style="background-color: #' .. c1.dark .. '; border-radius: 15px; padding: 2px;">[[' .. t1 ..
	'_(type)\|<span style="color: #FFFFFF;">' .. t1 .. '</span>]]</td></tr></table>'		'_(type)\|<span style="color: #FFFFFF;">' .. t1 .. '</span>]]</td></tr></table>'
	end		end
	local c2 = typeColor(frame, t2)		local c2 = typeColor(frame, t2)
	return '<table align="center" style="width: 85%~~; table-layout: fixed~~; font-weight: bold; font-size: ~~11px~~;">' ..		return '<table align="center" style="width: 80%; font-weight: bold; font-size: 12px;"><tr>' ..
	'~~<tr>~~<td style="~~width: 50%; box-sizing: border-box;~~ background-color: #' .. c1.dark ..		'<td style="background-color: #' .. c1.dark .. '; border-radius: 15px 1px 1px 15px; padding: 2px;">[[' ..
	'; border-radius: ~~12px~~ 1px 1px ~~12px~~; padding: ~~3px; overflow-wrap: break-word~~;">[[' ..
	t1 .. '_(type)\|<span style="color: #FFFFFF;">' .. t1 .. '</span>]]</td>' ..		t1 .. '_(type)\|<span style="color: #FFFFFF;">' .. t1 .. '</span>]]</td>' ..
	'<td style="~~width: 50%; box-sizing: border-box;~~ background-color: #' .. c2.dark ..		'<td style="background-color: #' .. c2.dark .. '; border-radius: 1px 15px 15px 1px; padding: 2px;">[[' ..
	'; border-radius: 1px ~~12px 12px~~ 1px; padding: ~~3px; overflow-wrap: break-word~~;">[[' ..
	t2 .. '_(type)\|<span style="color: #FFFFFF;">' .. t2 .. '</span>]]</td></tr></table>'		t2 .. '_(type)\|<span style="color: #FFFFFF;">' .. t2 .. '</span>]]</td></tr></table>'
	end		end
Line 129:		Line 123:
	local buf = {}		local buf = {}
	buf[#buf + 1] = '<div style="display: inline-block; vertical-align: top; box-sizing: border-box; ' ..		buf[#buf + 1] = '<div style="display: inline-block; vertical-align: top; box-sizing: border-box; ' ..
	'width: 240px; margin: 4px; background-color: #' .. c.base .. '; border: ~~2px~~ solid #' .. c.dark ..		'width: 240px; margin: 4px; background-color: #' .. c.base .. '; border: 3px solid #' .. c.dark ..
	'; border-radius: ~~18px~~; padding: 6px; text-align: center; color: #' .. c.dark .. '; font-weight: bold;">'		'; border-radius: 20px; padding: 6px; text-align: center; color: #' .. c.dark .. '; font-weight: bold;">'

	buf[#buf + 1] = '<div style="background-color: #' .. c.light .. '; border-radius: 15px; padding: 5px; ' ..		buf[#buf + 1] = '<div style="background-color: #' .. c.light .. '; border-radius: 15px; padding: 5px; ' ..
Line 201:		Line 195:
	-- own padding/border) instead of shrink-to-fit, so the card's size		-- own padding/border) instead of shrink-to-fit, so the card's size
	-- is driven by its fixed layout, not by how long Requirements is.		-- is driven by its fixed layout, not by how long Requirements is.
	~~-- No background fill here -- the member card underneath is already~~
	~~-- fully colored, so this wrapper stays a plain thin frame instead of~~
	~~-- doubling the same color behind it.~~
	return '<div style="display: inline-block; vertical-align: top; box-sizing: border-box; width: 250px; ' ..		return '<div style="display: inline-block; vertical-align: top; box-sizing: border-box; width: 250px; ' ..
	'border: 1px solid #' .. c.dark .. '; border-radius: ~~20px~~; padding: 4px; margin: 4px;">' ..		'background-color: #' .. c.base .. '; border: 1px solid #' .. c.dark ..
			'; border-radius: 22px; padding: 4px; margin: 4px;">' ..
	cardHtml .. requirementsBox(c.dark, requirements) .. '</div>'		cardHtml .. requirementsBox(c.dark, requirements) .. '</div>'
	end		end
Line 226:		Line 218:
	local groupWidth = (#members * 248) + 20		local groupWidth = (#members * 248) + 20

	~~-- The band itself stays a light neutral tint with just a thin colored~~
	~~-- border -- the member cards underneath are already fully colored in~~
	~~-- their own type, so filling the band behind them with a second solid~~
	~~-- region color doubled up the saturation instead of adding information.~~
	~~-- The region color still reads clearly via the title pill and border.~~
	local buf = {}		local buf = {}
	buf[#buf + 1] = '<div style="display: inline-block; vertical-align: top; box-sizing: border-box; width: ' ..		buf[#buf + 1] = '<div style="display: inline-block; vertical-align: top; box-sizing: border-box; width: ' ..
	groupWidth .. 'px; max-width: 100%; background-color: #~~F7F7F7~~; border: ~~2px~~ solid #' .. rc.dark ..		groupWidth .. 'px; max-width: 100%; background-color: #' .. rc.base .. '; border: 3px solid #' .. rc.dark ..
	'; border-radius: ~~22px~~; padding: 6px; margin: 4px; text-align: center;">'		'; border-radius: 25px; padding: 6px; margin: 4px; text-align: center;">'

	buf[#buf + 1] = '<div style="width: 100%; box-sizing: border-box; background-color: #' .. rc.light ..		buf[#buf + 1] = '<div style="width: 100%; box-sizing: border-box; background-color: #' .. rc.light ..
	'; border-radius: ~~18px~~; padding: 8px; color: #' .. rc.dark .. '; font-weight: bold;">' ..		'; border-radius: 20px; padding: 8px; color: #' .. rc.dark .. '; font-weight: bold;">' ..
	'<span style="font-size: 18px;">' .. name .. '</span><br><span style="font-size: 12px;">' ..		'<span style="font-size: 18px;">' .. name .. '</span><br><span style="font-size: 12px;">' ..
	'[[:Category:Generation ' .. genRoman .. ' Pokémon\|<span style="color: #' .. rc.dark ..		'[[:Category:Generation ' .. genRoman .. ' Pokémon\|<span style="color: #' .. rc.dark ..
Line 246:		Line 233:

	buf[#buf + 1] = '<div style="width: 100%; box-sizing: border-box; background-color: #' .. rc.light ..		buf[#buf + 1] = '<div style="width: 100%; box-sizing: border-box; background-color: #' .. rc.light ..
	'; border-radius: ~~18px~~; padding: 6px; margin-top: 6px; color: #' .. rc.dark ..		'; border-radius: 20px; padding: 6px; margin-top: 6px; color: #' .. rc.dark ..
	'; font-weight: bold; text-align: left;"><div style="text-align: center;">Availability</div>' ..		'; font-weight: bold; text-align: left;"><div style="text-align: center;">Availability</div>' ..
	requirementsBox(rc.dark, requirements) .. '</div>'		requirementsBox(rc.dark, requirements) .. '</div>'

Cae at 17:59, 4 August 2026

2026-08-04T17:59:27Z

← Older revision		Revision as of 17:59, 4 August 2026
Line 78:		Line 78:
	local pct = math.max(0, math.min(100, (value / STAT_MAX) * 100))		local pct = math.max(0, math.min(100, (value / STAT_MAX) * 100))
	local hue = math.floor((math.max(0, math.min(STAT_MAX, value)) / STAT_MAX) * 130) -- red (low) -> teal (high)		local hue = math.floor((math.max(0, math.min(STAT_MAX, value)) / STAT_MAX) * 130) -- red (low) -> teal (high)
	return '<tr><td style="width: 40%; text-align: left; padding: ~~2px~~ 4px; font-size: ~~11px~~; color: #' .. dark ..		return '<tr><td style="width: 38%; text-align: left; padding: 1px 4px; font-size: 10px; color: #' .. dark ..
	';">' .. label .. '</td><td style="padding: ~~2px~~ 4px;">' ..		';">' .. label .. '</td><td style="padding: 1px 4px;">' ..
	'<div style="background: #FFFFFF; border: 1px solid #' .. dark .. '; border-radius: ~~8px~~; overflow: hidden;">' ..		'<div style="background: #FFFFFF; border: 1px solid #' .. dark .. '; border-radius: 7px; overflow: hidden;">' ..
	'<div style="width: ' .. pct .. '%; background: hsl(' .. hue ..		'<div style="width: ' .. pct .. '%; background: hsl(' .. hue ..
	', 65%, 45%); color: #FFFFFF; font-size: ~~10px~~; font-weight: normal; padding: 1px 4px; ' ..		', 65%, 45%); color: #FFFFFF; font-size: 9px; font-weight: normal; padding: 1px 4px; ' ..
	'white-space: nowrap;">' .. value .. '</div></div></td></tr>'		'white-space: nowrap;">' .. value .. '</div></div></td></tr>'
	end		end

			-- Cells are forced to an even 50/50 split (rather than sizing to content) so
			-- a longer type name -- "Fighting" next to "Psychic", say -- can't crowd the
			-- other cell into overflowing; text is still free to wrap onto a second
			-- line at that width rather than being clipped.
	local function typeBadges(frame, row)		local function typeBadges(frame, row)
	local t1 = nonEmpty(row.type1)		local t1 = nonEmpty(row.type1)
Line 91:		Line 95:
	local c1 = typeColor(frame, t1)		local c1 = typeColor(frame, t1)
	if not t2 then		if not t2 then
	return '<table align="center" style="width: 80%; font-weight: bold; font-size: ~~12px~~;"><tr>' ..		return '<table align="center" style="width: 85%; font-weight: bold; font-size: 11px;"><tr>' ..
	'<td style="background-color: #' .. c1.dark .. '; border-radius: ~~15px~~; padding: ~~2px~~;">[[' .. t1 ..		'<td style="background-color: #' .. c1.dark .. '; border-radius: 12px; padding: 3px;">[[' .. t1 ..
	'_(type)\|<span style="color: #FFFFFF;">' .. t1 .. '</span>]]</td></tr></table>'		'_(type)\|<span style="color: #FFFFFF;">' .. t1 .. '</span>]]</td></tr></table>'
	end		end
	local c2 = typeColor(frame, t2)		local c2 = typeColor(frame, t2)
	return '<table align="center" style="width: 80%; font-weight: bold; font-size: ~~12px~~;"~~><tr~~>' ..		return '<table align="center" style="width: 85%; table-layout: fixed; font-weight: bold; font-size: 11px;">' ..
	'<td style="background-color: #' .. c1.dark .. '; border-radius: ~~15px~~ 1px 1px ~~15px~~; padding: ~~2px~~;">[[' ..		'<tr><td style="width: 50%; box-sizing: border-box; background-color: #' .. c1.dark ..
			'; border-radius: 12px 1px 1px 12px; padding: 3px; overflow-wrap: break-word;">[[' ..
	t1 .. '_(type)\|<span style="color: #FFFFFF;">' .. t1 .. '</span>]]</td>' ..		t1 .. '_(type)\|<span style="color: #FFFFFF;">' .. t1 .. '</span>]]</td>' ..
	'<td style="background-color: #' .. c2.dark .. '; border-radius: 1px ~~15px 15px~~ 1px; padding: ~~2px~~;">[[' ..		'<td style="width: 50%; box-sizing: border-box; background-color: #' .. c2.dark ..
			'; border-radius: 1px 12px 12px 1px; padding: 3px; overflow-wrap: break-word;">[[' ..
	t2 .. '_(type)\|<span style="color: #FFFFFF;">' .. t2 .. '</span>]]</td></tr></table>'		t2 .. '_(type)\|<span style="color: #FFFFFF;">' .. t2 .. '</span>]]</td></tr></table>'
	end		end
Line 123:		Line 129:
	local buf = {}		local buf = {}
	buf[#buf + 1] = '<div style="display: inline-block; vertical-align: top; box-sizing: border-box; ' ..		buf[#buf + 1] = '<div style="display: inline-block; vertical-align: top; box-sizing: border-box; ' ..
	'width: 240px; margin: 4px; background-color: #' .. c.base .. '; border: ~~3px~~ solid #' .. c.dark ..		'width: 240px; margin: 4px; background-color: #' .. c.base .. '; border: 2px solid #' .. c.dark ..
	'; border-radius: ~~20px~~; padding: 6px; text-align: center; color: #' .. c.dark .. '; font-weight: bold;">'		'; border-radius: 18px; padding: 6px; text-align: center; color: #' .. c.dark .. '; font-weight: bold;">'

	buf[#buf + 1] = '<div style="background-color: #' .. c.light .. '; border-radius: 15px; padding: 5px; ' ..		buf[#buf + 1] = '<div style="background-color: #' .. c.light .. '; border-radius: 15px; padding: 5px; ' ..
Line 195:		Line 201:
	-- own padding/border) instead of shrink-to-fit, so the card's size		-- own padding/border) instead of shrink-to-fit, so the card's size
	-- is driven by its fixed layout, not by how long Requirements is.		-- is driven by its fixed layout, not by how long Requirements is.
			-- No background fill here -- the member card underneath is already
			-- fully colored, so this wrapper stays a plain thin frame instead of
			-- doubling the same color behind it.
	return '<div style="display: inline-block; vertical-align: top; box-sizing: border-box; width: 250px; ' ..		return '<div style="display: inline-block; vertical-align: top; box-sizing: border-box; width: 250px; ' ..
	'~~background-color: #' .. c.base .. ';~~ border: 1px solid #' .. c.dark ..		'border: 1px solid #' .. c.dark .. '; border-radius: 20px; padding: 4px; margin: 4px;">' ..
	'; border-radius: ~~22px~~; padding: 4px; margin: 4px;">' ..
	cardHtml .. requirementsBox(c.dark, requirements) .. '</div>'		cardHtml .. requirementsBox(c.dark, requirements) .. '</div>'
	end		end
Line 218:		Line 226:
	local groupWidth = (#members * 248) + 20		local groupWidth = (#members * 248) + 20

			-- The band itself stays a light neutral tint with just a thin colored
			-- border -- the member cards underneath are already fully colored in
			-- their own type, so filling the band behind them with a second solid
			-- region color doubled up the saturation instead of adding information.
			-- The region color still reads clearly via the title pill and border.
	local buf = {}		local buf = {}
	buf[#buf + 1] = '<div style="display: inline-block; vertical-align: top; box-sizing: border-box; width: ' ..		buf[#buf + 1] = '<div style="display: inline-block; vertical-align: top; box-sizing: border-box; width: ' ..
	groupWidth .. 'px; max-width: 100%; background-color: #~~' .. rc.base .. '~~; border: ~~3px~~ solid #' .. rc.dark ..		groupWidth .. 'px; max-width: 100%; background-color: #F7F7F7; border: 2px solid #' .. rc.dark ..
	'; border-radius: ~~25px~~; padding: 6px; margin: 4px; text-align: center;">'		'; border-radius: 22px; padding: 6px; margin: 4px; text-align: center;">'

	buf[#buf + 1] = '<div style="width: 100%; box-sizing: border-box; background-color: #' .. rc.light ..		buf[#buf + 1] = '<div style="width: 100%; box-sizing: border-box; background-color: #' .. rc.light ..
	'; border-radius: ~~20px~~; padding: 8px; color: #' .. rc.dark .. '; font-weight: bold;">' ..		'; border-radius: 18px; padding: 8px; color: #' .. rc.dark .. '; font-weight: bold;">' ..
	'<span style="font-size: 18px;">' .. name .. '</span><br><span style="font-size: 12px;">' ..		'<span style="font-size: 18px;">' .. name .. '</span><br><span style="font-size: 12px;">' ..
	'[[:Category:Generation ' .. genRoman .. ' Pokémon\|<span style="color: #' .. rc.dark ..		'[[:Category:Generation ' .. genRoman .. ' Pokémon\|<span style="color: #' .. rc.dark ..
Line 233:		Line 246:

	buf[#buf + 1] = '<div style="width: 100%; box-sizing: border-box; background-color: #' .. rc.light ..		buf[#buf + 1] = '<div style="width: 100%; box-sizing: border-box; background-color: #' .. rc.light ..
	'; border-radius: ~~20px~~; padding: 6px; margin-top: 6px; color: #' .. rc.dark ..		'; border-radius: 18px; padding: 6px; margin-top: 6px; color: #' .. rc.dark ..
	'; font-weight: bold; text-align: left;"><div style="text-align: center;">Availability</div>' ..		'; font-weight: bold; text-align: left;"><div style="text-align: center;">Availability</div>' ..
	requirementsBox(rc.dark, requirements) .. '</div>'		requirementsBox(rc.dark, requirements) .. '</div>'

Cae at 17:42, 4 August 2026

2026-08-04T17:42:27Z

← Older revision		Revision as of 17:42, 4 August 2026
Line 106:		Line 106:
	local row = pokemonByName()[name]		local row = pokemonByName()[name]
	if not row then		if not row then
	return '<div style="display: inline-block; vertical-align: top; width: 240px~~; margin: 4px~~; ' ..		return '<div style="display: inline-block; vertical-align: top; box-sizing: border-box; width: 240px; ' ..
	'color: red;">Data load error: No Pokémon data found for ' .. name .. '</div>', nil		'margin: 4px; color: red;">Data load error: No Pokémon data found for ' .. name .. '</div>', nil
	end		end

Line 122:		Line 122:

	local buf = {}		local buf = {}
	buf[#buf + 1] = '<div style="display: inline-block; vertical-align: top; width: 240px; margin: 4px; ~~' ..~~		buf[#buf + 1] = '<div style="display: inline-block; vertical-align: top; box-sizing: border-box; ' ..
	'background-color: #' .. c.base .. '; border: 3px solid #' .. c.dark ..		'width: 240px; margin: 4px; background-color: #' .. c.base .. '; border: 3px solid #' .. c.dark ..
	'; border-radius: 20px; padding: 6px; text-align: center; color: #' .. c.dark .. '; font-weight: bold;">'		'; border-radius: 20px; padding: 6px; text-align: center; color: #' .. c.dark .. '; font-weight: bold;">'

Line 150:		Line 150:
	end		end

			-- width: 100% + border-box is the actual fix here: without a constrained
			-- width, a long Requirements sentence has no wrap point to size against, so
			-- the inline-block ancestor's shrink-to-fit layout stretches the *whole
			-- card* to fit that one line instead of wrapping text inside a fixed box.
	local function requirementsBox(dark, requirements)		local function requirementsBox(dark, requirements)
	return '<div style="background-color: #FFFFFF; color: #000000; border-radius: 15px; font-weight: normal; ~~' ..~~		return '<div style="width: 100%; box-sizing: border-box; background-color: #FFFFFF; color: #000000; ' ..
	'text-align: left; border: 1px solid #' .. dark .. '; padding: 8px; margin-top: 4px;">' ..		'border-radius: 15px; font-weight: normal; text-align: left; border: 1px solid #' .. dark ..
			'; padding: 8px; margin-top: 4px; overflow-wrap: break-word;">' ..
	(requirements or '') .. '</div>'		(requirements or '') .. '</div>'
	end		end
Line 187:		Line 192:
	end		end
	local c = typeColor(frame, row.type1)		local c = typeColor(frame, row.type1)
	return '<div style="display: inline-block; vertical-align: top; background-color: #' .. c.base ..		-- Explicit width (matching the 240px member card plus this wrapper's
	'; border: 1px solid #' .. c.dark .. '; border-radius: 22px; padding: 4px; margin: 4px;">' ..		-- own padding/border) instead of shrink-to-fit, so the card's size
			-- is driven by its fixed layout, not by how long Requirements is.
			return '<div style="display: inline-block; vertical-align: top; box-sizing: border-box; width: 250px; ' ..
			'background-color: #' .. c.base .. '; border: 1px solid #' .. c.dark ..
			'; border-radius: 22px; padding: 4px; margin: 4px;">' ..
	cardHtml .. requirementsBox(c.dark, requirements) .. '</div>'		cardHtml .. requirementsBox(c.dark, requirements) .. '</div>'
	end		end
Line 202:		Line 211:
	cardsHtml[#cardsHtml + 1] = cardHtml		cardsHtml[#cardsHtml + 1] = cardHtml
	end		end

			-- Explicit width sized to the member-card row (240px card + 8px margin
			-- each, plus this wrapper's own padding/border) instead of shrink-to-fit
			-- -- same reasoning as the single-card case, otherwise a long
			-- Requirements sentence inflates the whole band far past its cards.
			local groupWidth = (#members * 248) + 20

	local buf = {}		local buf = {}
	buf[#buf + 1] = '<div style="display: inline-block; vertical-align: top; background-color: #' .. rc.base ..		buf[#buf + 1] = '<div style="display: inline-block; vertical-align: top; box-sizing: border-box; width: ' ..
	'; border: 3px solid #' .. rc.dark .. '; border-radius: 25px; padding: 6px; margin: 4px; ~~' ..~~		groupWidth .. 'px; max-width: 100%; background-color: #' .. rc.base .. '; border: 3px solid #' .. rc.dark ..
	'text-align: center~~; max-width: 100%~~;">'		'; border-radius: 25px; padding: 6px; margin: 4px; text-align: center;">'

	buf[#buf + 1] = '<div style="background-color: #' .. rc.light .. '; border-radius: 20px; padding: 8px; ~~' ..~~		buf[#buf + 1] = '<div style="width: 100%; box-sizing: border-box; background-color: #' .. rc.light ..
	'color: #' .. rc.dark .. '; font-weight: bold;"><span style="font-size: 18px;">' .. name ..		'; border-radius: 20px; padding: 8px; color: #' .. rc.dark .. '; font-weight: bold;">' ..
	'</span><br><span style="font-size: 12px;">[[:Category:Generation ' .. genRoman ..		'<span style="font-size: 18px;">' .. name .. '</span><br><span style="font-size: 12px;">' ..
	' Pokémon\|<span style="color: #' .. rc.dark .. ';">Generation ' .. genRoman .. '</span>]]</span></div>'		'[[:Category:Generation ' .. genRoman .. ' Pokémon\|<span style="color: #' .. rc.dark ..
			';">Generation ' .. genRoman .. '</span>]]</span></div>'

	buf[#buf + 1] = '<div style="display: flex; flex-wrap: wrap; justify-content: center; margin-top: 6px;">' ..		buf[#buf + 1] = '<div style="display: flex; flex-wrap: wrap; justify-content: center; margin-top: 6px;">' ..
	table.concat(cardsHtml) .. '</div>'		table.concat(cardsHtml) .. '</div>'

	buf[#buf + 1] = '<div style="background-color: #' .. rc.light .. '; border-radius: 20px; padding: 6px; ~~' ..~~		buf[#buf + 1] = '<div style="width: 100%; box-sizing: border-box; background-color: #' .. rc.light ..
	'margin-top: 6px; color: #' .. rc.dark .. '; font-weight: bold; text-align: left;">~~' ..~~		'; border-radius: 20px; padding: 6px; margin-top: 6px; color: #' .. rc.dark ..
	'<div style="text-align: center;">Availability</div>' .. requirementsBox(rc.dark, requirements) .. '</div>'		'; font-weight: bold; text-align: left;"><div style="text-align: center;">Availability</div>' ..
			requirementsBox(rc.dark, requirements) .. '</div>'

	buf[#buf + 1] = '</div>'		buf[#buf + 1] = '</div>'

Cae: created module

2026-08-04T17:33:16Z

created module

New page

local p = {}

local DATA_FORMAT = 'CSV with header'
local STAT_MAX = 255
local ROMAN = { 'I', 'II', 'III', 'IV', 'V', 'VI', 'VII', 'VIII', 'IX' }

local function nonEmpty(s)
if s == nil then return nil end
s = mw.text.trim(tostring(s))
if s == '' then return nil end
return s
end

local pokemonRowsCache = nil
local function pokemonByName()
if pokemonRowsCache then return pokemonRowsCache end
local csvData = mw.ext.externalData.getExternalData{
url = 'https://wiki.pokemonrevolution.net/index.php?title=Special:GetData/PokemonRawList',
format = DATA_FORMAT,
data = {
number = 'Pokedex Number', name = 'Name', type1 = 'Type1', type2 = 'Type2', generation = 'Generation',
hp = 'HP', atk = 'Attack', def = 'Defense', spatk = 'Special Attack', spdef = 'Special Defense',
spd = 'Speed',
},
}
pokemonRowsCache = {}
if csvData then
for _, row in ipairs(csvData) do
if nonEmpty(row.name) then
pokemonRowsCache[row.name] = row
end
end
end
return pokemonRowsCache
end

local typeColorCache = {}
local function typeColor(frame, pokeType)
pokeType = nonEmpty(pokeType) or 'Normal'
if not typeColorCache[pokeType] then
typeColorCache[pokeType] = {
light = frame:expandTemplate{ title = pokeType .. ' color light' },
base = frame:expandTemplate{ title = pokeType .. ' color' },
dark = frame:expandTemplate{ title = pokeType .. ' color dark' },
}
end
return typeColorCache[pokeType]
end

local regionNameCache = {}
local function regionForGen(frame, genRoman)
if not regionNameCache[genRoman] then
regionNameCache[genRoman] = frame:expandTemplate{ title = 'LegendaryRegionFromGen', args = { genRoman } }
end
return regionNameCache[genRoman]
end

local regionColorCache = {}
local function regionColor(frame, regionName)
if not regionColorCache[regionName] then
regionColorCache[regionName] = {
light = frame:expandTemplate{ title = regionName .. ' color light' },
base = frame:expandTemplate{ title = regionName .. ' color' },
dark = frame:expandTemplate{ title = regionName .. ' color dark' },
}
end
return regionColorCache[regionName]
end

local function genToRoman(genValue)
local digits = mw.ustring.match(tostring(genValue or ''), '^%d+')
local n = digits and tonumber(digits)
return (n and ROMAN[n]) or tostring(genValue or '')
end

local function statBar(frame, label, value, dark)
value = tonumber(value) or 0
local pct = math.max(0, math.min(100, (value / STAT_MAX) * 100))
local hue = math.floor((math.max(0, math.min(STAT_MAX, value)) / STAT_MAX) * 130) -- red (low) -> teal (high)
return '<tr><td style="width: 40%; text-align: left; padding: 2px 4px; font-size: 11px; color: #' .. dark ..
';">' .. label .. '</td><td style="padding: 2px 4px;">' ..
'<div style="background: #FFFFFF; border: 1px solid #' .. dark .. '; border-radius: 8px; overflow: hidden;">' ..
'<div style="width: ' .. pct .. '%; background: hsl(' .. hue ..
', 65%, 45%); color: #FFFFFF; font-size: 10px; font-weight: normal; padding: 1px 4px; ' ..
'white-space: nowrap;">' .. value .. '</div></div></td></tr>'
end

local function typeBadges(frame, row)
local t1 = nonEmpty(row.type1)
local t2 = nonEmpty(row.type2)
local c1 = typeColor(frame, t1)
if not t2 then
return '<table align="center" style="width: 80%; font-weight: bold; font-size: 12px;"><tr>' ..
'<td style="background-color: #' .. c1.dark .. '; border-radius: 15px; padding: 2px;">[[' .. t1 ..
'_(type)|<span style="color: #FFFFFF;">' .. t1 .. '</span>]]</td></tr></table>'
end
local c2 = typeColor(frame, t2)
return '<table align="center" style="width: 80%; font-weight: bold; font-size: 12px;"><tr>' ..
'<td style="background-color: #' .. c1.dark .. '; border-radius: 15px 1px 1px 15px; padding: 2px;">[[' ..
t1 .. '_(type)|<span style="color: #FFFFFF;">' .. t1 .. '</span>]]</td>' ..
'<td style="background-color: #' .. c2.dark .. '; border-radius: 1px 15px 15px 1px; padding: 2px;">[[' ..
t2 .. '_(type)|<span style="color: #FFFFFF;">' .. t2 .. '</span>]]</td></tr></table>'
end

local function memberCard(frame, name, showGeneration)
local row = pokemonByName()[name]
if not row then
return '<div style="display: inline-block; vertical-align: top; width: 240px; margin: 4px; ' ..
'color: red;">Data load error: No Pokémon data found for ' .. name .. '</div>', nil
end

local c = typeColor(frame, row.type1)
local bst = (tonumber(row.hp) or 0) + (tonumber(row.atk) or 0) + (tonumber(row.def) or 0) +
(tonumber(row.spatk) or 0) + (tonumber(row.spdef) or 0) + (tonumber(row.spd) or 0)

local genLine = ''
if showGeneration then
local genRoman = genToRoman(row.generation)
genLine = '<br><span style="font-size: 11px;">[[:Category:Generation ' .. genRoman ..
' Pokémon|<span style="color: #' .. c.dark .. ';">Generation ' .. genRoman .. '</span>]]</span>'
end

local buf = {}
buf[#buf + 1] = '<div style="display: inline-block; vertical-align: top; width: 240px; margin: 4px; ' ..
'background-color: #' .. c.base .. '; border: 3px solid #' .. c.dark ..
'; border-radius: 20px; padding: 6px; text-align: center; color: #' .. c.dark .. '; font-weight: bold;">'

buf[#buf + 1] = '<div style="background-color: #' .. c.light .. '; border-radius: 15px; padding: 5px; ' ..
'margin-bottom: 6px;">#' .. (row.number or '') .. ' <span style="font-size: 16px;">[[' .. name ..
'|<span style="color: #' .. c.dark .. ';">' .. name .. '</span>]]</span>' .. genLine .. '</div>'

buf[#buf + 1] = '<div style="background-color: #FFFFFF; border-radius: 15px; height: 150px; display: flex; ' ..
'align-items: center; justify-content: center; margin-bottom: 6px;">[[File:' .. (row.number or '') ..
name .. '.png|150px]]</div>'

buf[#buf + 1] = typeBadges(frame, row)

buf[#buf + 1] = '<table style="width: 100%; margin-top: 6px;">' ..
statBar(frame, 'HP', row.hp, c.dark) ..
statBar(frame, 'Attack', row.atk, c.dark) ..
statBar(frame, 'Defense', row.def, c.dark) ..
statBar(frame, 'Sp. Atk', row.spatk, c.dark) ..
statBar(frame, 'Sp. Def', row.spdef, c.dark) ..
statBar(frame, 'Speed', row.spd, c.dark) ..
'<tr><td style="text-align: left; padding: 3px 4px; font-size: 11px;">Total</td>' ..
'<td style="padding: 3px 4px; font-size: 11px;">' .. bst .. '</td></tr></table>'

buf[#buf + 1] = '</div>'
return table.concat(buf), row
end

local function requirementsBox(dark, requirements)
return '<div style="background-color: #FFFFFF; color: #000000; border-radius: 15px; font-weight: normal; ' ..
'text-align: left; border: 1px solid #' .. dark .. '; padding: 8px; margin-top: 4px;">' ..
(requirements or '') .. '</div>'
end

function p.card(frame)
local parent = frame:getParent()
local args = (parent and parent.args) or frame.args

local name = nonEmpty(args.Name)
if not name then
return "<span style='color:red'>Usage: {{LegendaryPokemon|Name=...|Requirements=...|" ..
"Pokemon=Name1\\Name2 (omit Pokemon= for a single-species entry)}}</span>"
end

local pokemonArg = nonEmpty(args.Pokemon)
local members = {}
if pokemonArg then
for _, part in ipairs(mw.text.split(pokemonArg, '\\', true)) do
local trimmed = mw.text.trim(part)
if trimmed ~= '' then
members[#members + 1] = trimmed
end
end
else
members = { name }
end

local requirements = args.Requirements or ''

if #members == 1 then
local cardHtml, row = memberCard(frame, members[1], true)
if not row then
return cardHtml
end
local c = typeColor(frame, row.type1)
return '<div style="display: inline-block; vertical-align: top; background-color: #' .. c.base ..
'; border: 1px solid #' .. c.dark .. '; border-radius: 22px; padding: 4px; margin: 4px;">' ..
cardHtml .. requirementsBox(c.dark, requirements) .. '</div>'
end

local firstRow = pokemonByName()[members[1]]
local genRoman = nonEmpty(args.Gen) or (firstRow and genToRoman(firstRow.generation)) or '?'
local regionName = regionForGen(frame, genRoman)
local rc = regionColor(frame, regionName)

local cardsHtml = {}
for _, member in ipairs(members) do
local cardHtml = memberCard(frame, member, false)
cardsHtml[#cardsHtml + 1] = cardHtml
end

local buf = {}
buf[#buf + 1] = '<div style="display: inline-block; vertical-align: top; background-color: #' .. rc.base ..
'; border: 3px solid #' .. rc.dark .. '; border-radius: 25px; padding: 6px; margin: 4px; ' ..
'text-align: center; max-width: 100%;">'

buf[#buf + 1] = '<div style="background-color: #' .. rc.light .. '; border-radius: 20px; padding: 8px; ' ..
'color: #' .. rc.dark .. '; font-weight: bold;"><span style="font-size: 18px;">' .. name ..
'</span><br><span style="font-size: 12px;">[[:Category:Generation ' .. genRoman ..
' Pokémon|<span style="color: #' .. rc.dark .. ';">Generation ' .. genRoman .. '</span>]]</span></div>'

buf[#buf + 1] = '<div style="display: flex; flex-wrap: wrap; justify-content: center; margin-top: 6px;">' ..
table.concat(cardsHtml) .. '</div>'

buf[#buf + 1] = '<div style="background-color: #' .. rc.light .. '; border-radius: 20px; padding: 6px; ' ..
'margin-top: 6px; color: #' .. rc.dark .. '; font-weight: bold; text-align: left;">' ..
'<div style="text-align: center;">Availability</div>' .. requirementsBox(rc.dark, requirements) .. '</div>'

buf[#buf + 1] = '</div>'
return table.concat(buf)
end

return p