Playground : New design. Media queries for little screens and mobile. JS modification for mobile interactions. Some img and css cleaning.

Playground/css/index.css

@@ -80,7 +80,7 @@ body {
     color: #BB464B;
 }
 .wrapper {
-    height: calc(100% - 40px - 30px); /* nvabar top and bottom*/
+    height: calc(100% - 55px - 35px); /* navbar top and bottom*/
     width: calc(100%);
     display: -ms-flexbox;
     display: flex;
@@ -136,30 +136,31 @@ body {
 }      
 
 #exampleList {
-    padding-top: 5px;
-
     display: none;
     position: absolute;
-    top: 40px;
+    top: 55px;
     right: 0;
     width: 400px;
-    height: calc(100% - 75px);
+    height: calc(100% - 90px); /* 55px + 35px */
     overflow-y: auto;
-
-    border-right: 1px solid #efefef;
+    background-color: white;
 }
 #exampleList #exampleBanner {
-    background-color: #E0684B;
     text-align: center;
     padding: 10px 0;
-    margin-left: 2px;
+}
+#exampleList #exampleBanner.languageJS {
+    background-color: #3f3461;
+}
+#exampleList #exampleBanner.languageTS {
+    background-color: #bb464b;
 }
 #exampleList #exampleBanner h1 {
+    width: 100%;
     text-align: center;
     font-weight: 700;
-    color: #BB464B;
-    font-size: 2em;
-    margin: .67em 0;
+    color: white;
+    font-size: 25px;
 }
 #exampleList .horizontalSeparator {
     width: 80%;
@@ -244,8 +245,7 @@ body {
 }
 
 .wrapper #jsEditor {
-    padding-top:5px;
-    height: calc(100% - 10px);
+    padding-top: 5px;
 }
 
 .wrapper #jsEditor.light {
@@ -264,21 +264,32 @@ body {
     display: block;
     font-size: 0;
 }
-#fpsLabel {
+.fpsLabel {
     position: absolute;
-    right: 10px;
-    top: 50px;
-    cursor: default;
+    top: 80px;
+    right: 0;
+    width: 60px;
+    padding: 2px 8px 5px 0px;
     z-index:10;
-    background-color: #E0684B;
+    background-color: #3f3461;
     color:white;
-    padding:5px;
-    border-radius: 3px;
+    font-size: 18px;
+    text-align: right;
+    cursor: default;
     pointer-events: none;
     user-select: none;
+    box-shadow: 0 2px 5px #000;
+}
+.fpsLabel.languageJS {
+    background-color: #3f3461;
 }
