• Welcome to the Kancolle Wiki!
  • If you have any questions regarding site content, account registration, etc., please visit the KanColle Wiki Discord

Difference between revisions of "Module:ShipCardKai"

From Kancolle Wiki
Jump to navigation Jump to search
com>Ckwng
(Fix vertical alignment when layered)
com>Ckwng
(Add grayscale support, change to mw.html.node builders instead of template strings, link ship by default)
Line 9: Line 9:
 
_battle_card_size = "160x40px",
 
_battle_card_size = "160x40px",
 
_card_layers = {
 
_card_layers = {
status_expedition = {image = "Card Status Expedition.png", top = "229px", left = "133px"},
+
status_expedition = {image = "Card Status Expedition.png", style = {top = "229px", left = "133px"}},
status_repair = {image = "Card Status Repair.png", top = "228px", left = "133px"},
+
status_repair = {image = "Card Status Repair.png", style = {top = "228px", left = "133px"}},
status_light_damage = {image = "Card Status Light Damage.png", top = "228px", left = "133px"},
+
status_light_damage = {image = "Card Status Light Damage.png", style = {top = "228px", left = "133px"}},
status_medium_damage = {image = "Card Status Medium Damage.png", top = "228px", left = "133px"},
+
status_medium_damage = {image = "Card Status Medium Damage.png", style = {top = "228px", left = "133px"}},
status_heavy_damage = {image = "Card Status Heavy Damage.png", top = "228px", left = "133px"},
+
status_heavy_damage = {image = "Card Status Heavy Damage.png", style = {top = "228px", left = "133px"}},
status_sunk = {image = "Card Status Sunk.png", top = "228px", left = "133px"},
+
status_sunk = {image = "Card Status Sunk.png", style = {top = "228px", left = "133px"}},
ring = {image = "Card Marriage Ring.png", top = "260px", left = "180px"},
+
ring = {image = "Card Marriage Ring.png", style = {top = "260px", left = "180px"}},
ring_glow = {image = "Card Marriage Ring Glow.png", top = "254px", left = "170px", opacity = "0.7"},
+
ring_glow = {image = "Card Marriage Ring Glow.png", style = {top = "254px", left = "170px", opacity = "0.7"}},
 
},
 
},
 
