// 対戦！英単語用ＪＳ


var userName, opponentName;
var player1HP = 100, player2HP = 100, guageLength = 100;
var gs;  // ゲーム画面
var mode, count;
var socket;
var gameResultKind;  // ゲームの結果

//接続先の指定
var url = "eword.jaga.biz:30001";

// 問題
var questionSrc;
var questionAry;
var nowNo, nowQuestion, nowJapanese, nowAnswer;
var nowChoiceAry;
var selectAnswer;

$(function(){
	
	//接続
	socket = io.connect(url);
	
	// 初期設定
	initGame();
	
	socket.on("sendMessageToClient", function (data) {
	    console.log(data.value);
	});
	
	// 対戦相手待ち
	socket.on("wait", function (data) {
		
		$.ajax({
			type: "POST",
			url: "/index/doGetPractice/",
			data: {mode: "ajax"},
			success: function(data2){
				tmp = $.parseJSON(data2);
				questionAry = tmp.questions.split('<!>');
				
				// 待ち画面へ
				setMode(11);
			}
		});
	});
	
	// 対戦準備完了
	socket.on("prepareMatch", function(data){
		
		// 相手の名前を取得
		opponentName = data.opponentName;
		
		// 対戦者が表れました画面へ
		setMode(21);
	});
	
	// 試合開始
	socket.on("startFight", function(data){
		// 問題を取得
		questionAry = data.questions.split('<!>');
		
		// ゲーム画面描画
		setMode(32);
	});
	
	// 回答正否
	socket.on("resultAnswer", function(data){
		var result = data.result;
		var answer = data.answer;
		
		if(mode == 41){
			// すでに終わっているとき
			
			return;
		}
		
		if(result == 1){
			// 正解のとき
			
			$("#resultCorrect").text("正解！");
			
			sendCollect(nowQuestion, nowChoiceAry[answer - 1]);
		}else{
			if(selectAnswer != 5){
				// 「分からない」じゃないとき
				
				$("#resultIncorrect").text("不正解");
			}
			
			sendWrongList(nowQuestion, nowChoiceAry[answer - 1]);
		}
		$(".choice" + answer).addClass("answer");
		
		// 1秒後にメッセージ消去
		setTimeout(function(){
			if(mode == 41){
				// すでに終わっているとき
				
				return;
			}
			
			$("#resultCorrect").text("");
			$("#resultIncorrect").text("");
			
			// 次の問題へ
			if(nowNo < 19 && mode != 41 && mode != 42 && mode != 43){
				nowNo++;
				setQuestion();
			}
			
			// ゲーム中へ
			setMode(33);
			
		}, 1000);
	});
	
	// 現在の状況
	socket.on("nowSituation", function(data){
		player1HP = data.myHp;
		player2HP = data.enemyHp;
		player1No = data.myNo;
		if(player1No > 10){
			player1No = 10;
		}
		player2No = data.enemyNo;
		if(player2No > 10){
			player2No = 10;
		}
	});
	
	// ゲーム終了のとき
	socket.on("gameResult", function(data){
		gameResultKind = data.kind;
		setMode(41);
	});
	
	// 切断されたとき
	socket.on("runAway", function(data){
		gameResultKind = "runAway";
		setMode(41);
	});
	
	// キーボードイベント取得
	$("body").keypress(function(e){
		if(mode == 33){
			// ゲーム中のとき
			
			selectAnswer = String.fromCharCode(e.which);
			$(".choice" + selectAnswer).addClass("choiced");
			
			checkAnswer(selectAnswer);
			
			return false;
		}else if(mode == 11){
			// 待ち時間の練習のとき
			
			selectAnswer = String.fromCharCode(e.which);
			$(".choice" + selectAnswer).addClass("choiced");
			
			checkAnswerPractice(selectAnswer);
		}
	});
	
	// マウスクリックイベント取得
	gs.click(function(e){
		if(mode == 41){
			// ゲーム終了時のとき
			
			$.ajax({
				type: "POST",
				url: "/index/doGetPractice/",
				data: {mode: "ajax"},
				success: function(data2){
					tmp = $.parseJSON(data2);
					questionAry = tmp.questions.split('<!>');
					
					// 待ち画面へ
					setMode(11);
				}
			});
		}
	});
	
	$(document).on("mouseover", "#choices li", function(){
		$(this).addClass("choiced");
	});
	
	$(document).on("mouseout", "#choices li", function(){
		$(this).removeClass("choiced");
	});
	
	$(document).on("click", "#choices li", function(){
		if(mode == 33){
			// ゲーム中のとき
			
			selectAnswer = $(this).data("no");
			checkAnswer(selectAnswer);
		}else if(mode == 11){
			// 練習中のとき
			
			selectAnswer = $(this).data("no");
			checkAnswerPractice(selectAnswer);
		}
	});
	
	mainRoutine();
});

