1155 lines
34 KiB
JavaScript
1155 lines
34 KiB
JavaScript
// ===========================================================================
|
|
// Asshat-Gaming Roleplay
|
|
// Copyright (c) 2020 by Asshat Gaming (www.asshatgaming.com)
|
|
// ---------------------------------------------------------------------------
|
|
// FILE: gui.js
|
|
// DESC: Provides GUI functionality and styles
|
|
// TYPE: Client (JavaScript)
|
|
// ===========================================================================
|
|
|
|
var app = {};
|
|
|
|
let robotoFont = "Tahoma";
|
|
|
|
let primaryColour = [
|
|
null,
|
|
[51, 153, 255],
|
|
[144, 255, 96],
|
|
[255, 188, 218],
|
|
[252, 145, 58],
|
|
[252, 145, 58],
|
|
[180, 180, 180],
|
|
[180, 180, 180],
|
|
];
|
|
|
|
let windowAlpha = 120;
|
|
let windowTitleAlpha = 200;
|
|
let buttonAlpha = 200;
|
|
|
|
let login = {
|
|
window: null,
|
|
logoImage: null,
|
|
passwordLabel: null,
|
|
passwordInput: null,
|
|
loginButton: null,
|
|
notRegisteredLabel: null,
|
|
registerButton: null,
|
|
};
|
|
|
|
let register = {
|
|
window: null,
|
|
logoImage: null,
|
|
messageLabel: null,
|
|
passwordInput: null,
|
|
confirmPasswordInput: null,
|
|
emailInput: null,
|
|
registerButton: null,
|
|
alreadyRegisteredLabel: null,
|
|
loginButton: null,
|
|
};
|
|
|
|
let newCharacter = {
|
|
window: null,
|
|
firstNameInput: null,
|
|
lastNameInput: null,
|
|
skinDropDown: null,
|
|
spawnAreaDropDown: null,
|
|
createButton: null,
|
|
skinImage: null,
|
|
};
|
|
|
|
let errorDialog = {
|
|
window: null,
|
|
messageLabel: null,
|
|
okayButton: null,
|
|
};
|
|
|
|
let infoDialog = {
|
|
window: null,
|
|
messageLabel: null,
|
|
okayButton: null,
|
|
};
|
|
|
|
let yesNoDialog = {
|
|
window: null,
|
|
messageLabel: null,
|
|
yesButton: null,
|
|
noButton: null,
|
|
};
|
|
|
|
let characterSelect = {
|
|
window: null,
|
|
skinImage: null,
|
|
nameText: null,
|
|
dateOfBirthText: null,
|
|
placeOfOriginText: null,
|
|
previousCharacterButton: null,
|
|
nextCharacterButton: null,
|
|
selectCharacterButton: null,
|
|
newCharacterButton: null,
|
|
};
|
|
|
|
let skinNames = [
|
|
[],
|
|
[ // GTA III
|
|
[0, "Claude", "Skin000.png"],
|
|
[1, "Police Officer", "Skin001.png"],
|
|
[2, "SWAT Officer", "Skin002.png"],
|
|
[3, "FBI Agent", "Skin003.png"],
|
|
[4, "Army Soldier", "Skin004.png"],
|
|
[5, "Paramedic", "Skin005.png"],
|
|
[6, "Firefighter", "Skin006.png"],
|
|
[7, "Wise Guy", "Skin007.png"],
|
|
[8, "Taxi Driver", "Skin008.png"],
|
|
[9, "Pimp", "Skin009.png"],
|
|
[10, "Mafia Member", "Skin010.png"],
|
|
[11, "Mafia Member", "Skin011.png"],
|
|
[12, "Triad Member", "Skin012.png"],
|
|
[13, "Triad Member", "Skin013.png"],
|
|
[14, "Diablo Member", "Skin014.png"],
|
|
[15, "Diablo Member", "Skin015.png"],
|
|
[16, "Yakuza Member", "Skin016.png"],
|
|
[17, "Yakuza Member", "Skin017.png"],
|
|
[18, "Yardie Member", "Skin018.png"],
|
|
[19, "Yardie Member", "Skin019.png"],
|
|
[20, "Cartel Soldier", "Skin020.png"],
|
|
[21, "Cartel Soldier", "Skin021.png"],
|
|
[22, "Red Jacks Thug", "Skin022.png"],
|
|
[23, "Purple Nines Thug", "Skin023.png"],
|
|
[24, "Street Criminal", "Skin024.png"],
|
|
[25, "Street Criminal", "Skin025.png"],
|
|
[30, "Male Client", "Skin030.png"],
|
|
[31, "Random Guy", "Skin031.png"],
|
|
[32, "Vacationist", "Skin032.png"],
|
|
[33, "Dj", "Skin033.png"],
|
|
[34, "Young Woman", "Skin034.png"],
|
|
[35, "Young Woman", "Skin035.png"],
|
|
[36, "Business Woman", "Skin036.png"],
|
|
[37, "Elder Woman", "Skin037.png"],
|
|
[38, "Elder Woman", "Skin038.png"],
|
|
[39, "Prostitute", "Skin039.png"],
|
|
[40, "Prostitute", "Skin040.png"],
|
|
[41, "Random Guy", "Skin041.png"],
|
|
[42, "Diseased Man", "Skin042.png"],
|
|
[43, "Deseased Woman", "Skin043.png"],
|
|
[44, "Young Woman", "Skin044.png"],
|
|
[45, "Old Man", "Skin045.png"],
|
|
[46, "Random Guy", "Skin046.png"],
|
|
[47, "Old Woman", "Skin047.png"],
|
|
[48, "Old Woman", "Skin048.png"],
|
|
[49, "Old Man", "Skin049.png"],
|
|
[50, "Random Guy", "Skin050.png"],
|
|
[51, "Old Woman", "Skin051.png"],
|
|
[52, "Young Woman", "Skin052.png"],
|
|
[53, "Docks Worker", "Skin053.png"],
|
|
[54, "Docks Worker", "Skin054.png"],
|
|
[55, "Male Street Bum", "Skin055.png"],
|
|
[56, "Female Street Bum", "Skin056.png"],
|
|
[57, "Delivery Guy", "Skin057.png"],
|
|
[58, "Delivery Guy", "Skin058.png"],
|
|
[59, "Business Man", "Skin059.png"],
|
|
[60, "Marty Chonks", "Skin060.png"],
|
|
[61, "Cia Agent", "Skin061.png"],
|
|
[62, "Female Client", "Skin062.png"],
|
|
[63, "Young Woman", "Skin063.png"],
|
|
[64, "Business Woman", "Skin064.png"],
|
|
[65, "Business Man", "Skin065.png"],
|
|
[66, "Female Client", "Skin066.png"],
|
|
[67, "Male Steward", "Skin067.png"],
|
|
[68, "Female Steward", "Skin068.png"],
|
|
[69, "Male Cocks Fan", "Skin069.png"],
|
|
[70, "Male Cocks Fan", "Skin070.png"],
|
|
[71, "Female Cocks Fan", "Skin071.png"],
|
|
[72, "Male Paramedics Assistant", "Skin072.png"],
|
|
[73, "Female Paramedics Assistant", "Skin073.png"],
|
|
[74, "Construction Worker", "Skin074.png"],
|
|
[75, "Construction Worker", "Skin075.png"],
|
|
[76, "Zip Customer", "Skin076.png"],
|
|
[77, "Party Woman", "Skin077.png"],
|
|
[78, "Party Woman", "Skin078.png"],
|
|
[80, "Female College Student", "Skin080.png"],
|
|
[81, "Old Man", "Skin081.png"],
|
|
[82, "Female Jogger", "Skin082.png"],
|
|
[83, "Asuka Kasen", "Skin083.png"],
|
|
[84, "Spank Suicide Bomber", "Skin084.png"],
|
|
[85, "Salvatore's Butler", "Skin085.png"],
|
|
[86, "Catalina", "Skin086.png"],
|
|
[87, "Lee Chong", "Skin087.png"],
|
|
[88, "Colombian Cartel Member", "Skin088.png"],
|
|
[89, "Colombian Cartel Member", "Skin089.png"],
|
|
[90, "Colombian Cartel Member", "Skin090.png"],
|
|
[91, "Colombian Cartel Member", "Skin091.png"],
|
|
[92, "Police Officer", "Skin092.png"],
|
|
[93, "Curly Bob", "Skin093.png"],
|
|
[94, "Phil Cassidy", "Skin094.png"],
|
|
[95, "Detective", "Skin095.png"],
|
|
[96, "8-Ball", "Skin096.png"],
|
|
[97, "8-Ball", "Skin097.png"],
|
|
[98, "Salvatore Leone", "Skin098.png"],
|
|
[99, "Mafia Member", "Skin099.png"],
|
|
[100, "Joey Leone", "Skin100.png"],
|
|
[101, "Joey Leone", "Skin101.png"],
|
|
[102, "Bar Owner", "Skin102.png"],
|
|
[103, "Kenji Kasen", "Skin103.png"],
|
|
[104, "Mike Forelli", "Skin104.png"],
|
|
[105, "Donald Love", "Skin105.png"],
|
|
[106, "Donald Love", "Skin106.png"],
|
|
[107, "Luigi Goterelli", "Skin107.png"],
|
|
[108, "Maria Latore", "Skin108.png"],
|
|
[109, "Mickey Hamfists", "Skin109.png"],
|
|
[110, "Miguel", "Skin110.png"],
|
|
[111, "Misty", "Skin111.png"],
|
|
[112, "Old Oriental Gentleman", "Skin112.png"],
|
|
[113, "Old Oriental Gentleman", "Skin113.png"],
|
|
[114, "Old Oriental Gentleman", "Skin114.png"],
|
|
[115, "Ray Machowski", "Skin115.png"],
|
|
[116, "Mafia Member", "Skin116.png"],
|
|
[118, "Tanner", "Skin118.png"],
|
|
[119, "Toni Cipriani", "Skin119.png"],
|
|
[120, "Darkel", "Skin120.png"],
|
|
[121, "Chuff Security Officer", "Skin121.png"]
|
|
],
|
|
];
|
|
|
|
let placesOfOrigin = [
|
|
"Liberty City",
|
|
"Vice City",
|
|
"Los Santos",
|
|
"San Fierro",
|
|
"Las Venturas",
|
|
"San Andreas",
|
|
"Blaine County",
|
|
"Red County",
|
|
"Bone County",
|
|
"Other",
|
|
];
|
|
|
|
let characterData = [];
|
|
let currentCharacter = 0;
|
|
|
|
app.init = function()
|
|
{
|
|
//let fontStream = openFile("RoleplayApp/Fonts/Roboto-Regular.ttf");
|
|
//if(fontStream != null) {
|
|
// robotoFont = lucasFont.createFont(fontStream, 10.0);
|
|
// fontStream.close();
|
|
//}
|
|
|
|
login.window = mexui.window(game.width/2-150, game.height/2-115, 300, 280, 'LOGIN', {
|
|
main: {
|
|
backgroundColour: toColour(0, 0, 0, windowAlpha),
|
|
},
|
|
title: {
|
|
textSize: 0.0,
|
|
textColour: toColour(0, 0, 0, 0),
|
|
},
|
|
icon: {
|
|
textSize: 0.0,
|
|
textColour: toColour(0, 0, 0, 0),
|
|
}
|
|
});
|
|
login.window.titleBarIconSize = new Vec2(0,0);
|
|
login.window.titleBarHeight = 0;
|
|
|
|
login.logoImage = login.window.image(100, 20, 100, 100, "files/images/main-logo.png");
|
|
|
|
login.messageLabel = login.window.text(20, 135, 260, 20, 'Please enter your password!', {
|
|
main: {
|
|
textSize: 10.0,
|
|
textAlign: 0.5,
|
|
textColour: toColour(200, 200, 200, 255),
|
|
textFont: robotoFont,
|
|
}
|
|
});
|
|
|
|
login.passwordInput = login.window.textInput(20, 170, 260, 25, '', {
|
|
main: {
|
|
backgroundColour: toColour(0, 0, 0, 120),
|
|
textColour: toColour(200, 200, 200, 255),
|
|
textSize: 10.0,
|
|
textFont: robotoFont,
|
|
},
|
|
caret: {
|
|
backgroundColour: toColour(200, 200, 200, 255),
|
|
},
|
|
placeholder: {
|
|
backgroundColour: toColour(0, 0, 0, 120),
|
|
textColour: toColour(200, 200, 200, 200),
|
|
textSize: 10.0,
|
|
textFont: robotoFont,
|
|
}
|
|
});
|
|
login.passwordInput.masked = true;
|
|
login.passwordInput.placeholder = "Password";
|
|
|
|
login.loginButton = login.window.button(20, 205, 260, 30, 'LOGIN', {
|
|
main: {
|
|
backgroundColour: toColour(primaryColour[gta.game][0], primaryColour[gta.game][1], primaryColour[gta.game][2], buttonAlpha),
|
|
textColour: toColour(0, 0, 0, 255),
|
|
textSize: 10.0,
|
|
textFont: robotoFont,
|
|
textAlign: 0.5,
|
|
},
|
|
}, checkLogin);
|
|
|
|
login.notRegisteredLabel = login.window.text(20, 240, 175, 20, "Don't have an account?", {
|
|
main: {
|
|
textSize: 10.0,
|
|
textAlign: 1.0,
|
|
textColour: toColour(200, 200, 200, 255),
|
|
textFont: robotoFont,
|
|
}
|
|
});
|
|
|
|
login.registerButton = login.window.button(205, 242, 75, 15, 'REGISTER', {
|
|
main: {
|
|
backgroundColour: toColour(primaryColour[gta.game][0], primaryColour[gta.game][1], primaryColour[gta.game][2], buttonAlpha),
|
|
textColour: toColour(0, 0, 0, 255),
|
|
textSize: 9.0,
|
|
textFont: robotoFont,
|
|
textAlign: 0.5,
|
|
},
|
|
}, showRegistration);
|
|
|
|
// ---------------------------------------------------------------------------------
|
|
|
|
newCharacter.window = mexui.window(game.width/2-215, game.height/2-83, 430, 166, 'New Character', {
|
|
main: {
|
|
backgroundColour: toColour(0, 0, 0, 120),
|
|
},
|
|
title: {
|
|
textSize: 11.0,
|
|
textColour: toColour(0, 0, 0, 255),
|
|
backgroundColour: toColour(primaryColour[gta.game][0], primaryColour[gta.game][1], primaryColour[gta.game][2], windowTitleAlpha),
|
|
},
|
|
icon: {
|
|
textSize: 0.0,
|
|
textColour: toColour(0, 0, 0, 0),
|
|
backgroundColour: toColour(0, 0, 0, 0),
|
|
},
|
|
});
|
|
|
|
newCharacter.firstNameInput = newCharacter.window.textInput(10, 40, 200, 25, '', {
|
|
main: {
|
|
hover: {
|
|
backgroundColour: toColour(0, 0, 0, 200),
|
|
textColour: toColour(200, 200, 200, 255),
|
|
textSize: 10.0,
|
|
textFont: robotoFont,
|
|
},
|
|
backgroundColour: toColour(0, 0, 0, 200),
|
|
textColour: toColour(200, 200, 200, 255),
|
|
textSize: 10.0,
|
|
textFont: robotoFont,
|
|
},
|
|
caret: {
|
|
backgroundColour: toColour(200, 200, 200, 255),
|
|
},
|
|
placeholder: {
|
|
backgroundColour: toColour(0, 0, 0, 200),
|
|
textColour: toColour(200, 200, 200, 200),
|
|
textSize: 10.0,
|
|
textFont: robotoFont,
|
|
}
|
|
});
|
|
newCharacter.firstNameInput.placeholder = "First Name";
|
|
|
|
newCharacter.lastNameInput = newCharacter.window.textInput(10, 70, 200, 25, '', {
|
|
main: {
|
|
hover: {
|
|
backgroundColour: toColour(0, 0, 0, 200),
|
|
textColour: toColour(200, 200, 200, 255),
|
|
textSize: 10.0,
|
|
textFont: robotoFont,
|
|
},
|
|
backgroundColour: toColour(0, 0, 0, 200),
|
|
textColour: toColour(200, 200, 200, 255),
|
|
textSize: 10.0,
|
|
textFont: robotoFont,
|
|
},
|
|
caret: {
|
|
backgroundColour: toColour(200, 200, 200, 255),
|
|
},
|
|
placeholder: {
|
|
backgroundColour: toColour(0, 0, 0, 200),
|
|
textColour: toColour(200, 200, 200, 200),
|
|
textSize: 10.0,
|
|
textFont: robotoFont,
|
|
}
|
|
});
|
|
newCharacter.lastNameInput.placeholder = "Last Name";
|
|
|
|
newCharacter.dateOfBirth = newCharacter.window.date(10, 130, 200, 25, 'Date of Birth', {
|
|
main: {
|
|
hover: {
|
|
backgroundColour: toColour(0, 0, 0, 200),
|
|
textColour: toColour(200, 200, 200, 255),
|
|
textSize: 10.0,
|
|
textFont: robotoFont,
|
|
},
|
|
backgroundColour: toColour(0, 0, 0, 200),
|
|
textColour: toColour(200, 200, 200, 255),
|
|
textSize: 10.0,
|
|
textFont: robotoFont,
|
|
}
|
|
});
|
|
|
|
newCharacter.placeOfOrigin = newCharacter.window.dropDown(10, 100, 200, 25, 'Place of Origin', {
|
|
main: {
|
|
hover: {
|
|
backgroundColour: toColour(0, 0, 0, 200),
|
|
textColour: toColour(200, 200, 200, 255),
|
|
textSize: 10.0,
|
|
textFont: robotoFont,
|
|
},
|
|
backgroundColour: toColour(0, 0, 0, 200),
|
|
textColour: toColour(200, 200, 200, 255),
|
|
textSize: 10.0,
|
|
textFont: robotoFont,
|
|
},
|
|
item: {
|
|
hover: {
|
|
backgroundColour: toColour(32, 32, 32, 200),
|
|
textColour: toColour(200, 200, 200, 255),
|
|
textSize: 10.0,
|
|
textFont: robotoFont,
|
|
width: 200,
|
|
},
|
|
backgroundColour: toColour(0, 0, 0, 200),
|
|
textColour: toColour(200, 200, 200, 255),
|
|
textSize: 10.0,
|
|
textFont: robotoFont,
|
|
width: 200,
|
|
},
|
|
});
|
|
|
|
for(let i in placesOfOrigin) {
|
|
newCharacter.placeOfOrigin.item(placesOfOrigin[i]);
|
|
}
|
|
|
|
newCharacter.placeOfOrigin.axis.y.scrollBar.styles.innerBar.backgroundColour = toColour(255, 128, 0, 200);
|
|
newCharacter.placeOfOrigin.setScrollBarsManual(true);
|
|
|
|
newCharacter.skinImage = newCharacter.window.image(265, 30, 110, 70, "files/images/skins/gta3/Skin000.png");
|
|
|
|
newCharacter.skinDropDown = newCharacter.window.dropDown(220, 100, 200, 25, 'Choose Skin', {
|
|
main: {
|
|
hover: {
|
|
backgroundColour: toColour(0, 0, 0, 200),
|
|
textColour: toColour(200, 200, 200, 255),
|
|
textSize: 10.0,
|
|
textFont: robotoFont,
|
|
},
|
|
backgroundColour: toColour(0, 0, 0, 120),
|
|
textColour: toColour(200, 200, 200, 255),
|
|
textSize: 10.0,
|
|
textFont: robotoFont,
|
|
width: 200,
|
|
},
|
|
item: {
|
|
backgroundColour: toColour(0, 0, 0, 200),
|
|
textColour: toColour(200, 200, 200, 255),
|
|
textSize: 10.0,
|
|
textFont: robotoFont,
|
|
width: 200,
|
|
},
|
|
item: {
|
|
hover: {
|
|
backgroundColour: toColour(32, 32, 32, 200),
|
|
textColour: toColour(200, 200, 200, 255),
|
|
textSize: 10.0,
|
|
textFont: robotoFont,
|
|
width: 200,
|
|
},
|
|
backgroundColour: toColour(0, 0, 0, 200),
|
|
textColour: toColour(200, 200, 200, 255),
|
|
textSize: 10.0,
|
|
textFont: robotoFont,
|
|
width: 200,
|
|
},
|
|
}, function() {
|
|
let skinImagePath = skinNames[gta.game][this.selectedEntryIndex][2];
|
|
if(newCharacter.skinImage != null) {
|
|
newCharacter.skinImage.remove();
|
|
}
|
|
newCharacter.skinImage = newCharacter.window.image(265, 30, 110, 70, "files/images/skins/gta3/" + skinImagePath.toString());
|
|
});
|
|
newCharacter.skinDropDown.axis.y.scrollBar.styles.innerBar.backgroundColour = toColour(255, 128, 0, 200);
|
|
newCharacter.skinDropDown.setScrollBarsManual(true);
|
|
|
|
for(let i in skinNames[gta.game]) {
|
|
if(skinNames[gta.game][i] != "INVALID") {
|
|
newCharacter.skinDropDown.item(skinNames[gta.game][i][1]);
|
|
}
|
|
}
|
|
|
|
newCharacter.createButton = newCharacter.window.button(220, 130, 200, 25, 'CREATE', {
|
|
main: {
|
|
backgroundColour: toColour(primaryColour[gta.game][0], primaryColour[gta.game][1], primaryColour[gta.game][2], buttonAlpha),
|
|
textColour: toColour(0, 0, 0, 255),
|
|
textSize: 10.0,
|
|
textFont: robotoFont,
|
|
textAlign: 0.5,
|
|
},
|
|
}, checkNewCharacter);
|
|
|
|
// ---------------------------------------------------------------------------------
|
|
|
|
register.window = mexui.window(game.width/2-130, game.height/2-140, 300, 260, 'Register', {
|
|
main: {
|
|
backgroundColour: toColour(0, 0, 0, 120),
|
|
},
|
|
title: {
|
|
textSize: 0.0,
|
|
textColour: toColour(0, 0, 0, 0),
|
|
backgroundColour: toColour(primaryColour[gta.game][0], primaryColour[gta.game][1], primaryColour[gta.game][2], windowTitleAlpha),
|
|
},
|
|
icon: {
|
|
textSize: 0.0,
|
|
textColour: toColour(0, 0, 0, 0),
|
|
backgroundColour: toColour(primaryColour[gta.game][0], primaryColour[gta.game][1], primaryColour[gta.game][2], windowTitleAlpha),
|
|
}
|
|
});
|
|
register.window.titleBarIconSize = new Vec2(0,0);
|
|
register.window.titleBarHeight = 0;
|
|
|
|
register.window.image(115, 10, 65, 65, "files/images/main-logo.png");
|
|
|
|
register.messageLabel = register.window.text(20, 75, 260, 20, 'Create an account', {
|
|
main: {
|
|
textSize: 10.0,
|
|
textAlign: 0.5,
|
|
textColour: toColour(200, 200, 200, 255),
|
|
textFont: robotoFont,
|
|
}
|
|
});
|
|
|
|
register.passwordInput = register.window.textInput(20, 100, 260, 25, '', {
|
|
main: {
|
|
backgroundColour: toColour(0, 0, 0, 120),
|
|
textColour: toColour(200, 200, 200, 255),
|
|
textSize: 10.0,
|
|
textFont: robotoFont,
|
|
},
|
|
caret: {
|
|
backgroundColour: toColour(200, 200, 200, 255),
|
|
},
|
|
placeholder: {
|
|
backgroundColour: toColour(0, 0, 0, 120),
|
|
textColour: toColour(200, 200, 200, 200),
|
|
textSize: 10.0,
|
|
textFont: robotoFont,
|
|
}
|
|
});
|
|
//register.passwordInput.masked = true;
|
|
register.passwordInput.placeholder = "Password";
|
|
|
|
register.confirmPasswordInput = register.window.textInput(20, 130, 260, 25, '', {
|
|
main: {
|
|
backgroundColour: toColour(0, 0, 0, 120),
|
|
textColour: toColour(200, 200, 200, 255),
|
|
textSize: 10.0,
|
|
textFont: robotoFont,
|
|
},
|
|
caret: {
|
|
backgroundColour: toColour(200, 200, 200, 255),
|
|
},
|
|
placeholder: {
|
|
backgroundColour: toColour(0, 0, 0, 120),
|
|
textColour: toColour(200, 200, 200, 200),
|
|
textSize: 10.0,
|
|
textFont: robotoFont,
|
|
}
|
|
});
|
|
//register.confirmPasswordInput.masked = true;
|
|
register.confirmPasswordInput.placeholder = "Confirm password";
|
|
|
|
register.emailInput = register.window.textInput(20, 160, 260, 25, '', {
|
|
main: {
|
|
backgroundColour: toColour(0, 0, 0, 120),
|
|
textColour: toColour(200, 200, 200, 255),
|
|
textSize: 10.0,
|
|
textFont: robotoFont,
|
|
},
|
|
caret: {
|
|
backgroundColour: toColour(200, 200, 200, 255),
|
|
},
|
|
placeholder: {
|
|
backgroundColour: toColour(0, 0, 0, 120),
|
|
textColour: toColour(200, 200, 200, 200),
|
|
textSize: 10.0,
|
|
textFont: robotoFont,
|
|
}
|
|
});
|
|
register.emailInput.placeholder = "Email";
|
|
|
|
register.registerButton = register.window.button(20, 195, 260, 30, 'CREATE ACCOUNT', {
|
|
main: {
|
|
backgroundColour: toColour(primaryColour[gta.game][0], primaryColour[gta.game][1], primaryColour[gta.game][2], 120),
|
|
textColour: toColour(255, 255, 255, 255),
|
|
textSize: 12.0,
|
|
textFont: robotoFont,
|
|
textAlign: 0.5,
|
|
},
|
|
}, checkRegistration);
|
|
|
|
register.alreadyRegisteredLabel = register.window.text(20, 230, 175, 22, "Already have an account?", {
|
|
main: {
|
|
textSize: 9.0,
|
|
textAlign: 1.0,
|
|
textColour: toColour(255, 255, 255, 255),
|
|
textFont: robotoFont,
|
|
}
|
|
});
|
|
|
|
register.loginButton = register.window.button(205, 232, 75, 15, 'LOGIN', {
|
|
main: {
|
|
backgroundColour: toColour(primaryColour[gta.game][0], primaryColour[gta.game][1], primaryColour[gta.game][2], 120),
|
|
textColour: toColour(255, 255, 255, 255),
|
|
textSize: 9.0,
|
|
textAlign: 0.5,
|
|
textFont: robotoFont,
|
|
},
|
|
}, showLogin);
|
|
|
|
// ---------------------------------------------------------------------------------
|
|
|
|
errorDialog.window = mexui.window(game.width/2-200, game.height/2-70, 400, 140, 'ERROR', {
|
|
main: {
|
|
backgroundColour: toColour(0, 0, 0, 120),
|
|
},
|
|
title: {
|
|
textSize: 11.0,
|
|
textColour: toColour(0, 0, 0, 255),
|
|
backgroundColour: toColour(primaryColour[gta.game][0], primaryColour[gta.game][1], primaryColour[gta.game][2], windowTitleAlpha),
|
|
},
|
|
icon: {
|
|
textSize: 0.0,
|
|
textColour: toColour(0, 0, 0, 0),
|
|
backgroundColour: toColour(0, 0, 0, 0),
|
|
},
|
|
});
|
|
|
|
errorDialog.messageLabel = errorDialog.window.text(15, 50, 370, 20, 'Error Message', {
|
|
main: {
|
|
textSize: 10.0,
|
|
textAlign: 0.5,
|
|
textColour: toColour(255, 255, 255, 255),
|
|
textFont: robotoFont,
|
|
}
|
|
});
|
|
|
|
errorDialog.okayButton = errorDialog.window.button(20, 95, 360, 30, 'OK', {
|
|
main: {
|
|
backgroundColour: toColour(primaryColour[gta.game][0], primaryColour[gta.game][1], primaryColour[gta.game][2], buttonAlpha),
|
|
textColour: toColour(0, 0, 0, 255),
|
|
textSize: 10.0,
|
|
textFont: robotoFont,
|
|
textAlign: 0.5,
|
|
},
|
|
}, closeErrorDialog);
|
|
|
|
// ---------------------------------------------------------------------------------
|
|
|
|
yesNoDialog.window = mexui.window(game.width/2-200, game.height/2-70, 400, 140, 'Question', {
|
|
main: {
|
|
backgroundColour: toColour(0, 0, 0, 120),
|
|
},
|
|
title: {
|
|
textSize: 11.0,
|
|
textColour: toColour(0, 0, 0, 255),
|
|
backgroundColour: toColour(primaryColour[gta.game][0], primaryColour[gta.game][1], primaryColour[gta.game][2], windowTitleAlpha),
|
|
},
|
|
icon: {
|
|
textSize: 0.0,
|
|
textColour: toColour(0, 0, 0, 0),
|
|
backgroundColour: toColour(0, 0, 0, 0),
|
|
},
|
|
});
|
|
|
|
yesNoDialog.messageLabel = yesNoDialog.window.text(15, 50, 370, 20, 'Would you like to answer this question?', {
|
|
main: {
|
|
textSize: 10.0,
|
|
textAlign: 0.5,
|
|
textColour: toColour(255, 255, 255, 255),
|
|
textFont: robotoFont,
|
|
}
|
|
});
|
|
|
|
yesNoDialog.yesButton = yesNoDialog.window.button(20, 95, 175, 30, 'YES', {
|
|
main: {
|
|
backgroundColour: toColour(primaryColour[gta.game][0], primaryColour[gta.game][1], primaryColour[gta.game][2], buttonAlpha),
|
|
textColour: toColour(0, 0, 0, 255),
|
|
textSize: 10.0,
|
|
textFont: robotoFont,
|
|
textAlign: 0.5,
|
|
},
|
|
}, yesNoDialogAnswerYes);
|
|
|
|
yesNoDialog.noButton = yesNoDialog.window.button(205, 95, 175, 30, 'NO', {
|
|
main: {
|
|
backgroundColour: toColour(primaryColour[gta.game][0], primaryColour[gta.game][1], primaryColour[gta.game][2], buttonAlpha),
|
|
textColour: toColour(0, 0, 0, 255),
|
|
textSize: 10.0,
|
|
textFont: robotoFont,
|
|
textAlign: 0.5,
|
|
},
|
|
}, yesNoDialogAnswerNo);
|
|
|
|
// ---------------------------------------------------------------------------------
|
|
|
|
infoDialog.window = mexui.window(game.width/2-200, game.height/2-70, 400, 140, 'Information', {
|
|
main: {
|
|
backgroundColour: toColour(0, 0, 0, 120),
|
|
},
|
|
title: {
|
|
textSize: 11.0,
|
|
textColour: toColour(0, 0, 0, 255),
|
|
backgroundColour: toColour(primaryColour[gta.game][0], primaryColour[gta.game][1], primaryColour[gta.game][2], windowTitleAlpha),
|
|
},
|
|
icon: {
|
|
textSize: 0.0,
|
|
textColour: toColour(0, 0, 0, 0),
|
|
backgroundColour: toColour(0, 0, 0, 0),
|
|
},
|
|
});
|
|
|
|
infoDialog.messageLabel = infoDialog.window.text(15, 50, 370, 20, 'Information Message', {
|
|
main: {
|
|
textSize: 10.0,
|
|
textAlign: 0.5,
|
|
textColour: toColour(255, 255, 255, 220),
|
|
textFont: robotoFont,
|
|
}
|
|
});
|
|
|
|
infoDialog.okayButton = infoDialog.window.button(20, 95, 360, 30, 'OK', {
|
|
main: {
|
|
backgroundColour: toColour(primaryColour[gta.game][0], primaryColour[gta.game][1], primaryColour[gta.game][2], buttonAlpha),
|
|
textColour: toColour(0, 0, 0, 255),
|
|
textSize: 10.0,
|
|
textFont: robotoFont,
|
|
textAlign: 0.5,
|
|
},
|
|
}, closeInfoDialog);
|
|
|
|
// ---------------------------------------------------------------------------------
|
|
|
|
characterSelect.window = mexui.window(game.width/2-215, game.height/2-83, 430, 166, 'Select Character', {
|
|
main: {
|
|
backgroundColour: toColour(0, 0, 0, 120),
|
|
},
|
|
title: {
|
|
textSize: 11.0,
|
|
textColour: toColour(0, 0, 0, 255),
|
|
backgroundColour: toColour(primaryColour[gta.game][0], primaryColour[gta.game][1], primaryColour[gta.game][2], windowTitleAlpha),
|
|
},
|
|
icon: {
|
|
textSize: 0.0,
|
|
textColour: toColour(0, 0, 0, 0),
|
|
backgroundColour: toColour(0, 0, 0, 0),
|
|
},
|
|
});
|
|
|
|
characterSelect.nameText = characterSelect.window.text(10, 40, 200, 25, 'Lastname, Firstname', {
|
|
main: {
|
|
textSize: 14.0,
|
|
textAlign: 0.0,
|
|
textColour: toColour(255, 255, 255, 220),
|
|
textFont: robotoFont,
|
|
}
|
|
});
|
|
|
|
characterSelect.dateOfBirthText = characterSelect.window.text(10, 70, 200, 25, 'Born: ', {
|
|
main: {
|
|
textSize: 9.0,
|
|
textAlign: 0.0,
|
|
textColour: toColour(255, 255, 255, 220),
|
|
textFont: robotoFont,
|
|
}
|
|
});
|
|
|
|
characterSelect.placeOfOrigin = characterSelect.window.text(10, 90, 200, 25, 'From: ', {
|
|
main: {
|
|
textSize: 9.0,
|
|
textAlign: 0.0,
|
|
textColour: toColour(255, 255, 255, 220),
|
|
textFont: robotoFont,
|
|
}
|
|
});
|
|
|
|
characterSelect.selectCharacterButton = characterSelect.window.button(90, 130, 250, 25, 'SELECT', {
|
|
main: {
|
|
backgroundColour: toColour(primaryColour[gta.game][0], primaryColour[gta.game][1], primaryColour[gta.game][2], buttonAlpha),
|
|
textColour: toColour(0, 0, 0, 255),
|
|
textSize: 12.0,
|
|
textFont: robotoFont,
|
|
textAlign: 0.5,
|
|
},
|
|
}, selectThisCharacter);
|
|
|
|
characterSelect.newCharacterButton = characterSelect.window.button(140, 180, 150, 25, 'NEW CHARACTER', {
|
|
main: {
|
|
backgroundColour: toColour(primaryColour[gta.game][0], primaryColour[gta.game][1], primaryColour[gta.game][2], buttonAlpha),
|
|
textColour: toColour(0, 0, 0, 255),
|
|
textSize: 12.0,
|
|
textFont: robotoFont,
|
|
textAlign: 0.5,
|
|
},
|
|
}, showNewCharacter);
|
|
|
|
characterSelect.previousCharacterButton = characterSelect.window.button(10, 130, 75, 25, '< PREV', {
|
|
main: {
|
|
backgroundColour: toColour(primaryColour[gta.game][0], primaryColour[gta.game][1], primaryColour[gta.game][2], buttonAlpha),
|
|
textColour: toColour(0, 0, 0, 255),
|
|
textSize: 10.0,
|
|
textFont: robotoFont,
|
|
textAlign: 0.5,
|
|
},
|
|
}, selectPreviousCharacter);
|
|
|
|
characterSelect.nextCharacterButton = characterSelect.window.button(345, 130, 75, 25, 'NEXT >', {
|
|
main: {
|
|
backgroundColour: toColour(primaryColour[gta.game][0], primaryColour[gta.game][1], primaryColour[gta.game][2], buttonAlpha),
|
|
textColour: toColour(0, 0, 0, 255),
|
|
textSize: 10.0,
|
|
textFont: robotoFont,
|
|
textAlign: 0.5,
|
|
},
|
|
}, selectNextCharacter);
|
|
|
|
characterSelect.skinImage = characterSelect.window.image(265, 30, 130, 85, "files/images/skins/gta3/Skin000.png");
|
|
|
|
// ---------------------------------------------------------------------------
|
|
|
|
closeAllWindows();
|
|
|
|
};
|
|
|
|
// ---------------------------------------------------------------------------
|
|
|
|
let checkLogin = function() {
|
|
triggerNetworkEvent("ag.checkLogin", login.passwordInput.lines[0]);
|
|
}
|
|
|
|
// ---------------------------------------------------------------------------
|
|
|
|
let loginFailed = function(errorMessage) {
|
|
//if(loginAttemptsRemaining >= 1) {
|
|
login.messageLabel.text = errorMessage;
|
|
login.messageLabel.styles.main.textColour = toColour(180, 32, 32, 255);
|
|
login.passwordInput.text = "";
|
|
//} else {
|
|
// closeAllWindows();
|
|
//}
|
|
}
|
|
|
|
// ---------------------------------------------------------------------------
|
|
|
|
let loginSuccess = function() {
|
|
closeAllWindows();
|
|
}
|
|
|
|
// ---------------------------------------------------------------------------
|
|
|
|
let checkRegistration = function() {
|
|
triggerNetworkEvent("ag.checkRegistration", register.passwordInput.lines[0], register.confirmPasswordInput.lines[0], register.emailInput.lines[0]);
|
|
}
|
|
|
|
// ---------------------------------------------------------------------------
|
|
|
|
let checkNewCharacter = function() {
|
|
if(newCharacter.skinDropDown.selectedEntryIndex == -1) {
|
|
return false;
|
|
}
|
|
|
|
if(newCharacter.firstNameInput.lines[0].length < 2) {
|
|
return false;
|
|
}
|
|
|
|
if(newCharacter.lastNameInput.lines[0].length < 2) {
|
|
return false;
|
|
}
|
|
|
|
if(newCharacter.placeOfOrigin.selectedEntryIndex == -1) {
|
|
return false;
|
|
}
|
|
|
|
triggerNetworkEvent("ag.checkNewCharacter",
|
|
newCharacter.firstNameInput.lines[0],
|
|
newCharacter.lastNameInput.lines[0],
|
|
String(String(newCharacter.dateOfBirth.day) + "/" + String(newCharacter.dateOfBirth.month) + "/" + String(newCharacter.dateOfBirth.year)),
|
|
placesOfOrigin[newCharacter.placeOfOrigin.selectedEntryIndex],
|
|
skinNames[gta.game][newCharacter.skinDropDown.selectedEntryIndex][0],
|
|
);
|
|
}
|
|
|
|
// ---------------------------------------------------------------------------
|
|
|
|
let registrationFailed = function(errorMessage) {
|
|
register.messageLabel.text = errorMessage;
|
|
register.messageLabel.styles.main.textColour = toColour(180, 32, 32, 255);
|
|
register.passwordInput.text = "";
|
|
register.confirmPasswordInput.text = "";
|
|
register.emailInput.text = "";
|
|
}
|
|
|
|
// ---------------------------------------------------------------------------
|
|
|
|
let registrationSuccess = function() {
|
|
closeAllWindows();
|
|
}
|
|
|
|
// ---------------------------------------------------------------------------
|
|
|
|
let characterSelectSuccess = function() {
|
|
closeAllWindows();
|
|
}
|
|
|
|
// ---------------------------------------------------------------------------
|
|
|
|
let closeErrorDialog = function() {
|
|
errorDialog.window.shown = false;
|
|
mexui.setInput(false);
|
|
}
|
|
|
|
// ---------------------------------------------------------------------------
|
|
|
|
let closeInfoDialog = function() {
|
|
infoDialog.window.shown = false;
|
|
mexui.setInput(false);
|
|
}
|
|
|
|
// ---------------------------------------------------------------------------
|
|
|
|
let closeAllWindows = function() {
|
|
infoDialog.window.shown = false;
|
|
errorDialog.window.shown = false;
|
|
yesNoDialog.window.shown = false;
|
|
errorDialog.window.shown = false;
|
|
register.window.shown = false;
|
|
login.window.shown = false;
|
|
newCharacter.window.shown = false;
|
|
characterSelect.window.shown = false;
|
|
mexui.setInput(false);
|
|
}
|
|
|
|
// ---------------------------------------------------------------------------
|
|
|
|
let yesNoDialogAnswerNo = function() {
|
|
triggerNetworkEvent("ag.promptAnswerNo");
|
|
}
|
|
|
|
// ---------------------------------------------------------------------------
|
|
|
|
let yesNoDialogAnswerYes = function() {
|
|
triggerNetworkEvent("ag.promptAnswerYes");
|
|
}
|
|
|
|
// ---------------------------------------------------------------------------
|
|
|
|
let showRegistration = function() {
|
|
closeAllWindows();
|
|
mexui.setInput(true);
|
|
register.window.shown = true;
|
|
}
|
|
|
|
// ---------------------------------------------------------------------------
|
|
|
|
let showLogin = function() {
|
|
closeAllWindows();
|
|
mexui.setInput(true);
|
|
login.window.shown = true;
|
|
}
|
|
|
|
// ---------------------------------------------------------------------------
|
|
|
|
let showCharacterSelect = function(firstName, lastName, placeOfOrigin, dateOfBirth, skinId) {
|
|
closeAllWindows();
|
|
mexui.setInput(true);
|
|
|
|
characterSelect.nameText.text = lastName + ", " + firstName;
|
|
characterSelect.dateOfBirthText.text = "Born: " + String(dateOfBirth);
|
|
characterSelect.placeOfOrigin.text = "From: " + String(placeOfOrigin);
|
|
|
|
if(characterSelect.skinImage != null) {
|
|
characterSelect.skinImage.remove();
|
|
}
|
|
|
|
console.log(skinId);
|
|
let skinImagePath = "Skin000.png";
|
|
for(let i in skinNames[gta.game]) {
|
|
if(skinNames[gta.game][i][0] == skinId) {
|
|
skinImagePath = skinNames[gta.game][i][2];
|
|
}
|
|
}
|
|
|
|
characterSelect.skinImage = characterSelect.window.image(265, 30, 130, 85, "files/images/skins/gta3/" + String(skinImagePath));
|
|
|
|
characterSelect.window.shown = true;
|
|
}
|
|
|
|
// ---------------------------------------------------------------------------
|
|
|
|
let showError = function(errorMessage, errorTitle) {
|
|
closeAllWindows();
|
|
mexui.setInput(true);
|
|
errorDialog.messageLabel.text = errorMessage;
|
|
errorDialog.window.shown = true;
|
|
}
|
|
|
|
// ---------------------------------------------------------------------------
|
|
|
|
let showYesNo = function(promptMessage, promptTitle) {
|
|
closeAllWindows();
|
|
mexui.setInput(true);
|
|
yesNoDialog.messageLabel.text = promptMessage;
|
|
yesNoDialog.window.shown = true;
|
|
}
|
|
|
|
// ---------------------------------------------------------------------------
|
|
|
|
let showInfo = function(infoMessage, infoTitle) {
|
|
closeAllWindows();
|
|
mexui.setInput(true);
|
|
infoDialog.messageLabel.text = infoMessage;
|
|
infoDialog.window.shown = true;
|
|
}
|
|
|
|
// ---------------------------------------------------------------------------
|
|
|
|
let showNewCharacter = function() {
|
|
closeAllWindows();
|
|
mexui.setInput(true);
|
|
newCharacter.window.shown = true;
|
|
}
|
|
|
|
// ---------------------------------------------------------------------------
|
|
|
|
let selectNextCharacter = function() {
|
|
triggerNetworkEvent("ag.nextCharacter");
|
|
}
|
|
|
|
// ---------------------------------------------------------------------------
|
|
|
|
let selectPreviousCharacter = function() {
|
|
triggerNetworkEvent("ag.previousCharacter");
|
|
}
|
|
|
|
// ---------------------------------------------------------------------------
|
|
|
|
let selectThisCharacter = function() {
|
|
triggerNetworkEvent("ag.selectCharacter");
|
|
}
|
|
|
|
// ---------------------------------------------------------------------------
|
|
|
|
let switchCharacterSelect = function(firstName, lastName, placeOfOrigin, dateOfBirth, skinId) {
|
|
characterSelect.window.shown = false;
|
|
characterSelect.nameText.text = lastName + ", " + firstName;
|
|
characterSelect.dateOfBirthText.text = "Born: " + String(dateOfBirth);
|
|
characterSelect.placeOfOrigin.text = "From: " + String(placeOfOrigin);
|
|
|
|
|
|
if(characterSelect.skinImage != null) {
|
|
characterSelect.skinImage.remove();
|
|
}
|
|
|
|
console.log(skinId);
|
|
|
|
let skinImagePath = "Skin000.png";
|
|
for(let i in skinNames[gta.game]) {
|
|
if(skinNames[gta.game][i][0] == skinId) {
|
|
skinImagePath = skinNames[gta.game][i][2];
|
|
}
|
|
}
|
|
|
|
characterSelect.skinImage = characterSelect.window.image(265, 30, 130, 85, "files/images/skins/gta3/" + String(skinImagePath));
|
|
characterSelect.window.shown = true;
|
|
}
|
|
|
|
// ---------------------------------------------------------------------------
|
|
|
|
bindEventHandler("OnResourceReady", thisResource, function(event, resource) {
|
|
app.init();
|
|
});
|
|
|
|
// ---------------------------------------------------------------------------
|
|
|
|
addNetworkHandler("ag.showLogin", function() {
|
|
showLogin();
|
|
});
|
|
|
|
// ---------------------------------------------------------------------------
|
|
|
|
addNetworkHandler("ag.showRegistration", function() {
|
|
showRegistration();
|
|
});
|
|
|
|
// ---------------------------------------------------------------------------
|
|
|
|
addNetworkHandler("ag.showNewCharacter", function() {
|
|
showNewCharacter();
|
|
});
|
|
|
|
// ---------------------------------------------------------------------------
|
|
|
|
addNetworkHandler("ag.showCharacterSelect", function(firstName, lastName, placeOfOrigin, dateOfBirth, skinId) {
|
|
showCharacterSelect(firstName, lastName, placeOfOrigin, dateOfBirth, skinId);
|
|
});
|
|
|
|
// ---------------------------------------------------------------------------
|
|
|
|
addNetworkHandler("ag.switchCharacterSelect", function(firstName, lastName, placeOfOrigin, dateOfBirth, skinId) {
|
|
switchCharacterSelect(firstName, lastName, placeOfOrigin, dateOfBirth, skinId);
|
|
});
|
|
|
|
// ---------------------------------------------------------------------------
|
|
|
|
addNetworkHandler("ag.showError", function(errorMessage, errorTitle) {
|
|
showError(errorMessage, errorTitle);
|
|
});
|
|
|
|
// ---------------------------------------------------------------------------
|
|
|
|
addNetworkHandler("ag.showPrompt", function(promptMessage, promptTitle) {
|
|
showYesNo(promptMessage, promptTitle);
|
|
});
|
|
|
|
// ---------------------------------------------------------------------------
|
|
|
|
addNetworkHandler("ag.showInfo", function(infoMessage) {
|
|
showInfo(infoMessage);
|
|
});
|
|
|
|
// ---------------------------------------------------------------------------
|
|
|
|
addNetworkHandler("ag.loginSuccess", function() {
|
|
loginSuccess();
|
|
});
|
|
|
|
// ---------------------------------------------------------------------------
|
|
|
|
addNetworkHandler("ag.characterSelectSuccess", function() {
|
|
characterSelectSuccess();
|
|
});
|
|
|
|
// ---------------------------------------------------------------------------
|
|
|
|
addNetworkHandler("ag.loginFailed", function(remainingAttempts) {
|
|
loginFailed(remainingAttempts);
|
|
});
|
|
|
|
// ---------------------------------------------------------------------------
|
|
|
|
addNetworkHandler("ag.registrationSuccess", function() {
|
|
registrationSuccess();
|
|
});
|
|
|
|
// ---------------------------------------------------------------------------
|
|
|
|
addNetworkHandler("ag.registrationFailed", function(errorMessage) {
|
|
registrationFailed(errorMessage);
|
|
});
|
|
|
|
// ---------------------------------------------------------------------------
|