feat: initialial commit

.babelrc

@@ -0,0 +1,25 @@
+{
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "targets": "> 0.25%, not dead",
+        "useBuiltIns": "usage",
+        "corejs": "3.18",
+      }
+    ]
+  ],
+  "exclude": [
+    "node_modules/**"
+  ],
+  "plugins": [
+    "@babel/plugin-proposal-class-properties",
+    "@babel/plugin-syntax-jsx",
+    [
+      "@babel/plugin-transform-react-jsx",
+      {
+        "pragma": "MotorCortex.utils.createDOMElement"
+      }
+    ]
+  ]
+}

.browserlistrc

@@ -0,0 +1,6 @@
+{
+"browserslist": [
+    ">0.2%",
+    "not ie <= 11"
+  ]
+}

.eslintignore

@@ -0,0 +1 @@
+bundle.js

.eslintrc

@@ -0,0 +1,60 @@
+{
+  "parser": "@babel/eslint-parser",
+  "extends": [
+    "eslint:recommended",
+    "prettier"
+  ],
+  "plugins": [
+    "babel",
+    "prettier"
+  ],
+  "env": {
+    "browser": true,
+    "node": true
+  },
+  "globals": {
+    "document": false,
+    "escape": false,
+    "navigator": false,
+    "unescape": false,
+    "window": false,
+    "describe": true,
+    "before": true,
+    "it": true,
+    "expect": true,
+    "sinon": true
+  },
+  "rules": {
+    "prettier/prettier": [
+      "error"
+    ],
+    "linebreak-style": [
+      "error",
+      "unix"
+    ],
+    "semi": [
+      "error",
+      "always"
+    ],
+    "no-console": [
+      "error",
+      {
+        "allow": [
+          "warn",
+          "error",
+          "info"
+        ]
+      }
+    ],
+    "prefer-promise-reject-errors": "error",
+    "prefer-const": [
+      "error",
+      {
+        "destructuring": "any",
+        "ignoreReadBeforeAssign": false
+      }
+    ],
+    "no-var": "error",
+    "no-unused-vars": "error"
+  }
+}

.gitignore

@@ -0,0 +1,73 @@
+# Node modules
+node_modules
+demo/bundle.js
+demo/bundle.js.LICENSE.txt
+
+#Package JSON Lock
+package-lock.json
+
+# Coverage
+coverage
+
+# Output folders
+build
+compiled
+.nyc_output
+
+# Cachses
+.awcache
+.rpt2_cache
+
+# Logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+# VSCode
+.vscode
+
+# Cloud9
+.c9revisions
+.c9
+
+# Intelij
+.idea
+cmake-build-*/
+
+# Sublime text
+*.iws
+*.tmlanguage.cache
+*.tmPreferences.cache
+*.stTheme.cache
+*.sublime-workspace
+
+# OSX
+.DS_Store
+.AppleDouble
+.LSOverride
+._*
+.DocumentRevisions-V100
+.fseventsd
+.Spotlight-V100
+.TemporaryItems
+.Trashes
+.VolumeIcon.icns
+.com.apple.timemachine.donotpresent
+.AppleDB
+.AppleDesktop
+Network Trash Folder
+Temporary Items
+.apdisk
+
+# Windows
+*.lnk
+Thumbs.db
+ehthumbs.db
+ehthumbs_vista.db
+$RECYCLE.BIN/
+[Dd]esktop.ini
+*.cab
+*.msi
+*.msix
+*.msm
+*.msp

README.md

