Module:AreaMapDisplay: Difference between revisions
From IdleOn MMO Wiki
mNo edit summary |
Kiokurashi (talk | contribs) mNo edit summary |
||
(One intermediate revision by one other user not shown) | |||
Line 10: | Line 10: | ||
[6] = {image = 'Spirited Valley World Map.png', color_text = '#2D4732', color_fill = '#9FB582'} | [6] = {image = 'Spirited Valley World Map.png', color_text = '#2D4732', color_fill = '#9FB582'} | ||
} | } | ||
function p.getWorldImageData() | |||
return WorldImageData | |||
end | |||
function p.map(frame) | function p.map(frame) | ||
local args = frame.args | local args = frame.args | ||
local WorldID = tonumber(args.World) | local WorldID = tonumber(args.World) or 1 | ||
local WorldInfo = WorldImageData[WorldID] or {image = 'Coming Soon.png', color_text = '#000000', color_fill = '#FFFFFF'} | local WorldInfo = WorldImageData[WorldID] or {image = 'Coming Soon.png', color_text = '#000000', color_fill = '#FFFFFF'} | ||
Latest revision as of 14:30, 16 October 2024
Usage:
{{#invoke:AreaMapDisplay|map|WorldImage=Blunder Hills World Map.png}}
The data:
Special:CargoTables/AreaData (edit in Worlds)
local p = {}
local cargo = mw.ext.cargo
local WorldImageData = {
[1] = {image = 'Blunder Hills World Map.png', color_text = '#392927', color_fill = '#C0985C'},
[2] = {image = 'Yum Yum Desert World Map.png', color_text = '#392827', color_fill = '#C68D5C'},
[3] = {image = 'Frostbite Tundra World Map.png', color_text = '#272F39', color_fill = '#85BACB'},
[4] = {image = 'Hyperion Nebula World Map.png', color_text = '#261C27', color_fill = '#9F6671'},
[5] = {image = "Smolderin' Plateau World Map.png", color_text = '#372626', color_fill = '#A5796B'},
[6] = {image = 'Spirited Valley World Map.png', color_text = '#2D4732', color_fill = '#9FB582'}
}
function p.getWorldImageData()
return WorldImageData
end
function p.map(frame)
local args = frame.args
local WorldID = tonumber(args.World) or 1
local WorldInfo = WorldImageData[WorldID] or {image = 'Coming Soon.png', color_text = '#000000', color_fill = '#FFFFFF'}
local results = cargo.query(
'AreaData',
'Area, World, x, y, Size, ID, color_text, color_fill',
{where = 'World = ' .. WorldID}
)
-- 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',WorldInfo.image: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:' .. WorldInfo.image .. '|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)'
})
-- For each area
for _, record in ipairs(results) do
-- Continue if any of WorldImage, x, y is nil
if record.x and record.y then
-- Set default color if color_text or color_fill is nil
local color_text = record.color_text or WorldInfo.color_text
local color_fill = record.color_fill or WorldInfo.color_fill
-- The outer div
-- div > div
-- <div style="top:{{{y}}}px;transform:translate(-50%, -50%);position:absolute;z-index:2;left:{{{x}}}px;line-height:95%"><a href="URL of Area Page" title="Worlds"> ... </a></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, color_text, color_fill)) .. ']]')
end
end
return tostring(root)
end
-- wiki link [[]]をまたぐので、ヘルプファンクションでinnerdivとspanを作る。
function p.createMapPoint(id, area, size, color_text, color_fill)
size = size or 25
-- 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', 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,
})
innerdiv:tag('span')
:css({
color = color_text,
['font-size'] = '10px',
['font-family'] = "'Helvetica', sans-serif",
['font-weight'] = 'bold'
})
:wikitext(id)
return tostring(innerdiv)
end
return p