Playground v4.3 : Splitting is finally ok. Version selector remaining. Some bug fixs.

Playground/css/index.css

@@ -136,6 +136,7 @@ body {
 }      
 
 #exampleList {
+    z-index: 10;
     display: none;
     position: absolute;
     top: 55px;
@@ -164,6 +165,7 @@ body {
     line-height: 36px;
 }
 #exampleList #exampleBanner h1 img {
+    display: none;
     float: right;
     width: 36px;
     margin-right: 10px;
@@ -278,7 +280,7 @@ body {
     right: 0;
     width: 60px;
     padding: 2px 8px 5px 0px;
-    z-index:10;
+    z-index: 4;
     background-color: #3f3461;
     color:white;
     font-size: 18px;
@@ -427,18 +429,31 @@ body {
     text-transform: uppercase;
     background-color: #201936;
 }
+.navbar .select .toDisplay .option {
+    font-size: 20px;
+    height: 35px;
+    line-height: 35px;
+    padding: 1px 5px 1px 15px;
+    text-align: left;
+}
 .navbar .select .toDisplay.languageJS {
     background-color: #3f3461;
 }
 .navbar .select .toDisplay.languageJS .option {
     background-color: #9379e6;
 }
+.navbar .select .toDisplay.languageJS .option:hover {
+    background-color: #bfabff;
+}
 .navbar .select .toDisplay.languageTS {
     background-color: #bb464b;
 }
 .navbar .select .toDisplay.languageTS .option {
     background-color: #e0684b;
 }
+.navbar .select .toDisplay.languageTS .option:hover {
+    background-color: #ff7656;
+}
 .navbar .select .toDisplay.currentVersionDisplay {
     width: auto;
 }
@@ -477,22 +492,6 @@ body {
     background-color: #ff7656;
 }
 
-.navbar .select .toDisplay .option {
-    font-size: 20px;
-    height: 35px;
-    line-height: 35px;
-    padding: 1px 5px 1px 15px;
-    text-align: left;
-}
-
-.navbar .select .toDisplay .option.light {
-    background-color: white;
-    color: #E0684B;
-}
-.navbar .select .toDisplay .option.light:hover {
-    cursor: pointer;
-    background-color: #d9d9d9;
-}
 
 .navbar .select .toDisplayBig.dark {
     background-color: #333;    

Playground/css/index_mobile.css

@@ -9,6 +9,9 @@
         top: 40px;
         bottom: 0;
     }
+    #exampleList #exampleBanner h1 img {
+        display: block;
+    }
     .navbarBottom {
         display: none;
     }
@@ -37,6 +40,7 @@
         right: 0;
         width: 40px;
         height: 40px;
+        cursor: pointer;
     }
     #switchWrapper img {
         width: 40px;
@@ -48,12 +52,13 @@
     #JStoTSbar .buttonJStoTS {
         border-top-left-radius: 12px;
     }
-
+    
     .navbar, .navbar .category, #JStoTSbar {
         height: 40px;
         line-height: 40px;
         padding: 0;
         width: 100%;
+        background-color: #201936;
     }
     .navbar .category.right {
         display: none;
@@ -83,9 +88,16 @@
     .navbar.languageJS .select {
         background-color: #3f3461;
     }
+    .navbarlanguageJS .select:active {
+        background-color: #3f3461;
+
+    }
     .navbar.languageTS .select {
         background-color: #bb464b;
     }
+    .navbar.languageTS .select:active {
+        background-color: #bb464b;
+    }
     .navbar .select, .navbar .select img {
         width: 40px;
         height: 40px;
@@ -93,9 +105,21 @@
     .navbar .select img {
         filter: invert(98%) sepia(0%) saturate(7500%) hue-rotate(207deg) brightness(104%) contrast(104%);
     }
+    .navbar .select img:active {
+        filter: invert(98%) sepia(0%) saturate(7500%) hue-rotate(207deg) brightness(104%) contrast(104%);
+    }
+    .navbar .select img:focus {
+        filter: invert(98%) sepia(0%) saturate(7500%) hue-rotate(207deg) brightness(104%) contrast(104%);
+    }
     .navbar .select img:hover {
         filter: invert(98%) sepia(0%) saturate(7500%) hue-rotate(207deg) brightness(104%) contrast(104%);
     }
+    .navbar .select:active img {
+        filter: invert(98%) sepia(0%) saturate(7500%) hue-rotate(207deg) brightness(104%) contrast(104%);
+    }
+    .navbar .select:focus img {
+        filter: invert(98%) sepia(0%) saturate(7500%) hue-rotate(207deg) brightness(104%) contrast(104%);
+    }
     .navbar .select:hover img {
         filter: invert(98%) sepia(0%) saturate(7500%) hue-rotate(207deg) brightness(104%) contrast(104%);
     }
@@ -117,12 +141,24 @@
     .navbar .select .toDisplay.languageJS .option:active {
         background-color: #9379e6;
     }
+    .navbar .select .toDisplay.languageJS .option:hover {
+        background-color: #9379e6;
+    }
     .navbar .select .toDisplay.languageTS .option {
         background-color: #bb464b;
     }
     .navbar .select .toDisplay.languageTS .option:active {
         background-color: #e0684b;
     }
+    .navbar .select .toDisplay.languageTS .option:hover {
+        background-color: #e0684b;
+    }
+    .navbar .select .toDisplay #toTSbuttonMobile {
+        padding-left : 12px;
+    }
+    .navbar .select .toDisplay #toJSbuttonMobile {
+        padding-left : 12px;
+    }
     .navbar .select .toDisplay .option {
         padding: 1px;
         font-size: 15px;
@@ -165,9 +201,11 @@
         background-color: #e0684b;
     }
     .navbar .select .subSelect .toDisplaySub.languageJS .option {
+        background-color: #9379e6;
         color: white;
     }
     .navbar .select .subSelect .toDisplaySub.languageTS .option {
+        background-color: #e0684b;
         color: white;
     }
 

Playground/debug.html

@@ -2,8 +2,7 @@
 <html>
 
 <!--
-    The purpose of the Debug.html file is to debug : ???
-    // TO DO - Complete that
+    The purpose of the Debug.html file is to debug a new Playground feature.
     // TO DO - Fix the console error : "Manifest: Line: 1, column 1, Unexpected token"
  -->
 
