Refactor code structure

main.js

@@ -1,23 +1,15 @@
-import * as THREE from 'three';
+'use strict';
-import * as OBC from 'openbim-components';
+
 import UI from './ui.js';
 
 document.addEventListener('DOMContentLoaded', () => {
     const container = document.querySelector('#scene');
 
-    const components = new OBC.Components();
+    UI.setScene(container);
-    const worlds = components.get(OBC.Worlds);
+    UI.ifcLoader('ui');
-
-    const world = worlds.create();
-    
-    world.scene = new OBC.SimpleScene(components);
-    world.renderer = new OBC.SimpleRenderer(components, container);
-    world.camera = new OBC.SimpleCamera(components);
-
-    // Stars the app and updates components at 60 fps
-    components.init();
 
     // Creates a cube with three.js
+    /*
     const material = new THREE.MeshLambertMaterial({ color: "#6528D7" });
     const geometry = new THREE.BoxGeometry();
     const cube = new THREE.Mesh(geometry, material);
@@ -26,7 +18,5 @@ document.addEventListener('DOMContentLoaded', () => {
     world.scene.setup();
 
     world.camera.controls.setLookAt(3, 3, 3, 0, 0, 0);
-
+    */
-    UI.ifcLoader('ui');
-
 });

ui.js

@@ -1,18 +1,79 @@
+'use strict';
+
+import * as THREE from 'three';
+import * as OBC from 'openbim-components';
+
+/**
+ * @namespace Actions
+ */
+const Actions = {};
+
+/**
+ * 
+ * @param {HTMLElement} container The scene container element
+ * @returns {object} {components, world}
+ */
+Actions.init = function (container) {
+    const components = new OBC.Components();
+    const worlds = components.get(OBC.Worlds);
+
+    const world = worlds.create();
+    
+    world.scene = new OBC.SimpleScene(components);
+    world.renderer = new OBC.SimpleRenderer(components, container);
+    world.camera = new OBC.SimpleCamera(components);
+
+    // Starts the app and updates components at 60 fps
+    components.init();
+
+    return {components, world};
+}
+/**
+ * @param {OBC.Components} components 
+ */
+Actions.loadIfc = function (components) {
+    const fragments = components.get(OBC.FragmentsManager);
+
+    console.log('Working...');
+
+    return fragments;
+}
+
+/**
+ * @param {HTMLElement} container The scene container element
+ * @returns {OBC.Components}
+ */
+Actions.createScene = function (container) {
+    const {components, world} = this.init(container);
+
+    world.scene.setup();
+    world.camera.controls.setLookAt(3, 3, 3, 0, 0, 0);
+
+    return components;
+}
 /**
  * @namespace UI
  */
 const UI = {};
 
+/**
+ * 
+ * @param {HTMLElement} container The scene container element
+ */
+UI.setScene = function (container) {
+    this.components = Actions.createScene(container);
+}
 /**
  * @param {string} uiContainer The UI div's id
  */
 UI.ifcLoader = function (uiContainer) {
     const ui = document.querySelector(`#${uiContainer}`);
-    const loadBtn = `
+    const loadBtn = document.createElement('button');
-        <button style="padding: 10px; cursor: pointer; position: absolute; top: 0; right: 4rem">Apri IFC</button>
+    loadBtn.textContent = 'Apri IFC';
-    `;
+    loadBtn.style = 'padding: 10px; cursor: pointer; position: absolute; top: 0; right: 4rem';
+    loadBtn.onclick = Actions.loadIfc(this.components);
 
-    ui.innerHTML += loadBtn;
+    ui.appendChild(loadBtn);
 };
 
 export default UI;