Skip to content

Instantly share code, notes, and snippets.

/index.html

Created April 8, 2015 12:25
Show Gist options
  • Save anonymous/735da8bbab4520f75282 to your computer and use it in GitHub Desktop.
Save anonymous/735da8bbab4520f75282 to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin // source http://jsbin.com/berabusili
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
<style id="jsbin-css">
table {
border-collapse:collapse;
}
table td {
margin:0; padding:0;
width:30px;
height:30px;
border:1px dashed #ccc;
background-color:#efefef;
}
.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;
}
</style>
</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>
<script id="jsbin-javascript">
$('td').each(function() {
$(this).click(function() {
var selected = $('select').val();
if (selected) {
$(this).removeClass().addClass('icon '+selected);
} else {
$(this).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);
}
</script>
<script id="jsbin-source-html" type="text/html"><!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>
</body>
</html></script>
<script id="jsbin-source-css" type="text/css">table {
border-collapse:collapse;
}
table td {
margin:0; padding:0;
width:30px;
height:30px;
border:1px dashed #ccc;
background-color:#efefef;
}
.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;
}
</script>
<script id="jsbin-source-javascript" type="text/javascript">
$('td').each(function() {
$(this).click(function() {
var selected = $('select').val();
if (selected) {
$(this).removeClass().addClass('icon '+selected);
} else {
$(this).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);
}
</script></body>
</html>
Raw
jsbin.berabusili.css
table {
border-collapse:collapse;
}
table td {
margin:0; padding:0;
width:30px;
height:30px;
border:1px dashed #ccc;
background-color:#efefef;
}
.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;
}
Raw
jsbin.berabusili.js
$('td').each(function() {
$(this).click(function() {
var selected = $('select').val();
if (selected) {
$(this).removeClass().addClass('icon '+selected);
} else {
$(this).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);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment