Module:AreaMapDisplay: Difference between revisions
From IdleOn MMO Wiki
mNo edit summary Tag: Reverted |
m (Reverted edits by BHY4A (talk) to last revision by Kiokurashi) Tag: Rollback |
||
Line 4: | Line 4: | ||
function p.map(frame) | function p.map(frame) | ||
local args = frame.args | local args = frame.args | ||
local WorldImage = args.WorldImage | |||
local results = | local results = cargo.query( | ||
'AreaData', | |||
'Area, WorldImage, x, y, Size, ID, color_text, color_fill', | |||
{where = 'WorldImage = "' .. mw.text.nowiki(WorldImage) .. '"'} | {where = 'WorldImage = "' .. mw.text.nowiki(WorldImage) .. '"'} | ||
) | ) | ||
Line 16: | Line 15: | ||
-- div | -- div | ||
-- <div style="top:0px;position:relative;height:428px;left:0px;width:808px"> ... </div> | -- <div style="top:0px;position:relative;height:428px;left:0px;width:808px"> ... </div> | ||
local root = | local root = mw.html.create('div') | ||
:css({ | |||
position = 'relative', | |||
position = | left = '0px', | ||
left = | top = '0px', | ||
top = | width = '808px', | ||
width = | height = '428px' | ||
height = | }) | ||
} | :attr('id',WorldImage:gsub('.png', '')) | ||
-- Image | -- Image | ||
-- div > span > a > img | -- 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> | -- <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( | root:tag('span') | ||
:css({ | |||
position = | position = 'absolute', | ||
left = | left = '0px', | ||
top = | top = '0px', | ||
[ | ['z-index'] = 0, | ||
width = | width = '808px', | ||
height = | height = '428px' | ||
} | }) | ||
:wikitext('[[File:' .. WorldImage .. '|808x428px]]') | |||
-- DIV to disable click event | -- DIV to disable click event | ||
-- div > div | -- 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> | -- <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( | root:tag('div') | ||
:css({ | |||
position = | position = 'absolute', | ||
left = | left = '0px', | ||
top = | top = '0px', | ||
right = | right = '0px', | ||
bottom = | bottom = '0px', | ||
[ | ['z-index'] = 1, | ||
[ | ['background-color'] = 'rgba(0, 0, 0, 0)' | ||
} | }) | ||
-- Default color for each world | -- Default color for each world | ||
local mapping_color_text = { | 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"] = | ["Smolderin' Plateau World Map.png"] = '#372626', | ||
[ | ['Spirited Valley World Map.png'] = '#2D4732' | ||
} | } | ||
local mapping_color_fill = { | 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"] = | ["Smolderin' Plateau World Map.png"] = '#A5796B', | ||
[ | ['Spirited Valley World Map.png'] = '#9FB582' | ||
} | } | ||
-- For each area | -- For each area | ||
for _, record in ipairs(results) do | for _, record in ipairs(results) do | ||
-- Continue if any of WorldImage, x, y is nil | -- Continue if any of WorldImage, x, y is nil | ||
if record.WorldImage ~= nil and record.x ~= nil and record.y ~= nil then | if record.WorldImage ~= nil and record.x ~= nil and record.y ~= nil then | ||
-- Set default color if color_text or color_fill is nil | -- Set default color if color_text or color_fill is nil | ||
if record.color_text == nil or record.color_text == "" then | if record.color_text == nil or record.color_text == "" then | ||
Line 87: | Line 86: | ||
-- The outer div | -- The outer div | ||
root:tag( | -- 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> | |||
position = | root:tag('div') | ||
left = record.x .. | :css({ | ||
top = record.y .. | position = 'absolute', | ||
transform = | 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)) .. ']]') | |||
end | end | ||
end | end | ||
Line 119: | Line 105: | ||
-- wiki link [[]]をまたぐので、ヘルプファンクションでinnerdivとspanを作る。 | -- wiki link [[]]をまたぐので、ヘルプファンクションでinnerdivとspanを作る。 | ||
function p.createMapPoint(id, area, size, color_text, color_fill | function p.createMapPoint(id, area, size, color_text, color_fill) | ||
-- The inner div | -- The inner div | ||
-- div > div > span | -- 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> | -- <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 = | local innerdiv = mw.html.create('div') | ||
:attr('title', area) | |||
:css({ | |||
display = | display = 'inline-flex', | ||
[ | ['justify-content'] = 'center', | ||
[ | ['align-items'] = 'center', | ||
width = size .. | width = size .. 'px', | ||
height = size .. | height = size .. 'px', | ||
[ | ['border-radius'] = '50%', | ||
[ | ['background-color'] = color_fill, | ||
border = | 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) | return tostring(innerdiv) | ||
end | end | ||
return p | return p |
Revision as of 22:12, 13 October 2024
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',
{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
-- 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, record.color_text, record.color_fill)) .. ']]')
end
end
return tostring(root)
end
-- wiki link [[]]をまたぐので、ヘルプファンクションでinnerdivとspanを作る。
function p.createMapPoint(id, area, size, color_text, color_fill)
-- 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