just need the editor, now

.gitignore

@@ -50,3 +50,4 @@ node_modules/
 test/story-formats/
 build.bat
 test/tweego.exe
+test/

gulpfile.js

@@ -28,80 +28,90 @@ function retrieve (dir, type, obj) {
 
 function getImageAssets () {
     var imgDir = './dist/cac/',
+        pDir = './cac/',
         ext = '.png',
         imgs = {
 
             accessories : {
                 components : retrieve(imgDir + 'accessories/'),
                 required : false,
-                masterDir : imgDir + 'accessories/',
-                uni : imgDir + 'accessories/',
-                fem : imgDir + 'accessories/' + 'f/',
-                mal : imgDir + 'accessories/' + 'm/'
+                dir : {
+                    u : pDir + 'accessories/',
+                    f : pDir + 'accessories/f/',
+                    m : pDir + 'accessories/m/'
+                }
             },
             base : {
                 components : retrieve(imgDir + 'base/'),
                 required : true,
-                masterDir : imgDir + 'base/',
-                uni : imgDir + 'base/',
-                fem : imgDir + 'base/' + 'f/',
-                mal : imgDir + 'base/' + 'm/'
+                dir : {
+                    u : pDir + 'base/',
+                    f : pDir + 'base/f/',
+                    m : pDir + 'base/m/'
+                }
             },
             beard : {
                 components : retrieve(imgDir + 'beard/'),
                 required : false,
-                masterDir : imgDir + 'beard/',
-                uni : imgDir + 'beard/',
-                fem : imgDir + 'beard/' + 'f/',
-                mal : imgDir + 'beard/' + 'm/'
+                dir : {
+                    u : pDir + 'beard/',
+                    f : pDir + 'beard/f/',
+                    m : pDir + 'beard/m/'
+                }
             },
             eyes : {
                 components : retrieve(imgDir + 'eyes/'),
                 required : true,
-                masterDir : imgDir + 'eyes/',
-                uni : imgDir + 'eyes/',
-                fem : imgDir + 'eyes/' + 'f/',
-                mal : imgDir + 'eyes/' + 'm/'
+                dir : {
+                    u : pDir + 'eyes/',
+                    f : pDir + 'eyes/f/',
+                    m : pDir + 'eyes/m/'
+                }
             },
             features : {
                 components : retrieve(imgDir + 'features/'),
                 required : false,
-                masterDir : imgDir + 'features/',
-                uni : imgDir + 'features/',
-                fem : imgDir + 'features/' + 'f/',
-                mal : imgDir + 'features/' + 'm/'
+                dir : {
+                    u : pDir + 'features/',
+                    f : pDir + 'features/f/',
+                    m : pDir + 'features/m/'
+                }
             },
             glasses : {
                 components : retrieve(imgDir + 'glasses/'),
                 required : false,
-                masterDir : imgDir + 'glasses/',
-                uni : imgDir + 'glasses/',
-                fem : imgDir + 'glasses/' + 'f/',
-                mal : imgDir + 'glasses/' + 'm/'
+                dir : {
+                    u : pDir + 'glasses/',
+                    f : pDir + 'glasses/f/',
+                    m : pDir + 'glasses/m/'
+                }
             },
             hair : {
                 components : retrieve(imgDir + 'hair/'),
                 required : false,
-                masterDir : imgDir + 'hair/',
-                uni : imgDir + 'hair/',
-                fem : imgDir + 'hair/' + 'f/',
-                mal : imgDir + 'hair/' + 'm/'
+                dir : {
+                    u : pDir + 'hair/',
+                    f : pDir + 'hair/f/',
+                    m : pDir + 'hair/m/'
+                }
             },
             mouths : {
                 components : retrieve(imgDir + 'mouths/'),
                 required : true,
-                masterDir : imgDir + 'mouths/',
-                uni : imgDir + 'mouths/',
-                fem : imgDir + 'mouths/' + 'f/',
-                mal : imgDir + 'mouths/' + 'm/'
+                dir : {
+                    u : pDir + 'mouths/',
+                    f : pDir + 'mouths/f/',
+                    m : pDir + 'mouths/m/'
+                }
             },
             neck : {
                 components : retrieve(imgDir + 'neck/'),
                 required : false,
-                masterDir : imgDir + 'neck/',
-                uni : imgDir + 'neck/',
-                fem : imgDir + 'neck/' + 'f/',
-                mal : imgDir + 'neck/' + 'm/'
+                dir : {
+                    u : pDir + 'neck/',
+                    f : pDir + 'neck/f/',
+                    m : pDir + 'neck/m/'
+                }
             }
         };
 
@@ -118,4 +128,46 @@ function getImages () {
         .pipe(gulp.dest('./src/js/'));
 }
 
-gulp.task('img', getImages);
+gulp.task('img', getImages);
+
+// build source
+
+var jsFiles = 'src/js/**/*.js',
+    jsDest = 'dist',
+    cssFiles = 'src/css/**/*.css',
+    cssDest = 'dist';
+
+function scripts () {
+    return gulp.src(jsFiles)
+        .pipe(concat('noble.min.js'))
+        .pipe(gulp.dest(jsDest))
+        .pipe(rename('noble.min.js'))
+        .pipe(uglify().on('error', function(e){
+            console.log(e);
+         }))
+        .pipe(gulp.dest(jsDest));
+}
+function styles () {
+    return gulp.src(cssFiles)
+        .pipe(concat('noble.min.css'))
+        .pipe(gulp.dest(cssDest))
+        .pipe(rename('noble.min.css'))
+        .pipe(autopre())
+        .pipe(minify())
+        .pipe(gulp.dest(cssDest));
+}
+
+gulp.task('build', function () {
+    scripts();
+    styles();
+});
+
+// lint task
+
+function lint () {
+    return gulp.src('src/js/**/*.js')
+        .pipe(jshint())
+        .pipe(jshint.reporter('default', { beep : true }));
+}
+
+gulp.task('lint', lint);

src/component-loader.js

@@ -4,4 +4,22 @@
 
     window.Noble.components = /* [target] */;
 
+    if (Noble.config && Noble.config.cache) {
+        var allImages = (function () {
+            var comps = Object.keys(Noble.components),
+                ret = [];
+            comps.forEach( function (comp) {
+                var obj = Noble.compontents[comp].components;
+                ret.concat(obj.u, obj.f, obj.m);
+            });
+            return ret;
+        });
+
+        var lock = LoadScreen.lock();
+
+        Noble.cache(allImages, null, function () {
+            LoadScreen.unlock(lock);
+        });
+    }
+
 }());

