Shop System [Clothes] base
This commit is contained in:
Lukas Moungos
committed by
Lukas Moungos
Lukas Moungos
parent
461b9aa4cb
commit
834c5cb22d
233
ReallifeGamemode.Client/Interaction/ClotheShop.ts
Normal file
233
ReallifeGamemode.Client/Interaction/ClotheShop.ts
Normal file
@@ -0,0 +1,233 @@
|
||||
import * as NativeUI from 'NativeUI';
|
||||
|
||||
const UIMenu = NativeUI.Menu;
|
||||
const UIMenuItem = NativeUI.UIMenuItem;
|
||||
const UIMenuListItem = NativeUI.UIMenuListItem;
|
||||
const UIMenuCheckboxItem = NativeUI.UIMenuCheckboxItem;
|
||||
const BadgeStyle = NativeUI.BadgeStyle;
|
||||
const Point = NativeUI.Point;
|
||||
const ItemsCollection = NativeUI.ItemsCollection;
|
||||
const Color = NativeUI.Color;
|
||||
|
||||
let screenRes = mp.game.graphics.getScreenResolution(0, 0);
|
||||
let saveItem = new UIMenuItem("Bestätigen", "");
|
||||
saveItem.BackColor = new Color(13, 71, 161);
|
||||
saveItem.HighlightedBackColor = new Color(25, 118, 210);
|
||||
|
||||
let cancelItem = new UIMenuItem("Abbrechen", "");
|
||||
cancelItem.BackColor = new Color(213, 0, 0);
|
||||
cancelItem.HighlightedBackColor = new Color(229, 57, 53);
|
||||
|
||||
export default function clotheShopList(globalData: GlobalData) {
|
||||
|
||||
const categoryTitles = {
|
||||
clothes: {
|
||||
1: "Masks",
|
||||
2: "Hair Styles",
|
||||
3: "Torsos",
|
||||
4: "Legs",
|
||||
5: "Bags and Parachutes",
|
||||
6: "Shoes",
|
||||
7: "Accessories",
|
||||
8: "Undershirts",
|
||||
9: "Body Armors",
|
||||
10: "Decals",
|
||||
11: "Tops"
|
||||
},
|
||||
|
||||
props: {
|
||||
0: "Hats",
|
||||
1: "Glasses",
|
||||
2: "Ears",
|
||||
6: "Watches",
|
||||
7: "Bracelets"
|
||||
}
|
||||
};
|
||||
|
||||
const localPlayer = mp.players.local;
|
||||
|
||||
let mainMenu = null;
|
||||
let categoryMenus = [];
|
||||
let clothingData = {} as any;
|
||||
let currentMenuIdx = -1;
|
||||
let menuTransition = false; // workaround for ItemSelect event being called twice between menu transitions
|
||||
let lastClothing = null;
|
||||
|
||||
function addClothingItems(type, bannerSprite, key, value) {
|
||||
mainMenu.AddItem(new UIMenuItem(categoryTitles[type][key], `${type === "props" ? "Prop category." : "Clothing category."}`));
|
||||
|
||||
// Create category menu
|
||||
const categoryMenu = new UIMenu("", categoryTitles[type][key].toUpperCase(), new Point(0, 0), bannerSprite.library, bannerSprite.texture);
|
||||
categoryMenu.Visible = false;
|
||||
|
||||
// Fill it
|
||||
const itemDescription = (type === "props" ? "Prop item." : "Clothing item.");
|
||||
|
||||
for (const item of value) {
|
||||
const tempItem = new UIMenuItem(item.name, itemDescription);
|
||||
tempItem.SetRightLabel(`${Number.isInteger(item.price) ? `$${item.price}` : "FREE"}`);
|
||||
|
||||
categoryMenu.AddItem(tempItem);
|
||||
}
|
||||
|
||||
categoryMenus.push({
|
||||
menu: categoryMenu,
|
||||
type: type,
|
||||
slotIdx: Number(key)
|
||||
});
|
||||
}
|
||||
|
||||
function submenuItemChangeHandler(newIndex) {
|
||||
const currentMenu = categoryMenus[currentMenuIdx];
|
||||
const currentItem = clothingData[currentMenu.type][currentMenu.slotIdx][newIndex];
|
||||
|
||||
switch (currentMenu.type) {
|
||||
case "clothes":
|
||||
localPlayer.setComponentVariation(currentMenu.slotIdx, currentItem.drawable, currentItem.texture, 2);
|
||||
break;
|
||||
|
||||
case "props":
|
||||
if (currentItem.drawable === -1) {
|
||||
localPlayer.clearProp(currentMenu.slotIdx);
|
||||
} else {
|
||||
localPlayer.setPropIndex(currentMenu.slotIdx, currentItem.drawable, currentItem.texture, true);
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
function resetPreview() {
|
||||
if (lastClothing) {
|
||||
switch (lastClothing.type) {
|
||||
case "clothes":
|
||||
localPlayer.setComponentVariation(lastClothing.slotIdx, lastClothing.drawable, lastClothing.texture, 2);
|
||||
break;
|
||||
|
||||
case "props":
|
||||
if (lastClothing.drawable === -1) {
|
||||
localPlayer.clearProp(lastClothing.slotIdx);
|
||||
} else {
|
||||
localPlayer.setPropIndex(lastClothing.slotIdx, lastClothing.drawable, lastClothing.texture, true);
|
||||
}
|
||||
break;
|
||||
}
|
||||
|
||||
lastClothing = null;
|
||||
}
|
||||
}
|
||||
|
||||
mp.events.add("clothesMenu:updateData", (jsonBannerSprite, jsonData) => {
|
||||
var bannerSprite = JSON.parse(jsonBannerSprite);
|
||||
var data = JSON.parse(jsonData);
|
||||
|
||||
// Default menu banner
|
||||
if (bannerSprite == null) {
|
||||
bannerSprite = {
|
||||
library: "commonmenu",
|
||||
texture: "interaction_bgd"
|
||||
};
|
||||
} else if (bannerSprite == 1) {
|
||||
bannerSprite = {
|
||||
library: "shopui_title_lowendfashion",
|
||||
texture: "shopui_title_lowendfashion"
|
||||
};
|
||||
} else if (bannerSprite == 2) {
|
||||
bannerSprite = {
|
||||
library: "shopui_title_midfashion",
|
||||
texture: "shopui_title_midfashion"
|
||||
};
|
||||
} else if (bannerSprite == 3) {
|
||||
bannerSprite = {
|
||||
library: "shopui_title_highendfashion",
|
||||
texture: "shopui_title_highendfashion"
|
||||
};
|
||||
}
|
||||
// Hide the chat
|
||||
mp.gui.chat.show(false);
|
||||
|
||||
// Reset some variables
|
||||
categoryMenus = [];
|
||||
currentMenuIdx = -1;
|
||||
menuTransition = false;
|
||||
lastClothing = null;
|
||||
|
||||
// Create a new main menu
|
||||
mainMenu = new UIMenu("", "SELECT A CATEGORY", new Point(0, 0), bannerSprite.library, bannerSprite.texture);
|
||||
mainMenu.Visible = true;
|
||||
|
||||
// Update clothingData
|
||||
clothingData = data;
|
||||
|
||||
// Add clothes
|
||||
for (const [key, value] of Object.entries(clothingData)) addClothingItems("clothes", bannerSprite, key, value);
|
||||
|
||||
// Add props
|
||||
// for (const [key, value] of Object.entries(clothingData.props)) addClothingItems("props", bannerSprite, key, value);
|
||||
|
||||
// Submenu events
|
||||
for (const item of categoryMenus) {
|
||||
// Preview hovering item
|
||||
item.menu.IndexChange.on(submenuItemChangeHandler);
|
||||
|
||||
// Buy hovering item
|
||||
item.menu.ItemSelect.on((selectedItem, itemIndex) => {
|
||||
if (menuTransition) {
|
||||
menuTransition = false;
|
||||
return;
|
||||
}
|
||||
|
||||
const currentMenu = categoryMenus[currentMenuIdx];
|
||||
const currentItem = clothingData[currentMenu.type][currentMenu.slotIdx][itemIndex];
|
||||
mp.events.callRemote("buyClothingItem", currentMenu.type, currentMenu.slotIdx, currentItem.texture, currentItem.drawable, currentItem.price);
|
||||
});
|
||||
|
||||
// Reset preview when player backs out of category menu
|
||||
item.menu.MenuClose.on(() => {
|
||||
resetPreview();
|
||||
|
||||
currentMenuIdx = -1;
|
||||
mainMenu.Visible = true;
|
||||
});
|
||||
}
|
||||
|
||||
// Main menu events
|
||||
mainMenu.ItemSelect.on((selectedItem, itemIndex) => {
|
||||
const nextMenu = categoryMenus[itemIndex];
|
||||
const slot = Number(nextMenu.slotIdx);
|
||||
|
||||
lastClothing = {
|
||||
type: nextMenu.type,
|
||||
slotIdx: slot,
|
||||
drawable: (nextMenu.type === "props" ? localPlayer.getPropIndex(slot) : localPlayer.getDrawableVariation(slot)),
|
||||
texture: (nextMenu.type === "props" ? localPlayer.getPropTextureIndex(slot) : localPlayer.getTextureVariation(slot))
|
||||
};
|
||||
|
||||
currentMenuIdx = itemIndex;
|
||||
mainMenu.Visible = false;
|
||||
nextMenu.menu.Visible = true;
|
||||
menuTransition = true;
|
||||
|
||||
submenuItemChangeHandler(nextMenu.menu.CurrentSelection);
|
||||
});
|
||||
|
||||
mainMenu.MenuClose.on(() => {
|
||||
mp.gui.chat.show(true);
|
||||
|
||||
currentMenuIdx = -1;
|
||||
lastClothing = null;
|
||||
});
|
||||
});
|
||||
|
||||
mp.events.add("clothesMenu:updateLast", (drawable, texture) => {
|
||||
if (lastClothing) {
|
||||
lastClothing.drawable = drawable;
|
||||
lastClothing.texture = texture;
|
||||
}
|
||||
});
|
||||
|
||||
mp.events.add("clothesMenu:close", () => {
|
||||
if (currentMenuIdx !== -1) categoryMenus[currentMenuIdx].menu.Close();
|
||||
if (mainMenu && mainMenu.Visible) mainMenu.Close();
|
||||
});
|
||||
|
||||
}
|
||||
Reference in New Issue
Block a user