Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <table><tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr></table>
  <select><option></option><option value="wood">Wood</option><option value="clay">Clay</option></select>
  <div id="object"></div>
  <button id="clear">Clear</button>
  <p>Select your material from the dropdown, then place them in the grid..</p>
  <p>Try a table... 3 in a row, and a leg either side...</p>
  <p>..or a clay pot... 3 items of clay in a V shape...</p>
</body>
</html>
 
table {
  border-collapse:collapse;
}
​
table td {
  margin:0; padding:0;
  width:30px;
  height:30px;
  border:1px dashed #ccc;
  background-color:#efefef;
}
​
button {
  margin:20px;
  float:left;
}
​
p {
  float:left;
  clear:left;
  display:block;
}
​
​
.icon {
 background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQsAAAAeCAIAAAC0W6yZAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAALzSURBVHhe7ZsxjtQwGIUHLkFNh4S2oKRkCuhpliPsGXabbdgzcARo6KFYSkqKFRIdNacYnvZFvzyJ7diORxM779MoeGZW2Un2ff79Z8KTw+GwE0IEyDbk+80HbL/+/P3+9UsM3n78/PiyEH1SaAiAJBx8un/gQIj+eDr8WwTLyHbA7HC1v8DDBsMbol/yaogVEGM7lcR77Kqf3bPUELIFT3js7+6+8Om360tsJUn3ZKyyQnqsl9sXw6AeEIOP4bnonVRDoAfmS6sVU9bVk8AN6sFBDVVGV+3iZ0N0Q+oqK15ALCurWHJEfLj9Mwzy4RlwrcCkoIvd3ZNkyNX+YrZEIDrnT0xircj3ZDpBrGtSECejjiGMS25W3NhVUCtrKZUjSah+lh21aIv5PiSlgICUnzGQOYsdc+a+UkJup1GjMxFbYN6QUfQRaFtgcMBtehEYmWD7x34KJTlT3PnJ9b1h3+R9p04ZmAxXj/QCEnegXJIzkX7golFihiCsbl6nehhVGvTm0mYnoS2rRRZBQ7x/ddMDAwv0ilpV9N/xFnzB1d4pdgZG84XoCb8hUz3cEJgnNk6Eu43kCXvDu4VTsqXf64m9OH1rGVlnQDSHx5CQHm4Uft3dc1DQoEcixV+EbYX21zWhthVGxHbRB7E+xDQAo1i/ut5ju3z6NCX4FDvkg0/XT0MfVZQxNsRmeuhBDRDfaQ7wItqP5Q069zzaf1sTc1ufVuQSrCHUw8tJM8GdtzI3S4/uOTIk1IFMKbh+hYIzmyfTo8rl4xg5nUnkw9Bk3XjSMUf3ZVl/bFM4IutdAhVngvewhFTh78rWg9+pT0Nv37Uv7tS9t97YUciQjjkyhDWEf/jnP/5h+/fNMzcZeGuNaYAJXgdOaYgruQzpmPG9ve5lVu+s2VIa6hkC3DNjyI3u8d/9bmkYFRBsN2sIsTMjNzZC8P+HYMVFJUyS9gwBoQWYEGkEDSGcMilJk4YIsYwZQ4C7/pYeYmvMGyLEdtnt/gO9N6/sdJAUlAAAAABJRU5ErkJggg==) no-repeat 0 30px;
}
​
​
​
.wood {
  background-position:0 0
}
​
.clay {
  background-position:-30px 0;
}
​
.table {
  background-position:-60px 0;
}
​
.pot {
  background-position:-90px 0;
}
​
select {
  float:left;
  margin:20px;
}
​
#object {
  width:30px;
  height:30px;
  border:1px solid black;
  float:left;
  margin:15px;
}
​
​
 
​
$('td').each(function() {
    $(this).click(function() {
      
        var selected = $('select').val();
      
        if (selected) {
          $(this).removeClass().addClass('icon '+selected);  
        } else {
          $(this).removeClass();
        }
​
        evaluate();
​
    });
});
​
​
$('#clear').click(function() {
  $('td').removeClass();
  evaluate();
})
​
​
function evaluate() {
​
    var craft = '';
​
    $('table').find('tr').each(function() {
​
        $(this).find('td').each(function() {
          
            var cell = $(this);
            var item = '-';
          
            if (cell.hasClass('wood')) item = 'w';
            if (cell.hasClass('clay')) item = 'c';
            
            craft += item;
          
        });
​
        craft += '@';
​
    });
  
  
    var recipes = [ 
      { pattern: /^[-@]*www[-@]{6}w-w[-@]*$/i, object: 'table'},
      { pattern: /^[-@]*c-c[-@]{7}c[-@]*$/i, object: 'pot'}
    ];
  
    var matched = false;
  
    recipes.forEach(function(recipe) {
        if (recipe.pattern.test(craft)) {
            matched = recipe;
        }
    });
    
    $('#object').removeClass().addClass('icon '+matched.object);
​
}
​
​
Output

This bin was created anonymously and its free preview time has expired (learn why). — Get a free unrestricted account

Dismiss x
public
Bin info
anonymouspro
0viewers