Playground v4.6 : Bug fixes. Style fixes.

Playground/css/index.css

@@ -394,6 +394,7 @@ body {
     width: 55px;
     height: 100%;
     vertical-align: top;
+    margin-left: -3px;
     line-height: 100%;
     text-align: center;
 }

Playground/css/index_mobile.css

@@ -12,6 +12,9 @@
     #exampleList #exampleBanner h1 img {
         display: block;
     }
+    #currentVersionMobile {
+        float: left;
+    }
     .navbarBottom {
         display: none;
     }

Playground/debug.html

@@ -122,8 +122,7 @@
             <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="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">
@@ -133,12 +132,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
@@ -153,27 +152,22 @@
                     <div class="option noSubSelect" id="minimapToggle1280">Minimap
                         <i class="fa fa-square" aria-hidden="true"></i>
                     </div>
-                    <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" class="qrCodeImage">QR Code Image</div>
+                    <div class="option subSelect" id="qrCodeHover1280">QR Code Link <i class="fa fa-chevron-right"
+                            aria-hidden="true"></i>
+                        <div class="toDisplaySub qrCodeImage">
+                            <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>
         </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 class="button select">
+                <span id="currentVersion1280"></span>
+                <div class="toDisplay currentVersionDisplay" style="display: none"></div>
             </div>
             <div class="button select"><img class="examplesButton" src="css/img/examplesButton.svg"></div>
         </div>
@@ -196,7 +190,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>
 
@@ -207,12 +201,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
@@ -227,26 +221,22 @@
                     <div class="option noSubSelect" id="minimapToggle1024">Minimap
                         <i class="fa fa-square" aria-hidden="true"></i>
                     </div>
-                    <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" class="qrCodeImage">QR Code Image</div>
+                    <div class="option subSelect" id="qrCodeHover1024">QR Code Link <i class="fa fa-chevron-right"
+                            aria-hidden="true"></i>
+                        <div class="toDisplaySub qrCodeImage">
+                            <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>
         </div>
 
         <div class="category right">
-            <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="button select">
+                <span id="currentVersion1024"></span>
+                <div class="toDisplay currentVersionDisplay" style="display: none">
                 </div>
             </div>
             <div class="button select"><img class="examplesButton" src="css/img/examplesButton.svg"></div>
@@ -256,7 +246,7 @@
     <!-- 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">TypeScript</div>
                     <div class="option noSubSelect languageJS" id="toJSbuttonMobile">JavaScript</div>
@@ -265,8 +255,15 @@
                     <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 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 subSelect">
+                        <img src="css/img/optionsButton.svg">
+                        Version<div id="currentVersionMobile"></div>
+                        <div class="toDisplaySub currentVersionDisplay">
+                        </div>
                     </div>
                     <div class="option subSelect"><img src="css/img/optionsButton.svg">Theme
                         <div class="toDisplaySub">
@@ -276,14 +273,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
@@ -292,18 +289,21 @@
                     <div style="display: none;" class="option checked noSubSelect" id="editorButtonMobile">Editor
                         <i class="fa fa-check-square" aria-hidden="true"></i>
                     </div>
-                    <div style="display: none;" class="option nosubselect" id="fullscreenButtonMobile" style="display: none">Fullscreen</div>
-                    <div style="display: none;" class="option nosubselect" id="editorFullscreenButtonMobile" style="display: none">Editor
+                    <div style="display: none;" class="option nosubselect" id="fullscreenButtonMobile"
+                        style="display: none">Fullscreen</div>
+                    <div style="display: none;" class="option nosubselect" id="editorFullscreenButtonMobile"
+                        style="display: none">Editor
                         Fullscreen</div>
-                    <div class="option nosubselect" id="formatButtonMobile"><img src="css/img/optionsButton.svg">Format code</div>
+                    <div class="option nosubselect" id="formatButtonMobile"><img src="css/img/optionsButton.svg">Format
+                        code</div>
                     <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"><img src="css/img/optionsButton.svg">QR Code Link
-                        <div class="toDisplaySub">
-                            <div class="option" id="qrCodeImage">QR Code Image</div>
+                    <!-- <div class="option subSelect" id="qrCodeHoverMobile"><img src="css/img/optionsButton.svg">QR Code Link
+                        <div class="toDisplaySub qrCodeImage">
+                            <div class="option" id="qrCodeImageMobile">[QR Code Image]</div>
                         </div>
