모듈:Radar

이 모듈에 대한 설명문서는 모듈:Radar/설명문서에서 만들 수 있습니다

-- 모듈:Radar — 5각형 레이더(공격/방어/지원/이동/제어). CSS clip-path, 다크 시인성 개선판.
local p = {}
local AXES = { '공격', '방어', '지원', '이동', '제어' }

local function vert(cx, cy, r, k)
	local a = math.rad(-90 + 72 * k)
	return cx + r * math.cos(a), cy + r * math.sin(a)
end

local function poly(cx, cy, R, scale)
	local t = {}
	for k = 0, 4 do
		local x, y = vert(cx, cy, R * scale, k)
		t[#t + 1] = string.format('%.1fpx %.1fpx', x, y)
	end
	return table.concat(t, ', ')
end

-- 외곽선 링 = border-color 채움 + 카드색 knockout (얇은 테두리만 남김)
local function ring(cx, cy, R, scale)
	local ks = scale - 2.2 / R
	return string.format(
		'<div style="position:absolute; inset:0; clip-path:polygon(%s); background:var(--border-color-base,#c8ccd1);"></div>' ..
		'<div style="position:absolute; inset:0; clip-path:polygon(%s); background:var(--color-surface-1,#fbfcfd);"></div>',
		poly(cx, cy, R, scale), poly(cx, cy, R, ks))
end

function p.render(frame)
	local args = frame.args
	local maxv = tonumber(args['max']) or 5
	local cx, cy, R = 110, 92, 58
	local vals = {}
	for k = 1, 5 do vals[k] = tonumber(args[AXES[k]]) or 0 end

	-- 값 폴리곤
	local vt = {}
	for k = 0, 4 do
		local x, y = vert(cx, cy, R * (vals[k + 1] / maxv), k)
		vt[#vt + 1] = string.format('%.1fpx %.1fpx', x, y)
	end

	-- 꼭짓점 점 + 라벨
	local dots, labels = {}, {}
	for k = 0, 4 do
		local v = vals[k + 1]
		if v > 0 then
			local dx, dy = vert(cx, cy, R * (v / maxv), k)
			dots[#dots + 1] = string.format(
				'<div style="position:absolute; left:%.1fpx; top:%.1fpx; width:7px; height:7px; margin:-3.5px; border-radius:50%%; background:var(--color-progressive,#3a7bd5);"></div>', dx, dy)
		end
		local lx, ly = vert(cx, cy, R + 18, k)
		local tx = '-50%'
		if lx > cx + 5 then tx = '0' elseif lx < cx - 5 then tx = '-100%' end
		labels[#labels + 1] = string.format(
			'<span style="position:absolute; left:%.1fpx; top:%.1fpx; transform:translate(%s,-50%%); white-space:nowrap; font-size:12px; font-weight:600; color:var(--color-base,#202122);">%s <span style="color:var(--color-progressive,#3a7bd5)">%d</span></span>',
			lx, ly, tx, AXES[k + 1], v)
	end

	return string.format(
		'<div style="position:relative; display:flow-root; width:220px; height:184px; margin:10px auto; background:var(--color-surface-1,#fbfcfd); border:1px solid var(--border-color-base,#c8ccd1); border-radius:8px;">' ..
		'%s%s' ..  -- 외곽 링 + 내부 링(0.6)
		'<div style="position:absolute; inset:0; clip-path:polygon(%s); background:var(--color-progressive,#3a7bd5); opacity:0.5;"></div>' ..
		'%s%s</div>',
		ring(cx, cy, R, 1), ring(cx, cy, R, 0.6),
		table.concat(vt, ', '),
		table.concat(dots, ''), table.concat(labels, ''))
end

return p