Initial commit

Kirill380 · Mar 16, 2016 · b6d7489 · b6d7489
commit b6d7489
Show file tree

Hide file tree

Showing 14 changed files with 8,653 additions and 0 deletions.
diff --git a/css/agent.css b/css/agent.css
@@ -0,0 +1,28 @@
+svg {
+	width: 609px;
+	height: 600px;
+}
+
+.svg-container {
+	margin: 0 auto;
+	width: 609px;
+}
+
+/*#cleaner {
+	opacity: 0.5;
+    cursor: pointer;
+}
+
+#cleaner:focus {
+	opacity: 1;
+	outline: none;
+}*/
+
+
+.clean-event {
+	position: absolute;
+    font-size: 20px;
+    font-weight: bold;
+    font-family: impact;
+    color: #03A9F4;
+}
diff --git a/css/reset.css b/css/reset.css
@@ -0,0 +1,48 @@
+/* http://meyerweb.com/eric/tools/css/reset/ 
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed, 
+figure, figcaption, footer, header, hgroup, 
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	font-size: 100%;
+	font: inherit;
+	vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure, 
+footer, header, hgroup, menu, nav, section {
+	display: block;
+}
+body {
+	line-height: 1;
+}
+ol, ul {
+	list-style: none;
+}
+blockquote, q {
+	quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+	content: '';
+	content: none;
+}
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}
diff --git a/img/cat.png b/img/cat.png
diff --git a/img/coca-cola.png b/img/coca-cola.png
diff --git a/img/cookie.png b/img/cookie.png
diff --git a/img/donat.png b/img/donat.png
diff --git a/index.html b/index.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<title>Cleaner</title>
+	<link rel="stylesheet" href="./css/reset.css">
+	<link rel="stylesheet" href="./css/agent.css">
+	<link rel="stylesheet" href="./js/vendor/bootstrap.min.css">
+</head>
+<body>
+<div class="container">
+	<div class="row">
+  		<div class="col-md-8 col-md-offset-2">
+  			<div class="svg-container">
+  				<svg id="svg"></svg>
+  			</div>
+  		</div>
+	</div>
+</div>
+<button class="btn btn-success" id="start">Start</button>
+<button class="btn btn-error" id="stop">Stop</button>
+<button class="btn btn-primary" id="gen">Generate Trash</button>
+
+<script src="./js/vendor/underscore-min.js"></script>	
+<script src="./js/vendor/jquery-2.2.1.min.js"></script>
+<script src="./js/vendor/snap.svg.js"></script>	
+<script src="./js/Environment.js"></script>	
+<script src="./js/Cleaner.js"></script>	
+<script src="./js/Trash.js"></script>	
+<script>
+	var s = Snap("#svg");
+		var env = new Environment({svg: s});
+		env.renderScene();
+		var cln = new Cleaner({scene : env});
+		cln.render(1, 1);
+		var gen = new Trash({
+			scene : env,
+			interval: 200
+		});
+
+
+	$(document).ready(function() {
+		$("#start").on("click", function() {
+			cln.run();
+		});
+
+		$("#stop").on("click", function() {
+			cln.stop();
+		});
+
+		$("#gen").on("click", function() {
+			env.cleanAllTrash();
+			gen.staticGeneration();
+		});
+	}); 
+
+</script>	
+</body>
+</html>
diff --git a/js/Cleaner.js b/js/Cleaner.js
@@ -0,0 +1,130 @@
+(function($) {
+
+	function Cleaner(options) {
+		var image = options.image || "./img/cat.png"; 
+		var scene = options.scene;
+		var keyDriven = options.keyDriven || true;
+		var cleaner;
+		var energyCounter = 0;
+		var runId;
+
+
+		function render(x, y) {
+			cleaner = scene.renderCell(image, x, y);
+			cleaner.attr({id : "cleaner", /*tabindex: "0" */});
+			if(keyDriven) {
+					// TODO refactor find snap.svg API for event handling
+				   $(document).on("keydown", function(e) {
+				      switch (e.keyCode) {
+				        case 37: // left
+				          move(-1, 0);
+				          return false;
+				        case 38: // up
+				          move(0, -1);
+				          return false;
+				        case 39: // right
+				          move(1, 0);
+				          return false;
+				        case 40: // down
+				          move(0, 1);
+				          return false;
+				        case 67: 
+				          cleanCell();
+				          return false;
+				      }
+				    })
+			}
+		}
+
+
+		function move(dx, dy) {
+			// hack keep top z-index
+			cleaner.appendTo(cleaner.paper);
+			energyCounter++;
+			scene.moveCell(cleaner, dx, dy);
+		}
+
+		function cleanCell() {
+			var x = cleaner.getBBox().x;
+			var y = cleaner.getBBox().y;
+			var trash = scene.getTrashOnCell(x, y);
+			for (var i = 0; i < trash.length; i++) {
+				if(i < 10)
+					trash[i].remove();	
+				else
+					break;
+			}
+
+			if(i) {
+				energyCounter += 2;
+				createCleanEvent(i, x, y);
+			}
+
+		}
+
+		function run() {
+			cleanCell();
+			runId = setInterval(function() {
+				if(scene.isSceneClean()) {
+					stop();
+					return;
+				}
+				var step = _.random(1, 3);
+				switch (_.random(0, 3)) {
+					  case 0: // left
+					     move(-step, 0);
+					     cleanCell();
+					     break;
+					  case 1: // up
+					     move(0, -step);
+					     cleanCell();
+					     break;
+					  case 2: // right
+					     move(step, 0);
+					     cleanCell();
+					     break;
+					  case 3: // down
+					      move(0, step);
+					      cleanCell();
+					      break;
+				}
+			}, 100);
+		} 
+
+
+		function stop() {
+			clearInterval(runId);
+		} 
+
+
+		// TODO refactor hardcoded value 20 and rename method
+		function createCleanEvent(num, x, y) {
+			var $div = $("<div></div>").appendTo("body");
+			$div.css("top", y + "px");
+			$div.css("left", (x + 20) + "px");
+			$div.append("+" + num);
+			$div.addClass("clean-event");
+			$div.animate({
+			   opacity: 0,
+			   top: "-=100",
+			}, 2000);
+			setTimeout(function(){ 
+				$div.remove(); 
+			}, 2000);
+		}
+
+		function getWastedEnergy() {
+			return energyCounter;
+		}
+
+		this.move = move;
+		this.render = render;
+		this.getWastedEnergy = getWastedEnergy;
+		this.run = run;
+		this.stop= stop;
+	}
+
+
+	window.Cleaner = Cleaner;
+
+})(jQuery);