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

리버티게임(개발), 모두가 만들어가는 자유로운 게임
둘러보기로 이동 검색으로 이동
(작동 확인된 코드 부분을 여기에서 가져옴)
 
(버그 수정 및 보고 있는 장르 분류 표시)
1번째 줄: 1번째 줄:
/**
/**
* 게임 탐색기 2.0 기술 실증 스크립트
* 게임 탐색기 2.0 가젯 스크립트
* 작성자: [[사:Senouis|Senouis]]
* 작성자: [[사:Senouis|Senouis]]
* 버전: 1.4.8
* 버전: 1.5.1
* 소스 코드 라이선스: CCL BY-NC-SA 4.0
* 소스 코드 라이선스: CCL BY-NC-SA 4.0
*/
*/
18번째 줄: 18번째 줄:
var viewcount = 50;
var viewcount = 50;
var viewoffset = 0;
var viewoffset = 0;
// auto loading with scroll
//var isLoading = false;
//var allLoaded = false;


function LoadMoreGame(e){
function LoadMoreGame(e){
54번째 줄: 58번째 줄:


function LgGamelist_LoadAllGame(){
function LgGamelist_LoadAllGame(){
genreViewArea.innerText = "전체 게임";
gameListArea.innerText = "로딩 중...";
viewoffset = 0;
viewoffset = 0;
libertygame_selectedCategory = 0;
libertygame_selectedCategory = 0;
66번째 줄: 72번째 줄:
count: viewcount
count: viewcount
}).then( function (result) {
}).then( function (result) {
gameListArea.replaceChildren();
// 더 보기 버튼
// 더 보기 버튼
var moreGameButton = document.createElement("a");
var moreGameButton = document.createElement("a");
118번째 줄: 125번째 줄:
}
}


function LgGamelist_LoadGenre(){
function LgGamelist_LoadGenre(e){
viewoffset = 0;
viewoffset = 0;
var api = new mw.Api();
var api = new mw.Api();
130번째 줄: 137번째 줄:
count: viewcount
count: viewcount
}).then( function (result) {
}).then( function (result) {
gameListArea.replaceChildren();
// 일단 더 보기 버튼
// 일단 더 보기 버튼
var moreGameButton = document.createElement("a");
var moreGameButton = document.createElement("a");
148번째 줄: 156번째 줄:
}
}


var genre_list = ["리버티게임", "어드벤처 게임", "액션 게임","퍼즐 게임","퀴즈 게임","보드 게임","음악 게임","롤플레잉 게임","시뮬레이션 게임","전략 게임","스포츠 게임","캐주얼 게임"]; // 2023년 7월 22일 시점 [[리버티게임: 게임 메타데이터]] 문서의 1차 장르 분류들, 0은 리버티게임 분류를 대신 가리킴
var genre_list = ["리버티게임", "어드벤처 게임", "액션 게임","퍼즐 게임","퀴즈 게임","보드 게임","캐주얼 게임","음악 게임","롤플레잉 게임","시뮬레이션 게임","전략 게임","스포츠 게임"]; // 2023년 7월 22일 시점 [[리버티게임: 게임 메타데이터]] 문서의 1차 장르 분류들, 0은 리버티게임 분류를 대신 가리킴


function GenreLinkClicked (genre) {
function GenreLinkClicked (genre) {
additionalLoadButtonArea.style.display = "block";
additionalLoadButtonArea.style.display = "block";
genreViewArea.innerText = genre_list[genre];
libertygame_selectedCategory = genre;
libertygame_selectedCategory = genre;
LgGamelist_LoadGenre();
LgGamelist_LoadGenre();
165번째 줄: 174번째 줄:
switch(genre_index) {  
switch(genre_index) {  
case '1':
case '1':
genre_link.addEventListener("click", function() { gameListArea.replaceChildren(); additionalLoadButtonArea.replaceChildren(); GenreLinkClicked(1);});
genre_link.addEventListener("click", function() { gameListArea.replaceChildren(); gameListArea.innerText = "로딩 중..."; additionalLoadButtonArea.replaceChildren(); GenreLinkClicked(1);});
genre_link.innerText = "어드벤처 게임";
genre_link.innerText = "어드벤처 게임";
break;
break;
case '2':
case '2':
genre_link.addEventListener("click", function() {gameListArea.replaceChildren(); additionalLoadButtonArea.replaceChildren(); GenreLinkClicked(2);});
genre_link.addEventListener("click", function() { gameListArea.replaceChildren(); gameListArea.innerText = "로딩 중..."; additionalLoadButtonArea.replaceChildren(); GenreLinkClicked(2);});
genre_link.innerText = "액션 게임";
genre_link.innerText = "액션 게임";
break;
break;
case '3':
case '3':
genre_link.addEventListener("click", function() { gameListArea.replaceChildren(); additionalLoadButtonArea.replaceChildren(); GenreLinkClicked(3);});
genre_link.addEventListener("click", function() { gameListArea.replaceChildren(); gameListArea.innerText = "로딩 중..."; additionalLoadButtonArea.replaceChildren(); GenreLinkClicked(3);});
genre_link.innerText = "퍼즐 게임";
genre_link.innerText = "퍼즐 게임";
break;
break;
case '4':
case '4':
genre_link.addEventListener("click", function() { gameListArea.replaceChildren(); additionalLoadButtonArea.replaceChildren(); GenreLinkClicked(4);});
genre_link.addEventListener("click", function() { gameListArea.replaceChildren(); gameListArea.innerText = "로딩 중..."; additionalLoadButtonArea.replaceChildren(); GenreLinkClicked(4);});
genre_link.innerText = "퀴즈 게임";
genre_link.innerText = "퀴즈 게임";
break;
break;
case '5':
case '5':
genre_link.addEventListener("click", function() { gameListArea.replaceChildren(); additionalLoadButtonArea.replaceChildren(); GenreLinkClicked(5);});
genre_link.addEventListener("click", function() { gameListArea.replaceChildren(); gameListArea.innerText = "로딩 중..."; additionalLoadButtonArea.replaceChildren(); GenreLinkClicked(5);});
genre_link.innerText = "보드 게임";
genre_link.innerText = "보드 게임";
break;
break;
case '6':
case '6':
genre_link.addEventListener("click", function() { gameListArea.replaceChildren(); additionalLoadButtonArea.replaceChildren(); GenreLinkClicked(6);});
genre_link.addEventListener("click", function() { gameListArea.replaceChildren(); gameListArea.innerText = "로딩 중..."; additionalLoadButtonArea.replaceChildren(); GenreLinkClicked(6);});
genre_link.innerText = "캐주얼 게임";
genre_link.innerText = "캐주얼 게임";
break;
break;
case '7':
case '7':
genre_link.addEventListener("click", function() { gameListArea.replaceChildren(); additionalLoadButtonArea.replaceChildren(); GenreLinkClicked(7);});
genre_link.addEventListener("click", function() { gameListArea.replaceChildren(); gameListArea.innerText = "로딩 중..."; additionalLoadButtonArea.replaceChildren(); GenreLinkClicked(7);});
genre_link.innerText = "음악 게임";
genre_link.innerText = "음악 게임";
break;
break;
case '8':
case '8':
genre_link.addEventListener("click", function() { gameListArea.replaceChildren(); additionalLoadButtonArea.replaceChildren(); GenreLinkClicked(8);});
genre_link.addEventListener("click", function() { gameListArea.replaceChildren(); gameListArea.innerText = "로딩 중..."; additionalLoadButtonArea.replaceChildren(); GenreLinkClicked(8);});
genre_link.innerText = "롤플레잉 게임";
genre_link.innerText = "롤플레잉 게임";
break;
break;
case '9':
case '9':
genre_link.addEventListener("click", function() { gameListArea.replaceChildren(); additionalLoadButtonArea.replaceChildren(); GenreLinkClicked(9);});
genre_link.addEventListener("click", function() { gameListArea.replaceChildren(); gameListArea.innerText = "로딩 중..."; additionalLoadButtonArea.replaceChildren(); GenreLinkClicked(9);});
genre_link.innerText = "시뮬레이션 게임";
genre_link.innerText = "시뮬레이션 게임";
break;
break;
case '10':
case '10':
genre_link.addEventListener("click", function() { gameListArea.replaceChildren(); additionalLoadButtonArea.replaceChildren(); GenreLinkClicked(10);});
genre_link.addEventListener("click", function() { gameListArea.replaceChildren(); gameListArea.innerText = "로딩 중..."; additionalLoadButtonArea.replaceChildren(); GenreLinkClicked(10);});
genre_link.innerText = "전략 게임";
genre_link.innerText = "전략 게임";
break;
break;
case '11':
case '11':
genre_link.addEventListener("click", function() { gameListArea.replaceChildren(); additionalLoadButtonArea.replaceChildren(); GenreLinkClicked(11);});
genre_link.addEventListener("click", function() { gameListArea.replaceChildren(); gameListArea.innerText = "로딩 중..."; additionalLoadButtonArea.replaceChildren(); GenreLinkClicked(11);});
genre_link.innerText = "스포츠 게임";
genre_link.innerText = "스포츠 게임";
break;
break;
242번째 줄: 251번째 줄:
// 플러그인X의 버그 수정 후에는 integer 처리로 환원
// 플러그인X의 버그 수정 후에는 integer 처리로 환원
genre_link.id = "LgGameTotal";
genre_link.id = "LgGameTotal";
genre_link.addEventListener("click", function() { gameListArea.replaceChildren(); additionalLoadButtonArea.replaceChildren(); additionalLoadButtonArea.style.display = "block"; LgGamelist_LoadAllGame();});
genre_link.addEventListener("click", function() { gameListArea.replaceChildren(); gameListArea.innerText = "로딩 중..."; additionalLoadButtonArea.replaceChildren(); additionalLoadButtonArea.style.display = "block"; LgGamelist_LoadAllGame();});
genre_link.innerText = "전체 게임 보기";
genre_link.innerText = "전체 게임 보기";
genre_linkline.appendChild(genre_link);
genre_linkline.appendChild(genre_link);
252번째 줄: 261번째 줄:
additionalLoadButtonArea.style.display = "block"; //  더 보기 링크 표시
additionalLoadButtonArea.style.display = "block"; //  더 보기 링크 표시
LgGamelist_LoadAllGame();
LgGamelist_LoadAllGame();
genreViewArea.style.display = "block";
}
}
$(LgGamelist_LoadDefaultMenu);
$(LgGamelist_LoadDefaultMenu);

2023년 8월 8일 (화) 14:28 판

/**
* 게임 탐색기 2.0 가젯 스크립트
* 작성자: [[사:Senouis|Senouis]]
* 버전: 1.5.1
* 소스 코드 라이선스: 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 != '게임 목록') 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);