Move files to correct location

.gitignore

@@ -199,5 +199,5 @@ gui/dist/
 /Viewer/tests/tsserver.cmd
 # Local Netlify folder
 .netlify
-Playground/public/dist/
+Playground/dist/
 Sandbox/public/dist/

.vscode/launch.json

@@ -72,7 +72,7 @@
             "name": "Launch playground (Chrome)",
             "type": "chrome",
             "request": "launch",
-            "url": "http://localhost:1338/Playground/public/index-local.html",
+            "url": "http://localhost:1338/Playground/index-local.html",
             "webRoot": "${workspaceRoot}/",
             "sourceMaps": true,
             "preLaunchTask": "run",
@@ -86,14 +86,27 @@
             "type": "edge",
             "version": "dev",
             "request": "launch",
-            "url": "http://localhost:1338/Playground/public/index-local.html",
+            "url": "http://localhost:1338/Playground/index-local.html",
             "webRoot": "${workspaceRoot}/",
             "sourceMaps": true,
             "preLaunchTask": "run",
             "userDataDir": "${workspaceRoot}/.tempChromeProfileForDebug",
             "runtimeArgs": [
                 "--enable-unsafe-es3-apis"
             ]
+        },        
+        {
+            "name": "Launch playground (Edge) - Direct",
+            "type": "edge",
+            "version": "dev",
+            "request": "launch",
+            "url": "http://localhost:1338/Playground/index-local.html",
+            "webRoot": "${workspaceRoot}/",
+            "sourceMaps": true,
+            "userDataDir": "${workspaceRoot}/.tempChromeProfileForDebug",
+            "runtimeArgs": [
+                "--enable-unsafe-es3-apis"
+            ]
         },
         {
             "name": "Launch playground (Chrome+WebGL 1.0 forced)",

Playground/src/components/commandBarComponent.tsx

@@ -22,11 +22,26 @@ export class CommandBarComponent extends React.Component<ICommandBarComponentPro
         this.props.globalState.onNewRequiredObservable.notifyObservers();
     }
 
+    onClear() {        
+        this.props.globalState.onClearRequiredObservable.notifyObservers();
+    }
+
+    onSave() {
+        this.props.globalState.onSaveRequiredObservable.notifyObservers();
+    }
+
+    onDownload() {
+        this.props.globalState.onDownloadRequiredObservable.notifyObservers();
+    }
+
     public render() {
         return (
             <div className={"commands " + (this.props.globalState.language === "JS" ? "background-js" : "background-ts")}>
                 <CommandButtonComponent globalState={this.props.globalState} tooltip="Run" icon="play" isActive={true} onClick={()=> this.onPlay()}/>
+                <CommandButtonComponent globalState={this.props.globalState} tooltip="Save" icon="save" isActive={false} onClick={()=> this.onSave()}/>
+                <CommandButtonComponent globalState={this.props.globalState} tooltip="Download" icon="download" isActive={false} onClick={()=> this.onDownload()}/>
                 <CommandButtonComponent globalState={this.props.globalState} tooltip="Create new" icon="new" isActive={false} onClick={()=> this.onNew()}/>
+                <CommandButtonComponent globalState={this.props.globalState} tooltip="Clear code" icon="clear" isActive={false} onClick={()=> this.onClear()}/>
             </div>
         );
     }

Playground/src/components/metadataComponent.tsx

