widget with assets level

Author: James Halliday

menu.json

@@ -7,8 +7,9 @@
  "BUILD A WIDGET",
  "USING TRANSFORMS",
  "WRITING TRANSFORMS",
+ "WIDGET WITH ASSETS",
 
- "!WIDGET WITH BRFS",
+ "SHIMMING NON-COMMONJS MODULES",
 
  "!DEBUGGING",
  "!WATCH",
@@ -18,7 +19,5 @@
  "!BUILD YOUR OWN BROWSERIFY",
  "!COMPILER PIPELINE",
  "!BROWSER UNPACK",
- "!FACTOR BUNDLE",
-
- "SHIMMING NON-COMMONJS MODULES"
+ "!FACTOR BUNDLE"
 ]

package.json

@@ -15,7 +15,9 @@
  "falafel": "~0.3.1",
  "shoe": "~0.0.15",
  "split": "~0.3.0",
- "through2": "~0.5.1"
+ "through2": "~0.5.1",
+ "ever": "~0.0.3",
+ "colornames": "~0.0.2"
  },
  "devDependencies": {
  "brfs": "^1.1.2",
@@ -26,7 +28,9 @@
  "sprintf": "~0.1.3",
  "stream-combiner2": "^1.0.0",
  "tape": "^2.13.3",
- "uniq": "^1.0.1"
+ "uniq": "^1.0.1",
+ "through2": "~0.5.1",
+ "insert-css": "~0.2.0"
  },
  "scripts": {
  "test": "tape test/*.js"

problems/widget_with_assets/browser.js

@@ -0,0 +1,23 @@
+var shoe = require('shoe');
+var sock = shoe('/sock');
+var ever = require('ever');
+
+var Widget = require('widget');
+var w = Widget();
+var elem = document.createElement('div');
+document.body.appendChild(elem);
+w.appendTo(elem);
+var form = elem.querySelector('form');
+
+w.on('message', function (msg) {
+ sock.write(JSON.stringify(['msg',msg]) + '\n');
+});
+var txt = form.querySelector('textarea[name="msg"]')
+txt.value = 'howdee pardner';
+ever(form).emit('submit');
+
+var style = window.getComputedStyle(txt);
+sock.write(JSON.stringify(['bg',style.backgroundColor]) + '\n');
+sock.write(JSON.stringify(['fg',style.color]) + '\n');
+
+sock.write(JSON.stringify(['style',true]) + '\n');

problems/widget_with_assets/index.js

@@ -0,0 +1,92 @@
+var fs = require('fs');
+var path = require('path');
+var verify = require('adventure-verify');
+var concat = require('concat-stream');
+var http = require('http');
+var shoe = require('shoe');
+var ecstatic = require('ecstatic')(path.join(__dirname, 'static'));
+var split = require('split');
+var through = require('through2');
+var colorname = require('colornames');
+
+exports.problem = fs.createReadStream(__dirname + '/problem.txt');
+exports.solution = fs.createReadStream(__dirname + '/solution.txt');
+
+exports.verify = verify({ modeReset: true }, function (args, t) {
+ var expected = [
+ [ [ 'msg', 'howdee pardner' ], 'emits the message event' ],
+ [ [ 'bg', 'purple' ], 'textarea background set to purple' ],
+ [ [ 'fg', 'yellow' ], 'textarea foreground set to yellow' ],
+ [ [ 'style', true ], 'using a style tag' ]
+ ];
+ t.plan(expected.length);
+ process.stdin.pipe(concat(function (body) {
+ createServer(body, t).pipe(through.obj(function (row, enc, next) {
+ var xex = expected.shift();
+ var ex = xex[0], desc = xex[1];
+ 
+ if (row[0] === 'fg' || row[0] === 'bg') {
+ if (ex[1] !== row[1] && /^#/.test(row[1])) {
+ ex[1] = colorname(ex[1]);
+ }
+ else if (ex[1] !== row[1] && /^rgb/.test(row[1])) {
+ var rgb = colorname(ex[1]).match(/\w{2}/g);
+ ex[1] = 'rgb(' + rgb.map(function (s) {
+ return parseInt(s, 16);
+ }).join(',') + ')';
+ row[1] = row[1].replace(/\s+/g, '');
+ }
+ }
+ t.deepEqual(row, ex, desc);
+ next();
+ }));
+ }));
+});
+
+function createServer (body, t) {
+ var output = through.obj();
+ var server = http.createServer(function (req, res) {
+ if (req.url === '/code.js') {
+ res.end(body);
+ }
+ else ecstatic(req, res)
+ });
+ server.listen(55500, function () {
+ console.log('Web server running. Visit this URL:'
+ + ' http://localhost:' + server.address().port
+ );
+ });
+ var sock = shoe(function (stream) {
+ stream.pipe(split()).pipe(through.obj(function (buf, enc, next) {
+ var line = buf.toString('utf8');
+ try { var row = JSON.parse(line) }
+ catch (err) {
+ if (t) return t.fail(err)
+ else console.error(err);
+ }
+ 
+ this.push(row);
+ next();
+ })).pipe(output);
+ 
+ if (t) t.once('end', function () { stream.end() });
+ });
+ 
+ if (t) t.once('end', function () {
+ server.close();
+ setTimeout(function () {
+ process.exit();
+ }, 100);
+ });
+ sock.install(server, '/sock');
+ return output;
+}
+
+exports.run = function (args) {
+ process.stdin.pipe(concat(function (body) {
+ createServer(body).pipe(through.obj(function (row, enc, next) {
+ console.log(row);
+ next();
+ }));
+ }));
+};

problems/widget_with_assets/package.json

@@ -0,0 +1,5 @@
+{
+ "scripts": {
+ "build": "browserify -d -x widget browser.js -o static/bundle.js"
+ }
+}

problems/widget_with_assets/problem.txt

@@ -0,0 +1,40 @@
+This time the verifier will call your code. It will do something like this:
+
+ var Widget = require('widget');
+ var w = Widget();
+ w.setName('beep boop');
+ w.appendTo(document.body);
+
+You should implement the widget module that will be loaded with
+`require('widget')`. Your widget module should create an html element from
+the html string:
+
+ <div>Hello <span class="name"></span>!</div>
+
+To turn this html string into a dom element, you can use the domify package
+from npm:
+
+ npm install domify
+
+and then do `require('domify')` to get a `domify(html)` function that
+returns html elements. Otherwise you can create a dom element with
+`document.createElement('div')` and then set its innerHTML directly.
+
+Your widget module will need to implement `w.setName(str)` and
+`w.appendTo(target)`. `w.setName(str)` will need to update the "name"
+span's inner context with `str`. You can set the span element's
+`.textContent` once you have a handle on the span which you can obtain with
+`elem.querySelector('css selector goes here')`.
+
+You will also need to implement `w.appendTo(target)`, which appends the
+widget's internal html element to `target`. You can use
+`target.appendChild(elem)` to append the widget's element to the target.
+
+Compile your program with `browserify -r ./widget.js:widget` to create a
+bundle that will expose `require('widget')` to the environment and pipe the
+bundle output into `$ADVENTURE_COMMAND verify` like this:
+
+ browserify -d -r ./widget.js:widget | $ADVENTURE_COMMAND verify
+
+The `-d` turns on debug mode so you will get a stack trace with the proper
+line offsets if there is an error.

problems/widget_with_assets/solution.txt

@@ -0,0 +1,27 @@
+Here's the reference solution:
+
+ var domify = require('domify');
+ var html = '<div>Hello <span class="name"></span>!</div>';
+ 
+ module.exports = Widget;
+ 
+ function Widget () {
+ if (!(this instanceof Widget)) return new Widget;
+ this.element = domify(html);
+ }
+ 
+ Widget.prototype.setName = function (name) {
+ this.element.querySelector('.name').textContent = name;
+ };
+ 
+ Widget.prototype.appendTo = function (target) {
+ target.appendChild(this.element);
+ };
+
+There are lots of ways to complete this level, so your solution might look
+quite different!
+
+In this solution, we create an element with a string of html every time the
+widget gets instantiated. When `setName()` is called, we find the `name`
+span and update its text content. When `appendTo(target)` is called, we
+append the widget's html element to the target element.