From 540700deb547baf188b5246839a5e586ca708c5c Mon Sep 17 00:00:00 2001
From: cybafelo <theunis.botha1@gmail.com>
Date: Wed, 16 Oct 2019 12:39:36 +0200
Subject: [PATCH] stable

---
 src/Template/Home/home.ctp      |  17 -
 src/Template/Layout/default.ctp | 566 ++++++++++++++++++++++++++------
 webroot/css/style.css           |  83 +++--
 3 files changed, 528 insertions(+), 138 deletions(-)

diff --git a/src/Template/Home/home.ctp b/src/Template/Home/home.ctp
index 99944b4..e69de29 100644
--- a/src/Template/Home/home.ctp
+++ b/src/Template/Home/home.ctp
@@ -1,17 +0,0 @@
-<script>
-    function new3DProject() {
-        new R3.Project.D3({
-            name : 'New Project'
-        });
-    }
-    function new2DProject() {
-        new R3.Project.D2();
-    }
-
-</script>
-<div><h4><?=__('3D Entity Component System based Engine for the Web - based on Three.js')?></h4></div>
-<div><?=__('Design - Create - Experience')?></div>
-<div>-</div>
-<div><?=__('Choose a project from your list above or create a new one')?></div>
-<div><button class="button" onclick="new3DProject()"><?=__('Create a new 3D Project')?></button></div>
-<div><button class="button" onclick="new2DProject()"><?=__('Create a new 2D Project')?></button></div>
diff --git a/src/Template/Layout/default.ctp b/src/Template/Layout/default.ctp
index 2683bf6..4a7ed40 100644
--- a/src/Template/Layout/default.ctp
+++ b/src/Template/Layout/default.ctp
@@ -37,10 +37,11 @@ use Cake\Utility\Inflector;
 <script src="https://api.r3js.org/r3.js"></script>
 <script src="https://api.r3js.org/config.js"></script>
 <script src="https://api.r3js.org/three.js"></script>
+<script src="https://api.r3js.org/pixi.js"></script>
 <script src="https://api.r3js.org/OrbitControls.js"></script>
 
 <div class="div-main">
-    <nav class="navbar navbar-expand-lg navbar-light bg-light" style="z-index: 1">
+    <nav class="navbar navbar-expand-lg navbar-dark bg-dark-trans" style="z-index: 1">
         <a class="navbar-brand" href="/" onclick="alert('You shouldn\'t navigate away from this page - unless you want to lose all your changes'); return false;">r3.js - editor</a>
         <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
             <span class="navbar-toggler-icon"></span>
@@ -48,11 +49,14 @@ use Cake\Utility\Inflector;
         <div class="collapse navbar-collapse" id="navbarNav">
             <ul class="navbar-nav">
                 <li class="nav-item">
-                    <button id="button-menu" class="button-menu"><?=__('Menu') ?></button>
+                    <button id="buttonMenu" class="button-menu"><?=__('Menu') ?></button>
                 </li>
                 <li class="nav-item">
                     <select  id="selectProject" class="nav-link"><option><?=__('Select Project') ?></option></select>
                 </li>
+                <li class="nav-item">
+                    <button id="buttonClose" class="button-menu"><?=__('Close')?></button>
+                </li>
                 <li class="nav-item">
                     <select  id="selectEntity" class="nav-link"><option><?=__('Select Entity') ?></option></select>
                 </li>
@@ -60,39 +64,42 @@ use Cake\Utility\Inflector;
                     <select  id="selectComponent" class="nav-link"><option><?=__('Select Component') ?></option></select>
                 </li>
                 <li class="nav-item">
-                    <select  id="selectCreateComponent" class="nav-link"><option><?=__('Create Component') ?></option></select>
+                    <select  id="selectCreateComponent" class="nav-link"><option value="0"><?=__('Create Something') ?></option></select>
                 </li>
                 <li class="nav-item">
