2024-04-19 22:11:07 +03:00
//global variables
//Arrays to hold the parts
let eyes = [ ] ;
let body = [ ] ;
let mouth = [ ] ;
let arms = [ ] ;
//Index to easily find when to roll back to the first/last element in the list
let inex _eyes = 0 ;
let index _body = 0 ;
let index _mouth = 0 ;
let index _arms = 0 ;
//shotnames for HTML elements to interact with
//images
const body _image = document . getElementById ( "body_img" ) ;
const eyes _image = document . getElementById ( "eyes_img" ) ;
const mouth _image = document . getElementById ( "mouth_img" ) ;
const arms _image = document . getElementById ( "arms_img" ) ;
const canvas = document . getElementById ( "canvas_export" ) ;
2024-04-20 00:07:56 +03:00
const export _img = document . getElementById ( "imageExport" ) ;
2024-04-19 22:11:07 +03:00
const neomoji _name = document . getElementById ( "fullNeomojiName" ) ;
//names
const body _name = document . getElementById ( "body_name" ) ;
const eyes _name = document . getElementById ( "eyes_name" ) ;
const mouth _name = document . getElementById ( "mouth_name" ) ;
const arms _name = document . getElementById ( "arms_name" ) ;
//Stats
const stats = document . getElementById ( "stats" ) ;
// 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
parts . type . eyes . forEach ( fillArrayEyes ) ;
parts . type . body . forEach ( fillArrayBody ) ;
parts . type . mouth . forEach ( fillArrayMouth ) ;
parts . type . arms . forEach ( fillArrayArms ) ;
//Randomize initial view
randomize ( ) ;
//Show little statistic
var sum = body . length + eyes . length + mouth . length + arms . length ;
var variety = body . length * eyes . length * mouth . length * arms . 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
document . getElementById ( "body_left" ) . disabled = false ;
document . getElementById ( "body_right" ) . disabled = false ;
document . getElementById ( "eyes_left" ) . disabled = false ;
document . getElementById ( "eyes_right" ) . disabled = false ;
document . getElementById ( "mouth_left" ) . disabled = false ;
document . getElementById ( "mouth_right" ) . disabled = false ;
document . getElementById ( "arms_left" ) . disabled = false ;
document . getElementById ( "arms_right" ) . disabled = false ;
document . getElementById ( "random" ) . disabled = false ;
document . getElementById ( "export" ) . disabled = false ;
}
function fillArrayEyes ( item ) {
var name = item . name ;
var url = item . url ;
eyes . push ( [ name , url ] ) ; //Two dimensional array, Second dimension holds name on index 0 and url at index 1
}
function fillArrayBody ( item ) {
var name = item . name ;
var url = item . url ;
body . push ( [ name , url ] ) ; //Two dimensional array, Second dimension holds name on index 0 and url at index 1
}
function fillArrayMouth ( item ) {
var name = item . name ;
var url = item . url ;
mouth . push ( [ name , url ] ) ; //Two dimensional array, Second dimension holds name on index 0 and url at index 1
}
function fillArrayArms ( item ) {
var name = item . name ;
var url = item . url ;
arms . push ( [ name , url ] ) ; //Two dimensional array, Second dimension holds name on index 0 and url at index 1
}
function onClick _body _next ( ) {
index _body ++ ;
if ( index _body == body . length ) { index _body = 0 ; } //check if index is too big for the array
body _image . src = "." + body [ index _body ] [ 1 ] ; //Change URL of picture
body _name . innerHTML = body [ index _body ] [ 0 ] ; //Change name in controls
}
function onClick _body _prev ( ) {
index _body -- ;
if ( index _body < 0 ) { index _body = ( body . length - 1 ) ; } //check if index is too big for the array
body _image . src = "." + body [ index _body ] [ 1 ] ; //Change URL of picture
body _name . innerHTML = body [ index _body ] [ 0 ] ; //Change name in controls
}
function onClick _eyes _next ( ) {
index _eyes ++ ;
if ( index _eyes == eyes . length ) { index _eyes = 0 ; } //check if index is too big for the array
eyes _image . src = "." + eyes [ index _eyes ] [ 1 ] ; //Change URL of picture
eyes _name . innerHTML = eyes [ index _eyes ] [ 0 ] ; //Change name in controls
}
function onClick _eyes _prev ( ) {
index _eyes -- ;
if ( index _eyes < 0 ) { index _eyes = ( eyes . length - 1 ) ; } //check if index is too big for the array
eyes _image . src = "." + eyes [ index _eyes ] [ 1 ] ; //Change URL of picture
eyes _name . innerHTML = eyes [ index _eyes ] [ 0 ] ; //Change name in controls
}
function onClick _mouth _next ( ) {
index _mouth ++ ;
if ( index _mouth == mouth . length ) { index _mouth = 0 ; } //check if index is too big for the array
mouth _image . src = "." + mouth [ index _mouth ] [ 1 ] ; //Change URL of picture
mouth _name . innerHTML = mouth [ index _mouth ] [ 0 ] ; //Change name in controls
}
function onClick _mouth _prev ( ) {
index _mouth -- ;
if ( index _mouth < 0 ) { index _mouth = ( mouth . length - 1 ) ; } //check if index is too big for the array
mouth _image . src = "." + mouth [ index _mouth ] [ 1 ] ; //Change URL of picture
mouth _name . innerHTML = mouth [ index _mouth ] [ 0 ] ; //Change name in controls
}
function onClick _arms _next ( ) {
index _arms ++ ;
if ( index _arms == arms . length ) { index _arms = 0 ; } //check if index is too big for the array
arms _image . src = "." + arms [ index _arms ] [ 1 ] ; //Change URL of picture
arms _name . innerHTML = arms [ index _arms ] [ 0 ] ; //Change name in controls
}
function onClick _arms _prev ( ) {
index _arms -- ;
if ( index _arms < 0 ) { index _arms = ( arms . length - 1 ) ; } //check if index is too big for the array
arms _image . src = "." + arms [ index _arms ] [ 1 ] ; //Change URL of picture
arms _name . innerHTML = arms [ index _arms ] [ 0 ] ; //Change name in controls
}
function randomize ( ) { //Randomize which parts are shown
index _body = Math . floor ( Math . random ( ) * body . length ) ;
index _eyes = Math . floor ( Math . random ( ) * eyes . length ) ;
index _mouth = Math . floor ( Math . random ( ) * mouth . length ) ;
index _arms = Math . floor ( Math . random ( ) * arms . length ) ;
body _image . src = "." + body [ index _body ] [ 1 ] ;
eyes _image . src = "." + eyes [ index _eyes ] [ 1 ] ;
mouth _image . src = "." + mouth [ index _mouth ] [ 1 ] ;
arms _image . src = "." + arms [ index _arms ] [ 1 ] ;
body _name . innerHTML = body [ index _body ] [ 0 ] ;
eyes _name . innerHTML = eyes [ index _eyes ] [ 0 ] ;
mouth _name . innerHTML = mouth [ index _mouth ] [ 0 ] ;
arms _name . innerHTML = arms [ index _arms ] [ 0 ] ;
}
function exportImage ( ) { //Export image so it can be saved as one PNG
2024-04-20 00:07:56 +03:00
let ctx = canvas . getContext ( "2d" ) ;
2024-04-19 22:11:07 +03:00
ctx . clearRect ( 0 , 0 , canvas . width , canvas . height ) ;
2024-04-20 00:07:56 +03:00
neomoji _name . value = body [ index _body ] [ 0 ] + "_" + eyes [ index _eyes ] [ 0 ] + "_" + mouth [ index _mouth ] [ 0 ] + "_" + arms [ index _arms ] [ 0 ] ; //Set name for the emoji to use as the image name and to show as shortcode
let body _export = new Image ( ) ;
let eyes _export = new Image ( ) ;
let mouth _export = new Image ( ) ;
let arms _export = new Image ( ) ;
2024-04-19 22:11:07 +03:00
body _export . src = "." + body [ index _body ] [ 1 ] ;
body _export . onload = function ( ) {
ctx . drawImage ( body _export , 0 , 0 , 256 , 256 ) ;
eyes _export . src = "." + eyes [ index _eyes ] [ 1 ] ;
eyes _export . onload = function ( ) {
ctx . drawImage ( eyes _export , 0 , 0 , 256 , 256 ) ;
mouth _export . src = "." + mouth [ index _mouth ] [ 1 ] ;
mouth _export . onload = function ( ) {
ctx . drawImage ( mouth _export , 0 , 0 , 256 , 256 ) ;
arms _export . src = "." + arms [ index _arms ] [ 1 ] ;
arms _export . onload = function ( ) {
ctx . drawImage ( arms _export , 0 , 0 , 256 , 256 ) ;
2024-04-20 00:07:56 +03:00
let img = canvas . toDataURL ( "image/png" ) ;
export _img . src = img ;
2024-04-19 22:11:07 +03:00
}
}
}
} ;
2024-04-20 00:07:56 +03:00
export _img . hidden = false ;
2024-04-19 22:11:07 +03:00
neomoji _name . hidden = false ;
document . getElementById ( "exportSaveMessage" ) . hidden = false ;
}
//Main Programm
document . getElementById ( "noJSmessage" ) . hidden = true ;
getData ( ) ;