「javascript/クエスト情報変換」の編集履歴（バックアップ）一覧に戻る

javascript/クエスト情報変換 - (2017/09/24 (日) 22:12:56) のソース

#js{{{{{
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
// クエストクリアまでは最大5回
var maxQ = 5;

$(document).ready(function(){
	for(var num=1; num<=maxQ; num++){
		apQuest(num);
	}
});
function hyouji(){
	var text = '';
	
	// 色指定
	var color_design = document.forms['form0'].elements['design'].value;
	if(color_design == '1'){
		var color_b = '#e6e6fa';	// 強調色
		var color_h = '#f5fffa';	// 背景色
		var color_t = '#17184b';	// タイトル
	}
	else if(color_design == '2'){
		var color_b = '#bee0c2';	// 強調色
		var color_h = '#f5fffa';	// 背景色
		var color_t = '#004d25';	// タイトル
	}
	else if(color_design == '3'){
		var color_b = '#fddea5';	// 強調色
		var color_h = '#f5fffa';	// 背景色
		var color_t = '#d3381c';	// タイトル
	}
	// Q_head部分 ごり押し
	text += '|BGCOLOR(' + color_h + '):CENTER:40|BGCOLOR(' + color_h + '):CENTER:180|BGCOLOR(' + color_h + '):CENTER:180|BGCOLOR(' + color_h + '):CENTER:180|c\n';
	text += '|>|>|>|BGCOLOR(' + color_t + '):COLOR(white):' + document.forms['form1'].elements['T_name'].value + '|\n';
	text += '|AP' + document.forms['form1'].elements['T_ap'].value;
	text += '|>|' + document.forms['form1'].elements['T_pl'].value;
	text += '|推奨Lv.' + document.forms['form1'].elements['T_lv'].value + '|\n';
	text += '|~|絆P : ' + str2num(document.forms['form1'].elements['T_kz'].value);
	text += '|EXP : ' + str2num(document.forms['form1'].elements['T_xp'].value);
	text += '|QP : ' + str2num(document.forms['form1'].elements['T_qp'].value) + '|\n';
	text += '|~|>|>|報酬 : ' + document.forms['form1'].elements['T_housyu'].value + '|\n'
	// Q_num部分
	for(var i=1; i<=maxQ; i++){
		if(i==1){var check = "true";}
		else	{var check = document.forms['form1'].elements['c'+i].checked;}
		if(check){
			text += '|>|BGCOLOR(' + color_b + '):' + document.forms['form1'].elements['quest_num'].value + '-' + i + '|>|';
			text += 'BGCOLOR(' + color_b + '):' + document.forms['form1'].elements['quest_class'+i].value + '|\n';
			var numB = document.forms['form1'].elements['b'+i].value;
			for(var j=1; j<=numB; j++){
				text += '|' + j + '/' + numB + '|';
				for(var k=1; k<=3; k++){
					var enemy = '';
					var inputNum = String(i)+String(j)+String(k);
					if(document.forms['form1'].elements[inputNum+'name'].value != ""){
						enemy += document.forms['form1'].elements[inputNum+'name'].value + '&br()';
						enemy += 'Lv' + document.forms['form1'].elements[inputNum+'lv'].value;
						enemy += '(' + document.forms['form1'].elements[inputNum+'class'].value + ')';
						// カンマ区切り
						var hp = document.forms['form1'].elements[inputNum+'hp'].value;
						enemy += 'HP' + String(hp).replace(/(\d)(?=(\d{3})+$)/g , '$1,');
					}
					text += enemy + '|';
				}
				text += '\n';
			}
		}
		else{break;}
	}
	document.forms['form0'].elements['out'].value = text;
}

// 数字を文字列(カンマ区切り)に変換
function str2num(str){
	return String(str).replace(/(\d)(?=(\d{3})+$)/g , '$1,');
}

