미디어위키:Gadget-gamelistjs.js: 두 판 사이의 차이

리버티게임(개발), 모두가 만들어가는 자유로운 게임
둘러보기로 이동 검색으로 이동
(작동 확인된 코드 부분을 여기에서 가져옴)
 
>BANIP
(자동로딩 개선)
 
(사용자 2명의 중간 판 6개는 보이지 않습니다)
1번째 줄: 1번째 줄:
/**
$(function(){
* 게임 탐색기 2.0 기술 실증 스크립트
    var $result = $("#menu-search-result"); // 검색결과 래퍼
* 작성자: [[사:Senouis|Senouis]]
    var $categories = $("#menu-categories"); // 카테고리 래퍼
* 버전: 1.4.8
    if($result.length == 0) return; // 없으면 종료
* 소스 코드 라이선스: CCL BY-NC-SA 4.0
    var PAGE_FETCH_LIMIT = $result.data("fetch-limit") * 1 || 30; // 한번에 불러올 게임카드 수
*/
var genreMenuArea = document.getElementById("categoryList");
var genreViewArea = document.getElementById("libertygame-genre");
var gameListArea = document.getElementById("categoryResult");
var additionalLoadButtonArea = document.getElementById("libertygame-additionalLoad");


var searchresult = {};
    $categories.find(".item").toArray().map(function(el){ // 카테고리 데이터 dom에서 수집
var gamelist = [];
        return {
            category:$(el).find(".link").data('pagename'),
            length:$(el).find(".pagecount").text() * 1,
            el:el
        };
    }).map(function(option){
        var el = option.el;
        var category = option.category;
        $(el).find("a").on("click",function(e){ // 카테고리 링크 클릭 시
            e.preventDefault(); // 페이지 이동 비활성화
            var $output = $result.find(".gamecards-wrapper[data-category='" + category + "']"); //해당 장르별 게임카드 래퍼 있는지 확인
            if($output.length == 0){ // 없으면
                $output = $("<div class='gamecards-wrapper' data-category='" + category + "'><h2>" + category + "</h2></div>"); // 만들고
                $result.append($output); // 추가
                var $load = getLoadButton({category: category, offset:0,count:PAGE_FETCH_LIMIT, $output:$output}); // 로드버튼도 생성해서
                $result.append($load); // 추가
                $load.click(); // 추가한 로드버튼 바로 클릭
            }
            $result.find(".gamecards-wrapper").not($output).hide(); // gamecards-wrapper 감추기
            $output.show(); // output만 표시
        });
    });


var totalgenre = []; // 전체 게임 수(index 0) + 장르별 총 게임 수(index 1+)
    // 무한스크롤 구현
    $([window.document,window.document.body]).on("scroll",function(){
        // #content 제일 아래 기준 100px 위쪽으로 스크롤 되었을 시
        if($(window).scrollTop() + $(window).height() > $("#content").offset().top + $("#content").height() - 100){
            var $visible = $result.find(".gamecards-wrapper:visible"); // 보이는 게임카드 래퍼 선택
            if($visible.length == 0) return; // 없으면 종료


var moreInfoTarget = "";
            if($visible.find(".btn-next").length > 0){ // 래퍼 아래에 더 불러오기 버튼이 있으면
var viewcount = 50;
                $visible.find(".btn-next").click(); // 불러오기 버튼 클릭
var viewoffset = 0;
            }
        } 
    });


