var -> let
This commit is contained in:
parent
c554a2311a
commit
96bd2a9dec
|
|
@ -1,11 +1,11 @@
|
|||
$(document).ready(function() {
|
||||
// todo define things like 16x16, 128x128 etc. as constants?
|
||||
// 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,
|
||||
background: {
|
||||
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',
|
||||
viewport: {width: 128, height: 128, type: 'square'},
|
||||
boundary: {width: 256, height: 256},
|
||||
zoom: 0
|
||||
};
|
||||
|
||||
var $croppie = $('#croppie');
|
||||
let $croppie = $('#croppie');
|
||||
|
||||
$croppie.croppie(croptions);
|
||||
|
||||
function colourDifference(colour1, colour2) {
|
||||
var difference = {};
|
||||
let difference = {};
|
||||
|
||||
_.each(['red', 'green', 'blue'], function(key) {
|
||||
difference[key] = Math.abs(colour1[key] - colour2[key]);
|
||||
|
|
@ -64,7 +64,7 @@ $(document).ready(function() {
|
|||
}
|
||||
|
||||
function hexToColour(hex) {
|
||||
var rgb = hex.match(/[\da-f]{2}/gi);
|
||||
let rgb = hex.match(/[\da-f]{2}/gi);
|
||||
|
||||
return {
|
||||
red: parseInt(rgb[0], 16),
|
||||
|
|
@ -87,9 +87,9 @@ $(document).ready(function() {
|
|||
}
|
||||
|
||||
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) {
|
||||
i++;
|
||||
|
|
@ -100,7 +100,7 @@ $(document).ready(function() {
|
|||
}
|
||||
|
||||
function handleBitsyGameData() {
|
||||
var input = $('#bitsy-data').val();
|
||||
let input = $('#bitsy-data').val();
|
||||
|
||||
if ( ! input) {
|
||||
return;
|
||||
|
|
@ -109,14 +109,14 @@ $(document).ready(function() {
|
|||
bitsyData = {};
|
||||
|
||||
// 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 = {};
|
||||
|
||||
// do palettes always go 0..n?
|
||||
// will this cause problems if not?
|
||||
_.each(palettes, function(palette, n) {
|
||||
var name = "";
|
||||
let name = "";
|
||||
|
||||
if (palette.match(/NAME (.+)\n/)) {
|
||||
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");
|
||||
}
|
||||
|
||||
var colours = palette.match(/\d+,\d+,\d+/g);
|
||||
let colours = palette.match(/\d+,\d+,\d+/g);
|
||||
|
||||
colours = _.map(colours, function(colour) {
|
||||
var rgb = colour.split(',');
|
||||
let rgb = colour.split(',');
|
||||
|
||||
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
|
||||
// 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) {
|
||||
var name = tile.match(/TIL .*/)[0].replace('TIL ', '');
|
||||
let name = tile.match(/TIL .*/)[0].replace('TIL ', '');
|
||||
|
||||
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,
|
||||
new: false
|
||||
};
|
||||
|
|
@ -219,7 +219,7 @@ $(document).ready(function() {
|
|||
|
||||
function readFile(input, callback) {
|
||||
if (input.files && input.files[0]) {
|
||||
var reader = new FileReader();
|
||||
let reader = new FileReader();
|
||||
|
||||
reader.onload = callback;
|
||||
|
||||
|
|
@ -229,7 +229,7 @@ $(document).ready(function() {
|
|||
|
||||
function readTextFile(input, callback) {
|
||||
if (input.files && input.files[0]) {
|
||||
var reader = new FileReader();
|
||||
let reader = new FileReader();
|
||||
|
||||
reader.onload = callback;
|
||||
|
||||
|
|
@ -242,22 +242,22 @@ $(document).ready(function() {
|
|||
type: 'rawcanvas',
|
||||
size: 'viewport'
|
||||
}).then(function (result) {
|
||||
var imageData = result.getContext('2d').getImageData(0, 0, 128, 128);
|
||||
var rawData = imageData.data;
|
||||
var monochrome = [];
|
||||
let imageData = result.getContext('2d').getImageData(0, 0, 128, 128);
|
||||
let rawData = imageData.data;
|
||||
let monochrome = [];
|
||||
|
||||
var brightnessAdjustment = parseFloat($('#brightness').val());
|
||||
let brightnessAdjustment = parseFloat($('#brightness').val());
|
||||
|
||||
// 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
|
||||
var pixel = {
|
||||
let pixel = {
|
||||
red: _.clamp(rawData[i ] + brightnessAdjustment, 0, 255),
|
||||
green: _.clamp(rawData[i + 1] + 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") {
|
||||
monochrome.push(0);
|
||||
|
|
@ -283,7 +283,7 @@ $(document).ready(function() {
|
|||
_.times(16, function(tileY) {
|
||||
_.times(16, function(tileX) {
|
||||
// make pseudo-tile from monochrome bitmap
|
||||
var pseudoTile = [];
|
||||
let pseudoTile = [];
|
||||
|
||||
_.times(8, function(y) {
|
||||
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 (tileMatchThreshold === 64) {
|
||||
|
|
@ -330,8 +330,8 @@ $(document).ready(function() {
|
|||
|
||||
// what if there are several equally good matches?
|
||||
// find highest match amount and find all of them
|
||||
var bestMatchAmount = _.last(_.sortBy(bitsyData.tiles, ['match'])).match;
|
||||
var bestMatches = _.filter(bitsyData.tiles, {'match': bestMatchAmount});
|
||||
let bestMatchAmount = _.last(_.sortBy(bitsyData.tiles, ['match'])).match;
|
||||
let bestMatches = _.filter(bitsyData.tiles, {'match': bestMatchAmount});
|
||||
|
||||
// sort by name in ascending order
|
||||
// earlier names are preferable
|
||||
|
|
@ -341,7 +341,7 @@ $(document).ready(function() {
|
|||
if ( ! bestMatch || bestMatch.match < tileMatchThreshold) {
|
||||
// turn pseudo-tile into a real tile and add it to the tile data
|
||||
|
||||
var name = newTileName();
|
||||
let name = newTileName();
|
||||
|
||||
bitsyData.tiles.push({
|
||||
name: name,
|
||||
|
|
@ -370,15 +370,15 @@ $(document).ready(function() {
|
|||
|
||||
_.each(room, function(row, tileY) {
|
||||
_.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(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
|
||||
|
||||
var pixelColour = {};
|
||||
let pixelColour = {};
|
||||
|
||||
switch(parseInt(pixel)) {
|
||||
case 0: pixelColour = palette.background; break;
|
||||
|
|
@ -399,12 +399,12 @@ $(document).ready(function() {
|
|||
});
|
||||
}
|
||||
|
||||
var renderDebounced = _.debounce(render, 30);
|
||||
var renderThrottled = _.throttle(render, 30);
|
||||
let renderDebounced = _.debounce(render, 30);
|
||||
let renderThrottled = _.throttle(render, 30);
|
||||
|
||||
$croppie.on('update', renderDebounced);
|
||||
|
||||
var $brightness = $('#brightness');
|
||||
let $brightness = $('#brightness');
|
||||
|
||||
$brightness.on('change', renderThrottled);
|
||||
|
||||
|
|
@ -418,7 +418,7 @@ $(document).ready(function() {
|
|||
$('#brightness').trigger('dblclick');
|
||||
});
|
||||
|
||||
var $bitsyData = $('#bitsy-data');
|
||||
let $bitsyData = $('#bitsy-data');
|
||||
|
||||
$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
|
||||
$(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).attr('type') === 'color') {
|
||||
|
|
@ -467,7 +467,7 @@ $(document).ready(function() {
|
|||
});
|
||||
|
||||
$(document).on('change', '#threshold', function() {
|
||||
var newValue = parseInt($(this).val());
|
||||
let newValue = parseInt($(this).val());
|
||||
|
||||
if (newValue < tileMatchThreshold) {
|
||||
// set tiles back to default
|
||||
|
|
@ -490,23 +490,23 @@ $(document).ready(function() {
|
|||
$('#save').on('click touchend', function() {
|
||||
$textArea = $('textarea');
|
||||
|
||||
var newGameData = $textArea.val();
|
||||
let newGameData = $textArea.val();
|
||||
|
||||
// handle rooms
|
||||
|
||||
// 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) {
|
||||
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?
|
||||
|
||||
var newRoom = "ROOM " + newRoomId + "\n";
|
||||
let newRoom = "ROOM " + newRoomId + "\n";
|
||||
|
||||
_.each(room, function(row) {
|
||||
newRoom += _.toString(row) + "\n";
|
||||
|
|
@ -522,8 +522,8 @@ $(document).ready(function() {
|
|||
|
||||
// handle tiles
|
||||
|
||||
var newTiles = _.filter(bitsyData.tiles, 'new');
|
||||
var tileText = "";
|
||||
let newTiles = _.filter(bitsyData.tiles, 'new');
|
||||
let tileText = "";
|
||||
|
||||
_.each(newTiles, function(tile, n) {
|
||||
tileText += "TIL " + tile.name + "\n"; //again, rename tile name to id...
|
||||
|
|
|
|||
Loading…
Reference in New Issue