Scene storage backend integration (#51)

This PR adds Storyteller.ai API integration for saving and loading
Storyteller Studio scenes to/from the backend.

### Known issues
* The skybox is not currently stored in the serialized scene format

studio-frontend/src/app/app.element.ts

@@ -18,10 +18,12 @@ import { LitElement, html, nothing } from "lit";
 import { customElement, state } from "lit/decorators.js";
 import { classMap } from "lit-html/directives/class-map.js";
 import { Ref, createRef, ref } from "lit-html/directives/ref.js";
+import { v4 as uuid } from "uuid";
 
 import "@storyteller/studio-web/canvas-provider";
 import "@storyteller/studio-web/viewer";
 import "@storyteller/studio-web/bvh-viewer";
+import "@storyteller/studio-web/editor";
 import "@storyteller/studio-web/mixamo-viewer";
 import "./anim-editor.element";
 import "./button.element";
@@ -50,6 +52,7 @@ export class AppElement extends LitElement {
 
 	@state() bvhPath?: string;
 	@state() mixamoPath?: string;
+	@state() scenePath?: string;
 	@state() mode?: StudioMode;
 
 	#sceneObjects: studio.SceneObject[] = [];
@@ -74,6 +77,9 @@ export class AppElement extends LitElement {
 		if (params.has("mixamo"))
 			this.mixamoPath = params.get("mixamo")!;
 
+		if (params.has("scene"))
+			this.scenePath = params.get("scene")!;
+
 		this.mode = match (params.get("mode"), {
 			"studio": () => StudioMode.Editor,
 			"viewer": () => StudioMode.Viewer,
@@ -152,19 +158,25 @@ export class AppElement extends LitElement {
 	}
 
 	@on("window:scene-saved")
-	onSceneSaved({ detail: scene }: SceneSavedEvent): void {
-		const fileBlob = new Blob([scene], { type: "text/ron" });
-		const url = URL.createObjectURL(fileBlob);
+	async onSceneSaved({ detail: scene }: SceneSavedEvent): Promise<void> {
+		const file = new File([scene], "scene.scn.ron", { type: "text/ron" });
+		const formData = new FormData();
 
-		const anchor = document.createElement("a");
-		anchor.href = url;
-		anchor.download = "scene.scn.ron";
-		anchor.click();
+		formData.append("uuid_idempotency_token", uuid());
+		formData.append("file", file);
 
-		setTimeout(() => {
-			URL.revokeObjectURL(url);
-			anchor.remove();
-		});
+		try {
+			const response = await fetch("https://api.fakeyou.com/v1/engine/create_scene", {
+				method: "POST",
+				credentials: "include",
+				headers: { "Accept": "text/plain" },
+				body: formData,
+			});
+			console.log(response);
+		}
+		catch (err) {
+			console.error(err);
+		}
 	}
 
 	toggleHelp(): void {
@@ -241,6 +253,11 @@ export class AppElement extends LitElement {
 					skyboxId="test_scene"
 					@scene-state=${this.onSceneStateChange}
 				></sts-mixamo-viewer>
+			` : this.scenePath ? html`
+				<sts-editor
+					scenePath=${this.scenePath}
+					@scene-state=${this.onSceneStateChange}
+				></sts-editor>
 			` : html`
 				<sts-viewer
 					objectId="sample-room.gltf"