-                    <button id="button-create" class="button-menu"><?=__('Create')?></button>
+                    <button id="buttonCreate" class="button-menu"><?=__('Create')?></button>
                 </li>
                 <li class="nav-item">
                     <select  id="selectCustomCodeComponent" class="nav-link"><option><?=__('Select Code') ?></option></select>
                 </li>
                 <li class="nav-item">
-                    <button id="button-code-editor" class="button-menu"><?=__('Code Editor')?></button>
+                    <button id="buttonCodeEditor" class="button-menu"><?=__('Code')?></button>
                 </li>
                 <li class="nav-item">
-                    <select  id="selectMode" class="nav-link"><option><?=__('Edit Mode')?></option><option><?=__('Run Mode')?></option></select>
+                    <select  id="selectMode" class="nav-link"><option value="0"><?=__('Edit Mode')?></option><option value="1"><?=__('Run Mode')?></option></select>
                 </li>
                 <li class="nav-item">
-                    <button id="button-start" class="button-menu"><?=__('Start')?></button>
+                    <button id="buttonStart" class="button-menu"><?=__('Start')?></button>
                 </li>
                 <li class="nav-item">
-                    <button id="button-pause" class="button-menu"><?=__('Pause')?></button>
+                    <button id="buttonPause" class="button-menu"><?=__('Pause')?></button>
                 </li>
                 <li class="nav-item">
-                    <button id="button-restart" class="button-menu"><?=__('Restart')?></button>
+                    <button id="buttonRestart" class="button-menu"><?=__('Restart')?></button>
                 </li>
             </ul>
             <ul class="navbar-nav ml-auto">
                 <li class="nav-item">
-                    <button id="button-save" class="button-menu" disabled="disabled"><?=__('Save')?></button>
+                    <button id="buttonSave" class="button-menu" disabled="disabled"><?=__('Save')?></button>
                 </li>
                 <li class="nav-item">
-                    <button id="button-delete" class="button-menu" disabled="disabled"><?=__('Delete')?></button>
+                    <button id="buttonSaveAll" class="button-menu" disabled="disabled"><?=__('Save All')?></button>
                 </li>
                 <li class="nav-item">
-                    <button id="button-sign-out" class="button-menu" disabled="disabled" onclick="signOut()"><?=__('Sign Out')?></button>
+                    <button id="buttonDelete" class="button-menu" disabled="disabled"><?=__('Delete')?></button>
+                </li>
+                <li class="nav-item">
+                    <button id="buttonSignOut" class="button-menu" disabled="disabled" onclick="signOut()"><?=__('Sign Out')?></button>
                 </li>
                 <li class="nav-item">
                     <div class="g-signin2" data-onsuccess="onSignIn" data-theme="dark"></div>
@@ -101,7 +108,15 @@ use Cake\Utility\Inflector;
         </div>
     </nav>
 </div>
-<div id="div-workarea" class="div-home">
+<div id="divMenu" class="div-menu">
+    <div><h4><?=__('3D Entity Component System based Engine for the Web - based on Three.js')?></h4></div>
+    <div><?=__('Design - Create - Experience')?></div>
+    <div>-</div>
+    <div><?=__('Choose a project from your list above or create a new one')?></div>
+    <div><button class="button" onclick="R3.New3DProject()"><?=__('Create a new 3D Project')?></button></div>
+    <div><button class="button" onclick="R3.New2DProject()"><?=__('Create a new 2D Project')?></button></div>
+</div>
+<div id="div-workarea" class="div-workarea">
     <?= $this->fetch('content') ?>
 </div>
 <footer>
@@ -109,82 +124,6 @@ use Cake\Utility\Inflector;
 </footer>
 <script>
 
