Creating a GUI


  • Corleone Staff Forum Admin

    Good Morning,

    I'm making an in game support centre and along the way I've created a nice and easy way to create GUI's. I'll probably be using this feature going forward as you set up the pages right at the beginning of the script and then the functions and it's complete.

    function onPlayerTouchsMe() {
    
            //The different pages and their HTMLs
        SUPPORTCENTRE_PAGES = {
            MAIN:       {value: 0,
                        header:  "Support Centre",
                        text:   '<font size="4.5">Welcome to the Support Centre<br></br>' +
                                '<hr></hr>' +        
                                '<font size="3">Please create a ticket if you are having problems purchasing items, receiving coins or appealing a jail. The tickets will be assigned to the support team and will aim to get back to you within 48 hours.</font>' +
                                '' +
                                ''
                        },
            CREATE:     {value: 1,
                        header: "Create A Ticket",
                        text:  '<font size="3">Use this page to submit a new ticket to the support staff. Please choose a category that your ticket fits best, fill the "subject" and the "description" fields.</font>' +
                                '' +
                                '  Category' +
                                '  Account Transfer' +
                                '  Purchase Problem' +
                                '  Weapon Problem' +
                                '' +          
                                '' +                          
                                '' +  
                                '' +
                                ''                            
    
                        },
            REVIEW:     {value: 2,
                        header: "Review A Ticket",
                        text: 'HTML Here'
                        },
            OPEN:       {value: 3,
                        header: "Open A Ticket",
                        text: 'HTML Here'
                        },
            ASSIGNED:   {value: 4,
                        header: "Assigned Tickets",
                        text: 'HTML Here'
                        },                
        };
    
    
            //Create the first GUI
        this.onLoadGUI(SUPPORTCENTRE_PAGES.MAIN);
    }
    
    function onLoadFunctions() {
        GUI.onclick("ticket_create", function(event) {
            this.onLoadGUI(SUPPORTCENTRE_PAGES.CREATE);
    
                //Function which are used within that page
            GUI.onclick("ticket_submit", function(event) {
    
                    //Haven't populated the category
                let ticket_submitted_category = GUI.get("ticket_category").value;
                if (ticket_submitted_category === "Category") return;
    
                    //Not enough information submitted for the subject
                let ticket_submitted_subject = GUI.get("ticket_subject").value;
                if (ticket_submitted_subject.length < 5) return;            
    
                    //Not enough information submitted in the description
                let ticket_submitted_description = GUI.get("ticket_description").value;
                if (ticket_submitted_description.length < 10) return;
    
                player.chat = "Submitting ticket:" + ticket_submitted_category + ", " + ticket_submitted_subject + "- " + ticket_submitted_description;
            });    
            GUI.onclick("ticket_cancel", function(event) {
                this.onLoadGUI(SUPPORTCENTRE_PAGES.MAIN);
            });    
        });
        GUI.onclick("ticket_review", function(event) {
            this.onLoadGUI(SUPPORTCENTRE_PAGES.REVIEW);
        });
    }
    
    function onLoadGUI(OBJ) {
        GUI_SupportCentre = GUI.showpopup({
            title: OBJ.header,
            width: 400,
            height: 300
        });
    
        GUI_SupportCentre.innerHTML = OBJ.text;
        this.onLoadFunctions();
    }
    

    As you can see, all you need to really edit is the HTML at the top and the functions below. Let me know your thoughts in the comments down below
    image_848.png
    image_849.png


  • Banned

    @flameboy

    Would be nice if you do a little code editing and make a report system out of this.


  • Corleone Staff

    Thats the point of it lol



  • Great job, looks amazing so far.


  • Banned

    @MJ

    I mean player reports such as reporting a player.


  • Forum Admin

    Yes player reports could be added where you type the player id and the complaint



  • @Stefan said in Creating a GUI:

    Yes player reports could be added where you type the player id and the complaint

    We can't see player IDs tho , only staff can



  • Arran's right though



  • @Stefan said in Creating a GUI:

    Yes player reports could be added where you type the player id and the complaint

    or just a report button on the profile :p... hehe, to avoid seeing ID

    max server request interval being 10 seconds or so, to not being able to permanently ping/ddos abuse

    excess or wrongful repeatedly reports being punishable


  • Corleone Staff Forum Admin

    Made a scrolling gui so you can scroll down - similar to the clan scores in game 🙂

    Client Script - you can also then tag in the 'A HREF' to link to other screens for example. Tag in the class 'scrollable' to any DIV and it should work

    function onPlayerTouchsMe() {
    
            //The different pages and their HTMLs
        GUI_PAGES = {
            MAIN:       {
                        header:  "Scroll Test",
                        text:   "< div id='ScrollTest' class='scrollable' style='position:absolute;left:0px;top:50px;bottom:10px;right:0px;'> <b>hi</b> <br></br> hi hi hi <br></br> hi hi hi <br></br> hi hi hi  <br></br> hi hi hi <br></br> hi hi hi <br></br> hi hi hi <br></br> hi hi hi <br></br> hi hi hi <br></br> hi hi hi <br></br> hi hi hi <br></br> hi hi hi <br></br> hi hi hi <br></br> hi hi hi <br></br> hi hi hi <br></br> hi hi hi <br></br> hi hi hi <br></br> hi hi <a href="test">hi</a> "
                        }
        };
    
        
            //Create the first GUI
        this.onLoadGUI(GUI_PAGES.MAIN);
    }
    
    function onLoadFunctions() {
        self = this;
    }
    
    function onLoadGUI(OBJ) {
        GUI_FORUM = GUI.showpopup({
            title: OBJ.header,
            width: 400,
            height: 300
        });
        
        GUI_FORUM.innerHTML = OBJ.text;
        this.onLoadFunctions();
    }
    
    


  • slick 👌


Log in to reply