@@ -154,10 +153,10 @@
                     <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
+                    <div class="option subSelect" id="qrCodeHover1280">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 class="option" id="qrCodeImage" class="qrCodeImage">QR Code Image</div>
                         </div>
                     </div>
                     <div class="option uncheck noSubSelect" id="debugButton1280">Inspector
@@ -228,10 +227,10 @@
                     <div class="option noSubSelect" id="minimapToggle1024">Minimap
                         <i class="fa fa-square" aria-hidden="true"></i>
                     </div>
-                    <div class="option subSelect" id="qrCodeHover" onmouseover="showQRCode();">QR Code Link <i
+                    <div class="option subSelect" id="qrCodeHover1024">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 class="option" id="qrCodeImage" class="qrCodeImage">QR Code Image</div>
                         </div>
                     </div>
                     <div class="option uncheck noSubSelect" id="debugButton1024">Inspector
@@ -259,8 +258,8 @@
         <div class="category languageJS" id="JStoTSbar">
             <div class="button select"><img src="css/img/hamburgerButton.svg">
                 <div class="toDisplay">
-                    <div class="option noSubSelect languageTS" id="toTSbuttonMobile"><img src="css/img/logoTS.svg">TypeScript</div>
-                    <div class="option noSubSelect languageJS" id="toJSbuttonMobile"><img src="css/img/logoJS.svg">JavaScript</div>
+                    <div class="option noSubSelect languageTS" id="toTSbuttonMobile">TypeScript</div>
+                    <div class="option noSubSelect languageJS" id="toJSbuttonMobile">JavaScript</div>
                     <div class="option noSubSelect run" id="runButtonMobile"><img src="css/img/playButton.svg">Run</div>
                     <div class="option noSubSelect" id="saveButtonMobile"><img src="css/img/saveButton.svg">Save</div>
                     <div class="option noSubSelect" id="zipButtonMobile"><img src="css/img/downloadButton.svg">Download
@@ -300,7 +299,7 @@
                     <div style="display: none;" class="option nosubselect" id="minimapToggleMobile">Minimap
                         <i class="fa fa-square" aria-hidden="true"></i>
                     </div>
-                    <div class="option subSelect" id="qrCodeHover" onmouseover="showQRCode();"><img src="css/img/optionsButton.svg">QR Code Link
+                    <div class="option subSelect" id="qrCodeHover"><img src="css/img/optionsButton.svg">QR Code Link
                         <div class="toDisplaySub">
                             <div class="option" id="qrCodeImage">QR Code Image</div>
                         </div>
@@ -436,9 +435,10 @@
     <script src="js/pbt.js"></script>
     <script src="js/libs/typescript.js"></script>
     <script src="js/examples.js"></script>
+    <script src="js/main.js"></script>
+    <script src="js/menuPG.js"></script>
     <script src="js/monacoCreator.js"></script>
     <script src="js/settingsPG.js"></script>
-    <script src="js/menuPG.js"></script>
     <script src="js/utils.js"></script>
     <script src="js/zipTool.js"></script>
     <script src="js/index.js"></script>

Playground/index-local.html

@@ -193,8 +193,8 @@
         <div class="category languageJS" id="JStoTSbar">
             <div class="button select"><img src="css/img/hamburgerButton.svg">
                 <div class="toDisplay">
-                    <div class="option noSubSelect languageTS" id="toTSbuttonMobile"><img src="css/img/logoTS.svg">TypeScript</div>
-                    <div class="option noSubSelect languageJS" id="toJSbuttonMobile"><img src="css/img/logoJS.svg">JavaScript</div>
+                    <div class="option noSubSelect languageTS" id="toTSbuttonMobile">TypeScript</div>
+                    <div class="option noSubSelect languageJS" id="toJSbuttonMobile">JavaScript</div>
                     <div class="option noSubSelect run" id="runButtonMobile"><img src="css/img/playButton.svg">Run</div>
                     <div class="option noSubSelect" id="saveButtonMobile"><img src="css/img/saveButton.svg">Save</div>
                     <div class="option noSubSelect" id="zipButtonMobile"><img src="css/img/downloadButton.svg">Download
@@ -377,9 +377,10 @@
     <script src="js/pbt.js"></script>
     <script src="js/libs/typescript.js"></script>
     <script src="js/examples.js"></script>
+    <script src="js/main.js"></script>
+    <script src="js/menuPG.js"></script>
     <script src="js/monacoCreator.js"></script>
     <script src="js/settingsPG.js"></script>
-    <script src="js/menuPG.js"></script>
     <script src="js/utils.js"></script>
     <script src="js/zipTool.js"></script>
     <script src="js/index.js"></script>

Playground/index.html

@@ -69,7 +69,7 @@
             <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="button select" id="menuButton1280"><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">
@@ -79,12 +79,12 @@
                     </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="settingsPG.setFontSize(12);">12</div>
-                            <div class="option selected" onclick="settingsPG.setFontSize(14);">14</div>
-                            <div class="option" onclick="settingsPG.setFontSize(16);">16</div>
-                            <div class="option" onclick="settingsPG.setFontSize(18);">18</div>
-                            <div class="option" onclick="settingsPG.setFontSize(20);">20</div>
-                            <div class="option" onclick="settingsPG.setFontSize(22);">22</div>
+                            <div class="option">12</div>
+                            <div class="option selected">14</div>
+                            <div class="option">16</div>
+                            <div class="option">18</div>
+                            <div class="option">20</div>
+                            <div class="option">22</div>
                         </div>
                     </div>
                     <div class="option noSubSelect" id="safemodeToggle1280">Safe mode
@@ -99,15 +99,13 @@
                     <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
+                    <div class="option subSelect" id="qrCodeHover1280">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 class="option" id="qrCodeImage1280">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 uncheck noSubSelect" id="debugButton1280">Inspector</div>
                     <div class="option nosubselect" id="metadataButton1280">Metadata</div>
                 </div>
             </div>
@@ -117,8 +115,7 @@
             <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 class="option">4.0</div>
                 </div>
             </div>
             <div class="button select"><img class="examplesButton" src="css/img/examplesButton.svg"></div>
@@ -142,7 +139,7 @@
             <div class="button" id="newButton1024"><img src="css/img/newButton.svg"></div>
             <div class="button removeOnPhone" id="clearButton1024"><img src="css/img/clearButton.svg"></div>
 
