Updated 2.1.0

Updated everything to new format, N1K0 is about to work on some more stuff.

ND_CharacterSelection/config.lua

@@ -0,0 +1,56 @@
+-- For support join my discord: https://discord.gg/Z9Mxu72zZ6
+
+config = {
+    changeCharacterCommand = "changecharacter", -- this is the command to open the ui again and change your character.
+
+    characterSelectionAopDisplay = false,
+    aop = function ()
+        return "AOP: " .. exports["SimpleHUD"]:getAOP() -- exports["ModernHUD"]:getAOP()
+    end,
+
+    -- set your backgrounds, if you have more than 1 then it will randomly change everytime you open the ui.
+    backgrounds = {
+        "https://i.imgur.com/E51ckFx.png", -- Credits: Fuzzman270#0270
+        "https://i.imgur.com/SeZD7TP.png", -- Credits: Fuzzman270#0270
+        "https://i.imgur.com/ZWKfYD9.png" -- Credits: 2XRondo#6374
+    },
+
+    departments = {
+        ["CIV"] = {"0"},
+        ["SAHP"] = {"0"},
+        ["LSPD"] = {"0"},
+        ["BCSO"] = {"872921520719142932"},
+        ["LSFD"] = {"872921520719142932"}
+    },
+
+    -- set up the spawn buttons for each department.
+    spawns = {
+        ["CIV"] = {
+            {x = -102.78, y = 6336.28, z = 31.49, name = "Dream View Motel (Paleto Bay)"},
+            {x = 343.53, y = 2636.94, z = 43.94, name = "Eastern Motel (Sandy Shores)"},
+            {x = 196.96, y = -934.54, z = 29.69, name = "Legion Square"},
+            {x = -1616.69, y = -1073.81, z = 12.15, name = "Del Perro Pier"},
+            {x = -1039.65, y = -2741.02, z = 12.89, name = "LSIA"}
+        },
+        ["SAHP"] = {
+            {x = -447.2, y = 6009.4, z = 30.72, name = "Paleto Bay Sheriff"},
+            {x = 1849.4, y = 3688.6, z = 33.27, name = "Sandy Shores Sheriff"},
+            {x = 437.6, y = -986.6, z = 29.69, name = "Mission Row PD"}
+        },
+        ["LSPD"] = {
+            {x = -447.2, y = 6009.4, z = 30.72, name = "Paleto Bay Sheriff"},
+            {x = 1849.4, y = 3688.6, z = 33.27, name = "Sandy Shores Sheriff"},
+            {x = 437.6, y = -986.6, z = 29.69, name = "Mission Row PD"}
+        },
+        ["BCSO"] = {
+            {x = -447.2, y = 6009.4, z = 30.72, name = "Paleto Bay Sheriff"},
+            {x = 1849.4, y = 3688.6, z = 33.27, name = "Sandy Shores Sheriff"},
+            {x = 437.6, y = -986.6, z = 29.69, name = "Mission Row Police "}
+        },
+        ["LSFD"] = {
+            {x = -384.07, y = 6117.9, z = 30.48, name = "Fire Station No1 (Paleto Bay)"},
+            {x = 1691.5, y = 3597.95, z = 34.56, name = "Fire Station No2 (Sandy Shores)"},
+            {x = 1194.71, y = -1474.14, z = 33.86, name = "Fire Station No7 (Los Santos)"}
+        },
+    }
+}

ND_CharacterSelection/fxmanifest.lua

@@ -0,0 +1,22 @@
+-- For support join my discord: https://discord.gg/Z9Mxu72zZ6
+
+author "Andyyy#7666"
+description "ND Character Selection (DOJ Based)"
+version "2.1.0"
+
+fx_version "cerulean"
+game "gta5"
+lua54 "yes"
+
+files {
+	"source/ui/index.html",
+	"source/ui/script.js",
+	"source/ui/style.css"
+}
+ui_page "source/ui/index.html"
+
+shared_script "config.lua"
+server_script "source/server.lua"
+client_script "source/client.lua"
+
+dependency "ND_Core"

ND_CharacterSelection/source/client.lua

