Module:Card/Layout

From Artifact Wiki
Jump to: navigation, search

Documentation for Module:Card/Layout [edit] [edit doc]

This module defines the design for all cards to ensure consistency across the Wiki. It is currently seperated in two layouts: The first one is used for Spells, Improvements and Items; the second one for Heroes and Spells.

Preview


Tidehunter

This card is not in the database yet.
Description BG.png
[refresh card]

Rebel Decoy

This card is not in the database yet.
Description BG.png
[refresh card]

Mystic Flare

This card is not in the database yet.
Description BG.png
[refresh card]

Assault Ladders

This card is not in the database yet.
Description BG.png
[refresh card]

Shiva's Guard

This card is not in the database yet.
Description BG.png
[refresh card]

Usage


Within modules:

1 -- At the start of the program, one of the following:
2 -- For Spells, Improvements and Items:
3 local getCardLayout = require('Module:Card/Layout').getCardLayout1
4 -- For Heroes and Creatures:
5 local getCardLayout = require('Module:Card/Layout').getCardLayout2
1 -- Where you need the layout, one of the following (the parameters might not be up to date):
2 -- For Spells, Improvements and Items:
3 local cardLayout = getCardLayout(width, color, lane, mana, name, imageFile, iconName, iconCaption, iconLink, heroName, description, improvementFile, rarity)
4 -- For Heroes and Creatures:
5 local cardLayout = getCardLayout(width, color, lane, mana, name, imageFile, iconName, iconCaption, iconLink, heroName, description, improvementFile, rarity)

local cargo = mw.ext.cargo
local getArgs = require('Module:Arguments').main
local getIcon = require('Module:Icon').getIcon
local getHeroIcon = require('Module:Hero_Icon').getHeroIcon
local getAbility  = require('Module:Card/Ability').getAbilityCard
local properties = require('Module:Properties')
local util = require('Module:Util')
local p = {}

function p.getCardLayout1(width, page, name, cardType, color, rarity, itemType, abilityType, cardset, illustrator, heroName, lane, initiative, releaseDate, imageFile, iconName, iconCaption, iconLink, improvementFile, mana, cost, description, ability)   
	width = width or properties.getCardWidth()		-- Width
	local margin = properties.getCardMargin()   	-- Margin
	
	local cardTitle = p.getCardTitle1(width, lane, mana, name, page, initiative)
	local cardUpper = p.getCardUpper1(width, imageFile, iconName, iconCaption, iconLink, heroName, name, page)
	local cardLower = p.getCardLower1(width, description, improvementFile, rarity, color, cost)
	
	local height = p.round(1.7 * width)
	color = properties.getCardColor(color)
	
	local cardRefresh = p.getCardRefresh(width, name, page)
	local borderRadius = p.round(0.0286 * 175)
	
	return string.format([=[<div style="display: inline-block; margin: %spx;"><div style="overflow: hidden; display: flex; flex-flow: column nowrap; align-items: center; width: %spx; height: %spx; border-radius: %spx; background: %s;"> %s %s %s </div> %s </div>]=], margin, width, height, borderRadius, color, cardTitle, cardUpper, cardLower, cardRefresh)
end


function p.getCardLayout2(width, page, name, cardType, color, rarity, itemType, abilityType, cardset, illustrator, heroName, hero, lane, initiative, releaseDate, imageFile, iconName, iconCaption, iconLink, improvementFile, mana, cost, attack, armor, health, description, ability)
	width = width or properties.getCardWidth()		-- Width
	local margin = properties.getCardMargin()   	-- Margin
	
	local cardTitle = p.getCardTitle2(width, lane, mana, name, page, initiative, hero)
	local cardUpper = p.getCardUpper2(width, imageFile, iconName, iconCaption, iconLink, heroName, description, name, page)
	local cardLower = p.getCardLower2(width, description, rarity, color)
	local cardStats = p.getCardStats(width, attack, armor, health, color)
	local height = p.round(1.7 * width)
	color = properties.getCardColor(color)
	
	local cardRefresh = p.getCardRefresh(width, name, page)
	local borderRadius = p.round(0.0286 * 175)
	
	return string.format([=[<div style="display: inline-block; margin: %spx; "><div style="overflow: hidden; display: flex; flex-flow: column nowrap; align-items: center; width: %spx; height: %spx; border-radius: %spx; background: %s;"> %s %s %s %s </div> %s </div>]=], margin, width, height, borderRadius, color, cardTitle, cardUpper, cardLower, cardStats, cardRefresh)
end


--------------------------------------------------------------------------------
--                     FORMATTING SUBFUNCTIONS                                --
--------------------------------------------------------------------------------