src/css/basic.css

@@ -0,0 +1,11 @@
+div.noble-wrapper {
+    position: relative;
+    width: 400px;
+    height: 400px;
+    margin: 1em;
+}
+
+div.noble-wrapper div.layer {
+    position: absolute;
+    width: 100%; height: 100%;
+}

src/css/editor.css

@@ -0,0 +1,47 @@
+div#editor-container {
+    height: 400px;
+}
+
+div#editor-container #edit-window {
+    height: 400px;
+    width: 400px;
+    float: left;
+}
+
+div#editor-container #edit-options {
+    height: 400px;
+    padding: 1em;
+}
+
+div#editor-container div.tab-container {
+    overflow: hidden;
+    border: 1px solid #ccc;
+    background-color: #555;
+}
+
+div#editor-container #tab-buttons {
+    background-color: #f5f5f5;
+    float: left;
+    border: none;
+    outline: none;
+    cursor: pointer;
+    padding: 1em;
+    transition: 0.3s;
+}
+
+div#editor-container #tab-buttons:hover {
+    background-color: #ddd;
+    color: #111;
+}
+
+div#editor-container #tab-buttons.active {
+    background-color: #ccc;
+    color: #111;
+}
+
+div#editor-container div.tab-content {
+    display: none;
+    padding: 1em;
+    border: 1px solid #ccc;
+    border-top: none;
+}

src/css/options.css

@@ -0,0 +1,76 @@
+/* outside styling */
+div.noble-wrapper.flat {
+    border: none;
+}
+div.noble-wrapper.material-light {
+    box-shadow: 0px 0px 2px #888;
+}
+div.noble-wrapper.material-dark {
+    box-shadow: 0px 0px 2px #000;
+}
+div.noble-wrapper.border-thin-light {
+    border: 2px solid #111;
+}
+div.noble-wrapper.border-thin-dark {
+    border: 2px solid #eee;
+}
+div.noble-wrapper.border-thick-light {
+    border: 6px solid #111;
+}
+div.noble-wrapper.border-thick-dark {
+    border: 6px solid #eee;
+}
+div.noble-wrapper.border-outset-light {
+    border: 6px outset #555;
+}
+div.noble-wrapper.border-outset-dark {
+    border: 6px outset #ccc;
+}
+div.noble-wrapper.border-inset-light {
+    border: 6px inset #555;
+}
+div.noble-wrapper.border-inset-dark {
+    border: 6px inset #ccc;
+}
+
+/* sizes (absolute) */
+div.noble-wrapper.tiny {
+    width: 64px; height: 64px;
+}
+div.noble-wrapper.small {
+    width: 128px; height: 128px;
+}
+div.noble-wrapper.medium {
+    width: 256px; height: 256px;
+}
+div.noble-wrapper.large {
+    width: 320px; height: 320px;
+}
+div.noble-wrapper.max-safe {
+    width: 400px; height: 400px;
+}
+div.noble-wrapper.oversized {
+    width: 600px; height: 600px;
+}
+
+/* sizes (relative) */
+div.noble-wrapper.relative {
+    max-width: 400px; 
+    max-height: 400px;
+}
+div.noble-wrapper.relative.small-em {
+    max-width: 4rem; 
+    max-height: 4rem;
+}
+div.noble-wrapper.relative.medium-em {
+    max-width: 8rem; 
+    max-height: 8rem;
+}
+div.noble-wrapper.relative.large-em {
+    max-width: 12rem; 
+    max-height: 12rem;
+}
+div.noble-wrapper.relative.very-large-em {
+    max-width: 16rem; 
+    max-height: 16rem;
+}