function LoadMoreGame(e){
    $categories.find(".link[data-pagename='리버티게임']").find("a").click(); // 기본 모든게임 확인
var totalgame = totalgenre[0];
});
if (viewoffset < totalgame) { // TODO: viewoffset >= totalgame
var api = new mw.Api();
api.get({
action: 'parse',
page: '사용자:Senouis/게임 탐색기/DPL 틀',
contentmodel: "wikitext",
formatversion: 2,
category: genre_list[libertygame_selectedCategory],
offset: viewoffset,
count: viewcount
}).then( function (result) {
// 더 보기 버튼 추가는 불필요
var temphtml = document.createElement("div");
temphtml.innerHTML = result.parse.text;
gameListArea.appendChild(temphtml);
var resultlist = document.getElementById("categoryResult");
resultlist.id += "-" + Number(viewoffset).toString();
gameListArea.appendChild(resultlist);
gameListArea.removeChild(temphtml);
if (document.getElementsByClassName("gamecard-404").length !== 0) {
// 더 이상 해당하는 게임이 없다는 메세지가 temphtml에 있었음, 해당 메세지와 더 보기 링크를 숨김 처리
document.getElementsByClassName("gamecard-404").item(0).style.display = "none";
additionalLoadButtonArea.style.display = "none";
}
viewoffset += viewcount;
});
} else {
allLoaded = true;
additionalLoadButtonArea.style.display = "none";
}
}


function LgGamelist_LoadAllGame(){
//게임카드 가져오기
viewoffset = 0;
function getGameCards(option){
libertygame_selectedCategory = 0;
    var category = option.category,
var api = new mw.Api();
        offset = option.offset || 0,
api.get({
        count = option.count;
action: 'parse',
page: '사용자:Senouis/게임 탐색기/DPL 틀',
contentmodel: "wikitext",
formatversion: 2,
category: genre_list[libertygame_selectedCategory],
offset: viewoffset,
count: viewcount
}).then( function (result) {
// 더 보기 버튼
var moreGameButton = document.createElement("a");
moreGameButton.addEventListener("click", LoadMoreGame);
moreGameButton.innerText = "더 보기";
additionalLoadButtonArea.appendChild(moreGameButton);
var temphtml = document.createElement("div");
temphtml.innerHTML = result.parse.text;
gameListArea.appendChild(temphtml);
var resultlist = document.getElementById("categoryResult");
resultlist.id += "-" + Number(viewoffset).toString();
gameListArea.appendChild(resultlist);
gameListArea.removeChild(temphtml);
viewoffset += viewcount;
allLoaded = false;
});
return;
}
var libertygame_selectedCategory = 0;
function LoadMoreGenre(e){ // category는 외부에 저장할 예정
var totalgame = totalgenre[Number(e.currentTarget.id.slice(12))];
if (viewoffset < totalgame) {
var api = new mw.Api();
api.get({
action: 'parse',
page: '사용자:Senouis/게임 탐색기/DPL 틀',
contentmodel: "wikitext",
formatversion: 2,
category: genre_list[libertygame_selectedCategory],
offset: viewoffset,
count: viewcount
}).then( function (result) {
// 일단 더 보기 버튼 추가는 불필요
var temphtml = document.createElement("div");
temphtml.innerHTML = result.parse.text;
gameListArea.appendChild(temphtml);
var resultlist = document.getElementById("categoryResult");
resultlist.id += "-" + Number(viewoffset).toString();
gameListArea.appendChild(resultlist);
gameListArea.removeChild(temphtml);
if (document.getElementsByClassName("gamecard-404").length !== 0) {
// 더 이상 해당하는 게임이 없다는 메세지가 temphtml에 있었음, 해당 메세지와 더 보기 링크를 숨김 처리
document.getElementsByClassName("gamecard-404").item(0).style.display = "none";
additionalLoadButtonArea.style.display = "none";
}
viewoffset += viewcount;
});
} else {
additionalLoadButtonArea.style.display = "none";
allLoaded = true;
}
}


function LgGamelist_LoadGenre(){
    return new Promise(function(resolve){
viewoffset = 0;
        (new mw.Api()).get({
var api = new mw.Api();
            action: 'parse',
api.get({
            page:"버:게임 목록/dpl",
action: 'parse',
            formatversion: 2,
page: '사용자:Senouis/게임 탐색기/DPL 틀',
            category: category, offset: offset, count: count
contentmodel: "wikitext",
        }).then(function(response){
formatversion: 2,
            var result = $(response.parse.text).find(".gamecards, .gamecard-404");
category: genre_list[libertygame_selectedCategory],
            resolve(result);
offset: viewoffset,
        });
count: viewcount
    });
}).then( function (result) {
// 일단 더 보기 버튼
var moreGameButton = document.createElement("a");
moreGameButton.addEventListener("click", LoadMoreGenre);
moreGameButton.innerText = "더 보기";
additionalLoadButtonArea.appendChild(moreGameButton);
var temphtml = document.createElement("div");
temphtml.innerHTML = result.parse.text;
gameListArea.appendChild(temphtml);
var resultlist = document.getElementById("categoryResult");
resultlist.id += "-" + Number(viewoffset).toString();
gameListArea.appendChild(resultlist);
gameListArea.removeChild(temphtml);
viewoffset += viewcount;
allLoaded = false;
});
return;
}
}


