mirror of
https://github.com/PhaseII-eAmusement-Network/PhaseWeb3-Vue.git
synced 2026-04-25 07:18:31 -05:00
Day 1 of work on the public beta
Today I made a shit ton of progress slimming down the webui. I also added a lot of new assets for games. Charts have been replaced with a much nicer library that handles charts.
This commit is contained in:
Trenton Zimmer
parent
5b612e8c7f
commit
87a49fb602
55
package-lock.json
generated
55
package-lock.json
generated
|
|
@ -16,7 +16,8 @@
|
|||
"particles.js": "^2.0.0",
|
||||
"pinia": "^2.0.13",
|
||||
"vue": "^3.0.0",
|
||||
"vue-router": "^4.0.0"
|
||||
"vue-router": "^4.0.0",
|
||||
"vue3-easy-data-table": "^1.5.47"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@rushstack/eslint-patch": "^1.1.4",
|
||||
|
|
@ -654,9 +655,9 @@
|
|||
}
|
||||
},
|
||||
"node_modules/caniuse-lite": {
|
||||
"version": "1.0.30001554",
|
||||
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001554.tgz",
|
||||
"integrity": "sha512-A2E3U//MBwbJVzebddm1YfNp7Nud5Ip+IPn4BozBmn4KqVX7AvluoIDFWjsv5OkGnKUXQVmMSoMKLa3ScCblcQ==",
|
||||
"version": "1.0.30001628",
|
||||
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001628.tgz",
|
||||
"integrity": "sha512-S3BnR4Kh26TBxbi5t5kpbcUlLJb9lhtDXISDPwOfI+JoC+ik0QksvkZtUVyikw3hjnkgkMPSJ8oIM9yMm9vflA==",
|
||||
"dev": true,
|
||||
"funding": [
|
||||
{
|
||||
|
|
@ -1568,9 +1569,9 @@
|
|||
"dev": true
|
||||
},
|
||||
"node_modules/follow-redirects": {
|
||||
"version": "1.15.2",
|
||||
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.2.tgz",
|
||||
"integrity": "sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==",
|
||||
"version": "1.15.6",
|
||||
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.6.tgz",
|
||||
"integrity": "sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA==",
|
||||
"funding": [
|
||||
{
|
||||
"type": "individual",
|
||||
|
|
@ -2926,9 +2927,9 @@
|
|||
"dev": true
|
||||
},
|
||||
"node_modules/vite": {
|
||||
"version": "3.2.7",
|
||||
"resolved": "https://registry.npmjs.org/vite/-/vite-3.2.7.tgz",
|
||||
"integrity": "sha512-29pdXjk49xAP0QBr0xXqu2s5jiQIXNvE/xwd0vUizYT2Hzqe4BksNNoWllFVXJf4eLZ+UlVQmXfB4lWrc+t18g==",
|
||||
"version": "3.2.10",
|
||||
"resolved": "https://registry.npmjs.org/vite/-/vite-3.2.10.tgz",
|
||||
"integrity": "sha512-Dx3olBo/ODNiMVk/cA5Yft9Ws+snLOXrhLtrI3F4XLt4syz2Yg8fayZMWScPKoz12v5BUv7VEmQHnsfpY80fYw==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"esbuild": "^0.15.9",
|
||||
|
|
@ -3024,6 +3025,14 @@
|
|||
"vue": "^3.2.0"
|
||||
}
|
||||
},
|
||||
"node_modules/vue3-easy-data-table": {
|
||||
"version": "1.5.47",
|
||||
"resolved": "https://registry.npmjs.org/vue3-easy-data-table/-/vue3-easy-data-table-1.5.47.tgz",
|
||||
"integrity": "sha512-q0bZBlWIwQ3FIhB+F98ylFPfBJWiS3Xv7QqBe3xS5MbRNZP96RFjaQn7C0Pi0J/aaucNW8gFWxPyh9NESS1ehw==",
|
||||
"dependencies": {
|
||||
"vue": "^3.2.45"
|
||||
}
|
||||
},
|
||||
"node_modules/which": {
|
||||
"version": "2.0.2",
|
||||
"resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
|
||||
|
|
@ -3542,9 +3551,9 @@
|
|||
"dev": true
|
||||
},
|
||||
"caniuse-lite": {
|
||||
"version": "1.0.30001554",
|
||||
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001554.tgz",
|
||||
"integrity": "sha512-A2E3U//MBwbJVzebddm1YfNp7Nud5Ip+IPn4BozBmn4KqVX7AvluoIDFWjsv5OkGnKUXQVmMSoMKLa3ScCblcQ==",
|
||||
"version": "1.0.30001628",
|
||||
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001628.tgz",
|
||||
"integrity": "sha512-S3BnR4Kh26TBxbi5t5kpbcUlLJb9lhtDXISDPwOfI+JoC+ik0QksvkZtUVyikw3hjnkgkMPSJ8oIM9yMm9vflA==",
|
||||
"dev": true
|
||||
},
|
||||
"chalk": {
|
||||
|
|
@ -4118,9 +4127,9 @@
|
|||
"dev": true
|
||||
},
|
||||
"follow-redirects": {
|
||||
"version": "1.15.2",
|
||||
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.2.tgz",
|
||||
"integrity": "sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA=="
|
||||
"version": "1.15.6",
|
||||
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.6.tgz",
|
||||
"integrity": "sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA=="
|
||||
},
|
||||
"form-data": {
|
||||
"version": "4.0.0",
|
||||
|
|
@ -5016,9 +5025,9 @@
|
|||
"dev": true
|
||||
},
|
||||
"vite": {
|
||||
"version": "3.2.7",
|
||||
"resolved": "https://registry.npmjs.org/vite/-/vite-3.2.7.tgz",
|
||||
"integrity": "sha512-29pdXjk49xAP0QBr0xXqu2s5jiQIXNvE/xwd0vUizYT2Hzqe4BksNNoWllFVXJf4eLZ+UlVQmXfB4lWrc+t18g==",
|
||||
"version": "3.2.10",
|
||||
"resolved": "https://registry.npmjs.org/vite/-/vite-3.2.10.tgz",
|
||||
"integrity": "sha512-Dx3olBo/ODNiMVk/cA5Yft9Ws+snLOXrhLtrI3F4XLt4syz2Yg8fayZMWScPKoz12v5BUv7VEmQHnsfpY80fYw==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"esbuild": "^0.15.9",
|
||||
|
|
@ -5063,6 +5072,14 @@
|
|||
"@vue/devtools-api": "^6.4.5"
|
||||
}
|
||||
},
|
||||
"vue3-easy-data-table": {
|
||||
"version": "1.5.47",
|
||||
"resolved": "https://registry.npmjs.org/vue3-easy-data-table/-/vue3-easy-data-table-1.5.47.tgz",
|
||||
"integrity": "sha512-q0bZBlWIwQ3FIhB+F98ylFPfBJWiS3Xv7QqBe3xS5MbRNZP96RFjaQn7C0Pi0J/aaucNW8gFWxPyh9NESS1ehw==",
|
||||
"requires": {
|
||||
"vue": "^3.2.45"
|
||||
}
|
||||
},
|
||||
"which": {
|
||||
"version": "2.0.2",
|
||||
"resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
|
||||
|
|
|
|||
|
|
@ -16,7 +16,8 @@
|
|||
"particles.js": "^2.0.0",
|
||||
"pinia": "^2.0.13",
|
||||
"vue": "^3.0.0",
|
||||
"vue-router": "^4.0.0"
|
||||
"vue-router": "^4.0.0",
|
||||
"vue3-easy-data-table": "^1.5.47"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@rushstack/eslint-patch": "^1.1.4",
|
||||
|
|
|
|||
BIN
public/assets/card/bst.png
Normal file
BIN
public/assets/card/bst.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 532 KiB |
BIN
public/assets/card/dancerush.png
Normal file
BIN
public/assets/card/dancerush.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.6 MiB |
BIN
public/assets/card/danevo.png
Normal file
BIN
public/assets/card/danevo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 278 KiB |
BIN
public/assets/card/time.png
Normal file
BIN
public/assets/card/time.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.9 MiB |
BIN
public/assets/games/bst/card/1.png
Normal file
BIN
public/assets/games/bst/card/1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 732 KiB |
BIN
public/assets/games/bst/card/2.png
Normal file
BIN
public/assets/games/bst/card/2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 388 KiB |
BIN
public/assets/games/dancerush/card/1.png
Normal file
BIN
public/assets/games/dancerush/card/1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.6 MiB |
BIN
public/assets/games/danevo/card/1.png
Normal file
BIN
public/assets/games/danevo/card/1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 278 KiB |
BIN
public/assets/icon/bishi.png
Normal file
BIN
public/assets/icon/bishi.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 276 KiB |
BIN
public/assets/icon/bst.png
Normal file
BIN
public/assets/icon/bst.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 109 KiB |
BIN
public/assets/icon/dancerush.png
Normal file
BIN
public/assets/icon/dancerush.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 295 KiB |
BIN
public/assets/icon/danevo.png
Normal file
BIN
public/assets/icon/danevo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 74 KiB |
File diff suppressed because one or more lines are too long
|
|
@ -1 +0,0 @@
|
|||
{"data":[{"amount":375.53,"account":"45721474","name":"Home Loan Account","date":"3 days ago","type":"deposit","business":"Turcotte"},{"amount":470.26,"account":"94486537","name":"Savings Account","date":"3 days ago","type":"payment","business":"Murazik - Graham"},{"amount":971.34,"account":"63189893","name":"Checking Account","date":"5 days ago","type":"invoice","business":"Fahey - Keebler"},{"amount":374.63,"account":"74828780","name":"Auto Loan Account","date":"7 days ago","type":"withdrawal","business":"Collier - Hintz"}]}
|
||||
44
src/App.vue
44
src/App.vue
|
|
@ -5,3 +5,47 @@ import { RouterView } from "vue-router";
|
|||
<template>
|
||||
<RouterView :key="$route.fullPath" />
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.customize-table {
|
||||
--easy-table-border: 1px solid #445269;
|
||||
--easy-table-row-border: 1px solid #445269;
|
||||
|
||||
--easy-table-header-font-size: 14px;
|
||||
--easy-table-header-height: 50px;
|
||||
--easy-table-header-font-color: #c1cad4;
|
||||
--easy-table-header-background-color: #2d3a4f;
|
||||
|
||||
--easy-table-header-item-padding: 10px 15px;
|
||||
|
||||
--easy-table-body-even-row-font-color: #fff;
|
||||
--easy-table-body-even-row-background-color: #4c5d7a;
|
||||
|
||||
--easy-table-body-row-font-color: #c0c7d2;
|
||||
--easy-table-body-row-background-color: #2d3a4f;
|
||||
--easy-table-body-row-height: 50px;
|
||||
--easy-table-body-row-font-size: 14px;
|
||||
|
||||
--easy-table-body-row-hover-font-color: #2d3a4f;
|
||||
--easy-table-body-row-hover-background-color: #eee;
|
||||
|
||||
--easy-table-body-item-padding: 10px 15px;
|
||||
|
||||
--easy-table-footer-background-color: #2d3a4f;
|
||||
--easy-table-footer-font-color: #c0c7d2;
|
||||
--easy-table-footer-font-size: 14px;
|
||||
--easy-table-footer-padding: 0px 10px;
|
||||
--easy-table-footer-height: 50px;
|
||||
|
||||
--easy-table-rows-per-page-selector-width: 70px;
|
||||
--easy-table-rows-per-page-selector-option-padding: 10px;
|
||||
--easy-table-rows-per-page-selector-z-index: 1;
|
||||
|
||||
--easy-table-scrollbar-track-color: #2d3a4f;
|
||||
--easy-table-scrollbar-color: #2d3a4f;
|
||||
--easy-table-scrollbar-thumb-color: #4c5d7a;
|
||||
--easy-table-scrollbar-corner-color: #2d3a4f;
|
||||
|
||||
--easy-table-loading-mask-background-color: #2d3a4f;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -48,7 +48,7 @@ export const getButtonColor = (
|
|||
success: "ring-emerald-300 dark:ring-emerald-700",
|
||||
danger: "ring-red-300 dark:ring-red-700",
|
||||
warning: "ring-yellow-300 dark:ring-yellow-700",
|
||||
info: "ring-blue-300 dark:ring-blue-700",
|
||||
info: "ring-blue-300 dark:ring-blue-800",
|
||||
},
|
||||
active: {
|
||||
white: "bg-gray-100",
|
||||
|
|
@ -65,10 +65,10 @@ export const getButtonColor = (
|
|||
whiteDark: "bg-white text-black dark:bg-slate-900 dark:text-white",
|
||||
lightDark: "bg-gray-100 text-black dark:bg-slate-800 dark:text-white",
|
||||
contrast: "bg-gray-800 text-white dark:bg-white dark:text-black",
|
||||
success: "bg-emerald-600 dark:bg-emerald-500 text-white",
|
||||
danger: "bg-red-600 dark:bg-red-500 text-white",
|
||||
warning: "bg-yellow-600 dark:bg-yellow-500 text-white",
|
||||
info: "bg-blue-600 dark:bg-blue-500 text-white",
|
||||
success: "bg-emerald-600 dark:bg-emerald-700 text-white",
|
||||
danger: "bg-red-600 dark:bg-red-800 text-white",
|
||||
warning: "bg-yellow-600 dark:bg-yellow-700 text-white",
|
||||
info: "bg-blue-600 dark:bg-blue-900 text-white",
|
||||
},
|
||||
bgHover: {
|
||||
white: "hover:bg-gray-100",
|
||||
|
|
|
|||
|
|
@ -47,7 +47,7 @@ const props = defineProps({
|
|||
},
|
||||
outline: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
default: false,
|
||||
},
|
||||
active: Boolean,
|
||||
disabled: Boolean,
|
||||
|
|
|
|||
|
|
@ -49,7 +49,6 @@ function openNewsView() {
|
|||
<div
|
||||
class="outline outline-green-900/50 hover:scale-[1.01] hover:shadow-xl hover:outline hover:outline-blue-500/50 hover:bg-slate-500 hover:dark:bg-slate-950/90 bg-white dark:bg-slate-900/90 rounded-xl p-4 h-full w-full transition-all duration-10"
|
||||
>
|
||||
<p class="text-sm font-bold">Unread</p>
|
||||
<p class="text-sm">{{ props.date }}</p>
|
||||
<hr class="pb-1" />
|
||||
<h2 class="text-xl pb-2">{{ props.title }}</h2>
|
||||
|
|
|
|||
|
|
@ -40,22 +40,25 @@ const thisGame = getGameInfo(props.game);
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex content-center justify-center items-center">
|
||||
<img v-if="profile.avatar" class="h-40" :src="profile.avatar" />
|
||||
<div class="space-y-2 text-center md:text-left lg:mx-12 p-2">
|
||||
<h1 :class="colorText()" class="text-3xl md:text-4xl font-bold">
|
||||
<div class="md:flex content-center justify-center items-center">
|
||||
<!-- <img v-if="profile.avatar" class="h-40" :src="profile.avatar" /> -->
|
||||
<div class="grid grid-cols-1 text-center">
|
||||
<h1 :class="colorText()" class="text-4xl md:text-5xl font-bold">
|
||||
{{ profile.name }}
|
||||
</h1>
|
||||
<p class="text-xl font-mono">{{ dashCode(profile.extid) }}</p>
|
||||
<p class="text-md md:text-lg">
|
||||
</div>
|
||||
<div class="space-y-2 text-center md:text-left lg:mx-12 p-2">
|
||||
<!-- <p class="text-md md:text-lg">
|
||||
Last played at <b>{{ profile.last.arcade }}</b> on
|
||||
<b>{{ profile.last.date }}</b>
|
||||
</p>
|
||||
</p> -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-3">
|
||||
<BaseButton
|
||||
v-if="!useSmall && game"
|
||||
:icon="mdiAccountDetails"
|
||||
:href="`/#/games/${game}/profiles/${profile.id}`"
|
||||
:outline="false"
|
||||
color="info"
|
||||
label="View Profile"
|
||||
/>
|
||||
|
|
@ -63,6 +66,7 @@ const thisGame = getGameInfo(props.game);
|
|||
v-if="!useSmall && game"
|
||||
:icon="mdiCog"
|
||||
:href="`/#/games/${game}/profiles/${profile.id}/edit`"
|
||||
:outline="false"
|
||||
color="info"
|
||||
label="Edit Profile"
|
||||
/>
|
||||
|
|
@ -70,6 +74,7 @@ const thisGame = getGameInfo(props.game);
|
|||
v-if="!useSmall && !thisGame.noScores"
|
||||
:href="`/#/games/${game}/scores/${profile.id}`"
|
||||
:icon="mdiPlaylistMusicOutline"
|
||||
:outline="false"
|
||||
color="info"
|
||||
label="My Scores"
|
||||
/>
|
||||
|
|
@ -77,9 +82,26 @@ const thisGame = getGameInfo(props.game);
|
|||
v-if="!useSmall && !thisGame.noRecords"
|
||||
:href="`/#/games/${game}/records/${profile.id}`"
|
||||
:icon="mdiFormatListText"
|
||||
:outline="false"
|
||||
color="info"
|
||||
label="My Records"
|
||||
/>
|
||||
<BaseButton
|
||||
v-if="!useSmall && !thisGame.noScores"
|
||||
:href="`/#/games/${game}/scores`"
|
||||
:icon="mdiPlaylistMusicOutline"
|
||||
:outline="false"
|
||||
color="info"
|
||||
label="Network Scores"
|
||||
/>
|
||||
<BaseButton
|
||||
v-if="!useSmall && !thisGame.noRecords"
|
||||
:href="`/#/games/${game}/records`"
|
||||
:icon="mdiFormatListText"
|
||||
:outline="false"
|
||||
color="info"
|
||||
label="Network Records"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
47
src/components/GeneralTable.vue
Normal file
47
src/components/GeneralTable.vue
Normal file
|
|
@ -0,0 +1,47 @@
|
|||
<script setup>
|
||||
import { ref } from "vue";
|
||||
|
||||
// Define props
|
||||
// eslint-disable-next-line vue/require-prop-types
|
||||
const props = defineProps(["headers", "items"]);
|
||||
|
||||
// Create a loading state
|
||||
const isLoading = ref(true);
|
||||
|
||||
var setItems = [];
|
||||
|
||||
// Simulate loading data (for example, you might fetch data from an API)
|
||||
setTimeout(() => {
|
||||
isLoading.value = false;
|
||||
setItems = props.items;
|
||||
// You can set props.items here if you are fetching data dynamically
|
||||
// For demonstration, we leave it as an empty array to show the empty message slot
|
||||
}, 500);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<EasyDataTable
|
||||
:headers="headers"
|
||||
:items="setItems"
|
||||
:loading="isLoading"
|
||||
theme-color="#1d90ff"
|
||||
table-class-name="customize-table"
|
||||
header-text-direction="left"
|
||||
body-text-direction="left"
|
||||
>
|
||||
<template #loading>
|
||||
<div class="text-center align-center grid">
|
||||
<img
|
||||
class="rounded-full place-self-center"
|
||||
src="/icon.gif"
|
||||
width="60"
|
||||
/>
|
||||
<h1 class="text-lg text-gray-100">Loading</h1>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template #empty-message>
|
||||
<h1 class="text-xl text-gray-100">No data to show... 😔</h1>
|
||||
</template>
|
||||
</EasyDataTable>
|
||||
</template>
|
||||
|
|
@ -1,81 +0,0 @@
|
|||
<script setup>
|
||||
import { computed, ref } from "vue";
|
||||
import { useMainStore } from "@/stores/main";
|
||||
import BaseLevel from "@/components/BaseLevel.vue";
|
||||
import BaseButtons from "@/components/BaseButtons.vue";
|
||||
import BaseButton from "@/components/BaseButton.vue";
|
||||
|
||||
const mainStore = useMainStore();
|
||||
|
||||
const items = computed(() => mainStore.clients);
|
||||
|
||||
const perPage = ref(5);
|
||||
|
||||
const currentPage = ref(0);
|
||||
|
||||
const itemsPaginated = computed(() =>
|
||||
items.value.slice(
|
||||
perPage.value * currentPage.value,
|
||||
perPage.value * (currentPage.value + 1)
|
||||
)
|
||||
);
|
||||
|
||||
const numPages = computed(() => Math.ceil(items.value.length / perPage.value));
|
||||
|
||||
const currentPageHuman = computed(() => currentPage.value + 1);
|
||||
|
||||
const pagesList = computed(() => {
|
||||
const pagesList = [];
|
||||
|
||||
for (let i = 0; i < numPages.value; i++) {
|
||||
pagesList.push(i);
|
||||
}
|
||||
|
||||
return pagesList;
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Username</th>
|
||||
<th>Rival ID</th>
|
||||
<th>Creation Date</th>
|
||||
<th>Last Played</th>
|
||||
<th>Last Arcade</th>
|
||||
<th>Play Count</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr
|
||||
v-for="client in itemsPaginated"
|
||||
:key="client.id"
|
||||
class="border-b-[12px] lg:border-b-0"
|
||||
>
|
||||
<td data-label="Username">TRMAZI</td>
|
||||
<td data-label="Rival ID">1234-5678</td>
|
||||
<td data-label="Creation Date">10/22/2022</td>
|
||||
<td data-label="Last Played">10/22/2022</td>
|
||||
<td data-label="Last Arcade">Ho-House</td>
|
||||
<td data-label="Play Count" class="lg:w-32">466</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="p-3 lg:px-6 border-t border-gray-100 dark:border-slate-800">
|
||||
<BaseLevel>
|
||||
<BaseButtons>
|
||||
<BaseButton
|
||||
v-for="page in pagesList"
|
||||
:key="page"
|
||||
:active="page === currentPage"
|
||||
:label="page + 1"
|
||||
:color="page === currentPage ? 'lightDark' : 'whiteDark'"
|
||||
small
|
||||
@click="currentPage = page"
|
||||
/>
|
||||
</BaseButtons>
|
||||
<small>Page {{ currentPageHuman }} of {{ numPages }}</small>
|
||||
</BaseLevel>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -1,186 +0,0 @@
|
|||
<script setup>
|
||||
import { computed, ref } from "vue";
|
||||
import { useMainStore } from "@/stores/main";
|
||||
import { mdiEye, mdiTrashCan } from "@mdi/js";
|
||||
import CardBoxModal from "@/components/CardBoxModal.vue";
|
||||
import TableCheckboxCell from "@/components/TableCheckboxCell.vue";
|
||||
import BaseLevel from "@/components/BaseLevel.vue";
|
||||
import BaseButtons from "@/components/BaseButtons.vue";
|
||||
import BaseButton from "@/components/BaseButton.vue";
|
||||
import UserAvatar from "@/components/UserAvatar.vue";
|
||||
|
||||
defineProps({
|
||||
checkable: Boolean,
|
||||
});
|
||||
|
||||
const mainStore = useMainStore();
|
||||
|
||||
const items = computed(() => mainStore.clients);
|
||||
|
||||
const isModalActive = ref(false);
|
||||
|
||||
const isModalDangerActive = ref(false);
|
||||
|
||||
const perPage = ref(5);
|
||||
|
||||
const currentPage = ref(0);
|
||||
|
||||
const checkedRows = ref([]);
|
||||
|
||||
const itemsPaginated = computed(() =>
|
||||
items.value.slice(
|
||||
perPage.value * currentPage.value,
|
||||
perPage.value * (currentPage.value + 1)
|
||||
)
|
||||
);
|
||||
|
||||
const numPages = computed(() => Math.ceil(items.value.length / perPage.value));
|
||||
|
||||
const currentPageHuman = computed(() => currentPage.value + 1);
|
||||
|
||||
const pagesList = computed(() => {
|
||||
const pagesList = [];
|
||||
|
||||
for (let i = 0; i < numPages.value; i++) {
|
||||
pagesList.push(i);
|
||||
}
|
||||
|
||||
return pagesList;
|
||||
});
|
||||
|
||||
const remove = (arr, cb) => {
|
||||
const newArr = [];
|
||||
|
||||
arr.forEach((item) => {
|
||||
if (!cb(item)) {
|
||||
newArr.push(item);
|
||||
}
|
||||
});
|
||||
|
||||
return newArr;
|
||||
};
|
||||
|
||||
const checked = (isChecked, client) => {
|
||||
if (isChecked) {
|
||||
checkedRows.value.push(client);
|
||||
} else {
|
||||
checkedRows.value = remove(
|
||||
checkedRows.value,
|
||||
(row) => row.id === client.id
|
||||
);
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<CardBoxModal v-model="isModalActive" title="Sample modal">
|
||||
<p>Lorem ipsum dolor sit amet <b>adipiscing elit</b></p>
|
||||
<p>This is sample modal</p>
|
||||
</CardBoxModal>
|
||||
|
||||
<CardBoxModal
|
||||
v-model="isModalDangerActive"
|
||||
title="Please confirm"
|
||||
button="danger"
|
||||
has-cancel
|
||||
>
|
||||
<p>Lorem ipsum dolor sit amet <b>adipiscing elit</b></p>
|
||||
<p>This is sample modal</p>
|
||||
</CardBoxModal>
|
||||
|
||||
<div v-if="checkedRows.length" class="p-3 bg-gray-100/50 dark:bg-slate-800">
|
||||
<span
|
||||
v-for="checkedRow in checkedRows"
|
||||
:key="checkedRow.id"
|
||||
class="inline-block px-2 py-1 rounded-sm mr-2 text-sm bg-gray-100 dark:bg-slate-700"
|
||||
>
|
||||
{{ checkedRow.name }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th v-if="checkable" />
|
||||
<th />
|
||||
<th>Name</th>
|
||||
<th>Company</th>
|
||||
<th>City</th>
|
||||
<th>Progress</th>
|
||||
<th>Created</th>
|
||||
<th />
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="client in itemsPaginated" :key="client.id">
|
||||
<TableCheckboxCell
|
||||
v-if="checkable"
|
||||
@checked="checked($event, client)"
|
||||
/>
|
||||
<td class="border-b-0 lg:w-6 before:hidden">
|
||||
<UserAvatar
|
||||
:username="client.name"
|
||||
class="w-24 h-24 mx-auto lg:w-6 lg:h-6"
|
||||
/>
|
||||
</td>
|
||||
<td data-label="Name">
|
||||
{{ client.name }}
|
||||
</td>
|
||||
<td data-label="Company">
|
||||
{{ client.company }}
|
||||
</td>
|
||||
<td data-label="City">
|
||||
{{ client.city }}
|
||||
</td>
|
||||
<td data-label="Progress" class="lg:w-32">
|
||||
<progress
|
||||
class="flex w-2/5 self-center lg:w-full"
|
||||
max="100"
|
||||
:value="client.progress"
|
||||
>
|
||||
{{ client.progress }}
|
||||
</progress>
|
||||
</td>
|
||||
<td data-label="Created" class="lg:w-1 whitespace-nowrap">
|
||||
<small
|
||||
class="text-gray-500 dark:text-slate-400"
|
||||
:title="client.created"
|
||||
>{{ client.created }}</small
|
||||
>
|
||||
</td>
|
||||
<td class="before:hidden lg:w-1 whitespace-nowrap">
|
||||
<BaseButtons type="justify-start lg:justify-end" no-wrap>
|
||||
<BaseButton
|
||||
color="info"
|
||||
:icon="mdiEye"
|
||||
small
|
||||
@click="isModalActive = true"
|
||||
/>
|
||||
<BaseButton
|
||||
color="danger"
|
||||
:icon="mdiTrashCan"
|
||||
small
|
||||
@click="isModalDangerActive = true"
|
||||
/>
|
||||
</BaseButtons>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="p-3 lg:px-6 border-t border-gray-100 dark:border-slate-800">
|
||||
<BaseLevel>
|
||||
<BaseButtons>
|
||||
<BaseButton
|
||||
v-for="page in pagesList"
|
||||
:key="page"
|
||||
:active="page === currentPage"
|
||||
:label="page + 1"
|
||||
:color="page === currentPage ? 'lightDark' : 'whiteDark'"
|
||||
small
|
||||
@click="currentPage = page"
|
||||
/>
|
||||
</BaseButtons>
|
||||
<small>Page {{ currentPageHuman }} of {{ numPages }}</small>
|
||||
</BaseLevel>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -1,109 +0,0 @@
|
|||
<script setup>
|
||||
import { reactive } from "vue";
|
||||
import BaseLevel from "@/components/BaseLevel.vue";
|
||||
import BaseButtons from "@/components/BaseButtons.vue";
|
||||
import BaseButton from "@/components/BaseButton.vue";
|
||||
import CardBoxComponentEmpty from "../CardBoxComponentEmpty.vue";
|
||||
|
||||
defineProps({
|
||||
game: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
isPersonal: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
entries: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
|
||||
const currentPage = reactive(0);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<table v-if="entries && entries.length">
|
||||
<thead>
|
||||
<tr>
|
||||
<th v-if="!isPersonal">Player</th>
|
||||
<th>Timestamp</th>
|
||||
<th>Song</th>
|
||||
<th>Chart</th>
|
||||
<th>Score</th>
|
||||
<th>Arcade</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="space-y">
|
||||
<tr
|
||||
v-for="score of entries"
|
||||
:key="score.id"
|
||||
class="border-b-[12px] lg:border-b-0"
|
||||
>
|
||||
<td v-if="!isPersonal" data-label="Player">
|
||||
<a
|
||||
class="grid grid-cols-1 hover:underline decoration-blue-700"
|
||||
:href="`/#/games/${game}/profiles/${score.playerId}`"
|
||||
>
|
||||
{{ score.player }}
|
||||
</a>
|
||||
</td>
|
||||
|
||||
<td data-label="Timestamp">{{ score.timestamp }}</td>
|
||||
|
||||
<td v-if="score.song" data-label="Song">
|
||||
<a
|
||||
class="grid grid-cols-1 hover:underline decoration-blue-700"
|
||||
:href="`/#/songs/${game}/${score.song.id}`"
|
||||
>
|
||||
<h2 class="italic">{{ score.song.name }}</h2>
|
||||
<h2>{{ score.song.artist }}</h2>
|
||||
</a>
|
||||
</td>
|
||||
|
||||
<td v-if="score.song" data-label="Chart">
|
||||
<div class="grid grid-cols-1">
|
||||
<h2>{{ score.song.chart }}</h2>
|
||||
<h2>Difficulty: {{ score.song.difficulty }}</h2>
|
||||
</div>
|
||||
</td>
|
||||
|
||||
<td data-label="Score">
|
||||
<div class="grid grid-cols-1">
|
||||
<h2>Grade: {{ score.grade }}</h2>
|
||||
<h2>Points: {{ score.points }}</h2>
|
||||
<h2>Max Combo: {{ score.combo }}</h2>
|
||||
</div>
|
||||
</td>
|
||||
|
||||
<td v-if="score.location" data-label="Arcade">
|
||||
<div class="grid grid-cols-1">
|
||||
<h2>{{ score.location.arcade }}</h2>
|
||||
<h2>Played on: {{ score.location.type }}</h2>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div
|
||||
v-if="entries && entries.length"
|
||||
class="p-3 lg:px-6 border-t border-gray-100 dark:border-slate-800"
|
||||
>
|
||||
<BaseLevel>
|
||||
<BaseButtons>
|
||||
<BaseButton
|
||||
v-for="page in 0"
|
||||
:key="page"
|
||||
:active="page === currentPage"
|
||||
:label="page + 1"
|
||||
:color="page === currentPage ? 'lightDark' : 'whiteDark'"
|
||||
small
|
||||
@click="currentPage = page"
|
||||
/>
|
||||
</BaseButtons>
|
||||
<small>Page {{ currentPageHuman }} of {{ numPages }}</small>
|
||||
</BaseLevel>
|
||||
</div>
|
||||
<CardBoxComponentEmpty v-else />
|
||||
</template>
|
||||
|
|
@ -27,12 +27,12 @@ const username = computed(() => props.username);
|
|||
:alt="username"
|
||||
class="w-full h-auto bg-gray-100 dark:bg-slate-800 rounded-full overflow-hidden"
|
||||
/>
|
||||
<img
|
||||
<!-- <img
|
||||
src="/assets/border/pride.png"
|
||||
alt="border"
|
||||
class="absolute inset-0 w-full h-full overflow-hidden scale-[1.02]"
|
||||
style="object-fit: fill"
|
||||
/>
|
||||
/> -->
|
||||
</div>
|
||||
<slot />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -2,11 +2,11 @@
|
|||
import { useMainStore } from "@/stores/main";
|
||||
import {
|
||||
mdiSecurity,
|
||||
mdiTestTube,
|
||||
mdiAccountStar,
|
||||
mdiCodeBraces,
|
||||
// mdiTestTube,
|
||||
// mdiAccountStar,
|
||||
// mdiCodeBraces,
|
||||
mdiAccountOff,
|
||||
mdiAccountCheck,
|
||||
// mdiAccountCheck,
|
||||
} from "@mdi/js";
|
||||
import BaseLevel from "@/components/BaseLevel.vue";
|
||||
import UserAvatarCurrentUser from "@/components/UserAvatarCurrentUser.vue";
|
||||
|
|
@ -32,11 +32,11 @@ const mainStore = useMainStore();
|
|||
|
||||
const greeting = GetRandomMessage();
|
||||
|
||||
var last = {
|
||||
game: "beatmaniaIIDX",
|
||||
version: "22 PENDUAL",
|
||||
arcade: "Ho-House",
|
||||
};
|
||||
// var last = {
|
||||
// game: "beatmaniaIIDX",
|
||||
// version: "22 PENDUAL",
|
||||
// arcade: "Ho-House",
|
||||
// };
|
||||
|
||||
function getCardStyle(game) {
|
||||
if (game !== null) {
|
||||
|
|
@ -50,7 +50,7 @@ function getCardStyle(game) {
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<CardBox :style="getCardStyle('iidx')">
|
||||
<CardBox :style="getCardStyle(mainStore.userCardStyle)">
|
||||
<BaseLevel
|
||||
type="justify-around lg:justify-center md:space-x-4 lg:space-x-0"
|
||||
class="bg-white dark:bg-slate-900/90 rounded-2xl p-3"
|
||||
|
|
@ -66,24 +66,24 @@ function getCardStyle(game) {
|
|||
<b>{{ mainStore.userName }}</b>
|
||||
</h1>
|
||||
<p v-if="useSmall && !evenSmaller" class="text-md md:text-lg">
|
||||
Last seen playing <b>{{ last.game }} {{ last.version }}</b> at
|
||||
<b>{{ last.arcade }}</b>
|
||||
<!-- Last seen playing <b>{{ last.game }} {{ last.version }}</b> at
|
||||
<b>{{ last.arcade }}</b> -->
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
v-if="!evenSmaller"
|
||||
class="md:grid md:grid-flow-col md:auto-cols-max md:grid-rows-2 flex flex-wrap gap-4 md:place-content-start place-content-center"
|
||||
class="md:grid md:grid-flow-col md:auto-cols-max md:grid-rows-1 flex flex-wrap gap-4 md:place-content-start place-content-center"
|
||||
>
|
||||
<PillTag label="System Admin" color="danger" :icon="mdiSecurity" />
|
||||
<PillTag label="Beta Tester" color="warning" :icon="mdiTestTube" />
|
||||
<!-- <PillTag label="Beta Tester" color="warning" :icon="mdiTestTube" />
|
||||
<PillTag label="Veteran" color="success" :icon="mdiAccountStar" />
|
||||
<PillTag label="Active Dev" color="info" :icon="mdiCodeBraces" />
|
||||
<PillTag label="Active Dev" color="info" :icon="mdiCodeBraces" /> -->
|
||||
<PillTag label="Private Profile" color="info" :icon="mdiAccountOff" />
|
||||
<PillTag
|
||||
<!-- <PillTag
|
||||
label="Public Profile"
|
||||
color="success"
|
||||
:icon="mdiAccountCheck"
|
||||
/>
|
||||
/> -->
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="!useSmall" class="text-center md:text-right">
|
||||
|
|
|
|||
|
|
@ -1,5 +1,7 @@
|
|||
export class IIDXDanConstants {
|
||||
static danList = [
|
||||
{ id: 0, label: "--", short: "--" },
|
||||
|
||||
{ id: 100, label: "7th Kyu (七級)", short: "七級" },
|
||||
{ id: 200, label: "6th Kyu (六級)", short: "六級" },
|
||||
{ id: 300, label: "5th Kyu (五級)", short: "五級" },
|
||||
|
|
@ -24,9 +26,8 @@ export class IIDXDanConstants {
|
|||
}
|
||||
|
||||
export function getIIDXDan(level) {
|
||||
var val = IIDXDanConstants.danList.find((x) => x.id == level);
|
||||
if (!val) {
|
||||
val = { id: 0, label: "--", short: "--" };
|
||||
if (level == 0) {
|
||||
return { id: 0, label: "--", short: "--" };
|
||||
}
|
||||
return val;
|
||||
return IIDXDanConstants.danList.find((x) => x.id == level);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -148,5 +148,60 @@
|
|||
"author": "Trmazi",
|
||||
"header": "<username> is the DJ of this gig!",
|
||||
"comment": "Are you good, or are you cool?"
|
||||
},
|
||||
{
|
||||
"author": "Yonokid",
|
||||
"header": "<username>. In the WebbedUI. Straight up \"Phase'n it\".",
|
||||
"comment": "and by \"it\", haha, well, let's justr say; My II"
|
||||
},
|
||||
{
|
||||
"author": "SQWERLY!",
|
||||
"header": "<username> always told me that it was just a phase…",
|
||||
"comment": "It wasn't a Phase, it was a PhaseII!"
|
||||
},
|
||||
{
|
||||
"author": "yaladre",
|
||||
"header": "<username>, is your refrigerator running?",
|
||||
"comment": "Because you better go catch it!"
|
||||
},
|
||||
{
|
||||
"author": "Kuusetsu",
|
||||
"header": "If C's get degrees, <username>",
|
||||
"comment": "You'd still fail."
|
||||
},
|
||||
{
|
||||
"author": "Azui",
|
||||
"header": "Ready to break the future, <username>?",
|
||||
"comment": "All your MFCs are belong to us!"
|
||||
},
|
||||
{
|
||||
"author": "towelie",
|
||||
"header": "Don't forget to bring a towel, <username>!",
|
||||
"comment": ""
|
||||
},
|
||||
{
|
||||
"author": "barru",
|
||||
"header": "Reject modernity, <username>",
|
||||
"comment": "Embrace BEMANI"
|
||||
},
|
||||
{
|
||||
"author": "barru",
|
||||
"header": "Insert \"<username>\"'s greeting here",
|
||||
"comment": "Insert caption here"
|
||||
},
|
||||
{
|
||||
"author": "barru",
|
||||
"header": "Welcome back, <username>!",
|
||||
"comment": "We’re glad to have you."
|
||||
},
|
||||
{
|
||||
"author": "barru",
|
||||
"header": "Nice scores, <username>!",
|
||||
"comment": "You never fail to impress."
|
||||
},
|
||||
{
|
||||
"author": "Galexion",
|
||||
"header": "Initializing User <username>...",
|
||||
"comment": "Communicating With Server... Please Wait..."
|
||||
}
|
||||
]
|
||||
|
|
@ -346,6 +346,10 @@ export const gameData = [
|
|||
noRivals: true,
|
||||
noScores: true,
|
||||
noRecords: true,
|
||||
extraHeaders: [
|
||||
{ text: "Region", value: "region", sortable: true, width: 100 },
|
||||
{ text: "Home Arcade", value: "homeArcade", sortable: true, width: 150 },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: GameConstants.BISHI_BASHI_NEW,
|
||||
|
|
@ -600,6 +604,15 @@ export const gameData = [
|
|||
name: "DRUMMANIA",
|
||||
icon: null,
|
||||
cardBG: null,
|
||||
extraHeaders: [
|
||||
{ text: "SKILL LEVEL", value: "skill.level", sortable: true, width: 120 },
|
||||
{
|
||||
text: "SKILL POINT",
|
||||
value: "skill.point",
|
||||
sortable: true,
|
||||
width: 150,
|
||||
},
|
||||
],
|
||||
versions: [
|
||||
{
|
||||
id: VersionConstants.DRUMMANIA_1ST,
|
||||
|
|
@ -720,6 +733,14 @@ export const gameData = [
|
|||
icon: null,
|
||||
cardBG: null,
|
||||
noRivals: true,
|
||||
extraHeaders: [
|
||||
{
|
||||
text: "SKILL POINT",
|
||||
value: "skill.point",
|
||||
sortable: true,
|
||||
width: 150,
|
||||
},
|
||||
],
|
||||
versions: GITADORA_VERSION_DATA,
|
||||
},
|
||||
{
|
||||
|
|
@ -728,6 +749,14 @@ export const gameData = [
|
|||
icon: null,
|
||||
cardBG: null,
|
||||
noRivals: true,
|
||||
extraHeaders: [
|
||||
{
|
||||
text: "SKILL POINT",
|
||||
value: "skill.point",
|
||||
sortable: true,
|
||||
width: 150,
|
||||
},
|
||||
],
|
||||
versions: GITADORA_VERSION_DATA,
|
||||
},
|
||||
{
|
||||
|
|
@ -735,6 +764,15 @@ export const gameData = [
|
|||
name: "GUITAR FREAKS",
|
||||
icon: null,
|
||||
cardBG: null,
|
||||
extraHeaders: [
|
||||
{ text: "SKILL LEVEL", value: "skill.level", sortable: true, width: 120 },
|
||||
{
|
||||
text: "SKILL POINT",
|
||||
value: "skill.point",
|
||||
sortable: true,
|
||||
width: 150,
|
||||
},
|
||||
],
|
||||
versions: [
|
||||
{
|
||||
id: VersionConstants.GUITARFREAKS_1ST,
|
||||
|
|
@ -820,6 +858,22 @@ export const gameData = [
|
|||
shortName: "IIDX",
|
||||
icon: "/assets/icon/iidx.png",
|
||||
cardBG: "/assets/card/iidx.png",
|
||||
extraHeaders: [
|
||||
{ text: "SP DAN", value: "sp.dan", sortable: true, width: 100 },
|
||||
{ text: "DP DAN", value: "dp.dan", sortable: true, width: 100 },
|
||||
{
|
||||
text: "SP DJPOINT",
|
||||
value: "sp.point",
|
||||
sortable: true,
|
||||
width: 150,
|
||||
},
|
||||
{
|
||||
text: "DP DJPOINT",
|
||||
value: "dp.point",
|
||||
sortable: true,
|
||||
width: 150,
|
||||
},
|
||||
],
|
||||
versions: [
|
||||
{
|
||||
id: VersionConstants.IIDX,
|
||||
|
|
@ -951,6 +1005,22 @@ export const gameData = [
|
|||
noRivals: true,
|
||||
noScores: true,
|
||||
noRecords: true,
|
||||
extraHeaders: [
|
||||
{ text: "SP DAN", value: "sp.dan", sortable: true, width: 100 },
|
||||
{ text: "DP DAN", value: "dp.dan", sortable: true, width: 100 },
|
||||
{
|
||||
text: "SP DJPOINT",
|
||||
value: "sp.point",
|
||||
sortable: true,
|
||||
width: 150,
|
||||
},
|
||||
{
|
||||
text: "DP DJPOINT",
|
||||
value: "dp.point",
|
||||
sortable: true,
|
||||
width: 150,
|
||||
},
|
||||
],
|
||||
versions: [
|
||||
{
|
||||
id: VersionConstants.IIDX,
|
||||
|
|
@ -1035,6 +1105,9 @@ export const gameData = [
|
|||
name: "jubeat",
|
||||
icon: null,
|
||||
cardBG: null,
|
||||
extraHeaders: [
|
||||
{ text: "Jubility", value: "jubility", sortable: true, width: 120 },
|
||||
],
|
||||
versions: [
|
||||
{
|
||||
id: VersionConstants.JUBEAT,
|
||||
|
|
@ -1102,6 +1175,9 @@ export const gameData = [
|
|||
noRivals: true,
|
||||
noScores: true,
|
||||
noRecords: true,
|
||||
extraHeaders: [
|
||||
{ text: "Girlfriend", value: "gf", sortable: true, width: 100 },
|
||||
],
|
||||
versions: [
|
||||
{
|
||||
id: VersionConstants.LOVEPLUS_ARCADE,
|
||||
|
|
@ -1364,6 +1440,10 @@ export const gameData = [
|
|||
shortName: "SDVX",
|
||||
icon: null,
|
||||
cardBG: null,
|
||||
extraHeaders: [
|
||||
{ text: "Skill Level", value: "skillLevel", sortable: true, width: 100 },
|
||||
{ text: "VOLFORCE", value: "vf", sortable: true, width: 100 },
|
||||
],
|
||||
versions: [
|
||||
{
|
||||
id: VersionConstants.SDVX_BOOTH,
|
||||
|
|
|
|||
|
|
@ -1,48 +0,0 @@
|
|||
@layer base {
|
||||
table {
|
||||
@apply w-full;
|
||||
}
|
||||
|
||||
thead {
|
||||
@apply hidden lg:table-header-group;
|
||||
}
|
||||
|
||||
tr {
|
||||
@apply max-w-full block relative border-b-4 border-gray-100
|
||||
lg:table-row lg:border-b-0 dark:border-slate-800;
|
||||
}
|
||||
|
||||
tr:last-child {
|
||||
@apply border-b-0;
|
||||
}
|
||||
|
||||
td:not(:first-child) {
|
||||
@apply lg:border-l lg:border-t-0 lg:border-r-0 lg:border-b-0 lg:border-gray-100 lg:dark:border-slate-700;
|
||||
}
|
||||
|
||||
th {
|
||||
@apply lg:text-left lg:p-3;
|
||||
}
|
||||
|
||||
td {
|
||||
@apply flex justify-between text-right py-3 px-4 align-top border-b border-gray-100
|
||||
lg:table-cell lg:text-left lg:p-3 lg:align-middle lg:border-b-0 dark:border-slate-800;
|
||||
}
|
||||
|
||||
td:last-child {
|
||||
@apply border-b-0;
|
||||
}
|
||||
|
||||
tbody tr, tbody tr:nth-child(odd) {
|
||||
@apply lg:hover:bg-gray-100 lg:dark:hover:bg-slate-700/70;
|
||||
}
|
||||
|
||||
tbody tr:nth-child(odd) {
|
||||
@apply lg:bg-gray-100/50 lg:dark:bg-slate-800/50;
|
||||
}
|
||||
|
||||
td:before {
|
||||
content: attr(data-label);
|
||||
@apply font-semibold pr-3 text-left lg:hidden;
|
||||
}
|
||||
}
|
||||
|
|
@ -5,7 +5,6 @@
|
|||
@import "_checkbox-radio-switch.css";
|
||||
@import "_progress.css";
|
||||
@import "_scrollbars.css";
|
||||
@import "_table.css";
|
||||
|
||||
.scale-enter-active,
|
||||
.scale-leave-active {
|
||||
|
|
|
|||
|
|
@ -18,6 +18,7 @@ useMainStore().setUser({
|
|||
email: "sex@sex.com",
|
||||
avatar:
|
||||
"https://cdn.discordapp.com/avatars/372530806628941824/a2d1b66d0e2100a571305b8281c26f8b",
|
||||
cardStyle: "time",
|
||||
});
|
||||
|
||||
const layoutAsidePadding = "xl:pl-60";
|
||||
|
|
@ -42,7 +43,7 @@ const menuClick = (event, item) => {
|
|||
};
|
||||
|
||||
const active = false;
|
||||
const isSave = true;
|
||||
const isSave = false;
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
|
|||
29
src/main.js
29
src/main.js
|
|
@ -1,42 +1,29 @@
|
|||
import { createApp } from "vue";
|
||||
import { createPinia } from "pinia";
|
||||
import Vue3EasyDataTable from "vue3-easy-data-table";
|
||||
import "vue3-easy-data-table/dist/style.css";
|
||||
|
||||
import App from "./App.vue";
|
||||
import router from "./router";
|
||||
import { useMainStore } from "@/stores/main.js";
|
||||
// import { useStyleStore } from "@/stores/style.js";
|
||||
// import { styleKey } from "@/config.js";
|
||||
|
||||
import "./css/main.css";
|
||||
|
||||
/* Init Pinia */
|
||||
const pinia = createPinia();
|
||||
|
||||
/* Create Vue app */
|
||||
createApp(App).use(router).use(pinia).mount("#app");
|
||||
const app = createApp(App);
|
||||
|
||||
/* Init Pinia stores */
|
||||
const mainStore = useMainStore(pinia);
|
||||
// const styleStore = useStyleStore(pinia);
|
||||
app.use(router);
|
||||
app.use(pinia);
|
||||
|
||||
/* Fetch sample data */
|
||||
mainStore.fetch("clients");
|
||||
mainStore.fetch("history");
|
||||
app.component("EasyDataTable", Vue3EasyDataTable);
|
||||
|
||||
/* App style
|
||||
styleStore.setStyle(localStorage[styleKey] ?? "basic");
|
||||
*/
|
||||
app.mount("#app");
|
||||
|
||||
/* Dark mode
|
||||
styleStore.setDarkMode(
|
||||
window.matchMedia("(prefers-color-scheme: dark)").matches
|
||||
);
|
||||
*/
|
||||
useMainStore(pinia);
|
||||
|
||||
/* Default title tag */
|
||||
const defaultDocumentTitle = "PhaseII eAmusement Network";
|
||||
|
||||
/* Set document title from route meta */
|
||||
router.afterEach((to) => {
|
||||
document.title = to.meta?.title
|
||||
? `${to.meta.title} — ${defaultDocumentTitle}`
|
||||
|
|
|
|||
|
|
@ -1,11 +1,4 @@
|
|||
import {
|
||||
mdiMonitor,
|
||||
mdiNewspaperVariant,
|
||||
mdiStorefront,
|
||||
mdiStoreCog,
|
||||
mdiGamepad,
|
||||
} from "@mdi/js";
|
||||
|
||||
import { mdiMonitor, mdiStoreCog, mdiGamepad } from "@mdi/js";
|
||||
import { gameData, arcadeList } from "./constants";
|
||||
|
||||
var sortedMenu = [];
|
||||
|
|
@ -77,16 +70,11 @@ export default [
|
|||
icon: mdiMonitor,
|
||||
label: "Dashboard",
|
||||
},
|
||||
{
|
||||
to: "/news",
|
||||
icon: mdiNewspaperVariant,
|
||||
label: "News",
|
||||
},
|
||||
{
|
||||
to: "/arcades",
|
||||
icon: mdiStorefront,
|
||||
label: "Public Arcades",
|
||||
},
|
||||
// {
|
||||
// to: "/arcades",
|
||||
// icon: mdiStorefront,
|
||||
// label: "Public Arcades",
|
||||
// },
|
||||
{
|
||||
label: "My Arcades",
|
||||
icon: mdiStoreCog,
|
||||
|
|
|
|||
|
|
@ -1,10 +1,7 @@
|
|||
import {
|
||||
mdiCogs,
|
||||
mdiAccount,
|
||||
mdiLogout,
|
||||
mdiServerNetwork,
|
||||
mdiBrushOutline,
|
||||
mdiFlagCheckered,
|
||||
mdiCardAccountDetailsOutline,
|
||||
} from "@mdi/js";
|
||||
|
||||
|
|
@ -17,11 +14,6 @@ export default [
|
|||
label: "Settings",
|
||||
to: "/profile",
|
||||
},
|
||||
{
|
||||
icon: mdiBrushOutline,
|
||||
label: "Customizations",
|
||||
to: "/profile/customize",
|
||||
},
|
||||
{
|
||||
icon: mdiServerNetwork,
|
||||
label: "Integrations",
|
||||
|
|
@ -34,15 +26,15 @@ export default [
|
|||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
to: "/goals",
|
||||
icon: mdiFlagCheckered,
|
||||
label: "Goals",
|
||||
},
|
||||
{
|
||||
icon: mdiCogs,
|
||||
label: "Edit Dashboard",
|
||||
},
|
||||
// {
|
||||
// to: "/goals",
|
||||
// icon: mdiFlagCheckered,
|
||||
// label: "Goals",
|
||||
// },
|
||||
// {
|
||||
// icon: mdiCogs,
|
||||
// label: "Edit Dashboard",
|
||||
// },
|
||||
{
|
||||
icon: mdiLogout,
|
||||
label: "Log out",
|
||||
|
|
|
|||
|
|
@ -10,14 +10,6 @@ const routes = [
|
|||
name: "dashboard",
|
||||
component: Home,
|
||||
},
|
||||
{
|
||||
meta: {
|
||||
title: "News",
|
||||
},
|
||||
path: "/news",
|
||||
name: "news",
|
||||
component: () => import("@/views/NewsView.vue"),
|
||||
},
|
||||
{
|
||||
meta: {
|
||||
title: "News Post",
|
||||
|
|
@ -42,14 +34,14 @@ const routes = [
|
|||
name: "register",
|
||||
component: () => import("@/views/Auth/RegisterView.vue"),
|
||||
},
|
||||
{
|
||||
meta: {
|
||||
title: "Reset Password",
|
||||
},
|
||||
path: "/auth/reset",
|
||||
name: "reset_pass",
|
||||
component: () => import("@/views/Auth/ResetView.vue"),
|
||||
},
|
||||
// {
|
||||
// meta: {
|
||||
// title: "Reset Password",
|
||||
// },
|
||||
// path: "/auth/reset",
|
||||
// name: "reset_pass",
|
||||
// component: () => import("@/views/Auth/ResetView.vue"),
|
||||
// },
|
||||
{
|
||||
meta: {
|
||||
title: "Profile",
|
||||
|
|
@ -58,14 +50,14 @@ const routes = [
|
|||
name: "profile",
|
||||
component: () => import("@/views/Profile/ProfileView.vue"),
|
||||
},
|
||||
{
|
||||
meta: {
|
||||
title: "Customizations",
|
||||
},
|
||||
path: "/profile/customize",
|
||||
name: "profile_customizations",
|
||||
component: () => import("@/views/Profile/CustomizeView.vue"),
|
||||
},
|
||||
// {
|
||||
// meta: {
|
||||
// title: "Customizations",
|
||||
// },
|
||||
// path: "/profile/customize",
|
||||
// name: "profile_customizations",
|
||||
// component: () => import("@/views/Profile/CustomizeView.vue"),
|
||||
// },
|
||||
{
|
||||
meta: {
|
||||
title: "Integrations",
|
||||
|
|
@ -82,14 +74,14 @@ const routes = [
|
|||
name: "profile_cards",
|
||||
component: () => import("@/views/Profile/CardsView.vue"),
|
||||
},
|
||||
{
|
||||
meta: {
|
||||
title: "Goals",
|
||||
},
|
||||
path: "/goals",
|
||||
name: "profile_goals",
|
||||
component: () => import("@/views/Profile/GoalsView.vue"),
|
||||
},
|
||||
// {
|
||||
// meta: {
|
||||
// title: "Goals",
|
||||
// },
|
||||
// path: "/goals",
|
||||
// name: "profile_goals",
|
||||
// component: () => import("@/views/Profile/GoalsView.vue"),
|
||||
// },
|
||||
{
|
||||
meta: {
|
||||
title: "View Profile",
|
||||
|
|
@ -101,14 +93,14 @@ const routes = [
|
|||
hotReload: true, // disables Hot Reload
|
||||
},
|
||||
},
|
||||
{
|
||||
meta: {
|
||||
title: "Public Arcades",
|
||||
},
|
||||
path: "/arcades",
|
||||
name: "arcade_list",
|
||||
component: () => import("@/views/ArcadesView.vue"),
|
||||
},
|
||||
// {
|
||||
// meta: {
|
||||
// title: "Public Arcades",
|
||||
// },
|
||||
// path: "/arcades",
|
||||
// name: "arcade_list",
|
||||
// component: () => import("@/views/ArcadesView.vue"),
|
||||
// },
|
||||
{
|
||||
meta: {
|
||||
title: "Arcade Overview",
|
||||
|
|
|
|||
|
|
@ -7,13 +7,10 @@ export const useMainStore = defineStore("main", {
|
|||
userName: null,
|
||||
userEmail: null,
|
||||
userAvatar: null,
|
||||
userCardStyle: null,
|
||||
|
||||
/* Field focus with ctrl+k (to register only once) */
|
||||
isFieldFocusRegistered: false,
|
||||
|
||||
/* Sample data (commonly used) */
|
||||
clients: [],
|
||||
history: [],
|
||||
}),
|
||||
actions: {
|
||||
setUser(payload) {
|
||||
|
|
@ -26,6 +23,9 @@ export const useMainStore = defineStore("main", {
|
|||
if (payload.avatar) {
|
||||
this.userAvatar = payload.avatar;
|
||||
}
|
||||
if (payload.cardStyle) {
|
||||
this.userCardStyle = payload.cardStyle;
|
||||
}
|
||||
},
|
||||
|
||||
fetch(sampleDataKey) {
|
||||
|
|
|
|||
|
|
@ -8,7 +8,6 @@ import CardBoxComponentEmpty from "@/components/CardBoxComponentEmpty.vue";
|
|||
import CardBoxArcade from "@/components/Cards/CardBoxArcade.vue";
|
||||
import FormField from "@/components/FormField.vue";
|
||||
import FormControl from "@/components/FormControl.vue";
|
||||
import { arcadeList } from "@/constants";
|
||||
</script>
|
||||
|
||||
<script>
|
||||
|
|
@ -18,9 +17,7 @@ const filterForm = reactive({
|
|||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
arcadeData: arcadeList,
|
||||
};
|
||||
return {};
|
||||
},
|
||||
methods: {
|
||||
filterArcade() {
|
||||
|
|
|
|||
|
|
@ -89,12 +89,12 @@ const submit = () => {
|
|||
href="/#/auth/register"
|
||||
/>
|
||||
|
||||
<h2>Forgot Password?</h2>
|
||||
<!-- <h2>Forgot Password?</h2>
|
||||
<BaseButton
|
||||
label="Password Reset"
|
||||
color="warning"
|
||||
href="/#/auth/reset"
|
||||
/>
|
||||
/> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -10,8 +10,10 @@ import CardBox from "@/components/CardBox.vue";
|
|||
import CardBoxWidget from "@/components/CardBoxWidget.vue";
|
||||
import FormControl from "@/components/FormControl.vue";
|
||||
import ProfileCard from "@/components/Cards/ProfileCard.vue";
|
||||
import TablePlayers from "@/components/Tables/TablePlayers.vue";
|
||||
import GeneralTable from "@/components/GeneralTable.vue";
|
||||
import { getGameInfo } from "@/constants";
|
||||
import { dashCode } from "@/constants/userData";
|
||||
import { getIIDXDan } from "@/constants/danClass";
|
||||
|
||||
const $route = useRoute();
|
||||
const $router = useRouter();
|
||||
|
|
@ -48,11 +50,7 @@ const profile = {
|
|||
gameID = $route.params.id;
|
||||
thisGame = getGameInfo(gameID);
|
||||
|
||||
if (!thisGame.versions) {
|
||||
versionForm.currentVersion = 1;
|
||||
}
|
||||
|
||||
if (!thisGame) {
|
||||
if (thisGame == null) {
|
||||
$router.push({
|
||||
name: "ErrorPage",
|
||||
params: {
|
||||
|
|
@ -61,6 +59,81 @@ if (!thisGame) {
|
|||
});
|
||||
}
|
||||
|
||||
const headers = [];
|
||||
headers.push({
|
||||
text: "Player",
|
||||
value: "username",
|
||||
sortable: true,
|
||||
width: 120,
|
||||
});
|
||||
|
||||
if (!thisGame.noRivals) {
|
||||
headers.push({ text: "Rival ID", value: "extid", width: 100 });
|
||||
}
|
||||
|
||||
headers.push(
|
||||
{ text: "Plays", value: "plays", sortable: true, width: 50 },
|
||||
{ text: "Last Arcade", value: "last.arcade", sortable: true, width: 150 }
|
||||
);
|
||||
|
||||
if (thisGame.extraHeaders) {
|
||||
for (var header of thisGame.extraHeaders) {
|
||||
headers.push(header);
|
||||
}
|
||||
}
|
||||
|
||||
const items = [
|
||||
{
|
||||
username: "Trmazi",
|
||||
extid: 12345678,
|
||||
plays: 30,
|
||||
last: { arcade: "Ghettocade" },
|
||||
sp: { dan: 100, point: 2001 },
|
||||
dp: { dan: 200, point: 3000 },
|
||||
},
|
||||
{
|
||||
username: "Trmazi",
|
||||
extid: 12345678,
|
||||
plays: 31,
|
||||
last: { arcade: "Ghettocade" },
|
||||
sp: { dan: 1900, point: 2000 },
|
||||
dp: { dan: 1200, point: 3000 },
|
||||
},
|
||||
{
|
||||
username: "Trmazi",
|
||||
extid: 12345678,
|
||||
plays: 32,
|
||||
last: { arcade: "Ghettocade" },
|
||||
sp: { dan: 800, point: 2000 },
|
||||
dp: { dan: 900, point: 3000 },
|
||||
},
|
||||
];
|
||||
|
||||
var formattedItems = [];
|
||||
for (var item of items) {
|
||||
if (item.extid) {
|
||||
item.extid = dashCode(item.extid);
|
||||
}
|
||||
|
||||
if (item.sp) {
|
||||
if (item.sp.dan !== undefined) {
|
||||
item.sp.dan = getIIDXDan(item.sp.dan).short;
|
||||
}
|
||||
}
|
||||
|
||||
if (item.dp) {
|
||||
if (item.dp.dan !== undefined) {
|
||||
item.dp.dan = getIIDXDan(item.dp.dan).short;
|
||||
}
|
||||
}
|
||||
|
||||
formattedItems.push(item);
|
||||
}
|
||||
|
||||
if (!thisGame.versions) {
|
||||
versionForm.currentVersion = 1;
|
||||
}
|
||||
|
||||
function getSources() {
|
||||
var sources = null;
|
||||
if (!versionForm.currentVersion) {
|
||||
|
|
@ -103,16 +176,9 @@ function getCardStyle() {
|
|||
</div>
|
||||
<div class="w-full">
|
||||
<ProfileCard :game="gameID" :profile="profile">
|
||||
<div class="grid grid-cols-1 gap-6 lg:grid-cols-4 pt-6">
|
||||
<CardBoxWidget :number="3733" label="Scores (All Versions)" />
|
||||
<CardBoxWidget :number="1244" label="Plays (All Versions)" />
|
||||
<CardBoxWidget
|
||||
prefix="#"
|
||||
:number="43"
|
||||
suffix=" / 300"
|
||||
label="Ranking (All Versions)"
|
||||
/>
|
||||
<CardBoxWidget :number="2" label="Rivals" /></div
|
||||
<div class="grid grid-cols-2 gap-6 pt-6">
|
||||
<CardBoxWidget :number="3733" label="Scores" />
|
||||
<CardBoxWidget :number="1244" label="Plays" /></div
|
||||
></ProfileCard>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -124,7 +190,7 @@ function getCardStyle() {
|
|||
class="bg-white dark:bg-slate-900/95 rounded-2xl lg:flex lg:justify-between"
|
||||
>
|
||||
<div class="w-full">
|
||||
<TablePlayers />
|
||||
<GeneralTable :headers="headers" :items="formattedItems" />
|
||||
</div>
|
||||
</div>
|
||||
</CardBox>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ import { mdiCounter, mdiBackburger } from "@mdi/js";
|
|||
import SectionMain from "@/components/SectionMain.vue";
|
||||
import LayoutAuthenticated from "@/layouts/LayoutAuthenticated.vue";
|
||||
import SectionTitleLine from "@/components/SectionTitleLine.vue";
|
||||
import TableScores from "@/components/Tables/TableScores.vue";
|
||||
import GeneralTable from "@/components/GeneralTable.vue";
|
||||
import CardBox from "@/components/CardBox.vue";
|
||||
import BaseButton from "@/components/BaseButton.vue";
|
||||
import { getGameInfo } from "@/constants";
|
||||
|
|
@ -26,69 +26,99 @@ if (!thisGame) {
|
|||
});
|
||||
}
|
||||
|
||||
const headers = [
|
||||
{ text: "Player", value: "username", width: 120 },
|
||||
{ text: "Timestamp", value: "timestamp", width: 180 },
|
||||
{ text: "Song", value: "song.name", width: 200 },
|
||||
{ text: "Artist", value: "song.artist", width: 150 },
|
||||
{ text: "Chart", value: "song.chart", width: 100 },
|
||||
{ text: "Difficulty", value: "song.difficulty", width: 100 },
|
||||
{ text: "Grade", value: "grade" },
|
||||
{ text: "Points", value: "points" },
|
||||
{ text: "Combos", value: "combo" },
|
||||
{ text: "Type", value: "type" },
|
||||
];
|
||||
|
||||
const scores = [
|
||||
{
|
||||
id: 1,
|
||||
player: "TRMAZI",
|
||||
playerId: 1,
|
||||
username: "TRMAZI",
|
||||
userId: 1,
|
||||
timestamp: "2023.05.30 12:00:39 AM",
|
||||
isHighScore: false,
|
||||
song: {
|
||||
id: 10741,
|
||||
name: "100 Sec. Kitchen Battle!!",
|
||||
artist: "Orange Lounge",
|
||||
chart: "SP EXPERT",
|
||||
difficulty: "12",
|
||||
difficulty: 12,
|
||||
},
|
||||
grade: "B+",
|
||||
points: 787690,
|
||||
combo: 42,
|
||||
location: {
|
||||
arcade: "Ho-House",
|
||||
type: "Cab",
|
||||
},
|
||||
type: "Cab",
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
player: "BARRU",
|
||||
playerId: 2,
|
||||
username: "TRMAZI",
|
||||
userId: 1,
|
||||
timestamp: "2023.05.30 12:00:39 AM",
|
||||
isHighScore: false,
|
||||
song: {
|
||||
id: 10741,
|
||||
name: "100 Sec. Kitchen Battle!!",
|
||||
artist: "Orange Lounge",
|
||||
chart: "SP EXPERT",
|
||||
difficulty: "12",
|
||||
difficulty: 12,
|
||||
},
|
||||
grade: "B+",
|
||||
points: 787690,
|
||||
combo: 42,
|
||||
location: {
|
||||
arcade: "Ho-House",
|
||||
type: "Cab",
|
||||
},
|
||||
type: "Cab",
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
player: "HO",
|
||||
playerId: 3,
|
||||
username: "TRMAZI",
|
||||
userId: 1,
|
||||
timestamp: "2023.05.30 12:00:39 AM",
|
||||
isHighScore: false,
|
||||
song: {
|
||||
id: 10741,
|
||||
name: "100 Sec. Kitchen Battle!!",
|
||||
artist: "Orange Lounge",
|
||||
chart: "SP EXPERT",
|
||||
difficulty: "12",
|
||||
difficulty: 12,
|
||||
},
|
||||
grade: "B+",
|
||||
points: 787690,
|
||||
combo: 42,
|
||||
location: {
|
||||
arcade: "Ho-House",
|
||||
type: "Cab",
|
||||
type: "Cab",
|
||||
},
|
||||
{
|
||||
username: "TRMAZI",
|
||||
userId: 1,
|
||||
timestamp: "2023.05.30 12:00:39 AM",
|
||||
song: {
|
||||
id: 10741,
|
||||
name: "100 Sec. Kitchen Battle!!",
|
||||
artist: "Orange Lounge",
|
||||
chart: "SP EXPERT",
|
||||
difficulty: 12,
|
||||
},
|
||||
grade: "B+",
|
||||
points: 787690,
|
||||
combo: 42,
|
||||
type: "Cab",
|
||||
},
|
||||
{
|
||||
username: "TRMAZI",
|
||||
userId: 1,
|
||||
timestamp: "2023.05.30 12:00:39 AM",
|
||||
song: {
|
||||
id: 10741,
|
||||
name: "100 Sec. Kitchen Battle!!",
|
||||
artist: "Orange Lounge",
|
||||
chart: "SP EXPERT",
|
||||
difficulty: 12,
|
||||
},
|
||||
grade: "B+",
|
||||
points: 78769330,
|
||||
combo: 42,
|
||||
type: "Cab",
|
||||
},
|
||||
];
|
||||
</script>
|
||||
|
|
@ -115,7 +145,7 @@ const scores = [
|
|||
/>
|
||||
|
||||
<CardBox has-table>
|
||||
<TableScores :game="gameID" :entries="scores" />
|
||||
<GeneralTable :headers="headers" :items="scores" />
|
||||
</CardBox>
|
||||
</SectionMain>
|
||||
</LayoutAuthenticated>
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
<script setup>
|
||||
import { useRoute, useRouter } from "vue-router";
|
||||
import { mdiCounter, mdiBackburger } from "@mdi/js";
|
||||
import { mdiCounter, mdiBackburger, mdiHome } from "@mdi/js";
|
||||
import SectionMain from "@/components/SectionMain.vue";
|
||||
import LayoutAuthenticated from "@/layouts/LayoutAuthenticated.vue";
|
||||
import SectionTitleLine from "@/components/SectionTitleLine.vue";
|
||||
import TableScores from "@/components/Tables/TableScores.vue";
|
||||
import GeneralTable from "@/components/GeneralTable.vue";
|
||||
import CardBox from "@/components/CardBox.vue";
|
||||
import BaseButton from "@/components/BaseButton.vue";
|
||||
import { getGameInfo } from "@/constants";
|
||||
|
|
@ -31,26 +31,32 @@ const profile = {
|
|||
name: "TRMAZI",
|
||||
};
|
||||
|
||||
const headers = [
|
||||
{ text: "Timestamp", value: "timestamp", width: 180 },
|
||||
{ text: "Song", value: "song.name", width: 200 },
|
||||
{ text: "Artist", value: "song.artist", width: 150 },
|
||||
{ text: "Chart", value: "song.chart", width: 100 },
|
||||
{ text: "Difficulty", value: "song.difficulty", width: 100 },
|
||||
{ text: "Grade", value: "grade" },
|
||||
{ text: "Points", value: "points" },
|
||||
{ text: "Combos", value: "combo" },
|
||||
{ text: "Type", value: "type" },
|
||||
];
|
||||
|
||||
const scores = [
|
||||
{
|
||||
id: 1,
|
||||
player: "TRMAZI",
|
||||
timestamp: "2023.05.30 12:00:39 AM",
|
||||
isHighScore: false,
|
||||
song: {
|
||||
id: 10741,
|
||||
name: "100 Sec. Kitchen Battle!!",
|
||||
artist: "Orange Lounge",
|
||||
chart: "SP EXPERT",
|
||||
difficulty: "12",
|
||||
difficulty: 12,
|
||||
},
|
||||
grade: "B+",
|
||||
points: 787690,
|
||||
combo: 42,
|
||||
location: {
|
||||
arcade: "Ho-House",
|
||||
type: "Cab",
|
||||
},
|
||||
type: "Cab",
|
||||
},
|
||||
];
|
||||
</script>
|
||||
|
|
@ -58,13 +64,25 @@ const scores = [
|
|||
<template>
|
||||
<LayoutAuthenticated>
|
||||
<SectionMain>
|
||||
<BaseButton
|
||||
:icon="mdiBackburger"
|
||||
:href="`/#/games/${gameID}/profiles/${profile.id}`"
|
||||
class="w-full md:w-auto mb-6"
|
||||
color="info"
|
||||
label="Back to Profile"
|
||||
/>
|
||||
<div class="grid grid-cols-1 md:max-w-[150px] space-y-3 mb-5">
|
||||
<BaseButton
|
||||
:icon="mdiBackburger"
|
||||
:href="`/#/games/${gameID}/profiles/${profile.id}`"
|
||||
class="w-full md:w-auto"
|
||||
color="info"
|
||||
:label="`${profile.name}'s Profile`"
|
||||
/>
|
||||
|
||||
<BaseButton
|
||||
:icon="mdiHome"
|
||||
:href="`/#/games/${gameID}`"
|
||||
class="w-full md:w-auto"
|
||||
color="info"
|
||||
:label="`${
|
||||
thisGame.shortName ? thisGame.shortName : thisGame.name
|
||||
} Home`"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<SectionTitleLine
|
||||
:icon="mdiCounter"
|
||||
|
|
@ -75,7 +93,7 @@ const scores = [
|
|||
/>
|
||||
|
||||
<CardBox has-table>
|
||||
<TableScores is-personal :game="gameID" :entries="scores" />
|
||||
<GeneralTable :headers="headers" :items="scores" />
|
||||
</CardBox>
|
||||
</SectionMain>
|
||||
</LayoutAuthenticated>
|
||||
|
|
|
|||
|
|
@ -175,8 +175,11 @@ function colorText(stat) {
|
|||
:href="`/#/games/${gameID}`"
|
||||
class="w-full md:w-auto"
|
||||
color="info"
|
||||
label="Go Back"
|
||||
:label="`${
|
||||
thisGame.shortName ? thisGame.shortName : thisGame.name
|
||||
} Home`"
|
||||
/>
|
||||
|
||||
<div
|
||||
v-if="thisGame.versions"
|
||||
class="mt-2 md:mt-0 md:w-1/3 md:text-right"
|
||||
|
|
|
|||
|
|
@ -1,30 +1,30 @@
|
|||
<script setup>
|
||||
import { ref, onMounted } from "vue";
|
||||
import {
|
||||
mdiAccountMultipleOutline,
|
||||
mdiChartTimelineVariant,
|
||||
mdiReload,
|
||||
mdiChartBellCurveCumulative,
|
||||
mdiGamepad,
|
||||
mdiTestTube,
|
||||
mdiFlagCheckered,
|
||||
mdiNewspaperVariant,
|
||||
} from "@mdi/js";
|
||||
import UserCard from "@/components/UserCard.vue";
|
||||
import * as chartConfig from "@/components/Charts/chart.config.js";
|
||||
import LineChart from "@/components/Charts/LineChart.vue";
|
||||
import SectionMain from "@/components/SectionMain.vue";
|
||||
import CardBoxWidget from "@/components/CardBoxWidget.vue";
|
||||
import CardBox from "@/components/CardBox.vue";
|
||||
import BaseButton from "@/components/BaseButton.vue";
|
||||
import CardBoxGameStat from "@/components/CardBoxGameStat.vue";
|
||||
import LayoutAuthenticated from "@/layouts/LayoutAuthenticated.vue";
|
||||
import SectionTitleLine from "@/components/SectionTitleLine.vue";
|
||||
import PillTag from "@/components/PillTag.vue";
|
||||
import TableRivalsFull from "@/components/Tables/TableRivalsFull.vue";
|
||||
import TableGoals from "@/components/Tables/TableGoals.vue";
|
||||
import NotificationBar from "@/components/NotificationBar.vue";
|
||||
import { GameConstants } from "@/constants";
|
||||
|
||||
// Public beta news data
|
||||
import CardBoxNews from "@/components/Cards/CardBoxNews.vue";
|
||||
import CardBoxComponentEmpty from "@/components/CardBoxComponentEmpty.vue";
|
||||
import testNews from "@/constants/news.json";
|
||||
const newsData = testNews;
|
||||
|
||||
const chartData = ref(null);
|
||||
|
||||
const fillChartData = () => {
|
||||
|
|
@ -35,34 +35,34 @@ onMounted(() => {
|
|||
fillChartData();
|
||||
});
|
||||
|
||||
const setGoals = [
|
||||
{
|
||||
game: "DanceDance Revolution",
|
||||
type: "Rank",
|
||||
goal: "Top 10 Ranking",
|
||||
status: "#10 of 132",
|
||||
deadline: "3 Weeks",
|
||||
},
|
||||
{
|
||||
game: "pop'n music",
|
||||
type: "Plays",
|
||||
goal: "100 Plays",
|
||||
status: "2 Plays Since Creation",
|
||||
deadline: "1 Week",
|
||||
},
|
||||
];
|
||||
// const setGoals = [
|
||||
// {
|
||||
// game: "DanceDance Revolution",
|
||||
// type: "Rank",
|
||||
// goal: "Top 10 Ranking",
|
||||
// status: "#10 of 132",
|
||||
// deadline: "3 Weeks",
|
||||
// },
|
||||
// {
|
||||
// game: "pop'n music",
|
||||
// type: "Plays",
|
||||
// goal: "100 Plays",
|
||||
// status: "2 Plays Since Creation",
|
||||
// deadline: "1 Week",
|
||||
// },
|
||||
// ];
|
||||
|
||||
const gameStats = [
|
||||
{
|
||||
id: GameConstants.IIDX,
|
||||
username: "DJ. TRMAZI",
|
||||
type: "ranking",
|
||||
value: "#22 of 330",
|
||||
type: "plays",
|
||||
value: 33,
|
||||
},
|
||||
{
|
||||
id: GameConstants.DDR,
|
||||
username: "TRMAZI",
|
||||
type: "scores",
|
||||
type: "plays",
|
||||
value: 233,
|
||||
},
|
||||
{
|
||||
|
|
@ -74,7 +74,7 @@ const gameStats = [
|
|||
{
|
||||
id: GameConstants.SDVX,
|
||||
username: "TRMAZI",
|
||||
type: "scores",
|
||||
type: "plays",
|
||||
value: 420,
|
||||
},
|
||||
];
|
||||
|
|
@ -86,44 +86,48 @@ const gameStats = [
|
|||
<h2 class="pb-4 text-4xl lg:text-5xl">Welcome to <samp>PhaseII</samp></h2>
|
||||
<UserCard class="mb-6" />
|
||||
|
||||
<div class="my-6">
|
||||
<!-- For public beta, we'll load the news here. -->
|
||||
<SectionTitleLine :icon="mdiNewspaperVariant" title="Network News" main />
|
||||
|
||||
<div class="grid gap-4 grid-cols-1 w-full pb-4">
|
||||
<CardBoxNews
|
||||
v-for="news of newsData"
|
||||
:id="news.id"
|
||||
:key="news.id"
|
||||
:title="news.title"
|
||||
:content="news.content"
|
||||
:date="news.timestamp"
|
||||
:cover="news.cover"
|
||||
class="w-full h-full"
|
||||
/>
|
||||
</div>
|
||||
<CardBoxComponentEmpty v-if="!newsData || !newsData.length" />
|
||||
|
||||
<!-- <div class="my-6">
|
||||
<NotificationBar color="info">
|
||||
You have unread news!
|
||||
<template #right>
|
||||
<a href="#/news" class="text-blue-300 hover:underline">View now</a>
|
||||
</template>
|
||||
</NotificationBar>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<SectionTitleLine
|
||||
<!-- This is for tracking stats. -->
|
||||
<!-- <SectionTitleLine
|
||||
:icon="mdiChartTimelineVariant"
|
||||
title="Quick Stats"
|
||||
main
|
||||
/>
|
||||
|
||||
<div class="grid grid-cols-1 gap-6 lg:grid-cols-3 mb-6">
|
||||
/> -->
|
||||
<!-- <div class="grid grid-cols-1 gap-6 lg:grid-cols-3 mb-6">
|
||||
<CardBoxWidget
|
||||
trend="12% (from last week)"
|
||||
trend-type="up"
|
||||
:number="37"
|
||||
label="Scores (This week)"
|
||||
/>
|
||||
<CardBoxWidget
|
||||
trend="12%"
|
||||
trend-type="down"
|
||||
:number="770"
|
||||
:prefix="'¢'"
|
||||
label="PhaseCoin"
|
||||
/>
|
||||
<CardBoxWidget
|
||||
trend="None Completed"
|
||||
trend-type="alert"
|
||||
:number="2"
|
||||
label="Active Goals"
|
||||
/>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<SectionTitleLine :icon="mdiGamepad" title="Game Stats" main />
|
||||
<SectionTitleLine :icon="mdiGamepad" title="Showcase" main />
|
||||
<div
|
||||
class="grid grid-flow-row auto-rows-auto grid-cols-1 md:grid-cols-2 gap-5 mb-5"
|
||||
>
|
||||
|
|
@ -137,12 +141,12 @@ const gameStats = [
|
|||
/>
|
||||
</div>
|
||||
|
||||
<SectionTitleLine :icon="mdiFlagCheckered" title="Active Goals" main />
|
||||
<!-- <SectionTitleLine :icon="mdiFlagCheckered" title="Active Goals" main />
|
||||
<div class="mb-6">
|
||||
<CardBox has-table>
|
||||
<TableGoals :goals="setGoals" />
|
||||
</CardBox>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<SectionTitleLine
|
||||
:icon="mdiChartBellCurveCumulative"
|
||||
|
|
@ -167,10 +171,10 @@ const gameStats = [
|
|||
</div>
|
||||
</CardBox>
|
||||
|
||||
<SectionTitleLine :icon="mdiAccountMultipleOutline" title="Rivals" main />
|
||||
<!-- <SectionTitleLine :icon="mdiAccountMultipleOutline" title="Rivals" main />
|
||||
<CardBox has-table>
|
||||
<TableRivalsFull />
|
||||
</CardBox>
|
||||
</CardBox> -->
|
||||
</SectionMain>
|
||||
</LayoutAuthenticated>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@ const thisNews = NewsData.find((x) => x.id === newsID);
|
|||
const newsBody = thisNews.content.split("\n");
|
||||
|
||||
function goBack() {
|
||||
$router.push("/news");
|
||||
$router.push("/");
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
@ -52,7 +52,7 @@ function goBack() {
|
|||
<template #footer>
|
||||
<BaseButtons>
|
||||
<BaseButton
|
||||
label="News"
|
||||
label="Home"
|
||||
color="info"
|
||||
:icon="mdiBackburger"
|
||||
icon-size="20"
|
||||
|
|
|
|||
|
|
@ -1,10 +1,5 @@
|
|||
<script setup>
|
||||
import {
|
||||
mdiServerNetwork,
|
||||
mdiMessage,
|
||||
mdiScoreboard,
|
||||
mdiTournament,
|
||||
} from "@mdi/js";
|
||||
import { mdiServerNetwork, mdiMessage, mdiScoreboard } from "@mdi/js";
|
||||
import SectionMain from "@/components/SectionMain.vue";
|
||||
import CardBox from "@/components/CardBox.vue";
|
||||
import BaseButton from "@/components/BaseButton.vue";
|
||||
|
|
@ -65,7 +60,7 @@ import PillTag from "@/components/PillTag.vue";
|
|||
</template>
|
||||
</CardBox>
|
||||
|
||||
<CardBox>
|
||||
<!-- <CardBox>
|
||||
<PillTag
|
||||
:icon="mdiTournament"
|
||||
color="info"
|
||||
|
|
@ -83,7 +78,7 @@ import PillTag from "@/components/PillTag.vue";
|
|||
<BaseButton type="submit" color="danger" label="Unlink" />
|
||||
</div>
|
||||
</template>
|
||||
</CardBox>
|
||||
</CardBox> -->
|
||||
</div>
|
||||
</SectionMain>
|
||||
</LayoutAuthenticated>
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ import SectionMain from "@/components/SectionMain.vue";
|
|||
import CardBox from "@/components/CardBox.vue";
|
||||
import BaseDivider from "@/components/BaseDivider.vue";
|
||||
import FormField from "@/components/FormField.vue";
|
||||
import FormCheckRadio from "@/components/FormCheckRadio.vue";
|
||||
// import FormCheckRadio from "@/components/FormCheckRadio.vue";
|
||||
import FormControl from "@/components/FormControl.vue";
|
||||
import BaseButton from "@/components/BaseButton.vue";
|
||||
import UserCard from "@/components/UserCard.vue";
|
||||
|
|
@ -48,7 +48,7 @@ const submitPass = () => {
|
|||
<UserCard class="mb-6" use-small even-smaller />
|
||||
<SectionTitleLine :icon="mdiAccount" title="Profile Settings" main />
|
||||
|
||||
<CardBox is-form class="mb-6" @submit.prevent="">
|
||||
<!-- <CardBox is-form class="mb-6" @submit.prevent="">
|
||||
<PillTag color="info" label="Discord Notifications" class="mb-4" />
|
||||
<div class="grid gap-4 grid-cols-2 md:grid-cols-4">
|
||||
<FormCheckRadio
|
||||
|
|
@ -80,7 +80,7 @@ const submitPass = () => {
|
|||
class="outline outline-gray-400 rounded-xl outline-1 text-sm md:text-md p-2"
|
||||
/>
|
||||
</div>
|
||||
</CardBox>
|
||||
</CardBox> -->
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<CardBox is-form class="row-span-1" @submit.prevent="submitProfile">
|
||||
|
|
@ -96,7 +96,7 @@ const submitPass = () => {
|
|||
</FormField>
|
||||
<FormField
|
||||
label="E-mail"
|
||||
help="Used for Gravatar and Password Resetting"
|
||||
help="Not currently used, but will be soon™️"
|
||||
>
|
||||
<FormControl
|
||||
v-model="profileForm.email"
|
||||
|
|
@ -119,12 +119,12 @@ const submitPass = () => {
|
|||
/>
|
||||
</FormField>
|
||||
|
||||
<FormField
|
||||
<!-- <FormField
|
||||
label="Public Profile"
|
||||
help="Allow your profile to be seen publicly"
|
||||
>
|
||||
<FormCheckRadio name="system" :model-value="true" type="switch" />
|
||||
</FormField>
|
||||
</FormField> -->
|
||||
|
||||
<template #footer>
|
||||
<BaseButton color="success" type="submit" label="Update" />
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user