Reducing the localStorage in Code Editor

‹prev | My Chain | next›

Today, I continue my efforts to adopt Mr Doob's code editor for Gaming JavaScript. As of yesterday, I think I have a decent local development environment setup with express.js. It requires me to modify my appcache settings when doing local development, but it works.

One other thing that I need to do when developing locally, especially when I am developing the first-time user experience, is to delete the localStorage contents. The code editor stores its work in localStorage (though it can also archive to local disk). To delete localStorage while trying the first time experience, I open the JavaScript console, switch to the Resources tab and right-click delete the localStorage:

I have been developing the new-project UI, which creates new projects from templates. For the most part, those templates will be useful starting points for Gaming JavaScript projects. In addition to new projects, it also seems useful to have a demo app pre-loaded for the first-time user. Mr Doob has a spinning icosahedron:

I leave this for the time being. In the near future, I will likely replace it with something a little more Gaming JavaScript-specific. Regardless, it seems reasonable to treat this as a template as well. That way, if a reader messes it up, which seems likely for new coders, there is always a way to retrieve it.

So I add it the list of templates:

var templates = [ {
 filename: '3D starter project',
 filetype: 'text/plain',
 autoupdate: true,
  code: /* ... */
}, {
 filename: 'Empty project',
 filetype: 'text/plain',
 autoupdate: true,
 code: /* ... */
}, {
 filename: 'Spinning Multi-Sided Thingy',
 filetype: 'text/plain',
 autoupdate: true,
 code: /* ... */
} ];

If the localStorage is empty, I then add the last template (the icosahedron) to the initial list of coding projects:

var documents = ( localStorage.codeeditor !== undefined ) ?
 JSON.parse( localStorage.codeeditor ) :
  [templates[templates.length-1]];

That seems a reasonable way to create the first project, but leave it around for future use without duplication.

With that, I am nearly done with the new-project UI. The last thing that I need is to use the template name in the dialog:

I am probably being to clever here, but I use reduce() to find the correct code for this:

var createProject = function(name, template_name) {
  // ...
  var code = templates.
    reduce(function(code, template) {
      if (template.filename == template_name) return template.code;
      return code;
    }, undefined);

 documents[0].code = code;
  documents[0].filename = name;

 localStorage.codeeditor = JSON.stringify(documents);

  changeProject(name);
};

Were the templates list longer, I might like a means to short circuit the iteration. Since there are only three templates, and I am unlikely to add many more, this will work.

That ought to do it for the new-project dialog. At this point, I can tell readers to create a new project with a name like "My Player" and get started with the lesson. I commit my work, including an update to the appcache manfiest:

CACHE MANIFEST
# 2012-10-06

CACHE:
/favicon.ico
/code-editor/
# ...

And call it a night here. Up tomorrow: fixes to the save dialog.



Day #531