Reflection/plugin

var api = MediaWikiAPI();

var gameArea = document.getElementById('area');
var cssText = '<canvas width="512" height="512" id="canvas"></canvas>';
var cvs;
var ctx;

var jsonDoc = '사용자:'+mw.config.get("wgUserName")+'/data/reflection.json';
var jsonData = JSON.parse(api.getDocument(jsonDoc));

var stage = jsonData['stage'];
var clear = jsonData['clear'];
var gameOvers = jsonData['gameOvers'];

var showText = function(text, x, y, space, inv){
	if(text.length == 0) return;
	ctx.fillText(text[0], x, y);
    setTimeout(showText, inv, text.substring(1, text.length), x+space, y, space, inv);
};

var canvasClear = function(){
    ctx.clearRect(0, 0, 512, 512);
	ctx.fillStyle = "black";
	ctx.fillRect(0, 0, 512, 512);
};

var bgMusic = new Audio();

// 인트로 함수 
var introManager = function(){
	var showIntro = function(v){
		var location = new Array(10);
		var visibility = new Array(10);
		var str = "reflection";
		var i;
		for(i=0; i<10; i++){
			location[i] = (v>i*10 ? (v>i*10+10 ? 10 : v-i*10) : 0) * 5 * 512 / 600 + i*51.2 - 12.8;
			visibility[i] = (v>i*10 ? (v>i*10+10 ? 10 : v-i*10) : 0);
		}
		
		if(v>130){
			showIntro2(0);
			return;
		}
		
		ctx.clearRect(0, 0, 600, 600);
		ctx.fillStyle = "black";
		ctx.fillRect(0, 0, 600, 600);
		ctx.fillStyle = "white";
		ctx.font = "italic 40px 'Trebuchet MS'";
		ctx.textAlign="center"; 
		
		for(i=0; i<10; i++){
			var tmp = visibility[i] * 25.6;
			ctx.fillStyle = "rgb(" + tmp + ", " + tmp + ", " + tmp + ")";
			ctx.fillText(str[i], location[i], 256);
		}
		
		setTimeout(showIntro, 25, v+1);
	};
	
	var showIntro2 = function(v){
		var location = new Array(10);
		var str = "reflection";
		var i;
		
		if(v>40) return;
		
		for(i=0; i<10; i++){
			location[i] = i*51.2 + 45 + (256 - (i*51.2+38.4)) / 65 * v;
		}
		
		ctx.clearRect(0, 0, 600, 600);
		ctx.fillStyle = "black";
		ctx.fillRect(0, 0, 600, 600);
		ctx.fillStyle = "white";
		ctx.font = "italic 40px 'Trebuchet MS'";
		ctx.textAlign="center"; 
		
		for(i=0; i<10; i++){
			ctx.fillText(str[i], location[i], 256);
		}
		
		setTimeout(showIntro2, 25, v+1);
	};
	
	var intro = function(){
		$('#area').html(cssText);
		
		cvs = document.getElementById('canvas');
		ctx = cvs.getContext('2d');
		
		ctx.fillStyle = "black";
		ctx.fillRect(0, 0, 600, 600);
		
		showIntro(0);
		
		setTimeout(function(){
			if(stage === 0 || stage === null || stage === undefined){
				main();
				return;
			}
			$('#area').html('<div id="continue" style="cursor:pointer;">이어하기</div><div id="reset" style="cursor:pointer">리셋</div>');
			
			$('#continue').on('click', main);
			$('#reset').on('click', function(){
				stage = 0;
				main();
			});
			// bgMusic.stop();
			main();
		}, 7000);
	};
	
	intro();
};


// 데이터 박스


// 모든 것의 시작

var main = function(){
	switch(stage){
		case 0:
		case null:
		case undefined:
    		canvasClear();
      
			bgMusic.src = "https://vocaroo.com/media_command.php?media=s0xMMoKH583N&command=download_mp3";
			bgMusic.play();
      
			bgMusic.oncanplaythrough = function(){
				ctx.fillStyle = "white";
				ctx.font = "normal 20px 맑은 고딕";
				showText('"그 얘기 들었어?"', 100, 100, 20, 100);
				setTimeout(function(){
					showText('"걔 전학 갔대."', 100, 200, 20, 100);
					setTimeout(function(){
						showText('"아, 걔 재미있었는데."', 100, 300, 20, 100);
						setTimeout(function(){
							showText('"어, 조금 아쉽네."', 100, 400, 20, 100);
							setTimeout(function(){
								stage = 1;
								main();
								return;
							}, 4000);
						}, 4000);
					}, 4000);
				}, 4000);
			};
			break;
		case 1:
			canvasClear();
			ctx.fillStyle = "white";
			showText("어떤 곳에든,", 100, 100, 20, 100);
			setTimeout(function(){
				showText('약자는 있기 마련이다.', 100, 200, 20, 100);
				setTimeout(function(){
					showText("사회에 적응하지 못한 자들은,", 100, 300, 20, 100);
					setTimeout(function(){
						showText('그곳을 떠나야 한다.', 100, 400, 20, 100);
						setTimeout(function(){
							stage = 2;
							main();
							return;
						}, 4000);
					}, 4000);
				}, 4000);
			}, 4000);
			break;
		case 2:
			canvasClear();
			ctx.fillStyle = "white";
			ctx.font = "normal 20px 맑은 고딕";
			showText('그 아이가 나타났을 때,', 100, 100, 20, 100);
			setTimeout(function(){
				showText('아무도 신경쓰지 않았다.', 100, 200, 20, 100);
				setTimeout(function(){
					showText('어느 학교에나 있는', 100, 300, 20, 100);
					setTimeout(function(){
						showText('그런 아이였기 때문이다.', 100, 400, 20, 100);
						setTimeout(function(){
							stage = 3;
							main();
							return;
						}, 4000);
					}, 4000);
				}, 4000);
			}, 4000);
			break;
		case 3:
			canvasClear();
			ctx.fillStyle = "white";
			ctx.font = "normal 20px 맑은 고딕";
			showText('그러나 그들은,', 100, 100, 20, 100);
			setTimeout(function(){
				showText('전혀 알지 못했다.', 100, 200, 20, 100);
				setTimeout(function(){
					showText('그런 아이들 사이에서', 100, 300, 20, 100);
					setTimeout(function(){
						showText('어떤 일이 일어나고 있는지...', 100, 400, 20, 100);
						setTimeout(function(){
							stage = 4;
							main();
							return;
						}, 8000);
					}, 4000);
				}, 4000);
			}, 4000);
			break;
		case 4:
			canvasClear();
			
			
			
			break;
		default: // 에러
			$('#gameArea').html('Error?');
	}
};

$(introManager());

// 모든 것의 끝