August - December motherlode

.babelrc

@@ -0,0 +1,10 @@
+{
+  "plugins": [
+    ["@babel/plugin-proposal-decorators", { "decoratorsBeforeExport": true }],
+    "@babel/plugin-proposal-class-properties",
+    "@babel/plugin-transform-classes"
+  ],
+  "presets": [
+    "@babel/preset-env"
+  ]
+}

.browserslistrc

@@ -0,0 +1,11 @@
+#Browsers that ccpwgl can run on
+#This list requires further testing...
+chrome >= 55
+firefox >= 52
+safari >= 10.1
+iOS >= 10.3
+ChromeAndroid >= 70
+FirefoxAndroid >= 63
+Samsung >=6.2
+Opera >= 42
+

.eslintrc

@@ -1,13 +1,14 @@
 {
+  "parser": "babel-eslint",
+  "parserOptions": {
+    "sourceType": "module"
+  },
   "env": {
     "browser": true,
     "commonjs": true,
     "es6": true
   },
   "extends": "eslint:recommended",
-  "parserOptions": {
-    "sourceType": "module"
-  },
   "rules": {
     "no-unused-vars": "warn",
     "no-console": "off",

README.md

@@ -35,4 +35,4 @@ Installation
 Build
 -----
 * Run `webpack` to lint, format and build `dist/ccpwgl_int.js` and `dist/ccpwgl_int.min.js` 
-* Run `npm run watcher` to automatically rebuild `dist/ccpwgl_int.js` and `dist/ccpwgl_int.min.js` while developing
+* Run `npm run watch` to automatically rebuild `dist/ccpwgl_int.js` and `dist/ccpwgl_int.min.js` while developing

demos/cubeofdeath.html

@@ -27,7 +27,7 @@
 
             function sofDataReceived(member)
             {
-                return function (data)
+                return function(data)
                 {
                     sofData[member] = [];
                     for (var i in data)
@@ -44,7 +44,7 @@
                         var y = 0;
                         var z = 0;
                         var cubeDimension = Math.ceil(Math.pow(shipCount, 1 / 3));
-                        var radius = ( cubeDimension - 1 ) / 2 * spacing;
+                        var radius = (cubeDimension - 1) / 2 * spacing;
 
                         for (i = 0; i < shipCount; ++i)
                         {
@@ -82,7 +82,7 @@
             if (demos.options.postprocess)
                 ccpwgl.enablePostprocessing(true);
 
-            ccpwgl.onPreRender = function ()
+            ccpwgl.onPreRender = function()
             {
                 document.getElementById('loading').style.display = ccpwgl.isLoading() ? 'block' : 'none';
             };

demos/demos.css

@@ -5,37 +5,40 @@ html {
 }
 
 body {
-    background-color:black;
-    margin:0;
+    background-color: black;
+    margin: 0;
 }
 
 * {
     box-sizing: border-box;
 }
+
 #toolbox {
     position: fixed;
     right: 0;
     top: 0;
     bottom: 0;
     width: 44px;
-    color:#ffffff;
+    color: #ffffff;
     background: #222;
     padding: 2px;
     border-left: solid 1px #3c3c3c;
 }
 
-#toolbox>div {
+#toolbox > div {
     transform: rotate(90deg);
     transform-origin: top left;
     display: inline-block;
     margin-left: 100%;
     margin-bottom: 10px;
 }
-#toolbox>div:after {
+
+#toolbox > div:after {
     content: "";
     float: left;
     margin-top: 100%;
 }
+
 #toolbox button {
     height: 40px;
     border-top: none;
@@ -49,6 +52,7 @@ button, input, select {
     border: 1px solid;
     font-size: 1em;
 }
+
 button.default {
     font-weight: bold;
 }
@@ -60,22 +64,20 @@ button.default {
     top: 0;
     bottom: 0;
     width: 40%;
-    color:#ffffff;
+    color: #ffffff;
     background: linear-gradient(to right, rgba(60, 60, 60, 0.5) 0, rgba(34, 34, 34, 1) 100%);
     margin: 0;
     flex-direction: column;
     border: solid 1px #3c3c3c;
 }
 
-
 @media (max-width: 1000px) {
     .pane {
         width: auto;
         left: 0;
     }
 }
 
-
 .pane.visible {
     display: flex;
 }
@@ -87,16 +89,15 @@ button.default {
     font-weight: bold;
 }
 
-.pane>* {
+.pane > * {
     padding: 7px;
 }
 
-
 #mainCanvas {
     border: none;
-    position:fixed;
-    width:100%;
-    height:100%
+    position: fixed;
+    width: 100%;
+    height: 100%
 }
 
 .flex-vertical {
@@ -114,15 +115,16 @@ button.default {
 }
 
 #loading {
-    display:block;
-    position:fixed;
-    left:0;
-    bottom:0;
+    display: block;
+    position: fixed;
+    left: 0;
+    bottom: 0;
 }
 
 .sof-tree {
     padding-left: 0;
 }
+
 .sof-tree ul {
     padding-left: 12px;
 }
@@ -157,9 +159,11 @@ button.default {
 .sof-tree li {
     list-style: none;
 }
+
 .sof-tree ul {
     display: none;
 }
+
 .sof-tree .node.expanded > ul {
     display: block;
 }
@@ -188,3 +192,101 @@ button.default {
 .sof-tree li.leaf a {
     text-decoration: underline;
 }
+
+#toasts-container {
+    position: fixed;
+    top: 0;
+    left: 40px;
+    width: 650px;
+}
+
+.toasts-toast {
+    position: relative;
+    padding: 25px 35px;
+    margin: 5px;
+    border-radius: 1px;
+    background: #000;
+    cursor: pointer;
+    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
+    animation-duration: .3s;
+    animation-name: Toasts;
+    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+}
+
+.toasts-fadeOut {
+    animation-name: ToastsFadeOut;
+    animation-duration: .3s;
+    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+    animation-fill-mode: forwards;
+}
+
+#toasts-container p,
+#toasts-container h4 {
+    margin: 3px 0 !important;
+}
+
+.toasts-title {
+    font-weight: 900;
+    font-size: 16px;
+    margin-bottom: 10px;
+    color: #FFF;
+}
+
+.toasts-text {
+    font-size: 11px;
+    color: #aaa;
+}
+
+.toasts-icon {
+    position: absolute;
+    top: 5px;
+    left: -40px;
+    width: 64px;
+    height: 64px;
+    border-radius: 100%;
+    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+.toasts-toast a, .toasts-toast a:hover {
+    color: #549EDB !important;
+    text-decoration: none !important;
+}
+
+/** toast types */
+.toasts-success {
+    border-bottom: 2px solid #51C625;
+}
+
+.toasts-warning {
+    border-bottom: 2px solid #DB9215;
+}
+
+.toasts-error {
+    border-bottom: 2px solid #DB2B1D;
+}
+
+.toasts-info {
+    border-bottom: 2px solid #27ABDB;
+}
+
+@keyframes Toasts {
+    from {
+        transform: translate3d(400px, 0, 0);;
+        opacity: 0;
+    }
+    to {
+        transform: translate3d(0, 0, 0);
+        opacity: 1;
+    }
+}
+
+@keyframes ToastsFadeOut {
+    from {
+        transform: translate3d(0, 0, 0);
+        opacity: 1;
+    }
+    to {
+        transform: translate3d(400px, 0, 0);
+        opacity: 0;
+    }
+}