@@ -0,0 +1,34 @@
+# motorcortex-clip-starter
+
+## Purpose
+
+This repository is a starter boilerplate for creating MotorCortex Clips with DCode. Do not use this repo directly. Instead, use it from the **[Donkeyclip CLI](https://github.com/donkeyclip/cli)**
+
+## Structure and Contents
+
+It includes:
+
+- a pre-configured webpack so you don't have to care about setting up your project
+- pre-configured eslint and babel
+- a "clip" folder in order for you to use to define your Clip and Incidents. The folder
+  contains the `clip.js` file which is just a starting point for your Clip.
+- a "demo" folder that is there just for the needs of viewing, debugging and creating
+  your Clip through DCode.
+
+## How to use
+
+Once you've created your new Clip you have the ability to publish it through the [donkeyclip](https://donkeyclip.com) page. You can then embed your clip in any site you want!.
+
+## Commands
+
+- `npm run build`: builds the demo
+- `npm start`: builds and starts the demo
+- `npm render`: render the demo to mp4 video see [@donkeyclip/video-renderer](https://github.com/donkeyclip/video-renderer) from more
+
+## Have fun!!!
+
+## License
+
+[MIT License](https://opensource.org/licenses/MIT)
+
+[<img src="https://presskit.donkeyclip.com/logos/donkey%20clip%20logo.svg" width=250></img>](https://donkeyclip.com)

clip/clip.css

@@ -0,0 +1,12 @@
+* {
+  --color: {{ initParams.color }};
+}
+
+.container {
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  align-items: center;
+  height: 100%;
+  color: var(--color);
+}

clip/clip.html

@@ -0,0 +1 @@
+<div class="container"></div>

clip/clip.js

@@ -0,0 +1,110 @@
+import { HTMLClip, loadPlugin } from "@donkeyclip/motorcortex";
+import html from "./clip.html";
+import css from "!!raw-loader!./clip.css";
+import { initParamsValidationRules, initParams } from "./initParams";
+import threejsDefinition from "@donkeyclip/motorcortex-threejs";
+const threejs = loadPlugin(threejsDefinition);
+import {
+  city,
+  cityBurn,
+  scrow,
+  scrowWalk,
+  manWalk1,
+  cameraAnimation1,
+} from "./incidents";
+
+export const clip = new HTMLClip({
+  html,
+  css,
+  host: document.getElementById("clip"),
+  initParamsValidationRules,
+  initParams: initParams[1].value,
+  containerParams: {
+    width: "1920px",
+    height: "1080px",
+  },
+});
+
+const threeClip = new threejs.Clip(
+  {
+    renderers: {
+      parameters: [],
+      settings: {
+        setClearColor: ["#010101"],
+      },
+    },
+    scenes: {
+      fog: ["#010101", 0, 100],
+    },
+    lights: [
+      {
+        type: "HemisphereLight",
+        parameters: ["#fff", "#fff", 0.1],
+      },
+    ],
+    cameras: [
+      {
+        id: "camera_1",
+        type: "PerspectiveCamera",
+        parameters: [45, 1920 / 1080, 0.01, 1000],
+        settings: {
+          position: { x: 85, y: 10, z: 2 },
+          far: 10000000,
+          near: 1,
+        },
+      },
+    ],
+    entities: [
+      city,
+      scrow,
+      // {
+      //   geometry: { type: "PlaneBufferGeometry", parameters: [200, 200, 1] },
+      //   material: {
+      //     type: "MeshBasicMaterial",
+      //     parameters: [
+      //       {
+      //         color: "#010101",
+      //         textureMap: "./assets/snow-texture.jpg",
+      //       },
+      //     ],
+      //   },
+      //   settings: {
+      //     position: { set: [0, 0, 0] },
+      //     rotation: { set: [-Math.PI / 2, 0, 0] },
+      //   },
+      // },
+      {
+        geometry: { type: "SphereBufferGeometry", parameters: [200, 32, 16] },
+        material: {
+          type: "MeshBasicMaterial",
+          parameters: [
+            {
+              color: "#fff",
+              textureMap: "./assets/skybox.jpg",
+              side: "DoubleSide",
+            },
+          ],
+        },
+        settings: {
+          position: { set: [0, 0, 0] },
+          rotation: { set: [0, -Math.PI / 2, 0] },
+        },
+      },
+    ],
+    controls: { maxDistance: 50000, enable: true, enableEvents: true },
+  },
+  {
+    selector: ".container",
+    containerParams: {
+      width: "1920px",
+      height: "1080px",
+    },
+  }
+);
+
+threeClip.addIncident(scrowWalk, 0);
+threeClip.addIncident(manWalk1, 0);
+threeClip.addIncident(cityBurn, 0);
+threeClip.addIncident(cameraAnimation1, 0);
+clip.addIncident(threeClip, 0);
+window.clip = threeClip;