first commit

.babelrc

@@ -0,0 +1,11 @@
+{
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "targets": "defaults, not ie 11",
+        "corejs": "3.21"
+      }
+    ]
+  ]
+}

.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,74 @@
+# Node modules
+node_modules
+
+bundle.js
+bundle.js.LICENSE.txt
+server/bundle.js
+server/bundle.js.LICENSE.txt
+
+
+# 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,33 @@
+# 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 "server" 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
+
+## 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,117 @@
+#root {
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  align-items: center;
+  height: 100%;
+  background-color: rgb(36, 34, 34);
+  color: white;
+  font-family: Roboto,sans-serif;
+}
+
+.content-wrapper{
+  position: relative;
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+}
+
+.width-container{
+  position: relative;
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  gap: 2px;
+}
+
+.box-container{
+  position: relative;
+  width: 360px;
+  height: 250px;
+}
+
+.box{
+  width: 360px;
+  height: 250px;
+  position: absolute;
+}
+
+
+.box:nth-child(1){
+  background-color: #E95F74;
+}
+.box:nth-child(2){
+  background-color: #2F4858;
+}
+.box:nth-child(3){
+  background-color: #945B96;
+}
+
+.box-text{
+  opacity: 0;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%,-50%);
+  white-space: nowrap;
+}
+
+.initial-position{
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%,-50%);
+  opacity: 0;
+}
+
+.line-container{
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  height: 300px;
+  z-index: 1;
+}
+
+.line{
+  width: 2px;
+  height: 20px;
+  background-color: aliceblue;
+}
+
+.clip-container{
+  position: relative;
+  width: 360px;
+  height: 250px;
+  background-color: rgba(0, 0, 0, 0.33);
+}
+
+svg{
+  width: 25px;
+  height: 25px;
+  position: absolute;
+  bottom: 10px;
+  left: 10px;
+}
+
+svg path{
+  fill: rgba(255, 255, 255, 0.89);
+}
+
+.audiobar{
+  width: 340px;
+  height: 5px;
+  position: absolute;
+  left: 10px;
+  bottom: 40px;
+  background-color: rgba(255, 255, 255, 0.89);;
+}
+
+.width-line{
+ width: 95px;
+ height: 4px;
+ background-color: white;
+}

clip/clip.html

@@ -0,0 +1,47 @@
+<div id="root">
+    <div class="content-wrapper">
+        <div class="box-container">
+            <div class="box">
+                <div class="box-text">left: 0px</div>
+            </div>
+            <div class="box">
+                <div class="box-text">left: -260px</div>
+            </div>
+            <div class="box">
+                <div class="initial-position">left: -780px</div>
+                <div class="box-text">left: -520px</div>
+            </div>
+        </div>
+        <div class="line-container">
+            <div class="line"></div>
+            <div class="line"></div>
+            <div class="line"></div>
+            <div class="line"></div>
+            <div class="line"></div>
+            <div class="line"></div>
+            <div class="line"></div>
+            <div class="line"></div>
+            <div class="line"></div>
+            <div class="line"></div>
+        </div>
+        <div class="clip-container">
+            <div class="audiobar"></div>
+            <svg enable-background="new 0 0 139 139" height="139px" id="Play" version="1.1" viewBox="0 0 139 139" width="139px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M117.037,61.441L36.333,14.846c-2.467-1.424-5.502-1.424-7.972,0c-2.463,1.423-3.982,4.056-3.982,6.903v93.188  c0,2.848,1.522,5.479,3.982,6.9c1.236,0.713,2.61,1.067,3.986,1.067c1.374,0,2.751-0.354,3.983-1.067l80.704-46.594  c2.466-1.422,3.984-4.054,3.984-6.9C121.023,65.497,119.502,62.866,117.037,61.441z"/></svg>
+        </div>
+    </div>
+    <div class="width-container">
+        <div class="text">-780</div>
+        <div class="width-line"></div>
+        <div class="text">-520</div>
+        <div class="width-line"></div>
+        <div class="text">-260</div>
+        <div class="width-line"></div>
+        <div class="text">0</div>
+        <div class="width-line"></div>
+        <div class="text">260</div>
+        <div class="width-line"></div>
+        <div class="text">520</div>
+        <div class="width-line"></div>
+        <div class="text">780</div>
+    </div>
+</div>