-    R3.GraphicsRuntimes = [
-        new R3.Runtime.Graphics.Three()
-    ];
-
-    R3.Event.Subscribe(
-        R3.Event.GET_RUNTIME,
-        function(component) {
-
-            var graphics = R3.GraphicsRuntimes[0];
-
-            return {
-                graphics : graphics
-            }
-
-        }
-    );
-
-    R3.Event.Subscribe(
-        R3.Event.COMPONENT_REGISTER,
-        function(data) {
-
-            var select = null;
-
-            var option = null;
-
-            if (data.component instanceof R3.Project) {
-
-                select = document.getElementById('selectProject');
-
-                option = document.createElement('option');
-
-                option.appendChild( document.createTextNode(data.component.name) );
-
-                option.value = data.component.id;
-
-                select.appendChild(option);
-
-                select.selectedIndex = select.options.length - 1;
-
-            }
-
-            select = document.getElementById('selectComponent');
-
-            option = document.createElement('option');
-
-            option.appendChild(document.createTextNode(data.component.name));
-
-            option.value = data.component.id;
-
-            select.appendChild(option);
-
-            select.selectedIndex = select.options.length - 1;
-
-            if (data.component instanceof R3.Canvas) {
-                var workarea = document.getElementById('div-workarea');
-                workarea.innerHTML = '';
-                workarea.appendChild(data.component.instance);
-            }
-
-        }
-    );
-
-    R3.Event.Subscribe(
-        R3.Event.GET_API_URL,
-        function() {
-            return {
-                apiUrl : R3.Config.api.url,
-                queryApiUrl : R3.Config.queryApi.url,
-                apiAuthorization : R3.Config.api.clientPassword
-            }
-        }
-    );
-
-    R3.storageSystem = new R3.System.Storage();
-    R3.storageSystem.start();
-
     onSignIn = function(googleUser) {
 
         R3.Event.Async(
@@ -194,9 +133,10 @@ use Cake\Utility\Inflector;
             },
             function(data) {
                 console.log('signed in');
-                document.getElementById('button-sign-out').removeAttribute('disabled');
-                document.getElementById('button-save').removeAttribute('disabled');
-                document.getElementById('button-delete').removeAttribute('disabled');
+                R3.save.removeAttribute('disabled');
+                R3.saveAll.removeAttribute('disabled');
+                R3.delete.removeAttribute('disabled');
+                R3.signOut.removeAttribute('disabled');
             },
             function(error) {
                 console.log('An error occured during Sign-In: ' + error);
@@ -212,18 +152,450 @@ use Cake\Utility\Inflector;
                 null,
                 function(data) {
                     console.log('User signed out.');
-                    document.getElementById('button-sign-out').setAttribute('disabled', 'disabled');
-                    document.getElementById('button-save').setAttribute('disabled', 'disabled');
-                    document.getElementById('button-delete').setAttribute('disabled', 'disabled');
+                    R3.save.setAttribute('disabled', 'disabled');
+                    R3.saveAll.setAttribute('disabled', 'disabled');
+                    R3.delete.setAttribute('disabled', 'disabled');
+                    R3.signOut.setAttribute('disabled', 'disabled');
                 },
                 function(error) {
                     console.log('An error occured during Sign-Out: ' + error);
                 }
             );
-
-
         });
