<!DOCTYPE html>


<!-- <link rel="stylesheet" href="{% static 'Sortable-master/Sortable.js' %}">
<link rel="stylesheet" href="{% static 'Sortable-master/Sortable.min.js' %}"> -->

<script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>

<script src="https://cdn.jsdelivr.net/npm/sortablejs@1.10.2/Sortable.min.js"></script>


<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.6.2/chart.min.js"
integrity="sha512-tMabqarPtykgDtdtSqCL3uLVM0gS1ZkUAVhRFu1vSEFgvB73niFQWJuvviDyBGBH22Lcau4rHB5p2K2T0Xvr6Q=="
crossorigin="anonymous"
referrerpolicy="no-referrer">
</script>


<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">

<!-- Font Awesome -->
<link href="https://use.fontawesome.com/releases/v6.0.0/css/all.css" rel="stylesheet">

<style>
	.form-inline {
		min-height: 40px;
		font: 1px;
	}
	.flex-item {
		display:flex;
		justify-content:space-between;		
	}
</style>



<head>
    <meta charset="UTF-8">
    <title>***ssssss****</title>
</head>

<body>

<!-- 
	<div class="mx-auto col-10">
		<h1>ダメージ計算ツール</h1>
		<p></p>
	</div> -->

	<div class="mx-auto col-10">
		<h1>ヴァイスシュバルツ 打点シミュレーター</h1>
		<ul>
			<li>盤面情報と打点情報を基に1000回のシュミレーションを行い総打点を計算する</li>
			<li>総打点情報からグラフ出力、平均総打点、勝率を求める</li>
			<li>トリガーチェックによるソウルパンプ、リフレッシュによるダメージは対応済み</li>
		</ul>

		<h4>使い方</h4>
		<ol>
			<li>盤面情報を入力</li>
				※ トリガーチェックは[自分 - デッキ ドラ]の情報を基に行う<br>
				※ [自分 - デッキ ドラ]の総数が0より大きい場合のみ入力値からトリガー抽選を行う<br>
				※ [自分 - デッキ ドラ]の総数が0の時はソウルパンプは発生しない
			<li>打点情報を入力</li>
				※ 打点情報は最大20個まで
			<li>実行ボタンを押す</li>
		</ol>
	</div>


	<div class="mx-auto row col-10">
		<h2>盤面情報</h2>
	</div>
	
	<div class="mx-auto row col-10">

		<div class="col-sm list-group">
			
			<table class="table table-bordered">
				<tbody>

					<tr>
						<th style="width: 250px;">相手 - 山札</th>
						<td>
							<div class="form-inline">
								<select id="opponent_deck" class="form-control">
									<script>for (let i = 50; i >= 1; i--) {document.write(`<option value="${i}">${i}</option>`)}</script>
								</select>
								<span>枚（内CX</span>
								<select id="opponent_deck_cx" class="form-control">
									<script>for (let i = 8; i >= 0; i--) {document.write(`<option value="${i}">${i}</option>`)}</script>
								</select>
								<span>枚）</span>
							</div>
						</td>
					</tr>
	
					<tr>
						<th>相手 - 控え室</th>
						<td>
							<div class="form-inline">
								<select id="opponent_waiting_room" class="form-control">
									<script>for (let i = 0; i <= 49; i++) {document.write(`<option value="${i}">${i}</option>`)}</script>
								</select>
								<span>枚（内CX</span>
								<select id="opponent_waiting_room_cx" class="form-control">
									<script>for (let i = 0; i <= 8; i++) {document.write(`<option value="${i}">${i}</option>`)}</script>
								</select>
								<span>枚）</span>
							</div>
						</td>
					</tr>
	
					<tr>
						<th>相手 - レベル</th>
						<td>
							<div class="form-inline">
								<select id="opponent_level" class="form-control">
									<script>for (let i = 3; i >= 0; i--) {document.write(`<option value="${i}">${i}</option>`)}</script>
								</select>
							</div>
						</td>
					</tr>
	
					<tr>
						<th>相手 - クロック</th>
						<td>
							<div class="form-inline">
								<select id="opponent_clock" class="form-control">
									<script>for (let i = 0; i <= 6; i++) {document.write(`<option value="${i}">${i}</option>`)}</script>
								</select>
								<span>枚（内CX</span>
								<select id="opponent_clock_cx" class="form-control">
									<script>for (let i = 0; i <= 6; i++) {document.write(`<option value="${i}">${i}</option>`)}</script>
								</select>
								<span>枚）</span>
							</div>
						</td>
					</tr>
	
					<tr>
						<th>相手 - ストック</th>
						<td>
							<div class="form-inline">
								<select id="opponent_stock" class="form-control">
									<script>for (let i = 0; i <= 30; i++) {document.write(`<option value="${i}">${i}</option>`)}</script>
								</select>
								<span>枚（内CX</span>
								<select id="opponent_stock_cx" class="form-control">
									<script>for (let i = 0; i <= 8; i++) {document.write(`<option value="${i}">${i}</option>`)}</script>
								</select>
								<span>枚）</span>
							</div>
						</td>
					</tr>

				</tbody>
			</table>

		</div>

		<div class="col-sm list-group">

			<table class="table table-bordered">
				<tbody>
	
					<tr>
						<th style="width: 250px;">自分 - デッキ ドラ0</th>
						<td>
							<div class="form-inline">
								<select id="your_deck_trigger_0" class="form-control">
									<script>for (let i = 0; i <= 50; i++) {document.write(`<option value="${i}">${i}</option>`)}</script>
								</select>
								<span>枚</span>
							</div>
						</td>
					</tr>

					<tr>
						<th>自分 - デッキ ドラ1</th>
						<td>
							<div class="form-inline">
								<select id="your_deck_trigger_1" class="form-control">
									<script>for (let i = 0; i <= 50; i++) {document.write(`<option value="${i}">${i}</option>`)}</script>
								</select>
								<span>枚</span>
							</div>
						</td>
					</tr>

					<tr>
						<th>自分 - デッキ ドラ2</th>
						<td>
							<div class="form-inline">
								<select id="your_deck_trigger_2" class="form-control">
									<script>for (let i = 0; i <= 50; i++) {document.write(`<option value="${i}">${i}</option>`)}</script>
								</select>
								<span>枚</span>
							</div>
						</td>
					</tr>

				</tbody>
			</table>

		</div>

	</div>

	<div class="mx-auto col-10">
		<h2>打点情報</h2>
		<p>※ 左のカードを右の領域にドラッグしてください。</p>
	</div>

	<div id="shared-lists" class="mx-auto row col-10">

		<div id="group_left" class="col-sm list-group">

			<div class="list-group-item flex-item type-atack">
				<div class="form-inline">
					<b><span>アタック:&nbsp;&nbsp;</span></b>
					<span>相手に</span>
					<select class="form-control arg-num">
						<script>for (let i = 0; i <= 5; i++) {document.write(`<option value="${i}">${i}</option>`)}</script>
					</select>
					<span>ダメージを与える（トリガーチェック発生）</span>
				</div>
			</div>

			<div class="list-group-item flex-item type-inflict">
				<div class="form-inline">
					<b><span>バーン:&nbsp;&nbsp;</span></b>
					<span>相手に</span>
					<select class="form-control arg-num">
						<script>for (let i = 1; i <= 7; i++) {document.write(`<option value="${i}">${i}</option>`)}</script>
					</select>
					<span>ダメージを与える</span>
				</div>
			</div>

			<div class="list-group-item flex-item type-moca">
				<div class="form-inline">
					<b><span>モカ:&nbsp;&nbsp;</span></b>
					<span>相手の山札を見て、</span>
					<select class="form-control arg-num">
						<script>for (let i = 1; i <= 4; i++) {document.write(`<option value="${i}">${i}</option>`)}</script>
					</select>
					<span>枚を控え室に置いて、残りを山札の上に戻す</span>
				</div>
			</div>

			<div class="list-group-item flex-item type-back">
				<div class="form-inline">
					<b><span>逆圧縮A:&nbsp;&nbsp;</span></b>
					<span>控え室から</span>
					<select class="form-control arg-num">
						<script>for (let i = 1; i <= 6; i++) {document.write(`<option value="${i}">${i}</option>`)}</script>
					</select>
					<span>枚までカードを山札に戻してシャッフルする</span>
					<p>※戻すカードはCX以外でかつ可能な限りの枚数を山に戻す</p>
					<input type="hidden" class="arg-type" value="shuffle"/>
				</div>
			</div>

			<div class="list-group-item flex-item type-back_all">
				<div class="form-inline">
					<b><span>逆圧縮B:&nbsp;&nbsp;</span></b>
					<span>控え室からCX</span>
					<select class="form-control arg-except_cx">
						<script>for (let i = 0; i <= 2; i++) {document.write(`<option value="${i}">${i}</option>`)}</script>
					</select>
					<span>枚を除いた全てのカードを山札に戻してシャッフルする</span>
				</div>
			</div>

			<div class="list-group-item flex-item type-koukei">
				<div class="form-inline">
					<b><span>光景:&nbsp;&nbsp;</span></b>
					<span>相手のストックを全て控え室に置く、その後山札から同じ枚数だけストックに置く</span>
				</div>
			</div>

			<div class="list-group-item flex-item type-maseki">
				<div class="form-inline">
					<b><span>魔石:&nbsp;&nbsp;</span></b>
					<span>相手のストックを全て山札に戻す、その後山札から同じ枚数だけストックに置く</span>
				</div>
			</div>

			<div class="list-group-item flex-item type-clock_shoot">
				<div class="form-inline">
					<b><span>クロックシュート:&nbsp;&nbsp;</span></b>
					<span>相手をリバースさせた時、相手のキャラをクロックに置く</span>
					<input type="hidden" class="arg-num" value="1"/>
					<input type="hidden" class="arg-place" value="field"/>
				</div>
			</div>

			<div class="list-group-item flex-item type-falling">
				<div class="form-inline">
					<b><span>単落下:&nbsp;&nbsp;</span></b>
					<span>相手の山札を上から</span>
					<select class="form-control arg-num">
						<script>for (let i = 0; i <= 30; i++) {document.write(`<option value="${i}">${i}</option>`)}</script>
					</select>
					<span>枚控え室に置く</span>
				</div>
			</div>

			<div class="list-group-item flex-item type-bottom_barn">
				<div class="form-inline">
					<b><span>ボトム落下A:&nbsp;&nbsp;</span></b>
					<span>相手の山札を下から</span>
					<select class="form-control arg-falling_num">
						<script>for (let i = 1; i <= 10; i++) {document.write(`<option value="${i}">${i}</option>`)}</script>
					</select>
					<span>枚控え室に置く、その中にCXがあれば相手に</span>
					<select class="form-control arg-damage_num">
						<script>for (let i = 1; i <= 4; i++) {document.write(`<option value="${i}">${i}</option>`)}</script>
					</select>
					<span>ダメージを</span>
					<select class="form-control arg-damage_times">
						<script>for (let i = 1; i <= 3; i++) {document.write(`<option value="${i}">${i}</option>`)}</script>
					</select>
					<span>回与える</span>
					<input type="hidden" class="arg-cx_type" value="once"/>
				</div>
			</div>

			<div class="list-group-item flex-item type-bottom_barn">
				<div class="form-inline">
					<b><span>ボトム落下B:&nbsp;&nbsp;</span></b>
					<span>相手の山札を下から</span>
					<select class="form-control arg-falling_num">
						<script>for (let i = 1; i <= 10; i++) {document.write(`<option value="${i}">${i}</option>`)}</script>
					</select>
					<span>枚控え室に置く、その中にCXがあれば相手に</span>
					<select class="form-control arg-damage_num">
						<script>for (let i = 1; i <= 3; i++) {document.write(`<option value="${i}">${i}</option>`)}</script>
					</select>
					<span>点ダメージを [CXの枚数] 回与える</span>
					<input type="hidden" class="arg-cx_type" value="times"/>
					<input type="hidden" class="arg-damage_times" value="1"/>
				</div>
			</div>

			<div class="list-group-item flex-item type-bottom_barn">
				<div class="form-inline">
					<b><span>ボトム落下C:&nbsp;&nbsp;</span></b>
					<span>相手の山札を下から</span>
					<select class="form-control arg-falling_num">
						<script>for (let i = 1; i <= 10; i++) {document.write(`<option value="${i}">${i}</option>`)}</script>
					</select>
					<span>枚控え室に置く、その中にCXがあれば相手に [CXの枚数] ダメージを与える</span>
					<input type="hidden" class="arg-cx_type" value="once"/>
					<input type="hidden" class="arg-damage_num" value="0"/>
					<input type="hidden" class="arg-damage_times" value="1"/>
				</div>
			</div>
		</div>

		<div id="group_right" class="col-sm list-group" style="padding:0px;background-color: lightsteelblue;">
		</div>

	</div>



	<div class="mx-auto row col-10">
		<div class="col-sm list-group">
		</div>
		<div class="col-sm list-group" style="margin-top:20px; padding:0px;">
			<button type="button" class="btn btn-primary" onclick="exec()" >実行</button>
		</div>
	</div>





	<div class="mx-auto col-8">
		<canvas id="canvas"></canvas>
		sssssssssssssssss
	</div>







	<!-- Display None-->
	<button id="delete_button" type="button" class="btn btn-danger" style="display:none" onclick="delete_card(this)">
		<i class="fas fa-trash-alt"></i>
	</button>



	<script  type="text/javascript">

			// init draw
			drawChart([""], 0);

			var groupLeft = document.querySelector("#group_left")
			var groupRight = document.querySelector("#group_right")

			new Sortable(groupLeft, {
					group: {
							name: 'shared',
							pull: 'clone',
							put: false
					},
					animation: 150,
					sort: false,
					onEnd: sortEvent
			});

			new Sortable(groupRight, {
					group: 'shared',
					filter: '.filtered', 
					animation: 150,
					onEnd: sortEvent
			});

			function sortEvent(e){
				var listElements = Array.from(groupRight.children);
				listElements.forEach(function(listElement) {
					if (listElement.children.length < 2) {
						var cloneElement = document.getElementById("delete_button").cloneNode(true);
						cloneElement.removeAttribute("id")
						cloneElement.style.display = "";
						listElement.appendChild(cloneElement);
					}
				})
			}

			function delete_card(e){
				e.parentNode.remove();
			}

			function exec(){
				var hashData = createParams();
				var requestBody = JSON.stringify(hashData);
				var xhr = new XMLHttpRequest();
				xhr.open("POST", "https://qmatanosii.sytes.net/weiss/commands", true);
				xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
				xhr.onreadystatechange = function() {
						if (xhr.readyState === 4) {
								if (xhr.status === 200) {
										var data = JSON.parse(xhr.responseText);
										console.log(data)

										if (data.is_success == false) {
											alert(data.message);
										}


										if (myChart) {
											myChart.destroy();
										}
										drawChart(data.labels, data.data);
								} else {
										alert("エラーが発生しました。");
								}
						}
				};
				xhr.send(`p=${requestBody}`);
			}

			function createParams(){
				var hash = {};
				hash["opponent_deck"] = Number(document.getElementById("opponent_deck").value);
				hash["opponent_deck_climax"] = Number(document.getElementById("opponent_deck_cx").value);
				hash["opponent_trash"] = Number(document.getElementById("opponent_waiting_room").value);
				hash["opponent_trash_climax"] = Number(document.getElementById("opponent_waiting_room_cx").value);
				hash["opponent_level"] = Number(document.getElementById("opponent_level").value);
				hash["opponent_clock"] = Number(document.getElementById("opponent_clock").value);
				hash["opponent_clock_climax"] = Number(document.getElementById("opponent_clock_cx").value);
				hash["opponent_stock"] = Number(document.getElementById("opponent_stock").value);
				hash["opponent_stock_climax"] = Number(document.getElementById("opponent_stock_cx").value);
				hash["mydeck_trigger_0"] = Number(document.getElementById("your_deck_trigger_0").value);
				hash["mydeck_trigger_1"] = Number(document.getElementById("your_deck_trigger_1").value);
				hash["mydeck_trigger_2"] = Number(document.getElementById("your_deck_trigger_2").value);
				hash["mydeck_trigger_shot"] = 0;
				hash["actions"] = createActions();
				return hash
			}

			function createActions(){
				var array = []
				var listElements = Array.from(groupRight.children);
				listElements.forEach(function(listElement) {
					var hash = {};
					hash['name'] = getClass(listElement);				
					var formElements = Array.from(listElement.children[0].children)
					formElements.forEach(function(formElement) {
						var formClassName = getClass(formElement);
						if (formClassName != "") {
							if ((formElement.tagName == "SELECT") || (formElement.tagName == "INPUT")) {
								if (isNaN(formElement.value)) {
									hash[formClassName] = formElement.value;
								} else {
									hash[formClassName] = Number(formElement.value);
								}
							}
						}
					})
					array.push(hash)
				})
				return array
			}

			function getClass(element) {
				var name = ""
				arrayClassName = element.className.split(" ");
				arrayClassName.forEach(function(className) {
					if (className.includes("type-") || className.includes("arg-")) {
						name = className.replace("type-", "").replace("arg-", "")
					}
				})
				return name
			}

			function drawChart(labels, data) {
			var ctx = document.getElementById('canvas').getContext('2d');
			window.myChart = new Chart(ctx, {
				type: 'bar',
				data: {
				labels: labels,
				datasets: [{
					label: "",
					data: data,
					backgroundColor: 'rgb(0, 134, 197, 0.7)',
					borderColor: 'rgba(0, 134, 197, 1)',
					borderWidth: 1,
				}],
				},
				options: {
					plugins: {
						legend: {
							display: false,
						}
					}
				}
			});
		}

	</script>

</body>
</html>