-            <div class="button select"><img src="css/img/optionsButton.svg">
+            <div class="button select" id="menuButton1024"><img src="css/img/optionsButton.svg">
                 <div class="toDisplay">
                     <div class="option subSelect">Theme <i class="fa fa-chevron-right" aria-hidden="true"></i>
 
@@ -153,12 +150,12 @@
                     </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="settingsPG.setFontSize(12);">12</div>
-                            <div class="option selected" onclick="settingsPG.setFontSize(14);">14</div>
-                            <div class="option" onclick="settingsPG.setFontSize(16);">16</div>
-                            <div class="option" onclick="settingsPG.setFontSize(18);">18</div>
-                            <div class="option" onclick="settingsPG.setFontSize(20);">20</div>
-                            <div class="option" onclick="settingsPG.setFontSize(22);">22</div>
+                            <div class="option">12</div>
+                            <div class="option selected">14</div>
+                            <div class="option">16</div>
+                            <div class="option">18</div>
+                            <div class="option">20</div>
+                            <div class="option">22</div>
                         </div>
                     </div>
                     <div class="option noSubSelect" id="safemodeToggle1024">Safe mode
@@ -173,15 +170,13 @@
                     <div class="option noSubSelect" id="minimapToggle1024">Minimap
                         <i class="fa fa-square" aria-hidden="true"></i>
                     </div>
-                    <div class="option subSelect" id="qrCodeHover" onmouseover="showQRCode();">QR Code Link <i
+                    <div class="option subSelect" id="qrCodeHover1024">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 class="option" id="qrCodeImage1024">QR Code Image</div>
                         </div>
                     </div>
-                    <div class="option uncheck noSubSelect" id="debugButton1024">Inspector
-                        <i class="fa fa-square" aria-hidden="true"></i>
-                    </div>
+                    <div class="option uncheck noSubSelect" id="debugButton1024">Inspector</div>
                     <div class="option noSubSelect" id="metadataButton1024">Metadata</div>
                 </div>
             </div>
@@ -191,8 +186,7 @@
             <div class="button select" style="display: none;">
                 <span id="currentVersion1024">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 class="option">4.0</div>
                 </div>
             </div>
             <div class="button select"><img class="examplesButton" src="css/img/examplesButton.svg"></div>
@@ -202,18 +196,17 @@
     <!-- Mobile -->
     <div class="navbar navBarMobile languageJS">
         <div class="category languageJS" id="JStoTSbar">
-            <div class="button select"><img src="css/img/hamburgerButton.svg">
+            <div class="button select" id="menuButtonMobile"><img src="css/img/hamburgerButton.svg">
                 <div class="toDisplay">
-                    <div class="option noSubSelect languageTS" id="toTSbuttonMobile"><img src="css/img/logoTS.svg">TypeScript</div>
-                    <div class="option noSubSelect languageJS" id="toJSbuttonMobile"><img src="css/img/logoJS.svg">JavaScript</div>
+                    <div class="option noSubSelect languageTS" id="toTSbuttonMobile">TypeScript</div>
+                    <div class="option noSubSelect languageJS" id="toJSbuttonMobile">JavaScript</div>
                     <div class="option noSubSelect run" id="runButtonMobile"><img src="css/img/playButton.svg">Run</div>
                     <div class="option noSubSelect" id="saveButtonMobile"><img src="css/img/saveButton.svg">Save</div>
                     <div class="option noSubSelect" id="zipButtonMobile"><img src="css/img/downloadButton.svg">Download
                     </div>
                     <div class="option noSubSelect" id="newButtonMobile"><img src="css/img/newButton.svg">New</div>
                     <div class="option noSubSelect" id="clearButtonMobile"><img src="css/img/clearButton.svg">Clear</div>
-                    <div class="option noSubSelect" id="debugButtonMobile"><img src="css/img/inspectorButton.svg">Inspector
-                    </div>
+                    <div class="option noSubSelect" id="debugButtonMobile"><img src="css/img/inspectorButton.svg">Inspector</div>
                     <div class="option subSelect"><img src="css/img/optionsButton.svg">Theme
                         <div class="toDisplaySub">
                             <div class="option selected" id="darkThemeMobile">Dark</div>
@@ -222,14 +215,14 @@
                     </div>
                     <div class="option subSelect"><img src="css/img/optionsButton.svg">Font size
                         <div class="toDisplaySub displayFontSize">
-                            <div class="option" onclick="settingsPG.setFontSize(8);">8</div>
-                            <div class="option" onclick="settingsPG.setFontSize(10);">10</div>
-                            <div class="option selected" onclick="settingsPG.setFontSize(12);">12</div>
-                            <div class="option" onclick="settingsPG.setFontSize(14);">14</div>
-                            <div class="option" onclick="settingsPG.setFontSize(16);">16</div>
-                            <div class="option" onclick="settingsPG.setFontSize(18);">18</div>
-                            <div class="option" onclick="settingsPG.setFontSize(20);">20</div>
-                            <div class="option" onclick="settingsPG.setFontSize(22);">22</div>
+                            <div class="option">8</div>
+                            <div class="option">10</div>
+                            <div class="option selected">12</div>
+                            <div class="option">14</div>
+                            <div class="option">16</div>
+                            <div class="option">18</div>
+                            <div class="option">20</div>
+                            <div class="option">22</div>
                         </div>
                     </div>
                     <div style="display: none;" class="option noSubSelect" id="safemodeToggleMobile">Safe mode
@@ -245,7 +238,7 @@
                     <div style="display: none;" class="option nosubselect" id="minimapToggleMobile">Minimap
                         <i class="fa fa-square" aria-hidden="true"></i>
                     </div>
-                    <div class="option subSelect" id="qrCodeHover" onmouseover="showQRCode();"><img src="css/img/optionsButton.svg">QR Code Link
+                    <div class="option subSelect" id="qrCodeHoverMobile"><img src="css/img/optionsButton.svg">QR Code Link
                         <div class="toDisplaySub">
                             <div class="option" id="qrCodeImage">QR Code Image</div>
                         </div>
@@ -285,8 +278,7 @@
             <div class="button select" style="display: none;">
                 <span id="currentVersionMobile">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 class="option">4.0</div>
                 </div>
             </div>
         </div>