@@ -0,0 +1,94 @@
+import * as React from "react";
+import { GlobalState } from '../globalState';
+import { Nullable } from 'babylonjs/types';
+
+require("../scss/metadata.scss");
+
+interface IMetadataComponentProps {
+    globalState: GlobalState;
+}
+
+export class MetadataComponent extends React.Component<IMetadataComponentProps, {isVisible: boolean}> {    
+    private _titleRef: React.RefObject<HTMLInputElement>;
+    private _descriptionRef: React.RefObject<HTMLTextAreaElement>;
+    private _tagsRef: React.RefObject<HTMLTextAreaElement>;
+
+    public constructor(props: IMetadataComponentProps) {
+        super(props);
+        this.state = {isVisible: false};
+
+        this._titleRef = React.createRef();
+        this._descriptionRef = React.createRef();
+        this._tagsRef = React.createRef();
+
+        this.props.globalState.onDisplayMetadataObservable.add(value => {
+            this.setState({isVisible: value});
+        });
+
+        this.props.globalState.onMetadataUpdatedObservable.add(() => {
+            let selection: Nullable<HTMLElement>;
+
+            if (this.props.globalState.currentSnippetTitle) {
+                selection = document.querySelector('title');
+                if (selection) {
+                    selection.innerText = (this.props.globalState.currentSnippetTitle + " | Babylon.js Playground");
+                }
+            }
+
+            if (this.props.globalState.currentSnippetDescription) {
+                selection = document.querySelector('meta[name="description"]');
+                if (selection) {
+                    selection.setAttribute("content", this.props.globalState.currentSnippetDescription + " - Babylon.js Playground");
+                }
+            }
+
+            if (this.props.globalState.currentSnippetTags) {
+                selection = document.querySelector('meta[name="keywords"]');
+                if (selection) {
+                    selection.setAttribute("content", "babylon.js, game engine, webgl, 3d," + this.props.globalState.currentSnippetTags);
+                }
+            }
+        });
+    }
+
+    onOk() {
+        this.props.globalState.currentSnippetTitle = this._titleRef.current!.value;
+        this.props.globalState.currentSnippetDescription = this._descriptionRef.current!.value;
+        this.props.globalState.currentSnippetTags = this._tagsRef.current!.value;
+        this.setState({isVisible: false});
+        this.props.globalState.onMetadataUpdatedObservable.notifyObservers();
+        this.props.globalState.onMetadataWindowHiddenObservable.notifyObservers(true);
+    }
+
+    onCancel() {
+        this.setState({isVisible: false});
+        this.props.globalState.onMetadataWindowHiddenObservable.notifyObservers(false);
+    }
+
+    public render() {
+        if (!this.state.isVisible) {
+            return null;
+        }
+
+        return (
+            <div id="metadata-editor" className={(this.props.globalState.language === "JS" ? "background-js" : "background-ts")}>
+                <label htmlFor="title">TITLE</label>
+                <div className="separator"></div>
+                <input type="text" maxLength={120} id="title" className="save-form-title" ref={this._titleRef} value={this.props.globalState.currentSnippetTitle}/>
+
+                <label htmlFor="description">DESCRIPTION</label>
+                <div className="separator"></div>
+                <textarea id="description" rows={4} cols={10} ref={this._descriptionRef} value={this.props.globalState.currentSnippetDescription}></textarea>
+
+                <label htmlFor="tags">TAGS (separated by comma)</label>
+                <div className="separator"></div>
+                <textarea id="tags" rows={4} cols={10} ref={this._tagsRef} value={this.props.globalState.currentSnippetTags}></textarea>
+
+                <div className="editor-buttons" id="buttons">
+                    <div id="ok" onClick={() => this.onOk()}>OK</div>
+                    <div id="cancel" onClick={() => this.onCancel()}>Cancel</div>
+                </div>
+            </div>
+        )
+    }
+}

Playground/src/components/rendererComponent.tsx

