UE4Explorer.html

<title>UE4 SwissKnife</title>
<style>
    #demo,#demo2 {
        float: left;
        padding: 10px;
    }  
body {
  font-family: Helvetica Neue, Arial, sans-serif;
    font-size:12px;
  color: #444;
}

table {
        font-size:12px;
  border: 2px solid #42b983;
  border-radius: 3px;
  background-color: #fff;
}

th {
  background-color: #42b983;
  color: rgba(255,255,255,0.66);
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

td {
}

th, td {
  padding: 4px 8px;
}

th.active {
  color: #fff;
}

th.active .arrow {
  opacity: 1;
}

.arrow {
  display: inline-block;
  vertical-align: middle;
  width: 0;
  height: 0;
  margin-left: 5px;
  opacity: 0.66;
}

.arrow.asc {
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 4px solid #fff;
}

.arrow.dsc {
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid #fff;
}
    .tr-even {
        
    }
    .tr-odd {
    background-color: #f7f7f7;
    }
    
    
#context-menu {
  display: none;
  position: absolute;
}
#context-menu ul{
  list-style: none;
    
  top: 0;
  left: 0;
  margin: 0;
  padding: 0;
  display: none;
  list-style: none;
  position: absolute;
  z-index: 2147483647;
  background-color: white;
  border: 1px solid #ebebeb;
  border-bottom-width: 0px;
  list-style: none;
}

#context-menu ul.active {
  display: block;
}

.context-menu-icon {
  top: 1px;
  position: relative;
  margin-right: 10px;
}

.context-menu-item {
  display: flex;
  cursor: pointer;
  padding: 8px 15px;
  align-items: center;
  border-bottom: 1px solid #ebebeb;
}

.context-menu-item:hover {
  background-color: #ebebeb;
}
    
    #editor { 
        float:left;
        width: 680px;
        height: 320px;
    }
    .clearfix {
  overflow: auto;
}
</style>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<div>
<div id="editor" >    WSLog(string.format('%X good',GetEngine()))</div>
<textarea style="float:left; margin-left: 10px;" id="log_area" name="log_area"
          rows="21" cols="100" disabled>Log..&#13;&#10;</textarea>
<div style="clear: both;"></div>
<br>
<br>
<button onclick="SendScript()">Send</button>
<span class="state">Hello Script Component!</span>
<br><br>
    </div>
<!-- component template -->
<script type="text/x-template" id="grid-template">
  <table :key="componentKey" >
    <thead>
      <tr>
        <th v-for="key in columns"
          @click="sortBy(key)"
          :class="{ active: sortKey == key }">
          {{ key | capitalize }}
          <span class="arrow" :class="sortOrders[key] > 0 ? 'asc' : 'dsc'">
          </span>
        </th>
      </tr>
    </thead>
    <tbody>
      <tr @contextmenu.prevent="showContextMenu($event,entry)" v-for="(entry,index) in filteredHeroes" :class="index%2?'tr-even':'tr-odd'" @dblclick="greet(entry)">
      
        <td v-for="key in columns">
        {{translate(entry,key)}}
        <div v-if="entry.edit ==true && key == 'val'">
      <input ref="uip" v-on:keyup.enter="$event.target.blur()" @blur="handleBlur(entry,$event)" :value="entry.val" />
    </div>
        </td>
      </tr>
    </tbody>
  </table>
</script>
<!-- demo root element -->
<div id="demo">

  <form id="search">
    Search <input name="query" v-model="searchQuery"> | <input type="checkbox" id="nestCb"><label for="nestCb">Nested List</label>
  </form>
  <demo-grid
    :heroes="sortGridData"
    :columns="gridColumns"
    :filter-key="searchQuery">
  </demo-grid>
</div>

