사용자:Senouis/게임 탐색기

/**
* 게임 탐색기 2.0 기술 실증 스크립트
* 여기서 작성한 내용을 테스트한 후 [[미디어위키:Gadget-gamelistjs.js]]에 붙여넣게 됩니다.
* 작성자: [[사:Senouis|Senouis]]
* 버전: 1.5.2
* 소스 코드 라이선스: CCL BY-NC-SA 4.0
*/
var genreMenuArea = document.getElementById("categoryList");
var genreViewArea = document.getElementById("libertygame-genre");
var gameListArea = document.getElementById("categoryResult");
var additionalLoadButtonArea = document.getElementById("libertygame-additionalLoad");

var searchresult = {};
var gamelist = [];

var totalgenre = []; // 전체 게임 수(index 0) + 장르별 총 게임 수(index 1+)

var moreInfoTarget = "";
var viewcount = 50;
var viewoffset = 0;

// auto loading with scroll
//var isLoading = false;
//var allLoaded = false;

function LoadMoreGame(e){
	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(){
	genreViewArea.innerText = "전체 게임";
	gameListArea.innerText = "로딩 중...";
	viewoffset = 0;
	libertygame_selectedCategory = 0;
	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) {
		gameListArea.replaceChildren();
		// 더 보기 버튼
		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(e){
	viewoffset = 0;
	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) {
		gameListArea.replaceChildren();
		// 일단 더 보기 버튼
		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 GenreLinkClicked (genre) {
	additionalLoadButtonArea.style.display = "block";
	genreViewArea.innerText = genre_list[genre];
	libertygame_selectedCategory = genre;
	LgGamelist_LoadGenre();
	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(); gameListArea.innerText = "로딩 중..."; additionalLoadButtonArea.replaceChildren(); GenreLinkClicked(1);});
		genre_link.innerText = "어드벤처 게임";
		break;
	case '2':
		genre_link.addEventListener("click", function() {  gameListArea.replaceChildren(); gameListArea.innerText = "로딩 중..."; additionalLoadButtonArea.replaceChildren(); GenreLinkClicked(2);});
		genre_link.innerText = "액션 게임";
		break;
	case '3':
		genre_link.addEventListener("click", function() {  gameListArea.replaceChildren(); gameListArea.innerText = "로딩 중..."; additionalLoadButtonArea.replaceChildren(); GenreLinkClicked(3);});
		genre_link.innerText = "퍼즐 게임";
		break;
	case '4':
		genre_link.addEventListener("click", function() { gameListArea.replaceChildren(); gameListArea.innerText = "로딩 중..."; additionalLoadButtonArea.replaceChildren(); GenreLinkClicked(4);});
		genre_link.innerText = "퀴즈 게임";
		break;
	case '5':
		genre_link.addEventListener("click", function() { gameListArea.replaceChildren(); gameListArea.innerText = "로딩 중..."; additionalLoadButtonArea.replaceChildren(); GenreLinkClicked(5);});
		genre_link.innerText = "보드 게임";
		break;
	case '6':
		genre_link.addEventListener("click", function() { gameListArea.replaceChildren(); gameListArea.innerText = "로딩 중..."; additionalLoadButtonArea.replaceChildren(); GenreLinkClicked(6);});
		genre_link.innerText = "캐주얼 게임";
		break;
	case '7':
		genre_link.addEventListener("click", function() { gameListArea.replaceChildren(); gameListArea.innerText = "로딩 중..."; additionalLoadButtonArea.replaceChildren(); GenreLinkClicked(7);});
		genre_link.innerText = "음악 게임";
		break;
	case '8':
		genre_link.addEventListener("click", function() { gameListArea.replaceChildren(); gameListArea.innerText = "로딩 중..."; additionalLoadButtonArea.replaceChildren(); GenreLinkClicked(8);});
		genre_link.innerText = "롤플레잉 게임";
		break;
	case '9':
		genre_link.addEventListener("click", function() { gameListArea.replaceChildren(); gameListArea.innerText = "로딩 중..."; additionalLoadButtonArea.replaceChildren(); GenreLinkClicked(9);});
		genre_link.innerText = "시뮬레이션 게임";
		break;
	case '10':
		genre_link.addEventListener("click", function() { gameListArea.replaceChildren(); gameListArea.innerText = "로딩 중..."; additionalLoadButtonArea.replaceChildren(); GenreLinkClicked(10);});
		genre_link.innerText = "전략 게임";
		break;
	case '11':
		genre_link.addEventListener("click", function() { gameListArea.replaceChildren(); gameListArea.innerText = "로딩 중..."; 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() {
	// 시작 전 게임 목록 문서가 맞는지 확인
	if (mw.config.values.wgTitle != '게임 목록' &&  mw.config.values.wgTitle != 'Senouis/게임 탐색기') 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");
	var genre_link = document.createElement("a");
	// 플러그인X의 문제인지 switch 문의 expression이 string으로 인식됨
	// 플러그인X의 버그 수정 후에는 integer 처리로 환원
	genre_link.id = "LgGameTotal";
	genre_link.addEventListener("click", function() { gameListArea.replaceChildren(); gameListArea.innerText = "로딩 중..."; additionalLoadButtonArea.replaceChildren(); additionalLoadButtonArea.style.display = "block";	LgGamelist_LoadAllGame();});
	genre_link.innerText = "전체 게임 보기";
	genre_linkline.appendChild(genre_link);
	genreMenuArea.appendChild(genre_linkline);
	
	// 기본적으로 전체 장르 보기를 함
	document.getElementById("categoryList").style.display = "block"; // 장르별 게임 목록 링크 활성화
	document.getElementById("categoryResult").style.display = "block"; // 게임 목록 활성화
	additionalLoadButtonArea.style.display = "block"; //  더 보기 링크 표시
	LgGamelist_LoadAllGame();
	genreViewArea.style.display = "block";
}
$(LgGamelist_LoadDefaultMenu);
// 스크롤을 끝까지 내리면 로딩
/*
$(window).scroll(function () {
	if (allLoaded === true) return;
	var height = document.body.scrollTop;
	var maxelementheight = document.getElementsByClassName("mw-page-container")[0].getBoundingClientRect().height; // mw-page-container 클래스 element의 첫 원소가 스크롤링하는 사이트 높이를 결정
	if ( height >= 240 && height >= maxelementheight - document.documentElement.scrollHeight - 10 ) {
		if (!isLoading) {
			if (libertygame_selectedCategory === 0) LoadMoreGame();
			else LoadMoreGenre();
			isLoading = true;
		}
	} else {
		isLoading = false;
		return;
	}
});
*/

스크립트(커먼자스 병합 후보)

DPL 기반 게임 카드 틀

781,159,37,33,20,27,3,11,62,2,0,85