Le_Royaume_Poudingue/Development Tools/SpriteGenerator.html

<EFBFBD><EFBFBD><!DOCTYPE html>
<html>
<head>
	<title>SpriteGen</title>
	<link rel="stylesheet" type="text/css" href="SpriteGen.css">
</head>
<body>

	<div id="codeContainer" ondblclick="this.style.zIndex='-1';this.style.opacity='0'">
		<h2>CODE</h2>
		<h4>Poids : </h4>
		<p></p>
	</div>

	<input type="file" id="fileChooser" onchange="Test(this.files[0].name);restart();">
	<img src="Rat.png" id="bordel" style="border: 5px solid blue;">
	<div class="container" >
		<canvas id="backGround"></canvas>
		<canvas id="foreGround"></canvas>
		<canvas id="activeLayer"></canvas>
	</div>

	<button onclick="sketch.push(new coord(999,0));draw();">S<00>parer</button>
	<button onclick="restart()">Recommencer</button>
	<button onclick="ereaser()">Effacer le dernier point</button>
	<button onclick="codeGenerator()">G<00>n<00>rer le code</button>
	<input type="range" id="zoom" min="2" max="30" value="10" onchange="zoom(this.value)" name="zoom">
	<pre>SpriteGen, con<00>u par Drak, 2018.</pre>

	<script type="text/javascript" src="Bresenham.js"></script>
	<script type="text/javascript">
		var consoleOutput = document.getElementsByTagName('pre')[0];

		var bg = document.getElementById('backGround');
			var bgCtx = bg.getContext('2d');

		var fg = document.getElementById('foreGround');
			var fgCtx = fg.getContext('2d');

		var al = document.getElementById('activeLayer');
			var alCtx = al.getContext('2d');
		
		var colorList = ['BlueViolet','Blue','Brown','CadetBlue','Crimson', 'DarkBlue', 'DarkRed', 'DarkGreen', 'DarkOrchid', 'DarkSlateBlue', 'DimGray', 'HotPink', 'MediumPurple', 'Olive', 'Yellow'];
		var index = 0;

		var cnvsCont = document.getElementsByClassName('container')[0];

		var lol = document.getElementById('bordel');

		function coord(x, y) {		
			this.x = x;
			this.y = y;
		}

		var sketch = [new coord(999, 0)];

		function Test(value) {	
			lol.src = value;
			lol.onload = function(){
				bg.width = lol.width;
				bg.height = lol.height;
				fg.width = lol.width;
				fg.height = lol.height;
				al.width = lol.width;
				al.height = lol.height;
				cnvsCont.style.height = (10*lol.height) + "px";
				cnvsCont.style.width = (10*lol.width) + "px";
				document.getElementById('zoom').value = 10;
				bgCtx.drawImage(lol,0,0);
			}
		}

		al.onmousemove = function(event) {
			var cPos = al.getBoundingClientRect();
			var factor = document.getElementById('zoom').value;
			var x = Math.ceil((event.clientX - cPos.left)/factor );
			var y = Math.ceil((event.clientY - cPos.top)/factor );
			consoleOutput.innerHTML = x + ", " + y;
			alCtx.clearRect(0,0,lol.width, lol.height);
			alCtx.fillStyle="red";
			var index = sketch.length-1;
			if (sketch[index].x === 999) {
				plot(x-1, y-1, alCtx);
			} else {
				plotLine(sketch[index].x-1, sketch[index].y-1, x-1, y-1, alCtx);
			}
		}

		al.onclick = function(event) {
			var cPos = al.getBoundingClientRect();
			var factor = document.getElementById('zoom').value;
			var x = Math.ceil((event.clientX - cPos.left)/factor );
			var y = Math.ceil((event.clientY - cPos.top)/factor );
			var newPoint = new coord(x , y);
			sketch.push(newPoint);
			draw();
			consoleOutput.innerHTML = "Nombre de points : " + (sketch.length-1);
		}

		function zoom(factor) {
			cnvsCont.style.height = (factor*lol.height) + "px";
			cnvsCont.style.width = (factor*lol.width) + "px";
		}

		function draw() {
			fgCtx.clearRect(0,0,lol.width,lol.height);
			fgCtx.fillStyle=colorList[index];
			var a;
			index = 0;
			fgCtx.fillStyle=colorList[index]
			for ( a = 1; a < sketch.length; a++ ) {
				if (sketch[a].x === 999) {
					index = (index + 1)%colorList.length;
					fgCtx.fillStyle=colorList[index];
				} else {
					if (sketch[a-1].x === 999) {
						plot(sketch[a].x-1, sketch[a].y-1, fgCtx);
					} else {
						plotLine(sketch[a-1].x-1, sketch[a-1].y-1, sketch[a].x-1, sketch[a].y-1, fgCtx);
					}
				}
			}
		}

		function ereaser() {
			if (sketch.length > 1) {
				sketch.pop();
				draw();
			} else {consoleOutput.innerHTML = "Il n'y a plus de point <00> effacer !";}
		}

		function codeGenerator() {
			alCtx.clearRect(0,0,lol.width, lol.height);
			var winCode = document.getElementById('codeContainer');
			winCode.style.zIndex = "2";winCode.style.opacity = "1";
			winCode = winCode.lastElementChild;
			console.log(winCode); var tempY;
			winCode.innerHTML = "{";
			for (var a = 1 ; a<=sketch.length ; a++) {
				console.log(a);
				if (sketch[a] != undefined) {
					if (sketch[a].x === 999) {
						winCode.innerHTML += "<22>d9, ";
					} else {
						winCode.innerHTML += sketch[a].x + ".";
						tempY = lol.height-sketch[a].y;
						if (tempY<10) { winCode.innerHTML += "0";}
						winCode.innerHTML += tempY + ", ";
					}
				}
			}
			winCode.innerHTML = winCode.innerHTML.slice(0,winCode.innerHTML.length-2);
			winCode.innerHTML = winCode.innerHTML.replace(/.00,/g, ",");
			winCode.innerHTML = winCode.innerHTML.replace(/0,/g, ",");
			winCode.parentElement.getElementsByTagName('h4')[0].innerHTML = "Size : " + (winCode.innerHTML.length - sketch.length) + " octets";
			winCode.innerHTML += " -> List 7";
		}

		function restart() {
			if (sketch.length > 1) {
				if (confirm('Effacer tous les points ?') === true) {
					sketch = [new coord(999, 0)];
					draw();
				}
			}
		}

		Test("Rat.png");
		

	</script>