<div id="demo2">
  <form id="search">
    Search <input name="query" v-model="searchQuery">
  </form>
      
    <div><input id="ptr"/ :value="hex(goPtr)"> <button onclick="DoX()">Scan Object</button> | <input type="checkbox" id="refreshCb" @click="cbRefresh($event)"/> <label for="refreshCb">Auto Refresh every </label><input id="refreshMs" value="1000"/>ms. | <input type="checkbox" id="refreshTimerCb"/> <label for="refreshTimerCb">Keep refresh prop for </label><input id="refreshKeepMs" value="5000"/>ms.<br>
        <template v-for="(bc,i) in bcList">
            <template v-if="i+1< bcList.length">
            <span @dblclick="bcGetInfo(bc)">{{bc.name}}</span> > 
            </template>
            <template v-else>
                <b><span @dblclick="bcGetInfo(bc)">{{bc.name}}</span></b>
            </template>
        </template><br>
    Tabs: {{tabs}}<br>
    </div>
  <demo-grid ref="diffProps"
    :heroes="mdiffData"
    :columns="gridColumns"
    :filter-key="searchQuery">
  </demo-grid>
  <demo-grid ref="fieldProps"
    :heroes="gridData"
    :columns="gridColumns"
    :filter-key="searchQuery">
  </demo-grid>
    
  <div id="context-menu" class="dropdown clearfix">
    <ul class="dropdown-menu" role="menu" style="display:block;position:static;margin-bottom:5px;">
      <li class="context-menu-item toggleItem" @click="doToggle"><img class="context-menu-icon" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MjguOSA1MjguOSI+PHBhdGggZmlsbD0iI2Y5NjkwZSIgZD0iTTMyOSA4OWwxMDcuNSAxMDcuN0wxNjQgNDY5IDU2LjcgMzYxLjYgMzI5IDg5em0xODktMjUuOGwtNDgtNDhjLTE4LjQtMTguNS00OC41LTE4LjUtNjcgMGwtNDYgNDYgMTA3LjUgMTA3LjVMNTE4IDExNWMxNC41LTE0LjIgMTQuNS0zNy40IDAtNTEuOHpNLjQgNTEyLjdjLTIgOC44IDYgMTYuNyAxNC44IDE0LjZsMTIwLTI5TDI3LjUgMzkwLjUuMyA1MTIuNnoiLz48L3N2Zz4=" width="12">Toggle
      </li>
      <li class="context-menu-item" @click="doTab"><img class="context-menu-icon" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MjguOSA1MjguOSI+PHBhdGggZmlsbD0iI2Y5NjkwZSIgZD0iTTMyOSA4OWwxMDcuNSAxMDcuN0wxNjQgNDY5IDU2LjcgMzYxLjYgMzI5IDg5em0xODktMjUuOGwtNDgtNDhjLTE4LjQtMTguNS00OC41LTE4LjUtNjcgMGwtNDYgNDYgMTA3LjUgMTA3LjVMNTE4IDExNWMxNC41LTE0LjIgMTQuNS0zNy40IDAtNTEuOHpNLjQgNTEyLjdjLTIgOC44IDYgMTYuNyAxNC44IDE0LjZsMTIwLTI5TDI3LjUgMzkwLjUuMyA1MTIuNnoiLz48L3N2Zz4=" width="12">Open Tab
      </li>
        <li class="context-menu-item nestItem" @click="doNest"><img class="context-menu-icon" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MjguOSA1MjguOSI+PHBhdGggZmlsbD0iI2Y5NjkwZSIgZD0iTTMyOSA4OWwxMDcuNSAxMDcuN0wxNjQgNDY5IDU2LjcgMzYxLjYgMzI5IDg5em0xODktMjUuOGwtNDgtNDhjLTE4LjQtMTguNS00OC41LTE4LjUtNjcgMGwtNDYgNDYgMTA3LjUgMTA3LjVMNTE4IDExNWMxNC41LTE0LjIgMTQuNS0zNy40IDAtNTEuOHpNLjQgNTEyLjdjLTIgOC44IDYgMTYuNyAxNC44IDE0LjZsMTIwLTI5TDI3LjUgMzkwLjUuMyA1MTIuNnoiLz48L3N2Zz4=" width="12">Nest Class
      </li>
    </ul>
  </div>
</div>
<script
  src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
  integrity="sha256-pasqAKBDmFT4eHoN2ndd6lN370kFiGUFyTiUHWhU7k8="
  crossorigin="anonymous"></script>
<script src="https://pagecdn.io/lib/ace/1.4.5/ace.js" integrity="sha256-5Xkhn3k/1rbXB+Q/DX/2RuAtaB4dRRyQvMs83prFjpM=" crossorigin="anonymous"></script>
<script>
    
    var editor = ace.edit("editor");
    document.editor = editor;
    editor.setTheme("ace/theme/monokai");
    editor.session.setMode("ace/mode/lua");
