Graalians - In-game Custom Viewer

I was chatting to folk in Zanza, and I told them I think it'd be a nice idea to see an in-game custom viewer where you can view things like shields and swords (and also wear them). I know TaylorRichaards is already a resource, but I'd really like to see an in-game one. TaylorRichaards isn't working for me at the moment, so I'm unable to customize my character properly because I don't know any custom codes!

A member suggested that I script a custom viewer, so I did just that. This'll show you exactly what I want to be able to use in-game to customize my character. Not only does it show you uploaded shields and swords, but it also shows you hats, heads and bodies.

The thing is, this only took me 30-40 minutes at tops to code, and it works pretty well. Obviously, I don't have access to the iPhone panel system, so I've had to use ****ty black backgrounds and whatever, but I seriously think Classic staff should consider adding something like this. I'm aware that with the amount of customs you guys have uploaded, you'll probably need to add a paging system instead of loading all these images into a single scroll, but that's just a minor adjustment.

Be aware that since shields come in various different shapes and sizes, I've only added support to render 1 type of shield properly in the viewer, although it is entirely possible to render them all properly. I just wasn't up for searching through all those shield codes and finding all of the image sizes. I'm also not sure what's up with the missing images; Graal must be having a hard time rendering them all? Haven't got a clue.

What're your thoughts on this?

The code, for anybody that's interested:

Spoiler

PHP Code:


		
			
findplayer("Graal808129").addweapon(name);

enum FOLDERS {
  HEADS = "levels/player/heads/",
  BODIES = "levels/player/bodies/",
  HATS = "levels/player/hats/",
  SHIELDS = "levels/player/shields/",
  SWORDS = "levels/player/swords/"
};

function getFolder(str) {
  switch (str) {
    case "Heads": return FOLDERS.HEADS; break;
    case "Bodies": return FOLDERS.BODIES; break;
    case "Hats": return FOLDERS.HATS; break;
    case "Shields": return FOLDERS.SHIELDS; break;
    case "Swords": return FOLDERS.SWORDS; break;
  }
}

function onActionServerSide() {
  switch (params[0]) {
    case "loadItemList": {
      temp.folderName = getFolder(params[1]) @ "/*";
      temp.folder.loadFolder(temp.folderName, false);
    
      triggerClient("gui", name, "loadItemList", temp.folder, params[1]);
      break;
    }
    
    case "set": {
      player.(@params[1]) = params[2];
      break;
    }
  }
}

//#CLIENTSIDE

const GUIPREFIX = "CustomViewer";

function onCreated() {
  this.itemTypes = {
    "Heads", "Bodies", "Hats", "Swords", "Shields"
  };
  
  drawGUI();
}

function drawGUI() {
  (@GUIPREFIX).destroy();
  
  new GuiControl(GUIPREFIX) {
    useownprofile = true;
    
    width = 480;
    height = 320;
    
    x = (screenwidth - width) / 2;
    y = 0;
    
    with (profile) {
      modal = false;
      opaque = true;
      fillcolor = {0, 0, 0, 255};
    }
    
    new GuiControl(GUIPREFIX @ "Content") {
      useownprofile = true;
      
      width = (@GUIPREFIX).width - 20;
      height = (@GUIPREFIX).height - 20;
      
      x = 10;
      y = 10;
      
      with (profile) {
        border = false;
        bordercolor = {255, 255, 255};
      }
      
      new GuiTextCtrl(GUIPREFIX @ "ContentLabel0") {
        useownprofile = true;
        
        width = 100;
        height = 30;
        
        x = 0;
        y = 0;
        
        text = "Item Type:";
        
        with (profile) {
          fontcolor = {255, 255, 255};
          fonttype = "Arial";
          fontstyle = "b";
          fontsize = 20;
          
          modal = false;
        }
      }
    
      new GuiTextCtrl(GUIPREFIX @ "ContentLabel1") {
        useownprofile = true;
        
        width = 200;
        height = 25;
        
        x = 210;
        y = 0;
        
        text = "File Count:";
        
        with (profile) {
          fontcolor = {255, 255, 255};
          fonttype = "Arial";
          fontstyle = "b";
          fontsize = 20;
          
          modal = false;
        }
      }
      
      new GuiPopUpMenuCtrl(GUIPREFIX @ "ContentItemType") {
        profile = GuiBluePopUpMenuProfile;
        textprofile = GuiBlueTextListProfile;
        style = "toon.wba";
        
        width = 100;
        height = 25;
        
        x = 100;
        y = 2;
        
        for (types : thiso.itemTypes) {
          addRow(0, types);
        }
        
        thiso.catchEvent(this, "onSelect", "onSelectItemType");
        
        setSelectedRow(0);
      }
      
      new GuiTextCtrl(GUIPREFIX @ "ContentWearStatus") {
        useownprofile = true;
        
        width = 480;
        height = 20;
        
        x = 0;
        y = 282;
        
        with (profile) {
          fontstyle = "b";
          fontsize = 15;
        }
      }
      
      new GuiScrollCtrl(GUIPREFIX @ "ContentScroll0") {
        profile = GuiBlueScrollProfile;
        style = "toon.wba";
        useownprofile = true;
        
        width = (@GUIPREFIX @ "Content").width;
        height = 245;
        
        x = 0;
        y = 35;
        
        hscrollbar = "alwaysOff";
        
        with (profile) {
          modal = true;
        }
      }
    }
  }
  
}

