🔹Ranking List

Ranking List 형 위젯은 플레이어의 랭킹을 정렬한 UI입니다.

활용 예 ) 달리기 공식 맵, 결투장 공식 맵, 승부 예측 앱, 포인트 앱

Image

Example

5KB

RankingBoard.zip

archive

const dummyData = {
    'a': {
        id: 'a',
        name: 'user1',
        point: 100,
    },
    'b': {
        id: 'b',
        name: 'user2',
        point: 200,
    },
    'c': {
        id: 'c',
        name: 'user3',
        point: 400,
    },
    'd': {
        id: 'd',
        name: 'user4',
        point: 1000,
    },
    'e': {
        id: 'e',
        name: 'user5',
        point: 2000,
    },
    'f': {
        id: 'f',
        name: 'user6',
        point: 4000,
    },
};
function openWidget(p)
{
    //Check if player is mobile or not
    if (p.isMobile)
        //Set the widget's name, anchor position, width, and height.
        p.tag.widget = p.showWidget('widget.html', 'sidebar', 350, 480);
    else
        p.tag.widget = p.showWidget('widget.html', 'middle', 400, 448);
    
    //Send data to widget
    p.tag.widget.sendMessage({
        data: dummyData,
        id: p.id,
        isMobile: p.isMobile,
    });
    
    //Register events for messages sent from widgets
    p.tag.widget.onMessage.Add(function (sender, msg) {
        if (msg.type == "close") {
            if (sender.tag.widget) {
                sender.tag.widget.destroy();
                sender.tag.widget = null;
            }
        }
    });
}

//Event when a player joins the app
App.onJoinPlayer.Add(function(p) {
    //Reset the player's tag value
    p.tag = {};
});

// Action when the player clicks the sidebar app
App.onSidebarTouched.Add(function(p) {
    openWidget(p);
});