function mainRoutine(){
	switch(mode){
		case 1: // タイトル画面
			break;
			
		case 21: // 対戦相手が現れました画面
			if(count < 50 && count % 10 == 0){
				$("#countDown").text("試合開始" + (5 - (count / 10)) + "秒前");
			}
			
			if(count == 50){
				$("#countDown").text("試合開始！");
				
				// 準備OK!
				setMode(31);
			}
			
			break;
			
		case 33: // ゲーム中
		case 34: // 回答待ち
			updateGameScreen();
			break;
	}
	
	if(count % 50 == 0){
		// 5秒に一回はサーバーにpingを飛ばす
		
		socket.emit("ping", {});
	}
	
	count++;
	
	setTimeout(mainRoutine, 100);
}

// 初期設定
function initGame(){
	gs = $("#gameScreen");
	
	setMode(1);
}

// モードごとの初期設定
function setMode(pMode){
	mode = pMode;
	count = 0;
	
	switch(mode){
		case 1: // タイトル画面
			
			// タイトル描画
			drawTitle();
			
			// スタートボタンのイベント
			gs.on("click", "#btStart", function(){
				if($("#footer-ad")){
					$("#footer-ad").hide();
				}
				startGame();
			});
			
			setMode(2);
			
			break;
			
		case 11:  // 対戦相手待ち画面
			
			// 待ち画面描画
			drawWait();
			
			nowNo = 0;
			setQuestionPractice();
			
			// 2秒後に待ち受け完了状態を通知
			setTimeout(function(){
				socket.emit("readyForMatching", {});
				
			}, 2000);
			
			break;
			
		case 21:  // 対戦者が現れました画面
			
			// 現れました画面描画
			drawAppeared();
			
			break;
		
		case 31:  // 準備OK!
			socket.emit("readyForFight", {});
			
			break;
		
		case 32:  // ゲーム画面描画
			
			// 初期値をセット
			player1HP = 100;
			player2HP = 100;
			player1No = 1;
			player2No = 1;
			
			// ゲーム画面
			drawGameScreen();
			
			// 問題表示
			nowNo = 0;
			setQuestion();
			
			// ゲーム中
			setMode(33);
			
			break;
		
		case 33:  // ゲーム中
			break;
		
		case 34:  // 回答待ち
			break;
		
		case 41:  // 勝利
			drawGameResult();
			break;
	}
}

// タイトル画面描画
function drawTitle(){
	gs.children().remove();
	
	gs.append('<p id="titleString">' + gameTitle + '</p>');
	gs.append('\
		<div id="nameInputBlock" class="boxCentering">\
			<div>\
				<div>\
					<input type="text" id="txtName" class="textNormal" placeholder="input your name"/>\
				</div>\
				<div>\
					<p id="btStart" class="buttonNormal">GAME START</p>\
				</div>\
			</div>\
		</div>\
	');
	
	$("#txtName").val($.cookie("userName"));
}

// 待ち画面描画
function drawWait(){
	gs.children().remove();
	
	gs.append('<p class="topMessage">対戦相手を待っています</p>');
	//gs.append('<p id="waitImage"><img src="/img/eword/wait.gif" /></p>');
	gs.append('<p id="question"></p>');
	gs.append('<p id="answer"></p>');
	gs.append('<ul id="choices"></ul>');
	gs.append('<p id="resultCorrect"></p>');
	gs.append('<p id="resultIncorrect"></p>');
}

// 対戦者が現れました画面描画
function drawAppeared(){
	gs.children().remove();
	
	gs.append('<p class="mainMessage">対戦相手が現れました</p>');
	gs.append('<p id="countDown">試合開始５秒前</p>');
}

// ゲーム画面
function drawGameScreen(){
	gs.children().remove();
	
	gs.append('<div id="guage"><div class="guageBorder clearfix"><div id="guage1"></div></div><div class="guageBorder"><div id="guage2"></div></div></div>');
	gs.append('<p id="player1">' + userName + '</p>');
	gs.append('<p id="player1No">1問目</p>');
	gs.append('<p id="player2">' + opponentName + '</p>');
	gs.append('<p id="player2No">1問目</p>');
	gs.append('<p id="question"></p>');
	gs.append('<p id="answer"></p>');
	gs.append('<ul id="choices"></ul>');
	gs.append('<p id="resultCorrect"></p>');
	gs.append('<p id="resultIncorrect"></p>');
}

