모듈:Radar - 편집 역사

2026년 6월 5일 (금) 03:35에 Pjzeta님의 편집

2026-06-05T03:35:17Z

← 이전 판		2026년 6월 5일 (금) 12:35 판
49번째 줄:		49번째 줄:
	for k = 1, 5 do vals[k] = tonumber(args[AXES[k]]) or 0 end		for k = 1, 5 do vals[k] = tonumber(args[AXES[k]]) or 0 end

	-- 눈금 링: 외곽(1.0) 굵게 + 각 단계 얇게		-- 눈금 링: 외곽(1.0) 굵게 + 각 단계 얇게 (큰 것부터 — knockout이 안쪽 링을 지우지 않도록)
	local grid = { ring(cx, cy, R, 1, 2.2 * s) }		local grid = { ring(cx, cy, R, 1, 2.2 * s) }
	for k = 1, ~~maxv~~ - 1 do		for k = maxv - 1, 1, -1 do
	grid[#grid + 1] = ring(cx, cy, R, k / maxv, 1.1 * s)		grid[#grid + 1] = ring(cx, cy, R, k / maxv, 1.1 * s)
	end		end

2026년 6월 5일 (금) 03:32에 Pjzeta님의 편집

2026-06-05T03:32:04Z

← 이전 판		2026년 6월 5일 (금) 12:32 판
1번째 줄:		1번째 줄:
	-- 모듈:Radar — 5각형 레이더(공격/방어/지원/이동/제어). CSS clip-path, 다크 시인성 개선판.		-- 모듈:Radar — 5각형 레이더(공격/방어/지원/이동/제어). CSS clip-path, 다크 시인성 개선판.
			-- size 파라미터로 전체 크기 조절 (기본 220 = 박스 폭 px), 모든 요소 비례 스케일.
	local p = {}		local p = {}
	local AXES = { '공격', '방어', '지원', '이동', '제어' }		local AXES = { '공격', '방어', '지원', '이동', '제어' }
18번째 줄:		19번째 줄:

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

			-- 값 폴리곤 좌표 (각 꼭짓점 반경 개별, inset px만큼 중심 쪽으로 축소)
			local function valPoly(cx, cy, R, vals, maxv, inset)
			local t = {}
			for k = 0, 4 do
			local r = R * (vals[k + 1] / maxv) - inset
			if r < 0 then r = 0 end
		⚫	local x, y = vert(cx, cy, r, k)
		⚫	t[#t + 1] = string.format('%.1fpx %.1fpx', x, y)
			end
		⚫	return table.concat(t, ', ')
	end		end

29번째 줄:		43번째 줄:
	local args = frame.args		local args = frame.args
	local maxv = tonumber(args['max']) or 5		local maxv = tonumber(args['max']) or 5
	local ~~cx, cy, R~~ = ~~110,~~ ~~92,~~ 58		local size = tonumber(args['size']) or 220
			local s = size / 220
			local cx, cy, R = 110 * s, 92 * s, 58 * s
	local vals = {}		local vals = {}
	for k = 1, 5 do vals[k] = tonumber(args[AXES[k]]) or 0 end		for k = 1, 5 do vals[k] = tonumber(args[AXES[k]]) or 0 end

			-- 눈금 링: 외곽(1.0) 굵게 + 각 단계 얇게
	-- 값 폴리곤
	local vt = {}		local grid = { ring(cx, cy, R, 1, 2.2 * s) }
	for k = 0, 4 do		for k = 1, maxv - 1 do
	~~local~~ x, y = ~~vert~~(cx, cy, R * (vals[k ~~+ 1]~~ / maxv), k)		grid[#grid + 1] = ring(cx, cy, R, k / maxv, 1.1 * s)
⚫	vt[#vt + 1] = string.format('%.1fpx %.1fpx', x, y)
	end		end

			-- 값 폴리곤: 진한 테두리 + 반투명 내부
			local border = valPoly(cx, cy, R, vals, maxv, 0)
			local inner = valPoly(cx, cy, R, vals, maxv, 2.4 * s)
			local valueLayers = string.format(
		⚫	'<div style="position:absolute; inset:0; clip-path:polygon(%s); background:var(--color-progressive,#3a7bd5);"></div>' ..
			'<div style="position:absolute; inset:0; clip-path:polygon(%s); background:var(--color-surface-1,#fbfcfd);"></div>' ..
			'<div style="position:absolute; inset:0; clip-path:polygon(%s); background:var(--color-progressive,#3a7bd5); opacity:0.45;"></div>',
			border, inner, inner)

	-- 꼭짓점 점 + 라벨		-- 꼭짓점 점 + 라벨
			local dot = 8 * s
			local fontPx = 12 * s
	local dots, labels = {}, {}		local dots, labels = {}, {}
	for k = 0, 4 do		for k = 0, 4 do
47번째 줄:		73번째 줄:
	local dx, dy = vert(cx, cy, R * (v / maxv), k)		local dx, dy = vert(cx, cy, R * (v / maxv), k)
	dots[#dots + 1] = string.format(		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)~~		'<div style="position:absolute; left:%.1fpx; top:%.1fpx; width:%.1fpx; height:%.1fpx; margin:%.1fpx; border-radius:50%%; background:var(--color-progressive,#3a7bd5); border:%.1fpx solid var(--color-surface-1,#fbfcfd); box-sizing:content-box;"></div>',
			dx, dy, dot, dot, -(dot / 2 + 1.5 * s), 1.5 * s)
	end		end
	local lx, ly = vert(cx, cy, R + 18, k)		local lx, ly = vert(cx, cy, R + 19 * s, k)
	local tx = '-50%'		local tx = '-50%'
	if lx > cx + 5 then tx = '0' elseif lx < cx - 5 then tx = '-100%' end		if lx > cx + 5 then tx = '0' elseif lx < cx - 5 then tx = '-100%' end
	labels[#labels + 1] = string.format(		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>',		'<span style="position:absolute; left:%.1fpx; top:%.1fpx; transform:translate(%s,-50%%); white-space:nowrap; font-size:%.1fpx; 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)		lx, ly, tx, fontPx, AXES[k + 1], v)
	end		end

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

2026년 6월 2일 (화) 09:20에 Pjzeta님의 편집

2026-06-02T09:20:16Z

← 이전 판		2026년 6월 2일 (화) 18:20 판
58번째 줄:		58번째 줄:

	return string.format(		return string.format(
	'<div style="position:relative; width:220px; height:184px; margin:10px auto; background:var(--color-surface-1,#fbfcfd); border:1px solid var(--border-color-base,#c8ccd1); border-radius:8px;">' ..		'<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)		'%s%s' .. -- 외곽 링 + 내부 링(0.6)
	'<div style="position:absolute; inset:0; clip-path:polygon(%s); background:var(--color-progressive,#3a7bd5); opacity:0.5;"></div>' ..		'<div style="position:absolute; inset:0; clip-path:polygon(%s); background:var(--color-progressive,#3a7bd5); opacity:0.5;"></div>' ..

2026년 6월 2일 (화) 08:42에 Pjzeta님의 편집

2026-06-02T08:42:10Z

← 이전 판		2026년 6월 2일 (화) 17:42 판
1번째 줄:		1번째 줄:
	-- 모듈:Radar — 5각형 레이더(공격/방어/지원/이동/제어), CSS clip-path, ~~다크세이프~~		-- 모듈:Radar — 5각형 레이더(공격/방어/지원/이동/제어). CSS clip-path, 다크 시인성 개선판.
	local p = {}		local p = {}

	local AXES = { '공격', '방어', '지원', '이동', '제어' }		local AXES = { '공격', '방어', '지원', '이동', '제어' }

9번째 줄:		8번째 줄:
	end		end

	local function ~~ptsAt~~(cx, cy, R, scale)		local function poly(cx, cy, R, scale)
	local t = {}		local t = {}
	for k = 0, 4 do		for k = 0, 4 do
16번째 줄:		15번째 줄:
	end		end
	return table.concat(t, ', ')		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		end

21번째 줄:		29번째 줄:
	local args = frame.args		local args = frame.args
	local maxv = tonumber(args['max']) or 5		local maxv = tonumber(args['max']) or 5
	local cx, cy, R = 110, 95, 68		local cx, cy, R = 110, 92, 58

	local vals = {}		local vals = {}
	for k = 1, 5 do		for k = 1, 5 do vals[k] = tonumber(args[AXES[k]]) or 0 end
	vals[k] = tonumber(args[AXES[k]]) or 0
⚫	end

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

	-- 라벨		-- 꼭짓점 점 + 라벨
	local labels = {}		local dots, labels = {}, {}
	for k = 0, 4 do		for k = 0, 4 do
	local ~~lx, ly~~ = ~~vert(cx, cy, R~~ + ~~17, k)~~		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%'		local tx = '-50%'
	if lx > cx + 5 then tx = '0'		if lx > cx + 5 then tx = '0' elseif lx < cx - 5 then tx = '-100%' end
	elseif lx < cx - 5 then tx = '-100%' end
	labels[#labels + 1] = string.format(		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>',		'<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], ~~vals[k + 1]~~)		lx, ly, tx, AXES[k + 1], v)
	end		end

	return string.format(		return string.format(
	'<div style="position:relative; width:220px; height:~~190px~~; margin:10px auto;">' ..		'<div style="position:relative; 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~~-~~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.5;"></div>' ..
		⚫	'%s%s</div>',
⚫	'<div style="position:absolute; inset:0; clip-path:polygon(%s); background:var(--color-~~progressive~~,#~~3a7bd5~~)~~; opacity:0.45~~;"></div>' ..
			ring(cx, cy, R, 1), ring(cx, cy, R, 0.6),
⚫	'%s</div>',
	~~ptsAt(cx, cy, R, 1), ptsAt(cx, cy, R, 0.6), valpts,~~ table.concat(~~labels~~, ''))		table.concat(vt, ', '),
			table.concat(dots, ''), table.concat(labels, ''))
	end		end

2026년 6월 2일 (화) 08:34에 Pjzeta님의 편집

2026-06-02T08:34:49Z

새 문서

-- 모듈: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