모듈:Radar
Project ZETA Wiki
더 많은 작업
이 모듈에 대한 설명문서는 모듈: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 ptsAt(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
function p.render(frame)
local args = frame.args
local maxv = tonumber(args['max']) or 5
local cx, cy, R = 110, 95, 68
local vals = {}
for k = 1, 5 do
vals[k] = tonumber(args[AXES[k]]) or 0
end
-- 값 폴리곤 좌표
local vt = {}
for k = 0, 4 do
local r = R * (vals[k + 1] / maxv)
local x, y = vert(cx, cy, r, k)
vt[#vt + 1] = string.format('%.1fpx %.1fpx', x, y)
end
local valpts = table.concat(vt, ', ')
-- 라벨
local labels = {}
for k = 0, 4 do
local lx, ly = vert(cx, cy, R + 17, 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; color:var(--color-subtle,#7a8085);">%s <b style="color:var(--color-progressive,#3a7bd5)">%d</b></span>',
lx, ly, tx, AXES[k + 1], vals[k + 1])
end
return string.format(
'<div style="position:relative; width:220px; height:190px; margin:10px auto;">' ..
'<div style="position:absolute; inset:0; clip-path:polygon(%s); background:var(--color-surface-2,#eef2f6);"></div>' ..
'<div style="position:absolute; inset:0; clip-path:polygon(%s); background:var(--color-surface-3,#dfe3e8);"></div>' ..
'<div style="position:absolute; inset:0; clip-path:polygon(%s); background:var(--color-progressive,#3a7bd5); opacity:0.45;"></div>' ..
'%s</div>',
ptsAt(cx, cy, R, 1), ptsAt(cx, cy, R, 0.6), valpts, table.concat(labels, ''))
end
return p