// 勝利画面
function drawGameResult(){
	gs.append('<p id="gameResult"></p>');
	gs.append('<p id="gameResultSub"></p>');
	
	$("#question").text("");
	$("#japanese").text("");
	$("#resultCorrect").text("");
	$("#resultIncorrect").text("");
	$("#choices").html("");
	
	switch(gameResultKind){
		case "win":
			$("#gameResult").text("You Win!");
			break;
			
		case "lose":
			$("#gameResult").text("You Lose...");
			break;
			
		case "draw":
			$("#gameResult").text("Draw");
			break;
			
		case "runAway":
			$("#gameResult").append("<p>相手の回線が切断されました</p>");
			break;
	}
	
	$("#gameResultSub").text("click to new game");
}

// 問題の表示
function setQuestion(){
	var tmpAry = questionAry[nowNo].split(':');
	var markAry = {0:"①", 1:"②", 2:"③", 3:"④", 4:"⑤"};
	nowQuestion = tmpAry[0];
	nowChoiceAry = tmpAry[1].split('<,>');
	nowAnswer = tmpAry[2];
	
	$("#question").html(nowQuestion);
	$("#answer").html("");
	
	$("#choices").html('');
	for(var i = 1; i <= nowChoiceAry.length; i++){
		$("#choices").append("<li class=\"choice" + i + "\" data-no=\"" + i + "\"><span class=\"mark\">" + markAry[i - 1] + "</span>" + nowChoiceAry[i - 1] + "</li>");
	}
}

// ゲーム画面アップデート
function updateGameScreen(){
	$("#guage1").css('width', guageLength * (player1HP / 100) + "%");
	$("#guage2").css('width', guageLength * (player2HP / 100) + "%");
	$("#player1No").text(player1No + "問目");
	$("#player2No").text(player2No + "問目");
}

// クリック時の処理
function mouseClick(){
	console.log(count);
}

// ゲーム開始へ
function startGame(){
	if($("#txtName").val() == ""){
		$().toastmessage('showToast', {type:'error', text:'名前を入力してください',position : 'middle-center'});
		
		$("#txtName").addClass("alert");
	}else{
		userName = $("#txtName").val();
		$.cookie("userName", userName, { expires: 30});
		socket.emit("startGame", {userId:userId, userName:userName});
	}
}


// ■■■ 以後、練習モード用 ■■■
function setQuestionPractice(){
	var tmpAry = questionAry[nowNo].split(':');
	var markAry = {0:"①", 1:"②", 2:"③", 3:"④", 4:"⑤"};
	nowQuestion = tmpAry[0];
	nowChoiceAry = tmpAry[1].split('<,>');
	nowAnswer = tmpAry[2];
	
	$("#question").html(nowQuestion);
	$("#answer").html("");
	
	$("#choices").html('');
	for(var i = 1; i <= nowChoiceAry.length; i++){
		$("#choices").append("<li class=\"choice" + i + "\" data-no=\"" + i + "\"><span class=\"mark\">" + markAry[i - 1] + "</span>" + nowChoiceAry[i - 1] + "</li>");
	}
}

// 正解したことをサーバーに送信
function sendCollect(english, japanese){
	$.ajax({
		type: "POST",
		url: "/index/doRegisterCollect/",
		data: {
			mode: "ajax", 
			user_id:userId,
			english:english, 
			japanese:japanese
		},
		success: function(result){
		}
	});
}

// 間違えた問題をサーバーに送信
function sendWrongList(english, japanese){
	$.ajax({
		type: "POST",
		url: "/index/doRegisterWrong/",
		data: {
			mode: "ajax", 
			user_id:userId, 
			english:english, 
			japanese:japanese
		},
		success: function(result){
		}
	});
}

// 回答のチェック
function checkAnswer(answer){
	socket.emit("checkAnswer", {no:nowNo, answer:answer});
	
	// 回答待ちへ
	setMode(34);
}

// 回答のチェック
function checkAnswerPractice(answer){
	if(answer == nowAnswer){
		// 正解のとき
		
		$("#resultCorrect").text("正解！");
		
		sendCollect(nowQuestion, nowChoiceAry[nowAnswer - 1]);
	}else{
		if(selectAnswer != 5){
			// 「分からない」じゃないとき
			
			$("#resultIncorrect").text("不正解");
		}
		
		sendWrongList(nowQuestion, nowChoiceAry[nowAnswer - 1]);
	}
	$(".choice" + nowAnswer).addClass("answer");
	
	// 1秒後にメッセージ消去
	setTimeout(function(){
		$("#resultCorrect").text("");
		$("#resultIncorrect").text("");
		
		// 次の問題へ
		if(nowNo < 100){
			nowNo++;
			setQuestionPractice();
		}
		
	}, 1000);
}