Implemented table with entities

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>
 

script.js

@@ -137,16 +137,30 @@ class Vector2 {
 $(document).ready(function($) {
     var entities = [];
 	
+	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.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),
+			}
         }
     };
     
-	for (var i = 0; i < 8; i++) {
+    $('#button_add').click(function(){
         entities.push(new Entity());
+    });
+    
+    for (var i = 0; i < 8; i++) {
+        $('#button_add').click();
     }
     
     var mousePosition = new Vector2;
@@ -253,6 +267,8 @@ $(document).ready(function($) {
                 '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);
 });