Module:AreaMapDisplay
From IdleOn MMO Wiki
Usage:
{{#invoke:AreaMapDisplay|map|WorldImage=Blunder Hills World Map.png}}
Lua error: Error: No field named "WorldImage" found for any of the specified database tables..
The data:
Special:CargoTables/AreaData (edit in Worlds)
local p = {}
local cargo = mw.ext.cargo
function p.map(frame)
local args = frame.args
local WorldImage = args.WorldImage
local results =
cargo.query(
"AreaData",
"Area, WorldImage, x, y, Size, ID, color_text, color_fill, tooltipText",
{where = 'WorldImage = "' .. mw.text.nowiki(WorldImage) .. '"'}
)
-- Root div
-- div
-- <div style="top:0px;position:relative;height:428px;left:0px;width:808px"> ... </div>
local root =
mw.html.create("div"):css(
{
position = "relative",
left = "0px",
top = "0px",
width = "808px",
height = "428px"
}
):attr("id", WorldImage:gsub(".png", ""))
-- Image
-- div > span > a > img
-- <span style="top:0px;position:absolute;height:428px;z-index:0;left:0px;width:808px"><a href="URL of {{{WorldImage}}} Page" class="image"><img alt="{{{WorldImage}}}" src="URL of {{{WorldImage}}}" decoding="async" width="808" height="428"></a></span>
root:tag("span"):css(
{
position = "absolute",
left = "0px",
top = "0px",
["z-index"] = 0,
width = "808px",
height = "428px"
}
):wikitext("[[File:" .. WorldImage .. "|808x428px]]")
-- DIV to disable click event
-- div > div
-- <div style="top:0px;background-color:rgba(0, 0, 0, 0);position:absolute;z-index:1;right:0px;left:0px;bottom:0px"></div>
root:tag("div"):css(
{
position = "absolute",
left = "0px",
top = "0px",
right = "0px",
bottom = "0px",
["z-index"] = 1,
["background-color"] = "rgba(0, 0, 0, 0)"
}
)
-- Default color for each world
local mapping_color_text = {
["Blunder Hills World Map.png"] = "#392927",
["Yum Yum Desert World Map.png"] = "#392827",
["Frostbite Tundra World Map.png"] = "#272F39",
["Hyperion Nebula World Map.png"] = "#261C27",
["Smolderin' Plateau World Map.png"] = "#372626",
["Spirited Valley World Map.png"] = "#2D4732"
}
local mapping_color_fill = {
["Blunder Hills World Map.png"] = "#C0985C",
["Yum Yum Desert World Map.png"] = "#C68D5C",
["Frostbite Tundra World Map.png"] = "#85BACB",
["Hyperion Nebula World Map.png"] = "#9F6671",
["Smolderin' Plateau World Map.png"] = "#A5796B",
["Spirited Valley World Map.png"] = "#9FB582"
}
-- For each area
for _, record in ipairs(results) do
-- Continue if any of WorldImage, x, y is nil
if record.WorldImage ~= nil and record.x ~= nil and record.y ~= nil then
-- Set default color if color_text or color_fill is nil
if record.color_text == nil or record.color_text == "" then
record.color_text = mapping_color_text[record.WorldImage]
end
if record.color_fill == nil or record.color_fill == "" then
record.color_fill = mapping_color_fill[record.WorldImage]
end
-- The outer div
root:tag("div"):css(
{
position = "absolute",
left = record.x .. "px",
top = record.y .. "px",
transform = "translate(-50%, -50%)",
["line-height"] = "95%",
["z-index"] = 2
}
):wikitext(
"[[#" ..
record.Area ..
"|" ..
tostring(
p.createMapPoint(
record.ID,
record.Area,
record.Size,
record.color_text,
record.color_fill,
args.tooltipText
)
) ..
"]]"
)
end
end
return tostring(root)
end
-- wiki link [[]]をまたぐので、ヘルプファンクションでinnerdivとspanを作る。
function p.createMapPoint(id, area, size, color_text, color_fill, tooltipText)
-- The inner div
-- div > div > span
-- <div title="{{{Area}}}" style="justify-content:center;border:2px solid {{{color_text}}};background-color:{{{color_fill}}};height:{{{Size}}};display:inline-flex;border-radius:50%;align-items:center;width:{{{Size}}}"><span style="color:{{{color_text}}};font-family:'Helvetica', sans-serif;font-weight:bold;font-size:10px">{{{ID}}}</span></div></a></div>
local innerdiv =
mw.html.create("div"):attr("title", tooltipText or area):css(
{
display = "inline-flex",
["justify-content"] = "center",
["align-items"] = "center",
width = size .. "px",
height = size .. "px",
["border-radius"] = "50%",
["background-color"] = color_fill,
border = "2px solid " .. color_text
}
)
local tooltip_span =
mw.html.create("span"):addClass("simple-tooltip simple-tooltip-inline tooltipstered"):attr(
"data-simple-tooltip",
tooltipText or area
):css({color = color_text}):wikitext(id)
innerdiv:node(tooltip_span)
return tostring(innerdiv)
end
return p