</script>
<script>
    $(function() {
$('#nestCb').change(function() {
            document.demo.gridData = [...document.demo.gridData];
});
    var $contextMenu = $("#context-menu");

   /* $("body").on("contextmenu", "table tr", function(e) {
         $contextMenu.css({
              display: "block",
              left: e.pageX,
              top: e.pageY
         });
        //debugger;
         return false;
    });*/

    $('html').click(function() {
         $contextMenu.hide();
    });
  
  $("#contextMenu li a").click(function(e){
    var  f = $(this);
    //debugger;
  });

});
// register the grid component
Vue.component('demo-grid', {
  template: '#grid-template',
  props: {
    heroes: Array,
    columns: Array,
    filterKey: String
  },
  data: function () {
    var sortOrders = {}
    this.columns.forEach(function (key) {
      sortOrders[key] = 1
    })
    return {
    contextMenuWidth: null,
    contextMenuHeight: null,
      componentKey: 0,
      sortKey: '',
      sortOrders: sortOrders
    }
  },
  computed: {
    filteredHeroes: function () {
      var sortKey = this.sortKey
      var filterKey = this.filterKey && this.filterKey.toLowerCase()
      var order = this.sortOrders[sortKey] || 1
      var heroes = this.heroes
      if (filterKey) {
        heroes = heroes.filter(function (row) {
          return Object.keys(row).some(function (key) {
            return String(row[key]).toLowerCase().indexOf(filterKey) > -1
          })
        })
      }
      if (sortKey) {
        heroes = heroes.slice().sort(function (a, b) {
          a = a[sortKey]
          b = b[sortKey]
          return (a === b ? 0 : a > b ? 1 : -1) * order
        })
      }
      return heroes
    }
  },
  filters: {
    capitalize: function (str) {
      return str.charAt(0).toUpperCase() + str.slice(1)
    }
  },
  methods: {
    showContextMenu: (e,entry) => {
        //console.log('x');
        //if(entry.lParam == undefined) return;
        document.demo.$children[0].entry = entry;
        if(entry.type == 'BoolProperty') $('.toggleItem').show(); else $('.toggleItem').hide();
        if($('#nestCb').is(':checked') && entry.nested == true) $('.nestItem').show(); else $('.nestItem').hide();
        var $contextMenu = $("#context-menu");

         $contextMenu.css({
              display: "block",
              left: e.pageX,
              top: e.pageY
         });
    },
    forceRerender() {
      this.componentKey += 1;  
    },handleBlur(entry,event) {
        var val = event.target.value;
        var ptr = parseInt(document.demo2.goPtr)+entry.offset;
        var fnc = '';
        if(entry.type == 'FloatProperty') fnc = 'WriteFloat(';
        else if(entry.type == 'StrProperty') fnc = 'WriteUEStr(';
        else if(entry.type == 'IntProperty') fnc = 'WriteInt(';
        else if(entry.type == 'BoolProperty') {
            val = JSON.parse(val);//trick to get 1 or 0
            fnc = 'WriteBit('+entry.lParam+',';
            console.log(entry);
        }
        else if(entry.type == 'ByteProperty') {
            val = parseInt(JSON.parse(val));//trick to get 1 or 0
            fnc = 'WriteByte(';
        }
        
        var str = fnc+'0x'+ptr.toString(16)+','+val+')';
        console.log(str);
        connection.send('do_script '+str);
        entry.edit = false;
        entry.val = val;
              this.forceRerender();
    },
      greet: function (entry) {
          console.log('greet',entry);
          if(entry.addr) {
              if(entry.nested == true) {
                  //unnest
                  document.nestCfg[entry.class] = true;
                  //reload
                  document.demo.gridData = [...document.demo.gridData];
                  return;
              }
              //document.demo2.goPtr = entry.addr;
                connection.send('get_info '+entry.addr)
              console.log('get info..');
              //restart breadcrumbs
              document.demo2.bcList = [];
          } else if(entry.lParam > 0 && (entry.type == 'ObjectProperty' || entry.type == 'ArrayProperty' ||
                                         entry.type == 'ComponentProperty' //ue3 support
                                        )) {
              //this.$parent.goPtr = entry.lParam;
                connection.send('get_info '+entry.lParam) 
              //..
          }  else if(entry.type == 'ClassProperty' && entry.lParam > 0) {
              //this.$parent.goPtr = entry.lParam;
                connection.send('get_class '+entry.lParam) 
              //..
          } else if(entry.type == 'FloatProperty' || entry.type == 'StrProperty' || entry.type == 'IntProperty' ||entry.type == 'BoolProperty' || entry.type == 'ByteProperty' ) {
              entry.edit = true;
              this.forceRerender();
              this.$nextTick(() => {
                  this.$refs.uip[0].focus();
      });
             // this.$refs.updateInput.$focus();
              //focus input..
                    }
         // console.log(entry);
      },
    translate: function (entry,key) {
        var ret = entry[key];
        if(entry.edit === true && key == 'val') return '';
        
        if(key == 'addr' || key == 'offset') return ret.toString(16).toUpperCase();
        if(ret.length>40) return ret.slice(0,40)+'...';
        
        if(key == 'val' && entry.type == 'BoolProperty') ret += ' : '+entry.lParam.toString(16).toUpperCase();//entry.lParam
        return ret;
    },
    sortBy: function (key) {
      this.sortKey = key
      this.sortOrders[key] = this.sortOrders[key] * -1
    }
  }
})

            document.nestCfg = {};