+    };
+
+    R3.projectInfo = {};
+
+    R3.New3DProject = function() {
+        new R3.Project.D3({
+            name : '3D Project - ' + R3.selectProject.options.length
+        });
+        R3.ToggleMenu();
+    };
+
+    R3.New2DProject = function() {
+        new R3.Project.D2({
+            name: '2D Project - ' + R3.selectProject.options.length
+        });
+        R3.ToggleMenu();
+    };
+
+    R3.CloseProject = function() {
+        var project = R3.GetCurrentProject();
+        if (project) {
+            project.remove();
+        }
+    };
+
+    R3.CreateComponent = function() {
+
+        var componentType = Number(R3.selectCreateComponent.options[R3.selectCreateComponent.selectedIndex].value);
+
+        if (componentType === 0) {
+            alert('Please select something to create first');
+            return;
+        }
+
+        var project = R3.GetCurrentProject();
+        if (R3.Utils.UndefinedOrNull(project)) {
+            alert('Please create a project first (by going to the menu), or select one from the list');
+            return;
+        }
+
+        R3.tempSubscription = R3.Event.Subscribe(
+            R3.Event.INSTANCE_LOADED,
+            function(data) {
+
+                /**
+                 * todo : ensure this listener doesn't react on other INSTANCE_LOADED events except the one below
+                 */
+
+                var project = R3.GetCurrentProject();
+
+                if (data.component instanceof R3.Entity) {
+
+                    R3.projectInfo[project.id].entity = data.component;
+
+                    R3.BuildEntityList(project);
+                    R3.BuildComponentList(project, data.component);
+
+                } else {
+
+                    R3.BuildComponentList(project, R3.projectInfo[project.id].entity);
+
+                }
+
+                R3.tempSubscription.remove();
+            }
+        );
+
+        var info = R3.GetComponentInfo(componentType);
+
+        if (info) {
+
+            var totalComponents = project.findComponentsByConstructor(info.constructor).length;
+
+            var entity = R3.projectInfo[project.id].entity;
+
+            var parent = project;
+
+            /**
+             * Entities by default should not belong to other Entities - This should be a manual task
+             */
+            if (entity && info.constructor !== R3.Entity) {
+                parent = entity;
+            }
+
+            new info.constructor({
+                parent : parent,
+                name : project.name + ' - ' + R3.Component.GetComponentFriendlyName(componentType) + ' - ' + Number(Number(totalComponents) + 1)
+            });
+        }
+
+    };
+
+    R3.ApplicationModeChange = function() {
+
+        var project = R3.GetCurrentProject();
+
+        project.applicationMode = Number(R3.selectMode.options[R3.selectMode.selectedIndex].value);
+        project.updateInstance('applicationMode');
+
+    };
+
+    /**
+     * Builds entity list for the project
+     * @param project
+     * @constructor
+     */
+    R3.BuildEntityList = function(project) {
+
+        R3.selectEntity.innerHTML = '';
+
+        option = document.createElement('option');
+        option.appendChild(document.createTextNode('Select Entity'));
+        R3.selectEntity.appendChild(option);
+
+        Object.keys(project.idToObject).map(
+            function(id) {
+                var component = R3.EntityManager.Instance.findComponentById(id);
+                if (component instanceof R3.Entity) {
+                    R3.AddComponentToSelect(R3.selectEntity, id);
+                }
+            }
+        );
+
+        R3.Utils.SortSelect(R3.selectEntity);
+
+        var entity = R3.projectInfo[project.id].entity;
+
+        if (entity) {
+            R3.Utils.SetSelectIndex(R3.selectEntity, entity.id);
+        }
+
+    };
+
+    /**
+     * Builds component list, and if entity specified, only components for this entity
+     * @param project
+     * @param entity
+     * @constructor
+     */
+    R3.BuildComponentList = function(project, entity) {
+
+        if (R3.Utils.UndefinedOrNull(entity)) {
+            entity = null;
+        }
+
+        R3.selectComponent.innerHTML = '';
+
+        var option = document.createElement('option');
+        option.appendChild(document.createTextNode('Select Component'));
+        R3.selectComponent.appendChild(option);
+
+        Object.keys(project.idToObject).map(
+            function(id) {
+                if (entity) {
+                    var component = R3.EntityManager.Instance.findComponentById(id);
+                    if (component.parent === entity) {
+                        R3.AddComponentToSelect(R3.selectComponent, id);
+                    }
+                } else {
+                    R3.AddComponentToSelect(R3.selectComponent, id);
+                }
+            }
+        );
+
+        R3.Utils.SortSelect(R3.selectComponent);
+
+    };
+
+    R3.SetCurrentProject = function(project) {
+
+        R3.Utils.SetSelectIndex(R3.selectProject, project.id);
+
+        R3.BuildEntityList(project);
+
+        R3.BuildComponentList(project, R3.projectInfo[project.id].entity);
+
+        R3.selectMode.selectedIndex = project.applicationMode;
+
+    };
+
+    R3.SetCurrentEntity = function(project, entity) {
+
+        R3.Utils.SetSelectIndex(R3.selectEntity, entity.id);
+
+        R3.projectInfo[project.id].entity = entity;
+
+        R3.BuildEntityList(project);
+
+        R3.BuildComponentList(project, R3.projectInfo[project.id].entity);
+
+    };
+
+    R3.ProjectChange = function() {
+
+        var project = R3.GetCurrentProject();
+
+        R3.SetCurrentProject(project);
+
+    };
+
+    R3.EntityChange = function() {
+
+        var entity  = R3.GetCurrentEntity();
+        var project = R3.GetCurrentProject();
+
+        if (!project) {
+            throw new Error('todo - no project');
+        }
+
+        if (entity) {
+
+            R3.projectInfo[project.id].entity = entity;
+            R3.SetCurrentEntity(project, entity);
+
+        } else {
+
+            R3.projectInfo[project.id].entity = null;
+            R3.SetCurrentProject(project);
+
+        }
+
+    };
+    
+    R3.GetCurrentProject = function() {
+        return R3.EntityManager.Instance.findComponentById(R3.selectProject.options[R3.selectProject.selectedIndex].value);
+    };
+
+    R3.GetCurrentEntity = function() {
+        return R3.EntityManager.Instance.findComponentById(R3.selectEntity.options[R3.selectEntity.selectedIndex].value);
+    };
+
+    R3.AddComponentToSelect = function(select, id) {
+
+        var component = R3.EntityManager.Instance.findComponentById(id);
+
+        if (R3.Utils.UndefinedOrNull(component)) {
+            console.warn('Component not found : ' + id);
+        }
+
+        if (
+            component instanceof R3.Color ||
+            component instanceof R3.Vector2 ||
+            component instanceof R3.Vector3 ||
+            component instanceof R3.Vector4 ||
+            component instanceof R3.Matrix4 ||
+            component instanceof R3.Quaternion
+        ) {
+            return;
+        }
+
+        var option = document.createElement('option');
+        option.value = id;
+//        option.appendChild(document.createTextNode(component.name.replace(R3.GetCurrentProject().name + ' - ','')));
+        option.appendChild(document.createTextNode(component.name));
+        select.appendChild(option);
+    };
+
+    R3.ToggleMenu = function() {
+        R3.menuVisible = !R3.menuVisible;
+        if (R3.menuVisible) {
+            R3.divMenu.style.display = 'flex';
+        } else {
+            R3.divMenu.style.display = 'none';
+        }
+    };
+    
+    R3.CanvasSelect = function(canvas) {
+        return function() {
+
+            var project = R3.Utils.GetParentProject(canvas);
+
+            if (!project) {
+                 throw new Error('todo : could not find project');
+            }
+
+            R3.SetCurrentProject(project);
+        }
+    };
+    
+    R3.GraphicsRuntimes = [
+        new R3.Runtime.Graphics.Three(),
+        new R3.Runtime.Graphics.Pixi()
+    ];
+
+    R3.Event.Subscribe(
+        R3.Event.GET_RUNTIME,
+        function(component) {
+
+            var graphics = R3.GraphicsRuntimes[0];
+
+            if (component.parent instanceof R3.API.Renderer.D2) {
+                graphics = R3.GraphicsRuntimes[1];
+            }
+
+            return {
+                graphics : graphics
+            }
+
+        }
+    );
+
+    R3.Event.Subscribe(
+        R3.Event.MAXIMUM_PROJECTS,
+        function() {
+            alert('Maximum Projects per Session Reached');
+        }
+    );
+
+    R3.Event.Subscribe(
+        R3.Event.GET_APPLICATION_MODE,
+        function() {
+            return Number(R3.selectMode.options[R3.selectMode.selectedIndex].value);
+        }
+    );
+
+    R3.Event.Subscribe(
+        R3.Event.REMOVE_COMPONENT,
+        function(data) {
+
+            if (data.component instanceof R3.Project) {
+
+                delete R3.projectInfo[data.component.id];
+
+                R3.Utils.RemoveFromSelect(R3.selectProject, data.component.id);
+                R3.selectProject.selectedIndex = R3.selectProject.options.length - 1;
+
+                var project = R3.GetCurrentProject();
+                if (project) {
+                    R3.SetCurrentProject(project);
+                }
+            }
+
+            R3.Utils.RemoveFromSelect(R3.selectComponent, data.component.id);
+        }
+    );
+
+    R3.Event.Subscribe(
+        R3.Event.INSTANCE_CREATED,
+        function(data) {
+            if (data.component instanceof R3.Canvas) {
+                var workarea = document.getElementById('div-workarea');
+                workarea.appendChild(data.component.instance);
+                data.component.instance.addEventListener('click', R3.CanvasSelect(data.component));
+            }
+        }
+    );
+
+    R3.Event.Subscribe(
+        R3.Event.PROJECT_LOADED,
+        function(data) {
+
+            var option = null;
+
+            if (data.component instanceof R3.Project) {
+
+                option = document.createElement('option');
+
+                option.appendChild(document.createTextNode(data.component.name));
+
+                option.value = data.component.id;
+
+                R3.selectProject.appendChild(option);
+
+                R3.selectProject.selectedIndex = R3.selectProject.options.length - 1;
+
+                var project = R3.GetCurrentProject();
+
+                R3.projectInfo[project.id] = {
+                    entity : null
+                };
+
+                R3.SetCurrentProject(project);
+            }
+        }
+    );
+    
+    R3.Event.Subscribe(
+        R3.Event.GET_API_URL,
+        function() {
+            return {
+                apiUrl : R3.Config.api.url,
+                queryApiUrl : R3.Config.queryApi.url,
+                apiAuthorization : R3.Config.api.clientPassword
+            }
+        }
+    );
+
+    R3.buttonClose = document.getElementById('buttonClose');
+    R3.buttonClose.addEventListener('click', R3.CloseProject);
+
+    R3.buttonCreate = document.getElementById('buttonCreate');
+    R3.buttonCreate.addEventListener('click', R3.CreateComponent);
+
+    R3.selectCreateComponent = document.getElementById('selectCreateComponent');
+    for (var i = 1; i < R3.MAX_COMPONENTS; i++) {
+        var option = document.createElement('option');
+        option.value = String(i);
+        option.appendChild(document.createTextNode(R3.Component.GetComponentFriendlyName(i)));
+        R3.selectCreateComponent.appendChild(option);
     }
