Game Sharing

‹prev | My Chain | next›

Last night I improved the code sharing ability in my fork of the venerable Mr.doob's code editor. As with everything else that I seem to do, I borrowed heavily from Mr.doob's implementation, tweaking it only for more suitability for kids. Tonight I would like to tweak a bit more to see if I can't come up with a decent game sharing experience.

Currently, shared code opens in a live code editor:



It would be pretty cool if kids could share the results of their work (especially if they use the Scoreboard to sign their work), with the code hidden initially:



I already have an edit-only mode (for when things go very, very wrong) that is specified with a ?e query string parameter. Perhaps a ?g for game mode?

var EDIT_ONLY = window.location.search.indexOf('?e') > -1;
var GAME_MODE = window.location.search.indexOf('?g') > -1;

After a bit of code rearranging, I think I need only hide the code if in GAME_MODE:

codeToolbar();
update();
if (GAME_MODE) hideCode();

That does not quite work, however. When I first load up the page, I am in "game mode", but when I click the "Show Code" button, there does not seem to be any code:



That is really weird. There is only a single line in the ACE code editor and it is empty. Eventually, I find that I need to ensure that ACE has resized itself at least once:

var showCode = function() {
  codeToolbar();
  editor.style.display = '';
  ace.renderer.onResize();
  ace.focus();
};

Somehow hiding it immediately after setting the initial value confused ACE to no end. Invoking the method that is supposed to be called when a resize event occurs seems to resolve the situation.

To enable this in the sharing popup, I do a little hand DOM coding:

    // ...
    var toggle_game_mode = document.createElement('input');
    toggle_game_mode.type = 'checkbox';
    var toggle_label = document.createElement('label');
    toggle_label.appendChild(toggle_game_mode);
    toggle_label.appendChild(document.createTextNode("start in game mode"));

    var game_mode = document.createElement('div');
    game_mode.appendChild(toggle_label);
    // ...

    var share = document.createElement( 'div' );
    share.appendChild(title);
    share.appendChild(input);
    share.appendChild(game_mode);
    share.appendChild(shortener);
    // ...

There is nothing quite like pure DOM coding in JavaScript to make one appreciate jQuery. Or Dart.

Thankfully, since this is just for Chrome (and maybe Firefox eventually), adding the checkbox event listener is a little nicer:

    toggle_game_mode.addEventListener('change', function() {
      if (this.checked) {
        input.value = 'http://gamingjs.com/ice/?g#B/' + encode( ace.getValue() );
      }
      else {
        input.value = 'http://gamingjs.com/ice/#B/' + encode( ace.getValue() );
      }
      input.focus();
      input.select();
    });

With that, I believe that I have the share-in-game feature working:



That seems a fine stopping point tonight. I think that I will pick up tomorrow with pushing this to the editor website, possibly in a beta URL location so that I don't affect any existing readers just yet.


Day #669