[REL+WIP] DX Marketplace

[Jesseunit]

Ay,

I made a DX Marketplace a few months ago, I decided to release it on the MTA Forums so everyone can copy 'n' paste my useful dx functions and use them in their scripts, or finish my dx marketplace.

Anyways, here's the full-code.

Download: http://goo.gl/iDhSD

CLIENT:

  
local sx, sy = guiGetScreenSize() 
local font = dxCreateFont('files/helvetica.ttf', 50, true) 
local visible = false 
local backgrounds = { 
    [1] = { pos={0.2, 0.15, 0.2, 0.3} }, 
    [2] = { pos={0.4, 0.15, 0.2, 0.3} }, 
    [3] = { pos={0.6, 0.15, 0.2, 0.3} }, 
    -- Bottom 
    [4] = { pos={0.2, 0.45, 0.2, 0.3} }, 
    [5] = { pos={0.4, 0.45, 0.2, 0.3} }, 
    [6] = { pos={0.6, 0.45, 0.2, 0.3} } 
} 
local startX, startY = 0.22, 0.25 
local itemWidth, itemHeight = 0.15, 0.15 
local currentItems, maxItems = 1, 2 
  
function market_toggle() 
    visible = not visible 
     
    if visible then 
        market_createItems() 
        addEventHandler('onClientRender', root, market_render) 
    else 
        removeEventHandler('onClientRender', root, market_render) 
    end 
    showCursor(visible) 
    market_toggleHud(not visible) 
end 
  
function market_createItems() 
    startX, startY = 0.22, 0.25 
    currentItems = 0 
    for i,v in ipairs(items) do 
        v.x = startX 
        v.y = startY 
        v.color = { 255, 255, 255, 255 } 
        startX = startX + 0.200 
        currentItems = currentItems + 1 
        if currentItems > maxItems then 
            startX = 0.22 
            startY = startY + 0.18 
            currentItems = 0 
        end 
    end 
end 
  
function market_render() 
    if not font then return end 
     
    -- Backgrounds 
    for i,v in ipairs(backgrounds) do 
        local x, y, w, h = unpack(v.pos) 
        dxDrawImage(sx * x, sy * y, sx * w, sy * h, 'files/bg.png') 
    end 
     
    -- Header 
    dxDrawRectangle(sx * 0.2, sy * 0.15, sx * 0.6, sy * 0.03, tocolor(30, 30, 30, 255)) 
     
    -- Coins 
    local coins = '3.000' 
    local coinWidth, coinHeight = dxGetTextWidth(coins, 0.3, font), dxGetFontHeight(0.3, font) 
    dxDrawImage(sx * 0.22, sy * 0.187, 24, 24, 'files/coin.png') 
    dxDrawText(coins, sx * 0.245, sy * 0.186, sx, sy, tocolor(255, 200, 0, 255), 0.3, font, 'left', 'top', true) 
     
    -- Scrollbar 
    dxDrawRectangle(sx * 0.787, sy * 0.182, sx * 0.012, sy * 0.564, tocolor(60,60,60,255)) 
    dxDrawRectangle(sx * 0.788, sy * 0.183, sx * 0.010, sy * 0.2, tocolor(150,150,150,255)) 
     
    -- Items 
    for i,v in ipairs(items) do 
        local info, cost, vip, limited, new = v.info, v.cost, v.vip, v.limited, v.new 
        local icon = v.icon 
        local x, y = v.x, v.y 
        local r, g, b = unpack(v.color) 
        dxDrawImage(sx * x, sy * y, sx * itemWidth, sy * itemHeight, 'items/'..icon, 0, 0, 0, tocolor( r, g, b, 255)) 
        if new then 
            dxDrawImage(sx * (x + 0.106), sy * (y - 0.003), sx * 0.0585, sy * 0.0520, 'files/new.png', 0, 0, 0, tocolor(255,255,255,255), true) 
        end 
    end 
     
    -- Hover-On 
    if not isCursorShowing() then return end 
    local cX, cY = getCursorPosition() 
    for i,v in ipairs(items) do 
        local x, y = v.x, v.y 
        if cX >= x-0.001 and cY >= y and cX <= x + (itemWidth - 0.001) and cY < y + (itemHeight - 0.001) then 
            v.color = { 255, 255, 255, 255 } 
            -- Click 
            if getKeyState('mouse1') and not clicked then 
                -- Trigger event herr 
                clicked = true 
            elseif not getKeyState('mouse1') then 
                clicked = false 
            end 
        else     
            v.color = { 200, 200, 200, 255 } 
        end 
    end 
  
end 
  
function market_toggleHud(state) 
    showPlayerHudComponent('all', state) 
end 
  
bindKey('F2', 'Down', market_toggle) 
  

SHARED:

  
items = { 
    { name='Item #1', icon='placeholder.jpg', info='This is an item', cost=100, vip=false, limited=false, new=true, available=false }, 
    { name='Item #2', icon='placeholder.jpg', info='This is an item', cost=100, vip=false, limited=false, new=false, available=false }, 
    { name='Item #3', icon='placeholder.jpg', info='This is an item', cost=100, vip=false, limited=false, new=false, available=false }, 
    { name='Item #4', icon='placeholder.jpg', info='This is an item', cost=100, vip=false, limited=false, new=false, available=false }, 
    { name='Item #5', icon='placeholder.jpg', info='This is an item', cost=100, vip=false, limited=false, new=false, available=false }, 
    { name='Item #6', icon='placeholder.jpg', info='This is an item', cost=100, vip=false, limited=false, new=false, available=false } 
} 
  

SCREENSHOT:

Fullscreen: http://i.imgur.com/wKS88bG.jpg

[krischkros]

Nice idea, but the pictures are quite blurry.

Nice idea, cool conversion, but visually you could do a little something.

Nevertheless, thank you!

[Fabioxps]

you can add something that might move the panel?