From bb96f8882328ef9aca6defdfc2d5b30894f99849 Mon Sep 17 00:00:00 2001
From: Daniel Brunner <0xFEEDC0DE64@gmail.com>
Date: Wed, 30 Nov 2016 11:52:10 +0100
Subject: [PATCH] Implemented table with entities

---
 index.html |   4 +-
 script.js  | 488 +++++++++++++++++++++++++++--------------------------
 2 files changed, 254 insertions(+), 238 deletions(-)

diff --git a/index.html b/index.html
index b1d5778..6c8aedd 100644
--- a/index.html
+++ b/index.html
@@ -125,7 +125,7 @@
                     <fieldset>
                         <legend>Segmente:</legend>
                         
-						<button class="btn btn-primary"><i class="glyphicon glyphicon-plus"></i> Hinzuf&uuml;gen</button>
+						<button id="button_add" class="btn btn-primary"><i class="glyphicon glyphicon-plus"></i> Hinzuf&uuml;gen</button>
 						
                         <table class="table table-striped table-condensed">
 							<thead>
@@ -136,7 +136,7 @@
 									<th>Aktionen</th>
 								</tr>
 							</thead>
-							<tbody></tbody>
+							<tbody id="table_entities"></tbody>
                         </table>
                     </fieldset>
 
