851 lines
68 KiB
JavaScript
851 lines
68 KiB
JavaScript
|
/*
|
||
|
|
*-----------------------------------------
|
||
|
|
* Project: Habbo Avatar Generator
|
||
|
|
* Created by: Synt4x (Skype name: musecms)
|
||
|
|
* Project Started: 26/06/2016
|
||
|
|
* Project Ended: 27/06/2016
|
||
|
|
*
|
||
|
|
*/
|
||
|
|
|
||
|
|
(function ( $ ) {
|
||
|
|
|
||
|
|
|
||
|
|
/*
|
||
|
|
* Create a new instance of AvatarGenerate
|
||
|
|
* that will be loaded once has finished loading.
|
||
|
|
*/
|
||
|
|
|
||
|
|
var AG = new AvatarGenerate();
|
||
|
|
|
||
|
|
|
||
|
|
/*
|
||
|
|
* If you wish to update replace the JSON values
|
||
|
|
* with the ones that were generated by the PHP
|
||
|
|
* script that acompanies the javascript.
|
||
|
|
*
|
||
|
|
*/
|
||
|
|
|
||
|
|
var palettesJSON = {"1":{"1":{"index":0,"club":0,"selectable":1,"hex":"FFCB98"},"2":{"index":1,"club":0,"selectable":1,"hex":"E3AE7D"},"3":{"index":2,"club":0,"selectable":1,"hex":"C99263"},"4":{"index":3,"club":0,"selectable":1,"hex":"AE7748"},"5":{"index":4,"club":0,"selectable":1,"hex":"945C2F"},"6":{"index":5,"club":0,"selectable":1,"hex":"6E482C"},"7":{"index":6,"club":0,"selectable":1,"hex":"FFC680"},"8":{"index":7,"club":0,"selectable":1,"hex":"F4AC54"},"9":{"index":8,"club":0,"selectable":1,"hex":"DC9B4C"},"10":{"index":9,"club":0,"selectable":1,"hex":"FFDBC1"},"11":{"index":10,"club":0,"selectable":1,"hex":"FFB696"},"12":{"index":11,"club":0,"selectable":1,"hex":"FF987F"},"13":{"index":12,"club":0,"selectable":1,"hex":"F0DCA3"},"14":{"index":13,"club":0,"selectable":1,"hex":"F5DA88"},"15":{"index":14,"club":0,"selectable":1,"hex":"DFC375"},"16":{"index":15,"club":0,"selectable":1,"hex":"EFD17D"},"17":{"index":16,"club":0,"selectable":1,"hex":"C89F56"},"18":{"index":17,"club":0,"selectable":1,"hex":"A89473"},"19":{"index":18,"club":0,"selectable":1,"hex":"B87560"},"20":{"index":19,"club":0,"selectable":1,"hex":"9C543F"},"21":{"index":20,"club":0,"selectable":1,"hex":"6E392C"},"22":{"index":21,"club":0,"selectable":1,"hex":"EAEFD0"},"23":{"index":22,"club":0,"selectable":1,"hex":"E2E4B0"},"24":{"index":23,"club":0,"selectable":1,"hex":"D5D08C"},"25":{"index":24,"club":0,"selectable":1,"hex":"C4A7B3"},"26":{"index":25,"club":0,"selectable":1,"hex":"C2C4A7"},"27":{"index":26,"club":0,"selectable":1,"hex":"C5C0C2"},"28":{"index":27,"club":0,"selectable":1,"hex":"F1E5DA"},"29":{"index":28,"club":0,"selectable":1,"hex":"B3BDC3"},"30":{"index":29,"club":0,"selectable":1,"hex":"4C311E"},"1001":{"index":30,"club":0,"selectable":0,"hex":"644628"},"1002":{"index":31,"club":0,"selectable":0,"hex":"926338"},"1003":{"index":32,"club":0,"selectable":0,"hex":"A97C44"},"1004":{"index":33,"club":0,"selectable":0,"hex":"B3957F"},"1005":{"index":34,"club":0,"selectable":0,"hex":"BD9562"},"1006":{"index":35,"club":0,"selectable":0,"hex":"C2A896"},"1007":{"index":36,"club":0,"selectable":0,"hex":"CA9072"},"1008":{"index":37,"club":0,"selectable":0,"hex":"CBBC90"},"1009":{"index":38,"club":0,"selectable":0,"hex":"D1A78C"},"1010":{"index":39,"club":0,"selectable":0,"hex":"D1BCAD"},"1011":{"index":40,"club":0,"selectable":0,"hex":"D7BCA9"},"1012":{"index":41,"club":0,"selectable":0,"hex":"D7CBA3"},"1013":{"index":42,"club":0,"selectable":0,"hex":"D8A595"},"1014":{"index":43,"club":0,"selectable":0,"hex":"D8B07E"},"1015":{"index":44,"club":0,"selectable":0,"hex":"E0BD91"},"1016":{"index":45,"club":0,"selectable":0,"hex":"E0D0C5"},"1017":{"index":46,"club":0,"selectable":0,"hex":"E2DBB9"},"1018":{"index":47,"club":0,"selectable":0,"hex":"E3D38D"},"1019":{"index":48,"club":0,"selectable":0,"hex":"E7C9A3"},"1020":{"index":49,"club":0,"selectable":0,"hex":"EDD7BB"},"1021":{"index":50,"club":0,"selectable":0,"hex":"EEE7E0"},"1022":{"index":51,"club":0,"selectable":0,"hex":"EFC3B6"},"1023":{"index":52,"club":0,"selectable":0,"hex":"F1D6B4"},"1024":{"index":53,"club":0,"selectable":0,"hex":"F8E5DA"},"1025":{"index":54,"club":0,"selectable":0,"hex":"FDDACF"},"1026":{"index":55,"club":0,"selectable":0,"hex":"FFCC99"}},"2":{"31":{"index":0,"club":0,"selectable":1,"hex":"FFD6A9"},"32":{"index":1,"club":0,"selectable":1,"hex":"DFA66F"},"33":{"index":2,"club":0,"selectable":1,"hex":"D1803A"},"34":{"index":3,"club":0,"selectable":1,"hex":"FFEEB9"},"35":{"index":4,"club":0,"selectable":1,"hex":"F6D059"},"36":{"index":5,"club":0,"selectable":1,"hex":"F2B11D"},"37":{"index":6,"club":0,"selectable":1,"hex":"9A5D2E"},"38":{"index":7,"club":0,"selectable":1,"hex":"AC5300"},"39":{"index":8,"club":0,"selectable":1,"hex":"783400"},"40":{"index":9,"club":0,"selectable":1,"hex":"D8D3D9"},"41":{"index":10,"club":0,"selectable":1,"hex":"918D98"},"42":{"index":11,"club":0,"selectable":1,"hex":"4A4656"},"43":{"index":12,"club":0,"selectable":1,"hex":"F29159"},"44":{"index":13,"club":0,"selectable":1,"hex":"9E3D3B"},"45":{"index":14,"club":0,"selectable":1,"hex":
|
||
|
|
var setsJSON = [{"paletteid":2,"type":"hr","sets":{"175":{"gender":"M","club":0,"colorable":0,"selectable":0,"preselectable":0},"177":{"gender":"M","club":0,"colorable":0,"selectable":0,"preselectable":0},"145":{"gender":"M","club":0,"colorable":1,"selectable":1,"preselectable":0},"580":{"gender":"F","club":0,"colorable":0,"selectable":0,"preselectable":0},"525":{"gender":"F","club":0,"colorable":1,"selectable":0,"preselectable":0},"550":{"gender":"F","club":0,"colorable":1,"selectable":1,"preselectable":0},"595":{"gender":"F","club":0,"colorable":0,"selectable":0,"preselectable":0},"125":{"gender":"M","club":0,"colorable":1,"selectable":1,"preselectable":0},"140":{"gender":"M","club":0,"colorable":1,"selectable":0,"preselectable":0},"176":{"gender":"M","club":0,"colorable":0,"selectable":0,"preselectable":0},"165":{"gender":"M","club":0,"colorable":1,"selectable":1,"preselectable":0},"676":{"gender":"U","club":0,"colorable":1,"selectable":1,"preselectable":0},"105":{"gender":"M","club":0,"colorable":1,"selectable":1,"preselectable":0},"596":{"gender":"F","club":0,"colorable":0,"selectable":1,"preselectable":0},"130":{"gender":"M","club":0,"colorable":1,"selectable":0,"preselectable":0},"155":{"gender":"M","club":0,"colorable":1,"selectable":1,"preselectable":0},"150":{"gender":"M","club":0,"colorable":1,"selectable":0,"preselectable":0},"500":{"gender":"F","club":0,"colorable":1,"selectable":1,"preselectable":0},"555":{"gender":"F","club":0,"colorable":1,"selectable":1,"preselectable":0},"681":{"gender":"U","club":0,"colorable":1,"selectable":1,"preselectable":0},"510":{"gender":"F","club":0,"colorable":1,"selectable":1,"preselectable":0},"565":{"gender":"F","club":0,"colorable":1,"selectable":0,"preselectable":0},"115":{"gender":"M","club":0,"colorable":1,"selectable":1,"preselectable":0},"170":{"gender":"M","club":0,"colorable":1,"selectable":1,"preselectable":0},"505":{"gender":"F","club":0,"colorable":1,"selectable":1,"preselectable":0},"540":{"gender":"F","club":0,"colorable":1,"selectable":1,"preselectable":0},"530":{"gender":"F","club":0,"colorable":1,"selectable":1,"preselectable":0},"515":{"gender":"F","club":0,"colorable":1,"selectable":1,"preselectable":0},"590":{"gender":"F","club":0,"colorable":0,"selectable":0,"preselectable":0},"100":{"gender":"M","club":0,"colorable":0,"selectable":1,"preselectable":0},"679":{"gender":"U","club":0,"colorable":1,"selectable":1,"preselectable":0},"570":{"gender":"F","club":0,"colorable":1,"selectable":0,"preselectable":0},"585":{"gender":"F","club":0,"colorable":0,"selectable":0,"preselectable":0},"135":{"gender":"M","club":0,"colorable":1,"selectable":1,"preselectable":0},"178":{"gender":"M","club":0,"colorable":0,"selectable":0,"preselectable":0},"575":{"gender":"F","club":0,"colorable":1,"selectable":1,"preselectable":0},"535":{"gender":"F","club":0,"colorable":1,"selectable":0,"preselectable":0},"110":{"gender":"M","club":0,"colorable":1,"selectable":1,"preselectable":0},"520":{"gender":"F","club":0,"colorable":1,"selectable":1,"preselectable":0},"120":{"gender":"M","club":0,"colorable":0,"selectable":0,"preselectable":0},"545":{"gender":"F","club":0,"colorable":1,"selectable":1,"preselectable":0},"160":{"gender":"M","club":0,"colorable":1,"selectable":0,"preselectable":0},"889":{"gender":"M","club":0,"colorable":1,"selectable":1,"preselectable":0},"890":{"gender":"F","club":0,"colorable":1,"selectable":1,"preselectable":0},"891":{"gender":"U","club":0,"colorable":1,"selectable":1,"preselectable":0},"892":{"gender":"U","club":0,"colorable":1,"selectable":1,"preselectable":0},"893":{"gender":"U","club":0,"colorable":1,"selectable":1,"preselectable":0},"802":{"gender":"M","club":1,"colorable":1,"selectable":1,"preselectable":0},"869":{"gender":"F","club":1,"colorable":1,"selectable":0,"preselectable":0},"842":{"gender":"M","club":1,"colorable":1,"selectable":0,"preselectable":0},"840":{"gender":"F","club":1,"colorable":1,"selectable":1,"preselectable":0},"828":{"gender":"M","club":1,"colorable":1,"selectable":1,"preselectable":0},"871":{"gender":"F","club":1,"co
|
||
|
|
|
||
|
|
|
||
|
|
/*
|
||
|
|
* Set both the setTypes and palettes so that we
|
||
|
|
* can get the correct clothes and their colours.
|
||
|
|
*
|
||
|
|
*/
|
||
|
|
|
||
|
|
AG.setTypes( setsJSON );
|
||
|
|
AG.setPalettes( palettesJSON );
|
||
|
|
|
||
|
|
|
||
|
|
/*
|
||
|
|
* jQuery AvatarGenerate Plugin
|
||
|
|
*
|
||
|
|
*/
|
||
|
|
|
||
|
|
$.fn.setClothes = function() {
|
||
|
|
AG.setClothesObject( this );
|
||
|
|
};
|
||
|
|
|
||
|
|
$.fn.setColors = function() {
|
||
|
|
AG.setColorsObject( this );
|
||
|
|
};
|
||
|
|
|
||
|
|
$.fn.setCodeReceiver = function() {
|
||
|
|
AG.setCodeObject( this );
|
||
|
|
};
|
||
|
|
|
||
|
|
|
||
|
|
/*
|
||
|
|
* Set the correct DOM elements to append our
|
||
|
|
* clothes and colors into.
|
||
|
|
*
|
||
|
|
*/
|
||
|
|
|
||
|
|
$( '#clothes' ).setClothes();
|
||
|
|
$( '#colors' ).setColors();
|
||
|
|
$( '#avatar-code' ).setCodeReceiver();
|
||
|
|
|
||
|
|
|
||
|
|
/*
|
||
|
|
* Set default values
|
||
|
|
*
|
||
|
|
*/
|
||
|
|
|
||
|
|
AG.importFigure( localStorage.getItem("oldFigure"), localStorage.getItem("oldGender") );
|
||
|
|
AG.loadToClothes( "hd" );
|
||
|
|
AG.loadToColors( "hd" );
|
||
|
|
AG.updateAvatar();
|
||
|
|
|
||
|
|
var gender = localStorage.getItem("oldGender");
|
||
|
|
|
||
|
|
if( gender != AG.getGender() ) {
|
||
|
|
$( 'a[data-gender="M"]' ).removeClass( 'nav-selected' );
|
||
|
|
$( 'a[data-gender="F"]' ).addClass( 'nav-selected' );
|
||
|
|
AG.switchGender();
|
||
|
|
AG.loadToClothes( AG.getCurrentSet() );
|
||
|
|
AG.updateAvatar();
|
||
|
|
}
|
||
|
|
|
||
|
|
/*
|
||
|
|
* Navigation Triggers
|
||
|
|
*
|
||
|
|
*/
|
||
|
|
|
||
|
|
$( 'a[data-gender]' ).on( 'click', function()
|
||
|
|
{
|
||
|
|
var gender = $( this ).data( 'gender' );
|
||
|
|
|
||
|
|
if( gender == AG.getGender() )
|
||
|
|
return;
|
||
|
|
|
||
|
|
var oldGender = ( gender == "M" ) ? "F" : "M";
|
||
|
|
|
||
|
|
$( 'a[data-gender="' + oldGender + '"]' ).removeClass( 'nav-selected' );
|
||
|
|
$( this ).addClass( 'nav-selected' );
|
||
|
|
|
||
|
|
AG.switchGender();
|
||
|
|
AG.loadToClothes( AG.getCurrentSet() );
|
||
|
|
AG.updateAvatar();
|
||
|
|
|
||
|
|
return false;
|
||
|
|
});
|
||
|
|
|
||
|
|
$( 'a[data-navigate]' ).on( 'click', function()
|
||
|
|
{
|
||
|
|
var toSet = $( this ).data( 'navigate' );
|
||
|
|
var subnav = $( this ).data( 'subnav' );
|
||
|
|
|
||
|
|
$( '.nav-selected' ).removeClass( 'nav-selected' );
|
||
|
|
$( this ).addClass( 'nav-selected' );
|
||
|
|
|
||
|
|
AG.setCurrentSet( toSet );
|
||
|
|
AG.loadToClothes( toSet );
|
||
|
|
AG.loadToColors( toSet );
|
||
|
|
|
||
|
|
if( typeof subnav !== 'undefined' ) {
|
||
|
|
$( '.sub-navigation .display' ).removeClass( 'display' ).addClass( 'hidden' );
|
||
|
|
$( '#' + subnav ).removeClass( 'hidden' ).addClass( 'display' );
|
||
|
|
}
|
||
|
|
|
||
|
|
return false;
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
/*
|
||
|
|
* Item clicking triggers
|
||
|
|
*
|
||
|
|
*/
|
||
|
|
|
||
|
|
$( '#avatarSelector' ).on( 'click', 'a[data-clothing]', function()
|
||
|
|
{
|
||
|
|
var current = AG.getPart( AG.getCurrentSet() );
|
||
|
|
|
||
|
|
if (!current)
|
||
|
|
return;
|
||
|
|
|
||
|
|
var color = ( typeof current.color === "undefined" || current.color == "" ) ? "61" : current.color;
|
||
|
|
var clothingId = $( this ).attr( 'data-clothing' );
|
||
|
|
|
||
|
|
// Verify colour and if not, reset the colour
|
||
|
|
var clothingSets = setsJSON.find(x => x.type == AG.getCurrentSet());
|
||
|
|
|
||
|
|
if (clothingSets) {
|
||
|
|
var clothingSet = clothingSets.sets[ clothingId ];
|
||
|
|
|
||
|
|
if (clothingSet) {
|
||
|
|
var paletteId = clothingSets.paletteid;
|
||
|
|
|
||
|
|
var palettes = palettesJSON[ paletteId ];
|
||
|
|
var selectedColor = palettes[ color ];
|
||
|
|
|
||
|
|
// Bad colour chosen, attempt to amend
|
||
|
|
if ( !selectedColor ) {
|
||
|
|
color = Object.keys(palettes)[0];
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
$( '.selected' ).removeClass( 'selected' );
|
||
|
|
$( this ).addClass( 'selected' );
|
||
|
|
|
||
|
|
AG.setPart( AG.getCurrentSet(), color, $( this ).data( 'clothing' ) );
|
||
|
|
AG.updateAvatar();
|
||
|
|
|
||
|
|
return false;
|
||
|
|
});
|
||
|
|
|
||
|
|
$( '#avatarSelector' ).on( 'click', 'a[data-color]', function()
|
||
|
|
{
|
||
|
|
var current = AG.getPart( AG.getCurrentSet() );
|
||
|
|
var paletteid = $( this ).attr( 'data-palette' );
|
||
|
|
var hex = $( this ).attr( 'data-color' );
|
||
|
|
|
||
|
|
AG.setPart( AG.getCurrentSet(), AG.filterByHex( paletteid, hex ), current.set );
|
||
|
|
AG.updateAvatar();
|
||
|
|
|
||
|
|
return false;
|
||
|
|
});
|
||
|
|
|
||
|
|
$( '#avatarSelector' ).on( 'click', 'a[data-remove="true"]', function()
|
||
|
|
{
|
||
|
|
$( '.selected' ).removeClass( 'selected' );
|
||
|
|
$( this ).addClass( 'selected' );
|
||
|
|
|
||
|
|
AG.unsetPart( AG.getCurrentSet() );
|
||
|
|
AG.updateAvatar();
|
||
|
|
|
||
|
|
return false;
|
||
|
|
});
|
||
|
|
|
||
|
|
/*
|
||
|
|
* To create a default character you should use
|
||
|
|
* AG.importFigure( "LOOK-FROM-DATABASE" )
|
||
|
|
*
|
||
|
|
* This includes the figure - you should set
|
||
|
|
* the default figure if you are planning to
|
||
|
|
* use this in a CMS so that the user can
|
||
|
|
* change from their last save.
|
||
|
|
*
|
||
|
|
*/
|
||
|
|
|
||
|
|
function AvatarGenerate()
|
||
|
|
{
|
||
|
|
|
||
|
|
|
||
|
|
/*
|
||
|
|
* This object controls what the
|
||
|
|
* display for the habbo is.
|
||
|
|
*
|
||
|
|
* @type object
|
||
|
|
*/
|
||
|
|
var oldFigure = localStorage.getItem("oldFigure");
|
||
|
|
var oldGender = localStorage.getItem("oldGender");
|
||
|
|
|
||
|
|
/*
|
||
|
|
* This object controls what the
|
||
|
|
* display for the habbo is.
|
||
|
|
*
|
||
|
|
* @type object
|
||
|
|
*/
|
||
|
|
var habboFemale = {
|
||
|
|
hd: { set: '600', color: '7' },
|
||
|
|
ch: { set: '645', color: '66' },
|
||
|
|
lg: { set: '720', color: '82' },
|
||
|
|
sh: { set: '725', color: '80' },
|
||
|
|
hr: { set: '500', color: '45' },
|
||
|
|
ha: { set: '', color: '' },
|
||
|
|
he: { set: '', color: '' },
|
||
|
|
ea: { set: '', color: '' },
|
||
|
|
fa: { set: '', color: '' },
|
||
|
|
ca: { set: '', color: '' },
|
||
|
|
wa: { set: '', color: '' },
|
||
|
|
cc: { set: '', color: '' },
|
||
|
|
cp: { set: '', color: '' }
|
||
|
|
};
|
||
|
|
|
||
|
|
var habbo = {
|
||
|
|
hd: { set: '180', color: '7' },
|
||
|
|
hr: { set: '100', color: '45' },
|
||
|
|
ch: { set: '210', color: '66' },
|
||
|
|
lg: { set: '270', color: '82' },
|
||
|
|
sh: { set: '290', color: '80' },
|
||
|
|
ha: { set: '', color: '' },
|
||
|
|
he: { set: '', color: '' },
|
||
|
|
ea: { set: '', color: '' },
|
||
|
|
fa: { set: '', color: '' },
|
||
|
|
ca: { set: '', color: '' },
|
||
|
|
wa: { set: '', color: '' },
|
||
|
|
cc: { set: '', color: '' },
|
||
|
|
cp: { set: '', color: '' }
|
||
|
|
};
|
||
|
|
|
||
|
|
/*
|
||
|
|
hd: { set: '', color: '' },
|
||
|
|
hr: { set: '', color: '' },
|
||
|
|
ch: { set: '', color: '' },
|
||
|
|
lg: { set: '', color: '' },
|
||
|
|
sh: { set: '', color: '' },
|
||
|
|
ha: { set: '', color: '' },
|
||
|
|
he: { set: '', color: '' },
|
||
|
|
ea: { set: '', color: '' },
|
||
|
|
fa: { set: '', color: '' },
|
||
|
|
ca: { set: '', color: '' },
|
||
|
|
wa: { set: '', color: '' },
|
||
|
|
cc: { set: '', color: '' },
|
||
|
|
cp: { set: '', color: '' }
|
||
|
|
*/
|
||
|
|
|
||
|
|
for (let figurePiece of oldFigure.split('.')) {
|
||
|
|
var part = figurePiece.split('-')[0];
|
||
|
|
var set = figurePiece.split('-')[1];
|
||
|
|
var colour = figurePiece.split('-')[2];
|
||
|
|
|
||
|
|
if (oldGender == "M") {
|
||
|
|
habbo[part].set = set.toString();
|
||
|
|
habbo[part].color = colour.toString();
|
||
|
|
} else {
|
||
|
|
habboFemale[part].set = set.toString();
|
||
|
|
habboFemale[part].color = colour.toString();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/*
|
||
|
|
var habbo = {
|
||
|
|
hd: { set: '180', color: '1' },
|
||
|
|
hr: { set: '100', color: '61' },
|
||
|
|
ch: { set: '210', color: '66' },
|
||
|
|
lg: { set: '270', color: '82' },
|
||
|
|
sh: { set: '290', color: '80' },
|
||
|
|
ha: { color: '', set: '' },
|
||
|
|
he: { color: '', set: '' },
|
||
|
|
ea: { color: '', set: '' },
|
||
|
|
fa: { color: '', set: '' },
|
||
|
|
ca: { color: '', set: '' },
|
||
|
|
wa: { color: '', set: '' },
|
||
|
|
cc: { color: '', set: '' },
|
||
|
|
cp: { color: '', set: '' }
|
||
|
|
};
|
||
|
|
*/
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
this.getHabbo = function()
|
||
|
|
{
|
||
|
|
return habbo;
|
||
|
|
};
|
||
|
|
|
||
|
|
|
||
|
|
/*
|
||
|
|
* Gender default should be M.
|
||
|
|
*/
|
||
|
|
|
||
|
|
this.gender = "M";
|
||
|
|
|
||
|
|
|
||
|
|
/*
|
||
|
|
* Get the current gender
|
||
|
|
*
|
||
|
|
* @return string
|
||
|
|
*
|
||
|
|
*/
|
||
|
|
|
||
|
|
this.getGender = function()
|
||
|
|
{
|
||
|
|
return this.gender;
|
||
|
|
};
|
||
|
|
|
||
|
|
|
||
|
|
/*
|
||
|
|
* Switch the gender, so if the user
|
||
|
|
* is currently male, switch him/her
|
||
|
|
* to female.
|
||
|
|
*
|
||
|
|
*/
|
||
|
|
|
||
|
|
this.switchGender = function()
|
||
|
|
{
|
||
|
|
this.gender = ( this.gender !== 'M' && this.gender !== 'F' || this.gender == 'F' ) ? 'M' : 'F';
|
||
|
|
};
|
||
|
|
|
||
|
|
|
||
|
|
/*
|
||
|
|
* Set a specific part for the Habbo variable.
|
||
|
|
*
|
||
|
|
* @param part
|
||
|
|
* @param color
|
||
|
|
* @param set
|
||
|
|
*/
|
||
|
|
|
||
|
|
this.setPart = function( part, color, set )
|
||
|
|
{
|
||
|
|
if( this.getGender() == "M" )
|
||
|
|
{
|
||
|
|
habbo[ part ] = { color: color, set: set };
|
||
|
|
}
|
||
|
|
else
|
||
|
|
{
|
||
|
|
habboFemale[ part ] = { color: color, set: set };
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
|
||
|
|
/*
|
||
|
|
* Unset a specific part for the Habbo variable.
|
||
|
|
*
|
||
|
|
* @param part
|
||
|
|
*
|
||
|
|
*/
|
||
|
|
|
||
|
|
this.unsetPart = function( part )
|
||
|
|
{
|
||
|
|
if( this.getGender() == "M" )
|
||
|
|
{
|
||
|
|
habbo[ part ] = { set: '' };
|
||
|
|
}
|
||
|
|
else
|
||
|
|
{
|
||
|
|
habboFemale[ part ] = { set: '' };
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
|
||
|
|
/*
|
||
|
|
* Get a specific part of the Habbo variable.
|
||
|
|
*
|
||
|
|
* @param part
|
||
|
|
*/
|
||
|
|
|
||
|
|
this.getPart = function( part )
|
||
|
|
{
|
||
|
|
if( this.getGender() == "M" )
|
||
|
|
{
|
||
|
|
return habbo[ part ];
|
||
|
|
}
|
||
|
|
else
|
||
|
|
{
|
||
|
|
return habboFemale[ part ];
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
|
||
|
|
/*
|
||
|
|
* This is used to determine the current set
|
||
|
|
* that the user is looking through.
|
||
|
|
*
|
||
|
|
* @type string
|
||
|
|
*/
|
||
|
|
|
||
|
|
var currentSet = "hd";
|
||
|
|
|
||
|
|
|
||
|
|
/*
|
||
|
|
* Get the current set that the user is looking
|
||
|
|
* through.
|
||
|
|
*
|
||
|
|
* @return string
|
||
|
|
*/
|
||
|
|
|
||
|
|
this.getCurrentSet = function()
|
||
|
|
{
|
||
|
|
return currentSet;
|
||
|
|
};
|
||
|
|
|
||
|
|
|
||
|
|
/*
|
||
|
|
* Set the current set that the user is looking
|
||
|
|
* through.
|
||
|
|
*
|
||
|
|
* @param current string
|
||
|
|
*/
|
||
|
|
|
||
|
|
this.setCurrentSet = function( current )
|
||
|
|
{
|
||
|
|
currentSet = current;
|
||
|
|
};
|
||
|
|
|
||
|
|
|
||
|
|
/*
|
||
|
|
* This figure data will be provided by the PHP
|
||
|
|
* script that accompanies this - it generates
|
||
|
|
* two files: palettes.json and settypes.json
|
||
|
|
*
|
||
|
|
* @type object
|
||
|
|
*/
|
||
|
|
|
||
|
|
var figuredata = { palettes: {}, sets: {} };
|
||
|
|
|
||
|
|
|
||
|
|
/*
|
||
|
|
* Return all of the palettes.
|
||
|
|
*
|
||
|
|
* @return object
|
||
|
|
*/
|
||
|
|
|
||
|
|
this.getPalettes = function()
|
||
|
|
{
|
||
|
|
return figuredata.palettes;
|
||
|
|
};
|
||
|
|
|
||
|
|
|
||
|
|
/*
|
||
|
|
* Return a palette by ID.
|
||
|
|
*
|
||
|
|
* @return object
|
||
|
|
*/
|
||
|
|
|
||
|
|
this.getPalette = function( id )
|
||
|
|
{
|
||
|
|
return figuredata.palettes[ id ];
|
||
|
|
};
|
||
|
|
|
||
|
|
|
||
|
|
/*
|
||
|
|
* Use this function to hand the palettes.json
|
||
|
|
* created by the PHP script that accompanies
|
||
|
|
* the javascript file.
|
||
|
|
*
|
||
|
|
*/
|
||
|
|
|
||
|
|
this.setPalettes = function( json )
|
||
|
|
{
|
||
|
|
figuredata.palettes = json;
|
||
|
|
};
|
||
|
|
|
||
|
|
|
||
|
|
/*
|
||
|
|
* Use this function to hand the settypes.json
|
||
|
|
* created by the PHP script that accompanies
|
||
|
|
* the javascript file.
|
||
|
|
*
|
||
|
|
*/
|
||
|
|
|
||
|
|
this.setTypes = function( json )
|
||
|
|
{
|
||
|
|
figuredata.sets = json;
|
||
|
|
};
|
||
|
|
|
||
|
|
|
||
|
|
/*
|
||
|
|
* Build the figure from the habbo variable
|
||
|
|
* and then compile a string that will be then
|
||
|
|
* sent to the Habbo imager.
|
||
|
|
*
|
||
|
|
*/
|
||
|
|
|
||
|
|
this.buildFigure = function( usingHabbo )
|
||
|
|
{
|
||
|
|
var figure = "";
|
||
|
|
var figureBuildArray = habbo;//habboFemale;
|
||
|
|
|
||
|
|
if ( this.getGender() == "F") {
|
||
|
|
figureBuildArray = habboFemale;
|
||
|
|
}
|
||
|
|
|
||
|
|
jQuery.each( figureBuildArray , function( index, value)
|
||
|
|
{
|
||
|
|
if( value.set == "" || value.color == "" )
|
||
|
|
return;
|
||
|
|
|
||
|
|
figure = figure + "." + index + "-" + value.set + "-" + value.color;
|
||
|
|
});
|
||
|
|
|
||
|
|
return figure.substring(1, figure.length );
|
||
|
|
};
|
||
|
|
|
||
|
|
|
||
|
|
/*
|
||
|
|
* Import a figure from a string (especially
|
||
|
|
* useful if you would like to replace the default
|
||
|
|
* figure or if you wish to import your logged in users
|
||
|
|
* figure).
|
||
|
|
*
|
||
|
|
*/
|
||
|
|
|
||
|
|
this.importFigure = function( figure, gender )
|
||
|
|
{
|
||
|
|
var arrayFigure = figure.split( "." );
|
||
|
|
if (gender == "M") {
|
||
|
|
habbo = {
|
||
|
|
hd: { set: '', color: '' },
|
||
|
|
hr: { set: '', color: '' },
|
||
|
|
ch: { set: '', color: '' },
|
||
|
|
lg: { set: '', color: '' },
|
||
|
|
sh: { set: '', color: '' },
|
||
|
|
ha: { set: '', color: '' },
|
||
|
|
he: { set: '', color: '' },
|
||
|
|
ea: { set: '', color: '' },
|
||
|
|
fa: { set: '', color: '' },
|
||
|
|
ca: { set: '', color: '' },
|
||
|
|
wa: { set: '', color: '' },
|
||
|
|
cc: { set: '', color: '' },
|
||
|
|
cp: { set: '', color: '' }
|
||
|
|
};
|
||
|
|
} else {
|
||
|
|
habboFemale = {
|
||
|
|
hd: { set: '', color: '' },
|
||
|
|
hr: { set: '', color: '' },
|
||
|
|
ch: { set: '', color: '' },
|
||
|
|
lg: { set: '', color: '' },
|
||
|
|
sh: { set: '', color: '' },
|
||
|
|
ha: { set: '', color: '' },
|
||
|
|
he: { set: '', color: '' },
|
||
|
|
ea: { set: '', color: '' },
|
||
|
|
fa: { set: '', color: '' },
|
||
|
|
ca: { set: '', color: '' },
|
||
|
|
wa: { set: '', color: '' },
|
||
|
|
cc: { set: '', color: '' },
|
||
|
|
cp: { set: '', color: '' }
|
||
|
|
};
|
||
|
|
}
|
||
|
|
|
||
|
|
jQuery.each( arrayFigure, function( index, value )
|
||
|
|
{
|
||
|
|
var array = value.split( '-' );
|
||
|
|
|
||
|
|
if (habbo[ array[0] ]) {
|
||
|
|
if (gender == "M") {
|
||
|
|
habbo[ array[0] ].set = array[1];
|
||
|
|
habbo[ array[0] ].color = ( 3 in array ) ? array[2] + "-" + array[3] : array[2];
|
||
|
|
} else {
|
||
|
|
habboFemale[ array[0] ].set = array[1];
|
||
|
|
habboFemale[ array[0] ].color = ( 3 in array ) ? array[2] + "-" + array[3] : array[2];
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
};
|
||
|
|
|
||
|
|
|
||
|
|
/*
|
||
|
|
* This method is used to return an object
|
||
|
|
* with all clothes related to that set
|
||
|
|
* type.
|
||
|
|
*
|
||
|
|
* @return object|false
|
||
|
|
*/
|
||
|
|
|
||
|
|
this.filterByType = function( type )
|
||
|
|
{
|
||
|
|
var hit;
|
||
|
|
|
||
|
|
jQuery.each( figuredata.sets, function( index, value )
|
||
|
|
{
|
||
|
|
if( value.type == type )
|
||
|
|
{
|
||
|
|
hit = value;
|
||
|
|
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
return hit;
|
||
|
|
};
|
||
|
|
|
||
|
|
|
||
|
|
/*
|
||
|
|
* This method is used to return an object
|
||
|
|
* with that matches a certain hex code.
|
||
|
|
*
|
||
|
|
* @param int
|
||
|
|
* @param string
|
||
|
|
*
|
||
|
|
* @return object|false
|
||
|
|
*/
|
||
|
|
|
||
|
|
this.filterByHex = function( paletteid, hex )
|
||
|
|
{
|
||
|
|
var hit;
|
||
|
|
|
||
|
|
jQuery.each( figuredata.palettes[ paletteid ], function( index, value )
|
||
|
|
{
|
||
|
|
if( value.hex == hex )
|
||
|
|
{
|
||
|
|
hit = index;
|
||
|
|
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
return hit;
|
||
|
|
};
|
||
|
|
|
||
|
|
|
||
|
|
/*
|
||
|
|
* This checks whether or not the user can
|
||
|
|
* remove the item.
|
||
|
|
*
|
||
|
|
* @param string
|
||
|
|
*
|
||
|
|
* @return boolean
|
||
|
|
*
|
||
|
|
*/
|
||
|
|
|
||
|
|
this.canRemove = function( type )
|
||
|
|
{
|
||
|
|
if( type == "hd" || type == "lg" || type == "ch" )
|
||
|
|
{
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
|
||
|
|
return true;
|
||
|
|
};
|
||
|
|
|
||
|
|
|
||
|
|
/*
|
||
|
|
* Load the clothing elements to a single
|
||
|
|
* element. This should ideally be a div.
|
||
|
|
*
|
||
|
|
* @param type string
|
||
|
|
*/
|
||
|
|
|
||
|
|
this.loadToClothes = function( type )
|
||
|
|
{
|
||
|
|
var _this = this;
|
||
|
|
var load = this.filterByType( type );
|
||
|
|
|
||
|
|
if (!load)
|
||
|
|
return;
|
||
|
|
|
||
|
|
$( clothesObject ).html( "" );
|
||
|
|
|
||
|
|
if( this.canRemove( type ) )
|
||
|
|
{
|
||
|
|
var remove = $( '<a href="#" class="clothes-object removable" data-remove="true"></a>');
|
||
|
|
var isRemoved = this.getPart( type );
|
||
|
|
|
||
|
|
if (isRemoved) {
|
||
|
|
if( typeof isRemoved.set == "undefined" || isRemoved.set == "" )
|
||
|
|
{
|
||
|
|
remove.addClass( 'selected' );
|
||
|
|
}
|
||
|
|
|
||
|
|
$( clothesObject ).append( remove );
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
jQuery.each( load.sets, function( index, value )
|
||
|
|
{
|
||
|
|
if ((value.club == 1 && localStorage.getItem("hasClub") == "1") || value.club == 0)
|
||
|
|
{
|
||
|
|
if( value.gender == _this.gender && value.selectable == 1 || value.gender == "U" && value.selectable == 1 )
|
||
|
|
{
|
||
|
|
var currentlySelected = _this.getPart( type );
|
||
|
|
|
||
|
|
if (currentlySelected)
|
||
|
|
{
|
||
|
|
var partString = type + "-" + index + "-" + currentlySelected.color;
|
||
|
|
|
||
|
|
var asset = $('<a class="clothes-object ' + type + '" data-clothing="' + index + '" href="#"></a>');
|
||
|
|
|
||
|
|
if( index == currentlySelected.set )
|
||
|
|
{
|
||
|
|
asset.addClass( 'selected' );
|
||
|
|
}
|
||
|
|
|
||
|
|
asset.css( 'background-image', 'url( https://cdn.classichabbo.com/habbo-imaging/avatarimage?figure=' + partString + '&gender=' + _this.gender + '&gesture= )' );
|
||
|
|
|
||
|
|
$( clothesObject ).append( asset );
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
};
|
||
|
|
|
||
|
|
|
||
|
|
/*
|
||
|
|
*
|
||
|
|
*/
|
||
|
|
|
||
|
|
this.loadToColors = function( type )
|
||
|
|
{
|
||
|
|
var _this = this;
|
||
|
|
|
||
|
|
var load = this.filterByType( type );
|
||
|
|
|
||
|
|
if (!load)
|
||
|
|
return;
|
||
|
|
|
||
|
|
var colors = this.getPalette( load.paletteid );
|
||
|
|
|
||
|
|
$( colorsObject ).html( "" );
|
||
|
|
|
||
|
|
jQuery.each( colors, function( index, value )
|
||
|
|
{
|
||
|
|
if ((value.club == 1 && localStorage.getItem("hasClub") == "1") || value.club == 0)
|
||
|
|
{
|
||
|
|
if( value.selectable == 1 )
|
||
|
|
{
|
||
|
|
var color = $( '<a href="#" class="color-object" style="background:#' + value.hex + '" data-palette="' + load.paletteid + '" data-color="' + value.hex + '"></a>');
|
||
|
|
|
||
|
|
$( colorsObject ).append( color );
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
};
|
||
|
|
|
||
|
|
|
||
|
|
/*
|
||
|
|
* jQuery plugin: this allows us to easily
|
||
|
|
* attach an element to AvatarGenerate.
|
||
|
|
*
|
||
|
|
* @type element
|
||
|
|
*/
|
||
|
|
|
||
|
|
var clothesObject;
|
||
|
|
|
||
|
|
|
||
|
|
/*
|
||
|
|
* jQuery plugin: this is the function that
|
||
|
|
* actually sets the clothesObject variable
|
||
|
|
* so that we may reference it later.
|
||
|
|
*
|
||
|
|
* @param object
|
||
|
|
*/
|
||
|
|
|
||
|
|
this.setClothesObject = function( object ) {
|
||
|
|
clothesObject = object;
|
||
|
|
};
|
||
|
|
|
||
|
|
|
||
|
|
/*
|
||
|
|
* jQuery plugin: this allows us to easily
|
||
|
|
* attach an element to AvatarGenerate.
|
||
|
|
*
|
||
|
|
* @type element
|
||
|
|
*/
|
||
|
|
|
||
|
|
var colorsObject;
|
||
|
|
|
||
|
|
|
||
|
|
/*
|
||
|
|
* jQuery plugin: this is the function that
|
||
|
|
* actually sets the clothesObject variable
|
||
|
|
* so that we may reference it later.
|
||
|
|
*
|
||
|
|
* @param object
|
||
|
|
*/
|
||
|
|
|
||
|
|
this.setColorsObject = function( object )
|
||
|
|
{
|
||
|
|
colorsObject = object;
|
||
|
|
};
|
||
|
|
|
||
|
|
|
||
|
|
/*
|
||
|
|
* jQuery plugin: this allows us to easily
|
||
|
|
* attach an element to AvatarGenerate.
|
||
|
|
*
|
||
|
|
* @type element
|
||
|
|
*/
|
||
|
|
|
||
|
|
var codeObject;
|
||
|
|
|
||
|
|
|
||
|
|
/*
|
||
|
|
* jQuery plugin: this is the function that
|
||
|
|
* actually sets the codeObject variable
|
||
|
|
* so that we may reference it later.
|
||
|
|
*
|
||
|
|
* @param object
|
||
|
|
*/
|
||
|
|
|
||
|
|
this.setCodeObject = function( object )
|
||
|
|
{
|
||
|
|
codeObject = object;
|
||
|
|
};
|
||
|
|
|
||
|
|
this.updateAvatar = function()
|
||
|
|
{
|
||
|
|
var URL = "http://cdn.classichabbo.com/habbo-imaging/avatarimage?head_direction=4&direction=4&size=l&figure=" + this.buildFigure() + "&gender=" + this.getGender();
|
||
|
|
|
||
|
|
$( '#myHabbo' ).attr( 'src', URL );
|
||
|
|
$( codeObject ).val("figure=" + this.buildFigure() + "&gender=" + this.getGender() );
|
||
|
|
};
|
||
|
|
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
}( jQuery ));
|