allow user to select palettes

This commit is contained in:
synth-ruiner 2017-12-22 19:45:33 +00:00
parent 1a67c3c899
commit e9a0ece5eb
1 changed files with 11 additions and 7 deletions

View File

@ -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();
}); });
}); });