+.fpsLabel.languageTS {
+    background-color: #bb464b;
+}
+
 .navbar {
-    height: 40px;
+    height: 55px;
+    line-height: 55px;
     width: 100%;
     font-weight: 400;
     -webkit-user-select: none;
@@ -287,63 +298,110 @@ body {
     user-select: none;
     position: relative;
     z-index:5;
-    line-height: 40px;
-}
-.navbar.dark {
-    background-color: #333;
     box-shadow: 0 3px 10px #000;
 }
-.navbar.light {
-    background-color: #efefef;
-    box-shadow: 0 3px 10px #999;
+.navbar a {
+    text-decoration: none;
+    color: inherit;
 }
-.navbar .title {
-    height: 40px;
-    padding-left: 10px;
-    color: #BB464B;
+.navbar .categoryTitle {
     display: inline-block;
+    vertical-align: top;
+    background-color: #201936;
+    padding-right: 20px;
+}
+.navbar .logo {
+    vertical-align: top;
+    height: 55px;
+    float: left;
 }
 .navbar .version {
-    height: 40px;
     display: inline-block;
-    color: #E0684B;
+    vertical-align: top;
+    height: 55px;
     margin-right: 20px;
+    font-size: 20px;
+    color: #d5d2ca;
 }
+.navbar .versionSub {
+    font-size: 20px;
+    color: #fff;
+    font-weight: bold;
+}
+
+.languageJS {
+    background-color: #3f3461;
+}
+.languageTS {
+    background-color: #bb464b;
+}
+
 .navbar .category {
-    height: 40px;
-    margin: 0 15px 0 15px;
     display: inline-block;
+    vertical-align: top;
+    height: 55px;
+    color: white;
 }
 .navbar .category.right {
     position: absolute;
     right: 0;
     top: 0;
 }
-.button {
+
+.navbar .category .buttonJStoTS {
     display: inline-block;
-    height: 25px;
-    line-height: 23px;
-    color: white;
-    background-color: #E0684B;
-    margin: 0 2px 0 2px;
-    padding: 0 10px 0 10px;
-    font-size: 0.85em;
-    border-radius: 3px;
+    vertical-align: top;
+    width: 140px;
+    height: 55px;
+    border-top-left-radius: 14px;
+    margin-left: -15px;
+    padding-right: 4px;
+    font-size: 18px;
+    text-align: center;
+    cursor: pointer;
+}
+.navbar .category .buttonJStoTS.floatLeft {
+    float: left;
 }
 
+.button {
+    cursor: pointer;
+    display: inline-block;
+    width: 55px;
+    height: 100%;
+    vertical-align: top;
+    line-height: 100%;
+    text-align: center;
+}
+.button img {
+    height: 100%;
+    width: 100%;
+}
+.buttonSpaceKiller {
+    display: none;
+    width: 0;
+    margin-left: -20px;
+}
+.languageJS .button img {
+    filter: invert(57%) sepia(80%) saturate(2031%) hue-rotate(215deg) brightness(101%) contrast(101%);
+}
+.languageTS .button img {
+    filter: invert(64%) sepia(78%) saturate(940%) hue-rotate(323deg) brightness(105%) contrast(103%);
+}
 .button i {
     margin-left: 10px;
 }
 .button:hover {
     cursor: pointer;
-    background-color: #BB464B;
+    background-color: white;
 }
-.navbar .button.run {
-    height: 30px;
-    line-height: 28px;
-    background-color: #BB464B;
-    font-size: 1.0em;
+.languageJS .button:hover img {
+    filter: invert(17%) sepia(61%) saturate(651%) hue-rotate(214deg) brightness(91%) contrast(84%);
 }
+.languageTS .button:hover img {
+    filter: invert(34%) sepia(21%) saturate(3832%) hue-rotate(324deg) brightness(88%) contrast(82%);
+}
+
 .navbar .select {
     position: relative;
 }
@@ -351,57 +409,80 @@ body {
 .navbar .select .subSelect {
     position: relative; 
 }
-.navbar .select:after {
-    font-family: 'FontAwesome', sans-serif;
-    content: "\00a0 \00a0 \00a0 \f078";
-}
 .navbar .select .toDisplay {
-    border: 1px solid #E0684B;
     position: absolute;
     z-index: 10;
-    left: 0;
-    top: 25px;
-    min-width: 100%;
-    width: 150px;
+    right: 0;
+    top: 55px;
+    width: 190px;
     display: none;
+    text-transform: uppercase;
+    background-color: #201936;
+}
+.navbar .select .toDisplay.languageJS .option {
+    background-color: #9379e6;
+}
+.navbar .select .toDisplay.languageTS .option {
+    background-color: #e0684b;
+}
+.navbar .select .toDisplay.currentVersionDisplay {
+    width: auto;
 }
 
 .navbar .select .subSelect .toDisplaySub {
-    border: 1px solid #E0684B;
     position: absolute;
     z-index: 10;
-    left: 100%;
+    right: 100%;
     top: 0;
     min-width: 100%;
     display: none;
 }
+.navbar .select .subSelect .toDisplaySub .option {
+    background-color: white;
+}
+.navbar .select .subSelect .toDisplaySub.languageJS .option {
+    color: #9379e6
+}
+.navbar .select .subSelect .toDisplaySub.languageJS .option:hover {
+    color: white;
+    background-color: #9379e6;
+}
+.navbar .select .subSelect .toDisplaySub.languageJS .option.selected {
+    color: white;
+    background-color: #bfabff;
+}
+.navbar .select .subSelect .toDisplaySub.languageTS .option {
+    color: #e0684b;
+}
+.navbar .select .subSelect .toDisplaySub.languageTS .option:hover {
+    color: white;
+    background-color: #e0684b;
+}
+.navbar .select .subSelect .toDisplaySub.languageTS .option.selected {
+    color: white;
+    background-color: #ff7656;
+}
 
 .navbar .select .toDisplay .option {
-    font-size: 0.9em;
+    font-size: 16px;
     height: 35px;
     line-height: 35px;
-    padding: 0px 5px 0px 5px;
-    text-align: center;
-    border-bottom : 1px solid rgba(0,0,0,0.1);
+    padding: 1px 5px 1px 15px;
+    text-align: left;
 }
 
-.navbar .select .toDisplay .option.light:hover {
-    cursor: pointer;
-    background-color: #d9d9d9;
-}
-
-
-.navbar .select .toDisplay .option.dark {
-    background-color: #333;
-    color: white;
-}
 .navbar .select .toDisplay .option.light {
     background-color: white;
     color: #E0684B;
 }
-.navbar .select .toDisplay .option.dark:hover {
+.navbar .select .toDisplay .option.light:hover {
     cursor: pointer;
-    background-color: #555;
+    background-color: #d9d9d9;
+}
+
+.navbar .select .toDisplayBig.dark {
+    background-color: #333;    
+    color:white;
 }
 
 .navbar .select .toDisplayBig {
@@ -420,16 +501,6 @@ body {
     
 }
 
-.navbar .select .toDisplayBig.light {
-    background-color: white;    
-    color: #BB464B;
-}
-
-.navbar .select .toDisplayBig.dark {
-    background-color: #333;    
-    color:white;
-}
-
 .navbar .select .toDisplayBig ul {
     column-count: 3;        
     padding:0;
@@ -464,8 +535,6 @@ body {
     color: #E0684B;
 }
 
-
-
 .navbar .check:after {
     font-family: 'FontAwesome', sans-serif;
     content: "\00a0 \00a0 \00a0 \f14a";
@@ -477,12 +546,18 @@ body {
     font-family: 'FontAwesome', sans-serif;
     content: "\00a0 \00a0 \00a0 \f096";
 }
+
+#qrCodeImage div {
+    width: 256px;
+    height: 256px;
+}
+
 #errorZone {
     display:none;
     position: absolute;
     width: 50%;
     left: 25%;
-    bottom: 40px;
+    bottom: 45px;
     background-color: #C73228;
     padding:20px;
     border-radius: 5px;
@@ -506,53 +581,42 @@ body {
 /* Navbar bottom */
 
 .navbarBottom {
-    height:30px;
-    width:100%;
-    line-height:30px;
     position:relative;
-}
-.navbarBottom.dark {
-    background-color: #333;
-}
-.navbarBottom.light {
-    background-color: #efefef;
+    height:35px;
+    width:100%;
+    line-height:35px;
+    background-color: #201936;
 }
 
 .navbarBottom #statusBar {
-    line-height:30px;
+    line-height:35px;
     color: #E74C3C;
     font-size: 14px;
     padding-left:20px;
 }
 
-
 .navbarBottom .links {
     position:absolute;
-    right : 0;
-    top:-1px;
-    height:30px;
+    right: 0;
+    height:35px;
+    line-height: 35px;
     padding-right:20px;
 }
 .navbarBottom .links .link{
-    height:30px;
-    display:inline-block;
-    color:#999;
-    padding: 0 10px 0 10px;
-    margin : 0 5px 0 5px;
-    font-size:0.8em;
-}
-.navbarBottom .links .link.light:hover{
-    color:#999;
-    background-color:#333;
+    display: inline-block;
+    line-height: 35px;
+    font-size: 16px;
+    color: white;
 }
-.navbarBottom .links .link.dark:hover{
-    color:#333;
-    background-color:#eee;
+.navbarBottom .links .link:hover{
+    background-color:#3F3461;
 }
 .navbarBottom .links .link a{
     text-decoration: none;
-    color:#999;
-    display: inline-block;
+    line-height: 35px;
+    padding: 6px 15px;
+    font-size: 16px;
+    color: white;
 }
 
 /* Save form & co */
@@ -568,18 +632,17 @@ body {
 }
 .save-layer .save-form {
     position: absolute;
-    top: 150px;
+    top: 80px;
     left: calc(50% - 205px);
     width: 410px;
     height: 370px;
     padding-top: 15px;
-    -webkit-border-radius: 6px;
-    -moz-border-radius: 6px;
-    border-radius: 6px;
-    background-color: rgba(27, 27, 27, 0.75);
-    border-color: #252525;
+    -webkit-border-radius: 4px;
+    -moz-border-radius: 4px;
+    border-radius: 4px;
     color: white;
     font-size: 14px;
+    box-shadow: 0 3px 10px #000;
 }
 .save-layer .save-form .separator {
     width: 350px;
@@ -595,42 +658,80 @@ body {
     margin-bottom: 20px;
     padding:5px;
 }
+.save-layer .save-form .save-form-buttons div {
+    cursor: pointer;
+    display: inline-block;
+    width: 100px;
+}
+.save-layer .save-form .save-form-buttons div:hover {
+    font-weight: bold;
+}
 
-/*Media queries*/
+/* Media queries */
 
-@media (min-width: 1475px) {
-    .navBar1600 { display: block; }
-    .navBar1475 { display: none; }
-    .navBar1030 { display: none; }
-    .navBar750 { display: none; }
+@media (min-width: 1180px) {
+    .navBar1280 { display: block; }
+    .navBar920 { display: none; }
+    .navBar710 { display: none; }
+    .navBar550 { display: none; }
+
+    #qrCodeImage {
+        height:auto;
+        padding: 20px;
+        padding-bottom: 10px;
+    }
 
     .navbar .select .toDisplayBig ul {
         column-count: 3;
     }
 }
-@media (max-width: 1475px) {
-    .navBar1600 { display: none; }
-    .navBar1475 { display: none; }
-    .navBar1030 { display: block; }
-    .navBar750 { display: none; }
+@media (max-width: 1180px) and (min-width: 920px) {
+    .navBar1280 { display: none; }
+    .navBar920 { display: block; }
+    .navBar710 { display: none; }
+    .navBar550 { display: none; }
+
+    #qrCodeImage {
+        height:auto;
+        padding: 20px;
+        padding-bottom: 10px;
+    }
 
     .navbar .select .toDisplayBig ul {
         column-count: 2;
     }
-}
-@media (max-width: 750px) {
-    .navBar1600 { display: none; }
-    .navBar1475 { display: none; }
-    .navBar1030 { display: none; }
-    .navBar750 { display: block; }
-    .removeOnPhone {
-        display : none !important;
+
+    .navbar .category .buttonJStoTS {
+        width: 70px;
     }
-    .navbar .select .toDisplayBig {
-        width:350px;
-    }    
+}
+@media (max-width: 920px) {
+    .navBar1280 { display: none; }
+    .navBar920 { display: block; }
+    .navBar710 { display: none; }
+    .navBar550 { display: none; }
+    
     .navbar .select .toDisplayBig ul {
-        column-count: 1;
+        column-count: 2;
+    }
+    .navbar .categoryTitle {
+        padding-right: 15px;
+    }
+    .navbar .version {
+        margin-right: 10px;
+        margin-left: -10px;
+    }
+    .navbar .versionSub {
+        font-size: 14px;
+    }
+    .navbar .category .buttonJStoTS {
+        width: 65px;
     }
-}
 
+    .button {
+        width: 45px;
+    }
+    .buttonSpaceKiller {
+        display: inline-block;
+    }
+}

Playground/css/index550.css

@@ -0,0 +1,76 @@
+@media (max-width: 550px) {
+    .navBar1280 { display: none; }
+    .navBar920 { display: none; }
+    .navBar710 { display: none; }
+    .navBar550 { display: block; }
+
+    #fpsLabel {
+        position: fixed;
+        top: auto;
+        bottom: 0;
+        box-shadow: none;
+    }
+    .navbarBottom {
+        display: none;
+    }
+    .wrapper {
+        height: calc(100% - 55px);
+    }
+
+    #JStoTSbar {
+        padding-left: 8px;
+    }
+    #JStoTSbar .buttonJStoTS {
+        border-top-left-radius: 12px;
+    }
+
+    .navbar .categoryTitle {
+        position: fixed;
+        bottom: 0;
+        left: 0;
+        height: 35px;
+        line-height: 35px;
+    }
+    .navbar .categoryTitle .logo, .navbar .categoryTitle .version {
+        vertical-align: top;
+        height: 100%;
+        margin: 0;
+    }
+    .navbar .categoryTitle .logo, .navbar .categoryTitle .version .versionSub {
+        vertical-align: top;
+    }
+
+    .navbar .select .toDisplay {
+        position: fixed;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        text-align: center;
+        overflow-y: auto;
+    }
+    .navbar .select .toDisplay .option {
+        text-align: center;
+        padding: 1px;
+        border-top: 1px solid white;
+        font-size: 15px;
+        height: 33px;
+        line-height: 33px;
+    }
+    .navbar .select .toDisplay .option:last-of-type {
+        border-bottom: 1px solid white;
+    }
+
+    .navbar .select .subSelect .toDisplaySub {
+        position: fixed;
+        top: 55px;
+        left: 0;
+        top: 55px;
+        width: 100%;
+        height: 100%;
+        text-align: center;
+        overflow-y: auto;
+    }
+    .navbar .select .subSelect .toDisplaySub .option {
+        margin-top: 1px;
+    }
+}

Playground/css/index710.css

@@ -0,0 +1,46 @@
+@media (max-width: 710px) {
+    .navBar1280 { display: none; }
+    .navBar920 { display: none; }
+    .navBar710 { display: block; }
+    .navBar400 { display: none; }
+
+    .removeOnPhone {
+        display : none !important;
+    }
+
+    #fpsLabel {
+        top: 60px;
+    }
+    #exampleList {
+        width: 100%;
+    }
+
+    .navbar {
+        box-shadow: 0 2px 5px #000;
+    }
+
+    .navbarBottom .links .link a {
+        font-size: 14px;
+    }
+}
+
+.navbar.navBar710 .categoryTitle {
+    width: 155px;
+    height: 100%;
+    text-align: center;
+}
+.navbar.navBar710 .categoryTitle .logo {
+    margin-top: -7px;
+    margin-left: -5px;
+}
+.navbar.navBar710 .categoryTitle .version {
+    position: relative;
+    top: -35px;
+    left: 20px;
+}
+.navbar.navBar710 .select .toDisplayBig {
+    width:350px;
+}    
+.navbar.navBar710 .select .toDisplayBig ul {
+    column-count: 1;
+}

Playground/debug.html

@@ -1,12 +1,18 @@
 <!DOCTYPE html>
 <html>
 
+<!--
+    The purpose of the Debug.html file is to debug : ???
+    // TO DO - Complete that
+    // TO DO - Fix the console error : "Manifest: Line: 1, column 1, Unexpected token"
+ -->
+
 <head>
     <title>Babylon.js Playground</title>
     <meta charset='utf-8' />
     <meta name="viewport" content="width=device-width, user-scalable=no">
     <link rel="shortcut icon" href="https://www.babylonjs.com/favicon.ico">
-    <link rel="stylesheet" href="https://use.typekit.net/cta4xsb.css">
+
     <link rel="apple-touch-icon" sizes="57x57" href="https://www.babylonjs.com/img/favicon/apple-icon-57x57.png">
     <link rel="apple-touch-icon" sizes="60x60" href="https://www.babylonjs.com/img/favicon/apple-icon-60x60.png">
     <link rel="apple-touch-icon" sizes="72x72" href="https://www.babylonjs.com/img/favicon/apple-icon-72x72.png">
@@ -21,22 +27,30 @@
     <link rel="icon" type="image/png" sizes="32x32" href="https://www.babylonjs.com/img/favicon/favicon-32x32.png">
     <link rel="icon" type="image/png" sizes="96x96" href="https://www.babylonjs.com/img/favicon/favicon-96x96.png">
     <link rel="icon" type="image/png" sizes="16x16" href="https://www.babylonjs.com/img/favicon/favicon-16x16.png">
+
     <link rel="manifest" href="https://www.babylonjs.com/img/favicon/manifest.json">
     <meta name="msapplication-TileColor" content="#ffffff">
     <meta name="msapplication-TileImage" content="https://www.babylonjs.com/img/favicon/ms-icon-144x144.png">
     <meta name="msapplication-config" content="https://www.babylonjs.com/img/favicon/browserconfig.xml">
     <meta name="theme-color" content="#ffffff">
 
+    <link rel="stylesheet" href="https://use.typekit.net/cta4xsb.css" />
+    <link rel="stylesheet" href="css/index.css" />
+    <link rel="stylesheet" href="css/index710.css" />
+    <link rel="stylesheet" href="css/index550.css" />
+
+    <!-- Pep -->
     <script src="https://code.jquery.com/pep/0.4.2/pep.min.js"></script>
-    <!--For canvas/code separator-->
+    <!-- For canvas/code separator -->
     <script src="js/libs/split.js"></script>
 
+    <!-- DatGUI CDN -->
     <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.6.2/dat.gui.min.js"></script>
     <!-- jszip -->
     <script src="js/libs/jszip.min.js"></script>
     <script src="js/libs/fileSaver.js"></script>
 
-    <!-- Babylon.js -->
+    <!-- Dependencies -->
     <script src="https://preview.babylonjs.com/ammo.js"></script>
     <script src="https://preview.babylonjs.com/cannon.js"></script>
     <script src="https://preview.babylonjs.com/Oimo.js"></script>
@@ -45,7 +59,7 @@
     <script src="https://preview.babylonjs.com/gui/babylon.gui.js"></script>
     <script src="https://preview.babylonjs.com/inspector/babylon.inspector.bundle.js"></script>
     <script src="https://preview.babylonjs.com/nodeEditor/babylon.nodeEditor.js"></script>
-
+    <!-- Babylon.js -->
     <script src="https://preview.babylonjs.com/materialsLibrary/babylon.fireMaterial.min.js"></script>
     <script src="https://preview.babylonjs.com/materialsLibrary/babylon.waterMaterial.min.js"></script>
     <script src="https://preview.babylonjs.com/materialsLibrary/babylon.lavaMaterial.min.js"></script>
@@ -85,17 +99,17 @@
 
     <script src="https://preview.babylonjs.com/serializers/babylonjs.serializers.min.js"></script>
 
-    <script src="https://rawgit.com/BabylonJS/Extensions/master/ClonerSystem/src/babylonx.cloner.js"></script>
-    <script src="https://rawgit.com/BabylonJS/Extensions/master/CompoundShader/src/babylonx.CompoundShader.js"></script>
-    <link href="css/index.css" rel="stylesheet" />
-
     <!-- Monaco -->
     <script src="node_modules/monaco-editor/min/vs/loader.js"></script>
 
+    <!-- Extensions -->
+    <script src="https://rawgit.com/BabylonJS/Extensions/master/ClonerSystem/src/babylonx.cloner.js"></script>
+    <script src="https://rawgit.com/BabylonJS/Extensions/master/CompoundShader/src/babylonx.CompoundShader.js"></script>
 </head>
 
 <body>
-    <div class="navbar navBar1600">
+    <!-- TO DO : Be sure this can be removed -->
+    <!-- <div class="navbar navBar1600">
         <div class="title">
             Babylon.js Playground
         </div>
@@ -430,8 +444,323 @@
                 <span class="examplesButton">Examples</span>
             </div>
         </div>
+    </div> -->
+
+    <!-- Big screens -->
+    <div class="navbar navBar1280 languageJS">
+        <div class="categoryTitle">
+            <img class="logo" src="css/img/logo_v4.svg">
+            <div class="version">Playground <span class="versionSub" id="mainTitle1280"></span></div>
+        </div>
+
+        <div class="category languageJS" id="JStoTSbar">
+            <div class="buttonJStoTS languageTS" id="toTSbutton1280">Typescript</div>
+            <div class="buttonJStoTS languageJS" id="toJSbutton1280">Javascript</div>
+            <div class="button run" id="runButton1280"><img src="css/img/playButton.svg"></div>
+            <div class="button" id="saveButton1280"><img src="css/img/saveButton.svg"></div>
+            <div class="button removeOnPhone" id="zipButton1280"><img src="css/img/downloadButton.svg"></div>
+            <div class="button" id="newButton1280"><img src="css/img/newButton.svg"></div>
+            <div class="button removeOnPhone" id="clearButton1280"><img src="css/img/clearButton.svg"></div>
+
+            <div class="button select"><img src="css/img/optionsButton.svg">
+                <div class="toDisplay languageJS">
+                    <div class="option subSelect">Theme <i class="fa fa-chevron-right" aria-hidden="true"></i>
+                        <div class="toDisplaySub languageJS">
+                            <div class="option selected" id="darkTheme1280">Dark</div>
+                            <div class="option" id="lightTheme1280">Light</div>
+                        </div>
+                    </div>
+                    <div class="option subSelect">Font size <i class="fa fa-chevron-right" aria-hidden="true"></i>
+                        <div class="toDisplaySub displayFontSize languageJS">
+                            <div class="option" onclick="setFontSize(12);">12</div>
+                            <div class="option selected" onclick="setFontSize(14);">14</div>
+                            <div class="option" onclick="setFontSize(16);">16</div>
+                            <div class="option" onclick="setFontSize(18);">18</div>
+                            <div class="option" onclick="setFontSize(20);">20</div>
+                            <div class="option" onclick="setFontSize(22);">22</div>
+                        </div>
+                    </div>
+                    <div class="option noSubSelect" id="safemodeToggle1280">Safe mode
+                        <i class="fa fa-square" aria-hidden="true"></i>
+                    </div>
+                    <div class="option checked noSubSelect" id="editorButton1280">Editor
+                        <i class="fa fa-check-square" aria-hidden="true"></i>
+                    </div>
+                    <div class="option noSubSelect" id="fullscreenButton1280">Fullscreen</div>
+                    <div class="option noSubSelect" id="editorFullscreenButton1280">Editor Fullscreen</div>
+                    <div class="option noSubSelect" id="formatButton1280">Format code</div>
+                    <div class="option noSubSelect" id="minimapToggle1280">Minimap
+                        <i class="fa fa-square" aria-hidden="true"></i>
+                    </div>
+                    <div class="option subSelect" id="qrCodeHover" onmouseover="showQRCode();">QR Code Link <i
+                            class="fa fa-chevron-right" aria-hidden="true"></i>
+                        <div class="toDisplaySub">
+                            <div class="option" id="qrCodeImage">QR Code Image</div>
+                        </div>
+                    </div>
+                    <div class="option uncheck noSubSelect" id="debugButton1280">Inspector
+                        <i class="fa fa-square" aria-hidden="true"></i>
+                    </div>
+                    <div class="option nosubselect" id="metadataButton1280">Metadata</div>
+                </div>
+            </div>
+        </div>
+
+        <div class="category right">
+            <div class="button select" style="display: none;">
+                <span id="currentVersion1280">v.</span>
+                <div class="toDisplay currentVersionDisplay">
+                    <div class="option" onclick="setVersion('4.0');">4.0</div>
+                    <div class="option" onclick="setVersion('3.0');">3.0</div>
+                </div>
+            </div>
+            <div class="button select"><img class="examplesButton" src="css/img/examplesButton.svg"></div>
+        </div>
+    </div>
+
+    <!-- Mid-size screens -->
+    <div class="navbar navBar920 languageJS">
+        <div class="categoryTitle">
+            <img class="logo" src="css/img/logo_v4.svg">
+            <div class="version"><span class="versionSub" id="mainTitle920"></span></div>
+        </div>
+
+        <div class="category languageJS" id="JStoTSbar">
+            <div class="buttonJStoTS languageTS" id="toTSbutton920">TS</div>
+            <div class="buttonJStoTS languageJS" id="toJSbutton920">JS</div>
+            <div class="buttonSpaceKiller"></div>
+            <div class="button run" id="runButton920"><img src="css/img/playButton.svg"></div>
+            <div class="button" id="saveButton920"><img src="css/img/saveButton.svg"></div>
+            <div class="button removeOnPhone" id="zipButton920"><img src="css/img/downloadButton.svg"></div>
+            <div class="button" id="newButton920"><img src="css/img/newButton.svg"></div>
+            <div class="button removeOnPhone" id="clearButton920"><img src="css/img/clearButton.svg"></div>
+
+            <div class="button select"><img src="css/img/optionsButton.svg">
+                <div class="toDisplay displayJS">
+                    <div class="option subSelect">Theme <i class="fa fa-chevron-right" aria-hidden="true"></i>
+
+                        <div class="toDisplaySub">
+                            <div class="option selected" id="darkTheme920">Dark</div>
+                            <div class="option" id="lightTheme920">Light</div>
+                        </div>
+                    </div>
+                    <div class="option subSelect">Font size <i class="fa fa-chevron-right" aria-hidden="true"></i>
+                        <div class="toDisplaySub displayFontSize">
+                            <div class="option" onclick="setFontSize(12);">12</div>
+                            <div class="option selected" onclick="setFontSize(14);">14</div>
+                            <div class="option" onclick="setFontSize(16);">16</div>
+                            <div class="option" onclick="setFontSize(18);">18</div>
+                            <div class="option" onclick="setFontSize(20);">20</div>
+                            <div class="option" onclick="setFontSize(22);">22</div>
+                        </div>
+                    </div>
+                    <div class="option noSubSelect" id="safemodeToggle920">Safe mode
+                        <i class="fa fa-square" aria-hidden="true"></i>
+                    </div>
+                    <div class="option checked noSubSelect" id="editorButton920">Editor
+                        <i class="fa fa-check-square" aria-hidden="true"></i>
+                    </div>
+                    <div class="option noSubSelect" id="fullscreenButton920">Fullscreen</div>
+                    <div class="option noSubSelect" id="editorFullscreenButton920">Editor Fullscreen</div>
+                    <div class="option noSubSelect" id="formatButton920">Format code</div>
+                    <div class="option noSubSelect" id="minimapToggle920">Minimap
+                        <i class="fa fa-square" aria-hidden="true"></i>
+                    </div>
+                    <div class="option subSelect" id="qrCodeHover" onmouseover="showQRCode();">QR Code Link <i
+                            class="fa fa-chevron-right" aria-hidden="true"></i>
+                        <div class="toDisplaySub">
+                            <div class="option" id="qrCodeImage">QR Code Image</div>
+                        </div>
+                    </div>
+                    <div class="option uncheck noSubSelect" id="debugButton920">Inspector
+                        <i class="fa fa-square" aria-hidden="true"></i>
+                    </div>
+                    <div class="option noSubSelect" id="metadataButton920">Metadata</div>
+                </div>
+            </div>
+        </div>
+
+        <div class="category right">
+            <div class="button select" style="display: none;">
+                <span id="currentVersion920">v.</span>
+                <div class="toDisplay currentVersionDisplay">
+                    <div class="option" onclick="setVersion('4.0');">4.0</div>
+                    <div class="option" onclick="setVersion('3.0');">3.0</div>
+                </div>
+            </div>
+            <div class="button select"><img class="examplesButton" src="css/img/examplesButton.svg"></div>
+        </div>
+    </div>
+
+    <!-- Little screens -->
+    <div class="navbar navBar710 languageJS">
+        <div class="categoryTitle">
+            <img class="logo" src="css/img/logo_v4.svg">
+            <div class="version"><span class="versionSub" id="mainTitle710"></span></div>
+        </div>
+
+        <div class="category languageJS" id="JStoTSbar">
+            <div class="buttonJStoTS languageTS" id="toTSbutton710">TS</div>
+            <div class="buttonJStoTS languageJS" id="toJSbutton710">JS</div>
+            <div class="buttonSpaceKiller"></div>
+            <div class="button run" id="runButton710"><img src="css/img/playButton.svg"></div>
+            <div class="button" id="saveButton710"><img src="css/img/saveButton.svg"></div>
+            <div class="button removeOnPhone" id="zipButton710"><img src="css/img/downloadButton.svg"></div>
+            <div class="button" id="newButton710"><img src="css/img/newButton.svg"></div>
+            <div class="button removeOnPhone" id="clearButton710"><img src="css/img/clearButton.svg"></div>
+
+            <div class="button select"><img src="css/img/optionsButton.svg">
+                <div class="toDisplay displayJS">
+                    <div class="option subSelect">Theme <i class="fa fa-chevron-right" aria-hidden="true"></i>
+
+                        <div class="toDisplaySub">
+                            <div class="option selected" id="darkTheme710">Dark</div>
+                            <div class="option" id="lightTheme710">Light</div>
+                        </div>
+                    </div>
+                    <div class="option subSelect">Font size <i class="fa fa-chevron-right" aria-hidden="true"></i>
+                        <div class="toDisplaySub displayFontSize">
+                            <div class="option" onclick="setFontSize(12);">12</div>
+                            <div class="option selected" onclick="setFontSize(14);">14</div>
+                            <div class="option" onclick="setFontSize(16);">16</div>
+                            <div class="option" onclick="setFontSize(18);">18</div>
+                            <div class="option" onclick="setFontSize(20);">20</div>
+                            <div class="option" onclick="setFontSize(22);">22</div>
+                        </div>
+                    </div>
+                    <div class="option noSubSelect" id="safemodeToggle710">Safe mode
+                        <i class="fa fa-square" aria-hidden="true"></i>
+                    </div>
+                    <div class="option checked noSubSelect" id="editorButton710">Editor
+                        <i class="fa fa-check-square" aria-hidden="true"></i>
+                    </div>
+                    <div class="option noSubSelect" id="fullscreenButton710">Fullscreen</div>
+                    <div class="option noSubSelect" id="editorFullscreenButton710">Editor Fullscreen</div>
+                    <div class="option noSubSelect" id="formatButton710">Format code</div>
+                    <div class="option noSubSelect" id="minimapToggle710">Minimap
+                        <i class="fa fa-square" aria-hidden="true"></i>
+                    </div>
+                    <div class="option subSelect" id="qrCodeHover" onmouseover="showQRCode();">QR Code Link <i
+                            class="fa fa-chevron-right" aria-hidden="true"></i>
+                        <div class="toDisplaySub">
+                            <div class="option" id="qrCodeImage">QR Code Image</div>
+                        </div>
+                    </div>
+                    <div class="option uncheck noSubSelect" id="debugButton710">Inspector
+                        <i class="fa fa-square" aria-hidden="true"></i>
+                    </div>
+                    <div class="option nosubselect" id="metadataButton710">Metadata</div>
+                </div>
+            </div>
+        </div>
+
+        <div class="category right">
+            <div class="button select" style="display: none;">
+                <span id="currentVersion710">v.</span>
+                <div class="toDisplay currentVersionDisplay">
+                    <div class="option" onclick="setVersion('4.0');">4.0</div>
+                    <div class="option" onclick="setVersion('3.0');">3.0</div>
+                </div>
+            </div>
+            <div class="button select"><img class="examplesButton" src="css/img/examplesButton.svg"></div>
+        </div>
+    </div>
+
+    <!-- Mobile -->
+    <div class="navbar navBar550 languageJS">
+        <div class="categoryTitle">
+            <img class="logo" src="css/img/logo_v4.svg">
+            <div class="version"><span class="versionSub" id="mainTitle550"></span></div>
+        </div>
+
+        <div class="category languageJS" id="JStoTSbar">
+            <div class="buttonJStoTS languageTS" id="toTSbutton550">TS</div>
+            <div class="buttonJStoTS languageJS" id="toJSbutton550">JS</div>
+            <div class="buttonSpaceKiller"></div>
+            <div class="button run" id="runButton550"><img src="css/img/playButton.svg"></div>
+            <div class="button" id="saveButton550"><img src="css/img/saveButton.svg"></div>
+            <div class="button removeOnPhone" id="zipButton550"><img src="css/img/downloadButton.svg"></div>
+            <div class="button" id="newButton550"><img src="css/img/newButton.svg"></div>
+            <div class="button removeOnPhone" id="clearButton550"><img src="css/img/clearButton.svg"></div>
+
+            <div class="button select"><img src="css/img/optionsButton.svg">
+                <div class="toDisplay displayJS">
+                    <div class="option subSelect">Theme <i class="fa fa-chevron-right" aria-hidden="true"></i>
+                        <div class="toDisplaySub">
+                            <div class="option selected" id="darkTheme550">Dark</div>
+                            <div class="option" id="lightTheme550">Light</div>
+                        </div>
+                    </div>
+                    <div class="option subSelect">Font size <i class="fa fa-chevron-right" aria-hidden="true"></i>
+                        <div class="toDisplaySub displayFontSize">
+                            <div class="option" onclick="setFontSize(12);">12</div>
+                            <div class="option selected" onclick="setFontSize(14);">14</div>
+                            <div class="option" onclick="setFontSize(16);">16</div>
+                            <div class="option" onclick="setFontSize(18);">18</div>
+                            <div class="option" onclick="setFontSize(20);">20</div>
+                            <div class="option" onclick="setFontSize(22);">22</div>
+                        </div>
+                    </div>
+                    <div class="option noSubSelect" id="safemodeToggle550">Safe mode
+                        <i class="fa fa-square" aria-hidden="true"></i>
+                    </div>
+                    <div class="option checked noSubSelect" id="editorButton550">Editor
+                        <i class="fa fa-check-square" aria-hidden="true"></i>
+                    </div>
+                    <div class="option nosubselect" id="fullscreenButton550" style="display: none">Fullscreen</div>
+                    <div class="option nosubselect" id="editorFullscreenButton550" style="display: none">Editor
+                        Fullscreen</div>
+                    <div class="option nosubselect" id="formatButton550">Format code</div>
+                    <div class="option nosubselect" id="minimapToggle550">Minimap
+                        <i class="fa fa-square" aria-hidden="true"></i>
+                    </div>
+                    <div class="option subSelect" id="qrCodeHover" onmouseover="showQRCode();">QR Code Link <i
+                            class="fa fa-chevron-right" aria-hidden="true"></i>
+                        <div class="toDisplaySub">
+                            <div class="option" id="qrCodeImage">QR Code Image</div>
+                        </div>
+                    </div>
+                    <div class="option uncheck noSubSelect" id="debugButton550">Inspector
+                        <i class="fa fa-square" aria-hidden="true"></i>
+                    </div>
+                    <div class="option nosubselect" id="metadataButton550">Metadata</div>
+                    <div class="option subSelect">Links / Tools <i class="fa fa-chevron-right" aria-hidden="true"></i>
+                        <div class="toDisplaySub displayFooterLinks">
+                            <div class="option link">
+                                <a target='_new' href="https://www.netlify.com/">Deployed by Netlify</a>
+                            </div>
+                            <div class="option link">
+                                <a target='_new' href="https://forum.babylonjs.com/">Forum</a>
+                            </div>
+                            <div class="option link">
+                                <a target='_new' href="https://www.babylonjs.com/sandbox">Sandbox</a>
+                            </div>
+                            <div class="option link">
+                                <a target='_new' href="https://doc.babylonjs.com">Documentation</a>
+                            </div>
+                            <div class="option link">
+                                <a target='_new' href="https://doc.babylonjs.com/playground">Search</a>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="category right">
+            <div class="button select" style="display: none;">
+                <span id="currentVersion550">v.</span>
+                <div class="toDisplay currentVersionDisplay">
+                    <div class="option" onclick="setVersion('4.0');">4.0</div>
+                    <div class="option" onclick="setVersion('3.0');">3.0</div>
+                </div>
+            </div>
+            <div class="button select"><img class="examplesButton" src="css/img/examplesButton.svg"></div>
+        </div>
     </div>
 
+    <!-- Common things -->
+
     <div class="wrapper">
         <div id="jsEditor"></div>
         <div id="canvasZone">
@@ -448,7 +777,7 @@
             src="https://d33wubrfki0l68.cloudfront.net/17ca450bae302631f4857cd8c3992234ec5dd9a7/057f9/img/ui/clear_button.png">
     </div>
 
-    <span class="label" id="fpsLabel">FPS</span>
+    <div class="fpsLabel languageJS" id="fpsLabel">FPS</div>
 
     <div id="errorZone">
     </div>
@@ -496,10 +825,25 @@
         </div>
     </div>
 
+    <div id="waitDiv">
+        <span id="waitTitle">Babylon.js Playground
+            <br>
+            <br>
+            <br>
+        </span>
+        <div id="logo-part">
+            <img src="css/img/v4.svg" id="waitLogo" />
+            <img src="css/img/spinner.svg" id="waitSpinner" />
+        </div>
+    </div>
+
+    <!-- jQuery -->
     <script src="https://code.jquery.com/jquery.js"></script>
 
+    <!-- Main scripts -->
     <script src="js/actions.js"></script>
     <script src="js/pbt.js"></script>
+    <script src="js/libs/typescript.js"></script>
     <script src="js/index.js"></script>
 
     <!-- Global site tag (gtag.js) - Google Analytics -->

Playground/frame.html

@@ -1,20 +1,30 @@
 <!DOCTYPE html>
 <html>
 
+<!--
+    The purpose of the Frame.html file is to ???
+    // TO DO - Complete that
+ -->
+
 <head>
     <title>Babylon.js Playground</title>
+    <meta charset='utf-8' />
+    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1">
     <link rel="shortcut icon" href="https://www.babylonjs.com/img/favicon/favicon.ico">
+
     <link rel="manifest" href="https://www.babylonjs.com/img/favicon/manifest.json">
     <meta name="msapplication-TileColor" content="#ffffff">
     <meta name="msapplication-TileImage" content="https://www.babylonjs.com/img/favicon/ms-icon-144x144.png">
     <meta name="msapplication-config" content="https://www.babylonjs.com/img/favicon/browserconfig.xml">
     <meta name="theme-color" content="#ffffff">
-    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1">
 
+    <!-- Pep -->
     <script src="https://code.jquery.com/pep/0.4.2/pep.min.js"></script>
 
+    <!-- DatGUI CDN -->
     <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.6.2/dat.gui.min.js"></script>
-    <!-- Babylon.js -->
+
+    <!-- Dependencies -->
     <script src="https://preview.babylonjs.com/ammo.js"></script>
     <script src="https://preview.babylonjs.com/cannon.js"></script>
     <script src="https://preview.babylonjs.com/Oimo.js"></script>
@@ -24,7 +34,7 @@
     <script src="https://preview.babylonjs.com/gui/babylon.gui.min.js"></script>
     <script src="https://preview.babylonjs.com/inspector/babylon.inspector.bundle.js"></script>
     <script src="https://preview.babylonjs.com/nodeEditor/babylon.nodeEditor.js"></script>
-
+    <!-- Babylon.js -->
     <script src="https://preview.babylonjs.com/materialsLibrary/babylon.fireMaterial.min.js"></script>
     <script src="https://preview.babylonjs.com/materialsLibrary/babylon.waterMaterial.min.js"></script>
     <script src="https://preview.babylonjs.com/materialsLibrary/babylon.lavaMaterial.min.js"></script>
@@ -64,7 +74,8 @@
 
     <script src="https://rawgit.com/BabylonJS/Extensions/master/ClonerSystem/src/babylonx.cloner.js"></script>
     <script src="https://rawgit.com/BabylonJS/Extensions/master/CompoundShader/src/babylonx.CompoundShader.js"></script>
-    <link href="frame.css" rel="stylesheet" />
+    
+    <link rel="stylesheet" href="css/frame.css" />
 </head>
 
 <body>
@@ -84,7 +95,9 @@
         </div>
     </div>
 
+    <!-- jQuery -->
     <script src="https://code.jquery.com/jquery.js"></script>
+    
     <script src="js/frame.js"></script>
 
     <!-- Global site tag (gtag.js) - Google Analytics -->

Playground/full.html

@@ -30,7 +30,7 @@
 
     <script src="https://rawgit.com/BabylonJS/Extensions/master/ClonerSystem/src/babylonx.cloner.js"></script>
     <script src="https://rawgit.com/BabylonJS/Extensions/master/CompoundShader/src/babylonx.CompoundShader.js"></script>
-    <link href="frame.css" rel="stylesheet" />
+    <link href="css/frame.css" rel="stylesheet" />
 </head>
 
 <body>

Playground/index-local.html

@@ -1,21 +1,34 @@
 <!DOCTYPE html>
 <html>
 
+<!--
+    The purpose of the index-local.html file is to ???
+    // TO DO - Complete that
+    // TO DO - Fix error - "BabylonLoader.js:26 GET http://localhost/Tools/Config/config.json 404 (Not Found)"
+ -->
 
 <head>
     <title>Babylon.js Playground</title>
     <meta charset='utf-8' />
     <meta name="viewport" content="width=device-width, user-scalable=no">
-    <script src="https://code.jquery.com/pep/0.4.2/pep.min.js"></script>
+    <link rel="shortcut icon" href="https://www.babylonjs.com/favicon.ico">
+
     <link rel="stylesheet" href="https://use.typekit.net/cta4xsb.css">
+    <link rel="stylesheet" href="css/index.css" />
+    <link rel="stylesheet" href="css/index710.css" />
+    <link rel="stylesheet" href="css/index550.css" />
 
+    <!-- Pep -->
+    <script src="https://code.jquery.com/pep/0.4.2/pep.min.js"></script>
     <!--For canvas/code separator-->
     <script src="js/libs/split.js"></script>
 
+    <!-- DatGUI -->
     <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.6.2/dat.gui.min.js"></script>
     <!-- jszip -->
     <script src="js/libs/jszip.min.js"></script>
     <script src="js/libs/fileSaver.js"></script>
+
     <!-- Dependencies -->
     <script src="../dist/preview%20release/ammo.js"></script>
     <script src="../dist/preview%20release/cannon.js"></script>
@@ -26,339 +39,304 @@
 
     <!-- Babylon.js -->
     <script src="../Tools/DevLoader/BabylonLoader.js"></script>
-
-    <link href="css/index.css" rel="stylesheet" />
 </head>
 
 <body>
-    <div class="navbar navBar1600">
-        <div class="title">
-            Babylon.js Playground
-        </div>
-        <div class="version" id="mainTitle">
-        </div>
-
-        <div class="category">
-            <div class="button run" id="runButton1600">Run
-                <i class="fa fa-play" aria-hidden="true"></i>
-            </div>
+    <!-- Big screens -->
+    <div class="navbar navBar1280 languageJS">
+        <div class="categoryTitle">
+            <img class="logo" src="css/img/logo_v4.svg">
+            <div class="version">Playground <span class="versionSub" id="mainTitle1280"></span></div>
         </div>
 
-
-        <div class="category">
-            <div class="button" id="newButton1600">New
-                <i class="fa fa-file" aria-hidden="true"></i>
-            </div>
-            <div class="button removeOnPhone" id="clearButton1600">Clear
-                <i class="fa fa-trash" aria-hidden="true"></i>
-            </div>
-        </div>
-
-        <div class="category">
-            <div class="button" id="saveButton1600">Save
-                <i class="fa fa-floppy-o" aria-hidden="true"></i>
-            </div>
-            <div class="button removeOnPhone" id="zipButton1600">Zip
-                <i class="fa fa-download" aria-hidden="true"></i>
-            </div>
-        </div>
-
-        <div class="category">
-            <div class="button select">Settings
-                <div class="toDisplay">
-                    <div class="option subSelect">Theme
-                        <i class="fa fa-chevron-right" aria-hidden="true"></i>
-                        <div class="toDisplaySub">
-                            <div class="option" id="darkTheme1600">Dark</div>
-                            <div class="option" id="lightTheme1600">Light</div>
+        <div class="category languageJS" id="JStoTSbar">
+            <div class="buttonJStoTS languageTS" id="toTSbutton1280">Typescript</div>
+            <div class="buttonJStoTS languageJS" id="toJSbutton1280">Javascript</div>
+            <div class="button run" id="runButton1280"><img src="css/img/playButton.svg"></div>
+            <div class="button" id="saveButton1280"><img src="css/img/saveButton.svg"></div>
+            <div class="button removeOnPhone" id="zipButton1280"><img src="css/img/downloadButton.svg"></div>
+            <div class="button" id="newButton1280"><img src="css/img/newButton.svg"></div>
+            <div class="button removeOnPhone" id="clearButton1280"><img src="css/img/clearButton.svg"></div>
+
+            <div class="button select"><img src="css/img/optionsButton.svg">
+                <div class="toDisplay languageJS">
+                    <div class="option subSelect">Theme <i class="fa fa-chevron-right" aria-hidden="true"></i>
+                        <div class="toDisplaySub languageJS">
+                            <div class="option selected" id="darkTheme1280">Dark</div>
+                            <div class="option" id="lightTheme1280">Light</div>
                         </div>
                     </div>
-                    <div class="option subSelect">
-                        <span id="currentFontSize1600">Font: 14</span>
-                        <i class="fa fa-chevron-right" aria-hidden="true"></i>
-                        <div class="toDisplaySub">
+                    <div class="option subSelect">Font size <i class="fa fa-chevron-right" aria-hidden="true"></i>
+                        <div class="toDisplaySub displayFontSize languageJS">
                             <div class="option" onclick="setFontSize(12);">12</div>
-                            <div class="option" onclick="setFontSize(14);">14</div>
+                            <div class="option selected" onclick="setFontSize(14);">14</div>
                             <div class="option" onclick="setFontSize(16);">16</div>
                             <div class="option" onclick="setFontSize(18);">18</div>
                             <div class="option" onclick="setFontSize(20);">20</div>
                             <div class="option" onclick="setFontSize(22);">22</div>
                         </div>
                     </div>
-                    <div class="option" id="safemodeToggle1600">Safe mode
-                        <i class="far fa-square" aria-hidden="true"></i>
+                    <div class="option noSubSelect" id="safemodeToggle1280">Safe mode
+                        <i class="fa fa-square" aria-hidden="true"></i>
                     </div>
-                    <div class="option checked" id="editorButton1600">Editor
+                    <div class="option checked noSubSelect" id="editorButton1280">Editor
                         <i class="fa fa-check-square" aria-hidden="true"></i>
                     </div>
-                    <div class="option" id="fullscreenButton1600">Fullscreen</div>
-                    <div class="option" id="editorFullscreenButton1600">Editor Fullscreen</div>
-                    <div class="option" id="formatButton1600">Format code</div>
-                    <div class="option" id="minimapToggle1600">Minimap
-                        <i class="far fa-square" aria-hidden="true"></i>
+                    <div class="option noSubSelect" id="fullscreenButton1280">Fullscreen</div>
+                    <div class="option noSubSelect" id="editorFullscreenButton1280">Editor Fullscreen</div>
+                    <div class="option noSubSelect" id="formatButton1280">Format code</div>
+                    <div class="option noSubSelect" id="minimapToggle1280">Minimap
+                        <i class="fa fa-square" aria-hidden="true"></i>
                     </div>
-                    <div class="option subSelect" id="qrCodeHover" onmouseover="showQRCode();">QR Code Link
-                        <i class="fa fa-chevron-right" aria-hidden="true"></i>
+                    <div class="option subSelect" id="qrCodeHover" onmouseover="showQRCode();">QR Code Link <i
+                            class="fa fa-chevron-right" aria-hidden="true"></i>
                         <div class="toDisplaySub">
-                            <div class="option" style="height:auto;padding: 20px;background: white;" id="qrCodeImage">QR Code Image</div>
+                            <div class="option" id="qrCodeImage">QR Code Image</div>
                         </div>
                     </div>
+                    <div class="option uncheck noSubSelect" id="debugButton1280">Inspector
+                        <i class="fa fa-square" aria-hidden="true"></i>
+                    </div>
+                    <div class="option nosubselect" id="metadataButton1280">Metadata</div>
                 </div>
             </div>
-
-            <div class="button uncheck" id="debugButton1600">Inspector</div>
-            <div class="button" id="metadataButton1600">Metadata</div>
         </div>
 
-
-
         <div class="category right">
-            <div class="button select">
-                <span id="currentVersion1600">Version: Latest</span>
-                <div class="toDisplay">
-                    <div class="option" onclick="setVersion('latest');">Latest</div>
-                    <div class="option" onclick="setVersion('2.5');">2.5</div>
+            <div class="button select" style="display: none;">
+                <span id="currentVersion1280">v.</span>
+                <div class="toDisplay currentVersionDisplay">
+                    <div class="option" onclick="setVersion('4.0');">4.0</div>
+                    <div class="option" onclick="setVersion('3.0');">3.0</div>
                 </div>
             </div>
-            <div class="button select">
-                <span class="examplesButton">Examples</span>
-            </div>
+            <div class="button select"><img class="examplesButton" src="css/img/examplesButton.svg"></div>
         </div>
     </div>
 
-    <div class="navbar navBar1475">
-        <div class="title">
-            Babylon.js Playground
-        </div>
-        <div class="version" id="mainTitle">
-        </div>
-
-        <div class="category">
-            <div class="button run" id="runButton1475">Run
-                <i class="fa fa-play" aria-hidden="true"></i>
-            </div>
+    <!-- Mid-size screens -->
+    <div class="navbar navBar920 languageJS">
+        <div class="categoryTitle">
+            <img class="logo" src="css/img/logo_v4.svg">
+            <div class="version"><span class="versionSub" id="mainTitle920"></span></div>
         </div>
 
+        <div class="category languageJS" id="JStoTSbar">
+            <div class="buttonJStoTS languageTS" id="toTSbutton920">TS</div>
+            <div class="buttonJStoTS languageJS" id="toJSbutton920">JS</div>
+            <div class="buttonSpaceKiller"></div>
+            <div class="button run" id="runButton920"><img src="css/img/playButton.svg"></div>
+            <div class="button" id="saveButton920"><img src="css/img/saveButton.svg"></div>
+            <div class="button removeOnPhone" id="zipButton920"><img src="css/img/downloadButton.svg"></div>
+            <div class="button" id="newButton920"><img src="css/img/newButton.svg"></div>
+            <div class="button removeOnPhone" id="clearButton920"><img src="css/img/clearButton.svg"></div>
 
-        <div class="category">
-            <div class="button" id="newButton1475">New
-                <i class="fa fa-file" aria-hidden="true"></i>
-            </div>
-            <div class="button removeOnPhone" id="clearButton1475">Clear
-                <i class="fa fa-trash" aria-hidden="true"></i>
-            </div>
-        </div>
-
-        <div class="category">
-            <div class="button" id="saveButton1475">Save
-                <i class="fa fa-floppy-o" aria-hidden="true"></i>
-            </div>
-            <div class="button removeOnPhone" id="zipButton1475">Zip
-                <i class="fa fa-download" aria-hidden="true"></i>
-            </div>
-        </div>
+            <div class="button select"><img src="css/img/optionsButton.svg">
+                <div class="toDisplay displayJS">
+                    <div class="option subSelect">Theme <i class="fa fa-chevron-right" aria-hidden="true"></i>
 
-        <div class="category">
-            <div class="button select">Settings
-                <div class="toDisplay">
-                    <div class="option subSelect">Theme
-                        <i class="fa fa-chevron-right" aria-hidden="true"></i>
                         <div class="toDisplaySub">
-                            <div class="option" id="darkTheme1475">Dark</div>
-                            <div class="option" id="lightTheme1475">Light</div>
+                            <div class="option selected" id="darkTheme920">Dark</div>
+                            <div class="option" id="lightTheme920">Light</div>
                         </div>
                     </div>
-                    <div class="option subSelect">
-                        <span id="currentFontSize1475">Font: 14</span>
-                        <i class="fa fa-chevron-right" aria-hidden="true"></i>
-                        <div class="toDisplaySub">
+                    <div class="option subSelect">Font size <i class="fa fa-chevron-right" aria-hidden="true"></i>
+                        <div class="toDisplaySub displayFontSize">
                             <div class="option" onclick="setFontSize(12);">12</div>
-                            <div class="option" onclick="setFontSize(14);">14</div>
+                            <div class="option selected" onclick="setFontSize(14);">14</div>
                             <div class="option" onclick="setFontSize(16);">16</div>
                             <div class="option" onclick="setFontSize(18);">18</div>
                             <div class="option" onclick="setFontSize(20);">20</div>
                             <div class="option" onclick="setFontSize(22);">22</div>
                         </div>
                     </div>
-                    <div class="option" id='safemodeToggle1475'>Safe mode
-                        <i class="far fa-square" aria-hidden="true"></i>
+                    <div class="option noSubSelect" id="safemodeToggle920">Safe mode
+                        <i class="fa fa-square" aria-hidden="true"></i>
                     </div>
-                    <div class="option checked" id="editorButton1475">Editor
+                    <div class="option checked noSubSelect" id="editorButton920">Editor
                         <i class="fa fa-check-square" aria-hidden="true"></i>
                     </div>
-                    <div class="option" id="fullscreenButton1475">Fullscreen</div>
-                    <div class="option" id="editorFullscreenButton1475">Editor Fullscreen</div>
-                    <div class="option" id="formatButton1475">Format code</div>
-                    <div class="option" id="minimapToggle1475">Minimap
-                        <i class="far fa-square" aria-hidden="true"></i>
+                    <div class="option noSubSelect" id="fullscreenButton920">Fullscreen</div>
+                    <div class="option noSubSelect" id="editorFullscreenButton920">Editor Fullscreen</div>
+                    <div class="option noSubSelect" id="formatButton920">Format code</div>
+                    <div class="option noSubSelect" id="minimapToggle920">Minimap
+                        <i class="fa fa-square" aria-hidden="true"></i>
                     </div>
-                    <div class="option" id="debugButton1475">Inspector</div>
-                    <div class="option" id="metadataButton1475">Metadata</div>
-                    <div class="option subSelect">
-                        <span id="currentVersion1475">Vers. : Latest</span>
-                        <i class="fa fa-chevron-right" aria-hidden="true"></i>
+                    <div class="option subSelect" id="qrCodeHover" onmouseover="showQRCode();">QR Code Link <i
+                            class="fa fa-chevron-right" aria-hidden="true"></i>
                         <div class="toDisplaySub">
-                            <div class="option" onclick="setVersion('latest');">Latest</div>
-                            <div class="option" onclick="setVersion('2.5');">2.5</div>
+                            <div class="option" id="qrCodeImage">QR Code Image</div>
                         </div>
                     </div>
+                    <div class="option uncheck noSubSelect" id="debugButton920">Inspector
+                        <i class="fa fa-square" aria-hidden="true"></i>
+                    </div>
+                    <div class="option noSubSelect" id="metadataButton920">Metadata</div>
                 </div>
             </div>
         </div>
 
         <div class="category right">
-            <div class="button select">
-                <span class="examplesButton">Examples</span>
+            <div class="button select" style="display: none;">
+                <span id="currentVersion920">v.</span>
+                <div class="toDisplay currentVersionDisplay">
+                    <div class="option" onclick="setVersion('4.0');">4.0</div>
+                    <div class="option" onclick="setVersion('3.0');">3.0</div>
+                </div>
             </div>
+            <div class="button select"><img class="examplesButton" src="css/img/examplesButton.svg"></div>
         </div>
     </div>
 
-    <div class="navbar navBar1030">
-        <div class="category">
-            <div class="button run" id="runButton1030">Run
-                <i class="fa fa-play" aria-hidden="true"></i>
-            </div>
+    <!-- Little screens -->
+    <div class="navbar navBar710 languageJS">
+        <div class="categoryTitle">
+            <img class="logo" src="css/img/logo_v4.svg">
+            <div class="version"><span class="versionSub" id="mainTitle710"></span></div>
         </div>
 
+        <div class="category languageJS" id="JStoTSbar">
+            <div class="buttonJStoTS languageTS" id="toTSbutton710">TS</div>
+            <div class="buttonJStoTS languageJS" id="toJSbutton710">JS</div>
+            <div class="buttonSpaceKiller"></div>
+            <div class="button run" id="runButton710"><img src="css/img/playButton.svg"></div>
+            <div class="button" id="saveButton710"><img src="css/img/saveButton.svg"></div>
+            <div class="button removeOnPhone" id="zipButton710"><img src="css/img/downloadButton.svg"></div>
+            <div class="button" id="newButton710"><img src="css/img/newButton.svg"></div>
+            <div class="button removeOnPhone" id="clearButton710"><img src="css/img/clearButton.svg"></div>
 
-        <div class="category">
-            <div class="button" id="newButton1030">New
-                <i class="fa fa-file" aria-hidden="true"></i>
-            </div>
-            <div class="button removeOnPhone" id="clearButton1030">Clear
-                <i class="fa fa-trash" aria-hidden="true"></i>
-            </div>
-        </div>
-
-        <div class="category">
-            <div class="button" id="saveButton1030">Save
-                <i class="fa fa-floppy-o" aria-hidden="true"></i>
-            </div>
-            <div class="button removeOnPhone" id="zipButton1030">Zip
-                <i class="fa fa-download" aria-hidden="true"></i>
-            </div>
-        </div>
+            <div class="button select"><img src="css/img/optionsButton.svg">
+                <div class="toDisplay displayJS">
+                    <div class="option subSelect">Theme <i class="fa fa-chevron-right" aria-hidden="true"></i>
 
-        <div class="category">
-            <div class="button select">Settings
-                <div class="toDisplay">
-                    <div class="option subSelect">Theme
-                        <i class="fa fa-chevron-right" aria-hidden="true"></i>
                         <div class="toDisplaySub">
-                            <div class="option" id="darkTheme1030">Dark</div>
-                            <div class="option" id="lightTheme1030">Light</div>
+                            <div class="option selected" id="darkTheme710">Dark</div>
+                            <div class="option" id="lightTheme710">Light</div>
                         </div>
                     </div>
-                    <div class="option subSelect">
-                        <span id="currentFontSize1030">Font: 14</span>
-                        <i class="fa fa-chevron-right" aria-hidden="true"></i>
-                        <div class="toDisplaySub">
+                    <div class="option subSelect">Font size <i class="fa fa-chevron-right" aria-hidden="true"></i>
+                        <div class="toDisplaySub displayFontSize">
                             <div class="option" onclick="setFontSize(12);">12</div>
-                            <div class="option" onclick="setFontSize(14);">14</div>
+                            <div class="option selected" onclick="setFontSize(14);">14</div>
                             <div class="option" onclick="setFontSize(16);">16</div>
                             <div class="option" onclick="setFontSize(18);">18</div>
                             <div class="option" onclick="setFontSize(20);">20</div>
                             <div class="option" onclick="setFontSize(22);">22</div>
                         </div>
                     </div>
-                    <div class="option" id="safemodeToggle1030">Safe mode
-                        <i class="far fa-square" aria-hidden="true"></i>
+                    <div class="option noSubSelect" id="safemodeToggle710">Safe mode
+                        <i class="fa fa-square" aria-hidden="true"></i>
                     </div>
-                    <div class="option checked" id="editorButton1030">Editor
+                    <div class="option checked noSubSelect" id="editorButton710">Editor
                         <i class="fa fa-check-square" aria-hidden="true"></i>
                     </div>
-                    <div class="option" id="fullscreenButton1030">Fullscreen</div>
-                    <div class="option" id="editorFullscreenButton1030">Editor Fullscreen</div>
-                    <div class="option" id="formatButton1030">Format code</div>
-                    <div class="option" id="minimapToggle1030">Minimap
-                        <i class="far fa-square" aria-hidden="true"></i>
+                    <div class="option noSubSelect" id="fullscreenButton710">Fullscreen</div>
+                    <div class="option noSubSelect" id="editorFullscreenButton710">Editor Fullscreen</div>
+                    <div class="option noSubSelect" id="formatButton710">Format code</div>
+                    <div class="option noSubSelect" id="minimapToggle710">Minimap
+                        <i class="fa fa-square" aria-hidden="true"></i>
                     </div>
-                    <div class="option" id="debugButton1030">Inspector</div>
-                    <div class="option" id="metadataButton1030">Metadata</div>
-                    <div class="option subSelect">
-                        <span id="currentVersion1030">Vers. : Latest</span>
-                        <i class="fa fa-chevron-right" aria-hidden="true"></i>
+                    <div class="option subSelect" id="qrCodeHover" onmouseover="showQRCode();">QR Code Link <i
+                            class="fa fa-chevron-right" aria-hidden="true"></i>
                         <div class="toDisplaySub">
-                            <div class="option" onclick="setVersion('latest');">Latest</div>
-                            <div class="option" onclick="setVersion('2.5');">2.5</div>
+                            <div class="option" id="qrCodeImage">QR Code Image</div>
                         </div>
                     </div>
+                    <div class="option uncheck noSubSelect" id="debugButton710">Inspector
+                        <i class="fa fa-square" aria-hidden="true"></i>
+                    </div>
+                    <div class="option nosubselect" id="metadataButton710">Metadata</div>
                 </div>
             </div>
         </div>
 
         <div class="category right">
-            <div class="button select">
-                <span class="examplesButton">Examples</span>
+            <div class="button select" style="display: none;">
+                <span id="currentVersion710">v.</span>
+                <div class="toDisplay currentVersionDisplay">
+                    <div class="option" onclick="setVersion('4.0');">4.0</div>
+                    <div class="option" onclick="setVersion('3.0');">3.0</div>
+                </div>
             </div>
+            <div class="button select"><img class="examplesButton" src="css/img/examplesButton.svg"></div>
         </div>
     </div>
 
-    <div class="navbar navBar750">
-        <div class="category">
-            <div class="button select">File
-                <div class="toDisplay">
-                    <div class="option" id="runButton750">Run
-                        <i class="fa fa-play" aria-hidden="true"></i>
-                    </div>
-                    <div class="option" id="newButton750">New
-                        <i class="fa fa-file" aria-hidden="true"></i>
-                    </div>
-                    <div class="option" id="clearButton750">Clear
-                        <i class="fa fa-trash" aria-hidden="true"></i>
-                    </div>
-                    <div class="option" id="saveButton750">Save
-                        <i class="fa fa-floppy-o" aria-hidden="true"></i>
-                    </div>
-                    <div class="option" id="zipButton750">Zip
-                        <i class="fa fa-download" aria-hidden="true"></i>
-                    </div>
-                </div>
-            </div>
+    <!-- Mobile -->
+    <div class="navbar navBar550 languageJS">
+        <div class="categoryTitle">
+            <img class="logo" src="css/img/logo_v4.svg">
+            <div class="version"><span class="versionSub" id="mainTitle550"></span></div>
         </div>
 
-        <div class="category">
-            <div class="button select">Settings
-                <div class="toDisplay">
-                    <div class="option subSelect">Theme
-                        <i class="fa fa-chevron-right" aria-hidden="true"></i>
+        <div class="category languageJS" id="JStoTSbar">
+            <div class="buttonJStoTS languageTS" id="toTSbutton550">TS</div>
+            <div class="buttonJStoTS languageJS" id="toJSbutton550">JS</div>
+            <div class="buttonSpaceKiller"></div>
+            <div class="button run" id="runButton550"><img src="css/img/playButton.svg"></div>
+            <div class="button" id="saveButton550"><img src="css/img/saveButton.svg"></div>
+            <div class="button removeOnPhone" id="zipButton550"><img src="css/img/downloadButton.svg"></div>
+            <div class="button" id="newButton550"><img src="css/img/newButton.svg"></div>
+            <div class="button removeOnPhone" id="clearButton550"><img src="css/img/clearButton.svg"></div>
+
+            <div class="button select"><img src="css/img/optionsButton.svg">
+                <div class="toDisplay displayJS">
+                    <div class="option subSelect">Theme <i class="fa fa-chevron-right" aria-hidden="true"></i>
                         <div class="toDisplaySub">
-                            <div class="option" id="darkTheme750">Dark</div>
-                            <div class="option" id="lightTheme750">Light</div>
+                            <div class="option selected" id="darkTheme550">Dark</div>
+                            <div class="option" id="lightTheme550">Light</div>
                         </div>
                     </div>
-                    <div class="option subSelect">
-                        <span id="currentFontSize750">Font: 14</span>
-                        <i class="fa fa-chevron-right" aria-hidden="true"></i>
-                        <div class="toDisplaySub">
+                    <div class="option subSelect">Font size <i class="fa fa-chevron-right" aria-hidden="true"></i>
+                        <div class="toDisplaySub displayFontSize">
                             <div class="option" onclick="setFontSize(12);">12</div>
-                            <div class="option" onclick="setFontSize(14);">14</div>
+                            <div class="option selected" onclick="setFontSize(14);">14</div>
                             <div class="option" onclick="setFontSize(16);">16</div>
                             <div class="option" onclick="setFontSize(18);">18</div>
                             <div class="option" onclick="setFontSize(20);">20</div>
                             <div class="option" onclick="setFontSize(22);">22</div>
                         </div>
                     </div>
-                    <div class="option" id="safemodeToggle750">Safe mode
-                        <i class="far fa-square" aria-hidden="true"></i>
+                    <div class="option noSubSelect" id="safemodeToggle550">Safe mode
+                        <i class="fa fa-square" aria-hidden="true"></i>
                     </div>
-                    <div style="display:none;" class="option checked" id="editorButton750">Editor
+                    <div class="option checked noSubSelect" id="editorButton550">Editor
                         <i class="fa fa-check-square" aria-hidden="true"></i>
                     </div>
-                    <div class="option" id="fullscreenButton750">Fullscreen</div>
-                    <div class="option" id="editorFullscreenButton750">Editor Fullscreen</div>
-                    <div class="option" id="formatButton750">Format code</div>
-                    <div class="option" id="minimapToggle750">Minimap
-                        <i class="far fa-square" aria-hidden="true"></i>
+                    <div class="option nosubselect" id="fullscreenButton550" style="display: none">Fullscreen</div>
+                    <div class="option nosubselect" id="editorFullscreenButton550" style="display: none">Editor
+                        Fullscreen</div>
+                    <div class="option nosubselect" id="formatButton550">Format code</div>
+                    <div class="option nosubselect" id="minimapToggle550">Minimap
+                        <i class="fa fa-square" aria-hidden="true"></i>
                     </div>
-                    <div class="option" id="debugButton750">Inspector</div>
-                    <div class="option" id="metadataButton750">Metadata</div>
-                    <div class="option subSelect">
-                        <span id="currentVersion750">Vers. : Latest</span>
-                        <i class="fa fa-chevron-right" aria-hidden="true"></i>
+                    <div class="option subSelect" id="qrCodeHover" onmouseover="showQRCode();">QR Code Link <i
+                            class="fa fa-chevron-right" aria-hidden="true"></i>
                         <div class="toDisplaySub">
-                            <div class="option" onclick="setVersion('latest');">Latest</div>
-                            <div class="option" onclick="setVersion('2.5');">2.5</div>
+                            <div class="option" id="qrCodeImage">QR Code Image</div>
+                        </div>
+                    </div>
+                    <div class="option uncheck noSubSelect" id="debugButton550">Inspector
+                        <i class="fa fa-square" aria-hidden="true"></i>
+                    </div>
+                    <div class="option nosubselect" id="metadataButton550">Metadata</div>
+                    <div class="option subSelect">Links / Tools <i class="fa fa-chevron-right" aria-hidden="true"></i>
+                        <div class="toDisplaySub displayFooterLinks">
+                            <div class="option link">
+                                <a target='_new' href="https://www.netlify.com/">Deployed by Netlify</a>
+                            </div>
+                            <div class="option link">
+                                <a target='_new' href="https://forum.babylonjs.com/">Forum</a>
+                            </div>
+                            <div class="option link">
+                                <a target='_new' href="https://www.babylonjs.com/sandbox">Sandbox</a>
+                            </div>
+                            <div class="option link">
+                                <a target='_new' href="https://doc.babylonjs.com">Documentation</a>
+                            </div>
+                            <div class="option link">
+                                <a target='_new' href="https://doc.babylonjs.com/playground">Search</a>
+                            </div>
                         </div>
                     </div>
                 </div>
@@ -366,20 +344,27 @@
         </div>
 
         <div class="category right">
-            <div class="button select">
-                <span class="examplesButton">Examples</span>
+            <div class="button select" style="display: none;">
+                <span id="currentVersion550">v.</span>
+                <div class="toDisplay currentVersionDisplay">
+                    <div class="option" onclick="setVersion('4.0');">4.0</div>
+                    <div class="option" onclick="setVersion('3.0');">3.0</div>
+                </div>
             </div>
+            <div class="button select"><img class="examplesButton" src="css/img/examplesButton.svg"></div>
         </div>
     </div>
 
+    <!-- Common things -->
+
     <div class="wrapper">
         <div id="jsEditor"></div>
         <div id="canvasZone">
             <canvas touch-action="none" id="renderCanvas"></canvas>
         </div>
     </div>
-    <div id="exampleList">
-        <div id="exampleBanner">
+    <div id="exampleList" class="javascript">
+        <div id="exampleBanner" class="languageJS">
             <h1>Examples</h1>
         </div>
         <div class="horizontalSeparator"></div>
@@ -388,7 +373,7 @@
             src="https://d33wubrfki0l68.cloudfront.net/17ca450bae302631f4857cd8c3992234ec5dd9a7/057f9/img/ui/clear_button.png">
     </div>
 
-    <span class="label" id="fpsLabel">FPS</span>
+    <div class="fpsLabel languageJS" id="fpsLabel">FPS</div>
 
     <div id="errorZone">
     </div>
@@ -415,7 +400,7 @@
     </div>
 
     <div id="saveLayer" class="save-layer">
-        <div class="save-form">
+        <div class="save-form languageJS ">
             <label for="saveFormTitle">TITLE</label>
             <div class="separator"></div>
             <input type="text" maxlength="120" id="saveFormTitle" class="save-form-title">
@@ -429,37 +414,39 @@
             <textarea id="saveFormTags" rows="4" cols="10"></textarea>
 
             <div class="save-form-buttons" id="saveFormButtons">
-
-                <div id="saveFormButtonOk" class="button">OK</div>
-                <div id="saveFormButtonCancel" class="button">Cancel</div>
+                <div id="saveFormButtonOk">OK</div>
+                <div id="saveFormButtonCancel">Cancel</div>
             </div>
         </div>
     </div>
 
     <div id="waitDiv">
         <span id="waitTitle">Babylon.js Playground
-            <BR>
-            <BR>
-            <BR>
+            <br>
+            <br>
+            <br>
         </span>
         <div id="logo-part">
-            <img src="v4.svg" id="waitLogo" />
-            <img src="spinner.svg" id="waitSpinner" />
+            <img src="css/img/v4.svg" id="waitLogo" />
+            <img src="css/img/spinner.svg" id="waitSpinner" />
         </div>
     </div>
 
+    <!-- jQuery -->
     <script src="https://code.jquery.com/jquery.js"></script>
     <script src="js/jquery.qrcode.js"></script>
     <script src="js/qrcode.js"></script>
-    
 
+    <!-- Main scripts -->
     <script src="js/actions.js"></script>
+    <script src="js/libs/typescript.js"></script>
     <script src="js/pbt.js"></script>
+    
     <script>
         BABYLONDEVTOOLS.Loader
             .require('node_modules/monaco-editor/min/vs/loader.js')
             .require('js/index.js')
-            .load(function() {
+            .load(function () {
                 BABYLON.DracoCompression.Configuration.decoder = {
                     wasmUrl: "../dist/preview%20release/draco_wasm_wrapper_gltf.js",
                     wasmBinaryUrl: "../dist/preview%20release/draco_decoder_gltf.wasm",

Playground/index.html

@@ -1,22 +1,32 @@
 <!DOCTYPE html>
 <html>
 
+<!--
+    // TO DO - Delete this ? It's not used anymore. It's now included in the index.html with a switch button JS / TS
+ -->
+
 <head>
     <title>Babylon.js Playground</title>
     <meta charset='utf-8' />
     <meta name="viewport" content="width=device-width, user-scalable=no">
     <link rel="shortcut icon" href="https://www.babylonjs.com/favicon.ico">
 
-    <link rel="stylesheet" href="https://use.typekit.net/cta4xsb.css">
+    <link rel="stylesheet" href="https://use.typekit.net/cta4xsb.css" />
+    <link rel="stylesheet" href="css/index.css" />
+    <link rel="stylesheet" href="css/index710.css" />
+    <link rel="stylesheet" href="css/index550.css" />
 
+    <!-- Pep -->
     <script src="js/libs/pep.min.js"></script>
-    <!--For canvas/code separator-->
+    <!-- For canvas/code separator -->
     <script src="js/libs/split.js"></script>
 
+    <!-- DatGUI -->
     <script src="js/libs/dat.gui.min.js"></script>
     <!-- jszip -->
     <script src="js/libs/jszip.min.js"></script>
     <script src="js/libs/fileSaver.js"></script>
+    
     <!-- Dependencies -->
     <script src="https://preview.babylonjs.com/ammo.js"></script>
     <script src="https://preview.babylonjs.com/cannon.js"></script>
@@ -39,346 +49,304 @@
 
     <!-- Extensions -->
     <script src="https://rawgit.com/BabylonJS/Extensions/master/ClonerSystem/src/babylonx.cloner.js" async></script>
-    <script src="https://rawgit.com/BabylonJS/Extensions/master/CompoundShader/src/babylonx.CompoundShader.js"
-        async></script>
+    <script src="https://rawgit.com/BabylonJS/Extensions/master/CompoundShader/src/babylonx.CompoundShader.js" async></script>
 
     <!-- Scene Manager -->
     <script src="https://mackeyk24.github.io/toolkit/babylon.manager.js"></script>
     <script src="https://mackeyk24.github.io/toolkit/babylon.navmesh.js"></script>
-
-    <link href="css/index.css" rel="stylesheet" />
 </head>
 
 <body>
-    <div class="navbar navBar1600">
-        <div class="title">
-            Babylon.js Playground
-        </div>
-        <div class="version" id="mainTitle">
-        </div>
-
-        <div class="category">
-            <div class="button run" id="runButton1600">Run
-                <i class="fa fa-play" aria-hidden="true"></i>
-            </div>
-        </div>
-
-
-        <div class="category">
-            <div class="button" id="newButton1600">New
-                <i class="fa fa-file" aria-hidden="true"></i>
-            </div>
-            <div class="button removeOnPhone" id="clearButton1600">Clear
-                <i class="fa fa-trash" aria-hidden="true"></i>
-            </div>
-        </div>
-
-        <div class="category">
-            <div class="button" id="saveButton1600">Save
-                <i class="fa fa-floppy-o" aria-hidden="true"></i>
-            </div>
-            <div class="button removeOnPhone" id="zipButton1600">Zip
-                <i class="fa fa-download" aria-hidden="true"></i>
-            </div>
+    <!-- Big screens -->
+    <div class="navbar navBar1280 languageJS">
+        <div class="categoryTitle">
+            <img class="logo" src="css/img/logo_v4.svg">
+            <div class="version">Playground <span class="versionSub" id="mainTitle1280"></span></div>
         </div>
 
-        <div class="category">
-            <div class="button select">Settings
-                <div class="toDisplay">
-                    <div class="option subSelect">Theme
-                        <i class="fa fa-chevron-right" aria-hidden="true"></i>
-                        <div class="toDisplaySub">
-                            <div class="option" id="darkTheme1600">Dark</div>
-                            <div class="option" id="lightTheme1600">Light</div>
+        <div class="category languageJS" id="JStoTSbar">
+            <div class="buttonJStoTS languageTS" id="toTSbutton1280">Typescript</div>
+            <div class="buttonJStoTS languageJS" id="toJSbutton1280">Javascript</div>
+            <div class="button run" id="runButton1280"><img src="css/img/playButton.svg"></div>
+            <div class="button" id="saveButton1280"><img src="css/img/saveButton.svg"></div>
+            <div class="button removeOnPhone" id="zipButton1280"><img src="css/img/downloadButton.svg"></div>
+            <div class="button" id="newButton1280"><img src="css/img/newButton.svg"></div>
+            <div class="button removeOnPhone" id="clearButton1280"><img src="css/img/clearButton.svg"></div>
+
+            <div class="button select"><img src="css/img/optionsButton.svg">
+                <div class="toDisplay languageJS">
+                    <div class="option subSelect">Theme <i class="fa fa-chevron-right" aria-hidden="true"></i>
+                        <div class="toDisplaySub languageJS">
+                            <div class="option selected" id="darkTheme1280">Dark</div>
+                            <div class="option" id="lightTheme1280">Light</div>
                         </div>
                     </div>
-                    <div class="option subSelect">
-                        <span id="currentFontSize1600">Font: 14</span>
-                        <i class="fa fa-chevron-right" aria-hidden="true"></i>
-                        <div class="toDisplaySub">
+                    <div class="option subSelect">Font size <i class="fa fa-chevron-right" aria-hidden="true"></i>
+                        <div class="toDisplaySub displayFontSize languageJS">
                             <div class="option" onclick="setFontSize(12);">12</div>
-                            <div class="option" onclick="setFontSize(14);">14</div>
+                            <div class="option selected" onclick="setFontSize(14);">14</div>
                             <div class="option" onclick="setFontSize(16);">16</div>
                             <div class="option" onclick="setFontSize(18);">18</div>
                             <div class="option" onclick="setFontSize(20);">20</div>
                             <div class="option" onclick="setFontSize(22);">22</div>
                         </div>
                     </div>
-                    <div class="option" id="safemodeToggle1600">Safe mode
-                        <i class="far fa-square" aria-hidden="true"></i>
+                    <div class="option noSubSelect" id="safemodeToggle1280">Safe mode
+                        <i class="fa fa-square" aria-hidden="true"></i>
                     </div>
-                    <div class="option checked" id="editorButton1600">Editor
+                    <div class="option checked noSubSelect" id="editorButton1280">Editor
                         <i class="fa fa-check-square" aria-hidden="true"></i>
                     </div>
-                    <div class="option" id="fullscreenButton1600">Fullscreen</div>
-                    <div class="option" id="editorFullscreenButton1600">Editor Fullscreen</div>
-                    <div class="option" id="formatButton1600">Format code</div>
-                    <div class="option" id="minimapToggle1600">Minimap
-                        <i class="far fa-square" aria-hidden="true"></i>
+                    <div class="option noSubSelect" id="fullscreenButton1280">Fullscreen</div>
+                    <div class="option noSubSelect" id="editorFullscreenButton1280">Editor Fullscreen</div>
+                    <div class="option noSubSelect" id="formatButton1280">Format code</div>
+                    <div class="option noSubSelect" id="minimapToggle1280">Minimap
+                        <i class="fa fa-square" aria-hidden="true"></i>
                     </div>
-                    <div class="option subSelect" id="qrCodeHover" onmouseover="showQRCode();">QR Code Link
-                        <i class="fa fa-chevron-right" aria-hidden="true"></i>
+                    <div class="option subSelect" id="qrCodeHover" onmouseover="showQRCode();">QR Code Link <i class="fa fa-chevron-right" aria-hidden="true"></i>
                         <div class="toDisplaySub">
-                            <div class="option" style="height:auto;padding: 20px;background: white;" id="qrCodeImage">QR
-                                Code Image</div>
+                            <div class="option" id="qrCodeImage">QR Code Image</div>
                         </div>
                     </div>
+                    <div class="option uncheck noSubSelect" id="debugButton1280">Inspector
+                        <i class="fa fa-square" aria-hidden="true"></i>
+                    </div>
+                    <div class="option nosubselect" id="metadataButton1280">Metadata</div>
                 </div>
             </div>
-
-            <div class="button uncheck" id="debugButton1600">Inspector</div>
-            <div class="button" id="metadataButton1600">Metadata</div>
         </div>
 
-
-
         <div class="category right">
-            <div class="button select">
-                <span id="currentVersion1600">Version: Latest</span>
-                <div class="toDisplay">
-                    <div class="option" onclick="setVersion('latest');">Latest</div>
-                    <div class="option" onclick="setVersion('stable');">Stable</div>
+            <div class="button select" style="display: none;">
+                <span id="currentVersion1280">v.</span>
+                <div class="toDisplay currentVersionDisplay">
+                    <div class="option" onclick="setVersion('4.0');">4.0</div>
+                    <div class="option" onclick="setVersion('3.0');">3.0</div>
                 </div>
             </div>
-            <div class="button select">
-                <span class="examplesButton">Examples</span>
-            </div>
+            <div class="button select"><img class="examplesButton" src="css/img/examplesButton.svg"></div>
         </div>
     </div>
 
-    <div class="navbar navBar1475">
-        <div class="title">
-            Babylon.js Playground
-        </div>
-        <div class="version" id="mainTitle">
+    <!-- Mid-size screens -->
+    <div class="navbar navBar920 languageJS">
+        <div class="categoryTitle">
+            <img class="logo" src="css/img/logo_v4.svg">
+            <div class="version"><span class="versionSub" id="mainTitle920"></span></div>
         </div>
 
-        <div class="category">
-            <div class="button run" id="runButton1475">Run
-                <i class="fa fa-play" aria-hidden="true"></i>
-            </div>
-        </div>
+        <div class="category languageJS" id="JStoTSbar">
+            <div class="buttonJStoTS languageTS" id="toTSbutton920">TS</div>
+            <div class="buttonJStoTS languageJS" id="toJSbutton920">JS</div>
+            <div class="buttonSpaceKiller"></div>
+            <div class="button run" id="runButton920"><img src="css/img/playButton.svg"></div>
+            <div class="button" id="saveButton920"><img src="css/img/saveButton.svg"></div>
+            <div class="button removeOnPhone" id="zipButton920"><img src="css/img/downloadButton.svg"></div>
+            <div class="button" id="newButton920"><img src="css/img/newButton.svg"></div>
+            <div class="button removeOnPhone" id="clearButton920"><img src="css/img/clearButton.svg"></div>
 
+            <div class="button select"><img src="css/img/optionsButton.svg">
+                <div class="toDisplay displayJS">
+                    <div class="option subSelect">Theme <i class="fa fa-chevron-right" aria-hidden="true"></i>
 
-        <div class="category">
-            <div class="button" id="newButton1475">New
-                <i class="fa fa-file" aria-hidden="true"></i>
-            </div>
-            <div class="button removeOnPhone" id="clearButton1475">Clear
-                <i class="fa fa-trash" aria-hidden="true"></i>
-            </div>
-        </div>
-
-        <div class="category">
-            <div class="button" id="saveButton1475">Save
-                <i class="fa fa-floppy-o" aria-hidden="true"></i>
-            </div>
-            <div class="button removeOnPhone" id="zipButton1475">Zip
-                <i class="fa fa-download" aria-hidden="true"></i>
-            </div>
-        </div>
-
-        <div class="category">
-            <div class="button select">Settings
-                <div class="toDisplay">
-                    <div class="option subSelect">Theme
-                        <i class="fa fa-chevron-right" aria-hidden="true"></i>
                         <div class="toDisplaySub">
-                            <div class="option" id="darkTheme1475">Dark</div>
-                            <div class="option" id="lightTheme1475">Light</div>
+                            <div class="option selected" id="darkTheme920">Dark</div>
+                            <div class="option" id="lightTheme920">Light</div>
                         </div>
                     </div>
-                    <div class="option subSelect">
-                        <span id="currentFontSize1475">Font: 14</span>
-                        <i class="fa fa-chevron-right" aria-hidden="true"></i>
-                        <div class="toDisplaySub">
+                    <div class="option subSelect">Font size <i class="fa fa-chevron-right" aria-hidden="true"></i>
+                        <div class="toDisplaySub displayFontSize">
                             <div class="option" onclick="setFontSize(12);">12</div>
-                            <div class="option" onclick="setFontSize(14);">14</div>
+                            <div class="option selected" onclick="setFontSize(14);">14</div>
                             <div class="option" onclick="setFontSize(16);">16</div>
                             <div class="option" onclick="setFontSize(18);">18</div>
                             <div class="option" onclick="setFontSize(20);">20</div>
                             <div class="option" onclick="setFontSize(22);">22</div>
                         </div>
                     </div>
-                    <div class="option" id='safemodeToggle1475'>Safe mode
-                        <i class="far fa-square" aria-hidden="true"></i>
+                    <div class="option noSubSelect" id="safemodeToggle920">Safe mode
+                        <i class="fa fa-square" aria-hidden="true"></i>
                     </div>
-                    <div class="option checked" id="editorButton1475">Editor
+                    <div class="option checked noSubSelect" id="editorButton920">Editor
                         <i class="fa fa-check-square" aria-hidden="true"></i>
                     </div>
-                    <div class="option" id="fullscreenButton1475">Fullscreen</div>
-                    <div class="option" id="editorFullscreenButton1475">Editor Fullscreen</div>
-                    <div class="option" id="formatButton1475">Format code</div>
-                    <div class="option" id="minimapToggle1475">Minimap
-                        <i class="far fa-square" aria-hidden="true"></i>
+                    <div class="option noSubSelect" id="fullscreenButton920">Fullscreen</div>
+                    <div class="option noSubSelect" id="editorFullscreenButton920">Editor Fullscreen</div>
+                    <div class="option noSubSelect" id="formatButton920">Format code</div>
+                    <div class="option noSubSelect" id="minimapToggle920">Minimap
+                        <i class="fa fa-square" aria-hidden="true"></i>
                     </div>
-                    <div class="option" id="debugButton1475">Inspector</div>
-                    <div class="option" id="metadataButton1475">Metadata</div>
-                    <div class="option subSelect">
-                        <span id="currentVersion1475">Vers. : Latest</span>
-                        <i class="fa fa-chevron-right" aria-hidden="true"></i>
+                    <div class="option subSelect" id="qrCodeHover" onmouseover="showQRCode();">QR Code Link <i class="fa fa-chevron-right" aria-hidden="true"></i>
                         <div class="toDisplaySub">
-                            <div class="option" onclick="setVersion('latest');">Latest</div>
-                            <div class="option" onclick="setVersion('stable');">Stable</div>
+                            <div class="option" id="qrCodeImage">QR Code Image</div>
                         </div>
                     </div>
+                    <div class="option uncheck noSubSelect" id="debugButton920">Inspector
+                        <i class="fa fa-square" aria-hidden="true"></i>
+                    </div>
+                    <div class="option noSubSelect" id="metadataButton920">Metadata</div>
                 </div>
             </div>
         </div>
 
         <div class="category right">
-            <div class="button select">
-                <span class="examplesButton">Examples</span>
+            <div class="button select" style="display: none;">
+                <span id="currentVersion920">v.</span>
+                <div class="toDisplay currentVersionDisplay">
+                    <div class="option" onclick="setVersion('4.0');">4.0</div>
+                    <div class="option" onclick="setVersion('3.0');">3.0</div>
+                </div>
             </div>
+            <div class="button select"><img class="examplesButton" src="css/img/examplesButton.svg"></div>
         </div>
     </div>
 
-    <div class="navbar navBar1030">
-        <div class="category">
-            <div class="button run" id="runButton1030">Run
-                <i class="fa fa-play" aria-hidden="true"></i>
-            </div>
+    <!-- Little screens -->
+    <div class="navbar navBar710 languageJS">
+        <div class="categoryTitle">
+            <img class="logo" src="css/img/logo_v4.svg">
+            <div class="version"><span class="versionSub" id="mainTitle710"></span></div>
         </div>
 
+        <div class="category languageJS" id="JStoTSbar">
+            <div class="buttonJStoTS languageTS" id="toTSbutton710">TS</div>
+            <div class="buttonJStoTS languageJS" id="toJSbutton710">JS</div>
+            <div class="buttonSpaceKiller"></div>
+            <div class="button run" id="runButton710"><img src="css/img/playButton.svg"></div>
+            <div class="button" id="saveButton710"><img src="css/img/saveButton.svg"></div>
+            <div class="button removeOnPhone" id="zipButton710"><img src="css/img/downloadButton.svg"></div>
+            <div class="button" id="newButton710"><img src="css/img/newButton.svg"></div>
+            <div class="button removeOnPhone" id="clearButton710"><img src="css/img/clearButton.svg"></div>
 
-        <div class="category">
-            <div class="button" id="newButton1030">New
-                <i class="fa fa-file" aria-hidden="true"></i>
-            </div>
-            <div class="button removeOnPhone" id="clearButton1030">Clear
-                <i class="fa fa-trash" aria-hidden="true"></i>
-            </div>
-        </div>
+            <div class="button select"><img src="css/img/optionsButton.svg">
+                <div class="toDisplay displayJS">
+                    <div class="option subSelect">Theme <i class="fa fa-chevron-right" aria-hidden="true"></i>
 
-        <div class="category">
-            <div class="button" id="saveButton1030">Save
-                <i class="fa fa-floppy-o" aria-hidden="true"></i>
-            </div>
-            <div class="button removeOnPhone" id="zipButton1030">Zip
-                <i class="fa fa-download" aria-hidden="true"></i>
-            </div>
-        </div>
-
-        <div class="category">
-            <div class="button select">Settings
-                <div class="toDisplay">
-                    <div class="option subSelect">Theme
-                        <i class="fa fa-chevron-right" aria-hidden="true"></i>
                         <div class="toDisplaySub">
-                            <div class="option" id="darkTheme1030">Dark</div>
-                            <div class="option" id="lightTheme1030">Light</div>
+                            <div class="option selected" id="darkTheme710">Dark</div>
+                            <div class="option" id="lightTheme710">Light</div>
                         </div>
                     </div>
-                    <div class="option subSelect">
-                        <span id="currentFontSize1030">Font: 14</span>
-                        <i class="fa fa-chevron-right" aria-hidden="true"></i>
-                        <div class="toDisplaySub">
+                    <div class="option subSelect">Font size <i class="fa fa-chevron-right" aria-hidden="true"></i>
+                        <div class="toDisplaySub displayFontSize">
                             <div class="option" onclick="setFontSize(12);">12</div>
-                            <div class="option" onclick="setFontSize(14);">14</div>
+                            <div class="option selected" onclick="setFontSize(14);">14</div>
                             <div class="option" onclick="setFontSize(16);">16</div>
                             <div class="option" onclick="setFontSize(18);">18</div>
                             <div class="option" onclick="setFontSize(20);">20</div>
                             <div class="option" onclick="setFontSize(22);">22</div>
                         </div>
                     </div>
-                    <div class="option" id="safemodeToggle1030">Safe mode
-                        <i class="far fa-square" aria-hidden="true"></i>
+                    <div class="option noSubSelect" id="safemodeToggle710">Safe mode
+                        <i class="fa fa-square" aria-hidden="true"></i>
                     </div>
-                    <div class="option checked" id="editorButton1030">Editor
+                    <div class="option checked noSubSelect" id="editorButton710">Editor
                         <i class="fa fa-check-square" aria-hidden="true"></i>
                     </div>
-                    <div class="option" id="fullscreenButton1030">Fullscreen</div>
-                    <div class="option" id="editorFullscreenButton1030">Editor Fullscreen</div>
-                    <div class="option" id="formatButton1030">Format code</div>
-                    <div class="option" id="minimapToggle1030">Minimap
-                        <i class="far fa-square" aria-hidden="true"></i>
+                    <div class="option noSubSelect" id="fullscreenButton710">Fullscreen</div>
+                    <div class="option noSubSelect" id="editorFullscreenButton710">Editor Fullscreen</div>
+                    <div class="option noSubSelect" id="formatButton710">Format code</div>
+                    <div class="option noSubSelect" id="minimapToggle710">Minimap
+                        <i class="fa fa-square" aria-hidden="true"></i>
                     </div>
-                    <div class="option" id="debugButton1030">Inspector</div>
-                    <div class="option" id="metadataButton1030">Metadata</div>
-                    <div class="option subSelect">
-                        <span id="currentVersion1030">Vers. : Latest</span>
-                        <i class="fa fa-chevron-right" aria-hidden="true"></i>
+                    <div class="option subSelect" id="qrCodeHover" onmouseover="showQRCode();">QR Code Link <i class="fa fa-chevron-right" aria-hidden="true"></i>
                         <div class="toDisplaySub">
-                            <div class="option" onclick="setVersion('latest');">Latest</div>
-                            <div class="option" onclick="setVersion('stable');">Stable</div>
+                            <div class="option" id="qrCodeImage">QR Code Image</div>
                         </div>
                     </div>
+                    <div class="option uncheck noSubSelect" id="debugButton710">Inspector
+                        <i class="fa fa-square" aria-hidden="true"></i>
+                    </div>
+                    <div class="option nosubselect" id="metadataButton710">Metadata</div>
                 </div>
             </div>
         </div>
 
         <div class="category right">
-            <div class="button select">
-                <span class="examplesButton">Examples</span>
+            <div class="button select" style="display: none;">
+                <span id="currentVersion710">v.</span>
+                <div class="toDisplay currentVersionDisplay">
+                    <div class="option" onclick="setVersion('4.0');">4.0</div>
+                    <div class="option" onclick="setVersion('3.0');">3.0</div>
+                </div>
             </div>
+            <div class="button select"><img class="examplesButton" src="css/img/examplesButton.svg"></div>
         </div>
     </div>
 
-    <div class="navbar navBar750">
-        <div class="category">
-            <div class="button select">File
-                <div class="toDisplay">
-                    <div class="option" id="runButton750">Run
-                        <i class="fa fa-play" aria-hidden="true"></i>
-                    </div>
-                    <div class="option" id="newButton750">New
-                        <i class="fa fa-file" aria-hidden="true"></i>
-                    </div>
-                    <div class="option" id="clearButton750">Clear
-                        <i class="fa fa-trash" aria-hidden="true"></i>
-                    </div>
-                    <div class="option" id="saveButton750">Save
-                        <i class="fa fa-floppy-o" aria-hidden="true"></i>
-                    </div>
-                    <div class="option" id="zipButton750">Zip
-                        <i class="fa fa-download" aria-hidden="true"></i>
-                    </div>
-                </div>
-            </div>
+    <!-- Mobile -->
+    <div class="navbar navBar550 languageJS">
+        <div class="categoryTitle">
+            <img class="logo" src="css/img/logo_v4.svg">
+            <div class="version"><span class="versionSub" id="mainTitle550"></span></div>
         </div>
 
-        <div class="category">
-            <div class="button select">Settings
-                <div class="toDisplay">
-                    <div class="option subSelect">Theme
-                        <i class="fa fa-chevron-right" aria-hidden="true"></i>
+        <div class="category languageJS" id="JStoTSbar">
+            <div class="buttonJStoTS languageTS" id="toTSbutton550">TS</div>
+            <div class="buttonJStoTS languageJS" id="toJSbutton550">JS</div>
+            <div class="buttonSpaceKiller"></div>
+            <div class="button run" id="runButton550"><img src="css/img/playButton.svg"></div>
+            <div class="button" id="saveButton550"><img src="css/img/saveButton.svg"></div>
+            <div class="button removeOnPhone" id="zipButton550"><img src="css/img/downloadButton.svg"></div>
+            <div class="button" id="newButton550"><img src="css/img/newButton.svg"></div>
+            <div class="button removeOnPhone" id="clearButton550"><img src="css/img/clearButton.svg"></div>
+
+            <div class="button select"><img src="css/img/optionsButton.svg">
+                <div class="toDisplay displayJS">
+                    <div class="option subSelect">Theme <i class="fa fa-chevron-right" aria-hidden="true"></i>
                         <div class="toDisplaySub">
-                            <div class="option" id="darkTheme750">Dark</div>
-                            <div class="option" id="lightTheme750">Light</div>
+                            <div class="option selected" id="darkTheme550">Dark</div>
+                            <div class="option" id="lightTheme550">Light</div>
                         </div>
                     </div>
-                    <div class="option subSelect">
-                        <span id="currentFontSize750">Font: 14</span>
-                        <i class="fa fa-chevron-right" aria-hidden="true"></i>
-                        <div class="toDisplaySub">
+                    <div class="option subSelect">Font size <i class="fa fa-chevron-right" aria-hidden="true"></i>
+                        <div class="toDisplaySub displayFontSize">
                             <div class="option" onclick="setFontSize(12);">12</div>
-                            <div class="option" onclick="setFontSize(14);">14</div>
+                            <div class="option selected" onclick="setFontSize(14);">14</div>
                             <div class="option" onclick="setFontSize(16);">16</div>
                             <div class="option" onclick="setFontSize(18);">18</div>
                             <div class="option" onclick="setFontSize(20);">20</div>
                             <div class="option" onclick="setFontSize(22);">22</div>
                         </div>
                     </div>
-                    <div class="option" id="safemodeToggle750">Safe mode
-                        <i class="far fa-square" aria-hidden="true"></i>
+                    <div class="option noSubSelect" id="safemodeToggle550">Safe mode
+                        <i class="fa fa-square" aria-hidden="true"></i>
                     </div>
-                    <div style="display:none;" class="option checked" id="editorButton750">Editor
+                    <div class="option checked noSubSelect" id="editorButton550">Editor
                         <i class="fa fa-check-square" aria-hidden="true"></i>
                     </div>
-                    <div class="option" id="fullscreenButton750">Fullscreen</div>
-                    <div class="option" id="editorFullscreenButton750">Editor Fullscreen</div>
-                    <div class="option" id="formatButton750">Format code</div>
-                    <div class="option" id="minimapToggle750">Minimap
-                        <i class="far fa-square" aria-hidden="true"></i>
+                    <div class="option nosubselect" id="fullscreenButton550" style="display: none">Fullscreen</div>
+                    <div class="option nosubselect" id="editorFullscreenButton550" style="display: none">Editor Fullscreen</div>
+                    <div class="option nosubselect" id="formatButton550">Format code</div>
+                    <div class="option nosubselect" id="minimapToggle550">Minimap
+                        <i class="fa fa-square" aria-hidden="true"></i>
                     </div>
-                    <div class="option" id="debugButton750">Inspector</div>
-                    <div class="option" id="metadataButton750">Metadata</div>
-                    <div class="option subSelect">
-                        <span id="currentVersion750">Vers. : Latest</span>
-                        <i class="fa fa-chevron-right" aria-hidden="true"></i>
+                    <div class="option subSelect" id="qrCodeHover" onmouseover="showQRCode();">QR Code Link <i class="fa fa-chevron-right" aria-hidden="true"></i>
                         <div class="toDisplaySub">
-                            <div class="option" onclick="setVersion('latest');">Latest</div>
-                            <div class="option" onclick="setVersion('stable');">Stable</div>
+                            <div class="option" id="qrCodeImage">QR Code Image</div>
+                        </div>
+                    </div>
+                    <div class="option uncheck noSubSelect" id="debugButton550">Inspector
+                        <i class="fa fa-square" aria-hidden="true"></i>
+                    </div>
+                    <div class="option nosubselect" id="metadataButton550">Metadata</div>
+                    <div class="option subSelect">Links / Tools <i class="fa fa-chevron-right" aria-hidden="true"></i>
+                        <div class="toDisplaySub displayFooterLinks">
+                            <div class="option link">
+                                <a target='_new' href="https://www.netlify.com/">Deployed by Netlify</a>
+                            </div>
+                            <div class="option link">
+                                <a target='_new' href="https://forum.babylonjs.com/">Forum</a>
+                            </div>
+                            <div class="option link">
+                                <a target='_new' href="https://www.babylonjs.com/sandbox">Sandbox</a>
+                            </div>
+                            <div class="option link">
+                                <a target='_new' href="https://doc.babylonjs.com">Documentation</a>
+                            </div>
+                            <div class="option link">
+                                <a target='_new' href="https://doc.babylonjs.com/playground">Search</a>
+                            </div>
                         </div>
                     </div>
                 </div>
@@ -386,12 +354,19 @@
         </div>
 
         <div class="category right">
-            <div class="button select">
-                <span id="currentScript750">Examples</span>
+            <div class="button select" style="display: none;">
+                <span id="currentVersion550">v.</span>
+                <div class="toDisplay currentVersionDisplay">
+                    <div class="option" onclick="setVersion('4.0');">4.0</div>
+                    <div class="option" onclick="setVersion('3.0');">3.0</div>
+                </div>
             </div>
+            <div class="button select"><img class="examplesButton" src="css/img/examplesButton.svg"></div>
         </div>
     </div>
 
+    <!-- Common things -->
+
     <div class="wrapper">
         <div id="jsEditor"></div>
         <div id="canvasZone">
@@ -399,16 +374,15 @@
         </div>
     </div>
     <div id="exampleList" class="javascript">
-        <div id="exampleBanner">
+        <div id="exampleBanner" class="languageJS">
             <h1>Examples</h1>
         </div>
         <div class="horizontalSeparator"></div>
         <input id="filterBar" type="text" placeholder="Filter examples...">
-        <img id="filterBarClear"
-            src="https://d33wubrfki0l68.cloudfront.net/17ca450bae302631f4857cd8c3992234ec5dd9a7/057f9/img/ui/clear_button.png">
+        <img id="filterBarClear" src="https://d33wubrfki0l68.cloudfront.net/17ca450bae302631f4857cd8c3992234ec5dd9a7/057f9/img/ui/clear_button.png">
     </div>
 
-    <span class="label" id="fpsLabel">FPS</span>
+    <div class="fpsLabel languageJS" id="fpsLabel">FPS</div>
 
     <div id="errorZone">
     </div>
@@ -435,7 +409,7 @@
     </div>
 
     <div id="saveLayer" class="save-layer">
-        <div class="save-form">
+        <div class="save-form languageJS ">
             <label for="saveFormTitle">TITLE</label>
             <div class="separator"></div>
             <input type="text" maxlength="120" id="saveFormTitle" class="save-form-title">
@@ -449,31 +423,33 @@
             <textarea id="saveFormTags" rows="4" cols="10"></textarea>
 
             <div class="save-form-buttons" id="saveFormButtons">
-
-                <div id="saveFormButtonOk" class="button">OK</div>
-                <div id="saveFormButtonCancel" class="button">Cancel</div>
+                <div id="saveFormButtonOk">OK</div>
+                <div id="saveFormButtonCancel">Cancel</div>
             </div>
         </div>
     </div>
 
     <div id="waitDiv">
         <span id="waitTitle">Babylon.js Playground
-            <BR>
-            <BR>
-            <BR>
+            <br>
+            <br>
+            <br>
         </span>
         <div id="logo-part">
-            <img src="v4.svg" id="waitLogo" />
-            <img src="spinner.svg" id="waitSpinner" />
+            <img src="css/img/v4.svg" id="waitLogo" />
+            <img src="css/img/spinner.svg" id="waitSpinner" />
         </div>
     </div>
 
+    <!-- jQuery -->
     <script src="js/libs/jquery.min.js"></script>
     <script src="js/jquery.qrcode.js"></script>
     <script src="js/qrcode.js"></script>
 
+    <!-- Main scripts -->
     <script src="js/actions.js"></script>
     <script src="js/pbt.js"></script>
+    <script src="js/libs/typescript.js"></script>
     <script src="js/index.js"></script>
 
     <!-- Global site tag (gtag.js) - Google Analytics -->

Playground/indexStable.html

@@ -1,27 +1,40 @@
 <!DOCTYPE html>
 <html>
 
+<!--
+    The purpose of the indexStable.html file is to ???
+    // TO DO - Complete that
+ -->
+
 <head>
     <title>Babylon.js Playground</title>
     <meta charset='utf-8' />
     <meta name="viewport" content="width=device-width, user-scalable=no">
     <link rel="shortcut icon" href="https://www.babylonjs.com/img/favicon/favicon.ico">
+
+    <link rel="stylesheet" href="https://use.typekit.net/cta4xsb.css" />
+    <link rel="stylesheet" href="css/index.css" />
+    <link rel="stylesheet" href="css/index710.css" />
+    <link rel="stylesheet" href="css/index550.css" />
+
     <link rel="manifest" href="https://www.babylonjs.com/img/favicon/manifest.json">
     <meta name="msapplication-TileColor" content="#ffffff">
     <meta name="msapplication-TileImage" content="https://www.babylonjs.com/img/favicon/ms-icon-144x144.png">
     <meta name="msapplication-config" content="https://www.babylonjs.com/img/favicon/browserconfig.xml">
     <meta name="theme-color" content="#ffffff">
-    <link rel="stylesheet" href="https://use.typekit.net/cta4xsb.css">
 
+    <!-- Pep -->
     <script src="https://code.jquery.com/pep/0.4.2/pep.min.js"></script>
     <!--For canvas/code separator-->
     <script src="js/libs/split.js"></script>
 
+    <!-- DatGUI -->
     <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.6.2/dat.gui.min.js"></script>
     <!-- jszip -->
     <script src="js/libs/jszip.min.js"></script>
     <script src="js/libs/fileSaver.js"></script>
-    <!-- Physics -->
+
+    <!-- Dependencies -->
     <script src="https://cdn.babylonjs.com/ammo.js"></script>
     <script src="https://cdn.babylonjs.com/cannon.js"></script>
     <script src="https://cdn.babylonjs.com/Oimo.js"></script>
@@ -37,339 +50,304 @@
     <script src="https://cdn.babylonjs.com/loaders/babylonjs.loaders.js"></script>
     <script src="https://cdn.babylonjs.com/serializers/babylonjs.serializers.min.js"></script>
 
-    <script src="https://rawgit.com/BabylonJS/Extensions/master/ClonerSystem/src/babylonx.cloner.js"></script>
     <!-- Monaco -->
     <script src="node_modules/monaco-editor/min/vs/loader.js"></script>
-    <link href="css/index.css" rel="stylesheet" />
+
+    <!-- Extensions -->
+    <script src="https://rawgit.com/BabylonJS/Extensions/master/ClonerSystem/src/babylonx.cloner.js"></script>
 </head>
 
 <body>
-    <div class="navbar navBar1600">
-        <div class="title">
-            Babylon.js Playground
-        </div>
-        <div class="version" id="mainTitle">
-        </div>
-
-        <div class="category">
-            <div class="button run" id="runButton1600">Run
-                <i class="fa fa-play" aria-hidden="true"></i>
-            </div>
-        </div>
-
-
-        <div class="category">
-            <div class="button" id="newButton1600">New
-                <i class="fa fa-file" aria-hidden="true"></i>
-            </div>
-            <div class="button removeOnPhone" id="clearButton1600">Clear
-                <i class="fa fa-trash" aria-hidden="true"></i>
-            </div>
-        </div>
-
-        <div class="category">
-            <div class="button" id="saveButton1600">Save
-                <i class="fa fa-floppy-o" aria-hidden="true"></i>
-            </div>
-            <div class="button removeOnPhone" id="zipButton1600">Zip
-                <i class="fa fa-download" aria-hidden="true"></i>
-            </div>
+    <!-- Big screens -->
+    <div class="navbar navBar1280 languageJS">
+        <div class="categoryTitle">
+            <img class="logo" src="css/img/logo_v4.svg">
+            <div class="version">Playground <span class="versionSub" id="mainTitle1280"></span></div>
         </div>
 
-        <div class="category">
-            <div class="button select">Settings
-                <div class="toDisplay">
-                    <div class="option subSelect">Theme
-                        <i class="fa fa-chevron-right" aria-hidden="true"></i>
-                        <div class="toDisplaySub">
-                            <div class="option" id="darkTheme1600">Dark</div>
-                            <div class="option" id="lightTheme1600">Light</div>
+        <div class="category languageJS" id="JStoTSbar">
+            <div class="buttonJStoTS languageTS" id="toTSbutton1280">Typescript</div>
+            <div class="buttonJStoTS languageJS" id="toJSbutton1280">Javascript</div>
+            <div class="button run" id="runButton1280"><img src="css/img/playButton.svg"></div>
+            <div class="button" id="saveButton1280"><img src="css/img/saveButton.svg"></div>
+            <div class="button removeOnPhone" id="zipButton1280"><img src="css/img/downloadButton.svg"></div>
+            <div class="button" id="newButton1280"><img src="css/img/newButton.svg"></div>
+            <div class="button removeOnPhone" id="clearButton1280"><img src="css/img/clearButton.svg"></div>
+
+            <div class="button select"><img src="css/img/optionsButton.svg">
+                <div class="toDisplay languageJS">
+                    <div class="option subSelect">Theme <i class="fa fa-chevron-right" aria-hidden="true"></i>
+                        <div class="toDisplaySub languageJS">
+                            <div class="option selected" id="darkTheme1280">Dark</div>
+                            <div class="option" id="lightTheme1280">Light</div>
                         </div>
                     </div>
-                    <div class="option subSelect">
-                        <span id="currentFontSize1600">Font: 14</span>
-                        <i class="fa fa-chevron-right" aria-hidden="true"></i>
-                        <div class="toDisplaySub">
+                    <div class="option subSelect">Font size <i class="fa fa-chevron-right" aria-hidden="true"></i>
+                        <div class="toDisplaySub displayFontSize languageJS">
                             <div class="option" onclick="setFontSize(12);">12</div>
-                            <div class="option" onclick="setFontSize(14);">14</div>
+                            <div class="option selected" onclick="setFontSize(14);">14</div>
                             <div class="option" onclick="setFontSize(16);">16</div>
                             <div class="option" onclick="setFontSize(18);">18</div>
                             <div class="option" onclick="setFontSize(20);">20</div>
                             <div class="option" onclick="setFontSize(22);">22</div>
                         </div>
                     </div>
-                    <div class="option" id="safemodeToggle1600">Safe mode
-                        <i class="far fa-square" aria-hidden="true"></i>
+                    <div class="option noSubSelect" id="safemodeToggle1280">Safe mode
+                        <i class="fa fa-square" aria-hidden="true"></i>
                     </div>
-                    <div class="option checked" id="editorButton1600">Editor
+                    <div class="option checked noSubSelect" id="editorButton1280">Editor
                         <i class="fa fa-check-square" aria-hidden="true"></i>
                     </div>
-                    <div class="option" id="fullscreenButton1600">Fullscreen</div>
-                    <div class="option" id="editorFullscreenButton1600">Editor Fullscreen</div>
-                    <div class="option" id="formatButton1600">Format code</div>
-                    <div class="option" id="minimapToggle1600">Minimap
-                        <i class="far fa-square" aria-hidden="true"></i>
+                    <div class="option noSubSelect" id="fullscreenButton1280">Fullscreen</div>
+                    <div class="option noSubSelect" id="editorFullscreenButton1280">Editor Fullscreen</div>
+                    <div class="option noSubSelect" id="formatButton1280">Format code</div>
+                    <div class="option noSubSelect" id="minimapToggle1280">Minimap
+                        <i class="fa fa-square" aria-hidden="true"></i>
                     </div>
+                    <div class="option subSelect" id="qrCodeHover" onmouseover="showQRCode();">QR Code Link <i class="fa fa-chevron-right" aria-hidden="true"></i>
+                        <div class="toDisplaySub">
+                            <div class="option" id="qrCodeImage">QR Code Image</div>
+                        </div>
+                    </div>
+                    <div class="option uncheck noSubSelect" id="debugButton1280">Inspector
+                        <i class="fa fa-square" aria-hidden="true"></i>
+                    </div>
+                    <div class="option nosubselect" id="metadataButton1280">Metadata</div>
                 </div>
             </div>
-
-            <div class="button uncheck" id="debugButton1600">Inspector</div>
-            <div class="button" id="metadataButton1600">Metadata</div>
         </div>
 
         <div class="category right">
-            <div class="button select">
-                <span id="currentVersion1600">Version: Latest</span>
-                <div class="toDisplay">
-                    <div class="option" onclick="setVersion('latest');">Latest</div>
-                    <div class="option" onclick="setVersion('stable');">Stable</div>
+            <div class="button select" style="display: none;">
+                <span id="currentVersion1280">v.</span>
+                <div class="toDisplay currentVersionDisplay">
+                    <div class="option" onclick="setVersion('4.0');">4.0</div>
+                    <div class="option" onclick="setVersion('3.0');">3.0</div>
                 </div>
             </div>
-            <div class="button select">
-                <span class="examplesButton">Examples</span>
-            </div>
+            <div class="button select"><img class="examplesButton" src="css/img/examplesButton.svg"></div>
         </div>
     </div>
 
-    <div class="navbar navBar1475">
-        <div class="title">
-            Babylon.js Playground
-        </div>
-        <div class="version" id="mainTitle">
+    <!-- Mid-size screens -->
+    <div class="navbar navBar920 languageJS">
+        <div class="categoryTitle">
+            <img class="logo" src="css/img/logo_v4.svg">
+            <div class="version"><span class="versionSub" id="mainTitle920"></span></div>
         </div>
 
-        <div class="category">
-            <div class="button run" id="runButton1475">Run
-                <i class="fa fa-play" aria-hidden="true"></i>
-            </div>
-        </div>
+        <div class="category languageJS" id="JStoTSbar">
+            <div class="buttonJStoTS languageTS" id="toTSbutton920">TS</div>
+            <div class="buttonJStoTS languageJS" id="toJSbutton920">JS</div>
+            <div class="buttonSpaceKiller"></div>
+            <div class="button run" id="runButton920"><img src="css/img/playButton.svg"></div>
+            <div class="button" id="saveButton920"><img src="css/img/saveButton.svg"></div>
+            <div class="button removeOnPhone" id="zipButton920"><img src="css/img/downloadButton.svg"></div>
+            <div class="button" id="newButton920"><img src="css/img/newButton.svg"></div>
+            <div class="button removeOnPhone" id="clearButton920"><img src="css/img/clearButton.svg"></div>
 
+            <div class="button select"><img src="css/img/optionsButton.svg">
+                <div class="toDisplay displayJS">
+                    <div class="option subSelect">Theme <i class="fa fa-chevron-right" aria-hidden="true"></i>
 
-        <div class="category">
-            <div class="button" id="newButton1475">New
-                <i class="fa fa-file" aria-hidden="true"></i>
-            </div>
-            <div class="button removeOnPhone" id="clearButton1475">Clear
-                <i class="fa fa-trash" aria-hidden="true"></i>
-            </div>
-        </div>
-
-        <div class="category">
-            <div class="button" id="saveButton1475">Save
-                <i class="fa fa-floppy-o" aria-hidden="true"></i>
-            </div>
-            <div class="button removeOnPhone" id="zipButton1475">Zip
-                <i class="fa fa-download" aria-hidden="true"></i>
-            </div>
-        </div>
-
-        <div class="category">
-            <div class="button select">Settings
-                <div class="toDisplay">
-                    <div class="option subSelect">Theme
-                        <i class="fa fa-chevron-right" aria-hidden="true"></i>
                         <div class="toDisplaySub">
-                            <div class="option" id="darkTheme1475">Dark</div>
-                            <div class="option" id="lightTheme1475">Light</div>
+                            <div class="option selected" id="darkTheme920">Dark</div>
+                            <div class="option" id="lightTheme920">Light</div>
                         </div>
                     </div>
-                    <div class="option subSelect">
-                        <span id="currentFontSize1475">Font: 14</span>
-                        <i class="fa fa-chevron-right" aria-hidden="true"></i>
-                        <div class="toDisplaySub">
+                    <div class="option subSelect">Font size <i class="fa fa-chevron-right" aria-hidden="true"></i>
+                        <div class="toDisplaySub displayFontSize">
                             <div class="option" onclick="setFontSize(12);">12</div>
-                            <div class="option" onclick="setFontSize(14);">14</div>
+                            <div class="option selected" onclick="setFontSize(14);">14</div>
                             <div class="option" onclick="setFontSize(16);">16</div>
                             <div class="option" onclick="setFontSize(18);">18</div>
                             <div class="option" onclick="setFontSize(20);">20</div>
                             <div class="option" onclick="setFontSize(22);">22</div>
                         </div>
                     </div>
-                    <div class="option" id='safemodeToggle1475'>Safe mode
-                        <i class="far fa-square" aria-hidden="true"></i>
+                    <div class="option noSubSelect" id="safemodeToggle920">Safe mode
+                        <i class="fa fa-square" aria-hidden="true"></i>
                     </div>
-                    <div class="option checked" id="editorButton1475">Editor
+                    <div class="option checked noSubSelect" id="editorButton920">Editor
                         <i class="fa fa-check-square" aria-hidden="true"></i>
                     </div>
-                    <div class="option" id="fullscreenButton1475">Fullscreen</div>
-                    <div class="option" id="editorFullscreenButton1475">Editor Fullscreen</div>
-                    <div class="option" id="formatButton1475">Format code</div>
-                    <div class="option" id="minimapToggle1475">Minimap
-                        <i class="far fa-square" aria-hidden="true"></i>
+                    <div class="option noSubSelect" id="fullscreenButton920">Fullscreen</div>
+                    <div class="option noSubSelect" id="editorFullscreenButton920">Editor Fullscreen</div>
+                    <div class="option noSubSelect" id="formatButton920">Format code</div>
+                    <div class="option noSubSelect" id="minimapToggle920">Minimap
+                        <i class="fa fa-square" aria-hidden="true"></i>
                     </div>
-                    <div class="option" id="debugButton1475">Inspector</div>
-                    <div class="option" id="metadataButton1475">Metadata</div>
-                    <div class="option subSelect">
-                        <span id="currentVersion1475">Vers. : Latest</span>
-                        <i class="fa fa-chevron-right" aria-hidden="true"></i>
+                    <div class="option subSelect" id="qrCodeHover" onmouseover="showQRCode();">QR Code Link <i class="fa fa-chevron-right" aria-hidden="true"></i>
                         <div class="toDisplaySub">
-                            <div class="option" onclick="setVersion('latest');">Latest</div>
-                            <div class="option" onclick="setVersion('stable');">Stable</div>
+                            <div class="option" id="qrCodeImage">QR Code Image</div>
                         </div>
                     </div>
-                    <div class="option subSelect" id="qrCodeHover" onmouseover="showQRCode();">QR Code Link
-                        <i class="fa fa-chevron-right" aria-hidden="true"></i>
-                        <div class="toDisplaySub">
-                            <div class="option" style="height:auto;padding: 20px;background: white;" id="qrCodeImage">QR Code Image</div>
-                        </div>
+                    <div class="option uncheck noSubSelect" id="debugButton920">Inspector
+                        <i class="fa fa-square" aria-hidden="true"></i>
                     </div>
+                    <div class="option noSubSelect" id="metadataButton920">Metadata</div>
                 </div>
             </div>
         </div>
 
         <div class="category right">
-            <div class="button select">
-                <span class="examplesButton">Examples</span>
+            <div class="button select" style="display: none;">
+                <span id="currentVersion920">v.</span>
+                <div class="toDisplay currentVersionDisplay">
+                    <div class="option" onclick="setVersion('4.0');">4.0</div>
+                    <div class="option" onclick="setVersion('3.0');">3.0</div>
+                </div>
             </div>
+            <div class="button select"><img class="examplesButton" src="css/img/examplesButton.svg"></div>
         </div>
     </div>
 
-    <div class="navbar navBar1030">
-        <div class="category">
-            <div class="button run" id="runButton1030">Run
-                <i class="fa fa-play" aria-hidden="true"></i>
-            </div>
+    <!-- Little screens -->
+    <div class="navbar navBar710 languageJS">
+        <div class="categoryTitle">
+            <img class="logo" src="css/img/logo_v4.svg">
+            <div class="version"><span class="versionSub" id="mainTitle710"></span></div>
         </div>
 
+        <div class="category languageJS" id="JStoTSbar">
+            <div class="buttonJStoTS languageTS" id="toTSbutton710">TS</div>
+            <div class="buttonJStoTS languageJS" id="toJSbutton710">JS</div>
+            <div class="buttonSpaceKiller"></div>
+            <div class="button run" id="runButton710"><img src="css/img/playButton.svg"></div>
+            <div class="button" id="saveButton710"><img src="css/img/saveButton.svg"></div>
+            <div class="button removeOnPhone" id="zipButton710"><img src="css/img/downloadButton.svg"></div>
+            <div class="button" id="newButton710"><img src="css/img/newButton.svg"></div>
+            <div class="button removeOnPhone" id="clearButton710"><img src="css/img/clearButton.svg"></div>
 
-        <div class="category">
-            <div class="button" id="newButton1030">New
-                <i class="fa fa-file" aria-hidden="true"></i>
-            </div>
-            <div class="button removeOnPhone" id="clearButton1030">Clear
-                <i class="fa fa-trash" aria-hidden="true"></i>
-            </div>
-        </div>
-
-        <div class="category">
-            <div class="button" id="saveButton1030">Save
-                <i class="fa fa-floppy-o" aria-hidden="true"></i>
-            </div>
-            <div class="button removeOnPhone" id="zipButton1030">Zip
-                <i class="fa fa-download" aria-hidden="true"></i>
-            </div>
-        </div>
+            <div class="button select"><img src="css/img/optionsButton.svg">
+                <div class="toDisplay displayJS">
+                    <div class="option subSelect">Theme <i class="fa fa-chevron-right" aria-hidden="true"></i>
 
-        <div class="category">
-            <div class="button select">Settings
-                <div class="toDisplay">
-                    <div class="option subSelect">Theme
-                        <i class="fa fa-chevron-right" aria-hidden="true"></i>
                         <div class="toDisplaySub">
-                            <div class="option" id="darkTheme1030">Dark</div>
-                            <div class="option" id="lightTheme1030">Light</div>
+                            <div class="option selected" id="darkTheme710">Dark</div>
+                            <div class="option" id="lightTheme710">Light</div>
                         </div>
                     </div>
-                    <div class="option subSelect">
-                        <span id="currentFontSize1030">Font: 14</span>
-                        <i class="fa fa-chevron-right" aria-hidden="true"></i>
-                        <div class="toDisplaySub">
+                    <div class="option subSelect">Font size <i class="fa fa-chevron-right" aria-hidden="true"></i>
+                        <div class="toDisplaySub displayFontSize">
                             <div class="option" onclick="setFontSize(12);">12</div>
-                            <div class="option" onclick="setFontSize(14);">14</div>
+                            <div class="option selected" onclick="setFontSize(14);">14</div>
                             <div class="option" onclick="setFontSize(16);">16</div>
                             <div class="option" onclick="setFontSize(18);">18</div>
                             <div class="option" onclick="setFontSize(20);">20</div>
                             <div class="option" onclick="setFontSize(22);">22</div>
                         </div>
                     </div>
-                    <div class="option" id="safemodeToggle1030">Safe mode
-                        <i class="far fa-square" aria-hidden="true"></i>
+                    <div class="option noSubSelect" id="safemodeToggle710">Safe mode
+                        <i class="fa fa-square" aria-hidden="true"></i>
                     </div>
-                    <div class="option checked" id="editorButton1030">Editor
+                    <div class="option checked noSubSelect" id="editorButton710">Editor
                         <i class="fa fa-check-square" aria-hidden="true"></i>
                     </div>
-                    <div class="option" id="fullscreenButton1030">Fullscreen</div>
-                    <div class="option" id="editorFullscreenButton1030">Editor Fullscreen</div>
-                    <div class="option" id="formatButton1030">Format code</div>
-                    <div class="option" id="minimapToggle1030">Minimap
-                        <i class="far fa-square" aria-hidden="true"></i>
+                    <div class="option noSubSelect" id="fullscreenButton710">Fullscreen</div>
+                    <div class="option noSubSelect" id="editorFullscreenButton710">Editor Fullscreen</div>
+                    <div class="option noSubSelect" id="formatButton710">Format code</div>
+                    <div class="option noSubSelect" id="minimapToggle710">Minimap
+                        <i class="fa fa-square" aria-hidden="true"></i>
                     </div>
-                    <div class="option" id="debugButton1030">Inspector</div>
-                    <div class="option" id="metadataButton1030">Metadata</div>
-                    <div class="option subSelect">
-                        <span id="currentVersion1030">Vers. : Latest</span>
-                        <i class="fa fa-chevron-right" aria-hidden="true"></i>
+                    <div class="option subSelect" id="qrCodeHover" onmouseover="showQRCode();">QR Code Link <i class="fa fa-chevron-right" aria-hidden="true"></i>
                         <div class="toDisplaySub">
-                            <div class="option" onclick="setVersion('latest');">Latest</div>
-                            <div class="option" onclick="setVersion('stable');">Stable</div>
+                            <div class="option" id="qrCodeImage">QR Code Image</div>
                         </div>
                     </div>
+                    <div class="option uncheck noSubSelect" id="debugButton710">Inspector
+                        <i class="fa fa-square" aria-hidden="true"></i>
+                    </div>
+                    <div class="option nosubselect" id="metadataButton710">Metadata</div>
                 </div>
             </div>
         </div>
 
         <div class="category right">
-            <div class="button select">
-                <span class="examplesButton">Examples</span>
+            <div class="button select" style="display: none;">
+                <span id="currentVersion710">v.</span>
+                <div class="toDisplay currentVersionDisplay">
+                    <div class="option" onclick="setVersion('4.0');">4.0</div>
+                    <div class="option" onclick="setVersion('3.0');">3.0</div>
+                </div>
             </div>
+            <div class="button select"><img class="examplesButton" src="css/img/examplesButton.svg"></div>
         </div>
     </div>
 
-    <div class="navbar navBar750">
-        <div class="category">
-            <div class="button select">File
-                <div class="toDisplay">
-                    <div class="option" id="runButton750">Run
-                        <i class="fa fa-play" aria-hidden="true"></i>
-                    </div>
-                    <div class="option" id="newButton750">New
-                        <i class="fa fa-file" aria-hidden="true"></i>
-                    </div>
-                    <div class="option" id="clearButton750">Clear
-                        <i class="fa fa-trash" aria-hidden="true"></i>
-                    </div>
-                    <div class="option" id="saveButton750">Save
-                        <i class="fa fa-floppy-o" aria-hidden="true"></i>
-                    </div>
-                    <div class="option" id="zipButton750">Zip
-                        <i class="fa fa-download" aria-hidden="true"></i>
-                    </div>
-                </div>
-            </div>
+    <!-- Mobile -->
+    <div class="navbar navBar550 languageJS">
+        <div class="categoryTitle">
+            <img class="logo" src="css/img/logo_v4.svg">
+            <div class="version"><span class="versionSub" id="mainTitle550"></span></div>
         </div>
 
-        <div class="category">
-            <div class="button select">Settings
-                <div class="toDisplay">
-                    <div class="option subSelect">Theme
-                        <i class="fa fa-chevron-right" aria-hidden="true"></i>
+        <div class="category languageJS" id="JStoTSbar">
+            <div class="buttonJStoTS languageTS" id="toTSbutton550">TS</div>
+            <div class="buttonJStoTS languageJS" id="toJSbutton550">JS</div>
+            <div class="buttonSpaceKiller"></div>
+            <div class="button run" id="runButton550"><img src="css/img/playButton.svg"></div>
+            <div class="button" id="saveButton550"><img src="css/img/saveButton.svg"></div>
+            <div class="button removeOnPhone" id="zipButton550"><img src="css/img/downloadButton.svg"></div>
+            <div class="button" id="newButton550"><img src="css/img/newButton.svg"></div>
+            <div class="button removeOnPhone" id="clearButton550"><img src="css/img/clearButton.svg"></div>
+
+            <div class="button select"><img src="css/img/optionsButton.svg">
+                <div class="toDisplay displayJS">
+                    <div class="option subSelect">Theme <i class="fa fa-chevron-right" aria-hidden="true"></i>
                         <div class="toDisplaySub">
-                            <div class="option" id="darkTheme750">Dark</div>
-                            <div class="option" id="lightTheme750">Light</div>
+                            <div class="option selected" id="darkTheme550">Dark</div>
+                            <div class="option" id="lightTheme550">Light</div>
                         </div>
                     </div>
-                    <div class="option subSelect">
-                        <span id="currentFontSize750">Font: 14</span>
-                        <i class="fa fa-chevron-right" aria-hidden="true"></i>
-                        <div class="toDisplaySub">
+                    <div class="option subSelect">Font size <i class="fa fa-chevron-right" aria-hidden="true"></i>
+                        <div class="toDisplaySub displayFontSize">
                             <div class="option" onclick="setFontSize(12);">12</div>
-                            <div class="option" onclick="setFontSize(14);">14</div>
+                            <div class="option selected" onclick="setFontSize(14);">14</div>
                             <div class="option" onclick="setFontSize(16);">16</div>
                             <div class="option" onclick="setFontSize(18);">18</div>
                             <div class="option" onclick="setFontSize(20);">20</div>
                             <div class="option" onclick="setFontSize(22);">22</div>
                         </div>
                     </div>
-                    <div class="option" id="safemodeToggle750">Safe mode
-                        <i class="far fa-square" aria-hidden="true"></i>
+                    <div class="option noSubSelect" id="safemodeToggle550">Safe mode
+                        <i class="fa fa-square" aria-hidden="true"></i>
                     </div>
-                    <div style="display:none;" class="option checked" id="editorButton750">Editor
+                    <div class="option checked noSubSelect" id="editorButton550">Editor
                         <i class="fa fa-check-square" aria-hidden="true"></i>
                     </div>
-                    <div class="option" id="fullscreenButton750">Fullscreen</div>
-                    <div class="option" id="editorFullscreenButton750">Editor Fullscreen</div>
-                    <div class="option" id="formatButton750">Format code</div>
-                    <div class="option" id="minimapToggle750">Minimap
-                        <i class="far fa-square" aria-hidden="true"></i>
+                    <div class="option nosubselect" id="fullscreenButton550" style="display: none">Fullscreen</div>
+                    <div class="option nosubselect" id="editorFullscreenButton550" style="display: none">Editor Fullscreen</div>
+                    <div class="option nosubselect" id="formatButton550">Format code</div>
+                    <div class="option nosubselect" id="minimapToggle550">Minimap
+                        <i class="fa fa-square" aria-hidden="true"></i>
                     </div>
-                    <div class="option" id="debugButton750">Inspector</div>
-                    <div class="option" id="metadataButton750">Metadata</div>
-                    <div class="option subSelect">
-                        <span id="currentVersion750">Vers. : Latest</span>
-                        <i class="fa fa-chevron-right" aria-hidden="true"></i>
+                    <div class="option subSelect" id="qrCodeHover" onmouseover="showQRCode();">QR Code Link <i class="fa fa-chevron-right" aria-hidden="true"></i>
                         <div class="toDisplaySub">
-                            <div class="option" onclick="setVersion('latest');">Latest</div>
-                            <div class="option" onclick="setVersion('stable');">Stable</div>
+                            <div class="option" id="qrCodeImage">QR Code Image</div>
+                        </div>
+                    </div>
+                    <div class="option uncheck noSubSelect" id="debugButton550">Inspector
+                        <i class="fa fa-square" aria-hidden="true"></i>
+                    </div>
+                    <div class="option nosubselect" id="metadataButton550">Metadata</div>
+                    <div class="option subSelect">Links / Tools <i class="fa fa-chevron-right" aria-hidden="true"></i>
+                        <div class="toDisplaySub displayFooterLinks">
+                            <div class="option link">
+                                <a target='_new' href="https://www.netlify.com/">Deployed by Netlify</a>
+                            </div>
+                            <div class="option link">
+                                <a target='_new' href="https://forum.babylonjs.com/">Forum</a>
+                            </div>
+                            <div class="option link">
+                                <a target='_new' href="https://www.babylonjs.com/sandbox">Sandbox</a>
+                            </div>
+                            <div class="option link">
+                                <a target='_new' href="https://doc.babylonjs.com">Documentation</a>
+                            </div>
+                            <div class="option link">
+                                <a target='_new' href="https://doc.babylonjs.com/playground">Search</a>
+                            </div>
                         </div>
                     </div>
                 </div>
@@ -377,29 +355,35 @@
         </div>
 
         <div class="category right">
-            <div class="button select">
-                <span class="examplesButton">Examples</span>
+            <div class="button select" style="display: none;">
+                <span id="currentVersion550">v.</span>
+                <div class="toDisplay currentVersionDisplay">
+                    <div class="option" onclick="setVersion('4.0');">4.0</div>
+                    <div class="option" onclick="setVersion('3.0');">3.0</div>
+                </div>
             </div>
+            <div class="button select"><img class="examplesButton" src="css/img/examplesButton.svg"></div>
         </div>
     </div>
 
+    <!-- Common things -->
+
     <div class="wrapper">
         <div id="jsEditor"></div>
         <div id="canvasZone">
             <canvas touch-action="none" id="renderCanvas"></canvas>
         </div>
     </div>
-    <div id="exampleList">
-        <div id="exampleBanner">
+    <div id="exampleList" class="javascript">
+        <div id="exampleBanner" class="languageJS">
             <h1>Examples</h1>
         </div>
         <div class="horizontalSeparator"></div>
         <input id="filterBar" type="text" placeholder="Filter examples...">
-        <img id="filterBarClear"
-            src="https://d33wubrfki0l68.cloudfront.net/17ca450bae302631f4857cd8c3992234ec5dd9a7/057f9/img/ui/clear_button.png">
+        <img id="filterBarClear" src="https://d33wubrfki0l68.cloudfront.net/17ca450bae302631f4857cd8c3992234ec5dd9a7/057f9/img/ui/clear_button.png">
     </div>
 
-    <span class="label" id="fpsLabel">FPS</span>
+    <div class="fpsLabel languageJS" id="fpsLabel">FPS</div>
 
     <div id="errorZone">
     </div>
@@ -426,7 +410,7 @@
     </div>
 
     <div id="saveLayer" class="save-layer">
-        <div class="save-form">
+        <div class="save-form languageJS ">
             <label for="saveFormTitle">TITLE</label>
             <div class="separator"></div>
             <input type="text" maxlength="120" id="saveFormTitle" class="save-form-title">
@@ -440,23 +424,38 @@
             <textarea id="saveFormTags" rows="4" cols="10"></textarea>
 
             <div class="save-form-buttons" id="saveFormButtons">
-
-                <div id="saveFormButtonOk" class="button">OK</div>
-                <div id="saveFormButtonCancel" class="button">Cancel</div>
+                <div id="saveFormButtonOk">OK</div>
+                <div id="saveFormButtonCancel">Cancel</div>
             </div>
         </div>
     </div>
 
+    <div id="waitDiv">
+        <span id="waitTitle">Babylon.js Playground
+            <br>
+            <br>
+            <br>
+        </span>
+        <div id="logo-part">
+            <img src="css/img/v4.svg" id="waitLogo" />
+            <img src="css/img/spinner.svg" id="waitSpinner" />
+        </div>
+    </div>
+
+    <!-- jQuery -->
     <script src="https://code.jquery.com/jquery.js"></script>
     <script src="js/jquery.qrcode.js"></script>
     <script src="js/qrcode.js"></script>
 
+    <!-- TO DO : Comment this. What is it ? -->
     <script>
         Split(['#jsEditor', '#canvasZone']);
     </script>
 
+<!-- Main scripts -->
     <script src="js/actions.js"></script>
     <script src="js/pbt.js"></script>
+    <script src="js/libs/typescript.js"></script>
     <script src="js/index.js"></script>
 
     <!-- Global site tag (gtag.js) - Google Analytics -->

Playground/js/actions.js

@@ -3,8 +3,20 @@
     var allSelect = document.querySelectorAll('.select');
     var allToDisplay = document.querySelectorAll('.toDisplay');
     var allToDisplayBig = document.querySelectorAll('.toDisplayBig');
+    var allSubItems = document.querySelectorAll('.toDisplaySub');
+    var allSubSelect = document.querySelectorAll('.subSelect');
+    var allNoSubSelect = document.querySelectorAll('.noSubSelect');
 
+    // Remove displayed subItems
+    var removeAllSubItems = function () {
+        for (var index = 0; index < allSubItems.length; index++) {
+            allSubItems[index].style.display = 'none';
+        }
+    }
+    // Remove displayed options
     var removeAllOptions = function () {
+        removeAllSubItems();
+
         for (var index = 0; index < allToDisplay.length; index++) {
             var a = allToDisplay[index];
             if (a.style.display == 'block') {
@@ -20,19 +32,44 @@
     }
 
     // Remove displayed options
-    window.addEventListener('click', function () {
+    window.addEventListener('click', function (evt) {
         removeAllOptions();
     });
 
+    // Resize jsEditor and canvas when in mobile mode
+    var jsEditor = document.getElementById('jsEditor');
+    var canvasZone = document.getElementById('canvasZone');
+    var navBar550 = document.getElementsByClassName('navBar550')[0];
+    var reiszeBigJsEditor = function() {
+        if(navBar550.offsetHeight > 0) {
+            canvasZone.style.width = '40px';
+            jsEditor.style.width = 'calc(100% - 40px)';
+        }
+    };
+    var resizeBigCanvas = function() {
+        if(navBar550.offsetHeight > 0) {
+            jsEditor.style.width = '40px';
+            canvasZone.style.width = 'calc(100% - 40px)';
+        }
+    };
+    jsEditor.addEventListener('click', reiszeBigJsEditor);
+    canvasZone.addEventListener('click', resizeBigCanvas);
+    document.getElementById('runButton550').addEventListener('click', resizeBigCanvas);
+
     // Handle click on select elements
     for (var index = 0; index < allSelect.length; index++) {
         var s = allSelect[index];
         // Get child called to display
         var displayItems = function (e) {
+            if (e.target.nodeName != "IMG") {
+                e.preventDefault();
+                e.stopPropagation();
+                return;
+            }
             var toDisplay = this.querySelector('.toDisplay');
             if (toDisplay) {
                 if (toDisplay.style.display == 'block') {
-                    toDisplay.style.display = 'none';
+                    removeAllOptions();
                 } else {
                     removeAllOptions();
                     toDisplay.style.display = 'block';
@@ -41,7 +78,7 @@
             toDisplay = this.querySelector('.toDisplayBig');
             if (toDisplay) {
                 if (toDisplay.style.display == 'block') {
-                    toDisplay.style.display = 'none';
+                    removeAllOptions();
                 } else {
                     removeAllOptions();
                     toDisplay.style.display = 'block';
@@ -53,31 +90,49 @@
         s.addEventListener('click', displayItems);
     }
 
-    // Handle mouseover on subSelect
-    var allSubItems = document.querySelectorAll('.toDisplaySub');
-    var removeAllSubItems = function () {
-        for (var index = 0; index < allSubItems.length; index++) {
-            var tds = allSubItems[index];
-            if (tds.style.display == 'block') {
-                tds.style.display = 'none';
-            }
-        }
-    }
+    // Handle mouseover / click on subSelect
+    var onSubselect = function (evt) {
+        // If it's in mobile mode, avoid the "mouseenter" bug
+        if(evt.type == "mouseenter" && navBar550.offsetHeight > 0) return;
 
-    var allSubSelect = document.querySelectorAll('.subSelect');
+        removeAllSubItems();
+        var toDisplay = this.querySelector('.toDisplaySub');
+        if (toDisplay)
+            toDisplay.style.display = 'block';
+        evt.preventDefault();
+        evt.stopPropagation();
+    };
     for (var index = 0; index < allSubSelect.length; index++) {
         var ss = allSubSelect[index];
-        ss.addEventListener('mouseenter', function () {
-            var toDisplay = this.querySelector('.toDisplaySub');
-            if (toDisplay) {
-                if (toDisplay.style.display == 'block') {
-                    toDisplay.style.display = 'none';
-                } else {
-                    removeAllSubItems();
-                    toDisplay.style.display = 'block';
-                }
-            }
-        })
+        ss.addEventListener('click', onSubselect);
+        ss.addEventListener('mouseenter', onSubselect);
+    }
+    for (var index = 0; index < allNoSubSelect.length; index++) {
+        var ss = allNoSubSelect[index];
+        ss.addEventListener('mouseenter', removeAllSubItems);
+    }
+
+    // Examples must remove all the other menus
+    var examplesButton = document.getElementsByClassName("examplesButton");
+    for (var i = 0; i < examplesButton.length; i++) {
+        examplesButton[i].addEventListener("click", function () {
+            removeAllOptions();
+        });
+    }
 
+    // Handle click on subOptions
+    clickOptionSub = function(evt) {
+        evt.preventDefault();
+        evt.stopPropagation();
+
+        if(!navBar550.offsetHeight > 0) return; // If is not in mobile, this doesnt apply
+        if(!this.classList) return;
+
+        if (this.classList.contains('link')) {
+            window.open(this.querySelector('a').href, '_new');
+        }
+        if (!this.classList.contains('subSelect') && this.parentNode.style.display == 'block') {
+            this.parentNode.style.display = 'none'
+        }
     }
 })();

Playground/js/index.js

@@ -1,7 +1,77 @@
 var jsEditor;
+
 var defaultScene = "scripts/basic scene.js";
 var monacoMode = "javascript";
 
+var scriptLanguage = localStorage.getItem("bjs-playground-scriptLanguage") || 'JS';
+if (scriptLanguage == "JS") {
+    defaultScene = "scripts/basic scene.js";
+    monacoMode = "javascript";
+}
+else if (scriptLanguage == "TS") {
+    defaultScene = "scripts/basic scene.txt";
+    monacoMode = "typescript";
+
+
+    var compilerTriggerTimeoutID;
+    function triggerCompile(d, func) {
+        if (compilerTriggerTimeoutID !== null) {
+            window.clearTimeout(compilerTriggerTimeoutID);
+        }
+        compilerTriggerTimeoutID = window.setTimeout(function () {
+            try {
+
+                var output = transpileModule(d, {
+                    module: ts.ModuleKind.AMD,
+                    target: ts.ScriptTarget.ES5,
+                    noLib: true,
+                    noResolve: true,
+                    suppressOutputPathCheck: true
+                });
+                if (typeof output === "string") {
+                    func(output);
+                }
+            }
+            catch (e) {
+                showError(e.message, e);
+            }
+        }, 100);
+    }
+    function transpileModule(input, options) {
+        var inputFileName = options.jsx ? "module.tsx" : "module.ts";
+        var sourceFile = ts.createSourceFile(inputFileName, input, options.target || ts.ScriptTarget.ES5);
+        // Output
+        var outputText;
+        var program = ts.createProgram([inputFileName], options, {
+            getSourceFile: function (fileName) { return fileName.indexOf("module") === 0 ? sourceFile : undefined; },
+            writeFile: function (_name, text) { outputText = text; },
+            getDefaultLibFileName: function () { return "lib.d.ts"; },
+            useCaseSensitiveFileNames: function () { return false; },
+            getCanonicalFileName: function (fileName) { return fileName; },
+            getCurrentDirectory: function () { return ""; },
+            getNewLine: function () { return "\r\n"; },
+            fileExists: function (fileName) { return fileName === inputFileName; },
+            readFile: function () { return ""; },
+            directoryExists: function () { return true; },
+            getDirectories: function () { return []; }
+        });
+        // Emit
+        program.emit();
+        if (outputText === undefined) {
+            throw new Error("Output generation failed");
+        }
+        return outputText;
+    }
+
+    function getRunCode(jsEditor, callBack) {
+        triggerCompile(jsEditor.getValue(), function (result) {
+            callBack(result + "var createScene = function() { return Playground.CreateScene(engine, engine.getRenderingCanvas()); }")
+        });
+    }
+
+}
+
+
 function getRunCode(jsEditor, callBack) {
     var code = jsEditor.getValue();
     callBack(code);
@@ -30,22 +100,27 @@ function showError(errorMessage, errorEvent) {
     document.getElementById("errorZone").innerHTML = errorContent;
 
     // Close button error
-    document.getElementById("errorZone").querySelector('.close').addEventListener('click', function() {
+    document.getElementById("errorZone").querySelector('.close').addEventListener('click', function () {
         document.getElementById("errorZone").style.display = 'none';
     });
 }
 
-(function() {
-
-    var multipleSize = [1600, 1475, 1030, 750];
-    var setToMultipleID = function(id, thingToDo, param) {
-        multipleSize.forEach(function(size) {
+(function () {
 
+    var multipleSize = [1280, 920, 710, 550];
+    var setToMultipleID = function (id, thingToDo, param) {
+        multipleSize.forEach(function (size) {
             if (thingToDo == "innerHTML") {
                 document.getElementById(id + size).innerHTML = param
             }
             else if (thingToDo == "click") {
-                document.getElementById(id + size).addEventListener("click", param);
+                if (param.length > 1) {
+                    for (var i = 0; i < param.length; i++) {
+                        document.getElementById(id + size).addEventListener("click", param[i]);
+                    }
+                }
+                else
+                    document.getElementById(id + size).addEventListener("click", param);
             }
             else if (thingToDo == "addClass") {
                 document.getElementById(id + size).classList.add(param);
@@ -65,18 +140,21 @@ function showError(errorMessage, errorEvent) {
 
     var splitInstance = Split(['#jsEditor', '#canvasZone']);
 
+    var elementForscriptLanguage = [
+        '#exampleList #exampleBanner',
+        '.navbar',
+        '.navbar .category',
+        '.navbar .select .toDisplay',
+        '.navbar .select .toDisplay .subSelect .toDisplaySub',
+        '#fpsLabel',
+        '.save-form'
+    ];
     var elementToTheme = [
-        '.wrapper .gutter',
         '.wrapper #jsEditor',
-        '.navbar',
-        '.navbar .select .toDisplay .option',
-        '.navbar .select .toDisplayBig',
-        '.navbar .select .toDisplayBig a',
-        '.navbar .select .toDisplayBig ul li',
-        '.navbarBottom',
-        '.navbarBottom .links .link'];
+        '.wrapper .gutter'
+    ];
 
-    var run = function() {
+    var run = function () {
 
         // #region - Examples playgrounds
         var examplesButton = document.getElementsByClassName("examplesButton");
@@ -84,13 +162,15 @@ function showError(errorMessage, errorEvent) {
         if (examplesButton && examplesButton.length > 0) {
             var isExamplesDisplayed = false;
             for (var i = 0; i < examplesButton.length; i++) {
-                examplesButton[i].parentElement.onclick = function() {
+                examplesButton[i].parentElement.onclick = function () {
                     isExamplesDisplayed = !isExamplesDisplayed;
                     if (isExamplesDisplayed) {
+                        document.getElementById("fpsLabel").style.display = "none";
                         document.getElementById("exampleList").style.display = "block";
                         document.getElementsByClassName("wrapper")[0].style.width = "calc(100% - 400px)";
                     }
                     else {
+                        document.getElementById("fpsLabel").style.display = "block";
                         document.getElementById("exampleList").style.display = "none";
                         document.getElementsByClassName("wrapper")[0].style.width = "100%";
                     }
@@ -102,7 +182,7 @@ function showError(errorMessage, errorEvent) {
         var filterBar = document.getElementById("filterBar");
         if (filterBar) {
             var filterBarClear = document.getElementById("filterBarClear");
-            var filter = function() {
+            var filter = function () {
                 var filterText = filterBar.value.toLowerCase();
                 if (filterText == "") filterBarClear.style.display = "none";
                 else filterBarClear.style.display = "inline-block";
@@ -132,10 +212,10 @@ function showError(errorMessage, errorEvent) {
                 if (displayCount == 0) document.getElementById("noResultsContainer").style.display = "block";
                 else document.getElementById("noResultsContainer").style.display = "none";
             }
-            filterBar.oninput = function() {
+            filterBar.oninput = function () {
                 filter();
             }
-            filterBarClear.onclick = function() {
+            filterBarClear.onclick = function () {
                 filterBar.value = "";
                 filter();
             }
@@ -144,7 +224,7 @@ function showError(errorMessage, errorEvent) {
 
         var blockEditorChange = false;
 
-        var markDirty = function() {
+        var markDirty = function () {
             if (blockEditorChange) {
                 return;
             }
@@ -155,7 +235,7 @@ function showError(errorMessage, errorEvent) {
             setToMultipleID('safemodeToggle', 'innerHTML', 'Safe mode <i class="fa fa-check-square" aria-hidden="true"></i>');
         }
 
-        jsEditor.onKeyUp(function(evt) {
+        jsEditor.onKeyUp(function (evt) {
             markDirty();
         });
 
@@ -170,26 +250,27 @@ function showError(errorMessage, errorEvent) {
         var zipCode;
         BABYLON.Engine.ShadersRepository = "/src/Shaders/";
 
+        // TO DO : Rewrite this with unpkg.com
         if (location.href.indexOf("indexStable") !== -1) {
-            setToMultipleID("currentVersion", "innerHTML", "Version: Stable");
+            setToMultipleID("currentVersion", "innerHTML", "v.3.0");
         } else {
-            setToMultipleID("currentVersion", "innerHTML", "Version: Latest");
+            setToMultipleID("currentVersion", "innerHTML", "v.4.0");
         }
 
-        var checkTypescriptSupport = function(xhr) {
-            var filename = location.pathname.substring(location.pathname.lastIndexOf('/') + 1);
-            if (xhr.responseText.indexOf("class Playground") !== -1) {// Typescript content
-                if (!filename) {
-                    window.location.href = location.protocol + "//" + location.host + "/ts.html" + window.location.hash;
-                    return false;
-                }
-                else if (filename !== "ts.html") {
-                    window.location.href = location.protocol + "//" + location.host + location.pathname.replace(filename, "ts.html") + window.location.hash;
+        var checkTypescriptSupport = function (xhr) {
+            // If we're loading TS content and it's JS page
+            if (xhr.responseText.indexOf("class Playground") !== -1) {
+                if (scriptLanguage == "JS") {
+                    localStorage.setItem("bjs-playground-scriptLanguage", "TS");
+                    if (confirm("You need to reload the page to switch to Typescript. Do you want to reload now ?"))
+                        location.reload();
                     return false;
                 }
-            } else { // Javscript content
-                if (filename === "ts.html") {
-                    window.location.href = location.protocol + "//" + location.host + location.pathname.replace(filename, "index.html") + window.location.hash;
+            } else { // If we're loading JS content and it's TS page
+                if (scriptLanguage == "TS") {
+                    localStorage.setItem("bjs-playground-scriptLanguage", "JS");
+                    if (confirm("You need to reload the page to switch to Javascript. Do you want to reload now ?"))
+                        location.reload();
                     return false;
                 }
             }
@@ -197,12 +278,12 @@ function showError(errorMessage, errorEvent) {
             return true;
         }
 
-        var loadScript = function(scriptURL, title) {
+        var loadScript = function (scriptURL, title) {
             var xhr = new XMLHttpRequest();
 
             xhr.open('GET', scriptURL, true);
 
-            xhr.onreadystatechange = function() {
+            xhr.onreadystatechange = function () {
                 if (xhr.readyState === 4) {
                     if (xhr.status === 200) {
 
@@ -227,7 +308,7 @@ function showError(errorMessage, errorEvent) {
             xhr.send(null);
         };
 
-        var loadScriptsList = function() {
+        var loadScriptsList = function () {
 
             var exampleList = document.getElementById("exampleList");
 
@@ -240,7 +321,7 @@ function showError(errorMessage, errorEvent) {
                 xhr.open('GET', 'https://raw.githubusercontent.com/BabylonJS/Documentation/master/examples/list_ts.json', true);
             }
 
-            xhr.onreadystatechange = function() {
+            xhr.onreadystatechange = function () {
                 if (xhr.readyState === 4) {
                     if (xhr.status === 200) {
                         scripts = JSON.parse(xhr.response)["examples"];
@@ -383,9 +464,12 @@ function showError(errorMessage, errorEvent) {
                         // Restore theme
                         var theme = localStorage.getItem("bjs-playground-theme") || 'light';
                         toggleTheme(theme);
+                        // Restore language
+                        scriptLanguage = localStorage.getItem("bjs-playground-scriptLanguage") || 'JS';
+                        togglescriptLanguage(scriptLanguage);
 
                         // Remove editor if window size is less than 850px
-                        var removeEditorForSmallScreen = function() {
+                        var removeEditorForSmallScreen = function () {
                             if (mq.matches) {
                                 splitInstance.collapse(0);
                             } else {
@@ -401,7 +485,7 @@ function showError(errorMessage, errorEvent) {
             xhr.send(null);
         }
 
-        var createNewScript = function() {
+        var createNewScript = function () {
             // check if checked is on
             let iCanClear = checkSafeMode("Are you sure you want to create a new playground?");
             if (!iCanClear) return;
@@ -421,7 +505,7 @@ function showError(errorMessage, errorEvent) {
             compileAndRun();
         }
 
-        var clear = function() {
+        var clear = function () {
             // check if checked is on
             let iCanClear = checkSafeMode("Are you sure you want to clear the playground?");
             if (!iCanClear) return;
@@ -432,14 +516,14 @@ function showError(errorMessage, errorEvent) {
             jsEditor.focus();
         }
 
-        var checkSafeMode = function(message) {
-            var safeToggle = document.getElementById("safemodeToggle1600");
+        var checkSafeMode = function (message) {
+            var safeToggle = document.getElementById("safemodeToggle1280");
             if (safeToggle.classList.contains('checked')) {
                 let confirm = window.confirm(message);
                 if (!confirm) {
                     return false;
                 } else {
-                    document.getElementById("safemodeToggle1600").classList.toggle('checked');
+                    document.getElementById("safemodeToggle1280").classList.toggle('checked');
                     return true;
                 }
             } else {
@@ -447,7 +531,7 @@ function showError(errorMessage, errorEvent) {
             }
         }
 
-        var showNoMetadata = function() {
+        var showNoMetadata = function () {
             if (currentSnippetTitle) {
                 document.getElementById("saveFormTitle").value = currentSnippetTitle;
                 document.getElementById("saveFormTitle").readOnly = true;
@@ -477,7 +561,7 @@ function showError(errorMessage, errorEvent) {
         };
         showNoMetadata();
 
-        var hideNoMetadata = function() {
+        var hideNoMetadata = function () {
             document.getElementById("saveFormTitle").readOnly = true;
             document.getElementById("saveFormDescription").readOnly = true;
             document.getElementById("saveFormTags").readOnly = true;
@@ -485,7 +569,7 @@ function showError(errorMessage, errorEvent) {
             setToMultipleID("metadataButton", "display", "inline-block");
         };
 
-        compileAndRun = function() {
+        compileAndRun = function () {
             try {
                 var waitRing = document.getElementById("waitDiv");
                 if (waitRing) {
@@ -520,8 +604,8 @@ function showError(errorMessage, errorEvent) {
                 var createEngineFunction = "createDefaultEngine";
                 var createSceneFunction;
 
-                getRunCode(jsEditor, function(code) {
-                    var createDefaultEngine = function() {
+                getRunCode(jsEditor, function (code) {
+                    var createDefaultEngine = function () {
                         return new BABYLON.Engine(canvas, true, { preserveDrawingBuffer: true, stencil: true });
                     }
 
@@ -586,7 +670,7 @@ function showError(errorMessage, errorEvent) {
 
                     }
 
-                    engine.runRenderLoop(function() {
+                    engine.runRenderLoop(function () {
                         if (engine.scenes.length === 0) {
                             return;
                         }
@@ -601,7 +685,6 @@ function showError(errorMessage, errorEvent) {
                             scene.render();
                         }
 
-                        fpsLabel.style.right = document.body.clientWidth - (jsEditor.domElement.clientWidth + canvas.clientWidth) + "px";
                         fpsLabel.innerHTML = engine.getFps().toFixed() + " fps";
                     });
 
@@ -615,11 +698,11 @@ function showError(errorMessage, errorEvent) {
                         showError("You must at least create a camera.", null);
                         return;
                     } else if (scene.then) {
-                        scene.then(function() {
+                        scene.then(function () {
                             document.getElementById("statusBar").innerHTML = "";
                         });
                     } else {
-                        engine.scenes[0].executeWhenReady(function() {
+                        engine.scenes[0].executeWhenReady(function () {
                             document.getElementById("statusBar").innerHTML = "";
                         });
                     }
@@ -628,7 +711,7 @@ function showError(errorMessage, errorEvent) {
                         if (showInspector) {
                             if (scene.then) {
                                 // Handle if scene is a promise
-                                scene.then(function(s) {
+                                scene.then(function (s) {
                                     if (!s.debugLayer.isVisible()) {
                                         s.debugLayer.show({ embedMode: true });
                                     }
@@ -649,7 +732,7 @@ function showError(errorMessage, errorEvent) {
             }
         };
         window.addEventListener("resize",
-            function() {
+            function () {
                 if (engine) {
                     engine.resize();
                 }
@@ -659,7 +742,7 @@ function showError(errorMessage, errorEvent) {
         loadScriptsList();
 
         // Zip
-        var addContentToZip = function(zip, name, url, replace, buffer, then) {
+        var addContentToZip = function (zip, name, url, replace, buffer, then) {
             if (url.substring(0, 5) == "data:" || url.substring(0, 5) == "http:" || url.substring(0, 5) == "blob:" || url.substring(0, 6) == "https:") {
                 then();
                 return;
@@ -673,7 +756,7 @@ function showError(errorMessage, errorEvent) {
                 xhr.responseType = "arraybuffer";
             }
 
-            xhr.onreadystatechange = function() {
+            xhr.onreadystatechange = function () {
                 if (xhr.readyState === 4) {
                     if (xhr.status === 200) {
                         var text;
@@ -701,7 +784,7 @@ function showError(errorMessage, errorEvent) {
             xhr.send(null);
         }
 
-        var addTexturesToZip = function(zip, index, textures, folder, then) {
+        var addTexturesToZip = function (zip, index, textures, folder, then) {
 
             if (index === textures.length || !textures[index].name) {
                 then();
@@ -754,7 +837,7 @@ function showError(errorMessage, errorEvent) {
                     url,
                     null,
                     true,
-                    function() {
+                    function () {
                         addTexturesToZip(zip, index + 1, textures, folder, then);
                     });
             }
@@ -763,7 +846,7 @@ function showError(errorMessage, errorEvent) {
             }
         }
 
-        var addImportedFilesToZip = function(zip, index, importedFiles, folder, then) {
+        var addImportedFilesToZip = function (zip, index, importedFiles, folder, then) {
             if (index === importedFiles.length) {
                 then();
                 return;
@@ -781,12 +864,12 @@ function showError(errorMessage, errorEvent) {
                 url,
                 null,
                 true,
-                function() {
+                function () {
                     addImportedFilesToZip(zip, index + 1, importedFiles, folder, then);
                 });
         }
 
-        var getZip = function() {
+        var getZip = function () {
             if (engine.scenes.length === 0) {
                 return;
             }
@@ -810,17 +893,17 @@ function showError(errorMessage, errorEvent) {
                 "zipContent/index.html",
                 zipCode,
                 false,
-                function() {
+                function () {
                     addTexturesToZip(zip,
                         0,
                         textures,
                         null,
-                        function() {
+                        function () {
                             addImportedFilesToZip(zip,
                                 0,
                                 importedFiles,
                                 null,
-                                function() {
+                                function () {
                                     var blob = zip.generate({ type: "blob" });
                                     saveAs(blob, "sample.zip");
                                     document.getElementById("statusBar").innerHTML = "";
@@ -830,7 +913,7 @@ function showError(errorMessage, errorEvent) {
         }
 
         // Versions
-        setVersion = function(version) {
+        setVersion = function (version) {
             switch (version) {
                 case "stable":
                     location.href = "indexStable.html" + location.hash;
@@ -842,42 +925,50 @@ function showError(errorMessage, errorEvent) {
         }
 
         // Fonts
-        setFontSize = function(size) {
+        setFontSize = function (size) {
             fontSize = size;
             jsEditor.updateOptions({ fontSize: size });
-            setToMultipleID("currentFontSize", "innerHTML", "Font: " + size);
+
+            var array = document.getElementsByClassName("displayFontSize");
+            for (var i = 0; i < array.length; i++) {
+                var subArray = array[i].children;
+                for (var j = 0; j < subArray.length; j++) {
+                    subArray[j].classList.remove("selected");
+                    if (subArray[j].innerText == size) subArray[j].classList.add("selected");
+                }
+            }
         };
 
-        showQRCode = function() {
+        showQRCode = function () {
             $("#qrCodeImage").empty();
             var playgroundCode = window.location.href.split("#");
             playgroundCode.shift();
-            $("#qrCodeImage").qrcode({text: "https://playground.babylonjs.com/frame.html#"+(playgroundCode.join("#"))});
+            $("#qrCodeImage").qrcode({ text: "https://playground.babylonjs.com/frame.html#" + (playgroundCode.join("#")) });
         };
 
         // Fullscreen
-        document.getElementById("renderCanvas").addEventListener("webkitfullscreenchange", function() {
+        document.getElementById("renderCanvas").addEventListener("webkitfullscreenchange", function () {
             if (document.webkitIsFullScreen) goFullPage();
             else exitFullPage();
         }, false);
 
-        var goFullPage = function() {
+        var goFullPage = function () {
             var canvasElement = document.getElementById("renderCanvas");
             canvasElement.style.position = "absolute";
             canvasElement.style.top = 0;
             canvasElement.style.left = 0;
             canvasElement.style.zIndex = 100;
         }
-        var exitFullPage = function() {
+        var exitFullPage = function () {
             document.getElementById("renderCanvas").style.position = "relative";
             document.getElementById("renderCanvas").style.zIndex = 0;
         }
-        var goFullscreen = function() {
+        var goFullscreen = function () {
             if (engine) {
                 engine.switchFullscreen(true);
             }
         }
-        var editorGoFullscreen = function() {
+        var editorGoFullscreen = function () {
             var editorDiv = document.getElementById("jsEditor");
             if (editorDiv.requestFullscreen) {
                 editorDiv.requestFullscreen();
@@ -889,15 +980,15 @@ function showError(errorMessage, errorEvent) {
 
         }
 
-        var toggleEditor = function() {
-            var editorButton = document.getElementById("editorButton1600");
+        var toggleEditor = function () {
+            var editorButton = document.getElementById("editorButton1280");
             var scene = engine.scenes[0];
 
             // If the editor is present
             if (editorButton.classList.contains('checked')) {
                 setToMultipleID("editorButton", "removeClass", 'checked');
                 splitInstance.collapse(0);
-                setToMultipleID("editorButton", "innerHTML", 'Editor <i class="far fa-square" aria-hidden="true"></i>');
+                setToMultipleID("editorButton", "innerHTML", 'Editor <i class="fa fa-square" aria-hidden="true"></i>');
             } else {
                 setToMultipleID("editorButton", "addClass", 'checked');
                 splitInstance.setSizes([50, 50]);  // Reset
@@ -911,15 +1002,20 @@ function showError(errorMessage, errorEvent) {
         }
 
         /**
-         * Toggle the dark theme
+         * Set the theme (dark / light)
          */
-        var toggleTheme = function(theme) {
+        var toggleTheme = function (theme) {
+            setToMultipleID("darkTheme", "removeClass", "selected");
+            setToMultipleID("lightTheme", "removeClass", "selected");
+
             // Monaco
             var vsTheme;
             if (theme == 'dark') {
                 vsTheme = 'vs-dark'
+                setToMultipleID("darkTheme", "addClass", "selected");
             } else {
                 vsTheme = 'vs'
+                setToMultipleID("lightTheme", "addClass", "selected");
             }
 
             var oldCode = jsEditor.getValue();
@@ -943,12 +1039,12 @@ function showError(errorMessage, errorEvent) {
                     enabled: true
                 }
             };
-            editorOptions.minimap.enabled = document.getElementById("minimapToggle1600").classList.contains('checked');
+            editorOptions.minimap.enabled = document.getElementById("minimapToggle1280").classList.contains('checked');
             jsEditor = monaco.editor.create(document.getElementById('jsEditor'), editorOptions);
             jsEditor.setValue(oldCode);
             setFontSize(fontSize);
 
-            jsEditor.onKeyUp(function(evt) {
+            jsEditor.onKeyUp(function (evt) {
                 markDirty();
             });
 
@@ -965,8 +1061,32 @@ function showError(errorMessage, errorEvent) {
 
             localStorage.setItem("bjs-playground-theme", theme);
         }
+        /**
+         * Toggle Typescript / Javascript language
+         */
+        var togglescriptLanguage = function (scriptLanguage) {
+            for (var index = 0; index < elementForscriptLanguage.length; index++) {
+                var obj = elementForscriptLanguage[index];
+                var domObjArr = document.querySelectorAll(obj);
+                for (var domObjIndex = 0; domObjIndex < domObjArr.length; domObjIndex++) {
+                    var domObj = domObjArr[domObjIndex];
+                    domObj.classList.remove('languageJS');
+                    domObj.classList.remove('languageTS');
+                    domObj.classList.add("language" + scriptLanguage);
+                }
+            }
+
+            if (scriptLanguage == "JS") {
+                setToMultipleID("toJSbutton", "removeClass", "floatLeft");
+            }
+            else if (scriptLanguage == "TS") {
+                setToMultipleID("toJSbutton", "addClass", "floatLeft");
+            }
+
+            localStorage.setItem("bjs-playground-scriptLanguage", scriptLanguage);
+        }
 
-        var toggleDebug = function() {
+        var toggleDebug = function () {
             // Always showing the debug layer, because you can close it by itself
             var scene = engine.scenes[0];
             if (scene.debugLayer.isVisible()) {
@@ -977,20 +1097,20 @@ function showError(errorMessage, errorEvent) {
             }
         }
 
-        var toggleMetadata = function() {
+        var toggleMetadata = function () {
             var scene = engine.scenes[0];
             document.getElementById("saveLayer").style.display = "block";
         }
 
-        var formatCode = function() {
+        var formatCode = function () {
             jsEditor.getAction('editor.action.formatDocument').run();
         }
 
-        var toggleMinimap = function() {
-            var minimapToggle = document.getElementById("minimapToggle1600");
+        var toggleMinimap = function () {
+            var minimapToggle = document.getElementById("minimapToggle1280");
             if (minimapToggle.classList.contains('checked')) {
                 jsEditor.updateOptions({ minimap: { enabled: false } });
-                setToMultipleID("minimapToggle", "innerHTML", 'Minimap <i class="far fa-square" aria-hidden="true"></i>');
+                setToMultipleID("minimapToggle", "innerHTML", 'Minimap <i class="fa fa-square" aria-hidden="true"></i>');
             } else {
                 jsEditor.updateOptions({ minimap: { enabled: true } });
                 setToMultipleID("minimapToggle", "innerHTML", 'Minimap <i class="fa fa-check-square" aria-hidden="true"></i>');
@@ -1000,8 +1120,8 @@ function showError(errorMessage, errorEvent) {
 
 
         //Navigation Overwrites
-        var exitPrompt = function(e) {
-            var safeToggle = document.getElementById("safemodeToggle1600");
+        var exitPrompt = function (e) {
+            var safeToggle = document.getElementById("safemodeToggle1280");
             if (safeToggle.classList.contains('checked')) {
                 e = e || window.event;
                 var message =
@@ -1016,7 +1136,7 @@ function showError(errorMessage, errorEvent) {
         window.onbeforeunload = exitPrompt;
 
         // Snippet
-        var save = function() {
+        var save = function () {
 
             // Retrieve title if necessary
             if (document.getElementById("saveLayer")) {
@@ -1026,7 +1146,7 @@ function showError(errorMessage, errorEvent) {
             }
 
             var xmlHttp = new XMLHttpRequest();
-            xmlHttp.onreadystatechange = function() {
+            xmlHttp.onreadystatechange = function () {
                 if (xmlHttp.readyState === 4) {
                     if (xmlHttp.status === 200) {
                         var baseUrl = location.href.replace(location.hash, "").replace(location.search, "");
@@ -1061,7 +1181,7 @@ function showError(errorMessage, errorEvent) {
             xmlHttp.send(JSON.stringify(dataToSend));
         }
 
-        var askForSave = function() {
+        var askForSave = function () {
             if (currentSnippetTitle == null
                 || currentSnippetDescription == null
                 || currentSnippetTags == null) {
@@ -1072,18 +1192,18 @@ function showError(errorMessage, errorEvent) {
                 save();
             }
         };
-        document.getElementById("saveFormButtonOk").addEventListener("click", function() {
+        document.getElementById("saveFormButtonOk").addEventListener("click", function () {
             document.getElementById("saveLayer").style.display = "none";
             save();
         });
-        document.getElementById("saveFormButtonCancel").addEventListener("click", function() {
+        document.getElementById("saveFormButtonCancel").addEventListener("click", function () {
             document.getElementById("saveLayer").style.display = "none";
         });
-        document.getElementById("mainTitle").innerHTML = "v" + BABYLON.Engine.Version;
+        setToMultipleID("mainTitle", "innerHTML", "v" + BABYLON.Engine.Version);
 
         var previousHash = "";
 
-        var cleanHash = function() {
+        var cleanHash = function () {
             var splits = decodeURIComponent(location.hash.substr(1)).split("#");
 
             if (splits.length > 2) {
@@ -1093,7 +1213,7 @@ function showError(errorMessage, errorEvent) {
             location.hash = splits.join("#");
         }
 
-        var checkHash = function(firstTime) {
+        var checkHash = function (firstTime) {
             if (location.hash) {
                 if (previousHash !== location.hash) {
                     cleanHash();
@@ -1102,7 +1222,7 @@ function showError(errorMessage, errorEvent) {
 
                     try {
                         var xmlHttp = new XMLHttpRequest();
-                        xmlHttp.onreadystatechange = function() {
+                        xmlHttp.onreadystatechange = function () {
                             if (xmlHttp.readyState === 4) {
                                 if (xmlHttp.status === 200) {
 
@@ -1184,16 +1304,43 @@ function showError(errorMessage, errorEvent) {
         setToMultipleID("saveButton", "click", askForSave);
         // Zip
         setToMultipleID("zipButton", "click", getZip);
-        // Themes
-        setToMultipleID("darkTheme", "click", toggleTheme.bind(this, 'dark'));
-        setToMultipleID("lightTheme", "click", toggleTheme.bind(this, 'light'));
+        // // Themes
+        setToMultipleID("darkTheme", "click", [toggleTheme.bind(this, 'dark'), clickOptionSub]);
+        setToMultipleID("lightTheme", "click", [toggleTheme.bind(this, 'light'), clickOptionSub]);
+        // Size
+        var displayFontSize = document.getElementsByClassName('displayFontSize');
+        for (var i = 0; i < displayFontSize.length; i++) {
+            var options = displayFontSize[i].querySelectorAll('.option');
+            for (var j = 0; j < options.length; j++) {
+                options[j].addEventListener('click', clickOptionSub);
+            }
+        }
+        // Footer links
+        var displayFontSize = document.getElementsByClassName('displayFooterLinks');
+        for (var i = 0; i < displayFontSize.length; i++) {
+            var options = displayFontSize[i].querySelectorAll('.option');
+            for (var j = 0; j < options.length; j++) {
+                options[j].addEventListener('click', clickOptionSub);
+            }
+        }
+        // Language (JS / TS)
+        setToMultipleID("toTSbutton", "click", function () {
+            localStorage.setItem("bjs-playground-scriptLanguage", "TS");
+            if (confirm("You need to reload the page to switch to Typescript. Do you want to reload now ?"))
+                location.reload();
+        });
+        setToMultipleID("toJSbutton", "click", function () {
+            localStorage.setItem("bjs-playground-scriptLanguage", "JS");
+            if (confirm("You need to reload the page to switch to Javascript. Do you want to reload now ?"))
+                location.reload();
+        });
         // Safe mode
-        setToMultipleID("safemodeToggle", 'click', function() {
-            document.getElementById("safemodeToggle1600").classList.toggle('checked');
-            if (document.getElementById("safemodeToggle1600").classList.contains('checked')) {
+        setToMultipleID("safemodeToggle", 'click', function () {
+            document.getElementById("safemodeToggle1280").classList.toggle('checked');
+            if (document.getElementById("safemodeToggle1280").classList.contains('checked')) {
                 setToMultipleID("safemodeToggle", "innerHTML", 'Safe mode <i class="fa fa-check-square" aria-hidden="true"></i>');
             } else {
-                setToMultipleID("safemodeToggle", "innerHTML", 'Safe mode <i class="far fa-square" aria-hidden="true"></i>');
+                setToMultipleID("safemodeToggle", "innerHTML", 'Safe mode <i class="fa fa-square" aria-hidden="true"></i>');
             }
         });
         // Editor
@@ -1216,6 +1363,9 @@ function showError(errorMessage, errorEvent) {
         var theme = localStorage.getItem("bjs-playground-theme") || 'light';
         toggleTheme(theme);
         toggleMinimap();
+        // Restore language
+        scriptLanguage = localStorage.getItem("bjs-playground-scriptLanguage") || 'JS';
+        togglescriptLanguage(scriptLanguage);
     }
 
     // Monaco
@@ -1224,11 +1374,11 @@ function showError(errorMessage, errorEvent) {
 
     xhr.open('GET', "babylon.d.txt", true);
 
-    xhr.onreadystatechange = function() {
+    xhr.onreadystatechange = function () {
         if (xhr.readyState === 4) {
             if (xhr.status === 200) {
                 require.config({ paths: { 'vs': 'node_modules/monaco-editor/min/vs' } });
-                require(['vs/editor/editor.main'], function() {
+                require(['vs/editor/editor.main'], function () {
                     if (monacoMode === "javascript") {
                         monaco.languages.typescript.javascriptDefaults.addExtraLib(xhr.responseText, 'babylon.d.ts');
                     } else {

Playground/js/ts.js

@@ -1,60 +1,56 @@
 
-var compilerTriggerTimeoutID;
-function triggerCompile(d, func) {
-    if (compilerTriggerTimeoutID !== null) {
-        window.clearTimeout(compilerTriggerTimeoutID);
-    }
-    compilerTriggerTimeoutID = window.setTimeout(function () {
-        try {
+// var compilerTriggerTimeoutID;
+// function triggerCompile(d, func) {
+//     if (compilerTriggerTimeoutID !== null) {
+//         window.clearTimeout(compilerTriggerTimeoutID);
+//     }
+//     compilerTriggerTimeoutID = window.setTimeout(function () {
+//         try {
              
-            var output = transpileModule(d, {
-                module: ts.ModuleKind.AMD,
-                target: ts.ScriptTarget.ES5,
-                noLib: true,
-                noResolve: true,
-                suppressOutputPathCheck: true
-            });
-            if (typeof output === "string") {
-                func(output);
-            }
-        }
-        catch (e) {
-            showError(e.message, e);
-        }
-    }, 100);
-}
-function transpileModule(input, options) {
-    var inputFileName = options.jsx ? "module.tsx" : "module.ts";
-    var sourceFile = ts.createSourceFile(inputFileName, input, options.target || ts.ScriptTarget.ES5);
-    // Output
-    var outputText;
-    var program = ts.createProgram([inputFileName], options, {
-        getSourceFile: function (fileName) { return fileName.indexOf("module") === 0 ? sourceFile : undefined; },
-        writeFile: function (_name, text) { outputText = text; },
-        getDefaultLibFileName: function () { return "lib.d.ts"; },
-        useCaseSensitiveFileNames: function () { return false; },
-        getCanonicalFileName: function (fileName) { return fileName; },
-        getCurrentDirectory: function () { return ""; },
-        getNewLine: function () { return "\r\n"; },
-        fileExists: function (fileName) { return fileName === inputFileName; },
-        readFile: function () { return ""; },
-        directoryExists: function () { return true; },
-        getDirectories: function () { return []; }
-    });
-    // Emit
-    program.emit();
-    if (outputText === undefined) {
-        throw new Error("Output generation failed");
-    }
-    return outputText;
-}
-
-function getRunCode(jsEditor, callBack) {
-    triggerCompile(jsEditor.getValue(), function(result) {
-        callBack(result + "var createScene = function() { return Playground.CreateScene(engine, engine.getRenderingCanvas()); }")
-    });
-}
-
-var defaultScene = "scripts/basic scene.txt";
-var monacoMode = "typescript";
+//             var output = transpileModule(d, {
+//                 module: ts.ModuleKind.AMD,
+//                 target: ts.ScriptTarget.ES5,
+//                 noLib: true,
+//                 noResolve: true,
+//                 suppressOutputPathCheck: true
+//             });
+//             if (typeof output === "string") {
+//                 func(output);
+//             }
+//         }
+//         catch (e) {
+//             showError(e.message, e);
+//         }
+//     }, 100);
+// }
+// function transpileModule(input, options) {
+//     var inputFileName = options.jsx ? "module.tsx" : "module.ts";
+//     var sourceFile = ts.createSourceFile(inputFileName, input, options.target || ts.ScriptTarget.ES5);
+//     // Output
+//     var outputText;
+//     var program = ts.createProgram([inputFileName], options, {
+//         getSourceFile: function (fileName) { return fileName.indexOf("module") === 0 ? sourceFile : undefined; },
+//         writeFile: function (_name, text) { outputText = text; },
+//         getDefaultLibFileName: function () { return "lib.d.ts"; },
+//         useCaseSensitiveFileNames: function () { return false; },
+//         getCanonicalFileName: function (fileName) { return fileName; },
+//         getCurrentDirectory: function () { return ""; },
+//         getNewLine: function () { return "\r\n"; },
+//         fileExists: function (fileName) { return fileName === inputFileName; },
+//         readFile: function () { return ""; },
+//         directoryExists: function () { return true; },
+//         getDirectories: function () { return []; }
+//     });
+//     // Emit
+//     program.emit();
+//     if (outputText === undefined) {
+//         throw new Error("Output generation failed");
+//     }
+//     return outputText;
+// }
 
+// function getRunCode(jsEditor, callBack) {
+//     triggerCompile(jsEditor.getValue(), function(result) {
+//         callBack(result + "var createScene = function() { return Playground.CreateScene(engine, engine.getRenderingCanvas()); }")
+//     });
+// }

Playground/package.json

@@ -1,6 +1,6 @@
 {
   "name": "babylonjsplayground",
-  "version": "3.0.0",
+  "version": "4.0.0",
   "description": "Babylon.js is a 3D engine based on webgl and javascript",
   "main": "",
   "repository": {

Playground/test.html

@@ -1,3 +1,5 @@
+<!-- TO DO : What is this ? -->
+
 <div class="navbar-inner" id="topbar">
     <a class="brand largeOnly" href="#" id="mainTitle">Babylon.js Playground</a>
     <div class="btn-group">

Playground/ts.html

@@ -464,7 +464,7 @@
         </span>
         <div id="logo-part">
             <img src="v4.svg" id="waitLogo" />
-            <img src="spinner.svg" id="waitSpinner" />
+            <img src="css/img/spinner.svg" id="waitSpinner" />
         </div>
     </div>