-                    </div>
+                    </div> -->
                     <div class="option nosubselect" id="metadataButtonMobile"><img
                             src="css/img/metadataButton.svg">Metadata</div>
                     <div class="option nosubselect"><img class="examplesButton"
@@ -335,16 +335,6 @@
             </div>
         </div>
 
-        <div class="category right">
-            <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>
-            </div>
-        </div>
-
         <div id="switchWrapper" class="languageJS">
             <img id="switchWrapperCode" src="css/img/codeButton.svg">
             <img id="switchWrapperCanvas" src="css/img/canvas3Dbutton.svg">
@@ -397,6 +387,7 @@
 
     <div id="saveLayer" class="save-layer">
         <div class="save-form languageJS ">
+            <img id="saveFormButtonClose" src="css/img/clearButton.svg">
             <label for="saveFormTitle">TITLE</label>
             <div class="separator"></div>
             <input type="text" maxlength="120" id="saveFormTitle" class="save-form-title">
@@ -432,6 +423,7 @@
     <script src="https://code.jquery.com/jquery.js"></script>
 
     <!-- Main scripts -->
+    <script src="js/config_versions.js"></script>
     <script src="js/pbt.js"></script>
     <script src="js/libs/typescript.js"></script>
     <script src="js/examples.js"></script>

Playground/index-local.html

@@ -57,8 +57,7 @@
             <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="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">
@@ -68,12 +67,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
@@ -88,27 +87,22 @@
                     <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 class="option subSelect" id="qrCodeHover1280">QR Code Link <i class="fa fa-chevron-right"
+                            aria-hidden="true"></i>
+                        <div class="toDisplaySub qrCodeImage">
+                            <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>
         </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 class="button select">
+                <span id="currentVersion1280"></span>
+                <div class="toDisplay currentVersionDisplay" style="display: none"></div>
             </div>
             <div class="button select"><img class="examplesButton" src="css/img/examplesButton.svg"></div>
         </div>
@@ -131,7 +125,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>
 
@@ -142,12 +136,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
@@ -162,26 +156,22 @@
                     <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
-                            class="fa fa-chevron-right" aria-hidden="true"></i>
-                        <div class="toDisplaySub">
-                            <div class="option" id="qrCodeImage">QR Code Image</div>
+                    <div class="option subSelect" id="qrCodeHover1024">QR Code Link <i class="fa fa-chevron-right"
+                            aria-hidden="true"></i>
+                        <div class="toDisplaySub qrCodeImage">
+                            <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>
         </div>
 
         <div class="category right">
-            <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="button select">
+                <span id="currentVersion1024"></span>
+                <div class="toDisplay currentVersionDisplay" style="display: none">
                 </div>
             </div>
             <div class="button select"><img class="examplesButton" src="css/img/examplesButton.svg"></div>
@@ -191,7 +181,7 @@
     <!-- 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">TypeScript</div>
                     <div class="option noSubSelect languageJS" id="toJSbuttonMobile">JavaScript</div>
@@ -200,8 +190,15 @@
                     <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 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 subSelect">
+                        <img src="css/img/optionsButton.svg">
+                        Version<div id="currentVersionMobile"></div>
+                        <div class="toDisplaySub currentVersionDisplay">
+                        </div>
                     </div>
                     <div class="option subSelect"><img src="css/img/optionsButton.svg">Theme
                         <div class="toDisplaySub">
@@ -211,14 +208,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
@@ -227,18 +224,21 @@
                     <div style="display: none;" class="option checked noSubSelect" id="editorButtonMobile">Editor
                         <i class="fa fa-check-square" aria-hidden="true"></i>
                     </div>
-                    <div style="display: none;" class="option nosubselect" id="fullscreenButtonMobile" style="display: none">Fullscreen</div>
-                    <div style="display: none;" class="option nosubselect" id="editorFullscreenButtonMobile" style="display: none">Editor
+                    <div style="display: none;" class="option nosubselect" id="fullscreenButtonMobile"
+                        style="display: none">Fullscreen</div>
+                    <div style="display: none;" class="option nosubselect" id="editorFullscreenButtonMobile"
+                        style="display: none">Editor
                         Fullscreen</div>
-                    <div class="option nosubselect" id="formatButtonMobile"><img src="css/img/optionsButton.svg">Format code</div>
+                    <div class="option nosubselect" id="formatButtonMobile"><img src="css/img/optionsButton.svg">Format
+                        code</div>
                     <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="toDisplaySub">
