Module:AreaMapDisplay: Difference between revisions

From IdleOn MMO Wiki
mNo edit summary
mNo edit summary
 
(17 intermediate revisions by 3 users not shown)
Line 1: Line 1:
local p = {}
local p = {}
local cargo = mw.ext.cargo
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)
function p.map(frame)
     local args = frame.args
     local args = frame.args
local WorldImage = args.WorldImage
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(
     local results = cargo.query(
         'AreaData',
         'AreaData',
         'Area, WorldImage, x, y, Size, ID, color_text, color_fill',
         'Area, World, x, y, Size, ID, color_text, color_fill',
         {where = 'WorldImage = "' .. mw.text.nowiki(WorldImage) .. '"'}
         {where = 'World = ' .. WorldID}
     )
     )


Line 23: Line 37:
             height = '428px'
             height = '428px'
         })
         })
        :attr('id',WorldInfo.image:gsub('.png', ''))


     -- Image
     -- Image
Line 36: Line 51:
             height = '428px'
             height = '428px'
         })
         })
         :wikitext('[[File:' .. WorldImage .. '|808x428px]]')
         :wikitext('[[File:' .. WorldInfo.image .. '|808x428px]]')


     -- DIV to disable click event
     -- DIV to disable click event
Line 51: Line 66:
             ['background-color'] = 'rgba(0, 0, 0, 0)'
             ['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',
        ["Smoulderin' 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',
        ["Smoulderin' Plateau World Map.png"] = '#A5796B',
        ['Spirited Valley World Map.png'] = '#9FB582'
    }


     -- For each area
     -- For each area
Line 74: Line 71:


         -- Continue if any of WorldImage, x, y is nil
         -- Continue if any of WorldImage, x, y is nil
         if record.WorldImage == nil or record.x == nil or record.y == nil then
         if record.x and record.y 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
             local color_text = record.color_text or WorldInfo.color_text
                record.color_text = mapping_color_text[record.WorldImage]
             local color_fill = record.color_fill or WorldInfo.color_fill
            end
             if record.color_fill == nil or record.color_fill == "" then
                record.color_fill = mapping_color_fill[record.WorldImage]
            end


             -- The outer div
             -- The outer div
Line 96: Line 89:
                     ['z-index'] = 2
                     ['z-index'] = 2
                 })
                 })
                 :wikitext('[[Worlds#' .. record.ID .. ' - ' .. record.Area .. '|' .. tostring(p.createMapPoint(record.ID, record.Area, record.Size, record.color_text, record.color_fill)) .. ']]')   
                 :wikitext('[[#' .. record.Area .. '|' .. tostring(p.createMapPoint(record.ID, record.Area, record.Size, color_text, color_fill)) .. ']]')   
         end
         end
     end
     end
Line 105: Line 98:
-- 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)
size = size or 25
     -- The inner div
     -- The inner div
     -- div > div > span
     -- div > div > span

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