모듈:푸른 저편의 포리듬/ 캐릭터 프로필 문서 원본 보기

local p = {}

local function safe(v)
	return v and mw.text.trim(v) or ""
end

local function row(label, value)
	value = safe(value)
	if value ~= "" then
		return string.format('<tr><th style="width:30%%">%s</th><td>%s</td></tr>', label, value)
	end
	return ""
end

local function signatureTech(args)
	local text = ""
	for i = 1, 5 do
		local skill = safe(args["시그니처기술" .. i])
		if skill ~= "" then
			text = text .. "· " .. skill .. "<br>"
		end
	end
	return text ~= "" and text or ""
end

function p.main(frame)
	local args = frame:getParent().args
	local color = safe(args["색상"]) ~= "" and args["색상"] or "#E6E9F5"

	-- 이미지 영역 (탭 방식)
	local imageTabs = '<div class="profile-image-tabs">'
		.. '<div class="tab-buttons">'
		.. '<button class="tab-btn active">애니</button>'
		.. '<button class="tab-btn">VN</button>'
		.. '</div><div class="tab-content active">'

	if safe(args["이미지_애니"]) ~= "" then
		imageTabs = imageTabs .. string.format('[[파일:%s|250px]]', args["이미지_애니"])
	else
		imageTabs = imageTabs .. "이미지 없음"
	end

	imageTabs = imageTabs .. '</div><div class="tab-content">'

	if safe(args["이미지_VN"]) ~= "" then
		imageTabs = imageTabs .. string.format('[[파일:%s|250px]]', args["이미지_VN"])
	else
		imageTabs = imageTabs .. "이미지 없음"
	end

	imageTabs = imageTabs .. '</div></div>'

	-- 정보 테이블
	local info = '<table class="wikitable" style="width:100%; background:' .. color .. '; font-size:14px;">'
		.. '<tr><th colspan="2" style="text-align:center; font-size:20px;">'
		.. safe(args["이름"]) .. '<br><span style="font-size:13px; opacity:0.6;">'
		.. safe(args["이름_일어"]) .. ' / ' .. safe(args["이름_영어"]) .. '</span></th></tr>'

	info = info
		.. '<tr><th colspan="2" style="text-align:center; background:#ccc;">기본 정보</th></tr>'
		.. row("성별", args["성별"])
		.. row("나이", (safe(args["나이_VN"]) ~= "" or safe(args["나이_애니"]) ~= "") and ("VN: " .. safe(args["나이_VN"]) .. " / Anime: " .. safe(args["나이_애니"])) or "")
		.. row("생일", args["생일"])
		.. row("신장", args["신장"])
		.. row("체중", args["체중"])
		.. row("머리색", args["머리색"])
		.. row("눈색", args["눈색"])

	info = info
		.. '<tr><th colspan="2" style="text-align:center; background:#ccc;">FC 프로필</th></tr>'
		.. row("포지션", args["포지션"])
		.. row("소속 팀", args["소속_팀"])
		.. row("시그니처 기술", signatureTech(args))

	info = info
		.. '<tr><th colspan="2" style="text-align:center; background:#ccc;">개인 정보</th></tr>'
		.. row("학교", args["학교"])
		.. row("거주지", args["거주지"])
		.. row("취미", args["취미"])
		.. row("좋아하는 음식", args["좋아하는음식"])

	info = info
		.. '<tr><th colspan="2" style="text-align:center; background:#ccc;">성우</th></tr>'
		.. row("일본어", args["성우_JP"])
		.. row("영어", args["성우_EN"])

	info = info
		.. '<tr><th colspan="2" style="text-align:center; background:#ccc;">데뷔</th></tr>'
		.. row("애니", args["애니_데뷔"])
		.. row("게임(VN)", args["게임_데뷔"])
		.. row("만화", args["만화_데뷔"])
		.. "</table>"

	-- 구조: 데스크톱= 좌이미지+우정보 / 모바일= 이미지 위 → 정보 아래
	local container = '<div class="profile-container">' .. imageTabs .. info .. "</div>"
	
	-- CSS 삽입
	container = container .. [[
<style>
.profile-container{
	display:flex;
	gap:10px;
	align-items:flex-start;
}
@media(max-width:720px){
	.profile-container{flex-direction:column; text-align:center;}
}
.profile-image-tabs{width:250px;}
.tab-buttons{display:flex; gap:5px; margin-bottom:5px;}
.tab-btn{flex:1; padding:5px; cursor:pointer; background:#ddd; border:none;}
.tab-btn.active{background:#999; font-weight:bold;}
.tab-content{display:none;}
.tab-content.active{display:block;}
</style>
<script>
document.addEventListener("DOMContentLoaded", function(){
	const buttons = document.querySelectorAll(".tab-btn");
	const tabs = document.querySelectorAll(".tab-content");
	buttons.forEach((btn,i)=>{
		btn.onclick=function(){
			buttons.forEach(b=>b.classList.remove("active"));
			tabs.forEach(t=>t.classList.remove("active"));
			btn.classList.add("active");
			tabs[i].classList.add("active");
		}
	})
});
</script>
]]

	return container
end

return p