Merge branch 'test' of github.com:storytold/GottaGoFast into test

app/modules/Tabs/Tabs.tsx

@@ -0,0 +1,56 @@
+import React, { useState } from 'react'
+import { Tab } from '@headlessui/react'
+
+function classNames(...classes:string[]) {
+  return classes.filter(Boolean).join(' ')
+}
+export type Tab = {
+  header: string;
+  children: JSX.Element;
+}
+
+export const Tabs = ({
+  tabs: tabProps
+}:{
+  tabs:Tab[]
+}) =>{
+  const [tabs, setTabs] = useState(tabProps);
+
+  return (
+    <div className="w-full max-w-md px-2 py-16 sm:px-0">
+      <Tab.Group>
+        <Tab.List className="flex space-x-1 rounded-xl bg-blue-900/20 p-1">
+          {tabs.map((tab, idx) => (
+            <Tab
+              key={idx}
+              className={({ selected }) =>
+                classNames(
+                  'w-full rounded-lg py-2.5 text-sm font-medium leading-5',
+                  'ring-white/60 ring-offset-2 ring-offset-blue-400 focus:outline-none focus:ring-2',
+                  selected
+                    ? 'bg-white text-blue-700 shadow'
+                    : 'text-blue-100 hover:bg-white/[0.12] hover:text-white'
+                )
+              }
+            >
+              {tab.header}
+            </Tab>
+          ))}
+        </Tab.List>
+        <Tab.Panels className="mt-2">
+          {tabs.map((tab, idx) => (
+            <Tab.Panel
+              key={idx}
+              className={classNames(
+                'rounded-xl bg-white p-3',
+                'ring-white/60 ring-offset-2 ring-offset-blue-400 focus:outline-none focus:ring-2'
+              )}
+            >
+              {tab.children}
+            </Tab.Panel>
+          ))}
+        </Tab.Panels>
+      </Tab.Group>
+    </div>
+  )
+}

app/modules/Tabs/index.tsx

@@ -0,0 +1 @@
+export { Tabs } from './Tabs';

app/pages/PageEnigma/PageEnigma.tsx