-                            <div class="option" id="qrCodeImage">QR Code Image</div>
+                    <!-- <div class="option subSelect" id="qrCodeHoverMobile"><img src="css/img/optionsButton.svg">QR Code Link
+                        <div class="toDisplaySub qrCodeImage">
+                            <div class="option" id="qrCodeImageMobile">[QR Code Image]</div>
                         </div>
-                    </div>
+                    </div> -->
                     <div class="option nosubselect" id="metadataButtonMobile"><img
                             src="css/img/metadataButton.svg">Metadata</div>
                     <div class="option nosubselect"><img class="examplesButton"
@@ -270,16 +270,6 @@
             </div>
         </div>
 
-        <div class="category right">
-            <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>
-            </div>
-        </div>
-
         <div id="switchWrapper" class="languageJS">
             <img id="switchWrapperCode" src="css/img/codeButton.svg">
             <img id="switchWrapperCanvas" src="css/img/canvas3Dbutton.svg">
@@ -332,6 +322,7 @@
 
     <div id="saveLayer" class="save-layer">
         <div class="save-form languageJS ">
+            <img id="saveFormButtonClose" src="css/img/clearButton.svg">
             <label for="saveFormTitle">TITLE</label>
             <div class="separator"></div>
             <input type="text" maxlength="120" id="saveFormTitle" class="save-form-title">
@@ -374,6 +365,7 @@
     <script src="js/qrcode.js"></script>
 
     <!-- Main scripts -->
+    <script src="js/config_versions.js"></script>
     <script src="js/pbt.js"></script>
     <script src="js/libs/typescript.js"></script>
     <script src="js/examples.js"></script>

Playground/index.html

@@ -68,7 +68,6 @@
             <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" 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>
@@ -99,8 +98,8 @@
                     <div class="option noSubSelect" id="minimapToggle1280">Minimap
                         <i class="fa fa-square" aria-hidden="true"></i>
                     </div>
-                    <div class="option subSelect" id="qrCodeHover1280">QR Code Link <i
-                            class="fa fa-chevron-right" aria-hidden="true"></i>
+                    <div class="option subSelect" id="qrCodeHover1280">QR Code Link <i class="fa fa-chevron-right"
+                            aria-hidden="true"></i>
                         <div class="toDisplaySub qrCodeImage">
                             <div class="option" id="qrCodeImage1280">[QR Code Image]</div>
                         </div>
@@ -168,8 +167,8 @@
                     <div class="option noSubSelect" id="minimapToggle1024">Minimap
                         <i class="fa fa-square" aria-hidden="true"></i>
                     </div>
-                    <div class="option subSelect" id="qrCodeHover1024">QR Code Link <i
-                            class="fa fa-chevron-right" aria-hidden="true"></i>
+                    <div class="option subSelect" id="qrCodeHover1024">QR Code Link <i class="fa fa-chevron-right"
+                            aria-hidden="true"></i>
                         <div class="toDisplaySub qrCodeImage">
                             <div class="option" id="qrCodeImage1024">[QR Code Image]</div>
                         </div>
@@ -202,11 +201,13 @@
                     <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="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 subSelect">
                         <img src="css/img/optionsButton.svg">
-                        Version<div id="currentVersionMobile" style="display: none"></div>
+                        <div id="currentVersionMobile"></div>
                         <div class="toDisplaySub currentVersionDisplay">
                         </div>
                     </div>
@@ -234,10 +235,13 @@
                     <div style="display: none;" class="option checked noSubSelect" id="editorButtonMobile">Editor
                         <i class="fa fa-check-square" aria-hidden="true"></i>
                     </div>
-                    <div style="display: none;" class="option nosubselect" id="fullscreenButtonMobile" style="display: none">Fullscreen</div>
-                    <div style="display: none;" class="option nosubselect" id="editorFullscreenButtonMobile" style="display: none">Editor
+                    <div style="display: none;" class="option nosubselect" id="fullscreenButtonMobile"
+                        style="display: none">Fullscreen</div>
+                    <div style="display: none;" class="option nosubselect" id="editorFullscreenButtonMobile"
+                        style="display: none">Editor
                         Fullscreen</div>
-                    <div class="option nosubselect" id="formatButtonMobile"><img src="css/img/optionsButton.svg">Format code</div>
+                    <div class="option nosubselect" id="formatButtonMobile"><img src="css/img/optionsButton.svg">Format
+                        code</div>
                     <div style="display: none;" class="option nosubselect" id="minimapToggleMobile">Minimap
                         <i class="fa fa-square" aria-hidden="true"></i>
                     </div>

Playground/indexStable.html

@@ -73,8 +73,7 @@
             <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="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">