</body>
</html>
-												SpriteGenerator.html téléversé
											
										
										
											2018-08-16 15:35:48 +02:00
+								<EFBFBD><EFBFBD><!DOCTYPE html>
 								<html>
 								<head>
 									<title>SpriteGen</title>
-												Replace SpriteGenerator.html
											
										
										
											2018-09-19 12:59:10 +02:00
+									<link rel="stylesheet" type="text/css" href="SpriteGen.css">
-												SpriteGenerator.html téléversé
											
										
										
											2018-08-16 15:35:48 +02:00
+								</head>
 								<body>
-												Replace SpriteGenerator.html
											
										
										
											2018-09-07 00:42:57 +02:00
+									<div id="codeContainer" ondblclick="this.style.zIndex='-1';this.style.opacity='0'">
 										<h2>CODE</h2>
-												Replace SpriteGenerator.html
											
										
										
											2018-09-19 12:59:10 +02:00
+										<h4>Poids : </h4>
-												Replace SpriteGenerator.html
											
										
										
											2018-09-07 00:42:57 +02:00
+										<p></p>
 									</div>
-												Replace SpriteGenerator.html
											
										
										
											2018-09-19 12:59:10 +02:00
+									<input type="file" id="fileChooser" onchange="Test(this.files[0].name);restart();">
-												Replace SpriteGenerator.html
											
										
										
											2018-09-07 00:42:57 +02:00
+									<img src="Rat.png" id="bordel" style="border: 5px solid blue;">
 									<div class="container" >
 										<canvas id="backGround"></canvas>
 										<canvas id="foreGround"></canvas>
 										<canvas id="activeLayer"></canvas>
 									</div>
-												SpriteGenerator.html téléversé
											
										
										
											2018-08-16 15:35:48 +02:00
-												Replace SpriteGenerator.html
											
										
										
											2018-09-19 12:59:10 +02:00