_battle_card_layers = {
 
_battle_card_layers = {
takoyaki = {image = "Hell plane 2.png", top = "5px", left = "50px", size = "30x30px"},
+
takoyaki = {image = "Hell plane 2.png", style = {top = "5px", left = "50px"}, size = "30x30px"},
hell = {image = "Hell plane 2.png", top = "5px", left = "50px", size = "30x30px"},
+
hell = {image = "Hell plane 2.png", style = {top = "5px", left = "50px"}, size = "30x30px"},
hell_r = {image = "Hell plane 2.png", top = "5px", left = "120px", size = "30x30px"},
+
hell_r = {image = "Hell plane 2.png", style = {top = "5px", left = "120px"}, size = "30x30px"},
hell_l1 = {image = "Hell plane 2.png", top = "9px", left = "44px", size = "30x30px"},
+
hell_l1 = {image = "Hell plane 2.png", style = {top = "9px", left = "44px"}, size = "30x30px"},
hell_r1 = {image = "Hell plane 2.png", top = "9px", left = "109px", size = "30x30px"},
+
hell_r1 = {image = "Hell plane 2.png", style = {top = "9px", left = "109px"}, size = "30x30px"},
hell_offset_l1 = {image = "Hell plane 2.png", top = "9px", left = "44px", size = "30x30px"},
+
hell_offset_l1 = {image = "Hell plane 2.png", style = {top = "9px", left = "44px"}, size = "30x30px"},
hell_offset_r1 = {image = "Hell plane 2.png", top = "9px", left = "109px", size = "30x30px"},
+
hell_offset_r1 = {image = "Hell plane 2.png", style = {top = "9px", left = "109px"}, size = "30x30px"},
flagship = {image = "Flagship battle card icon.png", top = "3px", left = "139px"},
+
flagship = {image = "Flagship battle card icon.png", style = {top = "3px", left = "139px"}},
revenge_r2 = {image = "Hell plane 3.png", top = "3px", left = "130px", size = "30x33px"},
+
revenge_r2 = {image = "Hell plane 3.png", style = {top = "3px", left = "130px"}, size = "30x33px"},
revenge_kai_l2 = {image = "Abyssal Revenge Torpedo Bomber Kai.png", top = "0px", left = "60px", size = "35x44px"},
+
revenge_kai_l2 = {image = "Abyssal Revenge Torpedo Bomber Kai.png", style = {top = "0px", left = "60px"}, size = "35x44px"},
revenge_kai_r1 = {image = "Abyssal Revenge Torpedo Bomber Kai.png", top = "5px", left = "104px", size = "35x44px"},
+
revenge_kai_r1 = {image = "Abyssal Revenge Torpedo Bomber Kai.png", style = {top = "5px", left = "104px"}, size = "35x44px"},
revenge_kai_r2 = {image = "Abyssal Revenge Torpedo Bomber Kai.png", top = "0px", left = "125px", size = "35x44px"},
+
revenge_kai_r2 = {image = "Abyssal Revenge Torpedo Bomber Kai.png", style = {top = "0px", left = "125px"}, size = "35x44px"},
revenge_kai_offset_l2 = {image = "Abyssal Revenge Torpedo Bomber Kai.png", top = "0px", left = "60px", size = "35x44px"},
+
revenge_kai_offset_l2 = {image = "Abyssal Revenge Torpedo Bomber Kai.png", style = {top = "0px", left = "60px"}, size = "35x44px"},
revenge_kai_offset_r2 = {image = "Abyssal Revenge Torpedo Bomber Kai.png", top = "0px", left = "125px", size = "35x44px"},
+
revenge_kai_offset_r2 = {image = "Abyssal Revenge Torpedo Bomber Kai.png", style = {top = "0px", left = "125px"}, size = "35x44px"},
hell_kai_l1 = {image = "Abyssal Hell Dive Bomber Kai.png", top = "5px", left = "39px", size = "35x35px"},
+
hell_kai_l1 = {image = "Abyssal Hell Dive Bomber Kai.png", style = {top = "5px", left = "39px"}, size = "35x35px"},
hell_kai_r1 = {image = "Abyssal Hell Dive Bomber Kai.png", top = "5px", left = "104px", size = "35x35px"},
+
hell_kai_r1 = {image = "Abyssal Hell Dive Bomber Kai.png", style = {top = "5px", left = "104px"}, size = "35x35px"},
hell_kai_offset_l1 = {image = "Abyssal Hell Dive Bomber Kai.png", top = "5px", left = "39px", size = "35x35px"},
+
hell_kai_offset_l1 = {image = "Abyssal Hell Dive Bomber Kai.png", style = {top = "5px", left = "39px"}, size = "35x35px"},
hell_kai_offset_r1 = {image = "Abyssal Hell Dive Bomber Kai.png", top = "5px", left = "104px", size = "35x35px"},
+
hell_kai_offset_r1 = {image = "Abyssal Hell Dive Bomber Kai.png", style = {top = "5px", left = "104px"}, size = "35x35px"},
attack_seaplane_kai_r = {image = "Abyssal Attack Seaplane Kai.png", top = "0px", left = "120px", size = "35x35px"},
+
attack_seaplane_kai_r = {image = "Abyssal Attack Seaplane Kai.png", style = {top = "0px", left = "120px"}, size = "35x35px"},
status_expedition = {image = "Battle Card Status Expedition.png", top = "0px", left = "0px"},
+
status_expedition = {image = "Battle Card Status Expedition.png", style = {top = "0px", left = "0px"}},
status_repair = {image = "Battle Card Status Repair.png", top = "0px", left = "0px"},
+
status_repair = {image = "Battle Card Status Repair.png", style = {top = "0px", left = "0px"}},
status_light_damage = {image = "Battle Card Status Light Damage.png", top = "0px", left = "0px"},
+
status_light_damage = {image = "Battle Card Status Light Damage.png", style = {top = "0px", left = "0px"}},
status_medium_damage = {image = "Battle Card Status Medium Damage.png", top = "0px", left = "0px"},
+
status_medium_damage = {image = "Battle Card Status Medium Damage.png", style = {top = "0px", left = "0px"}},
status_heavy_damage = {image = "Battle Card Status Heavy Damage.png", top = "0px", left = "0px"},
+
status_heavy_damage = {image = "Battle Card Status Heavy Damage.png", style = {top = "0px", left = "0px"}},
status_light_damage_installation = {image = "Battle Card Status Light Damage Installation.png", top = "0px", left = "0px"},
+
status_light_damage_installation = {image = "Battle Card Status Light Damage Installation.png", style = {top = "0px", left = "0px"}},
status_medium_damage_installation = {image = "Battle Card Status Medium Damage Installation.png", top = "0px", left = "0px"},
+
status_medium_damage_installation = {image = "Battle Card Status Medium Damage Installation.png", style = {top = "0px", left = "0px"}},
status_heavy_damage_installation = {image = "Battle Card Status Heavy Damage Installation.png", top = "0px", left = "0px"},
+
status_heavy_damage_installation = {image = "Battle Card Status Heavy Damage Installation.png", style = {top = "0px", left = "0px"}},
status_sunk_installation = {image = "Battle Card Status Sunk Installation.png", top = "0px", left = "0px"},
+
status_sunk_installation = {image = "Battle Card Status Sunk Installation.png", style = {top = "0px", left = "0px"}},
smudge_light = {image = "Battle Card Smudge Light.png", top = "0px", left = "0px"},
+
smudge_light = {image = "Battle Card Smudge Light.png", style = {top = "0px", left = "0px"}},
smudge_medium = {image = "Battle Card Smudge Medium.png", top = "0px", left = "0px"},
+
smudge_medium = {image = "Battle Card Smudge Medium.png", style = {top = "0px", left = "0px"}},
smudge_heavy = {image = "Battle Card Smudge Heavy.png", top = "0px", left = "0px"},
+
smudge_heavy = {image = "Battle Card Smudge Heavy.png", style = {top = "0px", left = "0px"}},
ring = {image = "Battle Card Marriage Ring.png", top = "19px", left = "138px"},
+
ring = {image = "Battle Card Marriage Ring.png", style = {top = "19px", left = "138px"}},
ring_glow = {image = "Battle Card Marriage Ring Glow.png", top = "10px", left = "126px", opacity = "0.7"},
+
ring_glow = {image = "Battle Card Marriage Ring Glow.png", style = {top = "10px", left = "126px", opacity = "0.7"}},
 
},
 
},
_image_wrapper = [[<span class="image-stack" style="display: inline-block; position: relative; overflow: hidden; vertical-align: middle;">${layers}</span>]],
+
_image_wrapper_style = {display = "inline-block", position = "relative", overflow = "hidden", ['vertical-align'] = "middle"},
_image_layer = [[<span class="image-layer" style="position: absolute; top: ${top}; left: ${left}; opacity: ${opacity}; line-height: 0px;">${image}</span>]],
+
_image_layer_style = {position = "absolute", ['line-height'] = "0px"},
 +
