work on server list

src/components/List/VirtualList.vue

@@ -1,7 +1,9 @@
 <template>
   <div ref="vlist" class="vlist" @scroll="scroll">
-    <div ref="vscroll" class="vscroll" :style="`padding: ${(vIndex*$props.rowHeight!)}px 0px ${(list.length*$props.rowHeight!)-(vIndex*$props.rowHeight!)}px;`">
+    <div ref="vscroll" class="vscroll">
-      <slot v-for="(data, index) in visibleList" :data="data" :index="index"></slot>
+      <div :style="`padding: ${(interval[0]*$props.rowHeight!)}px 0px ${Math.max(0,(((list.length)*$props.rowHeight!)-(interval[1])*$props.rowHeight!))}px;`">
+        <slot v-for="(data, index) in visibleList" :data="data" :index="index+interval[0]"></slot>
+      </div>
     </div>
   </div>
 </template>
@@ -25,14 +27,19 @@ export default defineComponent({
   mounted () {
     if (this.$props.list) {
       this.vlistHeight = (this.$refs.vlist as HTMLElement)?.getBoundingClientRect().height || 0
+      this.toLoad = this.visibleCount * 3
       if (this.$props.highlighted) {
         setTimeout(() => (this.$refs.vlist as HTMLElement)?.scrollBy({ top: ((this.list.findIndex(e => e.id === this.$props.highlighted)) * this.rowHeight) - ((this.$refs.vlist as HTMLElement))?.scrollTop - (this.vlistHeight / 2 - this.$props.rowHeight), behavior: 'smooth' }), 1)
       }
     }
   },
   computed: {
+    interval () {
+      // console.log(this.list.length, this.vIndex + this.toLoad)
+      return [Math.min(this.list.length - this.toLoad, this.vIndex), Math.min(this.vIndex + this.toLoad, this.list.length)]
+    },
     visibleList () {
-      return this.list.slice(Math.max(this.vIndex, 0), Math.min(this.vIndex + this.visibleCount * 3, this.list.length))
+      return this.list.slice(this.interval[0], this.interval[1])
     },
     visibleCount () {
       return Math.ceil(this.vlistHeight / this.$props.rowHeight)
@@ -49,14 +56,20 @@ export default defineComponent({
   methods: {
     scroll (e:Event) {
       const scrollTop = (e.target as HTMLElement)?.scrollTop
-      const scrollIndex = Math.round(scrollTop / this.$props.rowHeight)
+      const scrollIndex = Math.floor(scrollTop / this.$props.rowHeight)
 
-      const mustScrollUp = Math.max(0, scrollIndex - (this.visibleCount)) < this.vIndex
+      const mustScrollUp = scrollIndex < this.vIndex
-      const mustScrollDown = Math.min(this.list.length, scrollIndex + (this.visibleCount)) > this.vIndex + (this.visibleCount * 2)
+      const mustScrollDown = scrollIndex > this.vIndex + this.visibleCount
+      // console.log(this.vIndex + this.visibleCount, scrollIndex + this.visibleCount)
       if (mustScrollUp) {
-        this.vIndex = Math.max(0, Math.floor((scrollIndex - this.visibleCount) / 4) * 4)
+        this.vIndex = Math.max(scrollIndex - this.visibleCount, 0)
       } else if (mustScrollDown) {
-        this.vIndex = Math.max(0, Math.floor(scrollIndex / 4) * 4)
+        this.vIndex = Math.min(scrollIndex, this.list.length - this.toLoad)
+      }
+      if (mustScrollDown || mustScrollUp) {
+        const msg = (mustScrollDown ? 'down ' : '') + (mustScrollUp ? 'up ' : '')
+        // console.log(this.toLoad)
+        // console.log((this.list.length * this.$props.rowHeight) - (this.vIndex * this.$props.rowHeight) - (this.visibleCount * this.$props.rowHeight))
       }
     }
   }

src/components/PlayerList.vue

@@ -23,17 +23,6 @@
         <div><span>{{ Math.round(((slotProps.data.value.total_distance / slotProps.data.value.kills) || 0) * 100) / 100 }}</span></div>
       </div>
     </VirtualList>
-    <!-- <div :class="'playerRow ' + (player.id === $props.playerHighlighted ? 'selected' : '')"
-       v-on:click="$emit('highlightPlayer', player.id)"
-      :ref="`player:` + player.id">
-      <div><span>{{ index+1 }}</span></div>
-      <div><span>{{ player.value.username }}</span></div>
-      <div><span>{{ player.value.kills }}</span></div>
-      <div><span>{{ player.value.deaths }}</span></div>
-      <div><span>{{ Math.round(player.value.kills / Math.max(1, player.value.deaths) * 100) / 100 }}</span></div>
-      <div><span>{{ player.value.max_distance }}</span></div>
-      <div><span>{{ Math.round(((player.value.total_distance / player.value.kills) || 0) * 100) / 100 }}</span></div>
-    </div> -->
   </div>
 </template>
 

src/views/PlayerView.vue

@@ -124,7 +124,6 @@ export default defineComponent({
           .find((host) => host.id === server.host)
           ?.servers.push({ name: e[0], ...server })
       })
-      console.log(hosts)
       return hosts
     },
     weapons (): { [key: string]: Ref<Weapon> } {

src/views/ServerView.vue

@@ -12,13 +12,11 @@
       <div><span>{{ slotProps.data._value.max_distance }}</span></div>
       <div><span>{{ Math.round(((slotProps.data._value.total_distance / slotProps.data._value.kills) || 0) * 100) /
         100 }}</span></div>
+      <div><span>{{ nsServersByName[slotProps.data.name] ? nsServersByName[slotProps.data.name]?.playerCount
+        + '/' + nsServersByName[slotProps.data.name]?.maxPlayers : '' }}</span></div>
       <img v-if="nsServersByName[slotProps.data.name]"
         :src="`${publicPath}maps/${nsServersByName[slotProps.data.name].map}_lobby.png`" />
     </div>
-        <!-- <div :class="(!nsServersByName[slotProps.data.servername] ? 'offline ' : ' ') + (!nsServersByName[slotProps.data.servername]?.playerCount ? 'inactive' : '')">
-            {{ slotProps.data.servername }} {{ slotProps.data.value.kills }} {{ nsServersByName[slotProps.data.servername] ? nsServersByName[slotProps.data.servername]?.playerCount +'/'+nsServersByName[slotProps.data.servername]?.maxPlayers : ''}}
-            <img v-if="nsServersByName[slotProps.data.servername]" :src="`${publicPath}maps/${nsServersByName[slotProps.data.servername].map}_lobby.png`"/>
-        </div> -->
   </VirtualList>
   <div>
 
@@ -84,7 +82,7 @@ export default defineComponent({
 .serverHeaders {
   box-sizing: border-box;
   display: grid;
-    grid-template-columns: 5ch 20ch 6ch 6ch 6ch 10ch 1fr;
+  grid-template-columns: 5ch 40ch 7ch 7ch 7ch 7ch 1fr;
   background: var(--bg-color);
   text-align: left;
   cursor: pointer;
@@ -106,7 +104,12 @@ export default defineComponent({
   background: var(--current-line);
 }
 
+.serverRow>div:not(:last-child){
+  border-right: solid var(--bg-color) 2px;
+}
+
 img {
   object-fit: contain;
   height: 100%
-}</style>
+}
+</style>