<commit_before><!--
   gridracer.html
   see license.txt for (c) and licensing information
-->
<!DOCTYPE html>
<html>

<head>
	<title>gridracers</title>
	<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
	<script type="text/javascript" src="jQuery.grid.js"></script>
	<script type="text/javascript">
		var track = {
			img: new Image(),
			width: 50,
			height: 50
		}
		track.img.src = "track1.png";
		
		var player1 = {
			img: new Image(),
			color: 'red',
			x: 11,
			y: 24,
			speed: {
				x: 0,
				y: 0
			},
			moves: [{x: -1, y: -1}, {x: 0, y: -1}, {x: 1, y: -1}, {x: -1, y: 0}, {x: 0, y: 0}, {x: 1, y: 0}, {x: -1, y: 1}, {x: 0, y: 1}, {x: 1, y: 1}]
		}
		player1.img.src = "racer.png";
		
		function getValidMoves(player) {
			return player.moves.map(function(move) {
				var targetCell = {
					x: player.x + player.speed.x + move.x,
					y: player.y + player.speed.y + move.y
				};
				
				return targetCell;
			});
		}
		
		function highlightCells(canvas, color, cells, cellWidth, cellHeight) {
			// clear the canvas
			var ctx = canvas.getContext('2d');
			ctx.clearRect(0, 0, canvas.width, canvas.height);
			
			for(var c = 0; c < cells.length; c++) {
				var cell = cells[c];
				
				ctx.fillStyle = color;
				ctx.fillRect(cell.x * cellWidth, cell.y * cellHeight, cellWidth, cellHeight);
				
				ctx.strokeStyle = 'black';
				ctx.strokeRect(cell.x * cellWidth, cell.y * cellHeight, cellWidth, cellHeight);
			}
		}
		
		$(window).load(function() {
			var grid = $('#grid').grid(track.width, track.height, {
				'width' : track.img.width,
				'height' : track.img.height,
				'layers' : 4,
				'created' : function(evt) {
					var ctx = evt.layers[3].getContext('2d');
					ctx.drawImage(player1.img, player1.x * evt.cell.width, player1.y * evt.cell.height);
					
					// show track
					$(evt.layers[1]).css('opacity', 0.8);
					var trackCtx = evt.layers[1].getContext('2d');
					trackCtx.drawImage(track.img, 0, 0);
									
					// show initial moves
					$(evt.layers[2]).css('opacity', 0.8);
					highlightCells(evt.layers[2], player1.color, getValidMoves(player1), evt.cell.width, evt.cell.height);
				},
				'click' : function(evt) {
					var validMoves = getValidMoves(player1);
					if (!validMoves.some(function(move) { return move.x == evt.cell.x && move.y == evt.cell.y; })) {
						return;
					}
					
					var canvas = evt.layers[3];
					var ctx = canvas.getContext('2d');
					ctx.clearRect(0, 0, canvas.width, canvas.height);
					
					// calculate rotation
					var dx = evt.cell.x - player1.x;
					var dy = evt.cell.y - player1.y;
					
					var rotation = Math.PI - Math.atan2(dx, dy);
					
					ctx.save()
					
					// Move to the center of the starting cell and rotate
					ctx.translate(player1.x * evt.cell.width + evt.cell.width / 2, player1.y * evt.cell.height + evt.cell.height / 2)
					ctx.rotate(rotation);
					
					// Set the new player coordinates
					player1.x = evt.cell.x;
					player1.y = evt.cell.y;
					player1.speed = {
						x: dx,
						y: dy
					};

					// Calculate the distance
					var dist = Math.sqrt(Math.pow(dx * evt.cell.width, 2) + Math.pow(dy * evt.cell.height, 2))
					
					// animate over distance (from 0 to dist) in 500 ms
					$({ n: 0 }).animate({ n: dist}, {
						duration: 500,
						step: function(now, fx) {
							// Clear the path
							ctx.clearRect(0 - evt.cell.width / 2, evt.cell.height / 2, evt.cell.width, 0 - (now + evt.cell.height));
							ctx.drawImage(player1.img, 0 - evt.cell.width / 2, 0 - now - evt.cell.height / 2);
						},
						complete: function() {
							ctx.restore();
							
							highlightCells(evt.layers[2], player1.color, getValidMoves(player1), evt.cell.width, evt.cell.height);
						}
					});
				},
				'mouseenter' : null, /*function(evt) {
					var ctx = evt.layers[3].getContext('2d');
					ctx.fillStyle = 'blue';
					ctx.fillRect(evt.cell.width * evt.cell.x, evt.cell.height * evt.cell.y, evt.cell.width, evt.cell.height);
				},*/
				'mouseleave' : null /*function(evt) {
					var ctx = evt.layers[3].getContext('2d');
					ctx.clearRect(evt.cell.width * evt.cell.x, evt.cell.height * evt.cell.y, evt.cell.width, evt.cell.height);
				}*/
			});
		});
	</script>
</head>

<body>
	<div id="grid">
		grid
	</div>
</body>

</html><commit_msg>First steps into xmpp communication for multiplayer stuff<commit_after><!--
   gridracer.html
   see license.txt for (c) and licensing information
-->
<!DOCTYPE html>
<html>