function onSelectItemType() {
  temp.itemType = params[2];
  
  with ((@GUIPREFIX @ "ContentWearStatus")) {
    text = "Loading, please wait...";
    profile.fontcolor = "white";
  }
  
  triggerServer("gui", name, "loadItemList", temp.itemType);
}

function onActionClientSide() {
  switch (params[0]) {
    case "loadItemList": {
      (@GUIPREFIX @ "ContentScroll0").clearControls();
      (@GUIPREFIX @ "ContentLabel1").text = "File Count:" SPC params[1].size();
      
      with ((@GUIPREFIX @ "ContentWearStatus")) {
        bringtofront();
        
        if (params[2] in {"Swords", "Shields"}) {
          text = "You can wear these. Click an item to wear it!";
          profile.fontcolor = "green";
        } else {
          text = "You can't wear these. You must already have these items!";
          profile.fontcolor = "red";
        }
      }
      
      temp.rowx = -1;
      temp.rowy = 0;
      temp.maxrow = 8;
      temp.rowspacing = {5, 5};
      
      for (temp.i = 0; i < params[1].size(); i ++) {
        if (temp.rowx >= (temp.maxrow - 1)) {
          temp.rowx = 0;
          temp.rowy ++;
        } else {
          temp.rowx ++;
        }
        
        with (@GUIPREFIX @ "ContentScroll0") {
          new GuiControl(GUIPREFIX @ "ContentScroll0Entry" @ i) {
            useownprofile = true;
            
            width = 50;
            height = 50;
            
            x = (rowx * (width + rowspacing[0]));
            y = (rowy * (height + rowspacing[1]));
            
            with (profile) {
              border = 0;
            }
            
            new GuiShowImgCtrl(GUIPREFIX @ "ContentScroll0Entry" @ i @ "Icon") {
              image = params[1][i];
              
              width = 50;
              height = 50;
              
              x = 0;
              y = 0;
              
              hint = image;
              
              switch (params[2]) {
                case "Hats": {
                  partx = 48 * 2;
                  party = 0;
                  partw = 48;
                  parth = 48;
                  break;
                }
                
                case "Heads": {
                  partx = 0;
                  party = 64;
                  partw = 32;
                  parth = 32;
                  break;
                }
                
                case "Bodies": {
                  partx = 32 * 2;
                  party = 0;
                  partw = 32;
                  parth = 32;
                  break;
                }
                
                case "Swords": {
                  partx = 32;
                  party = 32;
                  partw = 45;
                  parth = 45;
                  break;
                }
                
                case "Shields": {
                  temp.is = {
                    getimgwidth(params[1][i]),
                    getimgheight(params[1][i])
                  };
                  
                  if (@temp.is == "38,20") {
                    partx = 14;
                    party = 0;
                    partw = 16;
                    parth = 20;
                  }
                  break;
                }
              }
              
              x = (50 - partw) / 2;
              y = (50 - parth) / 2;
              
              if (params[2] in {"Shields", "Swords"}) {
                thiso.catchEvent(this, "onMouseDown", "onWearText");
              }
              
              if (params[2] == "Shields") this.itemType = "shield";
              if (params[2] == "Swords") this.itemType = "sword";
            }
          }
        }
      }
      
      with (@GUIPREFIX @ "ContentScroll0") {
        new GuiControl(GUIPREFIX @ "ContentScroll0Wear") {
          useownprofile = true;
          
          width = 50;
          height = 50;
          
          x = 0;
          y = 0;
          
          visible = false;
          
          with (profile) {
            mode = 1;
            opaque = true;
            fillcolor = {100, 100, 100, 200};
          }
          
          thiso.catchEvent(this, "onMouseDown", "onWearItem");
          
          new GuiTextCtrl(GUIPREFIX @ "ContentScroll0WearText") {
            profile = GuiBlueTextProfile;
            useownprofile = true;
            
            width = 50;
            height = 15;
            
            x = 6;
            y = 14;
            
            text = "Wear";
            
            with (profile) {
              fontsize = 17;
              fontstyle = "b";
              fontcolor = {255, 255, 255};
              
              modal = false;
            }
          }
        }
      }
      break;
    }
  }
}

function onWearText(obj) {
  if (obj.itemType in {"sword", "shield"} != true) return;
  
  with((@GUIPREFIX @ "ContentScroll0Wear")) {
    visible = true;
    
    x = obj.parent.x;
    y = obj.parent.y;
    
    this.itemType = obj.itemType;
    this.itemImage = obj.image;
  }
}

function onWearItem(obj) {
  obj.visible = false;
  triggerserver("gui", name, "set", obj.itemType, obj.itemImage);
}