MrUnknownDE/VRCX
1
0
Fork 0
mirror of https://github.com/MrUnknownDE/VRCX.git synced 2026-04-21 15:53:50 +02:00
Code Issues Packages Projects Releases Wiki Activity

refactor

Browse Source
This commit is contained in:
pa
2026-03-09 02:49:59 +09:00
parent 64b27ce7f1
commit 90a17bb0ba
39 changed files with 9487 additions and 4384 deletions
Download Patch File Download Diff File Expand all files Collapse all files

131
src/components/dialogs/WorldDialog/WorldDialogInstancesTab.vue Normal file
View File

@@ -0,0 +1,131 @@
<template>
<div>
<div class="flex items-center text-sm">
<User />
{{ t('dialog.world.instances.public_count', { count: worldDialog.ref.publicOccupants }) }}
<User style="margin-left: 8px" />
{{
t('dialog.world.instances.private_count', {
count: worldDialog.ref.privateOccupants
})
}}
<Check style="margin-left: 8px" />
{{
t('dialog.world.instances.capacity_count', {
count: worldDialog.ref.recommendedCapacity,
max: worldDialog.ref.capacity
})
}}
</div>
<div v-for="room in worldDialog.rooms" :key="room.id">
<template v-if="isAgeGatedInstancesVisible || !(room.ageGate || room.location?.includes('~ageGate'))">
<div style="margin: 6px 0">
<div class="flex items-center">
<LocationWorld
class="text-sm"
:locationobject="room.$location"
:currentuserid="currentUser.id"
:worlddialogshortname="worldDialog.$location.shortName" />
<InstanceActionBar
class="ml-1 text-sm"
:location="room.$location.tag"
:launch-location="room.tag"
:instance-location="room.tag"
:shortname="room.$location.shortName"
:currentlocation="lastLocation.location"
:instance="room.ref"
:friendcount="room.friendCount"
:refresh-tooltip="t('dialog.world.instances.refresh_instance_info')"
:show-history="!!instanceJoinHistory.get(room.$location.tag)"
:history-tooltip="t('dialog.previous_instances.info')"
:on-refresh="() => refreshInstancePlayerCount(room.tag)"
:on-history="() => showPreviousInstancesInfoDialog(room.location)" />
</div>
<div
v-if="room.$location.userId || room.users.length"
class="flex flex-wrap items-start"
style="margin: 8px 0; max-height: unset">
<div
v-if="room.$location.userId"
class="box-border flex items-center p-1.5 text-[13px] cursor-pointer w-[167px] hover:rounded-[25px_5px_5px_25px]"
@click="showUserDialog(room.$location.userId)">
<template v-if="room.$location.user">
<div
class="relative inline-block flex-none size-9 mr-2.5"
:class="userStatusClass(room.$location.user)">
<img
class="size-full rounded-full object-cover"
:src="userImage(room.$location.user, true)"
loading="lazy" />
</div>
<div class="flex-1 overflow-hidden">
<span
class="block truncate font-medium leading-[18px]"
:style="{ color: room.$location.user.$userColour }"
v-text="room.$location.user.displayName" />
<span class="block truncate text-xs">
{{ t('dialog.world.instances.instance_creator') }}
</span>
</div>
</template>
<span v-else v-text="room.$location.userId" />
</div>
<div
v-for="user in room.users"
:key="user.id"
class="box-border flex items-center p-1.5 text-[13px] cursor-pointer w-[167px] hover:rounded-[25px_5px_5px_25px]"
@click="showUserDialog(user.id)">
<div class="relative inline-block flex-none size-9 mr-2.5" :class="userStatusClass(user)">
<img
class="size-full rounded-full object-cover"
:src="userImage(user, true)"
loading="lazy" />
</div>
<div class="flex-1 overflow-hidden">
<span
class="block truncate font-medium leading-[18px]"
:style="{ color: user.$userColour }"
v-text="user.displayName" />
<span v-if="user.location === 'traveling'" class="block truncate text-xs">
<Spinner class="inline-block mr-1" />
<Timer :epoch="user.$travelingToTime" />
</span>
<span v-else class="block truncate text-xs">
<Timer :epoch="user.$location_at" />
</span>
</div>
</div>
</div>
</div>
</template>
</div>
</div>
</template>
<script setup>
import { Check, User } from 'lucide-vue-next';
import { Spinner } from '@/components/ui/spinner';
import { storeToRefs } from 'pinia';
import { useI18n } from 'vue-i18n';
import { refreshInstancePlayerCount, userImage, userStatusClass } from '../../../shared/utils';
import {
useAppearanceSettingsStore,
useInstanceStore,
useLocationStore,
useUserStore,
useWorldStore
} from '../../../stores';
import InstanceActionBar from '../../InstanceActionBar.vue';
const { t } = useI18n();
const { isAgeGatedInstancesVisible } = storeToRefs(useAppearanceSettingsStore());
const { showUserDialog } = useUserStore();
const { currentUser } = storeToRefs(useUserStore());
const { worldDialog } = storeToRefs(useWorldStore());
const { lastLocation } = storeToRefs(useLocationStore());
const { showPreviousInstancesInfoDialog } = useInstanceStore();
const { instanceJoinHistory } = storeToRefs(useInstanceStore());
</script>