<head>
	<title>Gridracer</title>
	<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
	<script type="text/javascript" src="jsjac.js"></script>
	<script type="text/javascript" src="jsjac.simpleclient.js"></script>
	<script type="text/javascript" src="jQuery.grid.js"></script>
	<script type="text/javascript">
		var track = {
			img: new Image(),
			width: 50,
			height: 50
		}
		track.img.src = "track1.png";
		
		var player1 = {
			img: new Image(),
			color: 'red',
			x: 11,
			y: 24,
			speed: {
				x: 0,
				y: 0
			},
			moves: [{x: -1, y: -1}, {x: 0, y: -1}, {x: 1, y: -1}, {x: -1, y: 0}, {x: 0, y: 0}, {x: 1, y: 0}, {x: -1, y: 1}, {x: 0, y: 1}, {x: 1, y: 1}]
		}
		player1.img.src = "racer.png";
		
		function getValidMoves(player) {
			return player.moves.map(function(move) {
				var targetCell = {
					x: player.x + player.speed.x + move.x,
					y: player.y + player.speed.y + move.y
				};
				
				return targetCell;
			});
		}
		
		function highlightCells(canvas, color, cells, cellWidth, cellHeight) {
			// clear the canvas
			var ctx = canvas.getContext('2d');
			ctx.clearRect(0, 0, canvas.width, canvas.height);
			
			for(var c = 0; c < cells.length; c++) {
				var cell = cells[c];
				
				ctx.fillStyle = color;
				ctx.fillRect(cell.x * cellWidth, cell.y * cellHeight, cellWidth, cellHeight);
				
				ctx.strokeStyle = 'black';
				ctx.strokeRect(cell.x * cellWidth, cell.y * cellHeight, cellWidth, cellHeight);
			}
		}
		
		$(window).load(function() {
			var grid = $('#grid').grid(track.width, track.height, {
				'width' : track.img.width,
				'height' : track.img.height,
				'layers' : 4,
				'created' : function(evt) {
					var ctx = evt.layers[3].getContext('2d');
					ctx.drawImage(player1.img, player1.x * evt.cell.width, player1.y * evt.cell.height);
					
					// show track
					$(evt.layers[1]).css('opacity', 0.8);
					var trackCtx = evt.layers[1].getContext('2d');
					trackCtx.drawImage(track.img, 0, 0);
									
					// show initial moves
					$(evt.layers[2]).css('opacity', 0.8);
					highlightCells(evt.layers[2], player1.color, getValidMoves(player1), evt.cell.width, evt.cell.height);
				},
				'click' : function(evt) {
					var validMoves = getValidMoves(player1);
					if (!validMoves.some(function(move) { return move.x == evt.cell.x && move.y == evt.cell.y; })) {
						return;
					}
					
					var canvas = evt.layers[3];
					var ctx = canvas.getContext('2d');
					ctx.clearRect(0, 0, canvas.width, canvas.height);
					
					// calculate rotation
					var dx = evt.cell.x - player1.x;
					var dy = evt.cell.y - player1.y;
					
					var rotation = Math.PI - Math.atan2(dx, dy);
					
					ctx.save()
					
					// Move to the center of the starting cell and rotate
					ctx.translate(player1.x * evt.cell.width + evt.cell.width / 2, player1.y * evt.cell.height + evt.cell.height / 2)
					ctx.rotate(rotation);
					
					// Set the new player coordinates
					player1.x = evt.cell.x;
					player1.y = evt.cell.y;
					player1.speed = {
						x: dx,
						y: dy
					};

					// Calculate the distance
					var dist = Math.sqrt(Math.pow(dx * evt.cell.width, 2) + Math.pow(dy * evt.cell.height, 2))
					
					// animate over distance (from 0 to dist) in 500 ms
					$({ n: 0 }).animate({ n: dist}, {
						duration: 500,
						step: function(now, fx) {
							// Clear the path
							ctx.clearRect(0 - evt.cell.width / 2, evt.cell.height / 2, evt.cell.width, 0 - (now + evt.cell.height));
							ctx.drawImage(player1.img, 0 - evt.cell.width / 2, 0 - now - evt.cell.height / 2);
						},
						complete: function() {
							ctx.restore();
							
							highlightCells(evt.layers[2], player1.color, getValidMoves(player1), evt.cell.width, evt.cell.height);
						}
					});
				},
				'mouseenter' : null, /*function(evt) {
					var ctx = evt.layers[3].getContext('2d');
					ctx.fillStyle = 'blue';
					ctx.fillRect(evt.cell.width * evt.cell.x, evt.cell.height * evt.cell.y, evt.cell.width, evt.cell.height);
				},*/
				'mouseleave' : null /*function(evt) {
					var ctx = evt.layers[3].getContext('2d');
					ctx.clearRect(evt.cell.width * evt.cell.x, evt.cell.height * evt.cell.y, evt.cell.width, evt.cell.height);
				}*/
			});
		});
	</script>
	<script type="text/javascript">
		var connectionArgs = {
			httpbase: 'http://localhost:5280/http-bind/',
			timerval: 2000,
			backend: 'binding'
		}

		var loginArgs = {
			domain: 'cerebro.forsite.dk',
			username: 'test2',
			resource: 'Gridracer',
			pass: '<PASSWORD>',
			register: false
		}
		
		var connection = connectAndLogin(connectionArgs, loginArgs);
   	</script>
</head>

<body>
	<div id="grid">
		grid
	</div>
</body>

</html>
{'fraction_non_alphanumeric': 0.1787429070274989, 'fraction_numerical': 0.0223701440419031, 'mean_word_length': 2.462410275783906, 'pattern_counts': {'":': 0, '<': 48, '<?xml version=': 0, '>': 46, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4282927', 'n_tokens_mistral': 4301, 'n_tokens_neox': 3400, 'n_words': 743}