Announcement

Collapse
No announcement yet.

Creating a GUI

Collapse
X
  • Filter
  • Time
  • Show
Clear All
new posts

  • Creating a GUI

    Good Evening,

    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.

    Click image for larger version  Name:	GUI.PNG Views:	1 Size:	83.6 KB ID:	4798
    Click image for larger version  Name:	GUI 1.png Views:	1 Size:	64.7 KB ID:	4799
    PHP Code:
    function onPlayerTouchsMe() {

            
    //The different pages and their HTMLs
        
    SUPPORTCENTRE_PAGES = {
            
    MAIN:       {value0
                        
    header:  "Support Centre",
                        
    text:   '<center><font size=4.5>Welcome to the Support Centre<br />' +
                                
    '<hr style="height: 1px; background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));">' +        
                                
    '<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>' +
                                
    '<input id="ticket_create" type="submit" class="button" style="left:40px;top:180px;width:170px;height:40px;background-color:lightgreen;" value="Create Ticket"></input>' +
                                
    '<input id="ticket_review" type="submit" class="button" style="left:250px;top:180px;width:170px;height:40px;" value="Review My Tickets"></input>'
                        
    },
            
    CREATE:     {value1
                        
    header"Create A Ticket",
                        
    text:  '<center><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></center>' +
                                
    '<select id="ticket_category" style="position:absolute;left:0px;top:105px;width:130px;height:40px;font-size:12px;">' +
                                
    '  <option selected>Category</option>' +
                                
    '  <option>Account Transfer</option>' +
                                
    '  <option>Purchase Problem</option>' +
                                
    '  <option>Weapon Problem</option>' +
                                
    '</select>' +          
                                
    '<input id="ticket_subject" type="text" style="position:absolute;left:155px;top:105px;width:300px;height:35px;font-size:12px;" value="Subject"></input>' +                          
                                
    '<input id="ticket_description" type="text" style="position:absolute;left:155px;top:150px;width:300px;height:35px;font-size:12px;" value="Description"></input>' +   
                                
    '<input id="ticket_submit" type="submit" class="button" style="left:40px;top:285px;width:170px;height:40px;background-color:lightgreen;" value="Submit Ticket"></input>' +
                                
    '<input id="ticket_cancel" type="submit" class="button" style="left:250px;top:285px;width:170px;height:40px;" value="Cancel"></input>'                            

                        
    },
            
    REVIEW:     {value2
                        
    header"Review A Ticket",
                        
    text'HTML Here'
                        
    },
            
    OPEN:       {value3
                        
    header"Open A Ticket",
                        
    text'HTML Here'
                        
    },
            
    ASSIGNED:   {value4
                        
    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({
            
    titleOBJ.header,
            
    width400,
            
    height300
        
    });

        
    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
    Last edited by Flameboy; 12-23-2018, 08:39 AM.

  • #2
    Looks good, maybe you can make a scripting guide for others to learn. Would be nice to have some way to be able to script live

    Comment


    • #3
      Wow awesome

      Comment

      Working...
      X