_grayscale_style = {filter = "grayscale(100%)", ['-webkit-filter'] = "grayscale(100%)"},
 
}
 
}
  
Line 62: Line 63:
 
ship = args.ship
 
ship = args.ship
 
end
 
end
local image = Formatting:format_image{args.damaged and ship:card_damaged() or ship:card(), size = args.size or self._card_size, link = args.link, caption = args.caption}
+
local image = Formatting:format_image{args.damaged and ship:card_damaged() or ship:card(), size = args.size or self._card_size, link = args.link or ship:link(), caption = args.caption}
if args.layers then
+
if args.layers or args.grayscale then
local layers = {image}
+
local stack = self:_create_stack(image, args.grayscale)
for _, layer in ipairs(split(args.layers)) do
+
if args.layers then
if self._card_layers[layer] then
+
for _, layer in ipairs(split(args.layers)) do
self:_add_layer(layers, self._card_layers[layer], args)
+
if self._card_layers[layer] then
 +
self:_add_layer(stack, self._card_layers[layer], ship, args)
 +
end
 
end
 
end
 
end
 
end
image = format{self._image_wrapper, layers = table.concat(layers)}
+
image = tostring(stack)
 
end
 
end
 
return image
 
return image
Line 85: Line 88:
 
ship = args.ship
 
