ToneAPI/ToneAPI_webclient
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

work on server list

Browse Source
This commit is contained in:
legonzaur
2023-05-06 11:35:55 +02:00
parent b1a43aa7d4
commit 9bce40819d
4 changed files with 63 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/List/VirtualList.vue
+21 -8
View File
@@ -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
-11
View File
@@ -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
-1
View File
@@ -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
+42 -39
View File
@@ -1,28 +1,26 @@
<template>
<div id="filters">
<div id="filters">
</div>
<VirtualList :list="serverList" :row-height="100" v-slot="slotProps">
<div
:class="'serverRow ' + (!nsServersByName[slotProps.data.name] ? 'offline ' : ' ') + (!nsServersByName[slotProps.data.name]?.playerCount ? 'inactive' : '')">
<div><span>{{ slotProps.index + 1 }}</span></div>
<div><span>{{ slotProps.data.name }}</span></div>
<div><span>{{ slotProps.data._value.kills }}</span></div>
<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>
</VirtualList>
<div>
<VirtualList :list="serverList" :row-height="100" v-slot="slotProps">
<div
:class="'serverRow ' + (!nsServersByName[slotProps.data.name] ? 'offline ' : ' ') + (!nsServersByName[slotProps.data.name]?.playerCount ? 'inactive' : '')">
<div><span>{{ slotProps.index + 1 }}</span></div>
<div><span>{{ slotProps.data.name }}</span></div>
<div><span>{{ slotProps.data._value.kills }}</span></div>
<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>
<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>
</div>
</div>
</template>
<script lang="ts">
@@ -73,40 +71,45 @@ export default defineComponent({
<style scoped>
.inactive {
color: var(--comment);
color: var(--comment);
}
.offline {
color: var(--current-line);
color: var(--current-line);
}
.serverRow,
.serverHeaders {
box-sizing: border-box;
display: grid;
grid-template-columns: 5ch 20ch 6ch 6ch 6ch 10ch 1fr;
background: var(--bg-color);
text-align: left;
cursor: pointer;
margin: 0;
/* border: 2px solid transparent; */
transition: border .25s;
height: 100px;
box-sizing: border-box;
display: grid;
grid-template-columns: 5ch 40ch 7ch 7ch 7ch 7ch 1fr;
background: var(--bg-color);
text-align: left;
cursor: pointer;
margin: 0;
/* border: 2px solid transparent; */
transition: border .25s;
height: 100px;
}
.serverRow:nth-child(2n+1) {
background: var(--accent);
background: var(--accent);
}
.serverRow:nth-child(2n) {
background: var(--bg-color);
background: var(--bg-color);
}
.serverRow:hover {
background: var(--current-line);
background: var(--current-line);
}
.serverRow>div:not(:last-child){
border-right: solid var(--bg-color) 2px;
}
img {
object-fit: contain;
height:100%
}</style>
object-fit: contain;
height: 100%
}
</style>