+    R3.Utils.SortSelect(R3.selectCreateComponent);
+
+    R3.menuVisible = true;
+    R3.divMenu = document.getElementById('divMenu');
+    R3.buttonMenu = document.getElementById('buttonMenu');
+    R3.buttonMenu.addEventListener('click', R3.ToggleMenu);
+
+    R3.selectProject = document.getElementById('selectProject');
+    R3.selectProject.addEventListener('change', R3.ProjectChange);
+
+    R3.selectEntity = document.getElementById('selectEntity');
+    R3.selectEntity.addEventListener('change', R3.EntityChange);
+
+
+    R3.selectComponent = document.getElementById('selectComponent');
+
+    R3.selectMode = document.getElementById('selectMode');
+    R3.selectMode.addEventListener("change", R3.ApplicationModeChange);
+
+    R3.storageSystem = new R3.System.Storage();
+    R3.storageSystem.start();
+
+    R3.renderSystem = new R3.System.Render();
+    R3.renderSystem.start();
+
+    R3.inputSystem = new R3.System.Input();
+    R3.inputSystem.start();
+
+    R3.save = document.getElementById('buttonSave');
+    R3.saveAll = document.getElementById('buttonSaveAll');
+    R3.delete = document.getElementById('buttonDelete');
+    R3.signOut = document.getElementById('buttonSignOut');
+
+
 </script>
 </body>
 </html>
