Question

I need to store data to represent this:

Water + Fire = Steam
Water + Earth = Mud
Mud + Fire = Rock

The goal is the following: I have draggable HTML divs, and when <div id="Fire"> and <div id="Mud"> overlap, I add <div id="Rock"> to the screen. Ever played Alchemy on iPhone or Android? Same stuff

Right now, the way I’m doing this is a JS object :

var stuff = {
    'Steam' : { needs: [ 'Water', 'Fire'] },
    'Mud'   : { needs: [ 'Water', 'Earth'] },
    'Rock'  : { needs: [ 'Mud',   'Fire'] },
    // etc...
};

and every time a div overlaps with another one, I traverse the object keys and check the ‘needs’ array.

I can deal with that structure but I was wondering if I could do any better?

Edit: I should add that I also need to store a few other things, like a short description or an icon name. So typicall I have Steam: { needs: [ array ], desc: "short desc", icon:"steam.png"},

Final edit: thank you everyone for contributing, I found really valuable input in all your comments

Answer 1

If you don’t mind including another external library and are comfortable with LINQ, you can use linq.js for this.

var stuff = {
  'Steam' : { needs: ['Water', 'Fire'] },
  'Mud'   : { needs: ['Water', 'Earth'] },
  'Rock'  : { needs: ['Mud',   'Fire'] }
    // etc...
};

function Alchemy(stuff) {
  var recipes = 
    Enumerable.From(stuff).ToLookup(
      "$.Value.needs",
      "$.Key", 
      "Enumerable.From($).OrderBy().ToString('+')"
    );

  this.attempt = function(elem1, elem2) {
    return recipes.Get([elem1, elem2]).ToString();
  };
};

var alchemy = new Alchemy(stuff);
console.log(alchemy.attempt('Fire', 'Mud'));   // "Rock"
console.log(alchemy.attempt('Fire', 'Earth')); // ""
console.log(alchemy.attempt('Fire', 'Water')); // "Steam"

Notes

• Enumerable.From(stuff) splits your stuff object into its Key and Value parts.
  For instance, Key would refer to "Rock" and Value to { needs: ['Mud', 'Fire'] }.
• ToLookup() creates a look-up dictionary from that. It takes 3 parameters:
  1. what to look for (in this case, the elements in "$.Value.needs")
  2. what to return if a match was found (in this case, the resulting element’s name, i.e. the Key)
  3. the transformation function that creates the dictionary key (in this case an array of ingredients is transformed into a sorted string: ['Mud', Fire'] becomes "Fire+Mud").
• the Get() function finds a match for its argument, using the same transformation function.

Note that a string argument like "$.Value.needs" is a shorthand for
function ($) { return $.Value.needs; }.

linq.js also provides many more useful functions that can transform complex tasks into one-liners.

---

Edit: Returning all the additional info from the lookup would be as simple as:

function Alchemy(stuff) {
  var recipes = 
    Enumerable.From(stuff).ToLookup(
      "$.Value.needs",
      null, // return the object unchanged 
      "Enumerable.From($).OrderBy().ToString('+')"
    );

  this.attempt = function(elem1, elem2) {
    return recipes.Get([elem1, elem2]).FirstOrDefault();
  };
};

console.log(alchemy.attempt('Fire', 'Mud')); 
/* result
{
  Key: "Rock",
  Value: {
    needs: ["Mud", "Fire"],
    whatever: "else you had defined in {stuff}"
  }
}
*/

The purpose of the Lookup object is to increase speed. You could also traverse the entire object graph every time:

function alchemy(elem1, elem2) {
  return 
    Enumerable
    .From(stuff)
    .Where(function ($) {
      var recipe = Enumerable.From($.Value.needs);
      return recipe.Intersect([elem1, elem2]).Count() == 2;
    })
    .Select("{element: $.Key, properties: $.Value}")
    .FirstOrDefault();
);

console.log(alchemy('Fire', 'Water'));
// {element: "Steam", properties: {needs: ["Water", "Fire"]}}

Note that .Select() is optional. You could remove it, in which case the result would be the same as in the previous example.