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;`">
-      <slot v-for="(data, index) in visibleList" :data="data" :index="index"></slot>
+    <div ref="vscroll" class="vscroll">
+      <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 mustScrollDown = Math.min(this.list.length, scrollIndex + (this.visibleCount)) > this.vIndex + (this.visibleCount * 2)
+      const mustScrollUp = scrollIndex < this.vIndex
+      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>