function p.getCardTitle1(width, lane, mana, name, page, initiative)
	local cardLeftLane = p.getCardLeftLane(width, lane)
	local cardMana = p.getCardMana(width, mana)
	local cardRightLane = p.getCardRightLane(width, lane)
	local cardName = p.getCardName(width, name, page)
	local cardInitiative = p.getCardInitiative(width, initiative)
	
	local height = p.round(0.16 * width)
	local padding = p.round(0.0857 * width)
	
	return string.format([=[<div style="height: %spx; width: 100&#37;; display: flex; flex-flow: row nowrap; justify: content: flex-start; align-items: center; color: white; padding-left: %spx;"> %s %s %s %s %s </div>]=], height, padding, cardLeftLane, cardMana, cardInitiative, cardRightLane, cardName)
end

function p.getCardTitle2(width, lane, mana, name, page, initiative, hero)
	local cardLeftLane = p.getCardLeftLane(width, lane)
	local cardMana = p.getCardMana(width, mana)
	local cardRightLane = p.getCardRightLane(width, lane)
	local cardName = p.getCardName(width, name, page)
	local cardInitiative = p.getCardInitiative(width, initiative)
	
	local cardHeroIcon = ""
	
	if(not p.isempty(hero)) then
		local heroIconSize = p.floor(0.15 * width)
		local margin = p.floor(0.0171 * width)
		cardHeroIcon = getHeroIcon(hero, heroIconSize, "yes")
		cardHeroIcon = string.format([=[<span style="margin-right: %spx;"> %s </span>]=], margin, cardHeroIcon)
	end
	
	local height = p.round(0.16 * width)
	local padding = p.round(0.0857 * width)
	
	return string.format([=[<div style="height: %spx; width: 100&#37;; display: flex; flex-flow: row nowrap; justify: content: flex-start; align-items: center; color: white; padding-left: %spx;"> %s %s %s %s %s %s </div>]=], height, padding, cardHeroIcon, cardLeftLane, cardMana, cardInitiative, cardRightLane, cardName)
end

function p.getCardInitiative(width, initiative)
	if(initiative == "yes" or initiative == "true") then
		local size = p.floor(0.045 * width)
		return string.format([=[<span style="opacity: 0.55;">[[File:Initiative Icon.png|%spx]]</span>]=], size)
	end
	return ""
end

function p.getCardCost(width, cost)
	if(p.isempty(cost) or cost == 0 or cost == '0') then
		return ''
	end
	local iconSize = p.floor(0.114 * width * 1.3)
	local fontSize = p.round(0.063 * width * 1.3)
	local padding = p.round(0.029 * width * 1.3)
	local bottom = p.round(-0.046 * width)
	local right = p.round(0.017 * width)
	return string.format([=[<div style="z-index: 2; display: flex; justify-content: center; align-items: center; position: absolute; bottom: %spx; right: %spx;"><div style="position: relative;">[[File:Gold Cost Icon.png|%spx]]</div><p style="position: absolute; color: white; font-size: %spx; padding-right: %spx; margin: 0;">%s</p></div>]=], bottom, right, iconSize, fontSize, padding, cost)
end

