<!DOCTYPE html>
<html>
<head>
	<title>Aventura Map Generator</title>
	<style type="text/css">
		.box {
			border: 3px solid #262729;
			border-radius: 10px 2px;
			padding: 10px;
			display: block;
			margin: 5px auto;
			max-width: 600px;
			background-color: rgba(80, 54, 226, 0.5) ;
		}
		canvas {
			margin: 10px;
			image-rendering: -moz-crisp-edges;
			display: block;
			margin: auto;
			background-color: white;
		}
		#TileSet, .putain {
			width: 330px;
			height: 210px;
			display: block;
			margin: 0 auto 0 auto;
			border: 2px solid #262729;
		}
		.Map {
			width: 512px;
			height: 256px;
			background-image: url("PICT5.png");
			background-position: center;
		    background-repeat: no-repeat;
		    background-size: cover;
		}

		#tile {
			width: 100px;
			height: 100px;
			margin: 5px auto;
		}
		#selector {
			width: 30px;
			height: 30px;
			pointer-events: none;
		}

		.text-block {
			background-color: #5036e2;;
			padding: 2px 12px;
			color: #eff5df;
			max-width: 700px;
			margin: auto;
			text-align: center;
			border-radius: 2px;
		}

		body {
			background-color: #edf0dd;
			font-family: courier new
		}
		.box button, select { margin: 0 3px;}
		pre { margin: 0; }

		.sideNav {
			height: 100%;
			width: 0;
			position: fixed;
			z-index: 1;
			top: 0; left: 0;
			overflow-x: hidden;
			padding-top: 10px;
			transition: 0.5s;
			background-color: rgba(20,10,60,0.8);
			color: #eff5df;
		}

		.sideNav a {color: inherit;}

		.sideNav p {margin: 5%;}
		.sideNav h4, h3, h5 {text-align: center; text-decoration: underline;}
		.sideNav .closebtn {
			padding: 8px;
		    text-decoration: none;
		    color: #eff5df;
		    font-size: 26px;
		    font-weight: bold;
		    display: block;
		    transition: 0.3s;
		    position: relative;
		    left: 80%;
		}

		input[type=number] {
			width: 40px;
		}

	</style>
