reallife-gamemode/ReallifeGamemode.Client/Interaction/ClotheShop.ts

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();
    });

}