@@ -27,15 +27,13 @@ export class RenderingComponent extends React.Component<IRenderingComponentProps
         }
 
         this.props.globalState.onRunRequiredObservable.add(() => {
-            this.compileAndRun();
-        })
-    }
-
-    componentDidMount() {
-        this.compileAndRun();
+           this.compileAndRun();
+        });
     }
 
     compileAndRun() {
+        this.props.globalState.onDisplayWaitRingObservable.notifyObservers(false);
+
         if (this._engine) {
             try {
                 this._engine.dispose();

Playground/src/components/waitRingComponent.tsx

@@ -0,0 +1,41 @@
+import * as React from "react";
+import { GlobalState } from '../globalState';
+
+import CoreLogo from "../imgs/coreLogo.svg";
+import Spinner from "../imgs/spinner.svg";
+
+require("../scss/waitRing.scss");
+
+interface IWaitRingProps {
+    globalState: GlobalState;
+}
+
+export class WaitRingComponent extends React.Component<IWaitRingProps, {isVisible: boolean}> {
+    public constructor(props: IWaitRingProps) {
+        super(props);
+        this.state = {isVisible: true};
+
+        this.props.globalState.onDisplayWaitRingObservable.add(value => {
+            this.setState({isVisible: value});
+        })
+    }
+
+    public render() {
+        if (!this.state.isVisible) {
+            return null;
+        }
+
+        return (
+            <div id="wait-ring">
+                <div id="logo-part">
+                    <div id="waitLogo">
+                        <CoreLogo />
+                    </div>
+                    <div id="waitSpinner">
+                        <Spinner />
+                    </div>
+                </div>
+            </div>
+        )
+    }
+}

Playground/src/custom.d.ts

@@ -1,4 +1,9 @@
 declare module "*.svg" {
     const content: string;
     export default content;
+}
+
+declare module "monaco-editor/esm/vs/language/typescript/languageFeatures" {        
+    const SuggestAdapter: any;
+    export type SuggestAdapter = any;
 }

Playground/src/globalState.ts

@@ -8,13 +8,30 @@ export enum EditionMode {
 
 export class GlobalState {
     public readonly MobileSizeTrigger = 1024;
+    public readonly SnippetServerUrl = "https://snippet.babylonjs.com";
+
     public currentCode: string;
     public language: "JS" | "TS" = "JS";
     public fpsElement: HTMLDivElement;
     public mobileDefaultMode = EditionMode.RenderingOnly;
 
+    public currentSnippetTitle = "";
+    public currentSnippetDescription = "";
+    public currentSnippetTags = "";
+    public currentSnippetToken = "";
+
     public onRunRequiredObservable = new Observable<void>();
     public onNewRequiredObservable = new Observable<void>();
+    public onClearRequiredObservable = new Observable<void>();
+    public onSaveRequiredObservable = new Observable<void>();
     public onErrorObservable = new Observable<string>();    
     public onMobileDefaultModeChangedObservable = new Observable<void>();
+    public onDisplayWaitRingObservable = new Observable<boolean>();
+    public onDisplayMetadataObservable = new Observable<boolean>();    
+    public onMetadataUpdatedObservable = new Observable<void>();  
+    public onMetadataWindowHiddenObservable = new Observable<boolean>();
+    public onDownloadRequiredObservable = new Observable<void>();
+
+    public loadingCodeInProgress = false;
+    public onCodeLoaded = new Observable<string>();
 }

Playground/src/playground.tsx

@@ -5,6 +5,10 @@ import { RenderingComponent } from './components/rendererComponent';
 import { GlobalState, EditionMode } from './globalState';
 import { FooterComponent } from './components/footerComponent';
 import { HeaderComponent } from './components/headerComponent';
+import { SaveManager } from './tools/saveManager';
+import { LoadManager } from './tools/loadManager';
+import { WaitRingComponent } from './components/waitRingComponent';
+import { MetadataComponent } from './components/metadataComponent';
 
 require("./scss/main.scss");
 const Split = require('split.js').default;
@@ -20,6 +24,9 @@ export class Playground extends React.Component<IPlaygroundProps, {errorMessage:
     private _globalState: GlobalState;
     private _splitInstance: any;
 
+    public saveManager: SaveManager;
+    public loadManager: LoadManager;
+
     public constructor(props: IPlaygroundProps) {
        super(props);
        this._globalState = new GlobalState();
@@ -36,7 +43,11 @@ export class Playground extends React.Component<IPlaygroundProps, {errorMessage:
 
        this._globalState.onMobileDefaultModeChangedObservable.add(() => {
            this.setState({mode: this._globalState.mobileDefaultMode});
-       })
+       });
+
+       // Managers
+       this.saveManager = new SaveManager(this._globalState);
+       this.loadManager = new LoadManager(this._globalState);
     }
 
     componentDidMount() {
@@ -90,6 +101,8 @@ export class Playground extends React.Component<IPlaygroundProps, {errorMessage:
                     </div>
                 </div>
                 <FooterComponent globalState={this._globalState}/>
+                <WaitRingComponent globalState={this._globalState}/>
+                <MetadataComponent globalState={this._globalState}/>
             </div>   
         )
     }

Playground/src/scss/commandBar.scss

@@ -19,6 +19,11 @@
             img {
                 filter: invert(17%) !important;
             }
-        }        
+        } 
+
+        &:active {
+            transform-origin: center;
+            transform: scale(0.95);
+        }
     }
 }

Playground/src/scss/metadata.scss

@@ -0,0 +1,47 @@
+#metadata-editor {
+    grid-column: 1;
+    grid-row: 1 / 3;
+
+    position: absolute;
+    top: 80px;
+    left: calc(50% - 205px);
+    width: 410px;
+    height: 370px;
+    padding-top: 15px;
+    -webkit-border-radius: 4px;
+    -moz-border-radius: 4px;
+    border-radius: 4px;
+    color: white;
+    font-size: 14px;
+    text-align: center;
+
+    .separator {
+        width: 350px;
+        border-bottom: 1px solid #999;
+        margin: auto;
+        margin-bottom: 10px;
+    }
+
+    textarea, input {
+        display: block;
+        width: 350px;
+        margin: auto;
+        margin-bottom: 20px;
+        padding: 5px;
+        resize: none;
+    }
+
+    .editor-buttons{
+        user-select: none;
+         div {
+            cursor: pointer;
+            display: inline-block;
+            width: 100px;
+
+            &:hover {
+                background: white;
+                color: black;
+            }
+        }
+    }
+}