Event based editor like in StarCraft 2 Editor (algorithm)

Question

I'm trying to create an algorithm for an event based editor like in StarCraft 2 Editor that can support:

• Create UI
• Play sounds
• Handle keyboard/mouse inputs
• Display messages
• Button(or some referenced UI object) is pressed etc.

Pretty much the same thing as in StarCraft 2 Editor (of course not the 3D stuff too)

---

So far I'm thinking to use JSON , add every event in an object and then loop through them and create an event using the addEventListener() method.

The JSON Events Object(of course it will be created by the user in the editor with no programming):

var Events={
    //your event's names here
    onReady:{ //on page ready to manipulate
        displayMessage:{//just a simple popup
            text:"Hello user!",
            title:"Welcome!",
            type:"normal",
            },
        createButton:{ //creates a buton on the screen
            text:"Click me!",
            id:"myButton"
        }
    },
    onClick:{
        id:"myButton" ,//the id of the button we just created
        actions:{ //the actions applied after we click the button
            displayMessage:{//just a simple popup
                text:"You pressed me!",
                title:"Button",
                type:"error",//show the message as an error
            }
        }
    }
}

I found some softwares (GameMaker,Construct 2,GameDevelop) that have an event based editor if you would like to get an idea about what I'm talking about (if you don't already know about StarCraft 2 Editor)

My question is: What is the best algorithm that I can use to achieve this?

Answer 1

Sounds like a job for jQuery UI.

When the user creates a custom area in your editor all it's attributes are stored inside an object (that you can save as JSON) that would then be applied to a div as param when loading the map (using html-attributes.

function create_areas(areas){
    var map = $('#map_area');
    for(var i=0;i<areas.length;i++){
        map.append($('<div>', area[i].params));
    }
}

whereas params would look something like this:

params = {
    width: 100,
    height: 200,
    ....
    mousedown: function(){ play_music('hello'); },
    keydown: function(e){ alert('you pressed ' + e.keyCode; }
}

also the jQuery UI tools like draggable and resizeable should ease up building your editor.

Answer 2

I'd model this more after backbone's event system:

events: {
  'click selector': handler,
  'mouseover selector': handler2,
  ...
}

Handlers can be any javascript function, this would allow you to create a bunch of pre-defined functions like displayMessage.

Then you could curry your own handlers, which would allow your users to specify configuration if they need it.

Example:

var events = {
   'click element': displayMessage({
        text:"Hello user!",
        title:"Welcome!",
        type:"normal",
    }),
   'mouseover pizza': createButton({...}) 
}

function displayMessage(options) {
   var options = options;

   return function() {
      //display message logic
   }
}

Then you can supply a compose function among other helpers (look up promises perhaps?) to combine your functions together:

var events = {
   'click element': compose(
        displayMessage({
            text:"Hello user!",
            title:"Welcome!",
            type:"normal",
        }),
        createButton({})
    ),
   'mouseover pizza': createButton({...}) 
}

This could work out?

Caveat: it might be better if events was an array that contained objects. That way you can have multiple click handlers on some selector without collisions.