// クエスト1回分（#Q_1,2,3,4,5）を作成
function apQuest(num){
	// 情報（背景色が濃い部分）
	var headTr = $('<tr>').css({'background-color':'#e6e6fa', 'text-align':'center'});
	// 情報>>回数
	var headTd = $('<td>').attr({colSpan:'2'});
	if(num == 1){headTd.append($('<input>').attr({type:'text', name:'quest_num'}).css({width:'5em'}).val('')).append('-');}
	if(num >= 2){headTd.append($('<input>').attr({type:'checkbox', name:'c'+num}).click(function(){questCheck(this.checked, num);}));}
	var optionNum = optionNumMake(5);
	headTd.append(num+' Battle').append(
		$(optionNum).attr({name:'b'+num}).css({width:'3em'}).change(function(){battleCheck(num, this.value);})
	);
	headTr.append(headTd);
	// 情報>>クラス情報
	headTd = $('<td>').attr({colSpan:'2'});
	headTd.append('クラス構成').append(
		$('<input>').attr({type:'text', name:'quest_class'+num}).css({width:'15em'}).val('')
	);
	headTr.append(headTd);
	$('#Q_' + num).append(headTr);
	
	// バトル情報（背景色が普通な部分）
	var td = '<td style="background-color:#f5fffa; text-align:center;">';
	var maxB = 5;
	
	for(var nowB=1; nowB<=maxB; nowB++){
		var tr = $('<tr class="battle b' + nowB + '">');
		// Battle数
		tr.append($(td).html(nowB));
		// ひと枠
		var nakami = '';
		for(var i=1; i<=3; i++){
			// クラスだけ別処理
			var selectC = '';
			selectC += '<select style="width:4em;" name="' + num + nowB + i + 'class">';
			var optionC = ['剣', '弓', '槍', '騎', '術', '殺', '狂', '他'];
			$.each(optionC, function(j, val){
				selectC += '<option value="' + val + '">' + val + '</option>';
			});
			selectC += '</select>';
			// 表示
			nakami  = '<input type="text" style="width:12em;" name="' + num + nowB + i + 'name" value=""><br/>';
			nakami += 'Lv<input type="number" style="width:3em;" name="' + num + nowB + i + 'lv" value="">';
			nakami += '(' + selectC + ')';
			nakami += 'HP<input type="number" style="width:6em;" name="' + num + nowB + i + 'hp" value="">';
			tr.append($(td).html(nakami));
		}
		$('#Q_' + num).append(tr);
	}
	// 初期状態で非表示
	$('#Q_' + num + ' tr.b4').css('display', 'none');
	$('#Q_' + num + ' tr.b5').css('display', 'none');
	if(num != 1){$('#Q_' + num + ' tr.battle').css('display', 'none');}
}
// option 作成
function optionNumMake(num){
	sel = $('<select>');
	for(var i=1; i<=num; i++){sel.append($('<option>').val(i).text(i));}
	
	return sel;
}
// チェックされたらクエストを表示
function questCheck(ischecked, num){
	var value = document.forms['form1'].elements['b'+num].value;
	if(ischecked){battleCheck(num ,value);}
	else{battleCheck(num ,0);}
}
// バトル回数に合わせて表示
function battleCheck(num, value){
	// チェックの有無を確認
	if(num == 1){var ischecked = "true";}
	else{var ischecked = document.forms['form1'].elements['c'+num].checked;}
	// チェック無しなら 表示数を0行に
	if(!ischecked){value = 0;}
	// 表示数に合わせてCSSを変更
	for(var i=1; i<=5; i++){
		if(i > value)	{$('#Q_' + num + ' tr.b' + i).css('display', 'none');}
		else			{$('#Q_' + num + ' tr.b' + i).css('display', 'table-row');}
	}
}
</script>
}}}}}
#html2{
<div>
<form name="form0" id="form0">
<textarea name="out" cols="150" rows="20">ここにwiki編集用の文字列が表示されます</textarea></br>
<select style="width:8em;" name="design">
	<option value="1" selected>シナリオ</option>
	<option value="2">フリー</option>
	<option value="3">幕間</option>
</select>
</form>
<form name="form1" id="form1">
<input type="button" value="作成" onclick="hyouji()">
<table cellspacing="1" border="0">
<tbody id="Q_head">
	<tr>
		<td colspan="4" style="background-color:#17184b; color:white; text-align:center;">
			クエスト名<input type="text" style="width:15em;" name="T_name" value="">
		</td>
	</tr>
	<tr>
		<td rowspan="3" style="background-color:#f5fffa; text-align:center; width:80px;">
			AP<input type="number" style="width:4em;" name="T_ap" value="">
		</td>
		<td colspan="2" style="background-color:#f5fffa; text-align:center;">
			地名<input type="text" style="width:10em;" name="T_pl" value="">
		</td>
		<td style="background-color:#f5fffa; text-align:center; width:300px;">
			推奨Lv.<input type="number" style="width:4em;" name="T_lv" value="">
		</td>
	</tr>
	<tr>
		<td style="background-color:#f5fffa; text-align:center; width:250px;">
			絆P : <input type="number" style="width:5em;" name="T_kz" value="">
		</td>
		<td style="background-color:#f5fffa; text-align:center; width:250px;">
			EXP : <input type="number" style="width:5em;" name="T_xp" value="">
		</td>
		<td style="background-color:#f5fffa; text-align:center; width:250px;">
			QP : <input type="number" style="width:5em;" name="T_qp" value="">
		</td>
	</tr>
	<tr>
		<td colspan="3" style="background-color:#f5fffa; text-align:center;">
			報酬 : <input type="text" style="width:15em;" name="T_housyu" value="">
		</td>
	</tr>
</tbody>
<tbody id="Q_1"></tbody>
<tbody id="Q_2"></tbody>
<tbody id="Q_3"></tbody>
<tbody id="Q_4"></tbody>
<tbody id="Q_5"></tbody>
<tbody id="Q_hoka"></tbody>
</table>
</form>
</div>
}