@@ -84,12 +83,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
@@ -104,27 +103,22 @@
                     <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 class="option subSelect" id="qrCodeHover1280">QR Code Link <i class="fa fa-chevron-right"
+                            aria-hidden="true"></i>
+                        <div class="toDisplaySub qrCodeImage">
+                            <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>
         </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 class="button select">
+                <span id="currentVersion1280"></span>
+                <div class="toDisplay currentVersionDisplay" style="display: none"></div>
             </div>
             <div class="button select"><img class="examplesButton" src="css/img/examplesButton.svg"></div>
         </div>
@@ -147,7 +141,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>
 
@@ -158,12 +152,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
@@ -178,26 +172,22 @@
                     <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
-                            class="fa fa-chevron-right" aria-hidden="true"></i>
-                        <div class="toDisplaySub">
-                            <div class="option" id="qrCodeImage">QR Code Image</div>
+                    <div class="option subSelect" id="qrCodeHover1024">QR Code Link <i class="fa fa-chevron-right"
+                            aria-hidden="true"></i>
+                        <div class="toDisplaySub qrCodeImage">
+                            <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>
         </div>
 
         <div class="category right">
-            <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="button select">
+                <span id="currentVersion1024"></span>
+                <div class="toDisplay currentVersionDisplay" style="display: none">
                 </div>
             </div>
             <div class="button select"><img class="examplesButton" src="css/img/examplesButton.svg"></div>
@@ -207,7 +197,7 @@
     <!-- 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">TypeScript</div>
                     <div class="option noSubSelect languageJS" id="toJSbuttonMobile">JavaScript</div>
@@ -216,8 +206,15 @@
                     <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 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 subSelect">
+                        <img src="css/img/optionsButton.svg">
+                        Version<div id="currentVersionMobile"></div>
+                        <div class="toDisplaySub currentVersionDisplay">
+                        </div>
                     </div>
                     <div class="option subSelect"><img src="css/img/optionsButton.svg">Theme
                         <div class="toDisplaySub">
@@ -227,14 +224,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
@@ -243,18 +240,21 @@
                     <div style="display: none;" class="option checked noSubSelect" id="editorButtonMobile">Editor
                         <i class="fa fa-check-square" aria-hidden="true"></i>
                     </div>
-                    <div style="display: none;" class="option nosubselect" id="fullscreenButtonMobile" style="display: none">Fullscreen</div>
-                    <div style="display: none;" class="option nosubselect" id="editorFullscreenButtonMobile" style="display: none">Editor
+                    <div style="display: none;" class="option nosubselect" id="fullscreenButtonMobile"
+                        style="display: none">Fullscreen</div>
+                    <div style="display: none;" class="option nosubselect" id="editorFullscreenButtonMobile"
+                        style="display: none">Editor
                         Fullscreen</div>
-                    <div class="option nosubselect" id="formatButtonMobile"><img src="css/img/optionsButton.svg">Format code</div>
+                    <div class="option nosubselect" id="formatButtonMobile"><img src="css/img/optionsButton.svg">Format
+                        code</div>
                     <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="toDisplaySub">
-                            <div class="option" id="qrCodeImage">QR Code Image</div>
+                    <!-- <div class="option subSelect" id="qrCodeHoverMobile"><img src="css/img/optionsButton.svg">QR Code Link
+                        <div class="toDisplaySub qrCodeImage">
+                            <div class="option" id="qrCodeImageMobile">[QR Code Image]</div>
                         </div>
-                    </div>
+                    </div> -->
                     <div class="option nosubselect" id="metadataButtonMobile"><img
                             src="css/img/metadataButton.svg">Metadata</div>
                     <div class="option nosubselect"><img class="examplesButton"
@@ -286,16 +286,6 @@
             </div>
         </div>
 
-        <div class="category right">
-            <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>
-            </div>
-        </div>
-
         <div id="switchWrapper" class="languageJS">
             <img id="switchWrapperCode" src="css/img/codeButton.svg">
             <img id="switchWrapperCanvas" src="css/img/canvas3Dbutton.svg">
@@ -348,6 +338,7 @@
 
     <div id="saveLayer" class="save-layer">
         <div class="save-form languageJS ">
+            <img id="saveFormButtonClose" src="css/img/clearButton.svg">
             <label for="saveFormTitle">TITLE</label>
             <div class="separator"></div>
             <input type="text" maxlength="120" id="saveFormTitle" class="save-form-title">
@@ -390,6 +381,7 @@
     </script>
 
     <!-- Main scripts -->
