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

Changes

Jump to navigation Jump to search
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
  
Anonymous user

Navigation menu