diff --git a/package-lock.json b/package-lock.json index 82c17861..5df2f418 100644 --- a/package-lock.json +++ b/package-lock.json @@ -43,14 +43,14 @@ "raw-loader": "^4.0.2", "sass": "^1.85.0", "sass-loader": "^16.0.5", - "vue": "^2.6.14", + "vue": "^2.7.16", "vue-data-tables": "^3.4.5", + "vue-demi": "^0.14.10", "vue-i18n": "^8.28.2", "vue-lazyload": "^1.3.4", "vue-loader": "^15.11.1", "vue-markdown": "^2.2.4", "vue-marquee-text-component": "^1.2.0", - "vue-template-compiler": "^2.6.14", "webpack": "^5.98.0", "webpack-cli": "^6.0.1", "worker-timers": "^8.0.15", @@ -2188,6 +2188,37 @@ "@types/node": "*" } }, + "node_modules/@vue/compiler-sfc": { + "version": "2.7.16", + "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-2.7.16.tgz", + "integrity": "sha512-KWhJ9k5nXuNtygPU7+t1rX6baZeqOYLEforUPjgNDBnLicfHCoi48H87Q8XyLZOrNNsmhuwKqtpDQWjEFe6Ekg==", + "dev": true, + "dependencies": { + "@babel/parser": "^7.23.5", + "postcss": "^8.4.14", + "source-map": "^0.6.1" + }, + "optionalDependencies": { + "prettier": "^1.18.2 || ^2.0.0" + } + }, + "node_modules/@vue/compiler-sfc/node_modules/prettier": { + "version": "2.8.8", + "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.8.tgz", + "integrity": "sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==", + "dev": true, + "license": "MIT", + "optional": true, + "bin": { + "prettier": "bin-prettier.js" + }, + "engines": { + "node": ">=10.13.0" + }, + "funding": { + "url": "https://github.com/prettier/prettier?sponsor=1" + } + }, "node_modules/@vue/component-compiler-utils": { "version": "3.3.0", "resolved": "https://registry.npmjs.org/@vue/component-compiler-utils/-/component-compiler-utils-3.3.0.tgz", @@ -4033,6 +4064,13 @@ "node": ">=4" } }, + "node_modules/csstype": { + "version": "3.1.3", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz", + "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==", + "dev": true, + "license": "MIT" + }, "node_modules/dayjs": { "version": "1.11.13", "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.13.tgz", @@ -4040,13 +4078,6 @@ "dev": true, "license": "MIT" }, - "node_modules/de-indent": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/de-indent/-/de-indent-1.0.2.tgz", - "integrity": "sha512-e/1zu3xH5MQryN2zdVaF0OrdNLUbvWxzMbi+iNA6Bky7l1RoP8a2fIbRocyHclXt/arDrrR6lL3TqFD9pMQTsg==", - "dev": true, - "license": "MIT" - }, "node_modules/debug": { "version": "4.3.7", "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.7.tgz", @@ -9643,11 +9674,16 @@ } }, "node_modules/vue": { - "version": "2.6.14", - "resolved": "https://registry.npmjs.org/vue/-/vue-2.6.14.tgz", - "integrity": "sha512-x2284lgYvjOMj3Za7kqzRcUSxBboHqtgRE2zlos1qWaOye5yUmHn42LB1250NJBLRwEcdrB0JRwyPTEPhfQjiQ==", + "version": "2.7.16", + "resolved": "https://registry.npmjs.org/vue/-/vue-2.7.16.tgz", + "integrity": "sha512-4gCtFXaAA3zYZdTp5s4Hl2sozuySsgz4jy1EnpBHNfpMa9dK1ZCG7viqBPCwXtmgc8nHqUsAu3G4gtmXkkY3Sw==", "deprecated": "Vue 2 has reached EOL and is no longer actively maintained. See https://v2.vuejs.org/eol/ for more details.", - "dev": true + "dev": true, + "license": "MIT", + "dependencies": { + "@vue/compiler-sfc": "2.7.16", + "csstype": "^3.1.0" + } }, "node_modules/vue-data-tables": { "version": "3.4.5", @@ -9664,6 +9700,33 @@ "npm": ">= 3.0.0" } }, + "node_modules/vue-demi": { + "version": "0.14.10", + "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.10.tgz", + "integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==", + "dev": true, + "hasInstallScript": true, + "license": "MIT", + "bin": { + "vue-demi-fix": "bin/vue-demi-fix.js", + "vue-demi-switch": "bin/vue-demi-switch.js" + }, + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/sponsors/antfu" + }, + "peerDependencies": { + "@vue/composition-api": "^1.0.0-rc.1", + "vue": "^3.0.0-0 || ^2.6.0" + }, + "peerDependenciesMeta": { + "@vue/composition-api": { + "optional": true + } + } + }, "node_modules/vue-eslint-parser": { "version": "9.4.3", "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-9.4.3.tgz", @@ -9861,17 +9924,6 @@ "loader-utils": "^1.0.2" } }, - "node_modules/vue-template-compiler": { - "version": "2.6.14", - "resolved": "https://registry.npmjs.org/vue-template-compiler/-/vue-template-compiler-2.6.14.tgz", - "integrity": "sha512-ODQS1SyMbjKoO1JBJZojSw6FE4qnh9rIpUZn2EUT86FKizx9uH5z6uXiIrm4/Nb/gwxTi/o17ZDEGWAXHvtC7g==", - "dev": true, - "license": "MIT", - "dependencies": { - "de-indent": "^1.0.2", - "he": "^1.1.0" - } - }, "node_modules/vue-template-es2015-compiler": { "version": "1.9.1", "resolved": "https://registry.npmjs.org/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.9.1.tgz", diff --git a/package.json b/package.json index a88a223f..022b4013 100644 --- a/package.json +++ b/package.json @@ -59,14 +59,14 @@ "raw-loader": "^4.0.2", "sass": "^1.85.0", "sass-loader": "^16.0.5", - "vue": "^2.6.14", + "vue": "^2.7.16", "vue-data-tables": "^3.4.5", + "vue-demi": "^0.14.10", "vue-i18n": "^8.28.2", "vue-lazyload": "^1.3.4", "vue-loader": "^15.11.1", "vue-markdown": "^2.2.4", "vue-marquee-text-component": "^1.2.0", - "vue-template-compiler": "^2.6.14", "webpack": "^5.98.0", "webpack-cli": "^6.0.1", "worker-timers": "^8.0.15", diff --git a/src/app.js b/src/app.js index 2803f483..8162ced0 100644 --- a/src/app.js +++ b/src/app.js @@ -67,6 +67,8 @@ import _groups from './classes/groups.js'; import _vrcRegistry from './classes/vrcRegistry.js'; import _restoreFriendOrder from './classes/restoreFriendOrder.js'; +import pugTemplate from './app.pug'; + // API classes import _config from './classes/API/config.js'; @@ -152,6 +154,7 @@ console.log(`isLinux: ${LINUX}`); await configRepository.init(); const app = { + template: pugTemplate, data: { API, isGameRunning: false, @@ -198,7 +201,10 @@ console.log(`isLinux: ${LINUX}`); userStatusClass: this.userStatusClass }; }, - el: '#x-app', + el: '#root', + beforeMount() { + this.changeThemeMode(); + }, async mounted() { await this.initLanguage(); try { @@ -206,7 +212,6 @@ console.log(`isLinux: ${LINUX}`); } catch (err) { console.error(err); } - await this.changeThemeMode(); await AppApi.SetUserAgent(); this.appVersion = await AppApi.GetVersion(); await this.compareAppVersion(); diff --git a/src/app.pug b/src/app.pug new file mode 100644 index 00000000..06d4054b --- /dev/null +++ b/src/app.pug @@ -0,0 +1,155 @@ +doctype html +#x-app.x-app(@dragenter.prevent @dragover.prevent @drop.prevent) + //- login + include ./mixins/loginPage.pug + +loginPage + + //- menu + .x-menu-container + //- download progress, update pending + .pending-update(v-if='updateInProgress' @click='showVRCXUpdateDialog') + el-progress( + type='circle' + width='50' + stroke-width='3' + :percentage='updateProgress' + :format='updateProgressText') + .pending-update(v-else-if='pendingVRCXUpdate || pendingVRCXInstall') + el-button( + type='default' + @click='showVRCXUpdateDialog' + size='mini' + icon='el-icon-download' + circle + style='font-size: 14px; height: 50px; width: 50px') + + nav-menu(ref='menu' @select='selectMenu' :menu-active-index='menuActiveIndex') + + //- ### Tabs ### + template(v-if='API.isLoggedIn') + //- feed + include ./mixins/tabs/feed.pug + +feedTab + + //- gameLog + include ./mixins/tabs/gameLog.pug + +gameLogTab + + //- playerList + include ./mixins/tabs/playerList.pug + +playerListTab + + //- search + include ./mixins/tabs/search.pug + +searchTab + + //- favorite + include ./mixins/tabs/favorites.pug + +favoritesTab + + //- friendLog + include ./mixins/tabs/friendLog.pug + +friendLogTab + + //- moderation + moderation-tab( + v-if='menuActiveIndex === "moderation"' + :table-data='playerModerationTable' + :shift-held='shiftHeld' + :hide-tooltips='hideTooltips') + + //- notification + include ./mixins/tabs/notifications.pug + +notificationsTab + + //- profile + include ./mixins/tabs/profile.pug + +profileTab + + //- friends list + include ./mixins/tabs/friendsList.pug + +friendsListTab + + //- charts + keep-alive + charts-tab( + v-if='menuActiveIndex === "charts"' + :get-world-name='getWorldName' + :is-dark-mode='isDarkMode' + :dt-hour12='dtHour12' + :friends-map='friends' + :local-favorite-friends='localFavoriteFriends' + @open-previous-instance-info-dialog='showPreviousInstanceInfoDialog') + + //- settings + include ./mixins/tabs/settings.pug + +settingsTab + + side-bar( + v-show='isSideBarTabShow' + v-bind='sideBarTabProps' + @show-group-dialog='showGroupDialog' + @quick-search-change='quickSearchChange' + @direct-access-paste='directAccessPaste' + @refresh-friends-list='refreshFriendsList' + @confirm-delete-friend='confirmDeleteFriend') + + //- ## Dialogs ## -\\ + include ./mixins/dialogs/userDialog.pug + +userDialog + + include ./mixins/dialogs/worldDialog.pug + +worldDialog + + include ./mixins/dialogs/avatarDialog.pug + +avatarDialog + + include ./mixins/dialogs/groupDialog.pug + +groupDialog + + include ./mixins/dialogs/favoritesDialog.pug + +favoritesDialog + + include ./mixins/dialogs/images.pug + +images + + include ./mixins/dialogs/newInstance.pug + +newInstance + + include ./mixins/dialogs/feedFilters.pug + +feedFilters + + include ./mixins/dialogs/openSourceSoftwareNotice.pug + +openSourceSoftwareNotice + + include ./mixins/dialogs/groups.pug + +groups + + include ./mixins/dialogs/currentUser.pug + +currentUser + + include ./mixins/dialogs/invites.pug + +invites + + include ./mixins/dialogs/launch.pug + +launch + + include ./mixins/dialogs/screenshotMetadata.pug + +screenshotMetadata + + include ./mixins/dialogs/vrcx.pug + +vrcx + + include ./mixins/dialogs/settings.pug + +settings + + include ./mixins/dialogs/previousInstances.pug + +previousInstances + + include ./mixins/dialogs/tags.pug + +tags + + include ./mixins/dialogs/boops.pug + +boops + + //- el-dialog.x-dialog(:before-close="beforeDialogClose" @mousedown.native="dialogMouseDown" @mouseup.native="dialogMouseUp" ref="templateDialog" :visible.sync="templateDialog.visible" :title="$t('dialog.template_dialog.header')" width="450px") diff --git a/src/index.pug b/src/index.pug deleted file mode 100644 index e2559c8c..00000000 --- a/src/index.pug +++ /dev/null @@ -1,171 +0,0 @@ -doctype html -html - head - meta(http-equiv='Content-Type' content='text/html;charset=utf-8') - meta(http-equiv='Cache-Control' content='no-cache') - meta(http-equiv='referrer' content='no-referrer') - meta(http-equiv='viewport' content='width=device-width,initial-scale=1,user-scalable=no') - title VRCX - link(rel='preconnect' href='https://api.vrchat.cloud') - link(rel='preconnect' href='https://d348imysud55la.cloudfront.net') - link(rel='stylesheet' href='app.css') - link(rel='stylesheet' href='flags.css') - link(rel='stylesheet' href='animated-emoji.css') - body - #x-app.x-app(style='display: none' @dragenter.prevent @dragover.prevent @drop.prevent) - //- login - include ./mixins/loginPage.pug - +loginPage - - //- menu - .x-menu-container - //- download progress, update pending - .pending-update(v-if='updateInProgress' @click='showVRCXUpdateDialog') - el-progress( - type='circle' - width='50' - stroke-width='3' - :percentage='updateProgress' - :format='updateProgressText') - .pending-update(v-else-if='pendingVRCXUpdate || pendingVRCXInstall') - el-button( - type='default' - @click='showVRCXUpdateDialog' - size='mini' - icon='el-icon-download' - circle - style='font-size: 14px; height: 50px; width: 50px') - - nav-menu(ref='menu' @select='selectMenu' :menu-active-index='menuActiveIndex') - - //- ### Tabs ### - template(v-if='API.isLoggedIn') - //- feed - include ./mixins/tabs/feed.pug - +feedTab - - //- gameLog - include ./mixins/tabs/gameLog.pug - +gameLogTab - - //- playerList - include ./mixins/tabs/playerList.pug - +playerListTab - - //- search - include ./mixins/tabs/search.pug - +searchTab - - //- favorite - include ./mixins/tabs/favorites.pug - +favoritesTab - - //- friendLog - include ./mixins/tabs/friendLog.pug - +friendLogTab - - //- moderation - moderation-tab( - v-if='menuActiveIndex === "moderation"' - :table-data='playerModerationTable' - :shift-held='shiftHeld' - :hide-tooltips='hideTooltips') - - //- notification - include ./mixins/tabs/notifications.pug - +notificationsTab - - //- profile - include ./mixins/tabs/profile.pug - +profileTab - - //- friends list - include ./mixins/tabs/friendsList.pug - +friendsListTab - - //- charts - keep-alive - charts-tab( - v-if='menuActiveIndex === "charts"' - :get-world-name='getWorldName' - :is-dark-mode='isDarkMode' - :dt-hour12='dtHour12' - :friends-map='friends' - :local-favorite-friends='localFavoriteFriends' - @open-previous-instance-info-dialog='showPreviousInstanceInfoDialog') - - //- settings - include ./mixins/tabs/settings.pug - +settingsTab - - side-bar( - v-show='isSideBarTabShow' - v-bind='sideBarTabProps' - @show-group-dialog='showGroupDialog' - @quick-search-change='quickSearchChange' - @direct-access-paste='directAccessPaste' - @refresh-friends-list='refreshFriendsList' - @confirm-delete-friend='confirmDeleteFriend') - - //- ## Dialogs ## -\\ - include ./mixins/dialogs/userDialog.pug - +userDialog - - include ./mixins/dialogs/worldDialog.pug - +worldDialog - - include ./mixins/dialogs/avatarDialog.pug - +avatarDialog - - include ./mixins/dialogs/groupDialog.pug - +groupDialog - - include ./mixins/dialogs/favoritesDialog.pug - +favoritesDialog - - include ./mixins/dialogs/images.pug - +images - - include ./mixins/dialogs/newInstance.pug - +newInstance - - include ./mixins/dialogs/feedFilters.pug - +feedFilters - - include ./mixins/dialogs/openSourceSoftwareNotice.pug - +openSourceSoftwareNotice - - include ./mixins/dialogs/groups.pug - +groups - - include ./mixins/dialogs/currentUser.pug - +currentUser - - include ./mixins/dialogs/invites.pug - +invites - - include ./mixins/dialogs/launch.pug - +launch - - include ./mixins/dialogs/screenshotMetadata.pug - +screenshotMetadata - - include ./mixins/dialogs/vrcx.pug - +vrcx - - include ./mixins/dialogs/settings.pug - +settings - - include ./mixins/dialogs/previousInstances.pug - +previousInstances - - include ./mixins/dialogs/tags.pug - +tags - - include ./mixins/dialogs/boops.pug - +boops - - //- el-dialog.x-dialog(:before-close="beforeDialogClose" @mousedown.native="dialogMouseDown" @mouseup.native="dialogMouseUp" ref="templateDialog" :visible.sync="templateDialog.visible" :title="$t('dialog.template_dialog.header')" width="450px") - - script(src='vendor.js') - script(src='app.js') diff --git a/src/static/index.html b/src/static/index.html new file mode 100644 index 00000000..ae186233 --- /dev/null +++ b/src/static/index.html @@ -0,0 +1,23 @@ + + + + + + + + VRCX + + + + + + + +
+ + + + diff --git a/src/static/vr.html b/src/static/vr.html new file mode 100644 index 00000000..5bdc580e --- /dev/null +++ b/src/static/vr.html @@ -0,0 +1,20 @@ + + + + + + + + VRCXVR + + + + +
+ + + + diff --git a/src/vr.js b/src/vr.js index cd87f80a..86ac84a7 100644 --- a/src/vr.js +++ b/src/vr.js @@ -19,6 +19,8 @@ import * as localizedStrings from './localization/localizedStrings.js'; import $utils from './classes/utils.js'; +import pugTemplate from './vr.pug'; + Vue.component('marquee-text', MarqueeText); (async function () { @@ -124,6 +126,7 @@ Vue.component('marquee-text', MarqueeText); }); const app = { + template: pugTemplate, i18n, data: { // 1 = 대시보드랑 손목에 보이는거 @@ -169,7 +172,7 @@ Vue.component('marquee-text', MarqueeText); ...$utils }, watch: {}, - el: '#x-app', + el: '#root', async mounted() { this.isRunningUnderWine = await AppApiVr.IsRunningUnderWine(); await this.applyWineEmojis(); diff --git a/src/vr.pug b/src/vr.pug index 979d5ac8..01a6b0fc 100644 --- a/src/vr.pug +++ b/src/vr.pug @@ -1,805 +1,781 @@ doctype html -html - head - meta(http-equiv='Content-Type' content='text/html;charset=utf-8') - meta(http-equiv='Cache-Control' content='no-cache') - meta(http-equiv='referrer' content='no-referrer') - meta(http-equiv='viewport' content='width=device-width,initial-scale=1,user-scalable=no') - title VRCXVR - link(rel='stylesheet' href='vr.css') - link(rel='stylesheet' href='flags.css') - body - #x-app.x-app.x-app-type(:class='{ background: appType === "1" && config && config.backgroundEnabled }') - template(v-if='appType === "1"') - .x-container(style='flex: 1') - .x-friend-list(ref='list' style='color: #aaa') - template(v-if='config && config.minimalFeed') - template(v-for='feed in wristFeed') - .x-friend-item( - v-if='feed.type === "GPS"' - :class='{ friend: feed.isFriend, favorite: feed.isFavorite }') - .detail - span.extra - span.time {{ feed.created_at | formatDate }} - i.el-icon-loading(v-if='feed.isTraveling' style='margin-right: 5px') - | #[span.name(v-text='feed.displayName')] #[location(:location='feed.location' :hint='feed.worldName' :grouphint='feed.groupName')] - .x-friend-item( - v-else-if='feed.type === "Offline"' - :class='{ friend: feed.isFriend, favorite: feed.isFavorite }') - .detail - span.extra - span.time {{ feed.created_at | formatDate }} - | #[span.name(v-text='feed.displayName')] ✖️ - .x-friend-item( - v-else-if='feed.type === "Online"' - :class='{ friend: feed.isFriend, favorite: feed.isFavorite }') - .detail - span.extra - span.time {{ feed.created_at | formatDate }} - | #[span.name(v-text='feed.displayName')] ✔ - template(v-if='feed.worldName') - |#[location(:location='feed.location' :hint='feed.worldName' :grouphint='feed.groupName' style='margin-left: 5px')] - .x-friend-item( - v-else-if='feed.type === "Status"' - :class='{ friend: feed.isFriend, favorite: feed.isFavorite }') - .detail - span.extra - span.time {{ feed.created_at | formatDate }} - | #[span.name(v-text='feed.displayName' style='margin-right: 5px')] - template(v-if='feed.statusDescription === feed.previousStatusDescription') - i.x-user-status(:class='statusClass(feed.previousStatus)') - i.el-icon-right - i.x-user-status(:class='statusClass(feed.status)') - template(v-else) - |#[i.x-user-status(:class='statusClass(feed.status)')] {{ feed.statusDescription }} - .x-friend-item( - v-else-if='feed.type === "OnPlayerJoined"' - :class='{ friend: feed.isFriend, favorite: feed.isFavorite }') - .detail - span.extra - span.time {{ feed.created_at | formatDate }} - | ▶️ #[span.name(v-text='feed.displayName' :style='{ color: feed.tagColour }')] - .x-friend-item( - v-else-if='feed.type === "OnPlayerLeft"' - :class='{ friend: feed.isFriend, favorite: feed.isFavorite }') - .detail - span.extra - span.time {{ feed.created_at | formatDate }} - | ◀️ #[span.name(v-text='feed.displayName' :style='{ color: feed.tagColour }')] - .x-friend-item( - v-else-if='feed.type === "OnPlayerJoining"' - :class='{ friend: feed.isFriend, favorite: feed.isFavorite }') - .detail - span.extra - span.time {{ feed.created_at | formatDate }} - span.spin ▶️ - span.name(v-text='feed.displayName' style='margin-left: 30px') - .x-friend-item( - v-else-if='feed.type === "Location"' - :class='{ friend: feed.isFriend, favorite: feed.isFavorite }') - .detail - span.extra - span.time {{ feed.created_at | formatDate }} - location( - :location='feed.location' - :hint='feed.worldName' - :grouphint='feed.groupName') - .x-friend-item( - v-else-if='feed.type === "VideoPlay"' - :class='{ friend: feed.isFriend, favorite: feed.isFavorite }') - .detail - span.extra - span.time {{ feed.created_at | formatDate }} - | 🎵 #[span.name(v-if='feed.displayName' v-text='feed.displayName' style='margin-right: 5px' :style='{ color: feed.tagColour }')] - template(v-if='feed.videoName') - |#[span(v-text='feed.videoName')] - template(v-else) - |#[span(v-text='feed.videoUrl')] - .x-friend-item( - v-else-if='feed.type === "invite"' - :class='{ friend: feed.isFriend, favorite: feed.isFavorite }') - .detail - span.extra - span.time {{ feed.created_at | formatDate }} - | 📨 #[span.name(v-text='feed.senderUsername')] #[location(:location='feed.details.worldId' :hint='feed.details.worldName')] #[span(v-text='feed.details.inviteMessage')] - .x-friend-item( - v-else-if='feed.type === "requestInvite"' - :class='{ friend: feed.isFriend, favorite: feed.isFavorite }') - .detail - span.extra - span.time {{ feed.created_at | formatDate }} - | 📩 #[span.name(v-text='feed.senderUsername')] #[span(v-text='feed.details.requestMessage')] - .x-friend-item( - v-else-if='feed.type === "inviteResponse"' - :class='{ friend: feed.isFriend, favorite: feed.isFavorite }') - .detail - span.extra - span.time {{ feed.created_at | formatDate }} - | 💬 #[span.name(v-text='feed.senderUsername')] #[span(v-text='feed.details.responseMessage')] - .x-friend-item( - v-else-if='feed.type === "requestInviteResponse"' - :class='{ friend: feed.isFriend, favorite: feed.isFavorite }') - .detail - span.extra - span.time {{ feed.created_at | formatDate }} - | 💬 #[span.name(v-text='feed.senderUsername')] #[span(v-text='feed.details.responseMessage')] - .x-friend-item( - v-else-if='feed.type === "friendRequest"' - :class='{ friend: feed.isFriend, favorite: feed.isFavorite }') - .detail - span.extra - span.time {{ feed.created_at | formatDate }} - | 💚 #[span.name(v-text='feed.senderUsername')] - .x-friend-item( - v-else-if='feed.type === "Friend"' - :class='{ friend: feed.isFriend, favorite: feed.isFavorite }') - .detail - span.extra - span.time {{ feed.created_at | formatDate }} - | 💖 #[span.name(v-text='feed.displayName')] - .x-friend-item( - v-else-if='feed.type === "Unfriend"' - :class='{ friend: feed.isFriend, favorite: feed.isFavorite }') - .detail - span.extra - span.time {{ feed.created_at | formatDate }} - | 💔 #[span.name(v-text='feed.displayName')] - .x-friend-item( - v-else-if='feed.type === "DisplayName"' - :class='{ friend: feed.isFriend, favorite: feed.isFavorite }') - .detail - span.extra - span.time {{ feed.created_at | formatDate }} - | 📃 #[span.name(v-text='feed.previousDisplayName')] #[i.el-icon-right] #[span.name(v-text='feed.displayName')] - .x-friend-item( - v-else-if='feed.type === "TrustLevel"' - :class='{ friend: feed.isFriend, favorite: feed.isFavorite }') - .detail - span.extra - span.time {{ feed.created_at | formatDate }} - | 🤝 #[span.name(v-text='feed.displayName')] {{ feed.previousTrustLevel }} #[i.el-icon-right] {{ feed.trustLevel }} - .x-friend-item( - v-else-if='feed.type === "boop"' - :class='{ friend: feed.isFriend, favorite: feed.isFavorite }') - .detail - span.extra - span.time {{ feed.created_at | formatDate }} - | 👉 #[span.name(v-text='feed.senderUsername')] #[span(v-text='feed.message')] - .x-friend-item( - v-else-if='feed.type === "groupChange"' - :class='{ friend: feed.isFriend, favorite: feed.isFavorite }') - .detail - span.extra - span.time {{ feed.created_at | formatDate }} - | 🏷️ #[span.name(v-text='feed.senderUsername')] #[span(v-text='feed.message')] - .x-friend-item( - v-else-if='feed.type === "group.announcement"' - :class='{ friend: feed.isFriend, favorite: feed.isFavorite }') - .detail - span.extra - span.time {{ feed.created_at | formatDate }} - | 🏷️ #[span.name(v-text='feed.message')] - .x-friend-item( - v-else-if='feed.type === "group.informative"' - :class='{ friend: feed.isFriend, favorite: feed.isFavorite }') - .detail - span.extra - span.time {{ feed.created_at | formatDate }} - | 🏷️ #[span.name(v-text='feed.message')] - .x-friend-item( - v-else-if='feed.type === "group.invite"' - :class='{ friend: feed.isFriend, favorite: feed.isFavorite }') - .detail - span.extra - span.time {{ feed.created_at | formatDate }} - | 🏷️ #[span.name(v-text='feed.message')] - .x-friend-item( - v-else-if='feed.type === "group.joinRequest"' - :class='{ friend: feed.isFriend, favorite: feed.isFavorite }') - .detail - span.extra - span.time {{ feed.created_at | formatDate }} - | 🏷️ #[span.name(v-text='feed.message')] - .x-friend-item( - v-else-if='feed.type === "group.transfer"' - :class='{ friend: feed.isFriend, favorite: feed.isFavorite }') - .detail - span.extra - span.time {{ feed.created_at | formatDate }} - | 🏷️ #[span.name(v-text='feed.message')] - .x-friend-item( - v-else-if='feed.type === "group.queueReady"' - :class='{ friend: feed.isFriend, favorite: feed.isFavorite }') - .detail - span.extra - span.time {{ feed.created_at | formatDate }} - | 📨 #[span.name(v-text='feed.message')] - .x-friend-item( - v-else-if='feed.type === "instance.closed"' - :class='{ friend: feed.isFriend, favorite: feed.isFavorite }') - .detail - span.extra - span.time {{ feed.created_at | formatDate }} - | 📫 #[span.name(v-text='feed.message')] - .x-friend-item( - v-else-if='feed.type === "PortalSpawn"' - :class='{ friend: feed.isFriend, favorite: feed.isFavorite }') - .detail - span.extra - span.time {{ feed.created_at | formatDate }} - template(v-if='feed.displayName') - | ✨ #[span.name(v-text='feed.displayName' style='margin-right: 5px' :style='{ color: feed.tagColour }')] - | #[location(:location='feed.instanceId' :hint='feed.worldName' :grouphint='feed.groupName')] - template(v-else) - | ✨ User has spawned a portal - .x-friend-item( - v-else-if='feed.type === "AvatarChange"' - :class='{ friend: feed.isFriend, favorite: feed.isFavorite }') - .detail - span.extra - span.time {{ feed.created_at | formatDate }} - | 🧍 #[span.name(v-text='feed.displayName' style='margin-right: 5px' :style='{ color: feed.tagColour }')] - template(v-if='feed.releaseStatus === "public"') - |#[i.x-user-status.online]  - template(v-else-if='feed.releaseStatus === "private"') - |#[i.x-user-status.askme]  - | {{ feed.name }} - template(v-if='feed.description && feed.description !== feed.name') - | - | - {{ feed.description }} - .x-friend-item( - v-else-if='feed.type === "ChatBoxMessage"' - :class='{ friend: feed.isFriend, favorite: feed.isFavorite }') - .detail - span.extra - span.time {{ feed.created_at | formatDate }} - | 💬 #[span.name(v-text='feed.displayName' :style='{ color: feed.tagColour }')] #[span(v-text='feed.text')] - .x-friend-item(v-else-if='feed.type === "Event"') - .detail - span.extra - span.time {{ feed.created_at | formatDate }} - | 🛑 #[span.name(v-text='feed.data')] - .x-friend-item(v-else-if='feed.type === "External"') - .detail - span.extra - span.time {{ feed.created_at | formatDate }} - | 🟠 #[span.name(v-text='feed.displayName' :style='{ color: feed.tagColour }')] #[span.name(v-text='feed.message')] - .x-friend-item( - v-else-if='feed.type === "BlockedOnPlayerJoined"' - :class='{ friend: feed.isFriend, favorite: feed.isFavorite }') - .detail - span.extra - span.time {{ feed.created_at | formatDate }} - | ▶️ 🚫 #[span.name(v-text='feed.displayName')] - .x-friend-item( - v-else-if='feed.type === "BlockedOnPlayerLeft"' - :class='{ friend: feed.isFriend, favorite: feed.isFavorite }') - .detail - span.extra - span.time {{ feed.created_at | formatDate }} - | ◀️ 🚫 #[span.name(v-text='feed.displayName')] - .x-friend-item( - v-else-if='feed.type === "MutedOnPlayerJoined"' - :class='{ friend: feed.isFriend, favorite: feed.isFavorite }') - .detail - span.extra - span.time {{ feed.created_at | formatDate }} - | ▶️ 🔇 #[span.name(v-text='feed.displayName')] - .x-friend-item( - v-else-if='feed.type === "MutedOnPlayerLeft"' - :class='{ friend: feed.isFriend, favorite: feed.isFavorite }') - .detail - span.extra - span.time {{ feed.created_at | formatDate }} - | ◀️ 🔇 #[span.name(v-text='feed.displayName')] - .x-friend-item( - v-else-if='feed.type === "Blocked"' - :class='{ friend: feed.isFriend, favorite: feed.isFavorite }') - .detail - span.extra - span.time {{ feed.created_at | formatDate }} - | 🚫 #[span.name(v-text='feed.displayName' :style='{ color: feed.tagColour }')] - .x-friend-item( - v-else-if='feed.type === "Unblocked"' - :class='{ friend: feed.isFriend, favorite: feed.isFavorite }') - .detail - span.extra - span.time {{ feed.created_at | formatDate }} - | ⭕ #[span.name(v-text='feed.displayName' :style='{ color: feed.tagColour }')] - .x-friend-item( - v-else-if='feed.type === "Muted"' - :class='{ friend: feed.isFriend, favorite: feed.isFavorite }') - .detail - span.extra - span.time {{ feed.created_at | formatDate }} - | 🔇 #[span.name(v-text='feed.displayName' :style='{ color: feed.tagColour }')] - .x-friend-item( - v-else-if='feed.type === "Unmuted"' - :class='{ friend: feed.isFriend, favorite: feed.isFavorite }') - .detail - span.extra - span.time {{ feed.created_at | formatDate }} - | 🎤 #[span.name(v-text='feed.displayName' :style='{ color: feed.tagColour }')] - template(v-else) - template(v-for='feed in wristFeed') - .x-friend-item( - v-if='feed.type === "GPS"' - :class='{ friend: feed.isFriend, favorite: feed.isFavorite }') - .detail - span.extra - span.time {{ feed.created_at | formatDate }} - template(v-if='feed.isTraveling') - |#[span.name(v-text='feed.displayName')] is traveling to #[location(:location='feed.location' :hint='feed.worldName' :grouphint='feed.groupName')] - template(v-else) - |#[span.name(v-text='feed.displayName')] is in #[location(:location='feed.location' :hint='feed.worldName' :grouphint='feed.groupName')] - .x-friend-item( - v-else-if='feed.type === "Offline"' - :class='{ friend: feed.isFriend, favorite: feed.isFavorite }') - .detail - span.extra - span.time {{ feed.created_at | formatDate }} - | #[span.name(v-text='feed.displayName')] has logged out - .x-friend-item( - v-else-if='feed.type === "Online"' - :class='{ friend: feed.isFriend, favorite: feed.isFavorite }') - .detail - span.extra - span.time {{ feed.created_at | formatDate }} - | #[span.name(v-text='feed.displayName')] - span(style='margin-left: 5px; margin-right: 5px') has logged in - template(v-if='feed.worldName') - | to #[location(:location='feed.location' :hint='feed.worldName' :grouphint='feed.groupName')] - .x-friend-item( - v-else-if='feed.type === "Status"' - :class='{ friend: feed.isFriend, favorite: feed.isFavorite }') - .detail - span.extra - span.time {{ feed.created_at | formatDate }} - | #[span.name(v-text='feed.displayName' style='margin-right: 5px')] - template(v-if='feed.statusDescription === feed.previousStatusDescription') - i.x-user-status(:class='statusClass(feed.previousStatus)') - i.el-icon-right - i.x-user-status(:class='statusClass(feed.status)') - template(v-else) - |#[i.x-user-status(:class='statusClass(feed.status)')] {{ feed.statusDescription }} - .x-friend-item( - v-else-if='feed.type === "OnPlayerJoined"' - :class='{ friend: feed.isFriend, favorite: feed.isFavorite }') - .detail - span.extra - span.time {{ feed.created_at | formatDate }} - | #[span.name(v-text='feed.displayName' :style='{ color: feed.tagColour }')] has joined - .x-friend-item( - v-else-if='feed.type === "OnPlayerLeft"' - :class='{ friend: feed.isFriend, favorite: feed.isFavorite }') - .detail - span.extra - span.time {{ feed.created_at | formatDate }} - | #[span.name(v-text='feed.displayName' :style='{ color: feed.tagColour }')] has left - .x-friend-item( - v-else-if='feed.type === "OnPlayerJoining"' - :class='{ friend: feed.isFriend, favorite: feed.isFavorite }') - .detail - span.extra - span.time {{ feed.created_at | formatDate }} - | #[span.name(v-text='feed.displayName')] is joining - .x-friend-item( - v-else-if='feed.type === "Location"' - :class='{ friend: feed.isFriend, favorite: feed.isFavorite }') - .detail - span.extra - span.time {{ feed.created_at | formatDate }} - location( - :location='feed.location' - :hint='feed.worldName' - :grouphint='feed.groupName') - .x-friend-item( - v-else-if='feed.type === "VideoPlay"' - :class='{ friend: feed.isFriend, favorite: feed.isFavorite }') - .detail - span.extra - span.time {{ feed.created_at | formatDate }} - | #[span.name(v-text='feed.displayName' :style='{ color: feed.tagColour }')] - span(style='margin-left: 5px; margin-right: 5px') changed video to - template(v-if='feed.videoName') - |#[span(v-text='feed.videoName')] - template(v-else) - |#[span(v-text='feed.videoUrl')] - .x-friend-item( - v-else-if='feed.type === "invite"' - :class='{ friend: feed.isFriend, favorite: feed.isFavorite }') - .detail - span.extra - span.time {{ feed.created_at | formatDate }} - | #[span.name(v-text='feed.senderUsername')] has invited you to #[location(:location='feed.details.worldId' :hint='feed.details.worldName')] #[span(v-text='feed.details.inviteMessage')] - .x-friend-item( - v-else-if='feed.type === "requestInvite"' - :class='{ friend: feed.isFriend, favorite: feed.isFavorite }') - .detail - span.extra - span.time {{ feed.created_at | formatDate }} - | #[span.name(v-text='feed.senderUsername')] has requested an invite #[span(v-text='feed.details.requestMessage')] - .x-friend-item( - v-else-if='feed.type === "inviteResponse"' - :class='{ friend: feed.isFriend, favorite: feed.isFavorite }') - .detail - span.extra - span.time {{ feed.created_at | formatDate }} - | #[span.name(v-text='feed.senderUsername')] has responded to your invite #[span(v-text='feed.details.responseMessage')] - .x-friend-item( - v-else-if='feed.type === "requestInviteResponse"' - :class='{ friend: feed.isFriend, favorite: feed.isFavorite }') - .detail - span.extra - span.time {{ feed.created_at | formatDate }} - | #[span.name(v-text='feed.senderUsername')] has responded to your invite request #[span(v-text='feed.details.responseMessage')] - .x-friend-item( - v-else-if='feed.type === "friendRequest"' - :class='{ friend: feed.isFriend, favorite: feed.isFavorite }') - .detail - span.extra - span.time {{ feed.created_at | formatDate }} - | #[span.name(v-text='feed.senderUsername')] has sent you a friend request - .x-friend-item( - v-else-if='feed.type === "Friend"' - :class='{ friend: feed.isFriend, favorite: feed.isFavorite }') - .detail - span.extra - span.time {{ feed.created_at | formatDate }} - | #[span.name(v-text='feed.displayName')] is now your friend - .x-friend-item( - v-else-if='feed.type === "Unfriend"' - :class='{ friend: feed.isFriend, favorite: feed.isFavorite }') - .detail - span.extra - span.time {{ feed.created_at | formatDate }} - | #[span.name(v-text='feed.displayName')] is no longer your friend - .x-friend-item( - v-else-if='feed.type === "DisplayName"' - :class='{ friend: feed.isFriend, favorite: feed.isFavorite }') - .detail - span.extra - span.time {{ feed.created_at | formatDate }} - | #[span.name(v-text='feed.previousDisplayName')] changed their name to #[span.name(v-text='feed.displayName')] - .x-friend-item( - v-else-if='feed.type === "TrustLevel"' - :class='{ friend: feed.isFriend, favorite: feed.isFavorite }') - .detail - span.extra - span.time {{ feed.created_at | formatDate }} - | #[span.name(v-text='feed.displayName')] trust level is now {{ feed.trustLevel }} - .x-friend-item( - v-else-if='feed.type === "boop"' - :class='{ friend: feed.isFriend, favorite: feed.isFavorite }') - .detail - span.extra - span.time {{ feed.created_at | formatDate }} - | #[span.name(v-text='feed.senderUsername')] #[span(v-text='feed.message')] - .x-friend-item( - v-else-if='feed.type === "groupChange"' - :class='{ friend: feed.isFriend, favorite: feed.isFavorite }') - .detail - span.extra - span.time {{ feed.created_at | formatDate }} - | #[span.name(v-text='feed.senderUsername')] #[span(v-text='feed.message')] - .x-friend-item( - v-else-if='feed.type === "group.announcement"' - :class='{ friend: feed.isFriend, favorite: feed.isFavorite }') - .detail - span.extra - span.time {{ feed.created_at | formatDate }} - | #[span.name(v-text='feed.message')] - .x-friend-item( - v-else-if='feed.type === "group.informative"' - :class='{ friend: feed.isFriend, favorite: feed.isFavorite }') - .detail - span.extra - span.time {{ feed.created_at | formatDate }} - | #[span.name(v-text='feed.message')] - .x-friend-item( - v-else-if='feed.type === "group.invite"' - :class='{ friend: feed.isFriend, favorite: feed.isFavorite }') - .detail - span.extra - span.time {{ feed.created_at | formatDate }} - | #[span.name(v-text='feed.message')] - .x-friend-item( - v-else-if='feed.type === "group.joinRequest"' - :class='{ friend: feed.isFriend, favorite: feed.isFavorite }') - .detail - span.extra - span.time {{ feed.created_at | formatDate }} - | #[span.name(v-text='feed.message')] - .x-friend-item( - v-else-if='feed.type === "group.transfer"' - :class='{ friend: feed.isFriend, favorite: feed.isFavorite }') - .detail - span.extra - span.time {{ feed.created_at | formatDate }} - | #[span.name(v-text='feed.message')] - .x-friend-item( - v-else-if='feed.type === "group.queueReady"' - :class='{ friend: feed.isFriend, favorite: feed.isFavorite }') - .detail - span.extra - span.time {{ feed.created_at | formatDate }} - | #[span.name(v-text='feed.message')] - .x-friend-item( - v-else-if='feed.type === "instance.closed"' - :class='{ friend: feed.isFriend, favorite: feed.isFavorite }') - .detail - span.extra - span.time {{ feed.created_at | formatDate }} - | #[span.name(v-text='feed.message')] - .x-friend-item( - v-else-if='feed.type === "PortalSpawn"' - :class='{ friend: feed.isFriend, favorite: feed.isFavorite }') - .detail - span.extra - span.time {{ feed.created_at | formatDate }} - template(v-if='feed.displayName') - |#[span.name(v-text='feed.displayName' :style='{ color: feed.tagColour }')] has spawned a portal to - | #[location(:location='feed.instanceId' :hint='feed.worldName' :grouphint='feed.groupName' style='margin-left: 5px')] - template(v-else) - | User has spawned a portal - .x-friend-item( - v-else-if='feed.type === "AvatarChange"' - :class='{ friend: feed.isFriend, favorite: feed.isFavorite }') - .detail - span.extra - span.time {{ feed.created_at | formatDate }} - | #[span.name(v-text='feed.displayName' :style='{ color: feed.tagColour }')] - span(style='margin-left: 5px; margin-right: 5px') changed into avatar - template(v-if='feed.releaseStatus === "public"') - |#[i.x-user-status.online] - template(v-else) - |#[i.x-user-status.askme] - | - | {{ feed.name }} - template(v-if='feed.description && feed.description !== feed.name') - | - | - {{ feed.description }} - .x-friend-item( - v-else-if='feed.type === "ChatBoxMessage"' - :class='{ friend: feed.isFriend, favorite: feed.isFavorite }') - .detail - span.extra - span.time {{ feed.created_at | formatDate }} - | #[span.name(v-text='feed.displayName' :style='{ color: feed.tagColour }')] said #[span(v-text='feed.text')] - .x-friend-item(v-else-if='feed.type === "Event"') - .detail - span.extra - span.time {{ feed.created_at | formatDate }} - | Event: #[span.name(v-text='feed.data')] - .x-friend-item(v-else-if='feed.type === "External"') - .detail - span.extra - span.time {{ feed.created_at | formatDate }} - | External: #[span.name(v-text='feed.displayName' :style='{ color: feed.tagColour }')] #[span.name(v-text='feed.message')] - .x-friend-item( - v-else-if='feed.type === "BlockedOnPlayerJoined"' - :class='{ friend: feed.isFriend, favorite: feed.isFavorite }') - .detail - span.extra - span.time {{ feed.created_at | formatDate }} - | Blocked user #[span.name(v-text='feed.displayName')] has joined - .x-friend-item( - v-else-if='feed.type === "BlockedOnPlayerLeft"' - :class='{ friend: feed.isFriend, favorite: feed.isFavorite }') - .detail - span.extra - span.time {{ feed.created_at | formatDate }} - | Blocked user #[span.name(v-text='feed.displayName')] has left - .x-friend-item( - v-else-if='feed.type === "MutedOnPlayerJoined"' - :class='{ friend: feed.isFriend, favorite: feed.isFavorite }') - .detail - span.extra - span.time {{ feed.created_at | formatDate }} - | Muted user #[span.name(v-text='feed.displayName')] has joined - .x-friend-item( - v-else-if='feed.type === "MutedOnPlayerLeft"' - :class='{ friend: feed.isFriend, favorite: feed.isFavorite }') - .detail - span.extra - span.time {{ feed.created_at | formatDate }} - | Muted user #[span.name(v-text='feed.displayName')] has left - .x-friend-item( - v-else-if='feed.type === "Blocked"' - :class='{ friend: feed.isFriend, favorite: feed.isFavorite }') - .detail - span.extra - span.time {{ feed.created_at | formatDate }} - | #[span.name(v-text='feed.displayName' :style='{ color: feed.tagColour }')] has blocked you - .x-friend-item( - v-else-if='feed.type === "Unblocked"' - :class='{ friend: feed.isFriend, favorite: feed.isFavorite }') - .detail - span.extra - span.time {{ feed.created_at | formatDate }} - | #[span.name(v-text='feed.displayName' :style='{ color: feed.tagColour }')] has unblocked you - .x-friend-item( - v-else-if='feed.type === "Muted"' - :class='{ friend: feed.isFriend, favorite: feed.isFavorite }') - .detail - span.extra - span.time {{ feed.created_at | formatDate }} - | #[span.name(v-text='feed.displayName' :style='{ color: feed.tagColour }')] has muted you - .x-friend-item( - v-else-if='feed.type === "Unmuted"' - :class='{ friend: feed.isFriend, favorite: feed.isFavorite }') - .detail - span.extra - span.time {{ feed.created_at | formatDate }} - | #[span.name(v-text='feed.displayName' :style='{ color: feed.tagColour }')] has unmuted you - .x-containerbottom - div(style='display: flex; flex-direction: row; flex-wrap: wrap') - .tracker-container(v-for='device in devices') - .tracker-device(v-if='device[0] === "headset"' :class='trackingResultToClass(device[4])') - img.tracker-device( - v-if='device[1] !== "connected"' - src='images/headset_quest_status_off.png' - :class='trackingResultToClass(device[4])') - img( - v-else-if='device[2] === "charging"' - src='images/headset_quest_status_ready_charging.png') - img(v-else-if='device[3] < 20' src='images/headset_quest_status_ready_low.png') - img(v-else src='images/headset_quest_status_ready.png') - span {{ device[3] }}% - .tracker-device( - v-if='device[0] === "leftController"' - :class='trackingResultToClass(device[4])') - img.tracker-device( - v-if='device[1] !== "connected"' - src='images/left_controller_status_off.png' - :class='trackingResultToClass(device[4])') - img( - v-else-if='device[2] === "charging"' - src='images/left_controller_status_ready_charging.png') - img(v-else-if='device[3] < 20' src='images/left_controller_status_ready_low.png') - img(v-else src='images/left_controller_status_ready.png') - span {{ device[3] }}% - .tracker-device( - v-else-if='device[0] === "rightController"' - :class='trackingResultToClass(device[4])') - img(v-if='device[1] !== "connected"' src='images/right_controller_status_off.png') - img( - v-else-if='device[2] === "charging"' - src='images/right_controller_status_ready_charging.png') - img(v-else-if='device[3] < 20' src='images/right_controller_status_ready_low.png') - img(v-else src='images/right_controller_status_ready.png') - span {{ device[3] }}% - .tracker-device( - v-else-if='device[0] === "controller"' - :class='trackingResultToClass(device[4])') - img(v-if='device[1] !== "connected"' src='images/controller_status_off.png') - img( - v-else-if='device[2] === "charging"' - src='images/controller_status_ready_charging.png') - img(v-else-if='device[3] < 20' src='images/controller_status_ready_low.png') - img(v-else src='images/controller_status_ready.png') - span {{ device[3] }}% - .tracker-device( - v-else-if='device[0] === "tracker"' - :class='trackingResultToClass(device[4])') - img(v-if='device[1] !== "connected"' src='images/tracker_status_off.png') - img( - v-else-if='device[2] === "charging"' - src='images/tracker_status_ready_charging.png') - img(v-else-if='device[3] < 20' src='images/tracker_status_ready_low.png') - img(v-else src='images/tracker_status_ready.png') - span {{ device[3] }}% - .tracker-device(v-else-if='device[0] === "base"' :class='trackingResultToClass(device[4])') - img(v-if='device[1] !== "connected"' src='images/base_status_off.png') - img(v-else src='images/base_status_ready.png') - span(v-if='device[3] !== 100') {{ device[3] }}x - .x-containerbottom - template(v-if='nowPlaying.playing') - span(style='float: right; padding-left: 10px') {{ nowPlaying.remainingText }} - marquee-text {{ nowPlaying.name }} ‎ - .np-progress-bar(:style='{ width: nowPlaying.percentage + "%" }') - template(v-if='lastLocation.date !== 0') - template(v-if='config && config.minimalFeed') - span(style='float: right') {{ lastLocationTimer }} - template(v-if='onlineForTimer') - |  / {{ onlineForTimer }} - template(v-if='pcUptime') - |  / {{ pcUptime }} - span(style='display: inline-block') {{ lastLocation.playerList.length }} - span(style='display: inline-block; font-weight: bold') {{ lastLocation.friendList.length !== 0 ? `‎‎‎‎‎‎‎‎‏‏‎ ‎(${lastLocation.friendList.length})` : '' }} - template(v-else) - span(style='float: right') {{ $t('vr.status.timer') }} {{ lastLocationTimer }} - template(v-if='onlineForTimer') - |  / {{ onlineForTimer }} - template(v-if='pcUptime') - |  / {{ pcUptime }} - span(style='display: inline-block') {{ $t('vr.status.players') }} {{ lastLocation.playerList.length }} - span(style='display: inline-block; font-weight: bold') {{ lastLocation.friendList.length !== 0 ? `‎‎‎‎‎‎‎‎‏‏‎ ‎(${lastLocation.friendList.length})` : '' }} - br - span(style='float: right') {{ currentTime }} - span(v-if='config && cpuUsageEnabled' style='display: inline-block; margin-right: 5px') {{ $t('vr.status.cpu') }} {{ cpuUsage }}% - span(style='display: inline-block') {{ $t('vr.status.online') }} {{ onlineFriendCount }} ‎{{ customInfo }} - template(v-else) - svg.np-progress-circle - circle.np-progress-circle-stroke( - cx='60' - cy='60' - stroke='white' - r='30' - fill='transparent' - stroke-width='60') - .hud-feed - div(v-for='feed in hudFeed') - .item(:class='{ friend: feed.isFriend, favorite: feed.isFavorite }') #[span(v-if='feed.isMaster') 👑]#[span(v-if='feed.isModerator') ⚔️]#[strong.name(v-text='feed.displayName' :style='{ color: feed.colour }')] - template(v-if='feed.type === "ChangeAvatar"') - span(style='margin-left: 10px; color: #a3a3a3') ChangeAvatar - span(v-if='!feed.inCache' style='color: #aaa; margin-left: 10px') #[i.el-icon-download] - span(v-text='feed.avatar.name' style='margin-left: 10px') - span( - v-if='feed.avatar.releaseStatus === "public"' - style='margin-left: 10px; color: #67c23a') (Public) - span( - v-else-if='feed.avatar.releaseStatus === "private"' - style='margin-left: 10px; color: #e6a23c') (Private) - template(v-else-if='feed.type === "ChangeStatus"') - span(style='margin-left: 10px; color: #a3a3a3') ChangeStatus - span(v-if='feed.status !== feed.previousStatus') - i.x-user-status( - :class='statusClass(feed.previousStatus)' - style='margin-left: 10px; width: 20px; height: 20px') - span +#x-app.x-app.x-app-type(:class='{ background: appType === "1" && config && config.backgroundEnabled }') + template(v-if='appType === "1"') + .x-container(style='flex: 1') + .x-friend-list(ref='list' style='color: #aaa') + template(v-if='config && config.minimalFeed') + template(v-for='feed in wristFeed') + .x-friend-item( + v-if='feed.type === "GPS"' + :class='{ friend: feed.isFriend, favorite: feed.isFavorite }') + .detail + span.extra + span.time {{ feed.created_at | formatDate }} + i.el-icon-loading(v-if='feed.isTraveling' style='margin-right: 5px') + | #[span.name(v-text='feed.displayName')] #[location(:location='feed.location' :hint='feed.worldName' :grouphint='feed.groupName')] + .x-friend-item( + v-else-if='feed.type === "Offline"' + :class='{ friend: feed.isFriend, favorite: feed.isFavorite }') + .detail + span.extra + span.time {{ feed.created_at | formatDate }} + | #[span.name(v-text='feed.displayName')] ✖️ + .x-friend-item( + v-else-if='feed.type === "Online"' + :class='{ friend: feed.isFriend, favorite: feed.isFavorite }') + .detail + span.extra + span.time {{ feed.created_at | formatDate }} + | #[span.name(v-text='feed.displayName')] ✔ + template(v-if='feed.worldName') + |#[location(:location='feed.location' :hint='feed.worldName' :grouphint='feed.groupName' style='margin-left: 5px')] + .x-friend-item( + v-else-if='feed.type === "Status"' + :class='{ friend: feed.isFriend, favorite: feed.isFavorite }') + .detail + span.extra + span.time {{ feed.created_at | formatDate }} + | #[span.name(v-text='feed.displayName' style='margin-right: 5px')] + template(v-if='feed.statusDescription === feed.previousStatusDescription') + i.x-user-status(:class='statusClass(feed.previousStatus)') i.el-icon-right - i.x-user-status(:class='statusClass(feed.status)' style='width: 20px; height: 20px') - span( - v-if='feed.statusDescription !== feed.previousStatusDescription' - v-text='feed.statusDescription' - style='margin-left: 10px') - template(v-else-if='feed.type === "ChangeGroup"') - span(style='margin-left: 10px; color: #a3a3a3') ChangeGroup - span(v-text='feed.groupName' style='margin-left: 10px') - template(v-else-if='feed.type === "ChatBoxMessage"') - span(style='margin-left: 10px; color: #a3a3a3') ChatBox - span(v-text='feed.text' style='margin-left: 10px; white-space: normal') - template(v-else-if='feed.type === "PortalSpawn"') - span(style='margin-left: 10px; color: #a3a3a3') PortalSpawn - location( - :location='feed.location' - :hint='feed.worldName' - :grouphint='feed.groupName' - :link='false' - style='margin-left: 10px') - template(v-else-if='feed.type === "OnPlayerJoined"') - span(style='margin-left: 10px; color: #a3a3a3') has joined - span(v-if='feed.platform === "Desktop"' style='color: #409eff; margin-left: 10px') Desktop - span(v-else-if='feed.platform === "VR"' style='color: #409eff; margin-left: 10px') VR - span(v-else-if='feed.platform === "Quest"' style='color: #67c23a; margin-left: 10px') Quest - span(v-else-if='feed.platform === "iOS"' style='color: #c7c7ce; margin-left: 10px') iOS - span(v-if='!feed.inCache' style='color: #aaa; margin-left: 10px') #[i.el-icon-download] - span(v-text='feed.avatar.name' style='margin-left: 10px') - template(v-else-if='feed.type === "SpawnEmoji"') - span(style='margin-left: 10px; color: #a3a3a3') SpawnEmoji - span(v-text='feed.text' style='margin-left: 10px') - span( - v-else-if='feed.color === "yellow"' - v-text='feed.text' - style='color: yellow; margin-left: 10px') - span(v-else style='margin-left: 10px; color: #a3a3a3' v-text='feed.text') - template(v-if='feed.combo > 1') - span.combo(style='margin-left: 10px') x{{ feed.combo }} - .hud-timeout(v-if='hudTimeout.length > 0') - .hud-timeout-feed - div(v-for='feed in hudTimeout') - p.item ({{ feed.time }}s) {{ feed.displayName }} - svg( - version='1.1' - xmlns='http://www.w3.org/2000/svg' - xmlns:xlink='http://www.w3.org/1999/xlink' - xml:space='preserve') - path( - fill='#ED1B24' - d='M68.6,96.5L87,78.1c1.6-1.6,1.6-4.1,0-5.7s-4.1-1.6-5.7,0L62.9,90.9L44.5,72.5l18.4-18.4c1.6-1.6,1.6-4.1,0-5.7c-1.6-1.6-4.1-1.6-5.7,0L38.9,66.8l-6.4-6.4L21.2,71.8C11,82,9.7,97.9,17.4,109.5L0,126.9l8.5,8.5L25.9,118c11.6,7.7,27.5,6.4,37.8-3.8L75,102.9C75,102.9,68.6,96.5,68.6,96.5z') - path( - fill='#ED1B24' - d='M102.9,75l11.3-11.3c10.3-10.3,11.5-26.1,3.8-37.8l17.4-17.4L126.9,0l-17.4,17.4C97.9,9.7,82,11,71.8,21.2L60.5,32.5C102,74,60.8,32.9,102.9,75z') - script(src='vendor.js') - script(src='vr.js') + i.x-user-status(:class='statusClass(feed.status)') + template(v-else) + |#[i.x-user-status(:class='statusClass(feed.status)')] {{ feed.statusDescription }} + .x-friend-item( + v-else-if='feed.type === "OnPlayerJoined"' + :class='{ friend: feed.isFriend, favorite: feed.isFavorite }') + .detail + span.extra + span.time {{ feed.created_at | formatDate }} + | ▶️ #[span.name(v-text='feed.displayName' :style='{ color: feed.tagColour }')] + .x-friend-item( + v-else-if='feed.type === "OnPlayerLeft"' + :class='{ friend: feed.isFriend, favorite: feed.isFavorite }') + .detail + span.extra + span.time {{ feed.created_at | formatDate }} + | ◀️ #[span.name(v-text='feed.displayName' :style='{ color: feed.tagColour }')] + .x-friend-item( + v-else-if='feed.type === "OnPlayerJoining"' + :class='{ friend: feed.isFriend, favorite: feed.isFavorite }') + .detail + span.extra + span.time {{ feed.created_at | formatDate }} + span.spin ▶️ + span.name(v-text='feed.displayName' style='margin-left: 30px') + .x-friend-item( + v-else-if='feed.type === "Location"' + :class='{ friend: feed.isFriend, favorite: feed.isFavorite }') + .detail + span.extra + span.time {{ feed.created_at | formatDate }} + location( + :location='feed.location' + :hint='feed.worldName' + :grouphint='feed.groupName') + .x-friend-item( + v-else-if='feed.type === "VideoPlay"' + :class='{ friend: feed.isFriend, favorite: feed.isFavorite }') + .detail + span.extra + span.time {{ feed.created_at | formatDate }} + | 🎵 #[span.name(v-if='feed.displayName' v-text='feed.displayName' style='margin-right: 5px' :style='{ color: feed.tagColour }')] + template(v-if='feed.videoName') + |#[span(v-text='feed.videoName')] + template(v-else) + |#[span(v-text='feed.videoUrl')] + .x-friend-item( + v-else-if='feed.type === "invite"' + :class='{ friend: feed.isFriend, favorite: feed.isFavorite }') + .detail + span.extra + span.time {{ feed.created_at | formatDate }} + | 📨 #[span.name(v-text='feed.senderUsername')] #[location(:location='feed.details.worldId' :hint='feed.details.worldName')] #[span(v-text='feed.details.inviteMessage')] + .x-friend-item( + v-else-if='feed.type === "requestInvite"' + :class='{ friend: feed.isFriend, favorite: feed.isFavorite }') + .detail + span.extra + span.time {{ feed.created_at | formatDate }} + | 📩 #[span.name(v-text='feed.senderUsername')] #[span(v-text='feed.details.requestMessage')] + .x-friend-item( + v-else-if='feed.type === "inviteResponse"' + :class='{ friend: feed.isFriend, favorite: feed.isFavorite }') + .detail + span.extra + span.time {{ feed.created_at | formatDate }} + | 💬 #[span.name(v-text='feed.senderUsername')] #[span(v-text='feed.details.responseMessage')] + .x-friend-item( + v-else-if='feed.type === "requestInviteResponse"' + :class='{ friend: feed.isFriend, favorite: feed.isFavorite }') + .detail + span.extra + span.time {{ feed.created_at | formatDate }} + | 💬 #[span.name(v-text='feed.senderUsername')] #[span(v-text='feed.details.responseMessage')] + .x-friend-item( + v-else-if='feed.type === "friendRequest"' + :class='{ friend: feed.isFriend, favorite: feed.isFavorite }') + .detail + span.extra + span.time {{ feed.created_at | formatDate }} + | 💚 #[span.name(v-text='feed.senderUsername')] + .x-friend-item( + v-else-if='feed.type === "Friend"' + :class='{ friend: feed.isFriend, favorite: feed.isFavorite }') + .detail + span.extra + span.time {{ feed.created_at | formatDate }} + | 💖 #[span.name(v-text='feed.displayName')] + .x-friend-item( + v-else-if='feed.type === "Unfriend"' + :class='{ friend: feed.isFriend, favorite: feed.isFavorite }') + .detail + span.extra + span.time {{ feed.created_at | formatDate }} + | 💔 #[span.name(v-text='feed.displayName')] + .x-friend-item( + v-else-if='feed.type === "DisplayName"' + :class='{ friend: feed.isFriend, favorite: feed.isFavorite }') + .detail + span.extra + span.time {{ feed.created_at | formatDate }} + | 📃 #[span.name(v-text='feed.previousDisplayName')] #[i.el-icon-right] #[span.name(v-text='feed.displayName')] + .x-friend-item( + v-else-if='feed.type === "TrustLevel"' + :class='{ friend: feed.isFriend, favorite: feed.isFavorite }') + .detail + span.extra + span.time {{ feed.created_at | formatDate }} + | 🤝 #[span.name(v-text='feed.displayName')] {{ feed.previousTrustLevel }} #[i.el-icon-right] {{ feed.trustLevel }} + .x-friend-item( + v-else-if='feed.type === "boop"' + :class='{ friend: feed.isFriend, favorite: feed.isFavorite }') + .detail + span.extra + span.time {{ feed.created_at | formatDate }} + | 👉 #[span.name(v-text='feed.senderUsername')] #[span(v-text='feed.message')] + .x-friend-item( + v-else-if='feed.type === "groupChange"' + :class='{ friend: feed.isFriend, favorite: feed.isFavorite }') + .detail + span.extra + span.time {{ feed.created_at | formatDate }} + | 🏷️ #[span.name(v-text='feed.senderUsername')] #[span(v-text='feed.message')] + .x-friend-item( + v-else-if='feed.type === "group.announcement"' + :class='{ friend: feed.isFriend, favorite: feed.isFavorite }') + .detail + span.extra + span.time {{ feed.created_at | formatDate }} + | 🏷️ #[span.name(v-text='feed.message')] + .x-friend-item( + v-else-if='feed.type === "group.informative"' + :class='{ friend: feed.isFriend, favorite: feed.isFavorite }') + .detail + span.extra + span.time {{ feed.created_at | formatDate }} + | 🏷️ #[span.name(v-text='feed.message')] + .x-friend-item( + v-else-if='feed.type === "group.invite"' + :class='{ friend: feed.isFriend, favorite: feed.isFavorite }') + .detail + span.extra + span.time {{ feed.created_at | formatDate }} + | 🏷️ #[span.name(v-text='feed.message')] + .x-friend-item( + v-else-if='feed.type === "group.joinRequest"' + :class='{ friend: feed.isFriend, favorite: feed.isFavorite }') + .detail + span.extra + span.time {{ feed.created_at | formatDate }} + | 🏷️ #[span.name(v-text='feed.message')] + .x-friend-item( + v-else-if='feed.type === "group.transfer"' + :class='{ friend: feed.isFriend, favorite: feed.isFavorite }') + .detail + span.extra + span.time {{ feed.created_at | formatDate }} + | 🏷️ #[span.name(v-text='feed.message')] + .x-friend-item( + v-else-if='feed.type === "group.queueReady"' + :class='{ friend: feed.isFriend, favorite: feed.isFavorite }') + .detail + span.extra + span.time {{ feed.created_at | formatDate }} + | 📨 #[span.name(v-text='feed.message')] + .x-friend-item( + v-else-if='feed.type === "instance.closed"' + :class='{ friend: feed.isFriend, favorite: feed.isFavorite }') + .detail + span.extra + span.time {{ feed.created_at | formatDate }} + | 📫 #[span.name(v-text='feed.message')] + .x-friend-item( + v-else-if='feed.type === "PortalSpawn"' + :class='{ friend: feed.isFriend, favorite: feed.isFavorite }') + .detail + span.extra + span.time {{ feed.created_at | formatDate }} + template(v-if='feed.displayName') + | ✨ #[span.name(v-text='feed.displayName' style='margin-right: 5px' :style='{ color: feed.tagColour }')] + | #[location(:location='feed.instanceId' :hint='feed.worldName' :grouphint='feed.groupName')] + template(v-else) + | ✨ User has spawned a portal + .x-friend-item( + v-else-if='feed.type === "AvatarChange"' + :class='{ friend: feed.isFriend, favorite: feed.isFavorite }') + .detail + span.extra + span.time {{ feed.created_at | formatDate }} + | 🧍 #[span.name(v-text='feed.displayName' style='margin-right: 5px' :style='{ color: feed.tagColour }')] + template(v-if='feed.releaseStatus === "public"') + |#[i.x-user-status.online]  + template(v-else-if='feed.releaseStatus === "private"') + |#[i.x-user-status.askme]  + | {{ feed.name }} + template(v-if='feed.description && feed.description !== feed.name') + | + | - {{ feed.description }} + .x-friend-item( + v-else-if='feed.type === "ChatBoxMessage"' + :class='{ friend: feed.isFriend, favorite: feed.isFavorite }') + .detail + span.extra + span.time {{ feed.created_at | formatDate }} + | 💬 #[span.name(v-text='feed.displayName' :style='{ color: feed.tagColour }')] #[span(v-text='feed.text')] + .x-friend-item(v-else-if='feed.type === "Event"') + .detail + span.extra + span.time {{ feed.created_at | formatDate }} + | 🛑 #[span.name(v-text='feed.data')] + .x-friend-item(v-else-if='feed.type === "External"') + .detail + span.extra + span.time {{ feed.created_at | formatDate }} + | 🟠 #[span.name(v-text='feed.displayName' :style='{ color: feed.tagColour }')] #[span.name(v-text='feed.message')] + .x-friend-item( + v-else-if='feed.type === "BlockedOnPlayerJoined"' + :class='{ friend: feed.isFriend, favorite: feed.isFavorite }') + .detail + span.extra + span.time {{ feed.created_at | formatDate }} + | ▶️ 🚫 #[span.name(v-text='feed.displayName')] + .x-friend-item( + v-else-if='feed.type === "BlockedOnPlayerLeft"' + :class='{ friend: feed.isFriend, favorite: feed.isFavorite }') + .detail + span.extra + span.time {{ feed.created_at | formatDate }} + | ◀️ 🚫 #[span.name(v-text='feed.displayName')] + .x-friend-item( + v-else-if='feed.type === "MutedOnPlayerJoined"' + :class='{ friend: feed.isFriend, favorite: feed.isFavorite }') + .detail + span.extra + span.time {{ feed.created_at | formatDate }} + | ▶️ 🔇 #[span.name(v-text='feed.displayName')] + .x-friend-item( + v-else-if='feed.type === "MutedOnPlayerLeft"' + :class='{ friend: feed.isFriend, favorite: feed.isFavorite }') + .detail + span.extra + span.time {{ feed.created_at | formatDate }} + | ◀️ 🔇 #[span.name(v-text='feed.displayName')] + .x-friend-item( + v-else-if='feed.type === "Blocked"' + :class='{ friend: feed.isFriend, favorite: feed.isFavorite }') + .detail + span.extra + span.time {{ feed.created_at | formatDate }} + | 🚫 #[span.name(v-text='feed.displayName' :style='{ color: feed.tagColour }')] + .x-friend-item( + v-else-if='feed.type === "Unblocked"' + :class='{ friend: feed.isFriend, favorite: feed.isFavorite }') + .detail + span.extra + span.time {{ feed.created_at | formatDate }} + | ⭕ #[span.name(v-text='feed.displayName' :style='{ color: feed.tagColour }')] + .x-friend-item( + v-else-if='feed.type === "Muted"' + :class='{ friend: feed.isFriend, favorite: feed.isFavorite }') + .detail + span.extra + span.time {{ feed.created_at | formatDate }} + | 🔇 #[span.name(v-text='feed.displayName' :style='{ color: feed.tagColour }')] + .x-friend-item( + v-else-if='feed.type === "Unmuted"' + :class='{ friend: feed.isFriend, favorite: feed.isFavorite }') + .detail + span.extra + span.time {{ feed.created_at | formatDate }} + | 🎤 #[span.name(v-text='feed.displayName' :style='{ color: feed.tagColour }')] + template(v-else) + template(v-for='feed in wristFeed') + .x-friend-item( + v-if='feed.type === "GPS"' + :class='{ friend: feed.isFriend, favorite: feed.isFavorite }') + .detail + span.extra + span.time {{ feed.created_at | formatDate }} + template(v-if='feed.isTraveling') + |#[span.name(v-text='feed.displayName')] is traveling to #[location(:location='feed.location' :hint='feed.worldName' :grouphint='feed.groupName')] + template(v-else) + |#[span.name(v-text='feed.displayName')] is in #[location(:location='feed.location' :hint='feed.worldName' :grouphint='feed.groupName')] + .x-friend-item( + v-else-if='feed.type === "Offline"' + :class='{ friend: feed.isFriend, favorite: feed.isFavorite }') + .detail + span.extra + span.time {{ feed.created_at | formatDate }} + | #[span.name(v-text='feed.displayName')] has logged out + .x-friend-item( + v-else-if='feed.type === "Online"' + :class='{ friend: feed.isFriend, favorite: feed.isFavorite }') + .detail + span.extra + span.time {{ feed.created_at | formatDate }} + | #[span.name(v-text='feed.displayName')] + span(style='margin-left: 5px; margin-right: 5px') has logged in + template(v-if='feed.worldName') + | to #[location(:location='feed.location' :hint='feed.worldName' :grouphint='feed.groupName')] + .x-friend-item( + v-else-if='feed.type === "Status"' + :class='{ friend: feed.isFriend, favorite: feed.isFavorite }') + .detail + span.extra + span.time {{ feed.created_at | formatDate }} + | #[span.name(v-text='feed.displayName' style='margin-right: 5px')] + template(v-if='feed.statusDescription === feed.previousStatusDescription') + i.x-user-status(:class='statusClass(feed.previousStatus)') + i.el-icon-right + i.x-user-status(:class='statusClass(feed.status)') + template(v-else) + |#[i.x-user-status(:class='statusClass(feed.status)')] {{ feed.statusDescription }} + .x-friend-item( + v-else-if='feed.type === "OnPlayerJoined"' + :class='{ friend: feed.isFriend, favorite: feed.isFavorite }') + .detail + span.extra + span.time {{ feed.created_at | formatDate }} + | #[span.name(v-text='feed.displayName' :style='{ color: feed.tagColour }')] has joined + .x-friend-item( + v-else-if='feed.type === "OnPlayerLeft"' + :class='{ friend: feed.isFriend, favorite: feed.isFavorite }') + .detail + span.extra + span.time {{ feed.created_at | formatDate }} + | #[span.name(v-text='feed.displayName' :style='{ color: feed.tagColour }')] has left + .x-friend-item( + v-else-if='feed.type === "OnPlayerJoining"' + :class='{ friend: feed.isFriend, favorite: feed.isFavorite }') + .detail + span.extra + span.time {{ feed.created_at | formatDate }} + | #[span.name(v-text='feed.displayName')] is joining + .x-friend-item( + v-else-if='feed.type === "Location"' + :class='{ friend: feed.isFriend, favorite: feed.isFavorite }') + .detail + span.extra + span.time {{ feed.created_at | formatDate }} + location( + :location='feed.location' + :hint='feed.worldName' + :grouphint='feed.groupName') + .x-friend-item( + v-else-if='feed.type === "VideoPlay"' + :class='{ friend: feed.isFriend, favorite: feed.isFavorite }') + .detail + span.extra + span.time {{ feed.created_at | formatDate }} + | #[span.name(v-text='feed.displayName' :style='{ color: feed.tagColour }')] + span(style='margin-left: 5px; margin-right: 5px') changed video to + template(v-if='feed.videoName') + |#[span(v-text='feed.videoName')] + template(v-else) + |#[span(v-text='feed.videoUrl')] + .x-friend-item( + v-else-if='feed.type === "invite"' + :class='{ friend: feed.isFriend, favorite: feed.isFavorite }') + .detail + span.extra + span.time {{ feed.created_at | formatDate }} + | #[span.name(v-text='feed.senderUsername')] has invited you to #[location(:location='feed.details.worldId' :hint='feed.details.worldName')] #[span(v-text='feed.details.inviteMessage')] + .x-friend-item( + v-else-if='feed.type === "requestInvite"' + :class='{ friend: feed.isFriend, favorite: feed.isFavorite }') + .detail + span.extra + span.time {{ feed.created_at | formatDate }} + | #[span.name(v-text='feed.senderUsername')] has requested an invite #[span(v-text='feed.details.requestMessage')] + .x-friend-item( + v-else-if='feed.type === "inviteResponse"' + :class='{ friend: feed.isFriend, favorite: feed.isFavorite }') + .detail + span.extra + span.time {{ feed.created_at | formatDate }} + | #[span.name(v-text='feed.senderUsername')] has responded to your invite #[span(v-text='feed.details.responseMessage')] + .x-friend-item( + v-else-if='feed.type === "requestInviteResponse"' + :class='{ friend: feed.isFriend, favorite: feed.isFavorite }') + .detail + span.extra + span.time {{ feed.created_at | formatDate }} + | #[span.name(v-text='feed.senderUsername')] has responded to your invite request #[span(v-text='feed.details.responseMessage')] + .x-friend-item( + v-else-if='feed.type === "friendRequest"' + :class='{ friend: feed.isFriend, favorite: feed.isFavorite }') + .detail + span.extra + span.time {{ feed.created_at | formatDate }} + | #[span.name(v-text='feed.senderUsername')] has sent you a friend request + .x-friend-item( + v-else-if='feed.type === "Friend"' + :class='{ friend: feed.isFriend, favorite: feed.isFavorite }') + .detail + span.extra + span.time {{ feed.created_at | formatDate }} + | #[span.name(v-text='feed.displayName')] is now your friend + .x-friend-item( + v-else-if='feed.type === "Unfriend"' + :class='{ friend: feed.isFriend, favorite: feed.isFavorite }') + .detail + span.extra + span.time {{ feed.created_at | formatDate }} + | #[span.name(v-text='feed.displayName')] is no longer your friend + .x-friend-item( + v-else-if='feed.type === "DisplayName"' + :class='{ friend: feed.isFriend, favorite: feed.isFavorite }') + .detail + span.extra + span.time {{ feed.created_at | formatDate }} + | #[span.name(v-text='feed.previousDisplayName')] changed their name to #[span.name(v-text='feed.displayName')] + .x-friend-item( + v-else-if='feed.type === "TrustLevel"' + :class='{ friend: feed.isFriend, favorite: feed.isFavorite }') + .detail + span.extra + span.time {{ feed.created_at | formatDate }} + | #[span.name(v-text='feed.displayName')] trust level is now {{ feed.trustLevel }} + .x-friend-item( + v-else-if='feed.type === "boop"' + :class='{ friend: feed.isFriend, favorite: feed.isFavorite }') + .detail + span.extra + span.time {{ feed.created_at | formatDate }} + | #[span.name(v-text='feed.senderUsername')] #[span(v-text='feed.message')] + .x-friend-item( + v-else-if='feed.type === "groupChange"' + :class='{ friend: feed.isFriend, favorite: feed.isFavorite }') + .detail + span.extra + span.time {{ feed.created_at | formatDate }} + | #[span.name(v-text='feed.senderUsername')] #[span(v-text='feed.message')] + .x-friend-item( + v-else-if='feed.type === "group.announcement"' + :class='{ friend: feed.isFriend, favorite: feed.isFavorite }') + .detail + span.extra + span.time {{ feed.created_at | formatDate }} + | #[span.name(v-text='feed.message')] + .x-friend-item( + v-else-if='feed.type === "group.informative"' + :class='{ friend: feed.isFriend, favorite: feed.isFavorite }') + .detail + span.extra + span.time {{ feed.created_at | formatDate }} + | #[span.name(v-text='feed.message')] + .x-friend-item( + v-else-if='feed.type === "group.invite"' + :class='{ friend: feed.isFriend, favorite: feed.isFavorite }') + .detail + span.extra + span.time {{ feed.created_at | formatDate }} + | #[span.name(v-text='feed.message')] + .x-friend-item( + v-else-if='feed.type === "group.joinRequest"' + :class='{ friend: feed.isFriend, favorite: feed.isFavorite }') + .detail + span.extra + span.time {{ feed.created_at | formatDate }} + | #[span.name(v-text='feed.message')] + .x-friend-item( + v-else-if='feed.type === "group.transfer"' + :class='{ friend: feed.isFriend, favorite: feed.isFavorite }') + .detail + span.extra + span.time {{ feed.created_at | formatDate }} + | #[span.name(v-text='feed.message')] + .x-friend-item( + v-else-if='feed.type === "group.queueReady"' + :class='{ friend: feed.isFriend, favorite: feed.isFavorite }') + .detail + span.extra + span.time {{ feed.created_at | formatDate }} + | #[span.name(v-text='feed.message')] + .x-friend-item( + v-else-if='feed.type === "instance.closed"' + :class='{ friend: feed.isFriend, favorite: feed.isFavorite }') + .detail + span.extra + span.time {{ feed.created_at | formatDate }} + | #[span.name(v-text='feed.message')] + .x-friend-item( + v-else-if='feed.type === "PortalSpawn"' + :class='{ friend: feed.isFriend, favorite: feed.isFavorite }') + .detail + span.extra + span.time {{ feed.created_at | formatDate }} + template(v-if='feed.displayName') + |#[span.name(v-text='feed.displayName' :style='{ color: feed.tagColour }')] has spawned a portal to + | #[location(:location='feed.instanceId' :hint='feed.worldName' :grouphint='feed.groupName' style='margin-left: 5px')] + template(v-else) + | User has spawned a portal + .x-friend-item( + v-else-if='feed.type === "AvatarChange"' + :class='{ friend: feed.isFriend, favorite: feed.isFavorite }') + .detail + span.extra + span.time {{ feed.created_at | formatDate }} + | #[span.name(v-text='feed.displayName' :style='{ color: feed.tagColour }')] + span(style='margin-left: 5px; margin-right: 5px') changed into avatar + template(v-if='feed.releaseStatus === "public"') + |#[i.x-user-status.online] + template(v-else) + |#[i.x-user-status.askme] + | + | {{ feed.name }} + template(v-if='feed.description && feed.description !== feed.name') + | + | - {{ feed.description }} + .x-friend-item( + v-else-if='feed.type === "ChatBoxMessage"' + :class='{ friend: feed.isFriend, favorite: feed.isFavorite }') + .detail + span.extra + span.time {{ feed.created_at | formatDate }} + | #[span.name(v-text='feed.displayName' :style='{ color: feed.tagColour }')] said #[span(v-text='feed.text')] + .x-friend-item(v-else-if='feed.type === "Event"') + .detail + span.extra + span.time {{ feed.created_at | formatDate }} + | Event: #[span.name(v-text='feed.data')] + .x-friend-item(v-else-if='feed.type === "External"') + .detail + span.extra + span.time {{ feed.created_at | formatDate }} + | External: #[span.name(v-text='feed.displayName' :style='{ color: feed.tagColour }')] #[span.name(v-text='feed.message')] + .x-friend-item( + v-else-if='feed.type === "BlockedOnPlayerJoined"' + :class='{ friend: feed.isFriend, favorite: feed.isFavorite }') + .detail + span.extra + span.time {{ feed.created_at | formatDate }} + | Blocked user #[span.name(v-text='feed.displayName')] has joined + .x-friend-item( + v-else-if='feed.type === "BlockedOnPlayerLeft"' + :class='{ friend: feed.isFriend, favorite: feed.isFavorite }') + .detail + span.extra + span.time {{ feed.created_at | formatDate }} + | Blocked user #[span.name(v-text='feed.displayName')] has left + .x-friend-item( + v-else-if='feed.type === "MutedOnPlayerJoined"' + :class='{ friend: feed.isFriend, favorite: feed.isFavorite }') + .detail + span.extra + span.time {{ feed.created_at | formatDate }} + | Muted user #[span.name(v-text='feed.displayName')] has joined + .x-friend-item( + v-else-if='feed.type === "MutedOnPlayerLeft"' + :class='{ friend: feed.isFriend, favorite: feed.isFavorite }') + .detail + span.extra + span.time {{ feed.created_at | formatDate }} + | Muted user #[span.name(v-text='feed.displayName')] has left + .x-friend-item( + v-else-if='feed.type === "Blocked"' + :class='{ friend: feed.isFriend, favorite: feed.isFavorite }') + .detail + span.extra + span.time {{ feed.created_at | formatDate }} + | #[span.name(v-text='feed.displayName' :style='{ color: feed.tagColour }')] has blocked you + .x-friend-item( + v-else-if='feed.type === "Unblocked"' + :class='{ friend: feed.isFriend, favorite: feed.isFavorite }') + .detail + span.extra + span.time {{ feed.created_at | formatDate }} + | #[span.name(v-text='feed.displayName' :style='{ color: feed.tagColour }')] has unblocked you + .x-friend-item( + v-else-if='feed.type === "Muted"' + :class='{ friend: feed.isFriend, favorite: feed.isFavorite }') + .detail + span.extra + span.time {{ feed.created_at | formatDate }} + | #[span.name(v-text='feed.displayName' :style='{ color: feed.tagColour }')] has muted you + .x-friend-item( + v-else-if='feed.type === "Unmuted"' + :class='{ friend: feed.isFriend, favorite: feed.isFavorite }') + .detail + span.extra + span.time {{ feed.created_at | formatDate }} + | #[span.name(v-text='feed.displayName' :style='{ color: feed.tagColour }')] has unmuted you + .x-containerbottom + div(style='display: flex; flex-direction: row; flex-wrap: wrap') + .tracker-container(v-for='device in devices') + .tracker-device(v-if='device[0] === "headset"' :class='trackingResultToClass(device[4])') + img.tracker-device( + v-if='device[1] !== "connected"' + src='images/headset_quest_status_off.png' + :class='trackingResultToClass(device[4])') + img(v-else-if='device[2] === "charging"' src='images/headset_quest_status_ready_charging.png') + img(v-else-if='device[3] < 20' src='images/headset_quest_status_ready_low.png') + img(v-else src='images/headset_quest_status_ready.png') + span {{ device[3] }}% + .tracker-device(v-if='device[0] === "leftController"' :class='trackingResultToClass(device[4])') + img.tracker-device( + v-if='device[1] !== "connected"' + src='images/left_controller_status_off.png' + :class='trackingResultToClass(device[4])') + img( + v-else-if='device[2] === "charging"' + src='images/left_controller_status_ready_charging.png') + img(v-else-if='device[3] < 20' src='images/left_controller_status_ready_low.png') + img(v-else src='images/left_controller_status_ready.png') + span {{ device[3] }}% + .tracker-device( + v-else-if='device[0] === "rightController"' + :class='trackingResultToClass(device[4])') + img(v-if='device[1] !== "connected"' src='images/right_controller_status_off.png') + img( + v-else-if='device[2] === "charging"' + src='images/right_controller_status_ready_charging.png') + img(v-else-if='device[3] < 20' src='images/right_controller_status_ready_low.png') + img(v-else src='images/right_controller_status_ready.png') + span {{ device[3] }}% + .tracker-device(v-else-if='device[0] === "controller"' :class='trackingResultToClass(device[4])') + img(v-if='device[1] !== "connected"' src='images/controller_status_off.png') + img(v-else-if='device[2] === "charging"' src='images/controller_status_ready_charging.png') + img(v-else-if='device[3] < 20' src='images/controller_status_ready_low.png') + img(v-else src='images/controller_status_ready.png') + span {{ device[3] }}% + .tracker-device(v-else-if='device[0] === "tracker"' :class='trackingResultToClass(device[4])') + img(v-if='device[1] !== "connected"' src='images/tracker_status_off.png') + img(v-else-if='device[2] === "charging"' src='images/tracker_status_ready_charging.png') + img(v-else-if='device[3] < 20' src='images/tracker_status_ready_low.png') + img(v-else src='images/tracker_status_ready.png') + span {{ device[3] }}% + .tracker-device(v-else-if='device[0] === "base"' :class='trackingResultToClass(device[4])') + img(v-if='device[1] !== "connected"' src='images/base_status_off.png') + img(v-else src='images/base_status_ready.png') + span(v-if='device[3] !== 100') {{ device[3] }}x + .x-containerbottom + template(v-if='nowPlaying.playing') + span(style='float: right; padding-left: 10px') {{ nowPlaying.remainingText }} + marquee-text {{ nowPlaying.name }} ‎ + .np-progress-bar(:style='{ width: nowPlaying.percentage + "%" }') + template(v-if='lastLocation.date !== 0') + template(v-if='config && config.minimalFeed') + span(style='float: right') {{ lastLocationTimer }} + template(v-if='onlineForTimer') + |  / {{ onlineForTimer }} + template(v-if='pcUptime') + |  / {{ pcUptime }} + span(style='display: inline-block') {{ lastLocation.playerList.length }} + span(style='display: inline-block; font-weight: bold') {{ lastLocation.friendList.length !== 0 ? `‎‎‎‎‎‎‎‎‏‏‎ ‎(${lastLocation.friendList.length})` : '' }} + template(v-else) + span(style='float: right') {{ $t('vr.status.timer') }} {{ lastLocationTimer }} + template(v-if='onlineForTimer') + |  / {{ onlineForTimer }} + template(v-if='pcUptime') + |  / {{ pcUptime }} + span(style='display: inline-block') {{ $t('vr.status.players') }} {{ lastLocation.playerList.length }} + span(style='display: inline-block; font-weight: bold') {{ lastLocation.friendList.length !== 0 ? `‎‎‎‎‎‎‎‎‏‏‎ ‎(${lastLocation.friendList.length})` : '' }} + br + span(style='float: right') {{ currentTime }} + span(v-if='config && cpuUsageEnabled' style='display: inline-block; margin-right: 5px') {{ $t('vr.status.cpu') }} {{ cpuUsage }}% + span(style='display: inline-block') {{ $t('vr.status.online') }} {{ onlineFriendCount }} ‎{{ customInfo }} + template(v-else) + svg.np-progress-circle + circle.np-progress-circle-stroke( + cx='60' + cy='60' + stroke='white' + r='30' + fill='transparent' + stroke-width='60') + .hud-feed + div(v-for='feed in hudFeed') + .item(:class='{ friend: feed.isFriend, favorite: feed.isFavorite }') #[span(v-if='feed.isMaster') 👑]#[span(v-if='feed.isModerator') ⚔️]#[strong.name(v-text='feed.displayName' :style='{ color: feed.colour }')] + template(v-if='feed.type === "ChangeAvatar"') + span(style='margin-left: 10px; color: #a3a3a3') ChangeAvatar + span(v-if='!feed.inCache' style='color: #aaa; margin-left: 10px') #[i.el-icon-download] + span(v-text='feed.avatar.name' style='margin-left: 10px') + span(v-if='feed.avatar.releaseStatus === "public"' style='margin-left: 10px; color: #67c23a') (Public) + span( + v-else-if='feed.avatar.releaseStatus === "private"' + style='margin-left: 10px; color: #e6a23c') (Private) + template(v-else-if='feed.type === "ChangeStatus"') + span(style='margin-left: 10px; color: #a3a3a3') ChangeStatus + span(v-if='feed.status !== feed.previousStatus') + i.x-user-status( + :class='statusClass(feed.previousStatus)' + style='margin-left: 10px; width: 20px; height: 20px') + span + i.el-icon-right + i.x-user-status(:class='statusClass(feed.status)' style='width: 20px; height: 20px') + span( + v-if='feed.statusDescription !== feed.previousStatusDescription' + v-text='feed.statusDescription' + style='margin-left: 10px') + template(v-else-if='feed.type === "ChangeGroup"') + span(style='margin-left: 10px; color: #a3a3a3') ChangeGroup + span(v-text='feed.groupName' style='margin-left: 10px') + template(v-else-if='feed.type === "ChatBoxMessage"') + span(style='margin-left: 10px; color: #a3a3a3') ChatBox + span(v-text='feed.text' style='margin-left: 10px; white-space: normal') + template(v-else-if='feed.type === "PortalSpawn"') + span(style='margin-left: 10px; color: #a3a3a3') PortalSpawn + location( + :location='feed.location' + :hint='feed.worldName' + :grouphint='feed.groupName' + :link='false' + style='margin-left: 10px') + template(v-else-if='feed.type === "OnPlayerJoined"') + span(style='margin-left: 10px; color: #a3a3a3') has joined + span(v-if='feed.platform === "Desktop"' style='color: #409eff; margin-left: 10px') Desktop + span(v-else-if='feed.platform === "VR"' style='color: #409eff; margin-left: 10px') VR + span(v-else-if='feed.platform === "Quest"' style='color: #67c23a; margin-left: 10px') Quest + span(v-else-if='feed.platform === "iOS"' style='color: #c7c7ce; margin-left: 10px') iOS + span(v-if='!feed.inCache' style='color: #aaa; margin-left: 10px') #[i.el-icon-download] + span(v-text='feed.avatar.name' style='margin-left: 10px') + template(v-else-if='feed.type === "SpawnEmoji"') + span(style='margin-left: 10px; color: #a3a3a3') SpawnEmoji + span(v-text='feed.text' style='margin-left: 10px') + span( + v-else-if='feed.color === "yellow"' + v-text='feed.text' + style='color: yellow; margin-left: 10px') + span(v-else style='margin-left: 10px; color: #a3a3a3' v-text='feed.text') + template(v-if='feed.combo > 1') + span.combo(style='margin-left: 10px') x{{ feed.combo }} + .hud-timeout(v-if='hudTimeout.length > 0') + .hud-timeout-feed + div(v-for='feed in hudTimeout') + p.item ({{ feed.time }}s) {{ feed.displayName }} + svg( + version='1.1' + xmlns='http://www.w3.org/2000/svg' + xmlns:xlink='http://www.w3.org/1999/xlink' + xml:space='preserve') + path( + fill='#ED1B24' + d='M68.6,96.5L87,78.1c1.6-1.6,1.6-4.1,0-5.7s-4.1-1.6-5.7,0L62.9,90.9L44.5,72.5l18.4-18.4c1.6-1.6,1.6-4.1,0-5.7c-1.6-1.6-4.1-1.6-5.7,0L38.9,66.8l-6.4-6.4L21.2,71.8C11,82,9.7,97.9,17.4,109.5L0,126.9l8.5,8.5L25.9,118c11.6,7.7,27.5,6.4,37.8-3.8L75,102.9C75,102.9,68.6,96.5,68.6,96.5z') + path( + fill='#ED1B24' + d='M102.9,75l11.3-11.3c10.3-10.3,11.5-26.1,3.8-37.8l17.4-17.4L126.9,0l-17.4,17.4C97.9,9.7,82,11,71.8,21.2L60.5,32.5C102,74,60.8,32.9,102.9,75z') +script(src='vendor.js') +script(src='vr.js') diff --git a/webpack.config.js b/webpack.config.js index add02127..b9960e22 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -100,13 +100,13 @@ module.exports = { }), new HtmlWebpackPlugin({ filename: 'index.html', - template: './src/index.pug', + template: './src/static/index.html', inject: false, minify: false }), new HtmlWebpackPlugin({ filename: 'vr.html', - template: './src/vr.pug', + template: './src/static/vr.html', inject: false, minify: false }),