백괴슬라이드
이 게임은 현재 공사 중입니다!
<div style="display:none">
요령 => 아래 변수들의 첫번째 인자들을 내용에 맞게 자르고 붙여넣어주세요
!!!!!!!!!!!!!!!! 플러그인 정보 입력 구간 윗부분은 만지지 마시오 절대로!!!!!!!!!!!!!!!!!
{{#vardefine:name|uncyslide}}
{{#vardefine:creat|BANIP}}
{{#vardefine:version|1.1.02}}
{{#vardefine:descript|백괴슬라이드 실행}}
{{#vardefine:local|true}}
{{#vardefine:executable|true}}
{{#vardefine:code|
// 이부부분에 코드 입력 //
<nowiki>var slideable = plugin_Slideable();
var create = slideable.create;
var execute = slideable.execute;
var dispose = slideable.dispose;
var rankingSystem = plugin_RankingSystem()("백괴슬라이드/랭킹", function(prev,next){ return Number(prev.time) - Number(next.time)});
var outputKeys = {time:"소요시간"};
var startMap = localStorage.getItem("uncySlide/startmap") || 0;
var game = {
0: {
center: "아래로 밀어주세요.",
bottom: 1
},
1: {
center: "오른쪽으로 밀어보세요.",
right: 2
},
2: {
center: "어디로 밀어보실래요?",
top: 3,
bottom: 3,
},
3: {
center: "반갑습니다. <br>백괴슬라이드입니다.",
bottom: 4,
},
4: {
center: "어디로 당기고 미느냐에 따라, 게임의 결과가 달라집니다.",
bottom: 5,
},
5: {
center: "는 개뿔 이겜 시스템만든다고 그런 장황한거 만들 정신머리는 없었습니다",
bottom: 5.1,
},
5.1: {
center: "진심 힘들었습니다.",
bottom: 5.2,
},
5.2: {
center: "잘했죠?",
bottom: 5.3,
},
5.3: {
center: "위로 밀어서 칭찬하거나 아래로 밀어서 욕해주세요.",
top: 5.4,
bottom: 5.5,
},
5.4: {
center: "감사합니다. 헤헤",
bottom: 6,
},
5.5: {
center: "흑흑.. 힘들었는데..",
bottom: 6,
},
6: {
center: "그래도 미디어위키의 틀에서 벗어난 겜인만큼 최대한 나은 경험을 선사하고자 노력했습니다. 잘부탁드립니다.",
bottom: function(){
localStorage.setItem("uncySlide/startmap","main");
execute("main");
},
},
main: {
center: "<ul><li>아래: 게임시작</li><li>토론: 위</li><li>설명: 오른쪽</li></ul>",
bottom: function(){ execute("start",{count:100,time:Date.now()}) },
top: "debate",
right: "i0",
},
i0: {
center:"가장자리에 화살표 보이죠?",
bottom:"i1"
},
i1: {
center:"화면을 넘겨서 드래그해서 진행하는 게임이에요.",
bottom:"i2"
},
i2: {
center:"원래라면 좀 큰 스케일의 게임으로 만들고 싶었는데..",
bottom:"i3"
},
i3: {
center:"제 역량이 겜 크기에서 다 드러나네요...",
bottom:"i4"
},
i4: {
center:"아무쪼록 힘들게 만들었으니 재밌게 즐겨주세요.",
right:"main"
},
debate: function(){
location.href = "https://libertyga.me/wiki/%ED%86%A0%EB%A1%A0:%EB%B0%B1%EA%B4%B4%EC%8A%AC%EB%9D%BC%EC%9D%B4%EB%93%9C";
},
start: function(arg){
function getRandomDirection(){
switch( Math.ceil(Math.random() * 4) ){
case 1: return "top"; break;
case 2: return "bottom"; break;
case 3: return "left"; break;
case 4: return "right"; break;
}
}
function getColorCode(count,maxcount){
var code = "hsl(" + count / maxcount * 360 +",100%,70%)";
return code
}
var count = arg.count;
var maxcount = arg.maxcount || count;
var time = arg.time;
var $this = $(this);
var timerInterval;
var slideableItem = {
center: function(){
var $this = $(this);
$this.css({
"background": getColorCode(count,maxcount)
});
timerInterval = setInterval(function(){
var overtime = (Date.now() - time) * 0.001;
var printableTime = overtime.toFixed(2);
$this.find(".counter").html(printableTime + "초");
},5)
return "<div class='counter' style='font-size:5vw;'></div><div style='font-size:20vw;'>" + count + "</div>";
}
};
slideableItem[getRandomDirection()] = function(){
clearInterval(timerInterval);
if(count === 1) return execute("result",{count:count - 1,time:time,maxcount:maxcount});
execute("start",{count:count - 1,time:time,maxcount:maxcount})
};
create(slideableItem);
},
result: function(arg){
var maxcount = arg.maxcount || count;
var time = ( (Date.now() - arg.time) / 1000 ).toFixed(2);
var updateParam = {
time: time,
name: mw.config.get("wgUserName")
};
rankingSystem.update(updateParam,function(rankingScore,thisScore){ return rankingScore.time > thisScore.time},outputKeys);
create({
center: "갯수: " + maxcount + " <br/>시간: " + time + "<ul><li>왼쪽: 메인으로</li><li>오른쪽: 토론으로</li></ul>",
left:"main",
right:"debate",
});
}
}
dispose(game, startMap, {});</nowiki>
}}
!!!!!!!!!!!!!!!! 플러그인 정보 입력 구간 끝 아래는 만지지 마시오!!!!!!!!!!!!!!!!!
</div>{{#switch: {{{1|화면}}}
|dump =
|화면 = {{플러그인/preset/각주}}
<p<includeonly></includeonly>re class="script" data-name="{{#var:name}}"
data-create="{{#var:creat}}"
data-version="{{#var:version}}"
data-descript="{{#var:descript}}"
data-local="{{#var:local}}"
data-executable="{{#var:executable}}"
data-state="백괴슬라이드/플러그인">
{{#var:code}}
</pre>
|#default =
{{#ifeq:{{{2|틀}}}|틀|{{플러그인/알림|{{#var:name}}}}|}}
<span class="use-script" data-name="{{#var:name}}" data-creat="{{#var:creat}}" data-version="{{#var:version}}" data-executable="{{#var:executable}}"
data-descript="{{#var:descript}}" data-local="{{#var:local}}" data-state="백괴슬라이드/플러그인" data-link="{{fullurl: {{#rel2abs: {{{1}}} }} }}"></span>
}}
<div style="display:none">
요령 => 아래 변수들의 첫번째 인자들을 내용에 맞게 자르고 붙여넣어주세요
!!!!!!!!!!!!!!!! 플러그인 정보 입력 구간 윗부분은 만지지 마시오 절대로!!!!!!!!!!!!!!!!!
{{#vardefine:name|Slideable}}
{{#vardefine:creat|BANIP}}
{{#vardefine:version|1.0.21}}
{{#vardefine:descript|슬라이드 플러그인 라이브러리}}
{{#vardefine:local|true}}
{{#vardefine:executable|false}}
{{#vardefine:code|
// 이부부분에 코드 입력 //
//모든 키 순회
function forEach(object, callback) {
for (var key in object) {
var variable = object[key];
callback(variable, key);
}
}
function create(directionData) {
function initClassName($target, data) {
forEach(data, function(value, direction) {
$target.find("." + direction).addClass("on");
})
}
function initDOM($target, data) {
$target[0].data = data;
$target.find(".center").html(data.center);
$target.find(".top.on").css("background","url('https://upload.wikimedia.org/wikipedia/commons/8/85/Arrow_top_svg.svg') no-repeat center");
$target.find(".bottom.on").css("background","url('https://upload.wikimedia.org/wikipedia/commons/f/f2/Arrow_bottom_svg.svg') no-repeat center");
$target.find(".left.on").css("background","url('https://upload.wikimedia.org/wikipedia/commons/4/40/Arrowleft_svg.svg') no-repeat center");
$target.find(".right.on").css("background","url('https://upload.wikimedia.org/wikipedia/commons/e/ec/Arrow2right.svg') no-repeat center");
}
var slideUtil = {
moveObject: function($this, axis) {
var x = axis[0], y = axis[1];
var data = $this[0].data;
if (!data.right && x > 0) x = 0;
if (!data.left && x < 0) x = 0;
if (!data.top && y < 0) y = 0;
if (!data.bottom && y > 0) y = 0;
$this.css("transform", "translate(" + x + "px," + y + "px)");
},
isHideable: function($this, axis, limit) {
var x = axis[0], y = axis[1];
var data = $this[0].data;
if (data.right && x > limit) return "right";
if (data.left && x < limit * -1) return "left";
if (data.bottom && y > limit) return "bottom";
if (data.top && y < limit * -1) return "top";
},
hide: function(direction, $this) {
function getCss(direction) {
var css = {
opacity: 0.01
};
var interval = 50;
switch (direction) {
case "left":
css.left = -1 * interval + "vw";
break;
case "right":
css.left = interval + "vw";
break;
case "bottom":
css.top = interval + "vh";
break;
case "top":
css.top = -1 * interval + "vh";
break;
}
return css;
}
var self = $this[0];
var data = self.data;
if (self.isHide === true) {
return;
}
self.isHide = true;
$this.animate(getCss(direction), {
duration: 300,
easing: "swing",
start: data[direction],
complete: function() {
$this.remove();
}
});
}
}
function setEvent($target, data) {
var util = slideUtil;
var moveLimit = 50;
$(".slideable").mousedown(function(e) {
this.isMouseDown = true;
this.startAxis = [e.clientX, e.clientY];
})
$(".slideable").mousemove(function(e) {
if (this.isMouseDown) {
event.preventDefault()
var axis = [e.clientX, e.clientY];
var startAxis = this.startAxis;
var moveInterval = [axis[0] - startAxis[0], axis[1] - startAxis[1]]
util.moveObject($(this), moveInterval);
var hideDirection = util.isHideable($(this), moveInterval, moveLimit);
if (hideDirection) util.hide(hideDirection, $(this));
}
})
$(".slideable").mouseup(function(e) {
this.isMouseDown = false;
})
function getTouchEvent(e) {
return e.originalEvent.touches[0]
}
$(".slideable").on("touchstart", function(e) {
var touch = getTouchEvent(e);
this.isMouseDown = true;
this.startAxis = [touch.clientX, touch.clientY];
})
$(".slideable").on("touchmove", function(e) {
event.preventDefault()
if (this.isMouseDown) {
event.preventDefault()
var touch = getTouchEvent(e);
var axis = [touch.clientX, touch.clientY];
var startAxis = this.startAxis;
var moveInterval = [axis[0] - startAxis[0], axis[1] - startAxis[1]]
util.moveObject($(this), moveInterval);
var hideDirection = util.isHideable($(this), moveInterval, moveLimit);
if (hideDirection) util.hide(hideDirection, $(this));
}
})
$(".slideable").on("touchend", function(e) {
this.isMouseDown = false;
})
}
//슬라이드아이템의 방향키로 숫자 혹은 문자로 지정된 경우
//함수로 변환
function setExecutable(target, item){
forEach(item,function(value,direction){
new Promise(function(resolve, reject){
if(direction === "center"){
switch( typeof value ){
case "function":
resolve( value.bind(target)() );
break;
}
} else {
switch( typeof value ){
case "string": case "number":
resolve(function(){ execute(value); }.bind(target));
break;
}
}
}).then(function(result){
item[direction] = result;
})
})
}
var $target = $(".slideable.cloneable").clone().removeClass("cloneable");
$("body").prepend($target);
setExecutable($target[0], directionData);
initClassName($target, directionData);
initDOM($target, directionData);
setEvent($target, directionData);
}
// create는 다른 함수들에 의존하지 않음 //
var game;
function execute(number, argument) {
dispose(game, number, argument);
}
function dispose(slideableArray, start, argument) {
game = slideableArray;
var slideableItem = slideableArray[start];
switch (typeof slideableItem) {
case "function":
slideableItem(argument);
break;
case "object":
create(slideableItem);
break;
}
}
//모바일 전체화면으로 수정
var setFullScreen = (function(){
//window.scrollTo(0,1);
})();
return {
create: create,
execute: execute,
dispose: dispose
}
}}
!!!!!!!!!!!!!!!! 플러그인 정보 입력 구간 끝 아래는 만지지 마시오!!!!!!!!!!!!!!!!!
</div>{{#switch: {{{1|화면}}}
|dump =
|화면 = {{플러그인/preset/각주}}
<p<includeonly></includeonly>re class="script" data-name="{{#var:name}}"
data-create="{{#var:creat}}"
data-version="{{#var:version}}"
data-descript="{{#var:descript}}"
data-local="{{#var:local}}"
data-executable="{{#var:executable}}"
data-state="사용자:BANIP/플러그인/슬라이드">
{{#var:code}}
</pre>
|#default =
{{#ifeq:{{{2|틀}}}|틀|{{플러그인/알림|{{#var:name}}}}|}}
<span class="use-script" data-name="{{#var:name}}" data-creat="{{#var:creat}}" data-version="{{#var:version}}" data-executable="{{#var:executable}}"
data-descript="{{#var:descript}}" data-local="{{#var:local}}" data-state="사용자:BANIP/플러그인/슬라이드" data-link="{{fullurl: {{#rel2abs: {{{1}}} }} }}"></span>
}}
<div style="display:none">
요령 => 아래 변수들의 첫번째 인자들을 내용에 맞게 자르고 붙여넣어주세요
!!!!!!!!!!!!!!!! 플러그인 정보 입력 구간 윗부분은 만지지 마시오 절대로!!!!!!!!!!!!!!!!!
{{#vardefine:name|RankingSystem}}
{{#vardefine:creat|BANIP}}
{{#vardefine:version|1.1.0}}
{{#vardefine:descript|랭킹시스템 라이브러리}}
{{#vardefine:local|true}}
{{#vardefine:excutable|false}}
{{#vardefine:code|
// 이부부분에 코드 입력 //
<nowiki>
/**
* @param
{string} documentTitle 랭킹정보가 있는 문서의 제목.
{function} sortCallback 랭킹을 정렬할때 기준으로 사용하는 함수
{any} prev 랭킹 정렬 기준으로 사용할 왼쪽의 값
{any} next 랭킹 정렬 기준으로 사용할 오른쪽의 값
{object} api MediaWikiapi의 인스턴스, 없어도 됨.
@return {Object}
{function} get 랭킹정보를 object형태로 획득
{function} update 랭킹정보 업데이트
{object} updateInfo 업데이트할 사용자 정보
{function} updateCriteria 사용자정보의 업데이트 기준
@param {any} rankingScore 랭킹에서 사용중인 스코어
{any} thisScore 사용자 스코어
@return{bool} true가 반환되면 업데이트
{object} alternateKeys 랭킹에서 보여지는 대체 키
*/
return function(documentTitle, sortCallback, api) {
function forEach(object, callback) {
for (var key in object) {
var variable = object[key];
callback(variable, key);
}
}
function getRankingJSON(rankingDoc) {
if (!rankingDoc) return {};
var includeOnlyString = "includeonly"
var regexp = new RegExp("\<" + includeOnlyString + "\>(.*)\<\/" + includeOnlyString + "\>");
var stringRanking = regexp.exec(rankingDoc)[1];
return JSON.parse(stringRanking);
}
function updateDoc(rankingJSON, api, alternateKeys) {
//alternateKeys가 반영된 개개인의 랭킹정보 획득
function getOutputJSON(json) {
var result = {};
forEach(json, function(value, key) {
key = alternateKeys[key] || key;
result[key] = value;
})
return result;
}
//보여지는 형태의 랭킹정보 획득
function getOutputString(json) {
var name = json.name;
var result = "* '''" + name + "''' : ";
forEach(json, function(value, key) {
if (key === "name") return;
key = alternateKeys[key] || key;
result += key + ": " + value + ", ";
})
result += "\n"
return result
}
var stringRanking = JSON.stringify(rankingJSON);
var result = "<includ" + "eonly>" + stringRanking + "</inclu" + "deonly>\n";
result += "<onlyin" + "clude>\n";
var rankingList = Object.entries(rankingJSON).sort(function(prev,next){
return sortCallback(prev[1],next[1])
}).map(function(value){
return value[0]
});
rankingList.forEach(function(key) {
var json = rankingJSON[key];
var outputJSON = getOutputJSON(json);
result += getOutputString(outputJSON)
});
result += "</only" + "include>";
var reply = documentTitle.replace(new RegExp("\/.*"),"") + " 점수 갱신";
api.changeDocument(documentTitle, reply, result, true);
return result;
}
function updateUserScore(rankingJSON, thisScore, updateCriteria) {
updateCriteria = updateCriteria || function(rankingScore, thisScore) {
return rankingScore.score < thisScore.score;
}
var userName = thisScore.name;
var rankingScore = rankingJSON[userName];
if (!rankingScore || updateCriteria(rankingScore, thisScore)) {
rankingJSON[userName] = thisScore;
}
}
api = api || MediaWikiAPI();
var userName = mw.config.get("wgUserName");
var rankingDoc = api.getDocument(documentTitle);
var rankingJSON = getRankingJSON(rankingDoc);
var actions = {
get: function() {
return rankingJSON;
},
update: function(updateInfo, updateCriteria, alternateKeys) {
rankingJSON = actions.get();
updateUserScore(rankingJSON, updateInfo, updateCriteria);
updateDoc(rankingJSON, api, alternateKeys);
}
}
return actions;
}
</nowiki>
}}
!!!!!!!!!!!!!!!! 플러그인 정보 입력 구간 끝 아래는 만지지 마시오!!!!!!!!!!!!!!!!!
</div>{{#switch: {{{1|화면}}}
|dump =
|화면 = {{플러그인/preset/각주}}
<p<includeonly></includeonly>re class="script" data-name="{{#var:name}}"
data-create="{{#var:creat}}"
data-version="{{#var:version}}"
data-descript="{{#var:descript}}"
data-local="{{#var:local}}"
data-excutable="{{#var:excutable}}"
data-state="사용자:BANIP/플러그인/랭킹시스템">
{{#var:code}}
</pre>
|#default =
{{#ifeq:{{{2|틀}}}|틀|{{플러그인/알림|{{#var:name}}}}|}}
<span class="use-script" data-name="{{#var:name}}" data-creat="{{#var:creat}}" data-version="{{#var:version}}" data-excutable="{{#var:excutable}}"
data-descript="{{#var:descript}}" data-local="{{#var:local}}" data-state="사용자:BANIP/플러그인/랭킹시스템" data-link="{{fullurl: {{#rel2abs: {{{1}}} }} }}"></span>
}}
로딩중...
_(Square).svg){kind=small}