@@ -383,9 +375,10 @@
     <script src="js/pbt.js"></script>
     <script src="js/libs/typescript.js"></script>
     <script src="js/examples.js"></script>
+    <script src="js/main.js"></script>
+    <script src="js/menuPG.js"></script>
     <script src="js/monacoCreator.js"></script>
     <script src="js/settingsPG.js"></script>
-    <script src="js/menuPG.js"></script>
     <script src="js/utils.js"></script>
     <script src="js/zipTool.js"></script>
     <script src="js/index.js"></script>

Playground/indexStable.html

@@ -209,8 +209,8 @@
         <div class="category languageJS" id="JStoTSbar">
             <div class="button select"><img src="css/img/hamburgerButton.svg">
                 <div class="toDisplay">
-                    <div class="option noSubSelect languageTS" id="toTSbuttonMobile"><img src="css/img/logoTS.svg">TypeScript</div>
-                    <div class="option noSubSelect languageJS" id="toJSbuttonMobile"><img src="css/img/logoJS.svg">JavaScript</div>
+                    <div class="option noSubSelect languageTS" id="toTSbuttonMobile">TypeScript</div>
+                    <div class="option noSubSelect languageJS" id="toJSbuttonMobile">JavaScript</div>
                     <div class="option noSubSelect run" id="runButtonMobile"><img src="css/img/playButton.svg">Run</div>
                     <div class="option noSubSelect" id="saveButtonMobile"><img src="css/img/saveButton.svg">Save</div>
                     <div class="option noSubSelect" id="zipButtonMobile"><img src="css/img/downloadButton.svg">Download
@@ -384,7 +384,7 @@
     <script src="js/jquery.qrcode.js"></script>
     <script src="js/qrcode.js"></script>
 
-    <!-- TO DO : Why is this a split here ? It's already in the JS code -->
+    <!-- TO DO - Why is this a split here ? It's already in the JS code (index.js) -->
     <script>
         Split(['#jsEditor', '#canvasZone']);
     </script>
@@ -393,9 +393,10 @@
     <script src="js/pbt.js"></script>
     <script src="js/libs/typescript.js"></script>
     <script src="js/examples.js"></script>
+    <script src="js/main.js"></script>
+    <script src="js/menuPG.js"></script>
     <script src="js/monacoCreator.js"></script>
     <script src="js/settingsPG.js"></script>
-    <script src="js/menuPG.js"></script>
     <script src="js/utils.js"></script>
     <script src="js/zipTool.js"></script>
     <script src="js/index.js"></script>

Playground/js.html

@@ -0,0 +1,4 @@
+<script>
+    localStorage.setItem("bjs-playground-scriptLanguage", "JS");
+    window.location = "./";
+</script>

Playground/js/examples.js

