max
/
pixsy
1
0
Fork 0
Code Issues 8 Pull Requests Releases Wiki Activity

var -> let

This commit is contained in:
Max Bradbury 2020-04-30 08:06:32 +01:00
parent c554a2311a
commit 96bd2a9dec
1 changed files with 50 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

100
includes/script.js
View File

@ -1,11 +1,11 @@
$(document).ready(function() { $(document).ready(function() {
// todo define things like 16x16, 128x128 etc. as constants? // todo define things like 16x16, 128x128 etc. as constants?
// also script debounce/throttle times // also script debounce/throttle times
var animationTime = 400; // defined in bitsy.js let animationTime = 400; // defined in bitsy.js
var bitsyData = {}; let bitsyData = {};
var palette = { let palette = {
id: 0, id: 0,
background: { background: {
red: 62, red: 62,
@ -24,23 +24,23 @@ $(document).ready(function() {
} }
}; };
var room = []; let room = [];
var tileMatchThreshold = 64; let tileMatchThreshold = 64;
var croptions = { let croptions = {
url: 'https://i.imgur.com/ThQZ94v.jpg', url: 'https://i.imgur.com/ThQZ94v.jpg',
viewport: {width: 128, height: 128, type: 'square'}, viewport: {width: 128, height: 128, type: 'square'},
boundary: {width: 256, height: 256}, boundary: {width: 256, height: 256},
zoom: 0 zoom: 0
}; };
var $croppie = $('#croppie'); let $croppie = $('#croppie');
$croppie.croppie(croptions); $croppie.croppie(croptions);
function colourDifference(colour1, colour2) { function colourDifference(colour1, colour2) {
var difference = {}; let difference = {};
_.each(['red', 'green', 'blue'], function(key) { _.each(['red', 'green', 'blue'], function(key) {
difference[key] = Math.abs(colour1[key] - colour2[key]); difference[key] = Math.abs(colour1[key] - colour2[key]);
@ -64,7 +64,7 @@ $(document).ready(function() {
} }
function hexToColour(hex) { function hexToColour(hex) {
var rgb = hex.match(/[\da-f]{2}/gi); let rgb = hex.match(/[\da-f]{2}/gi);
return { return {
red: parseInt(rgb[0], 16), red: parseInt(rgb[0], 16),
@ -87,9 +87,9 @@ $(document).ready(function() {
} }
function newTileName() { function newTileName() {
var tileNames = _.map(bitsyData.tiles, 'name'); let tileNames = _.map(bitsyData.tiles, 'name');
var i = 1; // start with 1 as 0 is an implicit tile let i = 1; // start with 1 as 0 is an implicit tile
while (tileNames.indexOf(i.toString(36)) > -1) { while (tileNames.indexOf(i.toString(36)) > -1) {
i++; i++;
@ -100,7 +100,7 @@ $(document).ready(function() {
} }
function handleBitsyGameData() { function handleBitsyGameData() {
var input = $('#bitsy-data').val(); let input = $('#bitsy-data').val();
if ( ! input) { if ( ! input) {
return; return;
@ -109,14 +109,14 @@ $(document).ready(function() {
bitsyData = {}; bitsyData = {};
// get palettes // get palettes
var palettes = input.match(/PAL ([^\n]*)\n(NAME ([^\n]*)\n)?(([0-9,]+){3}\n){3,}/g); let palettes = input.match(/PAL ([^\n]*)\n(NAME ([^\n]*)\n)?(([0-9,]+){3}\n){3,}/g);
bitsyData.palettes = {}; bitsyData.palettes = {};
// do palettes always go 0..n? // do palettes always go 0..n?
// will this cause problems if not? // will this cause problems if not?
_.each(palettes, function(palette, n) { _.each(palettes, function(palette, n) {
var name = ""; let name = "";
if (palette.match(/NAME (.+)\n/)) { if (palette.match(/NAME (.+)\n/)) {
name = palette.match(/NAME (.+)\n/)[0].replace('NAME ', ''); name = palette.match(/NAME (.+)\n/)[0].replace('NAME ', '');
@ -124,10 +124,10 @@ $(document).ready(function() {
name = palette.match(/PAL (\d+)\n/)[0].replace("PAL", "palette"); name = palette.match(/PAL (\d+)\n/)[0].replace("PAL", "palette");
} }
var colours = palette.match(/\d+,\d+,\d+/g); let colours = palette.match(/\d+,\d+,\d+/g);
colours = _.map(colours, function(colour) { colours = _.map(colours, function(colour) {
var rgb = colour.split(','); let rgb = colour.split(',');
return {red: rgb[0], green: rgb[1], blue: rgb[2]}; return {red: rgb[0], green: rgb[1], blue: rgb[2]};
}); });
@ -154,16 +154,16 @@ $(document).ready(function() {
// everything after > is an optional second animation frame // everything after > is an optional second animation frame
// todo: handle multiple animation frames! more than 2 are allowed (but not via the standard editor) // todo: handle multiple animation frames! more than 2 are allowed (but not via the standard editor)
var tiles = input.match(/TIL (.*)\n([01]{8}\n){8}(>\n([01]{8}\n){8})?/g); let tiles = input.match(/TIL (.*)\n([01]{8}\n){8}(>\n([01]{8}\n){8})?/g);
_.each(tiles, function(tile) { _.each(tiles, function(tile) {
var name = tile.match(/TIL .*/)[0].replace('TIL ', ''); let name = tile.match(/TIL .*/)[0].replace('TIL ', '');
tile = tile.replace(/TIL .*\n/, ''); tile = tile.replace(/TIL .*\n/, '');
var bitmap = _.map(tile.match(/[01]/g), _.toInteger); let bitmap = _.map(tile.match(/[01]/g), _.toInteger);
var newTile = { let newTile = {
name: name, name: name,
new: false new: false
}; };
@ -219,7 +219,7 @@ $(document).ready(function() {
function readFile(input, callback) { function readFile(input, callback) {
if (input.files && input.files[0]) { if (input.files && input.files[0]) {
var reader = new FileReader(); let reader = new FileReader();
reader.onload = callback; reader.onload = callback;
@ -229,7 +229,7 @@ $(document).ready(function() {
function readTextFile(input, callback) { function readTextFile(input, callback) {
if (input.files && input.files[0]) { if (input.files && input.files[0]) {
var reader = new FileReader(); let reader = new FileReader();
reader.onload = callback; reader.onload = callback;
@ -242,22 +242,22 @@ $(document).ready(function() {
type: 'rawcanvas', type: 'rawcanvas',
size: 'viewport' size: 'viewport'
}).then(function (result) { }).then(function (result) {
var imageData = result.getContext('2d').getImageData(0, 0, 128, 128); let imageData = result.getContext('2d').getImageData(0, 0, 128, 128);
var rawData = imageData.data; let rawData = imageData.data;
var monochrome = []; let monochrome = [];
var brightnessAdjustment = parseFloat($('#brightness').val()); let brightnessAdjustment = parseFloat($('#brightness').val());
// for each pixel // for each pixel
for (var i = 0; i < rawData.length; i += 4) { for (let i = 0; i < rawData.length; i += 4) {
// this brightness adjustment is pretty crude but whatever // this brightness adjustment is pretty crude but whatever
var pixel = { let pixel = {
red: _.clamp(rawData[i ] + brightnessAdjustment, 0, 255), red: _.clamp(rawData[i ] + brightnessAdjustment, 0, 255),
green: _.clamp(rawData[i + 1] + brightnessAdjustment, 0, 255), green: _.clamp(rawData[i + 1] + brightnessAdjustment, 0, 255),
blue: _.clamp(rawData[i + 2] + brightnessAdjustment, 0, 255) blue: _.clamp(rawData[i + 2] + brightnessAdjustment, 0, 255)
}; };
var targetColour = getClosestColour(pixel, palette); let targetColour = getClosestColour(pixel, palette);
if (targetColour.name === "background") { if (targetColour.name === "background") {
monochrome.push(0); monochrome.push(0);
@ -283,7 +283,7 @@ $(document).ready(function() {
_.times(16, function(tileY) { _.times(16, function(tileY) {
_.times(16, function(tileX) { _.times(16, function(tileX) {
// make pseudo-tile from monochrome bitmap // make pseudo-tile from monochrome bitmap
var pseudoTile = []; let pseudoTile = [];
_.times(8, function(y) { _.times(8, function(y) {
pseudoTile.push( pseudoTile.push(
@ -291,7 +291,7 @@ $(document).ready(function() {
); );
}); });
var bestMatch; let bestMatch;
// if we want to always create new tiles, don't bother trying to check matches // if we want to always create new tiles, don't bother trying to check matches
if (tileMatchThreshold === 64) { if (tileMatchThreshold === 64) {
@ -330,8 +330,8 @@ $(document).ready(function() {
// what if there are several equally good matches? // what if there are several equally good matches?
// find highest match amount and find all of them // find highest match amount and find all of them
var bestMatchAmount = _.last(_.sortBy(bitsyData.tiles, ['match'])).match; let bestMatchAmount = _.last(_.sortBy(bitsyData.tiles, ['match'])).match;
var bestMatches = _.filter(bitsyData.tiles, {'match': bestMatchAmount}); let bestMatches = _.filter(bitsyData.tiles, {'match': bestMatchAmount});
// sort by name in ascending order // sort by name in ascending order
// earlier names are preferable // earlier names are preferable
@ -341,7 +341,7 @@ $(document).ready(function() {
if ( ! bestMatch || bestMatch.match < tileMatchThreshold) { if ( ! bestMatch || bestMatch.match < tileMatchThreshold) {
// turn pseudo-tile into a real tile and add it to the tile data // turn pseudo-tile into a real tile and add it to the tile data
var name = newTileName(); let name = newTileName();
bitsyData.tiles.push({ bitsyData.tiles.push({
name: name, name: name,
@ -370,15 +370,15 @@ $(document).ready(function() {
_.each(room, function(row, tileY) { _.each(room, function(row, tileY) {
_.each(row, function(tileName, tileX) { _.each(row, function(tileName, tileX) {
var tile = _.find(bitsyData.tiles, {'name' : tileName}); let tile = _.find(bitsyData.tiles, {'name' : tileName});
_.each(tile.bitmap, function(row, y) { _.each(tile.bitmap, function(row, y) {
_.each(row, function(pixel, x) { _.each(row, function(pixel, x) {
var position = (((tileY * 8) + y) * 128) + ((tileX * 8) + x); let position = (((tileY * 8) + y) * 128) + ((tileX * 8) + x);
position *= 4; // 4 values (rgba) per pixel position *= 4; // 4 values (rgba) per pixel
var pixelColour = {}; let pixelColour = {};
switch(parseInt(pixel)) { switch(parseInt(pixel)) {
case 0: pixelColour = palette.background; break; case 0: pixelColour = palette.background; break;
@ -399,12 +399,12 @@ $(document).ready(function() {
}); });
} }
var renderDebounced = _.debounce(render, 30); let renderDebounced = _.debounce(render, 30);
var renderThrottled = _.throttle(render, 30); let renderThrottled = _.throttle(render, 30);
$croppie.on('update', renderDebounced); $croppie.on('update', renderDebounced);
var $brightness = $('#brightness'); let $brightness = $('#brightness');
$brightness.on('change', renderThrottled); $brightness.on('change', renderThrottled);
@ -418,7 +418,7 @@ $(document).ready(function() {
$('#brightness').trigger('dblclick'); $('#brightness').trigger('dblclick');
}); });
var $bitsyData = $('#bitsy-data'); let $bitsyData = $('#bitsy-data');
$bitsyData.on('change blur keyup', handleBitsyGameData); $bitsyData.on('change blur keyup', handleBitsyGameData);
@ -446,7 +446,7 @@ $(document).ready(function() {
// these inputs get added and removed from the DOM so the event handler needs to be on the document // these inputs get added and removed from the DOM so the event handler needs to be on the document
$(document).on('change', '#palette input', function() { $(document).on('change', '#palette input', function() {
var id = parseInt($(this).closest('.palette').find('input[name="id"]').val()); let id = parseInt($(this).closest('.palette').find('input[name="id"]').val());
// 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') {
@ -467,7 +467,7 @@ $(document).ready(function() {
}); });
$(document).on('change', '#threshold', function() { $(document).on('change', '#threshold', function() {
var newValue = parseInt($(this).val()); let newValue = parseInt($(this).val());
if (newValue < tileMatchThreshold) { if (newValue < tileMatchThreshold) {
// set tiles back to default // set tiles back to default
@ -490,23 +490,23 @@ $(document).ready(function() {
$('#save').on('click touchend', function() { $('#save').on('click touchend', function() {
$textArea = $('textarea'); $textArea = $('textarea');
var newGameData = $textArea.val(); let newGameData = $textArea.val();
// handle rooms // handle rooms
// need to import IDs so we don't give the new room a conflicting ID // need to import IDs so we don't give the new room a conflicting ID
var roomIds = newGameData.match(/ROOM \d+\n/g); let roomIds = newGameData.match(/ROOM \d+\n/g);
roomIds = _.map(roomIds, function(roomId) { roomIds = _.map(roomIds, function(roomId) {
return parseInt(roomId.replace(/[^\d]+/g, "")); return parseInt(roomId.replace(/[^\d]+/g, ""));
}); });
var newRoomId = _.max(roomIds) + 1; let newRoomId = _.max(roomIds) + 1;
var newRoomName = $('#roomName').val(); let newRoomName = $('#roomName').val();
// remove invalid chars? what's invalid? newlines? are those possible? // remove invalid chars? what's invalid? newlines? are those possible?
var newRoom = "ROOM " + newRoomId + "\n"; let newRoom = "ROOM " + newRoomId + "\n";
_.each(room, function(row) { _.each(room, function(row) {
newRoom += _.toString(row) + "\n"; newRoom += _.toString(row) + "\n";
@ -522,8 +522,8 @@ $(document).ready(function() {
// handle tiles // handle tiles
var newTiles = _.filter(bitsyData.tiles, 'new'); let newTiles = _.filter(bitsyData.tiles, 'new');
var tileText = ""; let tileText = "";
_.each(newTiles, function(tile, n) { _.each(newTiles, function(tile, n) {
tileText += "TIL " + tile.name + "\n"; //again, rename tile name to id... tileText += "TIL " + tile.name + "\n"; //again, rename tile name to id...