+    <script src="js/config_versions.js"></script>
     <script src="js/pbt.js"></script>
     <script src="js/libs/typescript.js"></script>
     <script src="js/examples.js"></script>

Playground/js/config_versions.js

@@ -1,4 +1,5 @@
 CONFIG_last_versions = [
+    ["4.1.0","https://unpkg.com/babylonjs@4.0.3/babylon.js"], // TO DO - Mettre la v4.1 sur UNPKG
     ["4.0.3","https://unpkg.com/babylonjs@4.0.3/babylon.js"],
     ["4.0.0","https://unpkg.com/babylonjs@4.0.0/babylon.js"],
     ["3.0","https://unpkg.com/babylonjs@3.0.7/dist/preview%20release/babylon.js"]

Playground/js/main.js

@@ -45,17 +45,19 @@ class Main {
             }.bind(this)
         );
 
+        // Restore BJS version if needed
+        if (this.parent.settingsPG.restoreVersion() == false) {
+            // Check if there a hash in the URL
+            this.checkHash();
+        }
+
         // Load scripts list
         this.loadScriptsList();
 
-        // Check if there a hash in the URL
-        this.checkHash();
-
-
         // -------------------- UI --------------------
-        
-        // Display BJS version
-        this.parent.utils.setToMultipleID("mainTitle", "innerHTML", "v" + BABYLON.Engine.Version);
+
+        // Display BJS version - Need a check in case of version selection
+        if (BABYLON) this.parent.utils.setToMultipleID("mainTitle", "innerHTML", "v" + BABYLON.Engine.Version);
         // Run
         this.parent.utils.setToMultipleID("runButton", "click", this.compileAndRun.bind(this));
         // New
