Module:Infobox

Overview

Functions for making Iconbox table. Data comes from various data jsons: Data:Weapon.json, Data:Armor.json, Data:Accessory.json, Data:Utility.json, Data:Misc.json, Data:Monster.json, Data:Prop.json.

Functions

draw

Creates an iconbox that floats to the right.

Parameters

• name - <Name>
• is_active - {1,2,3,4,5,6,7,8,Common,Elite,Nightmare}
• category - {Weapon,Armor,Accessory,Utility,Misc,Monster,Prop}

draw examples

Halberd,7,Weapon

---

{{#invoke:Infobox|draw|name=Halberd|category=Weapon}}

 I 

 II 

 III 

 IV 

 V 

 VI 

 VII 

Halberd

Halberd

Halberd

Halberd

Halberd

Halberd

Halberd

Cinder,8,Weapon

---

{{#invoke:Infobox|draw|name=Cinder|is_active=8|category=Weapon}}

 I 

Cinder

Ranger Hood,5,Armor

---

{{#invoke:Infobox|draw|name=Ranger Hood|is_active=5|category=Armor}}

Code

---

local p = {}
p.__index = p
local WD = mw.loadJsonData("Data:Weapon.json")
local concat = table.concat

function p:new(o)
	o = o or {}
	setmetatable(o, self)
	return o
end

function p:hline()
	return "<div class='line' style='background-image:linear-gradient(to right,rgb(10,10,10),rgb(100,100,100),rgb(10,10,10))'></div>"
end

function p:row_h(title, content)
	if not content then return "" end
	return string.format("<div style='display:flex;flex-direction:row;justify-content:center;white-space:pre-wrap;color:rgb(160,160,140)'><div style='text-align:right; color:rgb(70,70,70)'>%s: </div><div>%s</div></div>", title, content)
end

function p:row_v(title, content)
	if not content then return "" end
	return string.format("<div style='display:flex;flex-direction:column;align-items:center;color:rgb(160,160,140);margin-bottom:5px'><div style='color:rgb(70,70,70)'>%s: </div><div>%s</div></div>", title, content)
end


function p:row_v2(content)
	if not content then return "" end
	return string.format("<div style='display:flex;margin-top:10px;flex-direction:column;align-items:center;text-align:center;margin-bottom:15px'>%s</div>",content)
end


function p:row_v3(content)
	if not content then return "" end
	return string.format("<div style='display:flex;flex-direction:column;align-items:center;text-align:center;color:rgb(115,83,67)'>%s</div>",content)
end

local function header(args)
	local header_content = ""
	if args.link == "nolink" then
		header_content = string.format("<span class='bold cr%s'>%s</span>", args.rarity, args.name)
	elseif args.link then
		header_content = string.format("[[%s|<span class='cr%s'>%s</span>]]", args.link, args.rarity, args.name)
	else
		header_content = string.format("[[%s|<span class='cr%s'>%s</span>]]", args.name, args.rarity, args.name)
	end

	return string.format(
		"<div class='itemboxheader' style='width:280px;padding:20px;box-shadow:inset 0px 0px 20px 5px rgb(0 0 0 / 0.5);display:flex;flex-direction:column;align-items:center;background-color:rgb(var(--rarity-%s),0.1);border:2px solid rgb(var(--rarity-%s),0.5)'><div class='bold' style='margin-top:0px!important;font-size:22px'>%s</div></div>",
		args.rarity, args.rarity, header_content
	)
end

local function image(args)
	if not args.name then return end
	return "<div style='display:flex;flex-direction:column;align-items:center'><div class='iconbox' style='width:max-content;align-items:center'><div class='rarity-1 rounded relative'>[[File:"..args.name..".png|90px|link=]]</div></div></div>"
end

function p:getRows(args)
	-- Override to define category-specific rows
	return {}
end

local function infobox(args)
	local wt = {}

	wt[#wt+1] = "<div style='background-color:rgb(var(--background-color),0.3);max-width:470px;float:right'>" --Infobox container
	wt[#wt+1] = header(args)
	wt[#wt+1] = "<div style='width:280px;border:2px solid rgb(70,70,70,0.5);padding:20px'>" -- Content container
	wt[#wt+1] = image(args)

	-- Category-specific rows
	local rows = p:getRows(args)
	for _, row in ipairs(rows) do
		wt[#wt+1] = row
	end

	wt[#wt+1] = "</div></div>"

	return concat(wt)
end

local function panel(rarity, args)
	if not WD.Weapon[args.name].rarities[tonumber(rarity)] then return "" end

	args.rarity = rarity

	local hidden_panel = "cardtabs__panel--js-hidden"
	if args.is_active==rarity then hidden_panel = "" end

	return string.format("<div data-cardtabs-panel='%s' style='overflow:auto' class='cardtabs__panel %s'>%s</div>", rarity, hidden_panel, infobox(args))
end

local function tab_panels(args, wt)
	wt[#wt+1] = "<div class='mytabs__panels' data-cardtabs-panels>"
	wt[#wt+1] = panel("1", args)
	wt[#wt+1] = panel("2", args)
	wt[#wt+1] = panel("3", args)
	wt[#wt+1] = panel("4", args)
	wt[#wt+1] = panel("5", args)
	wt[#wt+1] = panel("6", args)
	wt[#wt+1] = panel("7", args)
	wt[#wt+1] = panel("8", args)
	wt[#wt+1] = "</div>"
end

local ROMAN_NUMERAL = {"I","II","III","IV","V","VI","VII","VIII"}

local function button(rarity, args)
	if not WD.Weapon[args.name].rarities[tonumber(rarity)] then return "" end

	local is_active_button = ""
	if args.is_active==rarity then is_active_button = " cardtabs__button--active" end

	return string.format("<div data-cardtabs-btn='%s' class='cardtabs__button rarity%s%s'>&nbsp;%s&nbsp;</div>", rarity, rarity, is_active_button, ROMAN_NUMERAL[tonumber(rarity)])
end

local function tab_buttons(args, wt)
	wt[#wt+1] = "<div class='cardtabs__buttons' data-cardtabs-btns>"
	wt[#wt+1] = button("1", args)
	wt[#wt+1] = button("2", args)
	wt[#wt+1] = button("3", args)
	wt[#wt+1] = button("4", args)
	wt[#wt+1] = button("5", args)
	wt[#wt+1] = button("6", args)
	wt[#wt+1] = button("7", args)
	wt[#wt+1] = button("8", args)
	wt[#wt+1] = "</div>"
end

function p.draw(frame)
	local wt = {}
	wt[#wt+1] = "<div class='cardtabs' data-cardtabs>"
	tab_buttons(frame.args, wt)
	tab_panels(frame.args, wt)
	wt[#wt+1] = "</div>"

	return concat(wt)
end

return p

--[=[
mw.log(p.draw({args={name="Halberd",link="nolink"}}))
mw.log(p.draw({args={name="Halberd"}}))
]=]