백괴슬라이드/플러그인/메인

/*
* PluginX 대응 uncyslide 코드
* 원작자: [[사:BANIP|BANIP]]
* 원 소스코드: [[백괴슬라이드/플러그인]]
* 버전 : 1.1.02
* RecentChange: 백괴게임 토론 문서 링크 -> 리버티게임 토론 문서 링크로 수정
* PluginX 이식자: [[사:Senouis|Senouis]]
*/
/*
* 백괴슬라이드와 같은 게임을 만드는 데 기반이 되는 플러그인입니다. 이 플러그인의 사용 예시는 백괴슬라이드/플러그인을 참고 해 주시기 바랍니다.
* 버전: 1.0.21
* 이 플러그인은 GNU Lesser GPL(LGPL) 2.1라이센스를 채택하고 있습니다. 이 플러그인을 사용한 문서 또는 게임을 작성 시 다른 사용자가 볼 수 있는곳에 저작자 표기를 해야 합니다.
* 원작자: [[사:BANIP|BANIP]]
* 원 소스 코드: [[사용자:BANIP/플러그인/슬라이드]]
* [[틀:플러그인X]] 이식: [[사:Senouis|Senouis]]
*/
function plugin_Slideable(){
    //모든 키 순회
    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
	};
}

function plugin_uncyslide() {
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://liberty.banipest.com/index.php/%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, {});
}
$(plugin_uncyslide);