diff --git a/script.js b/script.js
index db634b7..be8edef 100644
--- a/script.js
+++ b/script.js
@@ -1,258 +1,274 @@
 class Vector2 {
-	constructor(vec, y) {
-		if(typeof vec === "undefined" &&
-		   typeof y === "undefined") {
-			this.x = 0;
-			this.y = 0;
-		} else if(typeof vec === "number" &&
-		   typeof y === "undefined") {
-			this.x = vec;
-			this.y = vec;
-		} else if(typeof vec === "number" &&
-		   typeof y === "number") {
-			this.x = vec;
-			this.y = y;
-		} else if(typeof vec === "object" && vec.constructor == Vector2) {
-			this.x = vec.getX()
-			this.y = vec.getY();
-		} else
-			throw 'Vector2::constructor(): Invalid types ' + (typeof vec) + ' ' + (typeof y);
-	}
-	
-	getX() {
-		return this.x;
-	}
-	
-	getY() {
-		return this.y;
-	}
-	
-	setX(x) {
-		if(typeof x !== "number") 
-			throw 'Vector2::setX(): Invalid type ' + (typeof x);
-		
-		this.x = x;
-	}
-	
-	setY(y) {
-		if(typeof y !== "number")
-			throw 'Vector2::setY(): Invalid type ' + (typeof y);
-		
-		this.y = y;
-	}
+    constructor(vec, y) {
+        if(typeof vec === "undefined" &&
+           typeof y === "undefined") {
+            this.x = 0;
+            this.y = 0;
+        } else if(typeof vec === "number" &&
+           typeof y === "undefined") {
+            this.x = vec;
+            this.y = vec;
+        } else if(typeof vec === "number" &&
+           typeof y === "number") {
+            this.x = vec;
+            this.y = y;
+        } else if(typeof vec === "object" && vec.constructor == Vector2) {
+            this.x = vec.getX()
+            this.y = vec.getY();
+        } else
+            throw 'Vector2::constructor(): Invalid types ' + (typeof vec) + ' ' + (typeof y);
+    }
+    
+    getX() {
+        return this.x;
+    }
+    
+    getY() {
+        return this.y;
+    }
+    
+    setX(x) {
+        if(typeof x !== "number") 
+            throw 'Vector2::setX(): Invalid type ' + (typeof x);
+        
+        this.x = x;
+    }
+    
+    setY(y) {
+        if(typeof y !== "number")
+            throw 'Vector2::setY(): Invalid type ' + (typeof y);
+        
+        this.y = y;
+    }
 
-	add(vec, y) {
-		if(typeof vec === "number" &&
-		   typeof y === "undefined") {
-			return new Vector2(
-				this.x + vec,
-				this.y + vec
-			);
-		} else if(typeof vec === "number" &&
-		   typeof y === "number") {
-			return new Vector2(
-				this.x + vec,
-				this.y + y
-			);
-		} else if(typeof vec === "object" && vec.constructor == Vector2) {
-			return new Vector2(
-				this.x + vec.getX(),
-				this.y + vec.getY()
-			);
-		} else
-			throw 'Vector2::add(): Invalid types ' + (typeof vec) + ' ' + (typeof y);
-	}
+    add(vec, y) {
+        if(typeof vec === "number" &&
+           typeof y === "undefined") {
+            return new Vector2(
+                this.x + vec,
+                this.y + vec
+            );
+        } else if(typeof vec === "number" &&
+           typeof y === "number") {
+            return new Vector2(
+                this.x + vec,
+                this.y + y
+            );
+        } else if(typeof vec === "object" && vec.constructor == Vector2) {
+            return new Vector2(
+                this.x + vec.getX(),
+                this.y + vec.getY()
+            );
+        } else
+            throw 'Vector2::add(): Invalid types ' + (typeof vec) + ' ' + (typeof y);
+    }
 
-	sub(vec, y) {
-		if(typeof vec === "number" &&
-		   typeof y === "undefined") {
-			return new Vector2(
-				this.x - vec,
-				this.y - vec
-			);
-		} else if(typeof vec === "number" &&
-		   typeof y === "number") {
-			return new Vector2(
-				this.x - vec,
-				this.y - y
-			);
-		} else if(typeof vec === "object" && vec.constructor == Vector2) {
-			return new Vector2(
-				this.x - vec.getX(),
-				this.y - vec.getY()
-			);
-		} else
-			throw 'Vector2::sub(): Invalid types ' + (typeof vec) + ' ' + (typeof y);
-	}
+    sub(vec, y) {
+        if(typeof vec === "number" &&
+           typeof y === "undefined") {
+            return new Vector2(
+                this.x - vec,
+                this.y - vec
+            );
+        } else if(typeof vec === "number" &&
+           typeof y === "number") {
+            return new Vector2(
+                this.x - vec,
+                this.y - y
+            );
+        } else if(typeof vec === "object" && vec.constructor == Vector2) {
+            return new Vector2(
+                this.x - vec.getX(),
+                this.y - vec.getY()
+            );
+        } else
+            throw 'Vector2::sub(): Invalid types ' + (typeof vec) + ' ' + (typeof y);
+    }
 
-	mul(vec, y) {
-		if(typeof vec === "number" &&
-		   typeof y === "undefined") {
-			return new Vector2(
-				this.x * vec,
-				this.y * vec
-			);
-		} else if(typeof vec === "number" &&
-		   typeof y === "number") {
-			return new Vector2(
-				this.x * vec,
-				this.y * y
-			);
-		} else if(typeof vec === "object" && vec.constructor == Vector2) {
-			return new Vector2(
-				this.x * vec.getX(),
-				this.y * vec.getY()
-			);
-		} else
-			throw 'Vector2::mul(): Invalid types ' + (typeof vec) + ' ' + (typeof y);
-	}
+    mul(vec, y) {
+        if(typeof vec === "number" &&
+           typeof y === "undefined") {
+            return new Vector2(
+                this.x * vec,
+                this.y * vec
+            );
+        } else if(typeof vec === "number" &&
+           typeof y === "number") {
+            return new Vector2(
+                this.x * vec,
+                this.y * y
+            );
+        } else if(typeof vec === "object" && vec.constructor == Vector2) {
+            return new Vector2(
+                this.x * vec.getX(),
+                this.y * vec.getY()
+            );
+        } else
+            throw 'Vector2::mul(): Invalid types ' + (typeof vec) + ' ' + (typeof y);
+    }
 
-	div(vec, y) {
-		if(typeof vec === "number" &&
-		   typeof y === "undefined") {
-			return new Vector2(
-				this.x / vec,
-				this.y / vec
-			);
-		} else if(typeof vec === "number" &&
-		   typeof y === "number") {
-			return new Vector2(
-				this.x / vec,
-				this.y / y
-			);
-		} else if(typeof vec === "object" && vec.constructor == Vector2) {
-			return new Vector2(
-				this.x / vec.getX(),
-				this.y / vec.getY()
-			);
-		} else
-			throw 'Vector2::div(): Invalid types ' + (typeof vec) + ' ' + (typeof y);
-	}
-	
-	length() {
-		return Math.sqrt(this.x * this.x + this.y * this.y);
-	}
+    div(vec, y) {
+        if(typeof vec === "number" &&
+           typeof y === "undefined") {
+            return new Vector2(
+                this.x / vec,
+                this.y / vec
+            );
+        } else if(typeof vec === "number" &&
+           typeof y === "number") {
+            return new Vector2(
+                this.x / vec,
+                this.y / y
+            );
+        } else if(typeof vec === "object" && vec.constructor == Vector2) {
+            return new Vector2(
+                this.x / vec.getX(),
+                this.y / vec.getY()
+            );
+        } else
+            throw 'Vector2::div(): Invalid types ' + (typeof vec) + ' ' + (typeof y);
+    }
+    
+    length() {
+        return Math.sqrt(this.x * this.x + this.y * this.y);
+    }
 };
 
 $(document).ready(function($) {
-	var entities = [];
+    var entities = [];
 	
-	class Entity {
-		constructor() {
-			this.position = new Vector2();
-			this.speed = new Vector2();
-			this.elem = $('<div>').addClass('point').appendTo('body')
-		}
-	};
-	
-	for (var i = 0; i < 8; i++) {
-		entities.push(new Entity());
-	}
-	
-	var mousePosition = new Vector2;
-
-	$(document).mousemove(function(event) {
-		mousePosition = new Vector2(
-			event.pageX,
-			event.pageY
-		);
-	});
-
-	setInterval(function() {
-		var DELTAT = parseFloat($('#input_deltat').val());
-		var SEGLEN = parseFloat($('#input_seglen').val());
-		var SPRINGK = parseFloat($('#input_springk').val());
-		var MASS = parseFloat($('#input_mass').val());
-		var GRAVITY = parseFloat($('#input_gravity').val());
-		var RESISTANCE = parseFloat($('#input_resistance').val());
-		var STOPVEL = parseFloat($('#input_stopvel').val());
-		var STOPACC = parseFloat($('#input_stopacc').val());
-		var BOUNCE = parseFloat($('#input_bounce').val());
-		
-		var collisionUp = $('#input_collisionUp').is(':checked');
-		var collisionLeft = $('#input_collisionLeft').is(':checked');
-		var collisionRight = $('#input_collisionRight').is(':checked');
-		var collisionDown = $('#input_collisionDown').is(':checked');
-		
-		$('#display_deltat').text(DELTAT);
-		$('#display_seglen').text(SEGLEN);
-		$('#display_springk').text(SPRINGK);
-		$('#display_mass').text(MASS);
-		$('#display_gravity').text(GRAVITY);
-		$('#display_resistance').text(RESISTANCE);
-		$('#display_stopvel').text(STOPVEL);
-		$('#display_stopacc').text(STOPACC);
-		$('#display_bounce').text(BOUNCE);
-
-		var windowSize = new Vector2($(window).width(), $(window).height());
-		
-		$.each(entities, function(i, entity){
-			var springForce = function(i, j) {
-				var d = i.sub(j);
-				var len = d.length();
-				return len > SEGLEN ? d.div(len).mul(SPRINGK).mul(len - SEGLEN) : new Vector2();
+	var entityId = 0;
+    
+    class Entity {
+        constructor() {
+			this.id = entityId++;
+            this.position = new Vector2();
+            this.speed = new Vector2();
+            this.elem = $('<div>').addClass('point').appendTo('body');
+			this.row = $('<tr>').appendTo('#table_entities');
+			this.columns = {
+				id: $('<td>').text(this.id).appendTo(this.row),
+				position: $('<td>').appendTo(this.row),
+				speed: $('<td>').appendTo(this.row),
+				actions: $('<td>').appendTo(this.row),
 			}
+        }
+    };
+    
+    $('#button_add').click(function(){
+        entities.push(new Entity());
+    });
+    
+    for (var i = 0; i < 8; i++) {
+        $('#button_add').click();
+    }
+    
+    var mousePosition = new Vector2;
 
-		    var spring = springForce(i > 0 ? entities[i - 1].position : mousePosition, entity.position);
+    $(document).mousemove(function(event) {
+        mousePosition = new Vector2(
+            event.pageX,
+            event.pageY
+        );
+    });
 
-			if (i < (entities.length - 1)) {
-				spring = spring.add(springForce(entities[i + 1].position, entity.position));
-			}
+    setInterval(function() {
+        var DELTAT = parseFloat($('#input_deltat').val());
+        var SEGLEN = parseFloat($('#input_seglen').val());
+        var SPRINGK = parseFloat($('#input_springk').val());
+        var MASS = parseFloat($('#input_mass').val());
+        var GRAVITY = parseFloat($('#input_gravity').val());
+        var RESISTANCE = parseFloat($('#input_resistance').val());
+        var STOPVEL = parseFloat($('#input_stopvel').val());
+        var STOPACC = parseFloat($('#input_stopacc').val());
+        var BOUNCE = parseFloat($('#input_bounce').val());
+        
+        var collisionUp = $('#input_collisionUp').is(':checked');
+        var collisionLeft = $('#input_collisionLeft').is(':checked');
+        var collisionRight = $('#input_collisionRight').is(':checked');
+        var collisionDown = $('#input_collisionDown').is(':checked');
+        
+        $('#display_deltat').text(DELTAT);
+        $('#display_seglen').text(SEGLEN);
+        $('#display_springk').text(SPRINGK);
+        $('#display_mass').text(MASS);
+        $('#display_gravity').text(GRAVITY);
+        $('#display_resistance').text(RESISTANCE);
+        $('#display_stopvel').text(STOPVEL);
+        $('#display_stopacc').text(STOPACC);
+        $('#display_bounce').text(BOUNCE);
 
-			var resist = entity.speed.mul(-RESISTANCE);
-			var accel = spring.add(resist).div(MASS).add(0, GRAVITY);
+        var windowSize = new Vector2($(window).width(), $(window).height());
+        
+        $.each(entities, function(i, entity){
+            var springForce = function(i, j) {
+                var d = i.sub(j);
+                var len = d.length();
+                return len > SEGLEN ? d.div(len).mul(SPRINGK).mul(len - SEGLEN) : new Vector2();
+            }
 
-			entity.speed = entity.speed.add(accel.mul(DELTAT));
+            var spring = springForce(i > 0 ? entities[i - 1].position : mousePosition, entity.position);
 
-			if (Math.abs(entity.speed.getX()) < STOPVEL &&
-				Math.abs(entity.speed.getY()) < STOPVEL &&
-				Math.abs(accel.getX()) < STOPACC &&
-				Math.abs(accel.getY()) < STOPACC) {
-				entity.speed = new Vector2();
-			}
+            if (i < (entities.length - 1)) {
+                spring = spring.add(springForce(entities[i + 1].position, entity.position));
+            }
 
-			entity.position = entity.position.add(entity.speed);
+            var resist = entity.speed.mul(-RESISTANCE);
+            var accel = spring.add(resist).div(MASS).add(0, GRAVITY);
 
-			if(collisionLeft) {
-				if (entity.position.getX() < 0) {
-					if (entity.speed.getX() < 0) {
-						entity.speed.setX(BOUNCE * -entity.speed.getX());
-					}
-					entity.position.setX(0);
-				}
-			}
+            entity.speed = entity.speed.add(accel.mul(DELTAT));
 
-			if(collisionUp) {
-				if (entity.position.getY() < 0) {
-					if (entity.speed.getY() < 0) {
-						entity.speed.setY(BOUNCE * -entity.speed.getY());
-					}
-					entity.position.setY(0);
-				}
-			}
+            if (Math.abs(entity.speed.getX()) < STOPVEL &&
+                Math.abs(entity.speed.getY()) < STOPVEL &&
+                Math.abs(accel.getX()) < STOPACC &&
+                Math.abs(accel.getY()) < STOPACC) {
+                entity.speed = new Vector2();
+            }
 
-			if(collisionRight) {
-				if (entity.position.getX() >= windowSize.getX() - entity.elem.width()) {
-					if (entity.speed.getX() > 0) {
-						entity.speed.setX(BOUNCE * -entity.speed.getX());
-					}
-					entity.position.setX(windowSize.getX() - entity.elem.width());
-				}
-			}
+            entity.position = entity.position.add(entity.speed);
 
-			if(collisionDown) {
-				if (entity.position.getY() >=  windowSize.getY() - entity.elem.height()) {
-					if (entity.speed.getY() > 0) {
-						entity.speed.setY(BOUNCE * -entity.speed.getY());
-					}
-					entity.position.setY(windowSize.getY() - entity.elem.height());
-				}
-			}
+            if(collisionLeft) {
+                if (entity.position.getX() < 0) {
+                    if (entity.speed.getX() < 0) {
+                        entity.speed.setX(BOUNCE * -entity.speed.getX());
+                    }
+                    entity.position.setX(0);
+                }
+            }
 
-			entity.elem.css({
-				'left': entity.position.getX(),
-				'top': entity.position.getY()
-			});
-		});
-	}, 20);
+            if(collisionUp) {
+                if (entity.position.getY() < 0) {
+                    if (entity.speed.getY() < 0) {
+                        entity.speed.setY(BOUNCE * -entity.speed.getY());
+                    }
+                    entity.position.setY(0);
+                }
+            }
+
+            if(collisionRight) {
+                if (entity.position.getX() >= windowSize.getX() - entity.elem.width()) {
+                    if (entity.speed.getX() > 0) {
+                        entity.speed.setX(BOUNCE * -entity.speed.getX());
+                    }
+                    entity.position.setX(windowSize.getX() - entity.elem.width());
+                }
+            }
+
+            if(collisionDown) {
+                if (entity.position.getY() >=  windowSize.getY() - entity.elem.height()) {
+                    if (entity.speed.getY() > 0) {
+                        entity.speed.setY(BOUNCE * -entity.speed.getY());
+                    }
+                    entity.position.setY(windowSize.getY() - entity.elem.height());
+                }
+            }
+
+            entity.elem.css({
+                'left': entity.position.getX(),
+                'top': entity.position.getY()
+            });
+			entity.columns.position.text(Math.round(entity.position.getX()) + ', ' + Math.round(entity.position.getY()));
+			entity.columns.speed.text(Math.round(entity.speed.getX()) + ', ' + Math.round(entity.speed.getY()));
+        });
+    }, 20);
 });
\ No newline at end of file