ship = args.ship
 
end
 
end
local image = Formatting:format_image{args.damaged and ship:battle_card_damaged() or ship:battle_card(), size = args.size or self._battle_card_size, link = args.link, caption = args.caption}
+
local image = Formatting:format_image{args.damaged and ship:battle_card_damaged() or ship:battle_card(), size = args.size or self._battle_card_size, link = args.link or ship:link(), caption = args.caption}
 
local ship_layers = ship:battle_card_layers()
 
local ship_layers = ship:battle_card_layers()
if ship_layers or args.flagship or args.layers then
+
if ship_layers or args.flagship or args.layers or args.grayscale then
local layers = {image}
+
local stack = self:_create_stack(image, args.grayscale)
 
if ship_layers then
 
if ship_layers then
 
for _, layer in ipairs(ship_layers) do
 
for _, layer in ipairs(ship_layers) do
self:_add_layer(layers, self._battle_card_layers[layer], args)
+
self:_add_layer(stack, self._battle_card_layers[layer], ship, args)
 
end
 
end
 
end
 
end
 
if args.flagship then
 
if args.flagship then
self:_add_layer(layers, self._battle_card_layers.flagship, args)
+
self:_add_layer(stack, self._battle_card_layers.flagship, ship, args)
 
end
 
end
 
if args.layers then
 
if args.layers then
 
for _, layer in ipairs(split(args.layers)) do
 
for _, layer in ipairs(split(args.layers)) do
 
if self._battle_card_layers[layer] then
 
if self._battle_card_layers[layer] then
self:_add_layer(layers, self._battle_card_layers[layer], args)
+
self:_add_layer(stack, self._battle_card_layers[layer], ship, args)
 
end
 
end
 
end
 
end
 
end
 
end
image = format{self._image_wrapper, layers = table.concat(layers)}
+
image = tostring(stack)
 
end
 
end
 
return image
 
return image
 
end
 
end
  
function ShipCardKai:_add_layer(layers, layer, args)
+
function ShipCardKai:_add_layer(stack, layer, ship, args)
table.insert(layers, format{self._image_layer, image = Formatting:format_image{layer.image, caption = layer.caption or args.caption, size = layer.size, link = args.link}, top = layer.top, left = layer.left, opacity = layer.opacity})
+
stack:node(mw.html.create('span'):addClass('image-layer'):css(self._image_layer_style):css(layer.style):wikitext(Formatting:format_image{layer.image, caption = layer.caption or args.caption, size = layer.size, link = args.link or ship:link()}))
 +
end
 +
 
 +
function ShipCardKai:_create_stack(image, grayscale)
 +
local stack = mw.html.create('span'):addClass('image-stack'):css(self._image_wrapper_style)
 +
if grayscale then
 +
stack:node(mw.html.create('span'):addClass('grayscale-wrapper'):css(self._grayscale_style):wikitext(image))
 +
else
 +
stack:wikitext(image)
 +
end
 +
return stack
 
end
 
end
  

Revision as of 19:58, 14 September 2015

Documentation for this module may be created at Module:ShipCardKai/doc

local Ship = require('Module:Ship')
local Formatting = require('Module:Formatting')

local format = require("Module:StringOperations").format
local split = require("Module:StringOperations").split