// bootstrap the demo
document.demo = new Vue({
  el: '#demo',
  data: {
    searchQuery: '',
    gridColumns: ['addr','class', 'name'],
    gridData: [
    ]
  },
    computed: {
        sortGridData: function() {
            if(!$('#nestCb').is(':checked'))
                return this.gridData;
            var diffData = [...this.gridData];
            diffData.sort(function(a,b) {
                if (a.class > b.class) {
                    return 1;
                  }
                  if (a.class < b.class) {
                    return -1;
                  }
                return 0;
            });
            
            var nestCount = {};
            var lastNest = '';
            for(var i = 0; i < diffData.length;i++) {
                var data = diffData[i];
                var bNest = i+1 < diffData.length ? data.class == diffData[i+1].class || data.class == lastNest : false;
                if(bNest) {
                    data.nested = true;
                    if(typeof nestCount[data.class] == 'undefined') nestCount[data.class] = 1;
                    else nestCount[data.class] += 1;//parseInt(nestCount[data.class])+1;
                    //data.name = 'Nest '+nestCount[data.class];
                }
                //data.name = 'x';
                lastNest = data.class;
            }
            
            var ret = [];
            for(var i = 0; i < diffData.length;i++) {//prune all nested..
                if(document.nestCfg[diffData[i].class] != 1 && diffData[i].nested == true ) {
                    while( diffData[i].class == diffData[i+1].class) {
                        i++;
                    }
                    //data.name = 
                    var obj = jQuery.extend({},diffData[i]);
                    obj.addr = 'NESTED';
                    obj.name = 'NESTED ['+nestCount[diffData[i].class]+']';
                    ret.push( obj);
                    continue;
                }
                ret.push( diffData[i]);

            }
            return ret;
            //if nested, only show count
            return diffData;
        }
    }
})

    function doRefresh() {
        var toTime = $('#refreshMs').val(); //time out time
        if(toTime <= 25) toTime = 25; //min
        console.log('refresh.. '+performance.now());
        if(document.demo2.goPtr > 0) //check if valid
            connection.send('get_info '+document.demo2.goPtr)
        if($('#refreshCb').is(':checked'))
            document.refreshTimeout = setTimeout(doRefresh,toTime);
    }