@@ -2,7 +2,9 @@
  * This JS file is for examples list and actions linked to examples.
  */
 class Examples {
-    constructor() {
+    constructor(parent) {
+        this.parent = parent;
+
         this.isExamplesDisplayed = false;
 
         // There's a "close" button on the mobile interface.

Playground/js/frame.js

@@ -1,5 +1,7 @@
 import { utils } from "mocha";
 
+// TO DO - Rewrite frame.js to work with the new class architecture.
+
 (function() {
     var snippetUrl = "https://snippet.babylonjs.com";
     var currentSnippetToken;
@@ -8,7 +10,7 @@
     var refreshAnchor = document.getElementById("refresh");
     var editAnchor = document.getElementById("edit");
     var scripts;
-    var zipCode; // TO DO - Rewrite frame.js with classes ... And zipTool.js
+    var zipCode;
 
     if (location.href.toLowerCase().indexOf("noui") > -1) {
         fpsLabel.style.visibility = "hidden";

Playground/js/menuPG.js

@@ -2,7 +2,9 @@
  * This JS file is for UI displaying
  */
 class MenuPG {
-    constructor() {
+    constructor(parent) {
+        this.parent = parent;
+
         this.allSelect = document.querySelectorAll('.select');
         this.allToDisplay = document.querySelectorAll('.toDisplay');
         this.allToDisplayBig = document.querySelectorAll('.toDisplayBig');
@@ -12,6 +14,7 @@ class MenuPG {
 
         this.jsEditorElement = document.getElementById('jsEditor');
         this.canvasZoneElement = document.getElementById('canvasZone');
+        this.switchWrapper = document.getElementById('switchWrapper');
         this.switchWrapperCode = document.getElementById('switchWrapperCode');
         this.switchWrapperCanvas = document.getElementById('switchWrapperCanvas');
         this.fpsLabelElement = document.getElementById('fpsLabel');
@@ -31,17 +34,6 @@ class MenuPG {
             }
         }.bind(this);
 
-        // Click on BJS logo redirection to BJS homepage
-        let logos = document.getElementsByClassName('logo');
-        for (var i = 0; i < logos.length; i++) {
-            logos[i].addEventListener('click', function () {
-                window.open("https://babylonjs.com", "_target");
-            });
-        }
-
-        // On click anywhere, remove displayed options
-        window.addEventListener('click', this.removeallOptions);
-
         // In mobile mode, resize JSEditor and canvas
         this.switchWrapperCode.addEventListener('click', this.resizeBigJsEditor.bind(this));
         this.switchWrapperCanvas.addEventListener('click', this.resizeBigCanvas.bind(this));
@@ -79,8 +71,23 @@ class MenuPG {
             else this.exitFullPage();
         }.bind(this), false);
 
+        // Click on BJS logo redirection to BJS homepage
+        let logos = document.getElementsByClassName('logo');
+        for (var i = 0; i < logos.length; i++) {
+            logos[i].addEventListener('click', function () {
+                window.open("https://babylonjs.com", "_target");
+            });
+        }
+
         // Message before unload
-        window.onbeforeunload = this.exitPrompt;
+        window.addEventListener('beforeunload', function () {
+            this.exitPrompt();
+        }.bind(this));
+
+        // On click anywhere, remove displayed options
+        window.addEventListener('click', function () {
+            this.removeAllOptions();
+        }.bind(this));
     }
 
     /**
@@ -175,6 +182,7 @@ class MenuPG {
      * Remove displayed options
      */
     removeAllOptions() {
+        this.parent.examples.hideExamples();
         this.removeAllSubItems();
 
         for (var index = 0; index < this.allToDisplay.length; index++) {
@@ -198,6 +206,8 @@ class MenuPG {
         if (this.navBarMobile.offsetHeight > 0) {
             this.removeAllOptions();
             this.canvasZoneElement.style.width = '0';
+            this.switchWrapper.style.left = "";
+            this.switchWrapper.style.right = "0";
             this.switchWrapperCode.style.display = 'none';
             this.fpsLabelElement.style.display = 'none';
             this.jsEditorElement.style.width = '100%';
@@ -217,6 +227,8 @@ class MenuPG {
             document.getElementsByClassName('gutter-horizontal')[0].style.display = 'none';
             this.switchWrapperCanvas.style.display = 'none';
             this.canvasZoneElement.style.width = '100%';
+            this.switchWrapper.style.left = "0";
+            this.switchWrapper.style.right = "";
             this.switchWrapperCode.style.display = 'block';
             this.fpsLabelElement.style.display = 'block';
         }
@@ -238,7 +250,7 @@ class MenuPG {
     /**
      * Canvas full page
      */
-    goFullPage () {
+    goFullPage() {
         var canvasElement = document.getElementById("renderCanvas");
         canvasElement.style.position = "absolute";
         canvasElement.style.top = 0;
@@ -248,20 +260,20 @@ class MenuPG {
     /**
      * Canvas exit full page
      */
-    exitFullPage () {
+    exitFullPage() {
         document.getElementById("renderCanvas").style.position = "relative";
         document.getElementById("renderCanvas").style.zIndex = 0;
     };
     /**
      * Canvas full screen
      */
-    goFullscreen (engine) {
+    goFullscreen(engine) {
         engine.switchFullscreen(true);
     };
     /**
      * Editor full screen
      */
-    editorGoFullscreen () {
+    editorGoFullscreen() {
         var editorDiv = document.getElementById("jsEditor");
         if (editorDiv.requestFullscreen) {
             editorDiv.requestFullscreen();
@@ -276,7 +288,8 @@ class MenuPG {
     /**
      * Display the metadatas form
      */
-    displayMetadata () {
+    displayMetadata() {
+        this.removeAllOptions();
         document.getElementById("saveLayer").style.display = "block";
     };
 
@@ -284,7 +297,8 @@ class MenuPG {
      * Navigation Overwrites
      */
     // TO DO - Apply this when click on TS / JS button
-    exitPrompt (e) {
+    // TO DO - Make it work with all sizes
+    exitPrompt(e) {
         var safeToggle = document.getElementById("safemodeToggle1280");
         if (safeToggle.classList.contains('checked')) {
             e = e || window.event;
@@ -296,4 +310,24 @@ class MenuPG {
             return message;
         }
     };
+
+    // TO DO - Make it work with all sizes
+    showQRCode() {
+        console.log("Plop");
+        $("#qrCodeImage1280").empty();
+        var playgroundCode = window.location.href.split("#");
+        playgroundCode.shift();
+        $("#qrCodeImage1280").qrcode({ text: "https://playground.babylonjs.com/frame.html#" + (playgroundCode.join("#")) });
+    };
+
+    /**
+     * Comes from "pbt.js"
+     */
+    // TO DO - Comment this correctly
+    showBJSPGMenu() {
+        var headings = document.getElementsByClassName('category');
+        for (var i = 0; i < headings.length; i++) {
+            headings[i].style.visibility = 'visible';
+        }
+    };
 };

Playground/js/monacoCreator.js

@@ -2,14 +2,14 @@
  * This JS file is for Monaco management
  */
 class MonacoCreator {
-    constructor() {
+    constructor(parent) {
+        this.parent = parent;
+        
         this.jsEditor = null;
         this.monacoMode = "javascript";
         this.blockEditorChange = false;
 
         this.compilerTriggerTimeoutID = null;
-
-        this.loadMonaco();
     }
 
     // ACCESSORS
@@ -56,11 +56,11 @@ class MonacoCreator {
                             monaco.languages.typescript.typescriptDefaults.addExtraLib(xhr.responseText, 'babylon.d.ts');
                         }
 
-                        run();
-                    });
+                        this.parent.main.run();
+                    }.bind(this));
                 }
             }
-        };
+        }.bind(this);
         xhr.send(null);
     };
 
@@ -84,7 +84,7 @@ class MonacoCreator {
             automaticLayout: true,
             scrollBeyondLastLine: false,
             readOnly: false,
-            theme: settingsPG.vsTheme,
+            theme: this.parent.settingsPG.vsTheme,
             contextmenu: false,
             folding: true,
             showFoldingControls: "always",
@@ -97,8 +97,8 @@ class MonacoCreator {
         this.jsEditor = monaco.editor.create(document.getElementById('jsEditor'), editorOptions);
         this.jsEditor.setValue(oldCode);
         this.jsEditor.onKeyUp(function () {
-            utils.markDirty();
-        });
+            this.parent.utils.markDirty();
+        }.bind(this));
     };
 
     /**
@@ -115,10 +115,10 @@ class MonacoCreator {
         var minimapToggle = document.getElementById("minimapToggle1280");
         if (minimapToggle.classList.contains('checked')) {
             this.jsEditor.updateOptions({ minimap: { enabled: false } });
-            utils.setToMultipleID("minimapToggle", "innerHTML", 'Minimap <i class="fa fa-square" aria-hidden="true"></i>');
+            this.parent.utils.setToMultipleID("minimapToggle", "innerHTML", 'Minimap <i class="fa fa-square" aria-hidden="true"></i>');
         } else {
             this.jsEditor.updateOptions({ minimap: { enabled: true } });
-            utils.setToMultipleID("minimapToggle", "innerHTML", 'Minimap <i class="fa fa-check-square" aria-hidden="true"></i>');
+            this.parent.utils.setToMultipleID("minimapToggle", "innerHTML", 'Minimap <i class="fa fa-check-square" aria-hidden="true"></i>');
         }
         minimapToggle.classList.toggle('checked');
     };
@@ -128,9 +128,9 @@ class MonacoCreator {
      * @param {Function} callBack : Function that will be called after retrieving the code.
      */
     getRunCode(callBack) {
-        if (settingsPG.ScriptLanguage == "JS")
+        if (this.parent.settingsPG.ScriptLanguage == "JS")
             callBack(this.jsEditor.getValue());
-        else if (settingsPG.ScriptLanguage == "TS") {
+        else if (this.parent.settingsPG.ScriptLanguage == "TS") {
             this.triggerCompile(this.JsEditor.getValue(), function (result) {
                 callBack(result + "var createScene = function() { return Playground.CreateScene(engine, engine.getRenderingCanvas()); }")
             });
@@ -161,7 +161,7 @@ class MonacoCreator {
                 }
             }
             catch (e) {
-                utils.showError(e.message, e);
+                this.parent.utils.showError(e.message, e);
             }
         }.bind(this), 100);
     };

Playground/js/pbt.js

@@ -521,12 +521,4 @@ var PBT = function() {
     }
 }
 
-showBJSPGMenu = function() {
-    var headings = document.getElementsByClassName('category');
-    
-    for (var i = 0; i < headings.length; i ++) {
-        headings[i].style.visibility = 'visible';
-    }
-}
-
     

Playground/js/settingsPG.js

@@ -4,13 +4,11 @@
  * - Script language
  * - Font size
  */
-/**
- * TO DO :
- * - Set the font in the localStorage
- */
 class SettingsPG {
-    constructor(monacoCreator) {
-        this.monacoCreator = monacoCreator;
+    constructor(parent) {
+        this.parent = parent;
+
+        // TO DO - Set the fond in the localStorage (same as theme and language)
 
         // The elements that will color with languages
         this.elementForscriptLanguage = [
@@ -37,11 +35,11 @@ class SettingsPG {
         this.defaultScene = "scripts/basic scene.js";
         if(this.scriptLanguage == "JS") {
             this.defaultScene = "scripts/basic scene.js";
-            monacoCreator.monacoMode = "javascript";
+            this.parent.monacoCreator.monacoMode = "javascript";
         }
         else if(this.scriptLanguage == "TS") {
             this.defaultScene = "scripts/basic scene.txt";
-            monacoCreator.monacoMode = "typescript";
+            this.parent.monacoCreator.monacoMode = "typescript";
         }
     }
 
@@ -62,7 +60,7 @@ class SettingsPG {
      */
     setFontSize(size) {
         this.fontSize = size;
-        this.monacoCreator.jsEditor.updateOptions({ fontSize: size });
+        this.parent.monacoCreator.jsEditor.updateOptions({ fontSize: size });
         var array = document.getElementsByClassName("displayFontSize");
         for (var i = 0; i < array.length; i++) {
             var subArray = array[i].children;
@@ -88,10 +86,10 @@ class SettingsPG {
             }
         }
         if (this.scriptLanguage == "JS") {
-            utils.setToMultipleID("toJSbutton", "removeClass", "floatLeft");
+            this.parent.utils.setToMultipleID("toJSbutton", "removeClass", "floatLeft");
         }
         else if (this.scriptLanguage == "TS") {
-            utils.setToMultipleID("toJSbutton", "addClass", "floatLeft");
+            this.parent.utils.setToMultipleID("toJSbutton", "addClass", "floatLeft");
         }
     };
     /**
@@ -101,18 +99,18 @@ class SettingsPG {
         localStorage.setItem("bjs-playground-theme", theme);
         // Get the Monaco theme name.
         // Change the selected button style
-        utils.setToMultipleID("darkTheme", "removeClass", "selected");
-        utils.setToMultipleID("lightTheme", "removeClass", "selected");
+        this.parent.utils.setToMultipleID("darkTheme", "removeClass", "selected");
+        this.parent.utils.setToMultipleID("lightTheme", "removeClass", "selected");
         if (theme == 'dark') {
             this.vsTheme = 'vs-dark';
-            utils.setToMultipleID("darkTheme", "addClass", "selected");
+            this.parent.utils.setToMultipleID("darkTheme", "addClass", "selected");
         }
         else {
             this.vsTheme = 'vs';
-            utils.setToMultipleID("lightTheme", "addClass", "selected");
+            this.parent.utils.setToMultipleID("lightTheme", "addClass", "selected");
         }
 
-        this.monacoCreator.createMonacoEditor();
+        this.parent.monacoCreator.createMonacoEditor();
 
         this.setFontSize(this.fontSize);
         // Color the elements to theme
@@ -127,7 +125,7 @@ class SettingsPG {
             }
         }
     };
-    restoreTheme(monacoCreator) {
-        this.setTheme(this.vsTheme, monacoCreator);
+    restoreTheme() {
+        this.setTheme(this.vsTheme, this.parent.monacoCreator);
     };
 };

Playground/js/ts.js

@@ -1,56 +0,0 @@
-
-// 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()); }")
-//     });
-// }

Playground/js/utils.js

@@ -2,17 +2,17 @@
  * This JS file contains utils functions
  */
 class Utils {
-    constructor() {
+    constructor(parent) {
+        this.parent = parent;
+        
         this.multipleSize = [1280, 1024, 'Mobile'];
     }
 
-    // TO DO - Comment this
+    // TO DO - Comment this correctly
     markDirty() {
-        if (monacoCreator.BlockEditorChange) return;
+        if (this.parent.monacoCreator.BlockEditorChange) return;
 
-        // setToMultipleID("currentScript", "innerHTML", "Custom");
-        this.setToMultipleID("safemodeToggle", "addClass", "checked");
-        // setToMultipleID("minimapToggle", "addClass", "checked"); // Why ?!
+        this.setToMultipleID("safemodeToggle", "addClass", "checked");!
         this.setToMultipleID('safemodeToggle', 'innerHTML', 'Safe mode <i class="fa fa-check-square" aria-hidden="true"></i>');
     };
 
@@ -76,4 +76,13 @@ class Utils {
             }
         });
     };
+
+    /**
+     * Function to get the current screen size
+     */
+    getCurrentSize() {
+        for(var i = 0; i < this.multipleSize.length; i++) {
+            if(document.getElementById("menuButton" + this.multipleSize[i]).offsetHeight > 0) return this.multipleSize[i];
+        }
+    };
 }

Playground/js/zipTool.js

@@ -1,8 +1,10 @@
 /**
  * This JS file contains the ZIP tools
  */
-class zipTool {
-    constructor() {
+class ZipTool {
+    constructor(parent) {
+        this.parent = parent;
+        
         this.zipCode;
     }
 
@@ -107,7 +109,7 @@ class zipTool {
                 true,
                 function () {
                     this.addTexturesToZip(zip, index + 1, textures, folder, then);
-                });
+                }.bind(this));
         }
         else {
             this.addTexturesToZip(zip, index + 1, textures, folder, then);

Playground/test.html

@@ -1,4 +1,4 @@
-<!-- TO DO : What is this ? -->
+<!-- TO DO - What is the purpose of this page ? -->
 
 <div class="navbar-inner" id="topbar">
     <a class="brand largeOnly" href="#" id="mainTitle">Babylon.js Playground</a>

Playground/ts-local.html

@@ -1,496 +0,0 @@
-<!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">
-
-    <script src="js/libs/pep.min.js"></script>
-    <!--For canvas/code separator-->
-    <script src="js/libs/split.js"></script>
-
-    <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="../dist/preview%20release/ammo.js"></script>
-    <script src="../dist/preview%20release/cannon.js"></script>
-    <script src="../dist/preview%20release/Oimo.js"></script>
-    <script src="../dist/preview%20release/gltf_validator.js"></script>
-    <script src="../dist/preview%20release/earcut.min.js"></script>
-    <!-- Babylon.js -->
-    <script src="../dist/preview%20release/babylon.js"></script>
-    <script src="../dist/preview%20release/gui/babylon.gui.min.js"></script>
-    <script src="../dist/preview%20release/inspector/babylon.inspector.bundle.js"></script>
-    <script src="../dist/preview%20release/materialsLibrary/babylonjs.materials.min.js"></script>
-    <script src="../dist/preview%20release/proceduralTexturesLibrary/babylonjs.proceduralTextures.min.js"></script>
-    <script src="../dist/preview%20release/postProcessesLibrary/babylonjs.postProcess.min.js"></script>
-    <script src="../dist/preview%20release/loaders/babylonjs.loaders.min.js"></script>
-    <script src="../dist/preview%20release/serializers/babylonjs.serializers.min.js"></script>
-
-    <!-- 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" 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" />
-    <link href="css/color_ts.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>
-        </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>
-                    </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" onclick="setFontSize(12);">12</div>
-                            <div class="option" 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>
-                    <div class="option checked" id="editorButton1600">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>
-                    <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>
-                </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>
-            </div>
-            <div class="button select">
-                <span class="examplesButton">Examples</span>
-            </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>
-        </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="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>
-                    </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" onclick="setFontSize(12);">12</div>
-                            <div class="option" 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>
-                    <div class="option checked" id="editorButton1475">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>
-                    <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="toDisplaySub">
-                            <div class="option" onclick="setVersion('latest');">Latest</div>
-                            <div class="option" onclick="setVersion('stable');">Stable</div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-
-        <div class="category right">
-            <div class="button select">
-                <span class="examplesButton">Examples</span>
-            </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>
-        </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="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>
-                    </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" onclick="setFontSize(12);">12</div>
-                            <div class="option" 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>
-                    <div class="option checked" id="editorButton1030">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>
-                    <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="toDisplaySub">
-                            <div class="option" onclick="setVersion('latest');">Latest</div>
-                            <div class="option" onclick="setVersion('stable');">Stable</div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-
-        <div class="category right">
-            <div class="button select">
-                <span class="examplesButton">Examples</span>
-            </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>
-        </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="darkTheme750">Dark</div>
-                            <div class="option" id="lightTheme750">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" onclick="setFontSize(12);">12</div>
-                            <div class="option" 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>
-                    <div style="display:none;" class="option checked" id="editorButton750">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>
-                    <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="toDisplaySub">
-                            <div class="option" onclick="setVersion('latest');">Latest</div>
-                            <div class="option" onclick="setVersion('stable');">Stable</div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-
-        <div class="category right">
-            <div class="button select">
-                <span id="currentScript750">Examples</span>
-            </div>
-        </div>
-    </div>
-
-    <div class="wrapper">
-        <div id="jsEditor"></div>
-        <div id="canvasZone">
-            <canvas touch-action="none" id="renderCanvas"></canvas>
-        </div>
-    </div>
-    <div id="exampleList" class="typescript">
-        <div id="exampleBanner">
-            <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">
-    </div>
-
-    <span class="label" id="fpsLabel">FPS</span>
-
-    <div id="errorZone">
-    </div>
-
-    <div class="navbarBottom">
-        <div id="statusBar"></div>
-        <div class="links">
-            <div class='link'>
-                <a target='_new' href="https://www.netlify.com/">Deployed by Netlify</a>
-            </div>
-            <div class='link'>
-                <a target='_new' href="https://forum.babylonjs.com/">Forum</a>
-            </div>
-            <div class='link'>
-                <a target='_new' href="https://www.babylonjs.com/sandbox">Sandbox</a>
-            </div>
-            <div class='link'>
-                <a target='_new' href="https://doc.babylonjs.com">Documentation</a>
-            </div>
-            <div class='link'>
-                <a target='_new' href="https://doc.babylonjs.com/playground">Search</a>
-            </div>
-        </div>
-    </div>
-
-    <div id="saveLayer" class="save-layer">
-        <div class="save-form">
-            <label for="saveFormTitle">TITLE</label>
-            <div class="separator"></div>
-            <input type="text" maxlength="120" id="saveFormTitle" class="save-form-title">
-
-            <label for="saveFormDescription">DESCRIPTION</label>
-            <div class="separator"></div>
-            <textarea id="saveFormDescription" rows="4" cols="10"></textarea>
-
-            <label for="saveFormTags">TAGS (separated by comma)</label>
-            <div class="separator"></div>
-            <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>
-        </div>
-    </div>
-
-    <div id="waitDiv">
-        <span id="waitTitle">Babylon.js Playground
-            <BR>
-            <BR>
-            <BR>
-        </span>
-        <div id="logo-part">
-            <img src="v4.svg" id="waitLogo" />
-            <img src="spinner.svg" id="waitSpinner" />
-        </div>
-    </div>
-
-    <script src="js/libs/jquery.min.js"></script>
-    <script src="js/jquery.qrcode.js"></script>
-    <script src="js/qrcode.js"></script>
-
-    <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>
-    <script src="js/ts.js"></script>
-
-    <!-- Global site tag (gtag.js) - Google Analytics -->
-    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-41767310-2"></script>
-    <script>
-        window.dataLayer = window.dataLayer || [];
-        function gtag() { dataLayer.push(arguments); }
-        gtag('js', new Date());
-
-        gtag('config', 'UA-41767310-2');
-    </script>
-</body>
-
-</html>

Playground/ts.html

@@ -1,496 +1,4 @@
-<!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">
-
-    <script src="js/libs/pep.min.js"></script>
-    <!--For canvas/code separator-->
-    <script src="js/libs/split.js"></script>
-
-    <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>
-    <script src="https://preview.babylonjs.com/Oimo.js"></script>
-    <script src="https://preview.babylonjs.com/gltf_validator.js"></script>
-    <script src="https://preview.babylonjs.com/earcut.min.js"></script>
-    <!-- Babylon.js -->
-    <script src="https://preview.babylonjs.com/babylon.js"></script>
-    <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/materialsLibrary/babylonjs.materials.min.js"></script>
-    <script src="https://preview.babylonjs.com/proceduralTexturesLibrary/babylonjs.proceduralTextures.min.js"></script>
-    <script src="https://preview.babylonjs.com/postProcessesLibrary/babylonjs.postProcess.min.js"></script>
-    <script src="https://preview.babylonjs.com/loaders/babylonjs.loaders.min.js"></script>
-    <script src="https://preview.babylonjs.com/serializers/babylonjs.serializers.min.js"></script>
-
-    <!-- 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" 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" />
-    <link href="css/color_ts.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>
-        </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>
-                    </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" onclick="setFontSize(12);">12</div>
-                            <div class="option" 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>
-                    <div class="option checked" id="editorButton1600">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>
-                    <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>
-                </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>
-            </div>
-            <div class="button select">
-                <span class="examplesButton">Examples</span>
-            </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>
-        </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="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>
-                    </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" onclick="setFontSize(12);">12</div>
-                            <div class="option" 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>
-                    <div class="option checked" id="editorButton1475">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>
-                    <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="toDisplaySub">
-                            <div class="option" onclick="setVersion('latest');">Latest</div>
-                            <div class="option" onclick="setVersion('stable');">Stable</div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-
-        <div class="category right">
-            <div class="button select">
-                <span class="examplesButton">Examples</span>
-            </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>
-        </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="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>
-                    </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" onclick="setFontSize(12);">12</div>
-                            <div class="option" 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>
-                    <div class="option checked" id="editorButton1030">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>
-                    <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="toDisplaySub">
-                            <div class="option" onclick="setVersion('latest');">Latest</div>
-                            <div class="option" onclick="setVersion('stable');">Stable</div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-
-        <div class="category right">
-            <div class="button select">
-                <span class="examplesButton">Examples</span>
-            </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>
-        </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="darkTheme750">Dark</div>
-                            <div class="option" id="lightTheme750">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" onclick="setFontSize(12);">12</div>
-                            <div class="option" 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>
-                    <div style="display:none;" class="option checked" id="editorButton750">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>
-                    <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="toDisplaySub">
-                            <div class="option" onclick="setVersion('latest');">Latest</div>
-                            <div class="option" onclick="setVersion('stable');">Stable</div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-
-        <div class="category right">
-            <div class="button select">
-                <span id="currentScript750">Examples</span>
-            </div>
-        </div>
-    </div>
-
-    <div class="wrapper">
-        <div id="jsEditor"></div>
-        <div id="canvasZone">
-            <canvas touch-action="none" id="renderCanvas"></canvas>
-        </div>
-    </div>
-    <div id="exampleList" class="typescript">
-        <div id="exampleBanner">
-            <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">
-    </div>
-
-    <span class="label" id="fpsLabel">FPS</span>
-
-    <div id="errorZone">
-    </div>
-
-    <div class="navbarBottom">
-        <div id="statusBar"></div>
-        <div class="links">
-            <div class='link'>
-                <a target='_new' href="https://www.netlify.com/">Deployed by Netlify</a>
-            </div>
-            <div class='link'>
-                <a target='_new' href="https://forum.babylonjs.com/">Forum</a>
-            </div>
-            <div class='link'>
-                <a target='_new' href="https://www.babylonjs.com/sandbox">Sandbox</a>
-            </div>
-            <div class='link'>
-                <a target='_new' href="https://doc.babylonjs.com">Documentation</a>
-            </div>
-            <div class='link'>
-                <a target='_new' href="https://doc.babylonjs.com/playground">Search</a>
-            </div>
-        </div>
-    </div>
-
-    <div id="saveLayer" class="save-layer">
-        <div class="save-form">
-            <label for="saveFormTitle">TITLE</label>
-            <div class="separator"></div>
-            <input type="text" maxlength="120" id="saveFormTitle" class="save-form-title">
-
-            <label for="saveFormDescription">DESCRIPTION</label>
-            <div class="separator"></div>
-            <textarea id="saveFormDescription" rows="4" cols="10"></textarea>
-
-            <label for="saveFormTags">TAGS (separated by comma)</label>
-            <div class="separator"></div>
-            <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>
-        </div>
-    </div>
-
-    <div id="waitDiv">
-        <span id="waitTitle">Babylon.js Playground
-            <BR>
-            <BR>
-            <BR>
-        </span>
-        <div id="logo-part">
-            <img src="v4.svg" id="waitLogo" />
-            <img src="css/img/spinner.svg" id="waitSpinner" />
-        </div>
-    </div>
-
-    <script src="js/libs/jquery.min.js"></script>
-    <script src="js/jquery.qrcode.js"></script>
-    <script src="js/qrcode.js"></script>
-
-    <script src="js/UImenu.js"></script>
-    <script src="js/pbt.js"></script>
-    <script src="js/libs/typescript.js"></script>
-    <script src="js/index.js"></script>
-    <script src="js/ts.js"></script>
-
-    <!-- Global site tag (gtag.js) - Google Analytics -->
-    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-41767310-2"></script>
-    <script>
-        window.dataLayer = window.dataLayer || [];
-        function gtag() { dataLayer.push(arguments); }
-        gtag('js', new Date());
-
-        gtag('config', 'UA-41767310-2');
-    </script>
-</body>
-
-</html>
+<script>
+    localStorage.setItem("bjs-playground-scriptLanguage", "TS");
+    window.location = "./";
+</script>