allow user to select palettes
This commit is contained in:
parent
1a67c3c899
commit
e9a0ece5eb
18
script.js
18
script.js
|
@ -115,11 +115,11 @@ $(document).ready(function() {
|
||||||
_.each(bitsyData.palettes, function(palette, name) {
|
_.each(bitsyData.palettes, function(palette, name) {
|
||||||
$('#palette tbody').append(
|
$('#palette tbody').append(
|
||||||
'<tr class="palette">'
|
'<tr class="palette">'
|
||||||
+ '<td><input type="radio" name="palette"></td>'
|
+ '<td><input type="radio" name="palette" id="palette-' + name + '"></td>'
|
||||||
+ '<td><label>' + name + '</label></td>'
|
+ '<td><label for="palette-' + name + '">' + name + '</label></td>'
|
||||||
+ '<td><input type="color" name="background" value="' + colourToHex(palette.background) + '"></td>'
|
+ '<td><input type="color" name="background" value="' + colourToHex(palette.background) + '"></td>'
|
||||||
+ '<td><input type="color" name="tile" value="' + colourToHex(palette.tile) + '"></td>'
|
+ '<td><input type="color" name="tile" value="' + colourToHex(palette.tile) + '"></td>'
|
||||||
+ '<td><input type="color" name="sprite" value="' + colourToHex(palette.sprite) + '"></td>'
|
+ '<td><input type="color" name="sprite" value="' + colourToHex(palette.sprite) + '" disabled></td>'
|
||||||
+ '</tr>'
|
+ '</tr>'
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
@ -188,6 +188,8 @@ $(document).ready(function() {
|
||||||
|
|
||||||
$('#bitsy-data').on('change blur keyup', handleBitsyGameData);
|
$('#bitsy-data').on('change blur keyup', handleBitsyGameData);
|
||||||
|
|
||||||
|
handleBitsyGameData();
|
||||||
|
|
||||||
$('#imageUpload').on('change', function () {
|
$('#imageUpload').on('change', function () {
|
||||||
readFile(this);
|
readFile(this);
|
||||||
});
|
});
|
||||||
|
@ -195,13 +197,15 @@ $(document).ready(function() {
|
||||||
$('#palette input').on('change', function() {
|
$('#palette input').on('change', function() {
|
||||||
// if this is a colour input, update the palette
|
// if this is a colour input, update the palette
|
||||||
if ($(this).attr('type') === 'color') {
|
if ($(this).attr('type') === 'color') {
|
||||||
console.debug(palette);
|
|
||||||
palette[$(this).attr('name')] = hexToColour($(this).val());
|
palette[$(this).attr('name')] = hexToColour($(this).val());
|
||||||
console.debug(palette);
|
|
||||||
|
|
||||||
renderResult();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// if this is a radio button, pick this palette
|
// if this is a radio button, pick this palette
|
||||||
|
if ($(this).attr('type') === 'radio') {
|
||||||
|
palette.background = hexToColour($(this).closest('.palette').find('input[type="color"][name="background"]').val());
|
||||||
|
palette.tile = hexToColour($(this).closest('.palette').find('input[type="color"][name="tile"]').val());
|
||||||
|
}
|
||||||
|
|
||||||
|
renderResult();
|
||||||
});
|
});
|
||||||
});
|
});
|
Loading…
Reference in New Issue