var genre_list = ["리버티게임", "어드벤처 게임", "액션 게임","퍼즐 게임","퀴즈 게임","보드 게임","음악 게임","롤플레잉 게임","시뮬레이션 게임","전략 게임","스포츠 게임","캐주얼 게임"]; // 2023년 7월 22일 시점 [[리버티게임: 게임 메타데이터]] 문서의 1차 장르 분류들, 0은 리버티게임 분류를 대신 가리킴
// 더 불러오기 버튼 생성
 
function getLoadButton(option){
function GenreLinkClicked (genre) {
    var category = option.category,  
additionalLoadButtonArea.style.display = "block";
        offset = option.offset,
libertygame_selectedCategory = genre;
        count = option.count,  
LgGamelist_LoadGenre();
        $output = option.$output;
return;
}
 
function addGenreLink(genre_index) {
var genre_linkline = document.createElement("li");
var genre_link = document.createElement("a");
genre_link.id = "LgGameGenre-" + genre_index; // DOM ID 추가
// 플러그인X의 문제인지 switch 문의 expression이 string으로 인식됨
// 플러그인X의 버그 수정 후에는 integer 처리로 환원
switch(genre_index) {
case '1':
genre_link.addEventListener("click", function() { gameListArea.replaceChildren(); additionalLoadButtonArea.replaceChildren(); GenreLinkClicked(1);});
genre_link.innerText = "어드벤처 게임";
break;
case '2':
genre_link.addEventListener("click", function() {gameListArea.replaceChildren(); additionalLoadButtonArea.replaceChildren(); GenreLinkClicked(2);});
genre_link.innerText = "액션 게임";
break;
case '3':
genre_link.addEventListener("click", function() { gameListArea.replaceChildren(); additionalLoadButtonArea.replaceChildren(); GenreLinkClicked(3);});
genre_link.innerText = "퍼즐 게임";
break;
case '4':
genre_link.addEventListener("click", function() { gameListArea.replaceChildren(); additionalLoadButtonArea.replaceChildren(); GenreLinkClicked(4);});
genre_link.innerText = "퀴즈 게임";
break;
case '5':
genre_link.addEventListener("click", function() { gameListArea.replaceChildren(); additionalLoadButtonArea.replaceChildren(); GenreLinkClicked(5);});
genre_link.innerText = "보드 게임";
break;
case '6':
genre_link.addEventListener("click", function() { gameListArea.replaceChildren(); additionalLoadButtonArea.replaceChildren(); GenreLinkClicked(6);});
genre_link.innerText = "캐주얼 게임";
break;
case '7':
genre_link.addEventListener("click", function() { gameListArea.replaceChildren(); additionalLoadButtonArea.replaceChildren(); GenreLinkClicked(7);});
genre_link.innerText = "음악 게임";
break;
case '8':
genre_link.addEventListener("click", function() { gameListArea.replaceChildren(); additionalLoadButtonArea.replaceChildren(); GenreLinkClicked(8);});
genre_link.innerText = "롤플레잉 게임";
break;
case '9':
genre_link.addEventListener("click", function() { gameListArea.replaceChildren(); additionalLoadButtonArea.replaceChildren(); GenreLinkClicked(9);});
genre_link.innerText = "시뮬레이션 게임";
break;
case '10':
genre_link.addEventListener("click", function() { gameListArea.replaceChildren(); additionalLoadButtonArea.replaceChildren(); GenreLinkClicked(10);});
genre_link.innerText = "전략 게임";
break;
case '11':
genre_link.addEventListener("click", function() { gameListArea.replaceChildren(); additionalLoadButtonArea.replaceChildren(); GenreLinkClicked(11);});
genre_link.innerText = "스포츠 게임";
break;
default:
genre_link.addEventListener("click", function() { gameListArea.replaceChildren(); additionalLoadButtonArea.replaceChildren(); GenreLinkClicked("분류 없는");});
genre_link.innerText = "잘못된 장르 분류(이 링크가 보이면 관리단에게 보고 부탁드립니다)";
}
genre_linkline.appendChild(genre_link);
genreMenuArea.appendChild(genre_linkline);
return;
}


function LgGamelist_LoadDefaultMenu() {
    var $load = $("<span class='mw-ui-button btn-next' role='button' style='margin-top:8px'>더 불러오기</span>"); // 더 불러오기 버튼 생성
// 시작 전 게임 목록 문서가 맞는지 확인
if (mw.config.values.wgTitle != '게임 목록') return;
// 먼저 기존 게임 목록 element를 비움
document.getElementById("categoryList").replaceChildren();
document.getElementById("categoryResult").replaceChildren();
// 장르별 보기 링크 추가
// Note: [[리버티게임: 게임 메타데이터]]의 1차 장르 분류가 변경될 때마다 이 부분을 수정해야 합니다.
    for (var index in genre_list) {
    if (index === '0') continue;
    addGenreLink(index);
    }
    // 분류별 장르 갯수 확인
    var totalgamestring = document.getElementById("LgTotalGameNum").innerText.split(",");
    for (var index2 in totalgamestring) {
    totalgenre.push(totalgamestring[Number(index2)]);
    }
      
      
var genre_linkline = document.createElement("li");
    $load.on("click",function(e){ // 버튼 클릭 시
var genre_link = document.createElement("a");
        $load.remove(); // 버튼 지우고
// 플러그인X의 문제인지 switch 문의 expression이 string으로 인식됨
        e.preventDefault(); // 페이지 위로 올라가는 현상 제거
// 플러그인X의 버그 수정 후에는 integer 처리로 환원
        $("#preloader-wrapper").slideDown(0.2); // 로딩바 표시
genre_link.id = "LgGameTotal";
        getGameCards({category: category, offset: offset, count: count}).then(function($gameCards){// 게임카드 불러오고
genre_link.addEventListener("click", function() { gameListArea.replaceChildren(); additionalLoadButtonArea.replaceChildren(); additionalLoadButtonArea.style.display = "block"; LgGamelist_LoadAllGame();});
            $output.append($gameCards); // 아웃풋에 추가
genre_link.innerText = "전체 게임 보기";
            $("#preloader-wrapper").hide();
genre_linkline.appendChild(genre_link);
            if($gameCards.find(".gamecard").length === count){ // 불러올게 더있으면
genreMenuArea.appendChild(genre_linkline);
                $output.append(getLoadButton({
                    category: category,
// 기본적으로 전체 장르 보기를 함
                    offset : offset + count,
document.getElementById("categoryList").style.display = "block"; // 장르별 게임 목록 링크 활성화
                    count: count,
document.getElementById("categoryResult").style.display = "block"; // 게임 목록 활성화
                    $output:$output
additionalLoadButtonArea.style.display = "block"; // 더 보기 링크 표시
                })); // 로딩버튼 생성
LgGamelist_LoadAllGame();
            }
        });
    });
    return $load;
}
}
$(LgGamelist_LoadDefaultMenu);

2023년 8월 29일 (화) 09:53 기준 최신판

$(function(){
    var $result = $("#menu-search-result"); // 검색결과 래퍼
    var $categories = $("#menu-categories"); // 카테고리 래퍼
    if($result.length == 0) return; // 없으면 종료
    var PAGE_FETCH_LIMIT = $result.data("fetch-limit") * 1 || 30; // 한번에 불러올 게임카드 수

    $categories.find(".item").toArray().map(function(el){ // 카테고리 데이터 dom에서 수집
        return {
            category:$(el).find(".link").data('pagename'),
            length:$(el).find(".pagecount").text() * 1,
            el:el
        };
    }).map(function(option){
        var el = option.el;
        var category = option.category;
        $(el).find("a").on("click",function(e){ // 카테고리 링크 클릭 시 
            e.preventDefault(); // 페이지 이동 비활성화
            var $output = $result.find(".gamecards-wrapper[data-category='" + category + "']"); //해당 장르별 게임카드 래퍼 있는지 확인
            if($output.length == 0){ // 없으면 
                $output = $("<div class='gamecards-wrapper' data-category='" + category + "'><h2>" + category + "</h2></div>"); // 만들고
                $result.append($output); // 추가
                var $load = getLoadButton({category: category, offset:0,count:PAGE_FETCH_LIMIT, $output:$output}); // 로드버튼도 생성해서
                $result.append($load); // 추가
                $load.click(); // 추가한 로드버튼 바로 클릭
            } 
            $result.find(".gamecards-wrapper").not($output).hide(); // gamecards-wrapper 감추기
            $output.show(); // output만 표시
        });
    });

    // 무한스크롤 구현
    $([window.document,window.document.body]).on("scroll",function(){
        // #content 제일 아래 기준 100px 위쪽으로 스크롤 되었을 시
        if($(window).scrollTop() + $(window).height() > $("#content").offset().top + $("#content").height() - 100){
            var $visible = $result.find(".gamecards-wrapper:visible"); // 보이는 게임카드 래퍼 선택
            if($visible.length == 0) return; // 없으면 종료

            if($visible.find(".btn-next").length > 0){ // 래퍼 아래에 더 불러오기 버튼이 있으면
                $visible.find(".btn-next").click(); // 불러오기 버튼 클릭
            }
        }   
    });

    $categories.find(".link[data-pagename='리버티게임']").find("a").click(); // 기본 모든게임 확인
});