@@ -0,0 +1,192 @@
+-- For support join my discord: https://discord.gg/Z9Mxu72zZ6
+
+NDCore = exports["ND_Core"]:GetCoreObject()
+
+function tablelength(table)
+    local count = 0
+    for _ in pairs(table) do
+        count = count + 1
+    end
+    return count
+end
+
+function SetDisplay(bool, typeName, bg)
+    if not bg then
+        background = config.backgrounds[math.random(1, #config.backgrounds)]
+    end
+    SetNuiFocus(bool, bool)
+    SendNUIMessage({
+        type = typeName,
+        background = background,
+        status = bool,
+        serverName = NDCore.config.serverName,
+        characterAmount = tablelength(NDCore.characters) .. "/" .. NDCore.config.characterLimit
+    })
+    if config.characterSelectionAopDisplay then
+        SendNUIMessage({
+            type = "aop",
+            aop = config.aop()
+        })
+    end
+end
+
+function start(switch)
+    TriggerServerEvent("ND_CharacterSelection:checkPerms")
+    TriggerServerEvent("ND:getCharacters")
+    if switch then
+        local ped = PlayerPedId()
+        SwitchOutPlayer(ped, 0, 1)
+        FreezeEntityPosition(ped, true)
+        SetEntityVisible(ped, false, 0)
+    end
+    SendNUIMessage({
+        type = "onStart",
+        maxStartingBank = NDCore.config.startingBank,
+        maxStartingCash = NDCore.config.startingCash
+    })
+    if config.characterSelectionAopDisplay then
+        SendNUIMessage({
+            type = "aop",
+            aop = config.aop()
+        })
+    end
+end
+
+AddEventHandler("onResourceStart", function(resourceName)
+    if (GetCurrentResourceName() ~= resourceName) then
+      return
+    end
+    Citizen.Wait(2000)
+    start(false)
+end)  
+
+AddEventHandler("playerSpawned", function()
+    start(true)
+end)
+
+-- This is used to add department drop down on the ui.
+RegisterNetEvent("ND_CharacterSelection:permsChecked")
+AddEventHandler("ND_CharacterSelection:permsChecked", function(allowedRoles)
+    for _, dept in pairs(allowedRoles) do
+        SendNUIMessage({
+            type = "givePerms",
+            deptRole = dept
+        })
+    end
+end)
+
+-- Gets all the characters and displays them on the ui.
+RegisterNetEvent("ND:returnCharacters")
+AddEventHandler("ND:returnCharacters", function(characters)
+    SendNUIMessage({
+        type = "refresh"
+    })
+    for _, character in pairs(characters) do
+        SendNUIMessage({
+            type = "character",
+            id = character.id,
+            firstName = character.firstName,
+            lastName = character.lastName,
+            dateOfBirth = character.dob,
+            gender = character.gender,
+            twtName = character.twt,
+            department = character.job,
+            startingCash = character.cash,
+            startingBank = character.bank
+        })
+    end
+    SetDisplay(true, "ui", background)
+end)
+
+-- Selecting a player from the iu.
+RegisterNUICallback("setMainCharacter", function(data)
+    NDCore.functions:getCharacters(function(characters)
+        NDCore.selectedCharacter = characters[data.id]
+    end)
+    for _, spawn in pairs(config.spawns[NDCore.selectedCharacter.job]) do
+        SendNUIMessage({
+            type = "setSpawns",
+            x = spawn.x,
+            y = spawn.y,
+            z = spawn.z,
+            name = spawn.name
+        })
+    end
+    TriggerServerEvent("ND:setCharacterOnline", NDCore.selectedCharacter.id)
+end)
+
+-- Creating a character from the ui.
+RegisterNUICallback("newCharacter", function(data)
+    if tablelength(NDCore.characters) < NDCore.config.characterLimit then
+        TriggerServerEvent("ND_CharacterSelection:newCharacter", {
+            firstName = data.firstName,
+            lastName = data.lastName,
+            dob = data.dateOfBirth,
+            gender = data.gender,
+            twt = data.twtName,
+            job = data.department,
+            cash = data.startingCash,
+            bank = data.startingBank
+        })
+    end
+end)
+
+-- editing a character from the ui.
+RegisterNUICallback("editCharacter", function(data)
+    TriggerServerEvent("ND_CharacterSelection:editCharacter", {
+        id = data.id,
+        firstName = data.firstName,
+        lastName = data.lastName,
+        dob = data.dateOfBirth,
+        gender = data.gender,
+        twt = data.twtName,
+        job = data.department
+    })
+end)
+
+-- deleting a character from the ui.
+RegisterNUICallback("delCharacter", function(data)
+    TriggerServerEvent("ND:deleteCharacter", data.character)
+end)
+
+-- Quit button from ui.
+RegisterNUICallback("exitGame", function()
+    TriggerServerEvent("ND:exitGame")
+end)
+
+-- Teleporting using ui.
+RegisterNUICallback("tpToLocation", function(data)
+    local ped = PlayerPedId()
+    FreezeEntityPosition(ped, false)
+    SetEntityCoords(ped, tonumber(data.x), tonumber(data.y), tonumber(data.z), false, false, false, false)
+    FreezeEntityPosition(ped, true)
+    SwitchInPlayer(ped)
+    Citizen.Wait(500)
+    SetDisplay(false, "ui")
+    Citizen.Wait(500)
+    FreezeEntityPosition(ped, false)
+    SetEntityVisible(ped, true, 0)
+end)
+
+-- Choosing the do not tp button.
+RegisterNUICallback("tpDoNot", function()
+    local ped = PlayerPedId()
+    SwitchInPlayer(ped)
+    Citizen.Wait(500)
+    SetDisplay(false, "ui")
+    Citizen.Wait(500)
+    SetEntityVisible(ped, true, 0)
+    FreezeEntityPosition(ped, false)
+end)
+
+-- Change character command
+RegisterCommand(config.changeCharacterCommand, function()
+    SwitchOutPlayer(PlayerPedId(), 0, 1)
+    Citizen.Wait(2000)
+    FreezeEntityPosition(ped, true)
+    SetEntityVisible(ped, false, 0)
+	SetDisplay(true, "ui")
+end, false)
+
+-- chat suggestions
+TriggerEvent("chat:addSuggestion", "/" .. config.changeCharacterCommand, "Switch your framework character.")

ND_CharacterSelection/source/server.lua

@@ -0,0 +1,67 @@
+-- For support join my discord: https://discord.gg/Z9Mxu72zZ6
+
+NDCore = exports["ND_Core"]:GetCoreObject()
+
+function validateDepartment(player, department)
+    local departmentExists = config.departments[department]
+    if departmentExists then
+        local discordUserId = string.gsub(NDCore.functions:GetPlayerIdentifierFromType("discord", player), "discord:", "")
+        local roles = NDCore.functions:getUserDiscordInfo(discordUserId).roles
+
+        -- validate that the player actually has the role that they selected on the client.
+        for _, roleId in pairs(departmentExists) do
+            if roles[roleId] or roleId == 0 or roleId == "0" then
+                return true
+            end
+        end
+    end
+    return false
+end
+
+-- Creating a new character.
+RegisterNetEvent("ND_CharacterSelection:newCharacter")
+AddEventHandler("ND_CharacterSelection:newCharacter", function(newCharacter)
+    local player = source
+
+    -- validate that the person has permission to use the department.
+    local departmentCheck = validateDepartment(player, newCharacter.job)
+    if not departmentCheck then return end
+
+    -- Create the character if the player has permission to the department.
+    NDCore.functions:createCharacter(player, newCharacter.firstName, newCharacter.lastName, newCharacter.dob, newCharacter.gender, newCharacter.twt, newCharacter.job, newCharacter.cash, newCharacter.bank)
+end)
+
+-- Update the character info when edited.
+RegisterNetEvent("ND_CharacterSelection:editCharacter")
+AddEventHandler("ND_CharacterSelection:editCharacter", function(newCharacter)
+    local player = source
+
+    -- validate that the person has permission to use the department.
+    local departmentCheck = validateDepartment(player, newCharacter.job)
+    if not departmentCheck then return end
+    
+    -- Updating the character information in the database.
+    NDCore.functions:updateCharacterData(newCharacter.id, newCharacter.firstName, newCharacter.lastName, newCharacter.dob, newCharacter.gender, newCharacter.twt, newCharacter.job)
+
+    -- Updating characters on the client.
+    TriggerClientEvent("ND:returnCharacters", player, NDCore.functions:getPlayerCharacters(player))
+end)
+
+RegisterNetEvent("ND_CharacterSelection:checkPerms")
+AddEventHandler("ND_CharacterSelection:checkPerms", function()
+    local player = source
+    local discordUserId = string.gsub(NDCore.functions:GetPlayerIdentifierFromType("discord", player), "discord:", "")
+    local allowedRoles = {}
+    local roles = NDCore.functions:getUserDiscordInfo(discordUserId).roles
+
+    -- Check if the players discord roles will grant them permission to the department.
+    for dept, roleTable in pairs(config.departments) do
+        for _, roleId in pairs(roleTable) do
+            if roles[roleId] or roleId == 0 or roleId == "0" then
+                table.insert(allowedRoles, dept)
+            end
+        end
+    end
+
+    TriggerClientEvent("ND_CharacterSelection:permsChecked", player, allowedRoles)
+end)

ND_CharacterSelection/source/ui/index.html

@@ -0,0 +1,172 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <link rel="stylesheet" href="style.css">
+        <script src="https://use.fontawesome.com/releases/v5.15.4/js/all.js" data-auto-a11y="true"></script>
+        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
+        <script src="script.js" type="text/javascript"></script>
+    </head>
+    <body>
+        <!--Main page design-->
+        <section id="overlay">
+            <div id="logoContainer">
+                <img src="https://i.imgur.com/02A5Cgl.png" id="logo">
+            </div>
+
+            <h1 id="serverName"></h1>
+            <p id="aop" class="mainPage" style="margin-bottom: -1vh;"></p>
+            <p class="mainPage">Select or create a character:</p>
+
+            <button class="homeScreenButton" id="newCharacterButton"><a class="fas fa-plus-circle" style="color:white;"></a> Create New Character <a id="playerAmount"></a></button>
+            <br>
+            <button class="homeScreenButton" id="quitGameButton"><a class="fas fa-sign-out-alt" style="color:white;"></a> Quit Game</button>
+            
+            <div id="charactersSection">
+                <!--Characters will be added here-->
+            </div>
+        </section>
+
+        <!--Create character menu design-->
+        <form id="characterCreator" class="characterMenu">
+            <p id="characterCreatorTopText"><a class="fas fa-user-edit" style="color:white;"></a> Character Creation</p>
+            <hr id="characterCreatorTopTextLine">
+            <div id="characterInfoContainer">
+                <div id="characterInfoContainerLeft">
+                    <!--First name-->
+                    <label class="firstRowText" for="firstname">First Name</label>
+                    <br>
+                    <input id="firstName" class="firstRowInput" type="text" placeholder="First Name" name="firstname" required>
+
+                    <br>
+
+                    <!--Dob-->
+                    <label class="secondRowText" for="dob">Date of Birth</label>
+                    <br>
+                    <input id="dateOfBirth" class="secondRowInput" type="date" name="dob" required>
+
+                    <br>
+
+                    <!--Twotter name-->
+                    <label class="thirdRowText" for="twotter">Twotter Name</label>
+                    <br>
+                    <input id="twtName" class="thirdRowInput" type="text" placeholder="Twotter Name" name="twotter" required>
+                </div>
+                <div id="characterInfoContainerRight">
+                    <!--Last name-->
+                    <label class="firstRowText" for="lastname">Last Name</label>
+                    <br>
+                    <input id="lastName" style="width: 93%;" class="firstRowInput" type="text" placeholder="Last Name" name="lastname" required>
+
+                    <br>
+
+                    <!--gender-->
+                    <label class="secondRowText" for="gender">Gender</label>
+                    <br>
+                    <select id="gender" class="secondRowInput" name="gender" required>
+                        <option class="secondRowInput">Male</option>
+                        <option class="secondRowInput">Female</option>
+                    </select>
+
+                    <br>
+
+                    <!--Department-->
+                    <label class="thirdRowText" for="department">Department</label>
+                    <br>
+                    <select id="department" class="thirdRowInput departments" name="department" required></select>
+                </div>
+            </div>
+            <hr id="characterCreatorTopTextLine">
+            <button id="submitCharacterCreation" class="characterSubmitButton" type="submit" form="characterCreator"><a class="fas fa-plus-circle" style="color:white;"></a> Create Character</button>
+            <button id="cancelCharacterCreation" class="characterResetButton" type="reset"><a class="fas fa-times-circle" style="color:white;"></a> Cancel</button>
+        </form>
+
+        <!--Edit character menu design-->
+        <form id="characterEditor" class="characterMenu">
+            <p id="characterCreatorTopText"><a class="fas fa-user-edit" style="color:white;"></a> Character Editor</p>
+            <hr id="characterCreatorTopTextLine">
+            <div id="characterInfoContainer">
+                <div id="characterInfoContainerLeft">
+                    <!--First name-->
+                    <label class="firstRowText" for="firstname">First Name</label>
+                    <br>
+                    <input id="newFirstName" class="firstRowInput" type="text" placeholder="First Name" name="firstname" required>
+
+                    <br>
+
+                    <!--Dob-->
+                    <label class="secondRowText" for="dob">Date of Birth</label>
+                    <br>
+                    <input id="newDateOfBirth" class="secondRowInput" type="date" name="dob" required>
+
+                    <br>
+
+                    <!--Twotter name-->
+                    <label class="thirdRowText" for="twotter">Twotter Name</label>
+                    <br>
+                    <input id="newTwtName" class="thirdRowInput" type="text" placeholder="Twotter Name" name="twotter" required>
+                </div>
+                <div id="characterInfoContainerRight">
+                    <!--Last name-->
+                    <label class="firstRowText" for="lastname">Last Name</label>
+                    <br>
+                    <input id="newLastName" style="width: 93%;" class="firstRowInput" type="text" placeholder="Last Name" name="lastname" required>
+                    
+                    <br>
+
+                    <!--gender-->
+                    <label class="secondRowText" for="gender">Gender</label>
+                    <br>
+                    <select id="newGender" class="secondRowInput" name="gender" required>
+                        <option class="secondRowInput">Male</option>
+                        <option class="secondRowInput">Female</option>
+                    </select>
+
+                    <br>
+                    
+                    <!--Department-->
+                    <label class="thirdRowText" for="department">Department</label>
+                    <br>
+                    <select id="newDepartment" class="thirdRowInput departments" name="department" required></select>
+                </div>
+            </div>
+            <hr id="characterCreatorTopTextLine">
+            <button id="submitCharacterEditing" class="characterSubmitButton" type="submit" form="characterEditor"><a class="fas fa-plus-circle" style="color:white;"></a> Save Changes</button>
+            <button id="cancelCharacterEditing" class="characterResetButton" type="reset"><a class="fas fa-times-circle" style="color:white;"></a> Cancel</button>
+        </form>
+
+        <!--Character Spawn options-->
+        <section id="spawnLocation" class="spawnMenu">
+            <p id="characterCreatorTopText"><a class="fas fa-map-marker-alt" style="color:white;"></a> Spawn Location</p>
+            <hr id="characterCreatorTopTextLine">
+            <div id="spawnMenuContainer">
+                <!--Spawn locations will be added here-->
+            </div>
+            <hr id="characterCreatorTopTextLine" style="margin-top: 3vh;">
+            <button id="tpDoNot" class="characterSubmitButton" style="margin-left: 26vw; margin-bottom: 2vh;"><a class="fas fa-compass" style="color:white;"></a> Do not teleport</button>
+            <button id="tpCancel" class="characterResetButton"><a class="fas fa-times-circle" style="color:white;"></a> Cancel</button>
+        </section>
+
+        <!--Confirm exit game menu design-->
+        <section id="exitGameMenu" class="confirmationScreen">
+            <p id="characterCreatorTopText">Are you sure you'd like to quit the game?</p>
+            <hr id="characterCreatorTopTextLine">
+            <button id="exitGameConfirm" class="confirmationScreenConfirm"><a class="fas fa-check-circle" style="color:white;"></a> Confirm</button>
+            <button id="exitGameCancel" class="confirmationScreenCancel"><a class="fas fa-times-circle" style="color:white;"></a> Cancel</button>
+        </section>
+
+        <!--Confirm delete character button-->
+        <section id="deleteCharacterMenu" class="confirmationScreen">
+            <p id="characterCreatorTopText">Are you sure you'd like to delete this character?</p>
+            <hr id="characterCreatorTopTextLine">
+            <button id="deleteCharacterConfirm" class="confirmationScreenConfirm"><a class="fas fa-check-circle" style="color:white;"></a> Confirm</button>
+            <button id="deleteCharacterCancel" class="confirmationScreenCancel"><a class="fas fa-times-circle" style="color:white;"></a> Cancel</button>
+        </section>
+
+        <!--Money hud-->
+        <div id="money">
+            <p id="cash" class="text"></p>
+            <p id="bank" class="text"></p>
+        </div>
+    </body>
+</html>

ND_CharacterSelection/source/ui/script.js

@@ -0,0 +1,267 @@
+$(function() {
+    let displayOn = true
+
+    // Hide/show ui function
+    function display(bool) {
+        if (bool) {
+            displayOn = true;
+            $("body").show();
+            Money(false)
+        } else {
+            displayOn = false;
+            $("body").hide();
+        }
+    }
+    function characterCreatorMenu(bool) {
+        if (bool) {
+            $("#characterCreator").fadeIn("slow");
+            $("#characterEditor, #exitGameMenu, #deleteCharacterMenu, #spawnLocation").hide();
+            return;
+        }
+        $("#characterCreator").fadeOut("slow");
+    }
+    function characterEditorMenu(bool) {
+        if (bool) {
+            $("#characterEditor").fadeIn("slow");
+            $("#characterCreator, #exitGameMenu, #deleteCharacterMenu, #spawnLocation").hide();
+            return;
+        }
+        $("#characterEditor").fadeOut("slow");
+    }
+    function exitGameMenu(bool) {
+        if (bool) {
+            $("#exitGameMenu").fadeIn("slow");
+            $("#characterCreator, #characterEditor, #deleteCharacterMenu, #spawnLocation").hide();
+            return;
+        }
+        $("#exitGameMenu").fadeOut("slow");
+    }
+    function confirmDeleteMenu(bool) {
+        if (bool) {
+            $("#deleteCharacterMenu").fadeIn("slow");
+            $("#characterCreator, #characterEditor, #exitGameMenu, #spawnLocation").hide();
+            return;
+        }
+        $("#deleteCharacterMenu").fadeOut("slow");
+    }
+    function spawnMenu(bool) {
+        if (bool) {
+            $("#spawnLocation").fadeIn("slow");
+            $("#characterCreator, #characterEditor, #exitGameMenu, #deleteCharacterMenu").hide();
+            return;
+        }
+        $("#spawnLocation").fadeOut("slow");
+    }
+    function Money(bool) {
+        if (bool) {
+            $("#money").show();
+            $("body").css("background-image", "none");
+            $("body").show();
+            if (displayOn === false) {
+                $("#overlay").hide();
+            }
+        } else {
+            $("#money").hide();
+            $("#overlay").show();
+        }
+    }
+    display(false);
+    characterCreatorMenu(false);
+    characterEditorMenu(false);
+    exitGameMenu(false);
+    confirmDeleteMenu(false);
+    spawnMenu(false);
+    Money(false);
+
+    window.addEventListener('message', function(event) {
+        const item = event.data;
+        if (item.type === "ui") {
+            if (item.status) {
+                $('#serverName').text(item.serverName);
+                $("body").css("background-image", "url(" + item.background + ")");
+                display(true);
+            } else {
+                display(false);
+            }
+        }
+        
+        $('#playerAmount').text(item.characterAmount);
+
+        if (item.type === "character") {
+            characterCreatorMenu(false);
+            createCharacter(item.firstName, item.lastName, item.dateOfBirth, item.gender, item.twtName, item.department, item.startingCash, item.startingBank, item.id);
+        }
+
+        if (item.type === "setSpawns") {
+            $("#spawnMenuContainer").empty();
+            setTimeout(function(){
+                $("#spawnMenuContainer").append(`<button class="spawnButtons" data-x="${item.x}" data-y="${item.y}" data-z="${item.z}">${item.name}</button>`);
+                $(".spawnButtons").click(function() {
+                    $.post(`https://${GetParentResourceName()}/tpToLocation`, JSON.stringify({
+                        x: $(this).data("x"),
+                        y: $(this).data("y"),
+                        z: $(this).data("z")
+                    }));
+                    spawnMenu(false);
+                    setTimeout(function(){
+                        $("#spawnMenuContainer").empty();
+                    }, 550);
+                    return;
+                });
+            }, 10);
+        }
+
+        if (item.type === "givePerms") {
+            $('.departments').append($('<option>', {
+                text: item.deptRole
+            }));
+        }
+
+        if (item.type === "aop") {
+            $("#aop").text(item.aop);
+        }
+
+        if (item.type === "Money") {
+            Money(true)
+            $("#cash").text(item.cash);
+            $("#bank").text(item.bank);
+        }
+
+        if (item.type === "onStart" && item.enableMoneySystem) {
+            $("#characterInfoContainerLeft").append('<label class="fourthRowText" for="startingcash">Cash</label><br><input id="startingCash" class="fourthRowInput" type="number" pattern="[0-9]+" placeholder="$2500" name="startingcash" required>');
+            $("#characterInfoContainerRight").append('<label class="fourthRowText" for="startingbank">Bank</label><br><input id="startingBank" class="fourthRowInput" type="number" pattern="[0-9]+" placeholder="$8000" name="startingbank" style="width: 93%;" required>');
+            $("#startingBank").attr({
+                "max": item.maxStartingBank,
+            });
+            $("#startingCash").attr({
+                "max": item.maxStartingCash,
+            });
+        }
+
+        if (item.type === "refresh") {
+            $("#charactersSection").empty();
+        }
+    })
+
+    function createCharacter(firstName, lastName, dateOfBirth, gender, twtName, department, startingCash, startingBank, id) {
+        $("#charactersSection").append(`<button id="characterButton${id}" class="createdButton">${firstName} ${lastName} (${department})</button><button id="characterButtonEdit${id}" class="createdButtonEdit"><a class="fas fa-edit"></a> Edit</button><button id="characterButtonDelete${id}" class="createdButtonDelete"><a class="fas fa-trash-alt"></a> Delete</button>`);
+        $(`#characterButton${id}`).click(function() {
+            spawnMenu(true)
+            $.post(`https://${GetParentResourceName()}/setMainCharacter`, JSON.stringify({
+                id: id
+            }));
+            return;
+        });
+        $(`#characterButtonEdit${id}`).click(function() {
+            characterEditorMenu(true)
+            $("#newFirstName").val(firstName);
+            $("#newLastName").val(lastName);
+            $("#newDateOfBirth").val(dateOfBirth);
+            $("#newGender").val(gender);
+            $("#newTwtName").val(twtName);
+            $("#newDepartment").val(department);
+            characterEdited = id
+            return;
+        });
+        $(`#characterButtonDelete${id}`).click(function() {
+            confirmDeleteMenu(true)
+            characterDeleting = id
+            return;
+        });
+    }
+
+    $("#characterCreator").submit(function() {
+        $.post(`https://${GetParentResourceName()}/newCharacter`, JSON.stringify({
+            firstName: $("#firstName").val(),
+            lastName: $("#lastName").val(),
+            dateOfBirth: $("#dateOfBirth").val(),
+            gender: $("#gender").val(),
+            twtName: $("#twtName").val(),
+            department: $("#department").val(),
+            startingCash: $("#startingCash").val(),
+            startingBank: $("#startingBank").val()
+        }));
+        characterCreatorMenu(false)
+        $("#firstName, #lastName, #dateOfBirth, #twtName, #startingCash, #startingBank").val("")
+        return false;
+    });
+
+    $("#characterEditor").submit(function() {
+        characterEditorMenu(false)
+        $.post(`https://${GetParentResourceName()}/editCharacter`, JSON.stringify({
+            firstName: $("#newFirstName").val(),
+            lastName: $("#newLastName").val(),
+            dateOfBirth: $("#newDateOfBirth").val(),
+            gender: $("#newGender").val(),
+            twtName: $("#newTwtName").val(),
+            department: $("#newDepartment").val(),
+            id: characterEdited
+        }));
+        $("#characterButton" + characterEdited).text($("#newFirstName").val() + " " + $("#newLastName").val() + " (" + $("#newDepartment").val() + ")");
+        return false;
+    });
+
+    $("#deleteCharacterConfirm").click(function() {
+        confirmDeleteMenu(false)
+        $("#characterButton" + characterDeleting).fadeOut("slow",function(){
+            $("#characterButton" + characterDeleting).remove();
+        })
+        $("#characterButtonEdit" + characterDeleting).fadeOut("slow",function(){
+            $("#characterButtonEdit" + characterDeleting).remove();
+        })
+        $("#characterButtonDelete" + characterDeleting).fadeOut("slow",function(){
+            $("#characterButtonDelete" + characterDeleting).remove();
+        })
+        $.post(`https://${GetParentResourceName()}/delCharacter`, JSON.stringify({
+            character: characterDeleting
+        }));
+        return;
+    });
+
+    $("#newCharacterButton").click(function() {
+        characterCreatorMenu(true)
+        return;
+    });
+
+    $("#deleteCharacterCancel").click(function() {
+        confirmDeleteMenu(false)
+        return;
+    });
+    $("#cancelCharacterCreation").click(function() {
+        characterCreatorMenu(false)
+        return;
+    });
+    $("#cancelCharacterEditing").click(function() {
+        characterEditorMenu(false)
+        return;
+    });
+
+    $("#tpCancel").click(function() {
+        spawnMenu(false)
+        setTimeout(function(){
+            $("#spawnMenuContainer").empty();
+        }, 550);
+        return;
+    });
+    $("#tpDoNot").click(function() {
+        $.post(`https://${GetParentResourceName()}/tpDoNot`);
+        spawnMenu(false)
+        setTimeout(function(){
+            $("#spawnMenuContainer").empty();
+        }, 550);
+        return;
+    });
+
+    $("#quitGameButton").click(function() {
+        exitGameMenu(true)
+        return;
+    });
+    $("#exitGameCancel").click(function() {
+        exitGameMenu(false)
+        return;
+    });
+    $("#exitGameConfirm").click(function() {
+        $.post(`https://${GetParentResourceName()}/exitGame`);
+        return;
+    });
+});

ND_CharacterSelection/source/ui/style.css

@@ -0,0 +1,287 @@
+body {
+    background-size: 105%;
+    background-repeat: no-repeat;
+    background-attachment: fixed;
+    background-position: center;
+}
+
+/* Main page */
+#overlay {
+    top: 0px;
+    left: 0px;
+    height: 100vh;
+    width: 30vw;
+    background-color: rgba(2, 2, 2, 0.911);
+    position: fixed;
+}
+
+#charactersSection {
+    height: 50%;
+    margin: none;
+    padding: none;
+    width: 83%;
+    overflow-y: scroll;
+}
+
+::-webkit-scrollbar {
+    width: 10px;
+}
+::-webkit-scrollbar-track {
+    background: rgba(2, 2, 2, 0);
+}
+::-webkit-scrollbar-thumb {
+    background: rgba(99, 99, 99, 0.575);
+    border-radius: 10px;
+}
+::-webkit-scrollbar-thumb:hover {
+    background: rgb(128, 128, 128);
+    border-radius: 10px;
+}
+
+#logoContainer {
+    margin-top: 3vh;
+    margin-left: 10vw;
+}
+#logo {
+    height: 10vw;
+    width: 10vw;
+}
+
+#serverName {
+    color: white;
+    font-size: 130%;
+    font-family: Verdana, Geneva, Tahoma, sans-serif;
+    text-align: center;
+    font-weight: bolder;
+}
+
+.mainPage {
+    color: white;
+    font-size: 95%;
+    font-family: Verdana, Geneva, Tahoma, sans-serif;
+    text-align: center;
+    font-weight: lighter;
+}
+
+.homeScreenButton, .createdButton, .createdButtonEdit, .createdButtonDelete {
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+    font-weight: bold;
+    text-align: center;
+    border: none;
+    color: white;
+}
+
+#newCharacterButton {
+    margin-left: 9vw;
+    margin-bottom: 0.8vh;
+    height: 4.5vh;
+    width: 12vw;
+    background: rgb(95,141,254);
+    background-image: linear-gradient(90deg, rgba(95,141,254,1) 0%, rgba(142,104,219,1) 100%);
+    border-radius: 5vw;
+    transition: 0.3s;
+}
+
+#quitGameButton {
+    margin-left: 10vw;
+    margin-bottom: 5vh;
+    height: 4.5vh;
+    width: 10vw;
+    background: rgb(255,110,100);
+    background: linear-gradient(90deg, rgb(255, 100, 208) 0%, rgb(255, 60, 109) 100%);
+    border-radius: 5vw;
+    transition: 0.3s;
+}
+
+.createdButton {
+    display: inline-block;
+    margin-bottom: 1vh;
+    margin-left: 5.5vw;
+    height: 3vh;
+    width: 10vw;
+    background-color: rgb(17, 113, 238);
+    border: none;
+    border-radius: 0.5vh;
+    transition: 0.3s;
+    white-space: nowrap;
+    text-transform: capitalize;
+}
+
+.createdButtonEdit {
+    margin-left: 0.2vw;
+    height: 3vh;
+    width: 4vw;
+    background-color: rgb(128, 128, 128);
+    border: none;
+    border-radius: 0.5vh;
+    transition: 0.3s;
+}
+
+.createdButtonDelete {
+    margin-left: 0.2vw;
+    height: 3vh;
+    width: 4vw;
+    background-color: rgb(236, 19, 19);
+    border: none;
+    border-radius: 0.5vh;
+    transition: 0.3s;
+}
+
+/* Button transitions */
+#newCharacterButton:hover, #quitGameButton:hover, .characterSubmitButton:hover, .characterResetButton:hover, .confirmationScreenConfirm:hover, .confirmationScreenCancel:hover, .createdButton:hover, .createdButtonEdit:hover, .createdButtonDelete:hover, .spawnButtons:hover {
+    transition: 0.3s;
+    opacity: 0.7;
+}
+#newCharacterButton:active, #quitGameButton:active, .characterSubmitButton:active, .characterResetButton:active, .confirmationScreenConfirm:active, .confirmationScreenCancel:active, .createdButton:active, .createdButtonEdit:active, .createdButtonDelete:active, .spawnButtons:active {
+    transition: none;
+    opacity: 1;
+}
+
+/* Character creator and Editor menu */
+.characterMenu {
+    height: 60%;
+    width: 50vw;
+    margin: auto 0 auto 40vw;
+    background-color: rgba(2, 2, 2, 0.911);
+    border-radius: 3vh;
+}
+
+#characterCreatorTopText {
+    padding-top: 2vh;
+    margin-left: 3vw;
+    color: white;
+    font-size: 120%;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+    font-weight: bold;
+}
+
+#characterCreatorTopTextLine {
+    background: rgb(255, 255, 255);
+    background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(255,255,255,1) 15%, rgba(255,255,255,1) 85%, rgba(0, 0, 0, 0.014) 100%);
+    height: 0.1vh;
+    width: 95%;
+    border: none;
+    border-radius: 2vh;
+}
+
+/* character info */
+#characterInfoContainer {
+    padding: 2vh 3vw;
+}
+#characterInfoContainerLeft {
+    width: 50%;
+    float: left;
+}
+#characterInfoContainerRight {
+    width: 50%;
+    display: inline-block;
+}
+
+.firstRowText, .secondRowText, .thirdRowText, .fourthRowText {
+    color: white;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+    font-weight: bold;
+}
+
+.firstRowInput, .secondRowInput, .thirdRowInput, .fourthRowInput {
+    background: white;
+    color: black;
+    border: none;
+    border-radius: 0.2vw;
+    height: 3vh;
+    width: 95%;
+    margin-top: 0.5vh;
+    margin-bottom: 2vh;
+    padding: 0 0 0 0.5vw;
+}
+
+.characterSubmitButton {
+    margin-top: 1vh;
+    margin-left: 33.7vw;
+    margin-bottom: 2vh;
+    width: 8vw;
+    background-color: rgb(17, 113, 238);
+}
+
+.characterResetButton {
+    width: 4vw;
+    background-color: rgb(231, 50, 50);
+}
+
+.characterSubmitButton, .characterResetButton, .confirmationScreenConfirm, .confirmationScreenCancel, .spawnButtons {
+    height: 4vh;
+    color: white;
+    font-weight: bold;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+    border: none;
+    border-radius: 1vh;
+    transition: 0.3s;
+}
+
+/* confirmation Screen */
+.confirmationScreen {
+    height: 25vh;
+    width: 30vw;
+    margin-top: 20vh;
+    margin-left: 45vw;
+    background-color: rgba(2, 2, 2, 0.911);
+    border-radius: 3vh;
+}
+
+.confirmationScreenConfirm {
+    margin-top: 5vh;
+    margin-left: 19%;
+    margin-right: 5%;
+    width: 8vw;
+    background-color: rgb(17, 113, 238);
+}
+
+.confirmationScreenCancel {
+    width: 8vw;
+    background-color: rgb(231, 50, 50);
+}
+
+.spawnMenu {
+    height: 39%;
+    width: 40vw;
+    margin: auto 0 auto 40vw;
+    background-color: rgba(2, 2, 2, 0.911);
+    border-radius: 3vh;
+}
+
+#spawnMenuContainer {
+    margin-top: 3vh;
+    margin-left: 5%;
+}
+
+.spawnButtons {
+    display: block;
+    margin-left: 0;
+    margin-bottom: 1vh;
+    text-align: center;
+    width: 95%;
+    height: 4vh;
+    background-color: rgb(17, 113, 238);
+}
+
+.text {
+    font-family: "Pricedown Bl", sans-serif;
+    position: absolute;
+    font-size: 1vw;
+    color: rgba(255, 255, 255, 0.925);
+    margin: auto;
+    text-align: center;
+    padding: 0.15% 1.1%;
+    background-color: rgba(0, 0, 0, 0.3);
+    border-radius: 10vw;
+}
+
+#cash {
+    top: 5.5vh;
+    right: 1.5vw;
+}
+
+#bank {
+    top: 9vh;
+    right: 1.5vw;
+}