사용자:BANIP/uncymaze/common.js: 두 판 사이의 차이
imported>BANIP 잔글 (cors 이슈 해결) |
imported>BANIP 잔글 (글자 크기 조절) |
||
1번째 줄: | 1번째 줄: | ||
$(".start").on("click",function(){ | $(".start").on("click",function(){ | ||
$(".start").off("click") | $(".start").off("click") | ||
var rootcss = `<style>#bodyContent{ font-size: 1.8em; }</style>` | |||
var html = `<link href="https://fonts.googleapis.com/css?family=Nanum+Pen+Script:400" rel="stylesheet"><div class="tooltip">방향키/esc/enter로 조작해주세요</div><div class="main flex-center"> <div class="opening hide"> <div class="title">제작</div><div class="descript">BANIP</div></div><div class="lobby hide"> <div class="title">UNCYMAZE</div><ul class="menu main"> <li class="start" data-target="start">게임시작</li><li class="howto" data-target="howto">게임방법</li><li class="ranking" data-target="ranking">랭킹</li><li class="exit" data-target="exit">게임종료</li></ul> <ul class="menu difficulty hide"> <li data-target="0">.쉬움</li><li data-target="1">.보통</li><li data-target="2">.어렵게</li></ul> <div class="popup hide"> <div class="container"> <div class="howto hide">미구현된 게임방법입니다.</div><div class="ranking hide">미구현된 랭킹입니다.</div></div><div class="left"><img src="https://static.miraheze.org/libertygamewiki/8/8c/Uncymaze_previous.png"/></div></div></div></div>`; | var html = `<link href="https://fonts.googleapis.com/css?family=Nanum+Pen+Script:400" rel="stylesheet"><div class="tooltip">방향키/esc/enter로 조작해주세요</div><div class="main flex-center"> <div class="opening hide"> <div class="title">제작</div><div class="descript">BANIP</div></div><div class="lobby hide"> <div class="title">UNCYMAZE</div><ul class="menu main"> <li class="start" data-target="start">게임시작</li><li class="howto" data-target="howto">게임방법</li><li class="ranking" data-target="ranking">랭킹</li><li class="exit" data-target="exit">게임종료</li></ul> <ul class="menu difficulty hide"> <li data-target="0">.쉬움</li><li data-target="1">.보통</li><li data-target="2">.어렵게</li></ul> <div class="popup hide"> <div class="container"> <div class="howto hide">미구현된 게임방법입니다.</div><div class="ranking hide">미구현된 랭킹입니다.</div></div><div class="left"><img src="https://static.miraheze.org/libertygamewiki/8/8c/Uncymaze_previous.png"/></div></div></div></div>`; | ||
var css = `#bodyContent > *{padding:0;margin:0;font-family:'Nanum Pen Script';font-size:1.22em}.main,body,html{width:100%;height:100%}li,ul{list-style:none}.hide{display:none}.flex-center{display:flex;align-items:center;justify-content:center}.opening{text-align:center;line-height:1.2em}.title{text-align:center;margin-bottom:2em;font-size:2em}.menu li{transition:transform .2s,color .2s;transform:translateY(0);display:inline-block;padding:2vw;color:#aaa}.menu li.active{transform:translateY(-20px);color:#000}.menu li .square{display:inline-block;margin:0 .3em;font-size:.5em;font-style:normal;vertical-align:middle}.menu li.active .square{animation:spin 1.5s infinite linear}.popup{position:fixed;top:10%;left:10%;border-radius:1em;border:2px #aaa solid;width:80vw;height:80vh;background:#fff;opacity:.9;font-size:.8em}.popup .container{width:100%;height:70vh;display:flex;justify-content:center;align-items:center}.popup .left{position:absolute;left:.2em;bottom:.2em;opacity:.6;transition:opacity .2s}.popup .left:hover{opacity:1}.popup .left img{width:1em;cursor:pointer}@keyframes spin{100%{transform:rotate(360deg)}}`; | var css = `.tooltip{font-size:0.8em;}#bodyContent > *{padding:0;margin:0;font-family:'Nanum Pen Script';font-size:1.22em}.main,body,html{width:100%;height:100%}li,ul{list-style:none}.hide{display:none}.flex-center{display:flex;align-items:center;justify-content:center}.opening{text-align:center;line-height:1.2em}.title{text-align:center;margin-bottom:2em;font-size:2em}.menu li{transition:transform .2s,color .2s;transform:translateY(0);display:inline-block;padding:2vw;color:#aaa}.menu li.active{transform:translateY(-20px);color:#000}.menu li .square{display:inline-block;margin:0 .3em;font-size:.5em;font-style:normal;vertical-align:middle}.menu li.active .square{animation:spin 1.5s infinite linear}.popup{position:fixed;top:10%;left:10%;border-radius:1em;border:2px #aaa solid;width:80vw;height:80vh;background:#fff;opacity:.9;font-size:.8em}.popup .container{width:100%;height:70vh;display:flex;justify-content:center;align-items:center}.popup .left{position:absolute;left:.2em;bottom:.2em;opacity:.6;transition:opacity .2s}.popup .left:hover{opacity:1}.popup .left img{width:1em;cursor:pointer}@keyframes spin{100%{transform:rotate(360deg)}}`; | ||
$("#bodyContent > *").fadeOut(); | $("#bodyContent > *").fadeOut(); | ||
setTimeout(function(){ $.getScript("https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"); },500); | setTimeout(function(){ $.getScript("https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"); },500); | ||
setTimeout(function(){ $.getScript("https://cdn.jsdelivr.net/gh/byongshintv/uncymaze@latest/uncymaze.min.js"); },1000); | setTimeout(function(){ $.getScript("https://cdn.jsdelivr.net/gh/byongshintv/uncymaze@latest/uncymaze.min.js"); },1000); | ||
setTimeout(function(){ $("#bodyContent").html(html+"<style>"+css+"</style>"); init(); },1500); | setTimeout(function(){ $("#bodyContent").html(html+"<style>"+css+"</style>"+rootcss); init(); },1500); | ||
}); | }); |
2020년 12월 24일 (목) 01:09 기준 최신판
$(".start").on("click",function(){
$(".start").off("click")
var rootcss = `<style>#bodyContent{ font-size: 1.8em; }</style>`
var html = `<link href="https://fonts.googleapis.com/css?family=Nanum+Pen+Script:400" rel="stylesheet"><div class="tooltip">방향키/esc/enter로 조작해주세요</div><div class="main flex-center"> <div class="opening hide"> <div class="title">제작</div><div class="descript">BANIP</div></div><div class="lobby hide"> <div class="title">UNCYMAZE</div><ul class="menu main"> <li class="start" data-target="start">게임시작</li><li class="howto" data-target="howto">게임방법</li><li class="ranking" data-target="ranking">랭킹</li><li class="exit" data-target="exit">게임종료</li></ul> <ul class="menu difficulty hide"> <li data-target="0">.쉬움</li><li data-target="1">.보통</li><li data-target="2">.어렵게</li></ul> <div class="popup hide"> <div class="container"> <div class="howto hide">미구현된 게임방법입니다.</div><div class="ranking hide">미구현된 랭킹입니다.</div></div><div class="left"><img src="https://static.miraheze.org/libertygamewiki/8/8c/Uncymaze_previous.png"/></div></div></div></div>`;
var css = `.tooltip{font-size:0.8em;}#bodyContent > *{padding:0;margin:0;font-family:'Nanum Pen Script';font-size:1.22em}.main,body,html{width:100%;height:100%}li,ul{list-style:none}.hide{display:none}.flex-center{display:flex;align-items:center;justify-content:center}.opening{text-align:center;line-height:1.2em}.title{text-align:center;margin-bottom:2em;font-size:2em}.menu li{transition:transform .2s,color .2s;transform:translateY(0);display:inline-block;padding:2vw;color:#aaa}.menu li.active{transform:translateY(-20px);color:#000}.menu li .square{display:inline-block;margin:0 .3em;font-size:.5em;font-style:normal;vertical-align:middle}.menu li.active .square{animation:spin 1.5s infinite linear}.popup{position:fixed;top:10%;left:10%;border-radius:1em;border:2px #aaa solid;width:80vw;height:80vh;background:#fff;opacity:.9;font-size:.8em}.popup .container{width:100%;height:70vh;display:flex;justify-content:center;align-items:center}.popup .left{position:absolute;left:.2em;bottom:.2em;opacity:.6;transition:opacity .2s}.popup .left:hover{opacity:1}.popup .left img{width:1em;cursor:pointer}@keyframes spin{100%{transform:rotate(360deg)}}`;
$("#bodyContent > *").fadeOut();
setTimeout(function(){ $.getScript("https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"); },500);
setTimeout(function(){ $.getScript("https://cdn.jsdelivr.net/gh/byongshintv/uncymaze@latest/uncymaze.min.js"); },1000);
setTimeout(function(){ $("#bodyContent").html(html+"<style>"+css+"</style>"+rootcss); init(); },1500);
});