diff --git a/.gitignore b/.gitignore index 60eb699..5f6c5b0 100644 --- a/.gitignore +++ b/.gitignore @@ -22,4 +22,4 @@ /local # Idea project stuff -.idea \ No newline at end of file +.idea diff --git a/.nvmrc b/.nvmrc new file mode 100644 index 0000000..6c5e45b --- /dev/null +++ b/.nvmrc @@ -0,0 +1 @@ +lts/gallium diff --git a/README.md b/README.md index f8bbc63..eb11cc5 100644 --- a/README.md +++ b/README.md @@ -5,7 +5,7 @@ Roofpig is an animated, programmable and interactive Rubik's Cube for the modern It should work on most [any modern browser](http://caniuse.com/canvas). ## 1. Usage -All you need is one file and a web server. Put [`roofpig_and_three.min.js`](https://raw.githubusercontent.com/larspetrus/Roofpig/master/roofpig_and_three.min.js) on your server. Include it, and jQuery 3.1.1 in your HTML: +All you need is one file and a web server. Put [`roofpig_and_three.min.js`](https://raw.githubusercontent.com/larspetrus/Roofpig/v1.5/roofpig_and_three.min.js) on your server. Include it, and jQuery 3.1.1 in your HTML: ```html @@ -26,7 +26,7 @@ CubeAnimation.create_in_dom('#show-alg', "alg=R U R' U R U2 R'", "class='my-roof ## 2. data-config -In `data-config` you set values to properties. The format is `property1=value|prop2=other value | prop99=you get the idea`. +In `data-config` you set values to properties. The format is `property1=value|prop2=other value|prop99=you get the idea`. This is a fully configured example cube: @@ -140,22 +140,27 @@ To share between pages, you can for example put **"ROOFPIG_CONF_"**'s in a commo ### 3. Working with the code 1. Install Node and NPM - https://docs.npmjs.com/getting-started/installing-node -2. Clone/download this Github repository, and `cd` to the resulting directory -3. `npm install` -4. `sudo npm install -g gulp` +2. Install nvm - https://github.com/nvm-sh/nvm +3. Clone/download this Github repository, and `cd` to the resulting directory +4. `nvm install lts/gallium` +5. `nvm use` +6. `npm install` +7. `sudo npm install -g gulp` Now the gulp task below should work. Let me know if it doesn't. -#### Building it +#### Running the prebuilt release version + +The `demo.html` in the root directory shows multiple examples using the current release version. -`gulp build` on the command line creates a `roofpig_and_three.min.js` file in `local/build/` +#### Building it -`misc/demo_local.html` is a demo page using the built file. `misc/demo.html` is the same demo using the official release file. +Running `gulp build` or simply `gulp` on the command line creates a `roofpig_and_three.min.js` and a `local_demo.html` file in `local/build/`. +#### Testing it -#### Testing +Running `gulp test` creates everything needed for testing in `local/test/`. Open `mocha.html` in a browser to run the tests suite. -`gulp test` makes the `rptest.html` file for running the tests in a browser. `open rptest.html` is one way. ## 4. What's a Roofpig anyway? [**"Most unexpected!"**](https://www.youtube.com/watch?v=PtO0diaiZEE&t=14m57s) diff --git a/misc/demo.html b/demo.html similarity index 95% rename from misc/demo.html rename to demo.html index d833af6..0ede206 100644 --- a/misc/demo.html +++ b/demo.html @@ -44,7 +44,7 @@
diff --git a/gulpfile.js b/gulpfile.js index be4ee57..fb874a2 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -9,42 +9,48 @@ var uglify = require('gulp-uglify'); var dateFormat = require('dateformat'); var del = require('del'); -var filenames = require('gulp-filenames'); var replace = require('gulp-replace'); +// ------------- BUILD ----- + var build_dir = 'local/build/'; -var rp_js_file = 'roofpig.js'; +var roofpig_file = 'roofpig.js'; var extras_file = '3extras.js'; var release_file = 'roofpig_and_three.min.js'; -// ------------- BUILD ----- - -gulp.task('clean-build', function() { +function cleanBuild() { return del(build_dir +'**/*'); -}); +} -gulp.task('build-rp', ['clean-build'], function() { +function roofpig() { return gulp.src('src/**/*.coffee') .pipe(cofcon('roofpig.coffee')) .pipe(coffee({bare: true}).on('error', gutil.log)) .pipe(replace('@@BUILT_WHEN@@', dateFormat(new Date(), "yyyy-mm-dd HH:MM"))) .pipe(uglify()) .pipe(gulp.dest(build_dir)); -}); +} -gulp.task('build-3x', ['clean-build'], function() { +function extras() { return gulp.src(['lib/Projector.js', 'lib/CanvasRenderer.js']) .pipe(uglify()) .pipe(concat(extras_file)) + .pipe(gulp.dest(build_dir)); +} + +async function copyDemo() { + return gulp.src('templates/local_demo.html') .pipe(gulp.dest(build_dir)); -}); +} -gulp.task('build', ['build-rp', 'build-3x'], function() { - gulp.src(['lib/three.min.js', build_dir + extras_file, build_dir + rp_js_file]) +async function combine() { + return gulp.src(['lib/three.min.js', build_dir + extras_file, build_dir + roofpig_file]) .pipe(concat(release_file)) .pipe(gulp.dest(build_dir)); -}); +} + +exports.default = exports.build = gulp.series(cleanBuild, gulp.parallel(roofpig, extras, copyDemo), combine); // ------------- TEST ----- @@ -53,37 +59,42 @@ var rename = require("gulp-rename"); var glob = require("glob"); //var sourcemaps = require('gulp-sourcemaps'); -var js_dir = 'local/test_js/'; -var test_js_dir = js_dir+'test/'; +var test_dir = 'local/test/'; +var rel_source_dir = 'src/'; +var source_dir = test_dir + rel_source_dir; +var rel_spec_dir = 'specs/'; +var spec_dir = test_dir + rel_spec_dir; -gulp.task('clean-js', function() { - return del(js_dir+'**/*'); -}); +function cleanTest() { + return del(test_dir + '**/*'); +} -gulp.task('compile-test', ['clean-js'], function() { +function compileSpecs() { return gulp.src('test/**/*.coffee') // .pipe(sourcemaps.init()) .pipe(coffee({bare: true}).on('error', gutil.log)) // .pipe(sourcemaps.write()) - .pipe(gulp.dest(test_js_dir)); -}); + .pipe(gulp.dest(spec_dir)); +} -gulp.task('compile-src', ['clean-js'], function() { +function compileTestSource() { return gulp.src('src/**/*.coffee') .pipe(coffee({bare: true}).on('error', gutil.log)) - .pipe(gulp.dest(js_dir+'src')); -}); + .pipe(gulp.dest(source_dir)); +} -gulp.task('test', ['compile-test', 'compile-src'], function(){ +function renderMochaTemplate() { var test_html = ''; - glob.sync(test_js_dir+'**/*.js', {}).forEach(function(test_file){ - test_html += '\n'; + glob.sync('**/*.js', {cwd: spec_dir}).forEach(function(test_file) { + test_html += '\n'; }); - console.log("\nTests generated. `open rptest.html` can run them!\n") + console.log("\nTests generated. `open local/test/mocha.html` can run them!\n") - return gulp.src('misc/rptest_template.html') + return gulp.src('templates/mocha.html') .pipe(replace('@@TEST_FILES_GO_HERE@@', test_html)) - .pipe(rename('rptest.html')) - .pipe(gulp.dest('.')); -}); + .pipe(rename('mocha.html')) + .pipe(gulp.dest(test_dir)); +} + +exports.test = gulp.series(cleanTest, gulp.parallel(compileSpecs, compileTestSource), renderMochaTemplate); diff --git a/misc/rptest_template.html b/misc/rptest_template.html deleted file mode 100644 index abdb903..0000000 --- a/misc/rptest_template.html +++ /dev/null @@ -1,57 +0,0 @@ - -
- -
- - -
-