1

frontend/public/index.html

@@ -12,12 +12,12 @@
   <meta property="og:url" content="https://kaverti.com">
   <meta property="og:title" content="Kaverti">
   <meta property="og:description" content="Kaverti allows you to chat, and socialize on our platform, with our ever expanding platform, and our gaming platform will allow users to create games, and avatars with user created items from our virtual Marketplace.">
-  <meta property="og:image" content="https://cdn.kaverti.com/opengraph-image.png">
+  <meta property="og:image" content="http://localhost/opengraph-image.png">
   <meta property="twitter:card" content="summary_large_image">
   <meta property="twitter:url" content="https://kaverti.com">
   <meta property="twitter:title" content="Kaverti">
   <meta property="twitter:description" content="Kaverti allows you to chat, and socialize on our platform, with our ever expanding platform, and our gaming platform will allow users to create games, and avatars with user created items from our virtual Marketplace.">
-  <meta property="twitter:image" content="https://cdn.kaverti.com/opengraph-image.png">
+  <meta property="twitter:image" content="http://localhost/opengraph-image.png">
   <script src="https://polyfill.io/v3/polyfill.min.js?features=es2015%2Ces2016%2Ces2018%2Ces2019%2Ces2017%2Ces6%2Ces5%2Ces7%2Cdefault%2CIntl%2Cblissfuljs"></script>
   <script>
     function isIE() {

frontend/src/App.vue

@@ -411,7 +411,7 @@ blockquote {
                   <template slot="About">
                     <div>
                       <center>
-                        <img src="https://cdn.kaverti.com/icon.png" width="10%">
+                        <img src="http://localhost/icon.png" width="10%">
                         <h1>Kaverti v{{this.$store.state.clientVersion}}</h1>
                         <p>Latest client version: v{{this.$store.state.latestClientVersion}}</p>
                         <p>API version: v{{this.$store.state.latestAPIVersion}}</p>
@@ -1003,7 +1003,7 @@ export default {
       if (this.$store.state.meta.logo) {
         this.$store.state.meta.logo
       }
-      return "https://cdn.kaverti.com/logo.png";
+      return "http://localhost/logo.png";
     },
     theme() {
       return this.$store.state.theme
@@ -1459,7 +1459,7 @@ export default {
     darkTheme() {
       let darkThemeLinkEl = document.createElement("link");
       darkThemeLinkEl.setAttribute("rel", "stylesheet");
-      darkThemeLinkEl.setAttribute("href", "https://cdn.kaverti.com/css/dark.css");
+      darkThemeLinkEl.setAttribute("href", "http://localhost/css/dark.css");
       darkThemeLinkEl.setAttribute("id", "dark-theme");
 
       let docHead = document.querySelector("head");

frontend/src/components/AvatarIcon.vue

@@ -74,7 +74,7 @@
       },
       pictureURL () {
         if(this.proxyUser.picture) {
-          return 'https://cdn.kaverti.com/user/avatars/headshot/' + this.user.picture + '.png'
+          return 'http://localhost/user/avatars/headshot/' + this.user.picture + '.png'
         }
         return null;
       }

frontend/src/components/TeamIcon.vue

@@ -76,15 +76,15 @@ export default {
       if(this.user && this.user.approved && !this.user.banned && this.user.picture !== 'default') {
         return this.user.picture
       } else if(this.user && this.user.banned) {
-        return "https://cdn.kaverti.com/teams/unknown-light.png"
+        return "http://localhost/teams/unknown-light.png"
       } else if(this.user && !this.user.banned && !this.user.approved && this.$store.state.theme === 'light') {
-        return "https://cdn.kaverti.com/teams/pending-light.png"
+        return "http://localhost/teams/pending-light.png"
       } else if(this.user && !this.user.banned && !this.user.approved && this.$store.state.theme === 'dark') {
-        return "https://cdn.kaverti.com/teams/pending-dark.png"
+        return "http://localhost/teams/pending-dark.png"
       } else if(this.user && !this.user.banned && !this.user.approved) {
-        return "https://cdn.kaverti.com/teams/pending-light.png"
+        return "http://localhost/teams/pending-light.png"
       } else {
-        return "https://cdn.kaverti.com/teams/unknown-light.png"
+        return "http://localhost/teams/unknown-light.png"
       }
     }
   },

frontend/src/components/routes/Character.vue

@@ -1,115 +1,235 @@
+<style>
+.vertical-alt {
+  margin: 0;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  -ms-transform: translate(-50%, -50%);
+  transform: translate(-50%, -50%);
+}
+.limit{
+  margin-top: 0.5rem;
+  word-break: break-all;
+}
+</style>
 <template>
-  <!--
-  * Character customisation page almost complete, please wait. ~Bytetrex
-  * What's Coming?
-  * Avatar mask (colors [modal]), inventory, equipped items, current avatar render display.
-  -->
+  <main>
+    <div class="section columns">
+      <div class="column is-4" style="float: left">
+        <div class="box has-text-centered">
+          <div class="columns is-vcentered is-mobile">
+            <div class="column"><h1 class="title">Your current avatar</h1></div>
+          </div>
+          <figure class="image is-250">
+            <img width="250px"
+                 :src = '"http://localhost/user/avatars/full/" + this.user.picture + ".png"'
 
-  <div class='route_container user_route'>
-    <div class="column is-4" style="float: left">
-      <div class="box has-text-centered">
-        <div class="columns is-vcentered is-mobile">
-          <div class="column"><h1 class="title">Your current avatar</h1></div>
-        </div>
-        <figure class="image is-250">
-          <img width="250px"
-               :src = userPicture
-          >
-        </figure>
-        <br>
-        <menu-button
-          v-if='$store.state'
-          :options='[
+            >
+          </figure>
+          <br>
+          <menu-button
+            v-if='$store.state'
+            :options='[
 					{ event: "refresh", value: "Refresh Avatar" },
 					{ event: "report_a_problem", value: "Report a problem" }
 					]'
-          @refresh='RefreshAvatar'
-          @report_a_problem='ReportAProblem'
-        >
-          <button class='button button--thin_text'>
-            <font-awesome-icon :icon='["fa", "cog"]' style='margin-right: 0.25rem;' />
-            Problems with your avatar?
-          </button>
-        </menu-button>
+            @refresh='RefreshAvatar'
+          >
+            <button class='button button--thin_text'>
+              <font-awesome-icon :icon='["fa", "cog"]' style='margin-right: 0.25rem;' />
+              Problems with your avatar?
+            </button>
+          </menu-button>
+        </div>
       </div>
+      <div class="column is-6 box">
+        <tab-view
+          :tabs='["Hats", "Faces", "Shirts", "Pants"]'
+          v-model="tab"
+          padding='true'
+          slot='main'
+        >
+        </tab-view>
+        <scroll-load
+          key='user-row'
+          class='columns is-multiline'
+          v-if='users.length'
+          :loading='loading'
+          @loadNext='fetchData'
+        >
+          <div class="column is-4" v-for='user in users' :key='"user-row" + user.name' v-show="user && !user.hidden"><div class="card">
+            <div class="card-content">
+              <div class="media-left">
+                <figure class="image is-128x128">
+                  <img v-if="user.picture !== 'default' && user.approved" width="128px" height="128px" :src="user.Item.picture">
+                  <img v-if="user.picture === 'default' && $store.state.theme === 'light' && user.Item.approved" width="128px" height="128px" src="http://localhost/teams/unknown-light.png">
+                  <img v-if="user.picture === 'default' && $store.state.theme === 'dark' && user.Item.approved" width="128px" height="128px" src="http://localhost/teams/unknown-dark.png">
+                  <img v-if="$store.state.theme === 'light' && !user.Item.approved" width="128px" height="128px" src="http://localhost/teams/pending-light.png">
+                  <img v-if="$store.state.theme === 'dark' && !user.Item.approved" width="128px" height="128px" src="http://localhost/teams/pending-dark.png">
+                </figure>
+              </div>
+              <br>
+              <div class="media">
+                <div class="media-content">
+                  <p class="title is-4"><router-link :to="'/m/' + user.Item.id">{{user.Item.name}}</router-link></p>
+                  <p class="subtitle is-6">Created by <router-link :to="'/u/' + user.Item.User.username"> @{{user.Item.User.username}}</router-link></p>
+                </div>
+              </div>
+
+              <div class="content limit">
+                {{user.Item.description | truncate(70)}}
+              </div>
+            </div>
+          </div>
+          </div>
+        </scroll-load>
+      </div>
+      <p name='fade' mode='out-in'>
+      <center><loading-message key='loading' v-if='loading'></loading-message></center>
+      <center><div class='overlay_message' v-if='!loading && !users.length'>
+        You have no Marketplace items
+      </div></center></p>
     </div>
-  </div>
+  </main>
 </template>
 <script>
-import AjaxErrorHandler from '../../assets/js/errorHandler'
-import MenuButton from '../MenuButton'
+import LoadingMessage from '../LoadingMessage';
+import ScrollLoad from '../ScrollLoad';
+import TabView from '../TabView'
+import throttle from 'lodash.throttle';
+import AjaxErrorHandler from '../../assets/js/errorHandler';
 
 export default {
-  name: 'user',
-  components: {MenuButton},
+  name: 'Inventory',
+  components: {
+    LoadingMessage,
+    ScrollLoad,
+    TabView
+  },
   data () {
     return {
-      menuItems: [
-        { name: 'Your items', route: 'items' },
-      ],
-      selected: 0,
+      search: '',
+      users: [],
+      user: null,
+      tab: 0,
 
-      username: this.$route.params.username,
-      user: null
-    }
-  },
-  watch: {
-    $route (to) {
-      this.selected = this.getIndexFromRoute(to.path)
-    }
-  },
-  computed: {
-    userColor () {
-      if(this.user) {
-        return this.user.color
-      } else {
-        return null
-      }
-    },
-    userPicture () {
-      if(this.user && this.user.picture) {
-        return 'https://cdn.kaverti.com/user/avatars/full/' + this.user.picture + '.png'
-      } else {
-        return null
+      loading: true,
+      offset: 0,
+      limit: 15,
+      refreshAvatar: {
+        loading: false,
+        error: ''
+      },
+
+      roleOptions: [
+        { name: 'Admins', value: 'admin' },
+        { name: 'Users', value: 'user' }
+      ],
+      roleSelected: ['admin', 'user'],
+
+      tableSort: {
+        column: 'username',
+        sort: 'desc'
       }
     }
   },
   methods: {
     RefreshAvatar () {
       this.axios
-        .post(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + '/' + 'users/avatar/refresh', {
+        .post(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + '/' + 'users/render/refresh', {
         })
         .then(() => {
-          this.refreshavatar.loading = false
+          this.refreshAvatar.loading = false
         })
         .catch(e => {
-          this.refreshavatar.loading = false
+          this.refreshAvatar.loading = false
 
           AjaxErrorHandler(this.$store)(e, error => {
-            this.refreshavatar.error = error.message
+            this.refreshAvatar.error = error.message
           })
         })
-      this.$router.go('/user/' + this.username)
     },
-    ReportAProblem () {
-      this.$router.go('https://help.kaverti.com')
-    },
-  },
-  created () {
-    this.axios
-      .get(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + `/` + `user/${this.state.username}`)
-      .then(res => this.user = res.data)
-      .catch(e => {
-        let invalidId = e.response.data.errors.find(error => {
-          return error.name === 'accountDoesNotExist'
-        })
+    fetchData () {
+      this.axios
+        .get(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + `/` + `userinfo`)
+        .then(res => this.user = res.data)
+        .catch(e => {
+          let invalidId = e.response.data.errors.find(error => {
+            return error.name === 'accountDoesNotExist'
+          })
 
-        if(invalidId) {
-          this.$store.commit('set404Page', true)
-        } else {
-          AjaxErrorHandler(this.$store)(e)
-        }
+          if(invalidId) {
+            this.$store.commit('set404Page', true)
+          } else {
+            AjaxErrorHandler(this.$store)(e)
+          }
+        })
+      if(this.offset === null) return;
+
+      let url = process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + '/' + 'inventory/' + this.tab + `?
+					sort=${this.tableSort.column}
+					&order=${this.tableSort.sort}
+					&offset=${this.offset}
+				`;
+      if(this.roleSelected.length === 1) {
+        url += '&role=' + this.roleSelected[0];
+      }
+      if(this.search.length) {
+        url += '&search=' + encodeURIComponent(this.search.trim());
+      }
+
+      this.loading = true;
+      this.axios
+        .get(url)
+        .then(res => {
+          this.users.push(...res.data);
+          this.loading = /*loading =*/ false;
+
+          //If returned data is less than the limit
+          //then there must be no more pages to paginate
+          if(res.data.length < this.limit) {
+            this.offset = null;
+          } else {
+            this.offset+= this.limit;
+          }
+        })
+        .catch(e => {
+          AjaxErrorHandler(this.$store)(e);
+          this.loading = /*loading =*/ false;
+        });
+    },
+    resetFetchData () {
+      this.offset = 0;
+      this.users = [];
+
+      this.fetchData();
+    }
+  },
+  getNewerUsers () {
+    this.loadingNewer = true
+
+    this.axios
+      .get(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + '/' + 'inventory' + '?limit=' + this.newUsers)
+      .then(res => {
+        this.loadingNewer = false
+        this.newUsers = 0
+
+        this.threads.unshift(...res.data)
       })
+      .catch((e) => {
+        this.loadingNewer = false
+        AjaxErrorHandler(this.$store)(e)
+      })
+  },
+  mounted () {
+    this.fetchData();
+  },
+  watch: {
+    tableSort: 'resetFetchData',
+    tab: 'resetFetchData',
+    search: throttle(function () {
+      this.resetFetchData();
+    }, 200)
   }
 }
 </script>

frontend/src/components/routes/Inventory.vue

@@ -28,10 +28,10 @@
               <div class="media-left">
                 <figure class="image is-128x128">
                   <img v-if="user.picture !== 'default' && user.approved" width="128px" height="128px" :src="user.Item.picture">
-                  <img v-if="user.picture === 'default' && $store.state.theme === 'light' && user.Item.approved" width="128px" height="128px" src="https://cdn.kaverti.com/teams/unknown-light.png">
-                  <img v-if="user.picture === 'default' && $store.state.theme === 'dark' && user.Item.approved" width="128px" height="128px" src="https://cdn.kaverti.com/teams/unknown-dark.png">
-                  <img v-if="$store.state.theme === 'light' && !user.Item.approved" width="128px" height="128px" src="https://cdn.kaverti.com/teams/pending-light.png">
-                  <img v-if="$store.state.theme === 'dark' && !user.Item.approved" width="128px" height="128px" src="https://cdn.kaverti.com/teams/pending-dark.png">
+                  <img v-if="user.picture === 'default' && $store.state.theme === 'light' && user.Item.approved" width="128px" height="128px" src="http://localhost/teams/unknown-light.png">
+                  <img v-if="user.picture === 'default' && $store.state.theme === 'dark' && user.Item.approved" width="128px" height="128px" src="http://localhost/teams/unknown-dark.png">
+                  <img v-if="$store.state.theme === 'light' && !user.Item.approved" width="128px" height="128px" src="http://localhost/teams/pending-light.png">
+                  <img v-if="$store.state.theme === 'dark' && !user.Item.approved" width="128px" height="128px" src="http://localhost/teams/pending-dark.png">
                 </figure>
               </div>
               <br>

frontend/src/components/routes/Marketplace.vue

@@ -66,10 +66,10 @@
               <div class="media-left">
                 <figure class="image is-128x128">
                   <img v-if="user.picture !== 'default' && user.approved" width="128px" height="128px" :src="user.picture">
-                  <img v-if="user.picture === 'default' && $store.state.theme === 'light' && user.approved" width="128px" height="128px" src="https://cdn.kaverti.com/teams/unknown-light.png">
-                  <img v-if="user.picture === 'default' && $store.state.theme === 'dark' && user.approved" width="128px" height="128px" src="https://cdn.kaverti.com/teams/unknown-dark.png">
-                  <img v-if="$store.state.theme === 'light' && !user.approved" width="128px" height="128px" src="https://cdn.kaverti.com/teams/pending-light.png">
-                  <img v-if="$store.state.theme === 'dark' && !user.approved" width="128px" height="128px" src="https://cdn.kaverti.com/teams/pending-dark.png">
+                  <img v-if="user.picture === 'default' && $store.state.theme === 'light' && user.approved" width="128px" height="128px" src="http://localhost/teams/unknown-light.png">
+                  <img v-if="user.picture === 'default' && $store.state.theme === 'dark' && user.approved" width="128px" height="128px" src="http://localhost/teams/unknown-dark.png">
+                  <img v-if="$store.state.theme === 'light' && !user.approved" width="128px" height="128px" src="http://localhost/teams/pending-light.png">
+                  <img v-if="$store.state.theme === 'dark' && !user.approved" width="128px" height="128px" src="http://localhost/teams/pending-dark.png">
                 </figure>
               </div>
               <br>

frontend/src/components/routes/MarketplaceItem.vue

@@ -24,10 +24,10 @@
           <div class="column is-3">
             <figure class="image is-512 is-centered">
               <img v-if="user.picture !== 'default' && user.approved" width="512px" height="512px" :src="user.picture">
-              <img v-if="user.picture === 'default' && $store.state.theme === 'light' && user.approved" width="512px" height="512px" src="https://cdn.kaverti.com/teams/unknown-light.png">
-              <img v-if="user.picture === 'default' && $store.state.theme === 'dark' && user.approved" width="512px" height="512px" src="https://cdn.kaverti.com/teams/unknown-dark.png">
-              <img v-if="$store.state.theme === 'light' && !user.approved" width="512px" height="512px" src="https://cdn.kaverti.com/teams/pending-light.png">
-              <img v-if="$store.state.theme === 'dark' && !user.approved" width="512px" height="512px" src="https://cdn.kaverti.com/user/avatars/full/default.png">
+              <img v-if="user.picture === 'default' && $store.state.theme === 'light' && user.approved" width="512px" height="512px" src="http://localhost/teams/unknown-light.png">
+              <img v-if="user.picture === 'default' && $store.state.theme === 'dark' && user.approved" width="512px" height="512px" src="http://localhost/teams/unknown-dark.png">
+              <img v-if="$store.state.theme === 'light' && !user.approved" width="512px" height="512px" src="http://localhost/teams/pending-light.png">
+              <img v-if="$store.state.theme === 'dark' && !user.approved" width="512px" height="512px" src="http://localhost/user/avatars/full/default.png">
             </figure>
           </div>
           <div class="column is-7">
@@ -118,7 +118,7 @@ export default {
     },
     userPicture () {
       if(this.user && this.user.picture) {
-        return 'https://cdn.kaverti.com/user/avatars/full/' + this.user.picture + '.png'
+        return 'http://localhost/user/avatars/full/' + this.user.picture + '.png'
       } else {
         return null
       }

frontend/src/components/routes/MarketplaceItemAuction.vue

@@ -52,7 +52,7 @@ export default {
     },
     userPicture () {
       if(this.user && this.user.picture) {
-        return 'https://cdn.kaverti.com/user/avatars/full/' + this.user.picture + '.png'
+        return 'http://localhost/user/avatars/full/' + this.user.picture + '.png'
       } else {
         return null
       }

frontend/src/components/routes/SettingsAbout.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <center>
-      <img src="https://cdn.kaverti.com/icon.png" width="10%">
+      <img src="http://localhost/icon.png" width="10%">
       <h1>Kaverti v{{this.$store.state.clientVersion}}</h1>
       <p>Latest client version: v{{this.$store.state.latestClientVersion}}</p>
       <p>API version: v{{this.$store.state.latestAPIVersion}}</p>

frontend/src/components/routes/Team.vue

@@ -70,12 +70,12 @@
         <div class="column is-2">
           <figure class="image is-256 is-centered">
             <img class="team-img" v-if="user.picture !== 'default' && user.approved" width="128px" height="128px" :src="user.picture">
-            <img class="team-img" v-if="user.picture === 'default' && $store.state.theme === 'light' && user.approved" width="128px" height="128px" src="https://cdn.kaverti.com/teams/unknown-light.png">
-            <img class="team-img" v-if="user.picture === 'default' && !$store.state.theme && user.approved" width="128px" height="128px" src="https://cdn.kaverti.com/teams/unknown-light.png">
-            <img class="team-img" v-if="user.picture === 'default' && $store.state.theme === 'dark' && user.approved" width="128px" height="128px" src="https://cdn.kaverti.com/teams/unknown-dark.png">
-            <img class="team-img" v-if="$store.state.theme === 'light' && !user.approved" width="128px" height="128px" src="https://cdn.kaverti.com/teams/pending-light.png">
-            <img class="team-img" v-if="!$store.state.theme && !user.approved" width="128px" height="128px" src="https://cdn.kaverti.com/teams/pending-light.png">
-            <img class="team-img" v-if="$store.state.theme === 'dark' && !user.approved" width="128px" height="128px" src="https://cdn.kaverti.com/teams/pending-dark.png">
+            <img class="team-img" v-if="user.picture === 'default' && $store.state.theme === 'light' && user.approved" width="128px" height="128px" src="http://localhost/teams/unknown-light.png">
+            <img class="team-img" v-if="user.picture === 'default' && !$store.state.theme && user.approved" width="128px" height="128px" src="http://localhost/teams/unknown-light.png">
+            <img class="team-img" v-if="user.picture === 'default' && $store.state.theme === 'dark' && user.approved" width="128px" height="128px" src="http://localhost/teams/unknown-dark.png">
+            <img class="team-img" v-if="$store.state.theme === 'light' && !user.approved" width="128px" height="128px" src="http://localhost/teams/pending-light.png">
+            <img class="team-img" v-if="!$store.state.theme && !user.approved" width="128px" height="128px" src="http://localhost/teams/pending-light.png">
+            <img class="team-img" v-if="$store.state.theme === 'dark' && !user.approved" width="128px" height="128px" src="http://localhost/teams/pending-dark.png">
           </figure>
         </div>
         <div class="column is-7">
@@ -183,7 +183,7 @@ export default {
     },
     userPicture () {
       if(this.user && this.user.picture) {
-        return 'https://cdn.kaverti.com/user/avatars/full/' + this.user.picture + '.png'
+        return 'http://localhost/user/avatars/full/' + this.user.picture + '.png'
       } else {
         return null
       }

frontend/src/components/routes/TeamInvite.vue

@@ -97,7 +97,7 @@ export default {
     },
     userPicture () {
       if(this.user && this.user.picture) {
-        return 'https://cdn.kaverti.com/user/avatars/full/' + this.user.picture + '.png'
+        return 'http://localhost/user/avatars/full/' + this.user.picture + '.png'
       } else {
         return null
       }

frontend/src/components/routes/Teams.vue

@@ -120,12 +120,12 @@
                     <div class="media-left">
                       <figure class="image is-64x64">
                         <img class="team-img" v-if="user.picture !== 'default' && user.approved" width="128px" height="128px" :src="user.picture">
-                        <img class="team-img" v-if="user.picture === 'default' && $store.state.theme === 'light' && user.approved" width="128px" height="128px" src="https://cdn.kaverti.com/teams/unknown-light.png">
-                        <img class="team-img" v-if="user.picture === 'default' && !$store.state.theme && user.approved" width="128px" height="128px" src="https://cdn.kaverti.com/teams/unknown-light.png">
-                        <img class="team-img" v-if="user.picture === 'default' && $store.state.theme === 'dark' && user.approved" width="128px" height="128px" src="https://cdn.kaverti.com/teams/unknown-dark.png">
-                        <img class="team-img" v-if="$store.state.theme === 'light' && !user.approved" width="128px" height="128px" src="https://cdn.kaverti.com/teams/pending-light.png">
-                        <img class="team-img" v-if="!$store.state.theme && !user.approved" width="128px" height="128px" src="https://cdn.kaverti.com/teams/pending-light.png">
-                        <img class="team-img" v-if="$store.state.theme === 'dark' && !user.approved" width="128px" height="128px" src="https://cdn.kaverti.com/teams/pending-dark.png">
+                        <img class="team-img" v-if="user.picture === 'default' && $store.state.theme === 'light' && user.approved" width="128px" height="128px" src="http://localhost/teams/unknown-light.png">
+                        <img class="team-img" v-if="user.picture === 'default' && !$store.state.theme && user.approved" width="128px" height="128px" src="http://localhost/teams/unknown-light.png">
+                        <img class="team-img" v-if="user.picture === 'default' && $store.state.theme === 'dark' && user.approved" width="128px" height="128px" src="http://localhost/teams/unknown-dark.png">
+                        <img class="team-img" v-if="$store.state.theme === 'light' && !user.approved" width="128px" height="128px" src="http://localhost/teams/pending-light.png">
+                        <img class="team-img" v-if="!$store.state.theme && !user.approved" width="128px" height="128px" src="http://localhost/teams/pending-light.png">
+                        <img class="team-img" v-if="$store.state.theme === 'dark' && !user.approved" width="128px" height="128px" src="http://localhost/teams/pending-dark.png">
                       </figure>
                     </div>
                     <div class="media-content">

frontend/src/components/routes/User.vue

@@ -145,7 +145,7 @@
 			},
 			userPicture () {
 				if(this.user && this.user.picture) {
-					return 'https://cdn.kaverti.com/user/avatars/full/' + this.user.picture + '.png'
+					return 'http://localhost/user/avatars/full/' + this.user.picture + '.png'
 				} else {
 					return null
 				}

frontend/src/components/routes/UserInventory.vue

@@ -28,10 +28,10 @@
               <div class="media-left">
                 <figure class="image is-128x128">
                   <img v-if="user.picture !== 'default' && user.approved" width="128px" height="128px" :src="user.Item.picture">
-                  <img v-if="user.picture === 'default' && $store.state.theme === 'light' && user.Item.approved" width="128px" height="128px" src="https://cdn.kaverti.com/teams/unknown-light.png">
-                  <img v-if="user.picture === 'default' && $store.state.theme === 'dark' && user.Item.approved" width="128px" height="128px" src="https://cdn.kaverti.com/teams/unknown-dark.png">
-                  <img v-if="$store.state.theme === 'light' && !user.Item.approved" width="128px" height="128px" src="https://cdn.kaverti.com/teams/pending-light.png">
-                  <img v-if="$store.state.theme === 'dark' && !user.Item.approved" width="128px" height="128px" src="https://cdn.kaverti.com/teams/pending-dark.png">
+                  <img v-if="user.picture === 'default' && $store.state.theme === 'light' && user.Item.approved" width="128px" height="128px" src="http://localhost/teams/unknown-light.png">
+                  <img v-if="user.picture === 'default' && $store.state.theme === 'dark' && user.Item.approved" width="128px" height="128px" src="http://localhost/teams/unknown-dark.png">
+                  <img v-if="$store.state.theme === 'light' && !user.Item.approved" width="128px" height="128px" src="http://localhost/teams/pending-light.png">
+                  <img v-if="$store.state.theme === 'dark' && !user.Item.approved" width="128px" height="128px" src="http://localhost/teams/pending-dark.png">
                 </figure>
               </div>
               <br>

frontend/src/components/routes/fdas.vue

@@ -0,0 +1,167 @@
+<template>
+  <!--
+  * Character customisation page almost complete, please wait. ~Bytetrex
+  * What's Coming?
+  * Avatar mask (colors [modal]), inventory, equipped items, current avatar render display.
+  -->
+
+  <div class='route_container user_route columns'>
+    <div class="column is-4" style="float: left">
+      <div class="box has-text-centered">
+        <div class="columns is-vcentered is-mobile">
+          <div class="column"><h1 class="title">Your current avatar</h1></div>
+        </div>
+        <figure class="image is-250">
+          <img width="250px"
+               :src = '"http://localhost/user/avatars/full/" + this.user.picture + ".png"'
+
+          >
+        </figure>
+        <br>
+        <menu-button
+          v-if='$store.state'
+          :options='[
+					{ event: "refresh", value: "Refresh Avatar" },
+					{ event: "report_a_problem", value: "Report a problem" }
+					]'
+          @refresh='RefreshAvatar'
+          @report_a_problem='ReportAProblem'
+        >
+          <button class='button button--thin_text'>
+            <font-awesome-icon :icon='["fa", "cog"]' style='margin-right: 0.25rem;' />
+            Problems with your avatar?
+          </button>
+        </menu-button>
+      </div>
+    </div>
+    <div class="column is-6">
+      <div class="box">
+        <h1>Your items</h1>
+        <tab-view
+          :tabs='["Hats", "Faces", "Shirts", "Pants"]'
+          v-model="showTab"
+          padding='true'
+          slot='main'
+        >
+        </tab-view>
+        <div class="column is-4" v-for='item in items' :key='"item-row" + item.Inventories.Item.id' v-show="item"><div class="card">
+          <div class="card-content">
+            test
+          </div>
+        </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import AjaxErrorHandler from '../../assets/js/errorHandler'
+import MenuButton from '../MenuButton'
+import throttle from "lodash.throttle";
+
+export default {
+  name: 'user',
+  components: {MenuButton},
+  data () {
+    return {
+      menuItems: [
+        { name: 'Your items', route: 'items' },
+      ],
+      selected: 0,
+      refreshavatar: {
+        loading: false
+      },
+      showTab: 0,
+
+      username: this.$route.params.username,
+      user: null,
+      items: null
+    }
+  },
+  watch: {
+    tableSort: 'resetFetchData',
+    marketplaceTabs: 'resetFetchData',
+    search: throttle(function () {
+      this.resetFetchData();
+    }, 200)
+  },
+  computed: {
+    userColor () {
+      if(this.user) {
+        return this.user.color
+      } else {
+        return null
+      }
+    },
+  },
+  methods: {
+    RefreshAvatar () {
+      this.axios
+        .post(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + '/' + 'users/render/refresh', {
+        })
+        .then(() => {
+          this.refreshavatar.loading = false
+        })
+        .catch(e => {
+          this.refreshavatar.loading = false
+
+          AjaxErrorHandler(this.$store)(e, error => {
+            this.refreshavatar.error = error.message
+          })
+        })
+    },
+    ReportAProblem () {
+      this.$router.go('https://help.kaverti.com')
+    },
+  },
+  created () {
+    this.axios
+      .get(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + `/` + `userinfo`)
+      .then(res => this.user = res.data)
+      .catch(e => {
+        let invalidId = e.response.data.errors.find(error => {
+          return error.name === 'accountDoesNotExist'
+        })
+
+        if(invalidId) {
+          this.$store.commit('set404Page', true)
+        } else {
+          AjaxErrorHandler(this.$store)(e)
+        }
+      })
+    if(this.offset === null) return;
+
+    let url = process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + '/' + 'inventory' + `?
+					sort=${this.tableSort.column}
+					&order=${this.tableSort.sort}
+					&offset=${this.offset}
+				`;
+    if(this.roleSelected.length === 1) {
+      url += '&role=' + this.roleSelected[0];
+    }
+    if(this.search.length) {
+      url += '&search=' + encodeURIComponent(this.search.trim());
+    }
+
+    this.loading = true;
+    this.axios
+      .get(url)
+      .then(res => {
+        this.items.push(...res.data);
+        this.loading = /*loading =*/ false;
+
+        //If returned data is less than the limit
+        //then there must be no more pages to paginate
+        if(res.data.length < this.limit) {
+          this.offset = null;
+        } else {
+          this.offset+= this.limit;
+        }
+      })
+      .catch(e => {
+        AjaxErrorHandler(this.$store)(e);
+        this.loading = /*loading =*/ false;
+      });
+  }
+}
+</script>

migrations/20200908070345-statelogo.js

@@ -7,7 +7,7 @@ module.exports = {
           {
             type: Sequelize.STRING,
             required: true,
-            default: "https://cdn.kaverti.com/logo.png",
+            default: process.env.VUE_APP_CDN + "/logo.png",
             allowNull: false
           },
       ),

models/state.js

@@ -44,7 +44,7 @@ module.exports = (sequelize, DataTypes) => {
 		},
 		logo: {
 			type: DataTypes.STRING,
-			defaultValue: "https://cdn.kaverti.com/logo.png"
+			defaultValue: "http://localhost/logo.png"
 		},
 		icon: {
 			type: DataTypes.STRING,

models/user.js

@@ -249,6 +249,10 @@ module.exports = (sequelize, DataTypes) => {
 			type: DataTypes.BIGINT,
 			defaultValue: 0
 		},
+		faceId: {
+			type: DataTypes.BIGINT,
+			defaultValue: 0
+		},
 		picture: {
 			type: DataTypes.TEXT('long'),
 			validate: {

rendering/usercontent/1.py

@@ -42,5 +42,5 @@ for obj in bpy.data.objects:
 bpy.ops.view3d.camera_to_view_selected()
 scene = bpy.context.scene
 scene.render.image_settings.file_format = 'PNG'
-scene.render.filepath = 'rendering/8fbe647aa958782d.png'
+scene.render.filepath = 'C:/xampp21/htdocs/user/avatars/full/510ca2302751526312d3c37448ecd4ce.png'
 bpy.ops.render.render(write_still = 1)

routes/avatar.js

@@ -23,8 +23,10 @@ router.post("/refresh", limiter, auth, async(req, res, next) => {
     }
     console.log(user)
     let rootPathRender = "C:/Users/matth/Documents/GitHub/website/";
+    let img2 = cryptoRandomString({length: 32})
+    let img = img2
     var blendFilePath = rootPathRender + "rendering/avatar.blend";
-    var imageSavePath = "rendering/" + cryptoRandomString({length: 16}) + ".png";
+    var imageSavePath = "C:/xampp21/htdocs/user/avatars/full/" + img + ".png";
     var pythonFilePath = "rendering/usercontent/"+req.userData.UserId+".py";
     var faceFilePath = rootPathRender + "rendering/faces/defaultFace.png";
     if(user.shirtId) {
@@ -76,6 +78,7 @@ router.post("/refresh", limiter, auth, async(req, res, next) => {
         res.status(200)
         res.json({success: true})
     });
+    user.update({picture: img})
 });
 
 module.exports = router;

routes/team.js

@@ -188,7 +188,7 @@ router.get('/view/:username/picture', async (req, res, next) => {
 
         if(!picture) {
             res.status(404)
-            res.json({picture: "https://cdn.kaverti.com/teams/unknown-light.png"})
+            res.json({picture: "http://localhost/teams/unknown-light.png"})
         } else if(!user.banned) {
             res.writeHead(200, {
                 'Content-Type': picture.mimetype,
@@ -198,7 +198,7 @@ router.get('/view/:username/picture', async (req, res, next) => {
             res.end(new Buffer.from(picture.file, 'binary'))
         } else {
             res.status(404)
-            res.json({picture: "https://cdn.kaverti.com/teams/unknown-light.png"})
+            res.json({picture: "http://localhost/teams/unknown-light.png"})
         }
     } catch (e) { next(e) }
 })