Colors now can be changed

index.html

@@ -12,7 +12,6 @@
                 position: absolute;
                 width: 30px;
                 height: 30px;
-                background-color: #000;
             }
         </style>
         <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
@@ -98,7 +97,7 @@
 						</form>
                     </fieldset>
                 </div>
-                <div class="col-lg-4">
+                <div class="col-lg-2">
                     <fieldset>
                         <legend>Kollisionen:</legend>
                         
@@ -121,7 +120,7 @@
                         </table>
                     </fieldset>
                 </div>
-                <div class="col-lg-4">
+                <div class="col-lg-6">
                     <fieldset>
                         <legend>Segmente:</legend>
                         
@@ -133,6 +132,7 @@
 									<th>ID</th>
 									<th>Position</th>
 									<th>Geschwindigkeit</th>
+									<th>Farbe</th>
 									<th>Aktionen</th>
 								</tr>
 							</thead>

script.js

@@ -144,14 +144,23 @@ $(document).ready(function($) {
 			this.id = entityId++;
             this.position = new Vector2();
             this.speed = new Vector2();
-            this.elem = $('<div>').addClass('point').appendTo('body');
+            var elem = 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),
+				color: $('<td>').appendTo(this.row),
 				actions: $('<td>').appendTo(this.row),
 			}
+			$('<input />')
+				.attr('type', 'color')
+				.change(function(){
+					console.log($(this).val());
+					elem.css('background-color', $(this).val());
+				})
+				.appendTo(this.columns.color)
+				.change();
         }
     };