\ No newline at end of file
diff --git a/webroot/css/style.css b/webroot/css/style.css
index 4f910d3..1a92d6e 100644
--- a/webroot/css/style.css
+++ b/webroot/css/style.css
@@ -10,29 +10,50 @@ body {
     padding:0;
 }
 
-/*div.sticky {*/
-/*    position:fixed;*/
-/*    height: 100%;*/
-/*    width:100%;*/
-/*    background-color:#111111;*/
-/*}*/
+.bg-dark-trans {
+    background-color: #343a40ad;
+}
 
-/*div.centered {*/
-/*    text-align: center;*/
-/*}*/
+select {
+    background-color: #343a40ad;
+}
+
+canvas {
+    box-shadow: 0px 0 8px 8px #7dff9987;
+    border: 2px transparent solid;
+    margin: 8px;
+}
+
+canvas:focus,
+canvas:active
+{
+    outline: unset;
+    border: 2px #b2dab2 solid;
+}
+
+.div-menu {
+    position: fixed;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    top: 10%;
+    left: 10%;
+    width: 80%;
+    height: 80%;
+    z-index: 2;
+    box-shadow: 0px 0 8px 8px #7dff9987;
+    background-color: #1a1a1acc;
+    color: #fff;
+}
 
-/*canvas {*/
-/*    bottom:0;*/
-/*    width:100%;*/
-/*    height:100%;*/
-/*}*/
 .button:hover {
-    box-shadow: 0 0 10px 10px #00cc2b;
+    box-shadow: 0px 0px 10px 10px #7dff99;
 }
 
 .button:focus {
     outline:unset;
-    border: 2px #2ca02c solid;
+    border: 2px #b2dab2 solid;
 }
 
 .button {
@@ -40,7 +61,7 @@ body {
     border: 2px transparent solid;
     margin-top: 20px;
     border-radius: 18px;
-    box-shadow: 0 0 10px 0px #00cc2b;
+    box-shadow: 0 0 10px 0px #7dff99;
     background-color: transparent;
     color: #fff;
     padding: 5px 10px 5px 10px;
@@ -49,20 +70,32 @@ body {
 
 .button-menu:focus {
     outline:unset;
-    border:2px #2ca02c solid;
+    border: 2px #b2dab2 solid;
 }
 
 .button-menu:hover {
-    box-shadow: 2px 3px 20px 0px #00cc2b;
+    box-shadow: 0px 0px 8px 8px #7dff99f7;
+    color: #1fe449c2;
 }
 
 .button-menu:disabled {
-    box-shadow: 2px 3px 7px 0px #ff898599;
-    color: #ec6c6c78;
+    color: #ef8181a1;
+    box-shadow: 0 0 10px 0px #ff3434c9;
 }
 
-
 .button-menu {
+    border: 2px #ffffff00 solid;
+    transition: box-shadow 0.5s, border 0.5s, color 0.5s;
+    height: 35px;
+    background-color: transparent;
+    color: #a9a6a6;
+    box-shadow: 0 0 6px 6px #7dff9973;
+    margin-left: 7px;
+    margin-right: 7px;
+    border-radius: 15px;
+}
+
+.button-menu-light {
     border: 2px transparent solid;
     transition: box-shadow 0.5s, border 0.5s;
     height: 35px;
@@ -80,13 +113,15 @@ body {
     background-color: #000000ad;
 }
 
-.div-home {
+.div-workarea {
+    padding-top: 2.5%;
+    overflow-y: auto;
     color: #fff;
     display: flex;
     justify-content: center;
     align-items: center;
     background-color: #000000ad;
-    flex-direction: column;
+    flex-wrap:wrap;
     height: 100%;
     top: 0;
     left: 0;