local ShipCardKai = {
	_card_size = "218x300px",
	_battle_card_size = "160x40px",
	_card_layers = {
		status_expedition = {image = "Card Status Expedition.png", style = {top = "229px", left = "133px"}},
		status_repair = {image = "Card Status Repair.png", style = {top = "228px", left = "133px"}},
		status_light_damage = {image = "Card Status Light Damage.png", style = {top = "228px", left = "133px"}},
		status_medium_damage = {image = "Card Status Medium Damage.png", style = {top = "228px", left = "133px"}},
		status_heavy_damage = {image = "Card Status Heavy Damage.png", style = {top = "228px", left = "133px"}},
		status_sunk = {image = "Card Status Sunk.png", style = {top = "228px", left = "133px"}},
		ring = {image = "Card Marriage Ring.png", style = {top = "260px", left = "180px"}},
		ring_glow = {image = "Card Marriage Ring Glow.png", style = {top = "254px", left = "170px", opacity = "0.7"}},
	},
	_battle_card_layers = {
		takoyaki = {image = "Hell plane 2.png", style = {top = "5px", left = "50px"}, size = "30x30px"},
		hell = {image = "Hell plane 2.png", style = {top = "5px", left = "50px"}, size = "30x30px"},
		hell_r = {image = "Hell plane 2.png", style = {top = "5px", left = "120px"}, size = "30x30px"},
		hell_l1 = {image = "Hell plane 2.png", style = {top = "9px", left = "44px"}, size = "30x30px"},
		hell_r1 = {image = "Hell plane 2.png", style = {top = "9px", left = "109px"}, size = "30x30px"},
		hell_offset_l1 = {image = "Hell plane 2.png", style = {top = "9px", left = "44px"}, size = "30x30px"},
		hell_offset_r1 = {image = "Hell plane 2.png", style = {top = "9px", left = "109px"}, size = "30x30px"},
		flagship = {image = "Flagship battle card icon.png", style = {top = "3px", left = "139px"}},
		revenge_r2 = {image = "Hell plane 3.png", style = {top = "3px", left = "130px"}, size = "30x33px"},
		revenge_kai_l2 = {image = "Abyssal Revenge Torpedo Bomber Kai.png", style = {top = "0px", left = "60px"}, size = "35x44px"},
		revenge_kai_r1 = {image = "Abyssal Revenge Torpedo Bomber Kai.png", style = {top = "5px", left = "104px"}, size = "35x44px"},
		revenge_kai_r2 = {image = "Abyssal Revenge Torpedo Bomber Kai.png", style = {top = "0px", left = "125px"}, size = "35x44px"},
		revenge_kai_offset_l2 = {image = "Abyssal Revenge Torpedo Bomber Kai.png", style = {top = "0px", left = "60px"}, size = "35x44px"},
		revenge_kai_offset_r2 = {image = "Abyssal Revenge Torpedo Bomber Kai.png", style = {top = "0px", left = "125px"}, size = "35x44px"},
		hell_kai_l1 = {image = "Abyssal Hell Dive Bomber Kai.png", style = {top = "5px", left = "39px"}, size = "35x35px"},
		hell_kai_r1 = {image = "Abyssal Hell Dive Bomber Kai.png", style = {top = "5px", left = "104px"}, size = "35x35px"},
		hell_kai_offset_l1 = {image = "Abyssal Hell Dive Bomber Kai.png", style = {top = "5px", left = "39px"}, size = "35x35px"},
		hell_kai_offset_r1 = {image = "Abyssal Hell Dive Bomber Kai.png", style = {top = "5px", left = "104px"}, size = "35x35px"},
		attack_seaplane_kai_r = {image = "Abyssal Attack Seaplane Kai.png", style = {top = "0px", left = "120px"}, size = "35x35px"},
		status_expedition = {image = "Battle Card Status Expedition.png", style = {top = "0px", left = "0px"}},
		status_repair = {image = "Battle Card Status Repair.png", style = {top = "0px", left = "0px"}},
		status_light_damage = {image = "Battle Card Status Light Damage.png", style = {top = "0px", left = "0px"}},
		status_medium_damage = {image = "Battle Card Status Medium Damage.png", style = {top = "0px", left = "0px"}},
		status_heavy_damage = {image = "Battle Card Status Heavy Damage.png", style = {top = "0px", left = "0px"}},
		status_light_damage_installation = {image = "Battle Card Status Light Damage Installation.png", style = {top = "0px", left = "0px"}},
		status_medium_damage_installation = {image = "Battle Card Status Medium Damage Installation.png", style = {top = "0px", left = "0px"}},
		status_heavy_damage_installation = {image = "Battle Card Status Heavy Damage Installation.png", style = {top = "0px", left = "0px"}},
		status_sunk_installation = {image = "Battle Card Status Sunk Installation.png", style = {top = "0px", left = "0px"}},
		smudge_light = {image = "Battle Card Smudge Light.png", style = {top = "0px", left = "0px"}},
		smudge_medium = {image = "Battle Card Smudge Medium.png", style = {top = "0px", left = "0px"}},
		smudge_heavy = {image = "Battle Card Smudge Heavy.png", style = {top = "0px", left = "0px"}},
		ring = {image = "Battle Card Marriage Ring.png", style = {top = "19px", left = "138px"}},
		ring_glow = {image = "Battle Card Marriage Ring Glow.png", style = {top = "10px", left = "126px", opacity = "0.7"}},
	},
	_image_wrapper_style = {display = "inline-block", position = "relative", overflow = "hidden", ['vertical-align'] = "middle"},
	_image_layer_style = {position = "absolute", ['line-height'] = "0px"},
	_grayscale_style = {filter = "grayscale(100%)", ['-webkit-filter'] = "grayscale(100%)"},
}

