Colors

.vscode/launch.json

@@ -72,7 +72,7 @@
             "name": "Launch playground (Chrome)",
             "type": "chrome",
             "request": "launch",
-            "url": "http://localhost:1338/Playground/index-local.html",
+            "url": "http://localhost:1338/Playground/public/index-local.html",
             "webRoot": "${workspaceRoot}/",
             "sourceMaps": true,
             "preLaunchTask": "run",

Playground/src/components/footerComponent.tsx

@@ -36,7 +36,7 @@ export class FooterComponent extends React.Component<IFooterComponentProps> {
 
     public render() {
         return (
-            <div id="footer">   
+            <div id="footer" className={(this.props.globalState.language === "JS" ? "background-js" : "background-ts")}>   
                 {
                     window.innerWidth < this.props.globalState.MobileSizeTrigger &&
                     <div className="modeBar">

Playground/src/scss/header.scss

@@ -8,6 +8,7 @@
     display: grid;
     grid-template-columns: auto 1fr;
     grid-template-rows: 100%;
+    background: #201936;
 
     .logo-area {
         grid-column: 1;
@@ -51,14 +52,6 @@
         grid-template-columns: 74px 144px 1fr;
         grid-template-rows: 100%;
 
-        .background-ts {
-            background-color: #bb464b;
-        }
-
-        .background-js {
-            background-color: #3f3461;
-        }
-
         .language-button {        
             grid-row: 1;
             grid-column: 2;

Playground/src/scss/main.scss

@@ -37,4 +37,12 @@
 
 .hidden {
     display: none;
-}
+}
+
+.background-ts {
+    background-color: #bb464b;
+}
+
+.background-js {
+    background-color: #3f3461;
+}

Playground/src/tools/monacoManager.ts

@@ -91,40 +91,40 @@ var createScene = function() {
         });
         
         this._editor.setValue(`var createScene = function () {
-
-            // This creates a basic Babylon Scene object (non-mesh)
-            var scene = new BABYLON.Scene(engine);
-        
-            // This creates and positions a free camera (non-mesh)
-            var camera = new BABYLON.FreeCamera("camera1", new BABYLON.Vector3(0, 5, -10), scene);
-        
-            // This targets the camera to scene origin
-            camera.setTarget(BABYLON.Vector3.Zero());
-        
-            // This attaches the camera to the canvas
-            camera.attachControl(canvas, true);
-        
-            // This creates a light, aiming 0,1,0 - to the sky (non-mesh)
-            var light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(0, 1, 0), scene);
-        
-            // Default intensity is 1. Let's dim the light a small amount
-            light.intensity = 0.7;
-        
-            // Our built-in 'sphere' shape.
-            var sphere = BABYLON.MeshBuilder.CreateSphere("sphere", {diameter: 2, segments: 32}, scene);
-        
-            // Move the sphere upward 1/2 its height
-            sphere.position.y = 1;
-        
-            // Our built-in 'ground' shape.
-            var ground = BABYLON.MeshBuilder.CreateGround("ground", {width: 6, height: 6}, scene);
-        
-            return scene;
-        
-        };`);
+        // This creates a basic Babylon Scene object (non-mesh)
+        var scene = new BABYLON.Scene(engine);
+    
+        // This creates and positions a free camera (non-mesh)
+        var camera = new BABYLON.FreeCamera("camera1", new BABYLON.Vector3(0, 5, -10), scene);
+    
+        // This targets the camera to scene origin
+        camera.setTarget(BABYLON.Vector3.Zero());
+    
+        // This attaches the camera to the canvas
+        camera.attachControl(canvas, true);
+    
+        // This creates a light, aiming 0,1,0 - to the sky (non-mesh)
+        var light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(0, 1, 0), scene);
+    
+        // Default intensity is 1. Let's dim the light a small amount
+        light.intensity = 0.7;
+    
+        // Our built-in 'sphere' shape.
+        var sphere = BABYLON.MeshBuilder.CreateSphere("sphere", {diameter: 2, segments: 32}, scene);
+    
+        // Move the sphere upward 1/2 its height
+        sphere.position.y = 1;
+    
+        // Our built-in 'ground' shape.
+        var ground = BABYLON.MeshBuilder.CreateGround("ground", {width: 6, height: 6}, scene);
+    
+        return scene;
+    
+    };`
+        );
     }
-
-    // Provide an adornment for BABYLON.ColorX types: color preview
+    
+    // Provide an adornment for BABYLON.ColorX types: color preview 
     protected _setupMonacoColorProvider() {
         monaco.languages.registerColorProvider(this.globalState.language == "JS" ? "javascript" : "typescript", {
             provideColorPresentations: (model: any, colorInfo: any) => {

Tools/Gulp/tasks/gulpTasks-watchApps.js

@@ -39,7 +39,7 @@ gulp.task("watchApps", function startWatch() {
 
             var outputDirectory = settings.distDirectory;
             tasks.push(
-                webpackStream({ config: wpConfig }, webpack)
+                webpackStream(wpConfig , webpack)
                     .pipe(gulp.dest(outputDirectory))
             );
         }

Tools/Gulp/tasks/gulpTasks-watchLibraries.js

@@ -51,7 +51,7 @@ gulp.task("watchLibraries", function startWatch() {
 
                 var outputDirectory = settings.localDevUMDDirectory;
                 tasks.push(
-                    webpackStream({ config: wpConfig }, webpack)
+                    webpackStream(wpConfig, webpack)
                         .pipe(gulp.dest(outputDirectory))
                 );