365 lines
11 KiB
JavaScript
365 lines
11 KiB
JavaScript
const NeomojiMixer = (function(NeomojiMixer) {
|
|
//global variables
|
|
|
|
const color_names = [
|
|
"blue",
|
|
"lightgrey",
|
|
"orange",
|
|
"red",
|
|
"white",
|
|
"yellow",
|
|
"lightbrown",
|
|
];
|
|
let selected_color = "blue";
|
|
let color_change_callbacks = [];
|
|
|
|
//shotnames for HTML elements to interact with
|
|
|
|
const canvas = document.getElementById("canvas_export");
|
|
const export_img = document.getElementById("imageExport");
|
|
const export_img_download = document.getElementById("imageExportLink");
|
|
const neomoji_name = document.getElementById("fullNeomojiName");
|
|
|
|
//Stats
|
|
const stats = document.getElementById("stats");
|
|
|
|
function onColorChange() {
|
|
for (let i = 0; i < color_change_callbacks.length; i++) {
|
|
if (color_change_callbacks[i]) {
|
|
color_change_callbacks[i]();
|
|
}
|
|
}
|
|
}
|
|
|
|
function PartHandler(name) {
|
|
this.name = name;
|
|
this.entries = []; //Arrays to hold the parts
|
|
this.entry_indices = []; //Maps selected_index to entries index
|
|
this.selected_index = 0; //index_color -> arms.selected_index; index_arms -> arms.entry_indices[arms.selected_index]
|
|
this.image_element = document.getElementById(name + "_img");
|
|
this.name_element = document.getElementById(name + "_name");
|
|
this.button_left = document.getElementById(name + "_left");
|
|
this.button_right = document.getElementById(name + "_right");
|
|
}
|
|
|
|
PartHandler.prototype = {
|
|
fillArray: function(item) {
|
|
let name = item.name;
|
|
let url = item.url;
|
|
this.entries.push([name, url]); //Two dimensional array, Second dimension holds name on index 0 and url at index 1
|
|
},
|
|
fillIndices: function() {
|
|
for (let i = 0; i < this.entries.length; i++) {
|
|
this.entry_indices.push(i); //By default preserve index
|
|
}
|
|
},
|
|
getSelectedEntry: function() {
|
|
return this.entries[this.entry_indices[this.selected_index]];
|
|
},
|
|
setIndex: function(index) {
|
|
const modulo = this.entry_indices.length; //Check if index is too big for the array
|
|
if (!modulo) {
|
|
this.selected_index = 0; //Error
|
|
} else {
|
|
index %= modulo;
|
|
if (index < 0) {
|
|
index += modulo;
|
|
}
|
|
this.selected_index = index;
|
|
}
|
|
this.redraw();
|
|
},
|
|
redraw: function() {
|
|
const entry = this.getSelectedEntry();
|
|
this.image_element.src = "." + entry[1]; //Change URL of picture
|
|
//Change name in controls
|
|
this.updateOptions();
|
|
this.name_element.selectedIndex = this.selected_index;
|
|
},
|
|
onClickNext: function() {
|
|
this.setIndex(this.selected_index + 1);
|
|
},
|
|
onClickPrev: function() {
|
|
this.setIndex(this.selected_index - 1);
|
|
},
|
|
onChangeDropdown: function() {
|
|
this.setIndex(this.name_element.selectedIndex);
|
|
},
|
|
activateControls: function() {
|
|
this.button_left.disabled = false;
|
|
this.button_right.disabled = false;
|
|
this.name_element.disabled = false;
|
|
},
|
|
randomize: function() {
|
|
this.setIndex(Math.floor(Math.random() * this.entry_indices.length));
|
|
},
|
|
createExportImage: function() {
|
|
const entry = this.getSelectedEntry();
|
|
let img = new Image();
|
|
img.src = "." + entry[1];
|
|
return img;
|
|
},
|
|
updateOptions: function() {
|
|
const options = this.name_element.options;
|
|
for (let i = 0; i < this.entry_indices.length; i++) {
|
|
const index = this.entry_indices[i];
|
|
const entry = this.entries[index];
|
|
if (options.length > i && options[i].value == entry[0]) {
|
|
continue;
|
|
} else {
|
|
const option = new Option(entry[0], entry[0], false, this.selected_index == i);
|
|
if (this.name_element.length <= i) {
|
|
this.name_element.add(option);
|
|
} else {
|
|
this.name_element.remove(i);
|
|
this.name_element.add(option, i);
|
|
}
|
|
}
|
|
}
|
|
},
|
|
};
|
|
|
|
function ColoredPartHandler(name) {
|
|
PartHandler.call(this, name);
|
|
//For all the different colours of the arms there will be each a own array
|
|
this.colored_indices = Object.create(null);
|
|
for (let i = 0; i < color_names.length; i++) {
|
|
this.colored_indices[color_names[i]] = [];
|
|
}
|
|
this.entry_indices = this.colored_indices[selected_color];
|
|
const that = this;
|
|
color_change_callbacks.push(function() {
|
|
that.onColorChange();
|
|
});
|
|
}
|
|
|
|
ColoredPartHandler.prototype = Object.assign(Object.create(PartHandler.prototype), {
|
|
constructor: PartHandler,
|
|
fillArray: function(item) {
|
|
let name = item.name;
|
|
let url = item.url;
|
|
let color = item.color;
|
|
this.entries.push([name, url, color]); //Two dimensional array, Second dimension holds name on index 0, url at index 1, and color at index 2
|
|
},
|
|
fillIndices: function() {
|
|
for (let i = 0; i < this.entries.length; i++) {
|
|
const color = this.entries[i][2];
|
|
if (color == "") {
|
|
//All colors
|
|
for (let j in this.colored_indices) {
|
|
this.colored_indices[j].push(i);
|
|
}
|
|
} else {
|
|
const indices = this.colored_indices[color];
|
|
if (indices == undefined) {
|
|
console.log("Cannot register " + this.name + " with unknown color: " + color);
|
|
} else {
|
|
indices.push(i);
|
|
}
|
|
}
|
|
}
|
|
},
|
|
onColorChange: function() {
|
|
this.entry_indices = this.colored_indices[selected_color];
|
|
this.redraw();
|
|
},
|
|
});
|
|
|
|
function BodyPartHandler(name) {
|
|
PartHandler.call(this, name);
|
|
}
|
|
|
|
BodyPartHandler.prototype = Object.assign(Object.create(PartHandler.prototype), {
|
|
constructor: PartHandler,
|
|
fillArray: ColoredPartHandler.prototype.fillArray,
|
|
setIndex: function(index) {
|
|
const modulo = this.entry_indices.length; //Check if index is too big for the array
|
|
if (!modulo) {
|
|
this.selected_index = 0; //Error
|
|
} else {
|
|
index %= modulo;
|
|
if (index < 0) {
|
|
index += modulo;
|
|
}
|
|
this.selected_index = index;
|
|
}
|
|
this.redraw();
|
|
const entry = this.getSelectedEntry();
|
|
selected_color = entry[2]; //Global
|
|
onColorChange(); //Global
|
|
},
|
|
});
|
|
|
|
const part_handlers = {
|
|
body: new BodyPartHandler("body"),
|
|
eyes: new PartHandler("eyes"),
|
|
mouth: new PartHandler("mouth"),
|
|
arms: new ColoredPartHandler("arms"),
|
|
};
|
|
|
|
|
|
// Loading the JSON and getting all the available parts
|
|
async function getData() {
|
|
fetch('./parts.json')
|
|
.then(function(response) {
|
|
return response.json();
|
|
})
|
|
.then(function(data) {
|
|
loadParts(data);
|
|
})
|
|
.catch(function(error) {
|
|
console.log('An error occurred:', error);
|
|
});
|
|
}
|
|
|
|
function loadParts(parts) {
|
|
//Load parts into Arrays
|
|
for (const i in part_handlers) {
|
|
parts.type[i].forEach(function(p) {part_handlers[i].fillArray(p);});
|
|
}
|
|
|
|
//find the indexes of each part of the corresponding color and write those into the color arrays
|
|
for (const i in part_handlers) {
|
|
part_handlers[i].fillIndices();
|
|
}
|
|
|
|
//Randomize initial view
|
|
randomize();
|
|
|
|
// If there was a hash, restore as a direct permalink.
|
|
if (document.location.hash != "") {
|
|
loadFromHash(document.location.hash);
|
|
}
|
|
window.addEventListener("hashchange", () => {
|
|
loadFromHash(document.location.hash);
|
|
});
|
|
|
|
//Show little statistic
|
|
var sum = 0;
|
|
var variety = 1;
|
|
for (const i in part_handlers) {
|
|
sum += part_handlers[i].entries.length;
|
|
variety *= part_handlers[i].entry_indices.length;
|
|
}
|
|
|
|
stats.innerHTML = "There are " + sum + " Elements available,<br />with " + new Intl.NumberFormat("de-DE").format(variety) + " possible combinations.";
|
|
|
|
//Activate the buttons after everything is loaded in
|
|
for (const i in part_handlers) {
|
|
part_handlers[i].activateControls();
|
|
}
|
|
document.getElementById("random").disabled = false;
|
|
document.getElementById("export").disabled = false;
|
|
|
|
}
|
|
|
|
function loadFromHash(hash) {
|
|
let parts = hash
|
|
.slice(1) // the first character is always the '#' sign
|
|
.split('+');
|
|
|
|
// define a constant order for the parts to appear in the hash
|
|
const parts_order = ["body", "eyes", "mouth", "arms"];
|
|
|
|
if (parts.length == parts_order.length) {
|
|
// convert the part names to part indices
|
|
parts = parts.map((name, i) =>
|
|
Array.from(part_handlers[parts_order[i]].name_element.options).findIndex(x => x.value === name)
|
|
);
|
|
if (parts.every(x => x != -1)) {
|
|
// all part names were found
|
|
parts.forEach((part_index, i) => part_handlers[parts_order[i]].setIndex(part_index));
|
|
}
|
|
}
|
|
}
|
|
|
|
function randomize() { //Randomize which parts are shown
|
|
for (const i in part_handlers) {
|
|
part_handlers[i].randomize();
|
|
}
|
|
}
|
|
|
|
function exportImage() { //Export image so it can be saved as one PNG
|
|
let ctx=canvas.getContext("2d");
|
|
let export_mime = document.getElementById("export-mime").value;
|
|
let export_options = undefined;
|
|
if (document.getElementById("export-quality-enabled").checked) {
|
|
export_options = +document.getElementById("export-quality").value;
|
|
}
|
|
|
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
|
|
|
//Set name for the emoji to use as the image name and to show as shortcode
|
|
let name = part_handlers.body.getSelectedEntry()[0] + "_" + part_handlers.eyes.getSelectedEntry()[0] + "_" + part_handlers.mouth.getSelectedEntry()[0] + "_" + part_handlers.arms.getSelectedEntry()[0];
|
|
neomoji_name.innerText = name;
|
|
neomoji_name.href = new URL("#" + part_handlers.body.getSelectedEntry()[0] + "+" + part_handlers.eyes.getSelectedEntry()[0] + "+" + part_handlers.mouth.getSelectedEntry()[0] + "+" + part_handlers.arms.getSelectedEntry()[0], document.location.href)
|
|
|
|
let export_layers = [
|
|
part_handlers.body.createExportImage(),
|
|
part_handlers.eyes.createExportImage(),
|
|
part_handlers.mouth.createExportImage(),
|
|
part_handlers.arms.createExportImage(),
|
|
];
|
|
|
|
function layerCallback() {
|
|
while (export_layers.length) {
|
|
const layer = export_layers[0];
|
|
if (!layer.complete) {
|
|
layer.onload = layerCallback;
|
|
return; //Wait to load
|
|
}
|
|
//Finished waiting
|
|
export_layers.shift()
|
|
ctx.drawImage(layer, 0, 0, 256, 256);
|
|
}
|
|
let img = canvas.toDataURL(export_mime, export_options);
|
|
export_img.src = img;
|
|
export_img_download.href = img;
|
|
export_img_download.download = name + "." + (export_mime.match(/\/(\w+)/) || ["", "png"])[1];
|
|
}
|
|
|
|
setTimeout(layerCallback, 0); //Run asynchronously
|
|
|
|
export_img.hidden = false;
|
|
export_img_download.hidden = false;
|
|
neomoji_name.hidden = false;
|
|
document.getElementById("exportSaveMessage").hidden = false;
|
|
}
|
|
|
|
NeomojiMixer.PartHandler = PartHandler;
|
|
NeomojiMixer.ColoredPartHandler = ColoredPartHandler;
|
|
NeomojiMixer.BodyPartHandler = BodyPartHandler;
|
|
|
|
NeomojiMixer.color_names = color_names;
|
|
NeomojiMixer.color_change_callbacks = color_change_callbacks;
|
|
NeomojiMixer.part_handlers = part_handlers;
|
|
NeomojiMixer.onColorChange = onColorChange;
|
|
NeomojiMixer.getData = getData;
|
|
NeomojiMixer.loadParts = loadParts;
|
|
NeomojiMixer.randomize = randomize;
|
|
NeomojiMixer.exportImage = exportImage;
|
|
NeomojiMixer.canvas = canvas;
|
|
NeomojiMixer.export_img = export_img;
|
|
NeomojiMixer.neomoji_name = neomoji_name;
|
|
NeomojiMixer.stats = stats;
|
|
|
|
Object.defineProperty(NeomojiMixer, 'selected_color', {
|
|
enumerable: true,
|
|
configurable: true,
|
|
get: function() {
|
|
return selected_color;
|
|
},
|
|
set: function(value) {
|
|
selected_color = value;
|
|
onColorChange();
|
|
},
|
|
});
|
|
|
|
return NeomojiMixer;
|
|
})(window.NeomojiMixer || {});
|
|
|
|
|
|
//Main Programm
|
|
document.getElementById("noJSmessage").hidden = true;
|
|
NeomojiMixer.getData();
|