@@ -17,6 +17,7 @@ import {
 import { ButtonDialogue } from '~/modules/ButtonDialogue';
 import { TopBarHelmet } from '~/modules/TopBarHelmet/TopBarHelmet';
 import { SidePanel } from '~/modules/SidePanel';
+import { Tabs } from '~/modules/Tabs';
 import { Controls3D } from './comps/Controls3D';
 import { ControlsVideo } from './comps/ControlsVideo';
 import { Timeline } from './comps/Timeline';
@@ -54,15 +55,7 @@ export const PageEnigma = () => {
   const handleButtonSave = ()=>{
     editorRef.current?.save();
   }
-  const handleButtonLoad = ()=>{
-    document.getElementById("load-upload")?.click();
-  }
-  const handleButtonRender = ()=>{
-    editorRef.current?.togglePlayback();
-  }
-  const handleButtonPlay = ()=>{
 
-  }
 
   return(
     <div>
@@ -105,11 +98,23 @@ export const PageEnigma = () => {
         </div>
       </div>
       <SidePanel>
-        <Button onClick={handleButtonLoad}>Load</Button>
-        <Button onClick={handleButtonRender}>Render</Button>
-        <Button onClick={handleButtonPlay}>Play</Button>
+        <Tabs tabs={[
+          {
+            header: 'Animation',
+            children: <p>Animation Tab</p>
+          },{
+            header: 'Camera',
+            children: <p>Camera Tab</p>
+          },{
+            header: 'Audio',
+            children: <p>Audio Tab</p>
+          },{
+            header: 'Styling',
+            children: <p>Styling Tab</p>
+          }
+        ]}/>
       </SidePanel>
-      <Timeline />
+      <Timeline editorCurrent={editorRef.current}/>
     </div>
   );
 }

app/pages/PageEnigma/comps/Timeline/Timeline.tsx

@@ -1,10 +1,31 @@
 import { LowerPanel } from "~/modules/LowerPanel";
+import {
+  Button,
+} from '~/components';
+import Editor from '../../js/editor';
+
+export const Timeline = ({
+  editorCurrent
+}:{
+  editorCurrent: Editor|null;
+})=>{
+  const handleButtonLoad = ()=>{
+    document.getElementById("load-upload")?.click();
+  }
+  const handleButtonRender = ()=>{
+    editorCurrent?.togglePlayback();
+  }
+  const handleButtonPlay = ()=>{
+
+  }
 
-export const Timeline = ()=>{
   return(
     <LowerPanel>
       <div className='h-10 w-full border-b border-ui-panel-border'></div>
       <input style={{ display: 'none' }} type="file" id="load-upload" name="load-upload"></input>
+      <Button onClick={handleButtonLoad}>Load</Button>
+        <Button onClick={handleButtonRender}>Render</Button>
+        <Button onClick={handleButtonPlay}>Play</Button>
     </LowerPanel>
   )
 }

app/pages/PageEnigma/datastructures/clips/transform_track_clip.ts

@@ -1,49 +1,90 @@
 import * as THREE from 'three';
+import TWEEN from '@tweenjs/tween.js';
 
 export interface TransformTrackClip {
   version: number;
-  media_id: number;
+  media_id: string;
   type: "transform";
-  position: THREE.Vector3[];
-  rotation: THREE.Vector3[];
-  scale: THREE.Vector3[];
+  positions: THREE.Vector3[];
+  rotations: THREE.Vector3[];
+  scales: THREE.Vector3[];
+  length: number;
 }
 
-export class TransformTrackClipClass implements TransformTrackClip {
-    version: number;
-    media_id: number;
-    type: "transform";
-    position: THREE.Vector3[];
-    rotation: THREE.Vector3[];
-    scale: THREE.Vector3[];
-  
-    constructor(version: number, media_id: number, position: THREE.Vector3[], rotation: THREE.Vector3[], scale: THREE.Vector3[]) {
-      this.version = version;
-      this.media_id = media_id;
-      this.type = "transform";
-      this.position = position;
-      this.rotation = rotation;
-      this.scale = scale;
-    }
+export class TransformTrackClip implements TransformTrackClip {
+  version: number;
+  media_id: string;
+  type: "transform";
+  positions: THREE.Vector3[];
+  rotations: THREE.Vector3[];
+  scales: THREE.Vector3[];
+  length: number;
 
-    add_position(position: THREE.Vector3) {
-      this.position.push(position);
-    }
+  current_pos: THREE.Vector3;
 
-    remove_position(position: THREE.Vector3) {
-      this.position = this.position.filter(position => {
-        return !position.equals(position);
-      });
-    }
-  
-    toJSON(): string {
-      return JSON.stringify({
-        version: this.version,
-        media_id: this.media_id,
-        type: this.type,
-        position: this.position,
-        rotation: this.rotation,
-        scale: this.scale,
-      });
+  playing: boolean;
+
+  constructor(version: number, media_id: string, length: number) {
+    this.version = version;
+    this.media_id = media_id;
+    this.type = "transform";
+
+    this.length = length;
+
+    this.positions = [];
+    this.rotations = [];
+    this.scales = [];
+
+    this.playing = false;
+
+    this.current_pos = new THREE.Vector3(0, 0, 0);
+  }
+
+  update(object: THREE.Object3D) {
+    if (this.playing) {
+      this.tweenPositions();
+      object.position.set(this.current_pos.x, this.current_pos.y, this.current_pos.z);
     }
   }
+
+  reset(object: THREE.Object3D) {
+    if (this.positions.length > 0) {
+      let first_pos = this.positions[0];
+      object.position.set(first_pos.x, first_pos.y, first_pos.z);
+    }
+  }
+
+  add_position(position: THREE.Vector3) {
+    this.positions.push(position);
+  }
+
+  remove_position(position: THREE.Vector3) {
+    this.positions = this.positions.filter(positions => {
+      return !position.equals(position);
+    });
+  }
+
+  tweenPositions() {
+    const tweenDuration = this.length / this.positions.length;
+
+    this.positions.reduce((prevPosition, currentPosition, index) => {
+      const tween = new TWEEN.Tween(prevPosition)
+        .to({ x: currentPosition.x, y: currentPosition.y, z: currentPosition.z }, tweenDuration)
+        .onUpdate(() => {
+          this.current_pos = new THREE.Vector3(prevPosition.x, prevPosition.y, prevPosition.z);
+        });
+      return currentPosition;
+    }, this.current_pos.clone());
+  }
+
+  toJSON(): string {
+    return JSON.stringify({
+      version: this.version,
+      media_id: this.media_id,
+      type: this.type,
+      position: this.positions,
+      rotation: this.rotations,
+      scale: this.scales,
+    });
+  }
+}

app/pages/PageEnigma/js/editor.js

@@ -124,7 +124,8 @@ class Editor {
         this.onWindowResize();
         // Creates the main update loop.
         this.renderer.setAnimationLoop(this.update_loop.bind(this));
-        this.audio_engine.loadClip("m_f7jnwt3d1ddchatdk5vaqt0n4mb1hg");
+        
+        
     }
 
     // Configure post processing.

app/pages/PageEnigma/js/transform_engine.ts

@@ -0,0 +1,38 @@
+import { TransformTrackClip } from "../datastructures/clips/transform_track_clip";
+
+
+class TransformEngine {
+    clips: { [key: string]: TransformTrackClip } = {};
+    version: number;
+    length: number;
+
+    constructor(version: number, length: number) {
+        this.version = version;
+        this.length = length;
+        this.clips = {};
+    }
+
+    loadObject(object_uuid: string) {
+        this.clips[object_uuid] = new TransformTrackClip(this.version, object_uuid, length);
+    }
+
+    playClip(object_uuid: string) {
+        const clip = this.clips[object_uuid];
+        if (clip) {
+            clip
+        } else {
+            console.warn(`TransformEngine: TransformClip with id "${object_uuid}" not found.`);
+        }
+    }
+
+    stopClip(object_uuid: string) {
+        const clip = this.clips[object_uuid];
+        if (clip) {
+            // Disable stepping and reset.
+        } else {
+            console.warn(`TransformEngine: TransformClip with id "${object_uuid}" not found.`);
+        }
+    }
+}
+
+export default TransformEngine;

package-lock.json

@@ -22,6 +22,7 @@
         "@remix-run/react": "^2.8.1",
         "@remix-run/router": "^1.15.3",
         "@remix-run/serve": "^2.8.1",
+        "@tweenjs/tween.js": "^18.6.4",
         "ccapture.js": "github:aceslowman/ccapture.js#npm-fix",
         "isbot": "^4.1.0",
         "react": "^18.2.0",
@@ -2254,10 +2255,9 @@
       }
     },
     "node_modules/@tweenjs/tween.js": {
-      "version": "23.1.1",
-      "resolved": "https://registry.npmjs.org/@tweenjs/tween.js/-/tween.js-23.1.1.tgz",
-      "integrity": "sha512-ZpboH7pCPPeyBWKf8c7TJswtCEQObFo3bOBYalm99NzZarATALYCo5OhbCa/n4RQyJyHfhkdx+hNrdL5ByFYDw==",
-      "dev": true
+      "version": "18.6.4",
+      "resolved": "https://registry.npmjs.org/@tweenjs/tween.js/-/tween.js-18.6.4.tgz",
+      "integrity": "sha512-lB9lMjuqjtuJrx7/kOkqQBtllspPIN+96OvTCeJ2j5FEzinoAXTdAMFnDAQT1KVPRlnYfBrqxtqP66vDM40xxQ=="
     },
     "node_modules/@types/acorn": {
       "version": "4.0.6",
@@ -2417,6 +2417,12 @@
         "meshoptimizer": "~0.18.1"
       }
     },
+    "node_modules/@types/three/node_modules/@tweenjs/tween.js": {
+      "version": "23.1.1",
+      "resolved": "https://registry.npmjs.org/@tweenjs/tween.js/-/tween.js-23.1.1.tgz",
+      "integrity": "sha512-ZpboH7pCPPeyBWKf8c7TJswtCEQObFo3bOBYalm99NzZarATALYCo5OhbCa/n4RQyJyHfhkdx+hNrdL5ByFYDw==",
+      "dev": true
+    },
     "node_modules/@types/unist": {
       "version": "2.0.10",
       "resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.10.tgz",

package.json

@@ -28,6 +28,7 @@
     "@remix-run/react": "^2.8.1",
     "@remix-run/router": "^1.15.3",
     "@remix-run/serve": "^2.8.1",
+    "@tweenjs/tween.js": "^18.6.4",
     "ccapture.js": "github:aceslowman/ccapture.js#npm-fix",
     "isbot": "^4.1.0",
     "react": "^18.2.0",