function p.getCardLeftLane(width, lane)
	if(p.isempty(lane)) then
		return ''
	end
	
	if(lane == 'any' or lane == 'global') then
		local fontSize = p.round(0.057 * width)
		return string.format([=[<p style="font-size: %spx; color: white; opacity: 0.5;">&#x2BC7;&#xfe0e;</p>]=], fontSize)
	else
		return ''
	end
end

function p.getCardRightLane(width, lane)
	if(p.isempty(lane)) then
		return ''
	end
	
	if(lane == 'any' or lane == 'global') then
		local fontSize = p.round(0.057 * width)
		return string.format([=[<p style="font-size: %spx; color: white; opacity: 0.5;">&#x2BC8;&#xfe0e;</p>]=], fontSize)
	else
		return ''
	end
end

function p.getCardMana(width, mana)
	if(p.isempty(mana)) then
		return ''
	else
		local fontSize = p.round(0.103 * width)
		return string.format([=[<p style="font-size: %spx;"> %s </p>]=], fontSize, mana)
	end
end

function p.getCardName(width, name, page)
	if(p.isempty(page)) then
		page = name
	end
	
	local fontSize = p.round(0.08 * width)
	local margin = p.round(0.029 * width)
	
	return string.format([=[<p class="card_name" style="font-size: %spx; margin-left: %spx;">[[%s|<span style="text-decoration-color: white; font-weight: normal; color: white;">%s</span>]]</p>]=], fontSize, margin, page, name)
end

function p.getCardUpper1(width, imageFile, iconName, iconCaption, iconLink, heroName, name, page)
	local cardImage = p.getCardImage(width, imageFile, name, page)
	local cardIcon = p.getCardIcon(width, iconName, iconCaption, iconLink)
	local cardHero = p.getCardHero(width, heroName)
	
	local height = p.round(0.748 * width)
	
	local color = '#2b2d2c'
	
	return string.format([=[<div style="height: %spx; width: %spx; background-color: %s; border-bottom: solid black 1px; position: relative; overflow: visible;"> %s %s %s </div>]=], height, width, color, cardImage, cardIcon, cardHero)
end

function p.getCardUpper2(width, imageFile, iconName, iconCaption, iconLink, heroName, description, name, page)
	local cardImage = p.getCardImage(width, imageFile, name, page)
	local cardIcon = p.getCardIcon(width, iconName, iconCaption, iconLink)
	local cardHero = p.getCardHero(width, heroName)
	
	local height = p.round(0.748 * width)
	if(p.isempty(description)) then
		height = height + p.round(0.555 * width)
	end
	
	local color = '#2b2d2c'
	
	return string.format([=[<div style="height: %spx; width: %spx; background-color: %s; border-bottom: solid black 1px; position: relative; overflow: visible;"> %s %s %s </div>]=], height, width, color, cardImage, cardIcon, cardHero)
end

function p.getCardRefresh(width, name, page)
	if(p.isempty(page)) then
		page = name
	end
	
	local link = util.fixLink(page)
	
	local refreshLink = string.format("[https://artifactwiki.com/wiki/%s?action=purge &#91;refresh card&#93;]", link)
	local fontSize = p.round(0.045 * width)
	return string.format([=[<span class="plainlinks" style="float: right; font-size: %spx; padding: 0px;">%s</span>]=], fontSize, refreshLink)
end

function p.getCardImage(width, imageFile, name, page)
	if(p.isempty(imageFile)) then
		imageFile = "File:No_Artwork.png"
	end
	if(p.isempty(page)) then
		page = name
	end
	local height = p.round((0.748 + 0.555)  * width)
	
	return string.format([=[<p style="height: %spx; position: absolute; overflow: hidden; margin: 0; padding: 0;">[[%s|%spx|link=%s|%s]]</p>]=], height, imageFile, width, page, name)
end

function p.getCardIcon(width, iconName, iconCaption, iconLink)
	if(p.isempty(iconName)) then
		return ''
	end
	local margin = p.round(0.029 * width)
	local iconSize = p.floor(0.143 * width)
	local icon = getIcon(iconName, iconSize, iconCaption, iconLink, "true")
	return string.format([=[<div style="position: absolute; margin: %spx; top: 0; left: 0;">%s</div>]=], margin, icon)
end

function p.getCardHero(width, heroName)
	if(p.isempty(heroName)) then
		return ''
	end
	local heroSize = p.floor(0.143 * width)
	local heroIcon = getHeroIcon(heroName, heroSize)
	local margin = p.round(0.029 * width)
	return string.format([=[<div style="position: absolute; margin: %spx; bottom: 0; right: 0;">%s</div>]=], margin, heroIcon)
end

function p.getCardLower1(width, description, improvementFile, rarity, color, cost)
	local cardImprovement = p.getCardImprovement(width, improvementFile)
	local cardDescription = p.getCardDescription(width, description)
	local cardRarity = p.getCardRarity(width, rarity, color)
	local cardCost = p.getCardCost(width, cost)
	local cardDescriptionBg = p.getCardDescriptionBg(width)
	
	local height = p.round(0.719 * width)
	local color = '#2b2d2c'
	return string.format([=[<div style="height: %spx; width: %spx; border-top: solid #999999 0.5px; border-bottom: solid #888888 0.5px; display: flex; justify-content: center; align-items: center; z-index: 10; position: relative;"> %s %s %s %s %s </div>]=], height, width,  cardImprovement, cardDescription, cardRarity, cardCost, cardDescriptionBg)
end

function p.getCardDescriptionBg(width)
	local height = p.round(0.719 * width)
	return string.format([=[<div style="background-color: #120f0d; z-index: 1; position: absolute; overflow: hidden; height: %spx; width: %spx;>[[File:Description BG.png|%spx]]</div>]=], height, width, width)
end

function p.getCardLower2(width, description, rarity, color)
	local cardDescription = p.getCardDescription(width, description)
	local cardRarity = p.getCardRarity(width, rarity, color)
	
	local height = p.round(0.555 * width)
	if(p.isempty(description)) then
		height = 0
	end
	local color = 'rgba(43, 45, 44, 0.7)'
	
	return string.format([=[<div style="height: %spx; width: %spx; background-color: %s; border-top: solid #999999 0.5px; border-bottom: solid #888888 0.5px; display: flex; justify-content: center; align-items: center; z-index: 10; position: relative;"> %s %s </div>]=], height, width, color, cardDescription, cardRarity)
end

function p.getCardStats(width, attack, armor, health, color)
	local height = p.round(0.222 * width)
	local atkStat = p.getCardStat(width, attack, "Attack")
	local defStat = p.getCardStat(width, armor, "Armor")
	local hpStat = p.getCardStat(width, health, "Health")
	
	local color = properties.getCardColor(color)
	
	return string.format([=[<div style="display:flex; justify-content: center; align-items: center; align-content: center; z-index: 2; width: 100&#37;; height: %spx; background-color: %s;"><div style=" display: flex; flex-flow: row nowrap; height:%spx; width: 80&#37;; justify-content: space-between; align-items: center; align-content: center; color: white; font-weight: bold;"> %s %s %s </div></div>]=], height, color, height, atkStat, defStat, hpStat)
end

function p.getCardStat(width, stat, name)
	if(p.isempty(stat) or stat == 0 or stat == '0') then
		if(name == "Armor") then
			return '<div></div>'
		elseif(p.isempty(stat)) then
			stat = '?'
		end
	end
	local iconSize = p.floor(0.131 * width)
	local icon = getIcon(name, iconSize, name, nil, 'false')
	return string.format([=[<div style="display: flex; flex-flow: row nowrap;"><div> %s </div><div> %s </div></div>]=], icon, stat)
end

function p.getCardImprovement(width, improvementFile)
	if(p.isempty(improvementFile)) then
		return ''
	end
	local size = p.floor(0.183 * width)
	local margin = -(p.round(size / 2))
	return string.format([=[<div style="z-index: 2; position: absolute; top: 0; display: flex; align-items: center; justify-content: center; width: 100&#37;;"> <div style="overflow: hidden; width: %spx; height: %spx; border-radius: 50&#37;; background-color: grey; margin-top: %spx; border: darkgray solid 2px;">[[%s|%spx]]</div></div>]=], size, size, margin, improvementFile, size)
end

function p.getCardDescription(width, description)
	if(p.isempty(description)) then
		return ''
	end
	local color = '#faf8f6'
	local padding = p.round(width * 0.023)
	local fontSize = p.round(width * 0.059)
	
	return string.format([=[<div class="card_des" style="z-index: 2; overflow: hidden; text-align: center; color: %s; padding: %spx; font-size: %spx;"> %s </div>]=], color, padding, fontSize, description)
end

function p.getCardRarity(width, rarity, color)
	if(p.isempty(rarity)) then
		return ''
	end
	rarity = string.lower(rarity)
	
	local bronze = '#b87333'
	local silver = '#aaaaaa'
	local gold = '#FFD700'
	local white = '#FFFFFF'
	
	local rcolor = bronze
	local text = "Common"
	
	if(rarity == 'common') then
		rcolor = bronze
		text = "Common"
	elseif(rarity == 'uncommon') then
		rcolor = silver
		text = "Uncommon"
	elseif(rarity == 'rare') then
		rcolor = gold
		text = "Rare"
	elseif(rarity == 'basic') then
		rcolor = white
		text = "Basic"
	else
		return ''
	end
	
	local size = p.round(0.06 * width)
	color = properties.getCardColor(color)
	local margin = p.round(-0.04 * width)
	
	return string.format([=[<div style="z-index: 2;  position: absolute; bottom: 0; display: flex; align-items: center; justify-content: center; width: 100&#37;;"><div class="tooltip2" style="width: %spx; height: %spx; background-color: %s; margin-bottom: %spx; border-radius: 50&#37;; border: solid %s 2px;"><div class="tooltipbox2" style="display:inline-block; bottom: 100&#x25;; left: 50&#x25;; width: 80px; margin-left: -40px; border-radius: 3px; padding: 3px; background-color: rgba(0, 0, 0, 0.7); color: white; font-size: 9px; text-align: center;"> Rarity: %s </div></div></div>]=], size, size, rcolor, margin, color, text)
end
	
-------------------------------------------------------------------------------

function p.isempty(s)
	return s == nil or s == ''
end

function p.floor(d)
	return math.floor(d)
end

function p.round(d)
	local numDecimalPlaces = 2
	local mult = 10^(numDecimalPlaces or 0)
	return math.floor(d * mult + 0.5) / mult
end
return p