fix: code imporvement an cleanup

donkeyclip · Mar 24, 2021 · a0fbbe4 · a0fbbe4
1 parent 0083731
commit a0fbbe4
Show file tree

Hide file tree

Showing 17 changed files with 48,184 additions and 16,352 deletions.
diff --git a/demo/bundle.js b/demo/bundle.js
diff --git a/demo/index.js b/demo/index.js
@@ -1,77 +1,48 @@
-const MotorCortex = require("@kissmybutton/motorcortex");
-const Player = require("@kissmybutton/motorcortex-player");
-const textfxs = require("../src/index");
-const Clip = MotorCortex.loadPlugin(textfxs);
+import { loadPlugin, HTMLClip } from "@kissmybutton/motorcortex";
+import Player from "@kissmybutton/motorcortex-player";
+import textfxs from "../src/index";
 
-const css = `
-body { 
-  background-color : white; 
-}              
-.container,.container2,.container3,.container4 {
-  width: 1728px;
-  height: 300px;
-  overflow: hidden;
-  display: flex;
-  justify-content: center;
-}
-.wrapper{
-  display: flex;
-  justify-content: center;
-  flex-direction: column;
-  background: gainsboro;
-}
-  `;
-const html = ` 
-<div class="wrapper">
-  <div class="container container1">
-  </div>
-  <div class="container container2">
-  </div>
-  <div class="container container3">
-  </div>
-  <div class="container container4">
-  </div>
-</div> 
-  `;
+const Clip = loadPlugin(textfxs);
 
-const host = document.getElementById("clip");
-
-const containerParams = {
-  width: "100%",
-  height: "100%"
-};
-
-const clip = new MotorCortex.HTMLClip({
-  css,
-  html,
-  host,
-  // fonts: [
-  //   {
-  //     type: `google-font`,
-  //     src: `https://fonts.googleapis.com/css2?family=Pacifico&display=swap`
-  //   },
-  //   // {
-  //   //   type: `google-font`,
-  //   //   src: `https://fonts.googleapis.com/css2?family=Rubik+Mono+One&display=swap`
-  //   // },
-  //   // {
-  //   //   type: `google-font`,
-  //   //   src: `https://fonts.googleapis.com/css2?family=Rubik+Mono+One&display=swap`
-  //   // },
-  //   {
-  //     type: "google-font",
-  //     src:
-  //       "https://fonts.googleapis.com/css2?family=Commissioner:wght@100;200;300;400;500;600;700;800;900&display=swap"
-  //   }
-  // ],
-  containerParams,
+const clip = new HTMLClip({
+  css: `
+    body { 
+      background-color : white; 
+    }              
+    .container {
+      width: 1900px;
+      height: 300px;
+      overflow: hidden;
+      display: flex;
+      justify-content: center;
+    }
+    .wrapper{
+      display: flex;
+      justify-content: center;
+      flex-direction: column;
+      background: gainsboro;
+    }
+  `,
+  html: ` 
+    <div class="wrapper">
+      <div class="container container1"></div>
+      <div class="container container2"></div>
+      <div class="container container3"></div>
+      <div class="container container4"></div>
+    </div> 
+  `,
+  host: document.getElementById("clip"),
+  containerParams: {
+    width: "1900px",
+    height: "1200px"
+  },
   id: "root"
 });
 
 const SvgExplosion = new Clip.SvgExplosion(
   {
     text: "SvgExplosion",
-    width: 1728,
+    width: 1920,
     height: 300,
     background: "#22292C",
     colors: [
@@ -84,70 +55,67 @@ const SvgExplosion = new Clip.SvgExplosion(
       "#70B984"
     ],
     fontFamily: "Rubik Mono One",
-    fontWeight:400,
-    speed: 5
+    fontWeight: 400
   },
   {
     selector: ".container1"
   }
 );
 
-const SvgLines = new Clip.SvgLines(
+const Shadow = new Clip.Shadow(
   {
-    text: "SvgLines",
-    width: 1728,
+    text: "Shadow",
+    width: 1920,
     height: 300,
-    background: "#22292C",
-    colors: ["#64d3ce", "#2a92ce82", "#ff003c", "#2a92ce2e", "#2a92ce1c"],
-    strokeWidth: 3,
-    fontSize: 250,
-    fontFamily: "Rubik Mono One",
-    speed: 0.75
+    background: "#d52e3f",
+    colors: ["#e942f5", "#efa032", "#46b59b", "#017e7f", "#052939", "#c11a2b"],
+    fontSize: 130,
+    textColor: "#fcedd8",
+    fontFamily: "Arial",
+    reverse: true
   },
   {
-    selector: ".container3"
+    selector: ".container2"
   }
 );
 
-const Shadow = new Clip.Shadow(
+const SvgLines = new Clip.SvgLines(
   {
-    text: "Shadow",
-    width: 1728,
+    text: "SvgLines",
+    width: 1920,
     height: 300,
-    background: "#d52e3f",
-    colors: ["#e942f5", "#efa032", "#46b59b", "#017e7f", "#052939", "#c11a2b"],
+    background: "#22292C",
+    colors: ["#64d3ce", "#2a92ce82", "#ff003c", "#2a92ce2e", "#2a92ce1c"],
+    strokeWidth: 3,
     fontSize: 250,
-    speed: 0.75,
-    textColor: "#fcedd8",
-    fontFamily: "Pacifico",
-    reverce: true
+    verticalAlign: "80%",
+    fontFamily: "Rubik Mono One"
   },
   {
-    selector: ".container2"
+    selector: ".container3"
   }
 );
 
 const FontWeight = new Clip.FontWeight(
   {
-    width: 1728,
+    width: 1920,
     height: 300,
     text: "FontWeight Animation",
-    color: "#ff0000",
-    rows: 10,
+    textColor: "#ff0000",
+    repeats: 70,
     fontSize: 20,
     fontFamily: "Commissioner",
-    repeats: 8,
-    fontWeightList:[100,200,300,400,500,600,700,800,900]
+    fontWeightList: [100, 200, 300, 400, 500, 600, 700, 800, 900],
+    rotate: 90
   },
   {
     selector: ".container4"
   }
 );
 
+clip.addIncident(SvgExplosion, 0);
 clip.addIncident(Shadow, 0);
 clip.addIncident(SvgLines, 0);
-clip.addIncident(SvgExplosion, 0);
 clip.addIncident(FontWeight, 0);
-window.clip = clip
 
-new Player({ clip, timeFormat: "ms" });
+new Player({ clip, scaleToFit: true, pointerEvents: true });