@@ -529,6 +531,9 @@ class Main {
          * Compile the script in the editor, and run the preview in the canvas
          */
     compileAndRun() {
+        // If we need to change the version, don't do this
+        if (localStorage.getItem("bjs-playground-apiversion") && localStorage.getItem("bjs-playground-apiversion") != null) return;
+
         try {
             this.parent.menuPG.hideWaitDiv();
 
@@ -546,7 +551,10 @@ class Main {
             }
 
             if (this.engine) {
-                this.engine.dispose();
+                try {
+                    this.engine.dispose();
+                }
+                catch(ex) {}
                 this.engine = null;
             }
 

Playground/js/menuPG.js

@@ -86,6 +86,7 @@ class MenuPG {
 
         // Message before unload
         window.addEventListener('beforeunload', function () {
+            if (localStorage.getItem("bjs-playground-apiversion") && localStorage.getItem("bjs-playground-apiversion") != null) return;
             this.exitPrompt();
         }.bind(this));
 
@@ -104,20 +105,30 @@ class MenuPG {
 
         // Version selection
         for (var i = 0; i < this.parent.utils.multipleSize.length; i++) {
-            var versionButtons = document.getElementById("currentVersion" + this.parent.utils.multipleSize[i]).parentElement;
-            versionButtons.addEventListener("click", function (evt) {
-                this.displayVersionsMenu(evt);
-            }.bind(this));
+            var versionButtons = null;
+            if (this.parent.utils.multipleSize[i] == "Mobile") {
+                var onclick = function (evt) { this.parent.examples.hideExamples(); };
+                document.getElementById("currentVersion" + this.parent.utils.multipleSize[i]).addEventListener("click", onclick.bind(this));
+                versionButtons = document.getElementById("currentVersion" + this.parent.utils.multipleSize[i]).parentElement;
+                versionButtons.addEventListener("click", onclick.bind(this));
+            }
+            else {
+                versionButtons = document.getElementById("currentVersion" + this.parent.utils.multipleSize[i]).parentElement;
+                versionButtons.addEventListener("click", function (evt) {
+                    this.parent.examples.hideExamples();
+                    this.removeAllOptions();
+                    this.displayVersionsMenu(evt);
+                }.bind(this));
+            }
 
             for (var j = 0; j < CONFIG_last_versions.length; j++) {
                 var newButton = document.createElement("div");
                 newButton.classList.add("option");
-                // newButton.classList.add("noSubSelect");
                 newButton.innerText = "v" + CONFIG_last_versions[j][0];
                 newButton.value = CONFIG_last_versions[j][1];
 
                 newButton.addEventListener("click", function (evt) {
-                    this.parent.settingsPG.setBJSversion(evt);
+                    this.parent.settingsPG.setBJSversion(evt, this.parent.monacoCreator.getCode());
                     this.displayWaitDiv();
                 }.bind(this));
 
@@ -145,10 +156,13 @@ class MenuPG {
     };
 
     displayVersionNumber(version) {
-        this.hideWaitDiv();
         for (var i = 0; i < this.parent.utils.multipleSize.length; i++) {
-
-            document.getElementById("currentVersion" + this.parent.utils.multipleSize[i]).parentElement.firstElementChild.innerText = "v" + version;
+            if (this.parent.utils.multipleSize[i] == "Mobile") {
+                document.getElementById("currentVersion" + this.parent.utils.multipleSize[i]).innerText = "Version " + version;
+            }
+            else {
+                document.getElementById("currentVersion" + this.parent.utils.multipleSize[i]).parentElement.firstElementChild.innerText = "v" + version;
+            }
         }
     };
 
@@ -197,6 +211,7 @@ class MenuPG {
      * Display children subMenu of the caller
      */
     displaySubitems(evt) {
+        
         // If it's in mobile mode, avoid the "mouseenter" bug
         if (evt.type == "mouseenter" && this.navBarMobile.offsetHeight > 0) return;
         this.removeAllSubItems();
@@ -205,6 +220,8 @@ class MenuPG {
         if (target.nodeName == "IMG") target = evt.target.parentNode;
 
         var toDisplay = target.querySelector('.toDisplaySub');
+        if(toDisplay == null) toDisplay = target.parentElement.querySelector('.toDisplaySub');
+
         if (toDisplay) {
             toDisplay.style.display = 'block';
 

Playground/js/monacoCreator.js

@@ -18,6 +18,14 @@ class MonacoCreator {
         return this.jsEditor;
     };
 
+    getCode() {
+        if(this.jsEditor) return this.jsEditor.getValue();
+        else return "";
+    };
+    setCode(value) {
+        this.jsEditor.setValue(value);
+    };
+
     get MonacoMode() {
         return this.monacoMode;
     };

Playground/js/settingsPG.js

@@ -39,9 +39,6 @@ class SettingsPG {
             this.defaultScene = "scripts/basic scene.txt";
             this.parent.monacoCreator.monacoMode = "typescript";
         }
-
-        // Last BJS version
-        this.lastBJSversionURL = "";
     }
 
     get ScriptLanguage() {
@@ -137,19 +134,37 @@ class SettingsPG {
     };
 
     /**
-     * Set a different BJS version
+     * Set BJS version on click
+     */
+    setBJSversion(evt, code) {
+        localStorage.setItem("bjs-playground-apiversion", evt.target.value);
+        localStorage.setItem("bjs-playground-apiversion-tempcode", code);
+        window.location.reload();
+    };
+    /**
+     * Check if we need to restore a BJS version
      */
-    setBJSversion(evt) {
-        // if(this.lastBJSversionURL != '') unload(this.lastBJSversionURL);
-        BABYLON = null;
+    restoreVersion() {
+        if (localStorage.getItem("bjs-playground-apiversion") && localStorage.getItem("bjs-playground-apiversion") != null) {
+            BABYLON = null;
 
-        var newScript = document.createElement('script');
-        this.lastBJSversionURL = evt.target.value;
-        newScript.src = this.lastBJSversionURL;
-        newScript.onload = function () {
-            this.parent.menuPG.displayVersionNumber(BABYLON.Engine.Version);
-        }.bind(this);
+            this.parent.menuPG.displayWaitDiv();
 
-        document.head.appendChild(newScript);
+            var newBJSscript = document.createElement('script');
+            newBJSscript.src = localStorage.getItem("bjs-playground-apiversion");
+            newBJSscript.onload = function () {
+                console.log(BABYLON.Engine.Version);
+                this.parent.menuPG.displayVersionNumber(BABYLON.Engine.Version);
+                this.parent.monacoCreator.setCode(localStorage.getItem("bjs-playground-apiversion-tempcode"));
+
+                localStorage.removeItem("bjs-playground-apiversion");
+                localStorage.removeItem("bjs-playground-apiversion-tempcode");
+
+                this.parent.main.compileAndRun();
+            }.bind(this);
+
+            document.head.appendChild(newBJSscript);
+        }
+        else return false;
     };
 };

Playground/js/zipTool.js

@@ -135,7 +135,7 @@ class ZipTool {
             true,
             function () {
                 this.addImportedFilesToZip(zip, index + 1, importedFiles, folder, then);
-            });
+            }.bind(this));
     };
     getZip (engine) {
         if (engine.scenes.length === 0) {