diff --git a/.babelrc b/.babelrc new file mode 100644 index 0000000..6b6f592 --- /dev/null +++ b/.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" + ] +} \ No newline at end of file diff --git a/.browserslistrc b/.browserslistrc new file mode 100644 index 0000000..6413510 --- /dev/null +++ b/.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 + diff --git a/.eslintrc b/.eslintrc index a748f80..cd8b8ae 100644 --- a/.eslintrc +++ b/.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", diff --git a/README.md b/README.md index c954f3e..3afe295 100644 --- a/README.md +++ b/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 \ No newline at end of file +* Run `npm run watch` to automatically rebuild `dist/ccpwgl_int.js` and `dist/ccpwgl_int.min.js` while developing \ No newline at end of file diff --git a/demos/cubeofdeath.html b/demos/cubeofdeath.html index c5c27e1..578d750 100644 --- a/demos/cubeofdeath.html +++ b/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'; }; diff --git a/demos/demos.css b/demos/demos.css index a54b34a..49bd89b 100644 --- a/demos/demos.css +++ b/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,14 +64,13 @@ 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; @@ -75,7 +78,6 @@ button.default { } } - .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; + } +} \ No newline at end of file diff --git a/demos/demos.js b/demos/demos.js index b2f6dd6..b5627d7 100644 --- a/demos/demos.js +++ b/demos/demos.js @@ -1,66 +1,101 @@ - -var demos = new function () { +var demos = new function() +{ var self = this; this.options = {}; - try { + try + { this.options = JSON.parse(localStorage.ccpwgloptions); } - catch (e) { + catch (e) + { } - function decodeUrlOptions() { + function decodeUrlOptions() + { var match, - pl = /\+/g, // Regex for replacing addition symbol with a space + pl = /\+/g, // Regex for replacing addition symbol with a space search = /([^&=]+)=?([^&]*)/g, - decode = function (s) { return decodeURIComponent(s.replace(pl, " ")); }, - query = window.location.search.substring(1); + decode = function(s) { return decodeURIComponent(s.replace(pl, " ")); }, + query = window.location.search.substring(1); self.options = {}; - while (match = search.exec(query)) { + while (match = search.exec(query)) + { self.options[decode(match[1])] = decode(match[2]); } } - function saveOptions() { + function saveOptions() + { localStorage.ccpwgloptions = JSON.stringify(self.options); } - function onPopState(state) { - if (state) { + function onPopState(state) + { + if (state) + { self.options = state.options || {}; } decodeUrlOptions(); saveOptions(); } - $(window).bind('popstate', function (event) { + $(window).bind('popstate', function(event) + { onPopState(event.originalEvent.state); }); onPopState(history.state); - if ('resUrl' in this.options) { + if ('resUrl' in this.options) + { ccpwgl.setResourcePath('res', this.options.resUrl); //this.options.resUrl = 'http://developers.eveonline.com/ccpwgl/assetpath/860161/';// window.location.protocol + '//' + window.location.host + ':8880/'; } - window.addEventListener('load', function () { + window.addEventListener('load', function() + { var settings = [ - {label: 'Shader Quality', member: 'shaderQuality', options: [{label: 'High', value: ccpwgl.ShaderQuality.HIGH}, {label: 'Low', value: ccpwgl.ShaderQuality.LOW}]}, - {label: 'Texture Quality', member: 'textureQuality', options: [{label: 'High', value: ccpwgl.TextureQuality.HIGH}, {label: 'Medium', value: ccpwgl.TextureQuality.MEDIUM}, {label: 'Low', value: ccpwgl.TextureQuality.LOW}]}, - {label: 'Texture Filtering', member: 'anisotropicFilter', options: [{label: 'Anisotropic', value: '1'}, {label: 'Linear', value: ''}]}, - {label: 'Post-processing', member: 'postprocess', options: [{label: 'On', value: '1'}, {label: 'Off', value: ''}]} + { + label: 'Shader Quality', + member: 'shaderQuality', + options: [{label: 'High', value: ccpwgl.ShaderQuality.HIGH}, { + label: 'Low', + value: ccpwgl.ShaderQuality.LOW + }] + }, + { + label: 'Texture Quality', + member: 'textureQuality', + options: [{label: 'High', value: ccpwgl.TextureQuality.HIGH}, { + label: 'Medium', + value: ccpwgl.TextureQuality.MEDIUM + }, {label: 'Low', value: ccpwgl.TextureQuality.LOW}] + }, + { + label: 'Texture Filtering', + member: 'anisotropicFilter', + options: [{label: 'Anisotropic', value: '1'}, {label: 'Linear', value: ''}] + }, + { + label: 'Post-processing', + member: 'postprocess', + options: [{label: 'On', value: '1'}, {label: 'Off', value: ''}] + } ]; var $toolbox = $('#toolbox'); - if (!$toolbox.length) { + if (!$toolbox.length) + { $toolbox = $('
').appendTo($(document.body)); } $toolbox.append($('
')); var $pane = $('
Settings
'); - for (var i = 0; i < settings.length; ++i) { + for (var i = 0; i < settings.length; ++i) + { var $select = $('