</head>
<body>

	<div class="sideNav">
		<a href="javascript:help()" class="closebtn">×</a>
		<h3>Guide rapide</h3>
		<p>Ce programme a été conçu pour le jeu <a href="https://www.planet-casio.com/Fr/forums/topic14452-1-Projet-de-RPG...-en-BASIC-!.html" style="color: inherit;">Aventura, le Royaume Poudingue</a>. Il permet de concevoir des maps assez facilement, puisque le système de maps du jeu peut s'avérer assez complexe à certains endroits.</p>
		<h4>Dessiner</h4>
		<p>Le premier canvas contient le tileset. Cliquez sur un tile pour le sélectionner. Il apparaît en gros dans le deuxième canvas. Cliquez dans le troisième canvas pour appliquer le tile où vous voulez. En cas d'erreur, utilisez un tile blanc pour effacer. Pour tout recommencer, cliquez sur <a href="javascript:change()">«Effacer»</a>.</p>
		<h4>Terrains</h4>
		<p>Vous pouvez choisir le type de terrain. Il y en a deux : «Normal» et «Donjon». Attention, changer de terrain effacera votre map.</p>
		<p>Si vous appliquez un tile en dehors du cadre par inadvertance ou que vous avez effacé une dalle dans le terrain «Donjon» avec un tile blanc, <s>cliquez sur <a href="javascript:cleanse()">«Nettoyer»</a></s>. Vérifiez ensuite que votre map est encore complète : il se peut que des tiles aient disparu dans quelques rares cas.</p>
		<h4>Ajouter un ennemi</h4>
		<p>Les monstres sont symbolisés par le tile le plus en haut à droite du tile set (tile n°π). Il est inutile d'en mettre plusieurs : il n'y aura jamais qu'un seul monstre sur la map à la fois. Sa position sur la map sera son point d'apparition.</p>
		<p>Un monstre ne prend aucune proriété. (Ses informations sont traîtées ailleurs)</p>
		<h4>Résultat</h4>
		<p>Dans le cadre «Résultat :» se trouvent respectivement le code brut de la map et le code compressé à intégrer dans le programme – via <a href="https://www.planet-casio.com/Fr/logiciels/voir_un_logiciel_casio.php?cat=6" style="color: inherit;">BIDE</a> par exemple. Cliquez sur <a href="javascript:zip()">«Compresser»</a> pour réactualiser ce dernier.</p>
		<h4>Ajout de propriétés</h4>
		<p>Il est possible d'ajouter des propriétés aux tiles en se servant du Mode d'édition. Par défaut, il est réglé sur «Dessin de Tile». N'appliquez de propriétés qu'après avoir cliqué sur <a href="javascript:zip()">«Compresser»</a> après avoir fini le dessin.</p>
		<h5>Mode Dessin</h5>
		<p>Le mode par défaut. Utilisez ce mode tant que vous dessinez votre map. Compressez votre map puis changer de mode pour appliquer d'éventuelles propriétés.</p>
		<h5>Propriété : PNJ</h5>
		<p>Choisissez l'ID du PNJ, compris entre 0 et 42, puis cliquez sur «Appliquer». Si vous avez plusieurs PNJs, ils devront partager le même ID. Il est donc préférable d'éviter ce cas de figure, sauf si ces derniers sont des PNJs lambda.</p>
		<h5>Propr. : Bouton/mécanismes</h5>
		<p>/!\ Fonction non implémentée à ce programme. Il peut y avoir jusqu'à 10 boutons aux effets différents dans une zone. Pour qu'un tile soit déplacé par l'effet d'un bouton, ajoutez "{" suivi de l'indice du bouton (1 à 9) après le tile en question dans le code compressé. Faites de même pour attribuer un indice à un bouton (tile n°6), autrement il ne fonctionnera pas.</p>
		<h5>Propriété : Warp</h5>
		<p>Choississez respectivement les valeurs I (Abscisse mondiale du joueur) et J (Ordonnée mondiale) qui seront transmises au joueur s'il marche sur le Warp (tile n°A). Ne cliquez sur «Appliquer» qu'une seule fois !</p>
		<h4>Messages d'erreur</h4>
		<p style="margin-bottom: 40px;">En cas d'erreur effectant le code de la map, un message en rouge s'affichera pour préciser l'erreur. Cliquez dessus pour le faire disparaître.</p>
		
	</div>

	<div class="text-block">
		<h2>AVENTURA : Générateur de maps</h2>
		<p>Résultat :</p>
		<pre>000000000000000000000000000000000000000000000000000000000000000000</pre>
		<pre>→X→X</pre>
		<p id="debug" style="color: red; font-weight: bold; background-color: background-color: #5036e2;;" onclick="this.innerHTML='';"></p>
	</div>

	<img src="TILESET NEW.png" hidden="true">
	<div class="box">
		<div class="putain" style="position: relative;">
			<div id="selector" style="background-color: rgba(30,20,60,0.3); position: absolute;"></div>
			<canvas id="TileSet"  width="110" height="70" style="border:1px solid #262729;">
			</canvas>
		</div>
		<canvas id="tile"  width="10" height="10" style="border:1px solid #262729;" >
		</canvas>
		<div class="box" style=" display: flex; flex-wrap: wrap; justify-content: center;">
			<select onchange="change()" title="Sélectionner le terrain">
				<option value="0">Normal</option>
				<option value="1">Donjon/Intérieur</option>
			</select>
			<button onclick="change()">Effacer</button>
			<button onclick="zip()">Compresser</button>
			<!-- <button onclick="cleanse()">Nettoyer</button> -->
			<button onclick="help()">Aide rapide</button>
			<button onclick="scrnSht()">Données d'image</button>
			<select onchange="editionMode(this.value)" title="Mode d'édition" style="margin-top: 5px;" value="0">
				<option value="0">Dessin de Tile</option>
				<option value="1">Propriété : PNJ</option>
				<option value="2">Propr. : Bouton/mécanismes</option>
				<option value="3">Propriété : Warp</option>
			</select>
			<div id="controller" style="margin-top: 5px;"></div>
		</div>
		<canvas class="Map FL" width="128" height="64">
		</canvas>
	</div>
	<input type="text" id="voidText" style="width: 80%; margin-left: 10%;">

	<img src="PICT6.png" id="castleBG" hidden="true">

	<pre><span style="color: grey; font-size: 8">Par <a href="https://www.planet-casio.com/Fr/compte/voir_profil.php?membre=Drak">Drak</a> ; 08/2018. Compatible avec les versions -0,22 et plus récentes du jeu. <a href="https://git.planet-casio.com/Drak/Le_Royaume_Poudingue">Accéder au dépôt Git.</a><br>En cas de problème, de remarque ou de suggestion, <a href="https://www.planet-casio.com/Fr/compte/message.php?dest=Drak">contactez-moi.</a></span></pre>

	<script type="text/javascript">
		var tileSet = document.getElementById('TileSet');
		var tileSetCtx = tileSet.getContext("2d");

		var tile = document.getElementById('tile');
		var tileCtx = tile.getContext("2d");

		var mapFl = document.getElementsByClassName('FL')[0];
		var flCtx = mapFl.getContext("2d");

		var select = document.getElementById('selector');

		var img = document.getElementsByTagName("img")[0];

		var str = document.getElementsByTagName("pre")[0];
		var strZip = document.getElementsByTagName("pre")[1];

		var indexes = "﹣123456789A00000000000BCDEFGHIJKL00000000000MNOPQRSTUVW00000000000XYZabcdefgπ";

		var debug = document.getElementsByTagName("p")[0];

		window.onload = function() {tileSetCtx.drawImage(img,0,0);}
		var xClip = 0;var yClip = 0;
		tileSet.onclick = function(event) {
			var tPos = tileSet.getBoundingClientRect();

			xClip = 30*Math.floor((event.clientX-tPos.left)/30);
			yClip = 30*Math.floor((event.clientY-tPos.top)/30);
			console.log( xClip +" and " + yClip );
			select.style.left = (xClip+1) +"px";
			select.style.top = (yClip+1) +"px";
			
			xClip = Math.round((xClip)/3);
			yClip = Math.round((yClip)/3);

			tileCtx.clearRect(0,0,10,10);
			tileCtx.drawImage(img,xClip,yClip,10,10,0,0,10,10);
		}

		mapFl.onclick = function(event) {
			var mPos = mapFl.getBoundingClientRect();
			var myX = 10*Math.round((event.clientX-20-mPos.left)/40);
			var myY = 10*Math.round((event.clientY-20-mPos.top)/40);

			var char = indexes.charAt(11*(60-yClip)/10 +xClip/10);
			console.log(myX + ", " + myY + " char : " + char);

			var pos = myX / 10 + 11*(5-myY/10); 

			str.innerHTML = str.innerHTML.substr(0,pos) + char + str.innerHTML.substring(pos+1);
			if (str.innerHTML.length > 66) {str.innerHTML = str.innerHTML.substr(0,66);}

			flCtx.clearRect(2+myX,2+myY,10,10);
			flCtx.drawImage(img,xClip,yClip,10,10,2+myX,2+myY,10,10);
		}

		function scrnSht() {
			var screenShot = flCtx.getImageData(2,2,110,60);

			console.log(screenShot);
			var write = document.getElementById('voidText');

			var carotteMalade = "";

			for (var i=3; i<screenShot.data.length; i+=4) {
				if (screenShot.data[i]==0 || screenShot.data[i-1]>0) {carotteMalade+="1";}
				else {carotteMalade+="0";}
			}	
			write.value = carotteMalade;
			write.select();
			document.execCommand('copy');		
		}

		function zip() {
			var char;
			strZip.innerHTML = "";
			var i=-1, hideux=0; 
			do {
				i++
				char = str.innerHTML.charAt(i)
				if (char == "0" && hideux < 33 && i<66) {
					hideux ++;
				} else if (hideux > 0) {
					strZip.innerHTML +="→" + "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefgh".charAt(hideux);
					console.log(hideux);
					hideux=0;
					i--;
					continue;
				}
				if (hideux == 0){
					strZip.innerHTML += char;
				}
			} while (i<66)
			strZip.innerHTML=strZip.innerHTML.replace(/→1/g, "0");
			strZip.innerHTML=strZip.innerHTML.replace(/→2/g, "00");
			strZip.innerHTML=strZip.innerHTML.replace(/﹣﹣﹣﹣﹣﹣/g, "*6");
			strZip.innerHTML=strZip.innerHTML.replace(/﹣﹣﹣﹣﹣/g, "*5");
			strZip.innerHTML=strZip.innerHTML.replace(/﹣﹣﹣﹣/g, "*4");
			strZip.innerHTML=strZip.innerHTML.replace(/﹣﹣﹣/g, "*3");
		}

		function cleanse() {
			for (var i=0; i<66 ; i++) {
				if (str.innerHTML.charAt(i)=="0") {
					flCtx.clearRect(2+10*(i%11),2+10*(5-Math.floor(i/11)),10,10);
				}
				flCtx.clearRect(112,0,15,64);
				flCtx.clearRect(0,0,128,2);
				flCtx.clearRect(0,0,2,64);
				flCtx.clearRect(0,62,128,2);
			}
			if (str.innerHTML.charAt(0) === "θ") {
				flCtx.drawImage(document.getElementById('castleBG'),0,0);
			}
		}

		function change() {
			var what = document.getElementsByTagName("select")[0].value;
			flCtx.clearRect(0,0,128,64);
			if (what == 1) {
				str.innerHTML = "θ﹣﹣﹣﹣0﹣﹣﹣﹣﹣﹣000000000﹣﹣000000000﹣00000000000﹣000000000﹣﹣﹣﹣﹣﹣0﹣﹣﹣﹣﹣";
				mapFl.style.backgroundImage = "url('PICT6.png')";
				/*flCtx.drawImage(document.getElementById('castleBG'),0,0);*/
				console.log(flCtx.getImageData(0,0,3,3));
			} else {
				str.innerHTML = "000000000000000000000000000000000000000000000000000000000000000000"
				mapFl.style.backgroundImage = "url('PICT5.png')";
			}
		}

		function help() {
			var nav = document.getElementsByClassName('sideNav')[0];
			console.log(window.getComputedStyle(nav,null).getPropertyValue("width"));
			if (window.getComputedStyle(nav,null).getPropertyValue("width") == "0px") {
				nav.style.width = "375px";
			} else {
				nav.style.width = "0px";
			}
		}

		function editionMode(lol) {
			var cont = document.getElementById('controller');
			switch(lol) {
				case "1":
					cont.innerHTML = '<input type="number" title="Id PNJ" min="1" max="42" value="1"><button onclick="appliquer('+lol+')">Appliquer</button>';
					break;
				case "2":
					cont.innerHTML = '<input type="number" title="Numéro de bouton" min="1" max="9" value="1"><button onclick="appliquer('+lol+')">Appliquer</button>';
					break;
				case "3":
					cont.innerHTML =  '<input type="number" title="Abscisse Warp" min="0" max="42" value="1"><input type="number" title="Ordonnée Warp" min="0" max="42" value="1"><button onclick="appliquer('+lol+')">Appliquer</button>'
					break;
				default :
					cont.innerHTML = 'Mode Dessin';
			}
		}

		function debugOutput(message) {
			if (message.search("<") == -1 && message.search(";") == -1) {
			document.getElementById('debug').innerHTML = message; }
			else {console.log("Erreur : le message à afficher est invalide.");}
		}

		function appliquer(lol) {
			console.log(lol);
			var cont = document.getElementById('controller');
			var myVal = cont.getElementsByTagName('input')[0].value; var i; var littleChar; var bigStr = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefg";
			switch(lol) {
				case 1 :
					if (strZip.innerHTML.search("\\(") == -1) {
						for (i = 0; i<5; i++) {
							littleChar = "abcde".charAt(i);
							strZip.innerHTML = strZip.innerHTML.replace(littleChar, littleChar + "(" + bigStr.charAt(myVal) );
						} 
					} else {
						debugOutput("Attention : l'Id de PNJ a déjà été attribué. Pour changer l'Id du PNJ, compressez à nouveau puis réappliquez la propriété.");
					}
					break
				case 2 :
					debugOutput("Fonction non implémentée. Pour attribuer une propriété à un tile, rajoutez «{» suivi de l'indice du mécanisme (de 1 à 9) dans le code. Plus d'info dans «Aide rapide»");
				case 3 :
					littleChar = bigStr.charAt(cont.getElementsByTagName('input')[1].value);
					strZip.innerHTML = strZip.innerHTML.replace(/A/g, "A" + bigStr.charAt(myVal) + littleChar );
					break
				default :
					debug("L'application ne s'est pas effectuée. Veuillez contacter le guignol qui a codé ce truc avec son cul.");
			}
		}

		editionMode("0");

	</script>
</body>
</html>