+									<button onclick="sketch.push(new coord(999,0));draw();">S<00>parer</button>
 									<button onclick="restart()">Recommencer</button>
 									<button onclick="ereaser()">Effacer le dernier point</button>
 									<button onclick="codeGenerator()">G<00>n<00>rer le code</button>
 									<input type="range" id="zoom" min="2" max="30" value="10" onchange="zoom(this.value)" name="zoom">
 									<pre>SpriteGen, con<00>u par Drak, 2018.</pre>
 									<script type="text/javascript" src="Bresenham.js"></script>
-												SpriteGenerator.html téléversé
											
										
										
											2018-08-16 15:35:48 +02:00
+									<script type="text/javascript">
-												Replace SpriteGenerator.html
											
										
										
											2018-09-07 00:42:57 +02:00
+										var consoleOutput = document.getElementsByTagName('pre')[0];
 										var bg = document.getElementById('backGround');
 											var bgCtx = bg.getContext('2d');
 										var fg = document.getElementById('foreGround');
 											var fgCtx = fg.getContext('2d');
 										var al = document.getElementById('activeLayer');
 											var alCtx = al.getContext('2d');
-												SpriteGenerator.html téléversé
											
										
										
											2018-08-16 15:35:48 +02:00
-												Replace SpriteGenerator.html
											
										
										
											2018-09-19 12:59:10 +02:00
+										var colorList = ['BlueViolet','Blue','Brown','CadetBlue','Crimson', 'DarkBlue', 'DarkRed', 'DarkGreen', 'DarkOrchid', 'DarkSlateBlue', 'DimGray', 'HotPink', 'MediumPurple', 'Olive', 'Yellow'];
-												Replace SpriteGenerator.html
											
										
										
											2018-09-07 00:42:57 +02:00
+										var index = 0;
 										var cnvsCont = document.getElementsByClassName('container')[0];
 										var lol = document.getElementById('bordel');
 										function coord(x, y) {
 											this.x = x;
 											this.y = y;
 										}
 										var sketch = [new coord(999, 0)];
-												SpriteGenerator.html téléversé
											
										
										
											2018-08-16 15:35:48 +02:00
-												Replace SpriteGenerator.html
											
										
										
											2018-09-07 00:42:57 +02:00
