Add basic player rendering functionality

projects/player/src/app/page.component.ts

@@ -8,7 +8,10 @@ import { UnitPage } from '../../../common/unit';
          [section]="section"
          [ngStyle]="{
                 width: '100%',
+                position: 'relative',
+                display: 'inline-block',
                 'height.px': section.height }">
+      {{section.height}}
     </app-section>
   `
 })

projects/player/src/app/section.component.ts

 import {
-  Component, Input
+  Component, ComponentFactoryResolver, Input, OnInit, ViewChild, ViewContainerRef
 } from '@angular/core';
-import { UnitPageSection } from '../../../common/unit';
+import { UnitPageSection, UnitUIElement } from '../../../common/unit';
+import * as ComponentUtils from '../../../common/component-utils';
 
 @Component({
   selector: 'app-section',
   template: `
-    SECTIOn
-    `
+    <div fxLayout="column">
+        <ng-template #elementContainer></ng-template>
+    </div>
+    `,
+  styles: [
+    'div {position: absolute}'
+  ]
 })
-export class SectionComponent {
+export class SectionComponent implements OnInit {
   @Input() section!: UnitPageSection;
+  @ViewChild('elementContainer', { read: ViewContainerRef, static: true }) private elementContainer!: ViewContainerRef;
+
+  constructor(private componentFactoryResolver: ComponentFactoryResolver) { }
+
+  ngOnInit(): void {
+    this.renderSection();
+  }
+
+  private renderSection() {
+    this.section.elements.forEach((element: UnitUIElement) => {
+      this.createSectionElement(element);
+    });
+  }
+
+  private createSectionElement(element: UnitUIElement): void {
+    const componentFactory = ComponentUtils.getComponentFactory(element.type, this.componentFactoryResolver);
+    const componentRef = this.elementContainer.createComponent(componentFactory);
+    componentRef.instance.elementModel = element;
+    componentRef.instance.updateStyle({
+      position: 'absolute',
+      top: `${element.yPosition}px`,
+      left: `${element.xPosition}px`
+    });
+  }
 }