//게임카드 가져오기
function getGameCards(option){
    var category = option.category,
        offset = option.offset || 0,
        count = option.count;

    return new Promise(function(resolve){
        (new mw.Api()).get({
            action: 'parse',
            page:"버:게임 목록/dpl",
            formatversion: 2,
            category: category, offset: offset, count: count
        }).then(function(response){
            var result = $(response.parse.text).find(".gamecards, .gamecard-404");
            resolve(result);
        });
    });
}

// 더 불러오기 버튼 생성
function getLoadButton(option){
    var category = option.category, 
        offset = option.offset,
        count = option.count, 
        $output = option.$output;

    var $load = $("<span class='mw-ui-button btn-next' role='button' style='margin-top:8px'>더 불러오기</span>"); // 더 불러오기 버튼 생성
    
    $load.on("click",function(e){ // 버튼 클릭 시
        $load.remove(); // 버튼 지우고
        e.preventDefault(); // 페이지 위로 올라가는 현상 제거
        $("#preloader-wrapper").slideDown(0.2); // 로딩바 표시
        getGameCards({category: category, offset: offset, count: count}).then(function($gameCards){// 게임카드 불러오고
            $output.append($gameCards); // 아웃풋에 추가
            $("#preloader-wrapper").hide();
            if($gameCards.find(".gamecard").length === count){ // 불러올게 더있으면
                $output.append(getLoadButton({
                    category: category, 
                    offset : offset + count, 
                    count: count, 
                    $output:$output
                })); // 로딩버튼 생성
            }
        });
    });
    return $load;
}