function ShipCardKai:card(ship, args)
	if not args then
		args = ship
		ship = args.ship
	end
	local image = Formatting:format_image{args.damaged and ship:card_damaged() or ship:card(), size = args.size or self._card_size, link = args.link or ship:link(), caption = args.caption}
	if args.layers or args.grayscale then
		local stack = self:_create_stack(image, args.grayscale)
		if args.layers then
			for _, layer in ipairs(split(args.layers)) do
				if self._card_layers[layer] then
					self:_add_layer(stack, self._card_layers[layer], ship, args)
				end
			end
		end
		image = tostring(stack)
	end
	return image
end

function ShipCardKai:Card(args)
	local ship = self:create_ship(args)
	return self:card(ship, args)
end

function ShipCardKai:battle_card(ship, args)
	if not args then
		args = ship
		ship = args.ship
	end
	local image = Formatting:format_image{args.damaged and ship:battle_card_damaged() or ship:battle_card(), size = args.size or self._battle_card_size, link = args.link or ship:link(), caption = args.caption}
	local ship_layers = ship:battle_card_layers()
	if ship_layers or args.flagship or args.layers or args.grayscale then
		local stack = self:_create_stack(image, args.grayscale)
		if ship_layers then
			for _, layer in ipairs(ship_layers) do
				self:_add_layer(stack, self._battle_card_layers[layer], ship, args)
			end
		end
		if args.flagship then
			self:_add_layer(stack, self._battle_card_layers.flagship, ship, args)
		end
		if args.layers then
			for _, layer in ipairs(split(args.layers)) do
				if self._battle_card_layers[layer] then
					self:_add_layer(stack, self._battle_card_layers[layer], ship, args)
				end
			end
		end
		image = tostring(stack)
	end
	return image
end

function ShipCardKai:_add_layer(stack, layer, ship, args)
	stack:node(mw.html.create('span'):addClass('image-layer'):css(self._image_layer_style):css(layer.style):wikitext(Formatting:format_image{layer.image, caption = layer.caption or args.caption, size = layer.size, link = args.link or ship:link()}))
end

function ShipCardKai:_create_stack(image, grayscale)
	local stack = mw.html.create('span'):addClass('image-stack'):css(self._image_wrapper_style)
	if grayscale then
		stack:node(mw.html.create('span'):addClass('grayscale-wrapper'):css(self._grayscale_style):wikitext(image))
	else
		stack:wikitext(image)
	end
	return stack
end

function ShipCardKai:BattleCard(args)
	local ship = self:create_ship(args)
	return self:battle_card(ship, args)
end

function ShipCardKai:create_ship(args)
	if args.name then
		return Ship(args.name, args.model)
	else
		return Ship(args[1])
	end
end

return ShipCardKai