// bootstrap the demo
document.demo2 = new Vue({
  el: '#demo2',
  data: {
      goPtr: 0,
      bcList: [],
      tabs: [],
      objName: null,
    searchQuery: '',
    gridColumns: ['offset', 'name','type','val'],
    gridData: [
    ],
    //diffData: []
  },
    computed: {
        mdiffData: function() {
            var diffData = [];
            $.each(this.gridData,function(key,val) {
                var keepTime = $('#refreshKeepMs').val();
               if(val.diff || ($('#refreshTimerCb').is(':checked') && val.diffTimer >= performance.now()-keepTime)) diffData.push(val); 
            });
            return diffData;
        }
    },
  methods: {
      doNest() {
        var entry = document.demo.$children[0].entry;
              if(entry.nested == true) {
                  //unnest
                  document.nestCfg[entry.class] = !document.nestCfg[entry.class];
                  //reload
                  document.demo.gridData = [...document.demo.gridData];
                  return;
              }
      },
      doTab() {
        var entry = document.demo.$children[0].entry;
          console.log(entry);
        if(entry.addr>0) {
            document.demo2.tabs.push(entry.addr);
        } else if(entry.type == 'ObjectProperty') {
         //add to tabs..
            document.demo2.tabs.push(entry.lParam);
        }
        
      },
      doToggle() {
        var entry = document.demo.$children[0].entry;
          console.log(entry);
        var ptr = parseInt(document.demo2.goPtr)+entry.offset;
      console.log('Toggle',entry);
        if(entry.type == 'BoolProperty') {
            fnc = 'ToggleBit('+entry.lParam+',';

            entry.val = entry.val=='false';
            var str = fnc+'0x'+ptr.toString(16)+')';
            connection.send('do_script '+str);
            document.demo2.$children[0].forceRerender();
            }
      },
      bcGetInfo(bc) {
          connection.send('get_info '+bc.ptr);
          this.bcList.length = bc.idx;
      },
      breadcrumbs() {
          var ret = '';
            for(var i = 0; i < this.bcList.length;i++) {
                var bc = this.bcList[i];
                if(i>0) ret += ' > ';
                ret+= '<a onclick="x">'+bc.name+'</a>';
            }
          return ret;
      },
      hex: function(ptr) {
          return '0x'+ptr.toString(16).toUpperCase();
      },
      cbRefresh: function(event) {
          if(event.target.checked)
            doRefresh();//send refresh event..
          else
              clearTimeout(document.refreshTimeout);
      },
  }
})
</script>

<script>
    function SendScript() {
        var code = document.editor.getValue();
        console.log(code);
        connection.send('do_script '+code);
    }
    function DoX() {
        connection.send('get_info '+parseInt($('#ptr').val(),16)) 
    }
    function SetupWS() {
const url = 'ws://localhost:1357/echo'
connection = new WebSocket(url)
document.ws = connection;
connection.onopen = () => {
    $('.state').text('socket connected').css('color','green');
    $('#log_area').text('Log..\n');
    if(!document.gotList) {
        connection.send('get_list') 
        document.gotList = true;
    }
}

connection.onclose = event=>{
    setTimeout(function() { SetupWS();  },4000);
    $('.state').text('Connection closed').css('color','red');
}
connection.onerror = (error) => {
    $('.state').text('socket error..');
    $('.wsState').text('Bad Connection.').css('color','red');
    console.log(error);
  console.log(`WebSocket error: ${error}`)
}

connection.onmessage = (e) => {
    var j = JSON.parse(e.data);
    console.log(j);
    if(j.type == 'log') {
        var oneDiv = $("#log_area");
        $('#log_area').append(j.log+'\n');
        bottom = oneDiv.prop('scrollHeight') - oneDiv.height()
        console.log(j.log);
    } else if(j.type == 'list') {
        document.demo.gridData = j.data;
    } else if(j.type == 'info') {
        //parse info and make an updated props list
        if(document.demo2.goPtr == j.data.ptr) {
            var oldInfo = document.demo2.gridData;
            for(var i = 0; i < j.data.info.length;i++) {
                j.data.info[i].diff = j.data.info[i].val != oldInfo[i].val;
                if(j.data.info[i].diff) {
                    j.data.info[i].diffTimer = performance.now();
                } else {
                    j.data.info[i].diffTimer = oldInfo[i].diffTimer;
                }
            }
            if(document.demo2.bcList.length == 0) document.demo2.bcList.push({idx:document.demo2.bcList.length,ptr:j.data.ptr,name:j.data.name});
        } else {
            //add to jptr
            document.demo2.bcList.push({idx:document.demo2.bcList.length,ptr:j.data.ptr,name:j.data.name});
        }
        document.demo2.objName = j.data.name;
        document.demo2.goPtr = j.data.ptr;
        document.demo2.gridData = j.data.info;
        //..
    }
    
    return;
}
    }
    SetupWS();
</script>