Hacker News Reader

Comment by nwhitehead | Hacker News Reader

This is awesome!

Thoughts: after clicking, sometimes I decide I want to cancel drawing from that point. I can click on the original point to cancel, it would be nice to be able to press ESC or SPACE to cancel drawing (just noticed that Z for undo cancels).

For the "game" side, it is very important to have simple tasks that almost all players can complete to get started. I would add an even simpler first challenge, such as make two overlapping circles.

I would love to be able to share constructions. I'm thinking a button I press that pops up a URL that I can share. When visited it shows an animation drawing the construction, then when done lets you do more drawing. That would be cool.

View on HN

Another vote for ESC cancelling the current construction.

It's just a new condition in onkeydown:

  else if (e.keyCode === 27) {
    deselect();
  }

While we're at it, make Shift+z redo.

  else if (e.keyCode === 90) {
      //"z"
      if (e.shiftKey) {
          changes.redo();
      }
      else {
          changes.undo();
          changes.record(1);
      }
  }

And let's not clutter up the user's history. Swapping

  window.location.hash=currenthash;
  ...
  window.location.hash=hash;

with

  window.location.replace(currenthash);
  ...
  window.location.replace(hash);

fixes that one.

It's the little things in life, man…

I've added the esc and space to deselect, and shift+redo. Thanks, once you get used to your own hotkeys it gets hard to imagine what other people might want.

As for the hash, the original reason why I went with hash= was to preserve back and forward, but I guess that might not be so necessary considering I have undo and redo.

I know that my clutter can be a bit obnoxious, but just changing it to window.replace(hash) breaks a few other things, so it's left the way it is for now.

There is probably some HTML5 history API way to do it that lets me have back and forward without saving every history entry, I'll look into it.

>There is probably some HTML5 history API way to do it that lets me have back and forward without saving every history entry, I'll look into it.

Do you mean the Back & Forward buttons in the browser?

If you can go back/forward to different states, why wouldn't those show up as history entries? I don't think you can decouple the displayed "history" drop-down list from the behavior of the back/forward buttons (for reasons that are probably obvious).

http://html5doctor.com/history-api/

Perhaps map key codes to object properties with, you know, real names so comparisons to e.keyCode mean something in the future.

  var appKeys = { "Esc": 27 };

  else if (e.keyCode === appKeys.Esc) {

Some JS libs do this for you and there are some nice libs that make key handling convenient and powerful as well.

Great tip. But I generally only use each reference once, so I'm not sure it would have been worth it in my case.

There are lots of libraries that could have made things more convenient. But a big part of this project was to learn as much as I could about coding, and the browser as an environment, so early on I committed to writing everything myself.

I'd be interested in hearing whether or not other people think this is a good strategy for self teaching.

+1 on doing everything yourself the first time for self-teaching. But I'm sure people are on the far end of both sides -- do it all yourself, or use libraries for everything.

The URL in the location bar seems to update with the steps you've done (here's one showing the first construction: http://www.sciencevsmagic.net/geo/#0A1.1L0.1A0.3L0.3L1). Undo/Redo can then give an animation like appearance.

You can actually press reset and then redo, redo, redo to replay construction without having to undo first.

Reply on news.ycombinator.com