+										function Test(value) {
 											lol.src = value;
 											lol.onload = function(){
 												bg.width = lol.width;
 												bg.height = lol.height;
 												fg.width = lol.width;
 												fg.height = lol.height;
 												al.width = lol.width;
 												al.height = lol.height;
 												cnvsCont.style.height = (10*lol.height) + "px";
 												cnvsCont.style.width = (10*lol.width) + "px";
 												document.getElementById('zoom').value = 10;
 												bgCtx.drawImage(lol,0,0);
 											}
 										}
 										al.onmousemove = function(event) {
 											var cPos = al.getBoundingClientRect();
 											var factor = document.getElementById('zoom').value;
 											var x = Math.ceil((event.clientX - cPos.left)/factor );
 											var y = Math.ceil((event.clientY - cPos.top)/factor );
 											consoleOutput.innerHTML = x + ", " + y;
 											alCtx.clearRect(0,0,lol.width, lol.height);
 											alCtx.fillStyle="red";
-												Replace SpriteGenerator.html
											
										
										
											2018-09-19 12:59:10 +02:00
+											var index = sketch.length-1;
 											if (sketch[index].x === 999) {
 												plot(x-1, y-1, alCtx);
 											} else {
 												plotLine(sketch[index].x-1, sketch[index].y-1, x-1, y-1, alCtx);
 											}
-												Replace SpriteGenerator.html
											
										
										
											2018-09-07 00:42:57 +02:00
+										}
 										al.onclick = function(event) {
 											var cPos = al.getBoundingClientRect();
 											var factor = document.getElementById('zoom').value;
 											var x = Math.ceil((event.clientX - cPos.left)/factor );
 											var y = Math.ceil((event.clientY - cPos.top)/factor );
 											var newPoint = new coord(x , y);
 											sketch.push(newPoint);
 											draw();
-												Replace SpriteGenerator.html
											
										
										
											2018-09-19 12:59:10 +02:00
+											consoleOutput.innerHTML = "Nombre de points : " + (sketch.length-1);
-												Replace SpriteGenerator.html
											
										
										
											2018-09-07 00:42:57 +02:00
+										}
 										function zoom(factor) {
 											cnvsCont.style.height = (factor*lol.height) + "px";
 											cnvsCont.style.width = (factor*lol.width) + "px";
 										}
 										function draw() {
 											fgCtx.clearRect(0,0,lol.width,lol.height);
 											fgCtx.fillStyle=colorList[index];
 											var a;
 											index = 0;
-												Replace SpriteGenerator.html
											
										
										
											2018-09-19 12:59:10 +02:00
+											fgCtx.fillStyle=colorList[index]
 											for ( a = 1; a < sketch.length; a++ ) {
-												Replace SpriteGenerator.html
											
										
										
											2018-09-07 00:42:57 +02:00
+												if (sketch[a].x === 999) {
 													index = (index + 1)%colorList.length;
 													fgCtx.fillStyle=colorList[index];
 												} else {
-												Replace SpriteGenerator.html
											
										
										
											2018-09-19 12:59:10 +02:00
+													if (sketch[a-1].x === 999) {
 														plot(sketch[a].x-1, sketch[a].y-1, fgCtx);
 													} else {
 														plotLine(sketch[a-1].x-1, sketch[a-1].y-1, sketch[a].x-1, sketch[a].y-1, fgCtx);
 													}
-												Replace SpriteGenerator.html
											
										
										
											2018-09-07 00:42:57 +02:00
+												}
 											}
 										}
 										function ereaser() {
 											if (sketch.length > 1) {
 												sketch.pop();
 												draw();
-												Replace SpriteGenerator.html
											
										
										
											2018-09-19 12:59:10 +02:00
+											} else {consoleOutput.innerHTML = "Il n'y a plus de point <00> effacer !";}
-												Replace SpriteGenerator.html
											
										
										
											2018-09-07 00:42:57 +02:00
+										}
 										function codeGenerator() {
-												Replace SpriteGenerator.html
											
										
										
											2018-09-19 12:59:10 +02:00
+											alCtx.clearRect(0,0,lol.width, lol.height);
-												Replace SpriteGenerator.html
											
										
										
											2018-09-07 00:42:57 +02:00
+											var winCode = document.getElementById('codeContainer');
 											winCode.style.zIndex = "2";winCode.style.opacity = "1";
 											winCode = winCode.lastElementChild;
 											console.log(winCode); var tempY;
 											winCode.innerHTML = "{";
 											for (var a = 1 ; a<=sketch.length ; a++) {
 												console.log(a);
 												if (sketch[a] != undefined) {
 													if (sketch[a].x === 999) {
 														winCode.innerHTML += "<22>d9, ";
 													} else {
 														winCode.innerHTML += sketch[a].x + ".";
 														tempY = lol.height-sketch[a].y;
 														if (tempY<10) { winCode.innerHTML += "0";}
 														winCode.innerHTML += tempY + ", ";
 													}
 												}
 											}
 											winCode.innerHTML = winCode.innerHTML.slice(0,winCode.innerHTML.length-2);
-												Replace SpriteGenerator.html
											
										
										
											2018-09-19 12:59:10 +02:00
+											winCode.innerHTML = winCode.innerHTML.replace(/.00,/g, ",");
 											winCode.innerHTML = winCode.innerHTML.replace(/0,/g, ",");
 											winCode.parentElement.getElementsByTagName('h4')[0].innerHTML = "Size : " + (winCode.innerHTML.length - sketch.length) + " octets";
 											winCode.innerHTML += " -> List 7";
-												Replace SpriteGenerator.html
											
										
										
											2018-09-07 00:42:57 +02:00
+										}
 										function restart() {
-												Replace SpriteGenerator.html
											
										
										
											2018-09-19 12:59:10 +02:00
+											if (sketch.length > 1) {
 												if (confirm('Effacer tous les points ?') === true) {
 													sketch = [new coord(999, 0)];
 													draw();
 												}
-												Replace SpriteGenerator.html
											
										
										
											2018-09-07 00:42:57 +02:00
+											}
 										}
 										Test("Rat.png");
-												SpriteGenerator.html téléversé
											
										
										
											2018-08-16 15:35:48 +02:00
-												Replace SpriteGenerator.html
											
										
										
											2018-09-07 00:42:57 +02:00
-												SpriteGenerator.html téléversé
											
										
										
											2018-08-16 15:35:48 +02:00
+									</script>
 								</body>
 								</html>