Module:AreaMapDisplay

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

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) .. '"'}
    )

    local root = mw.html.create('div')
        :css({
            position = 'relative',
            left = '0px',
            top = '0px',
            width = '808px',
            height = '428px'
        })



    -- ベースイメージの設定
    root:tag('span')
        :css({
            position = 'absolute',
            left = '0px',
            top = '0px',
            ['z-index'] = 0,
            width = '808px',
            height = '428px'
        })
        :wikitext('[[File:' .. WorldImage .. '|808x428px]]')

    -- 画像リンク無効化用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 _, record in ipairs(results) do
        -- record.WorldImageもしくはx,yがnilの場合はスキップ
        if record.WorldImage ~= nil or record.x ~= nil or record.y == nil then
            

            -- -- color_textとcolor_fillをAreaMapDisplay/rowに格納するまでの暫定処理

            -- 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'
            -- }

            -- record.color_text = mapping_color_text[record.WorldImage]
            -- record.color_fill = mapping_color_fill[record.WorldImage]


            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('[[Worlds#' .. record.ID .. ' - ' .. record.Area .. '|' .. tostring(p.createMapPoint(record.ID, record.Area, record.Size + 6, record.color_text, record.color_fill)) .. ']]')  
        end
    end

    return tostring(root)
end

function p.createMapPoint(id, text, size, color_text, color_fill)
	-- wiki link [[]]をまたぐので、ヘルプファンクションでinnerdivとspanを作る。
    local innerdiv =  mw.html.create('div')
        :attr('title', text)
        :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