mirror of
https://github.com/PhaseII-eAmusement-Network/PhaseWeb3-Vue.git
synced 2026-04-25 07:18:31 -05:00
Code push up to current dev work
Going on a trip and this laptop is coming with me. Storing here for save keeping. Not completed but has a TON of progress.
This commit is contained in:
Trenton Zimmer
parent
fb2764f44b
commit
3412a79ce2
31
index.html
31
index.html
|
|
@ -5,36 +5,11 @@
|
|||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||
<link rel="icon" href="/favicon.png">
|
||||
<title>Admin One - Vue.js 3 Tailwind dashboard template</title>
|
||||
<script src="https://kit.fontawesome.com/6ac6394f85.js" crossorigin="anonymous"></script>
|
||||
<title>PhaseWeb 3</title>
|
||||
|
||||
<meta name="description" content="Admin One - free Vue.js 3 Tailwind dashboard">
|
||||
|
||||
<meta property="og:url" content="https://justboil.github.io/admin-one-vue-tailwind/">
|
||||
<meta property="og:site_name" content="JustBoil.me">
|
||||
<meta property="og:title" content="Admin One Vue.js 3 Tailwind free">
|
||||
<meta property="og:description" content="Admin One - free Vue.js 3 Tailwind dashboard with dark mode. Vite or Nuxt or Laravel">
|
||||
<meta property="og:image" content="https://static.justboil.me/templates/one/repo-tailwind-vue.png">
|
||||
<meta property="og:image:type" content="image/png">
|
||||
<meta property="og:image:width" content="1920">
|
||||
<meta property="og:image:height" content="960">
|
||||
|
||||
<meta property="twitter:card" content="summary_large_image">
|
||||
<meta property="twitter:title" content="Admin One Vue.js 3 Tailwind free">
|
||||
<meta property="twitter:description" content="Admin One - free Vue.js 3 Tailwind dashboard with dark mode. Vite or Nuxt or Laravel">
|
||||
<meta property="twitter:image:src" content="https://static.justboil.me/templates/one/repo-tailwind-vue.png">
|
||||
<meta property="twitter:image:width" content="1920">
|
||||
<meta property="twitter:image:height" content="960">
|
||||
|
||||
<!-- Global site tag (gtag.js) - Google Analytics -->
|
||||
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-130795909-1"></script>
|
||||
<script>
|
||||
window.dataLayer = window.dataLayer || [];
|
||||
function gtag(){dataLayer.push(arguments);}
|
||||
gtag('js', new Date());
|
||||
gtag('config', 'UA-130795909-1');
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<body class="bg-slate-800">
|
||||
<noscript>
|
||||
<strong>We're sorry but this app doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
|
||||
</noscript>
|
||||
|
|
|
|||
8
package-lock.json
generated
8
package-lock.json
generated
|
|
@ -1,12 +1,12 @@
|
|||
{
|
||||
"name": "admin-one-vue-tailwind",
|
||||
"version": "3.2.0",
|
||||
"name": "phaseweb",
|
||||
"version": "3.0.0",
|
||||
"lockfileVersion": 2,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "admin-one-vue-tailwind",
|
||||
"version": "3.2.0",
|
||||
"name": "phaseweb",
|
||||
"version": "3.0.0",
|
||||
"dependencies": {
|
||||
"@mdi/js": "^7.0.96",
|
||||
"@rushstack/eslint-patch": "^1.1.4",
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
{
|
||||
"name": "admin-one-vue-tailwind",
|
||||
"version": "3.2.0",
|
||||
"name": "phaseweb3",
|
||||
"version": "1.0.0",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"dev": "vite --host",
|
||||
"build": "vite build",
|
||||
"preview": "vite preview --port 4173",
|
||||
"preview": "vite preview --port 3069",
|
||||
"lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore"
|
||||
},
|
||||
"dependencies": {
|
||||
|
|
|
|||
BIN
public/assets/card/ddr.png
Normal file
BIN
public/assets/card/ddr.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 130 KiB |
BIN
public/assets/card/dm.png
Normal file
BIN
public/assets/card/dm.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 321 KiB |
BIN
public/assets/card/gf.png
Normal file
BIN
public/assets/card/gf.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 828 KiB |
BIN
public/assets/card/gitadora_dm.png
Normal file
BIN
public/assets/card/gitadora_dm.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 265 KiB |
BIN
public/assets/card/gitadora_gf.png
Normal file
BIN
public/assets/card/gitadora_gf.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 413 KiB |
BIN
public/assets/card/iidx.png
Normal file
BIN
public/assets/card/iidx.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 724 KiB |
BIN
public/assets/card/jubeat.png
Normal file
BIN
public/assets/card/jubeat.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.4 MiB |
BIN
public/assets/card/popn.png
Normal file
BIN
public/assets/card/popn.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 432 KiB |
BIN
public/assets/card/sdvx.png
Normal file
BIN
public/assets/card/sdvx.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 79 KiB |
BIN
public/assets/icon/ddr.png
Normal file
BIN
public/assets/icon/ddr.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 188 KiB |
BIN
public/assets/icon/dm.png
Normal file
BIN
public/assets/icon/dm.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 37 KiB |
BIN
public/assets/icon/gf.png
Normal file
BIN
public/assets/icon/gf.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 87 KiB |
BIN
public/assets/icon/gitadora_dm.png
Normal file
BIN
public/assets/icon/gitadora_dm.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 630 KiB |
BIN
public/assets/icon/gitadora_gf.png
Normal file
BIN
public/assets/icon/gitadora_gf.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 618 KiB |
BIN
public/assets/icon/iidx.png
Normal file
BIN
public/assets/icon/iidx.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 98 KiB |
BIN
public/assets/icon/jubeat.png
Normal file
BIN
public/assets/icon/jubeat.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 86 KiB |
BIN
public/assets/icon/popn.png
Normal file
BIN
public/assets/icon/popn.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 36 KiB |
BIN
public/assets/icon/sdvx.png
Normal file
BIN
public/assets/icon/sdvx.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 224 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 246 KiB |
|
|
@ -18,7 +18,7 @@ const emit = defineEmits(["menu-click", "aside-lg-close-click"]);
|
|||
const styleStore = useStyleStore();
|
||||
|
||||
const logoutItem = computed(() => ({
|
||||
label: "Logout",
|
||||
label: "Log out",
|
||||
icon: mdiLogout,
|
||||
color: "info",
|
||||
isLogout: true,
|
||||
|
|
@ -42,15 +42,14 @@ const asideLgCloseClick = (event) => {
|
|||
:class="styleStore.asideStyle"
|
||||
class="lg:rounded-2xl flex-1 flex flex-col overflow-hidden dark:bg-slate-900"
|
||||
>
|
||||
<div
|
||||
:class="styleStore.asideBrandStyle"
|
||||
class="flex flex-row h-14 items-center justify-between dark:bg-slate-900"
|
||||
>
|
||||
<div
|
||||
class="text-center flex-1 lg:text-left lg:pl-6 xl:text-center xl:pl-0"
|
||||
>
|
||||
<b class="font-black">One</b>
|
||||
<div class="dark:bg-slate-900">
|
||||
<div class="flex items-center space-x-3 my-2 mx-2">
|
||||
<img class="rounded-full shadow-xl" src="/favicon.png" />
|
||||
<h2 class="text-md">
|
||||
<samp class="tracking-tighter">PhaseII</samp> eAmusement Network
|
||||
</h2>
|
||||
</div>
|
||||
<hr class="my-2" />
|
||||
<button
|
||||
class="hidden lg:inline-block xl:hidden p-3"
|
||||
@click.prevent="asideLgCloseClick"
|
||||
|
|
@ -69,7 +68,7 @@ const asideLgCloseClick = (event) => {
|
|||
<AsideMenuList :menu="menu" @menu-click="menuClick" />
|
||||
</div>
|
||||
|
||||
<ul>
|
||||
<ul class="invisible lg:visible">
|
||||
<AsideMenuItem :item="logoutItem" @menu-click="menuClick" />
|
||||
</ul>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -42,7 +42,10 @@ const props = defineProps({
|
|||
default: null,
|
||||
},
|
||||
small: Boolean,
|
||||
outline: Boolean,
|
||||
outline: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
active: Boolean,
|
||||
disabled: Boolean,
|
||||
roundedFull: Boolean,
|
||||
|
|
|
|||
|
|
@ -65,10 +65,10 @@ const pillText = computed(() => props.text ?? `${props.progress}%`);
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<CardBox class="mb-6 last:mb-0" is-hoverable>
|
||||
<CardBox class="mb-2" is-hoverable>
|
||||
<BaseLevel>
|
||||
<BaseLevel type="justify-start">
|
||||
<UserAvatar class="w-12 h-12 mr-6" :username="name" />
|
||||
<BaseLevel type="justify-start md:space-x-4">
|
||||
<UserAvatar class="w-12" :username="name" />
|
||||
<div class="text-center md:text-left overflow-hidden">
|
||||
<h4 class="text-xl text-ellipsis">
|
||||
{{ name }}
|
||||
|
|
|
|||
83
src/components/CardBoxGameStat.vue
Normal file
83
src/components/CardBoxGameStat.vue
Normal file
|
|
@ -0,0 +1,83 @@
|
|||
<script setup>
|
||||
import { computed } from "vue";
|
||||
import CardBoxComponentBody from "@/components/CardBoxComponentBody.vue";
|
||||
import BaseLevel from "@/components/BaseLevel.vue";
|
||||
import PillTag from "@/components/PillTag.vue";
|
||||
import GameIcon from "@/components/GameIcon.vue";
|
||||
import { getGameInfo } from "@/constants";
|
||||
|
||||
const props = defineProps({
|
||||
game: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
value: {
|
||||
type: [String, Number],
|
||||
required: true,
|
||||
},
|
||||
profileName: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
type: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
|
||||
const tag = computed(() => {
|
||||
if (props.type === "plays") {
|
||||
return {
|
||||
type: "success",
|
||||
};
|
||||
} else if (props.type === "scores") {
|
||||
return {
|
||||
type: "danger",
|
||||
};
|
||||
} else if (props.type === "ranking") {
|
||||
return {
|
||||
type: "warning",
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
type: "info",
|
||||
};
|
||||
});
|
||||
|
||||
const selectedGame = getGameInfo(props.game);
|
||||
const cardStyle = `
|
||||
background-image: linear-gradient(to left, transparent, rgba(0, 0, 0, 1)),
|
||||
url('${selectedGame.cardBG}');
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
`;
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex rounded-2xl" :style="cardStyle">
|
||||
<div
|
||||
class="relative w-full h-full bg-white dark:bg-slate-900/70 rounded-2xl"
|
||||
>
|
||||
<CardBoxComponentBody>
|
||||
<BaseLevel>
|
||||
<BaseLevel type="justify-start">
|
||||
<GameIcon class="md:mr-6" :path="selectedGame.icon" />
|
||||
<div class="text-center space-y-1 md:text-left md:mr-6">
|
||||
<div class="md:flex md:items-center mb-4 md:mb-0 md:space-x-2">
|
||||
<h2 class="text-xl">{{ selectedGame.name }}</h2>
|
||||
<PillTag :color="tag.type" :label="type" small />
|
||||
</div>
|
||||
<h4 class="text-lg">{{ value }}</h4>
|
||||
</div>
|
||||
</BaseLevel>
|
||||
<div class="text-center md:text-right">
|
||||
<p class="text-sm text-gray-400">
|
||||
{{ profileName }}
|
||||
</p>
|
||||
</div>
|
||||
</BaseLevel>
|
||||
</CardBoxComponentBody>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -1,88 +0,0 @@
|
|||
<script setup>
|
||||
import { computed } from "vue";
|
||||
import {
|
||||
mdiCashMinus,
|
||||
mdiCashPlus,
|
||||
mdiReceipt,
|
||||
mdiCreditCardOutline,
|
||||
} from "@mdi/js";
|
||||
import CardBox from "@/components/CardBox.vue";
|
||||
import BaseLevel from "@/components/BaseLevel.vue";
|
||||
import PillTag from "@/components/PillTag.vue";
|
||||
import IconRounded from "@/components/IconRounded.vue";
|
||||
|
||||
const props = defineProps({
|
||||
amount: {
|
||||
type: Number,
|
||||
required: true,
|
||||
},
|
||||
date: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
business: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
type: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
name: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
account: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
|
||||
const icon = computed(() => {
|
||||
if (props.type === "withdrawal") {
|
||||
return {
|
||||
icon: mdiCashMinus,
|
||||
type: "danger",
|
||||
};
|
||||
} else if (props.type === "deposit") {
|
||||
return {
|
||||
icon: mdiCashPlus,
|
||||
type: "success",
|
||||
};
|
||||
} else if (props.type === "invoice") {
|
||||
return {
|
||||
icon: mdiReceipt,
|
||||
type: "warning",
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
icon: mdiCreditCardOutline,
|
||||
type: "info",
|
||||
};
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<CardBox class="mb-6 last:mb-0" is-hoverable>
|
||||
<BaseLevel>
|
||||
<BaseLevel type="justify-start">
|
||||
<IconRounded :icon="icon.icon" :color="icon.type" class="md:mr-6" />
|
||||
<div class="text-center space-y-1 md:text-left md:mr-6">
|
||||
<h4 class="text-xl">${{ amount }}</h4>
|
||||
<p class="text-gray-500 dark:text-slate-400">
|
||||
<b>{{ date }}</b> via {{ business }}
|
||||
</p>
|
||||
</div>
|
||||
</BaseLevel>
|
||||
<div class="text-center md:text-right space-y-2">
|
||||
<p class="text-sm text-gray-500">
|
||||
{{ name }}
|
||||
</p>
|
||||
<div>
|
||||
<PillTag :color="icon.type" :label="type" small />
|
||||
</div>
|
||||
</div>
|
||||
</BaseLevel>
|
||||
</CardBox>
|
||||
</template>
|
||||
|
|
@ -1,11 +1,9 @@
|
|||
<script setup>
|
||||
import { mdiCog } from "@mdi/js";
|
||||
import CardBox from "@/components/CardBox.vue";
|
||||
import NumberDynamic from "@/components/NumberDynamic.vue";
|
||||
import BaseIcon from "@/components/BaseIcon.vue";
|
||||
import BaseLevel from "@/components/BaseLevel.vue";
|
||||
import PillTagTrend from "@/components/PillTagTrend.vue";
|
||||
import BaseButton from "@/components/BaseButton.vue";
|
||||
|
||||
defineProps({
|
||||
number: {
|
||||
|
|
@ -47,13 +45,6 @@ defineProps({
|
|||
<CardBox>
|
||||
<BaseLevel v-if="trend" class="mb-3" mobile>
|
||||
<PillTagTrend :trend="trend" :trend-type="trendType" small />
|
||||
<BaseButton
|
||||
:icon="mdiCog"
|
||||
icon-w="w-4"
|
||||
icon-h="h-4"
|
||||
color="lightDark"
|
||||
small
|
||||
/>
|
||||
</BaseLevel>
|
||||
<BaseLevel mobile>
|
||||
<div>
|
||||
|
|
|
|||
|
|
@ -1,25 +1,31 @@
|
|||
<script setup>
|
||||
import { containerMaxW } from "@/config.js";
|
||||
import { mdiCash } from "@mdi/js";
|
||||
import BaseLevel from "@/components/BaseLevel.vue";
|
||||
import JustboilLogo from "@/components/JustboilLogo.vue";
|
||||
|
||||
const year = new Date().getFullYear();
|
||||
import BaseButton from "@/components/BaseButton.vue";
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<footer class="py-2 px-6" :class="containerMaxW">
|
||||
<BaseLevel>
|
||||
<div class="text-center md:text-left">
|
||||
<b
|
||||
>©{{ year }},
|
||||
<a href="https://justboil.me/" target="_blank">JustBoil.me</a>.</b
|
||||
>
|
||||
<slot />
|
||||
<p>
|
||||
Made with ❤️ by the PhaseII Team. Based on JustBoil's
|
||||
<a
|
||||
class="text-blue-400 hover:text-blue-600"
|
||||
href="https://github.com/justboil/admin-one-vue-tailwind"
|
||||
>Admin One</a
|
||||
>.
|
||||
</p>
|
||||
</div>
|
||||
<div class="md:py-2">
|
||||
<a href="https://justboil.me">
|
||||
<JustboilLogo class="w-auto h-8 md:h-6" />
|
||||
</a>
|
||||
<BaseButton
|
||||
color="info"
|
||||
href="https://paypal.me/trmazi"
|
||||
label="Donate"
|
||||
:icon="mdiCash"
|
||||
icon-size="xl"
|
||||
/>
|
||||
</div>
|
||||
</BaseLevel>
|
||||
</footer>
|
||||
|
|
|
|||
29
src/components/GameIcon.vue
Normal file
29
src/components/GameIcon.vue
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
<script setup>
|
||||
import { computed } from "vue";
|
||||
|
||||
const props = defineProps({
|
||||
path: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
w: {
|
||||
type: String,
|
||||
default: "w-16",
|
||||
},
|
||||
h: {
|
||||
type: String,
|
||||
default: "h-16",
|
||||
},
|
||||
});
|
||||
|
||||
const spanClass = computed(
|
||||
() => `inline-flex justify-center items-center ${props.w} ${props.h}`
|
||||
);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<span :class="spanClass">
|
||||
<img :src="path" class="rounded-full" :class="w + ' ' + h" />
|
||||
<slot />
|
||||
</span>
|
||||
</template>
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -17,7 +17,10 @@ const props = defineProps({
|
|||
default: null,
|
||||
},
|
||||
small: Boolean,
|
||||
outline: Boolean,
|
||||
outline: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
});
|
||||
|
||||
const componentClass = computed(() => [
|
||||
|
|
|
|||
|
|
@ -1,23 +0,0 @@
|
|||
<script setup>
|
||||
import { mdiGithub } from "@mdi/js";
|
||||
import BaseButton from "@/components/BaseButton.vue";
|
||||
import SectionBanner from "@/components/SectionBanner.vue";
|
||||
import { gradientBgPinkRed } from "@/colors";
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<SectionBanner :class="gradientBgPinkRed">
|
||||
<h1 class="text-3xl text-white mb-6">
|
||||
Like the project? Please star on <b>GitHub</b> ;-)
|
||||
</h1>
|
||||
<div>
|
||||
<BaseButton
|
||||
href="https://github.com/justboil/admin-one-vue-tailwind"
|
||||
:icon="mdiGithub"
|
||||
label="GitHub"
|
||||
target="_blank"
|
||||
rounded-full
|
||||
/>
|
||||
</div>
|
||||
</SectionBanner>
|
||||
</template>
|
||||
41
src/components/SectionTitleLine.vue
Normal file
41
src/components/SectionTitleLine.vue
Normal file
|
|
@ -0,0 +1,41 @@
|
|||
<script setup>
|
||||
import { useSlots, computed } from "vue";
|
||||
import BaseIcon from "@/components/BaseIcon.vue";
|
||||
import IconRounded from "@/components/IconRounded.vue";
|
||||
|
||||
defineProps({
|
||||
icon: {
|
||||
type: String,
|
||||
default: null,
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
main: Boolean,
|
||||
});
|
||||
|
||||
const hasSlot = computed(() => useSlots().default);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section
|
||||
:class="{ 'pt-6': !main }"
|
||||
class="mb-6 flex items-center justify-between"
|
||||
>
|
||||
<div class="flex items-center justify-start">
|
||||
<IconRounded
|
||||
v-if="icon && main"
|
||||
:icon="icon"
|
||||
color="light"
|
||||
class="mr-3"
|
||||
bg
|
||||
/>
|
||||
<BaseIcon v-else-if="icon" :path="icon" class="mr-2" size="20" />
|
||||
<h1 :class="main ? 'text-3xl' : 'text-2xl'" class="leading-tight">
|
||||
{{ title }}
|
||||
</h1>
|
||||
</div>
|
||||
<slot v-if="hasSlot" />
|
||||
</section>
|
||||
</template>
|
||||
|
|
@ -10,19 +10,10 @@ const props = defineProps({
|
|||
type: String,
|
||||
default: null,
|
||||
},
|
||||
api: {
|
||||
type: String,
|
||||
default: "avataaars",
|
||||
},
|
||||
});
|
||||
|
||||
const avatar = computed(
|
||||
() =>
|
||||
props.avatar ??
|
||||
`https://avatars.dicebear.com/api/${props.api}/${props.username.replace(
|
||||
/[^a-z0-9]+/i,
|
||||
"-"
|
||||
)}.svg`
|
||||
() => props.avatar ?? `https://i.imgur.com/nkx5ufe.jpg`
|
||||
);
|
||||
|
||||
const username = computed(() => props.username);
|
||||
|
|
@ -33,7 +24,7 @@ const username = computed(() => props.username);
|
|||
<img
|
||||
:src="avatar"
|
||||
:alt="username"
|
||||
class="rounded-full block h-auto w-full max-w-full bg-gray-100 dark:bg-slate-800"
|
||||
class="rounded-full block h-auto w-40 max-h-40 bg-gray-100 dark:bg-slate-800"
|
||||
/>
|
||||
<slot />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,43 +1,49 @@
|
|||
<script setup>
|
||||
import { computed, ref } from "vue";
|
||||
import { useMainStore } from "@/stores/main";
|
||||
import { mdiCheckDecagram } from "@mdi/js";
|
||||
import {
|
||||
mdiSecurity,
|
||||
mdiTestTube,
|
||||
mdiAccountStar,
|
||||
mdiCodeBraces,
|
||||
} from "@mdi/js";
|
||||
import BaseLevel from "@/components/BaseLevel.vue";
|
||||
import UserAvatarCurrentUser from "@/components/UserAvatarCurrentUser.vue";
|
||||
import CardBox from "@/components/CardBox.vue";
|
||||
import FormCheckRadio from "@/components/FormCheckRadio.vue";
|
||||
import PillTag from "@/components/PillTag.vue";
|
||||
|
||||
import { GetRandomMessage } from "@/constants";
|
||||
|
||||
const mainStore = useMainStore();
|
||||
|
||||
const userName = computed(() => mainStore.userName);
|
||||
|
||||
const userSwitchVal = ref(false);
|
||||
const greeting = GetRandomMessage();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<CardBox>
|
||||
<BaseLevel type="justify-around lg:justify-center">
|
||||
<UserAvatarCurrentUser class="lg:mx-12" />
|
||||
<BaseLevel
|
||||
type="justify-around lg:justify-center md:space-x-4 lg:space-x-0"
|
||||
>
|
||||
<UserAvatarCurrentUser class="w-28 md:w-32 lg:w-44 lg:mx-12" />
|
||||
<div class="space-y-3 text-center md:text-left lg:mx-12">
|
||||
<div class="flex justify-center md:block">
|
||||
<FormCheckRadio
|
||||
v-model="userSwitchVal"
|
||||
name="notifications-switch"
|
||||
type="switch"
|
||||
label="Notifications"
|
||||
:input-value="true"
|
||||
/>
|
||||
<div class="space-y-2 md:space-y-0">
|
||||
<h1 class="text-2xl md:text-xl lg:text-2xl">
|
||||
{{ greeting.header[0] }}
|
||||
<b>{{ mainStore.userName }} </b>{{ greeting.header[1] }}
|
||||
</h1>
|
||||
</div>
|
||||
<h1 class="text-2xl">
|
||||
Howdy, <b>{{ userName }}</b
|
||||
>!
|
||||
</h1>
|
||||
<p>Last login <b>12 mins ago</b> from <b>127.0.0.1</b></p>
|
||||
<div class="flex justify-center md:block">
|
||||
<PillTag label="Verified" color="info" :icon="mdiCheckDecagram" />
|
||||
<div
|
||||
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"
|
||||
>
|
||||
<PillTag label="System Admin" color="danger" :icon="mdiSecurity" />
|
||||
<PillTag label="Beta Tester" color="warning" :icon="mdiTestTube" />
|
||||
<PillTag label="Veteran" color="success" :icon="mdiAccountStar" />
|
||||
<PillTag label="Active Dev" color="info" :icon="mdiCodeBraces" />
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-xl md:text-lg lg:text-2lg">{{ greeting.comment }}</p>
|
||||
<p class="text-xs italic">Greeting by: {{ greeting.author }}</p>
|
||||
</div>
|
||||
</BaseLevel>
|
||||
</CardBox>
|
||||
</template>
|
||||
|
|
|
|||
92
src/constants/greetings.json
Normal file
92
src/constants/greetings.json
Normal file
|
|
@ -0,0 +1,92 @@
|
|||
[
|
||||
{
|
||||
"author": "Trmazi",
|
||||
"header": "Ready, <username>?",
|
||||
"comment": "Let's heat it up with this number!"
|
||||
},
|
||||
{
|
||||
"author": "Trmazi",
|
||||
"header": "Yo, <username> is in the House like Carpet.",
|
||||
"comment": "Like Chef Boyardee, my rhyme is truly cookin'"
|
||||
},
|
||||
{
|
||||
"author": "Trmazi",
|
||||
"header": "There are two wolves inside of you, <username>.",
|
||||
"comment": "The furry convention is going very well."
|
||||
},
|
||||
{
|
||||
"author": "Trmazi",
|
||||
"header": "Howdy, <username>!",
|
||||
"comment": "Gonna break some records today?"
|
||||
},
|
||||
{
|
||||
"author": "Trmazi",
|
||||
"header": "Hiya, <username>!",
|
||||
"comment": "Glad to have you here."
|
||||
},
|
||||
{
|
||||
"author": "Trmazi",
|
||||
"header": "Good to see you, <username>!",
|
||||
"comment": "Show us your moves!"
|
||||
},
|
||||
{
|
||||
"author": "Trmazi",
|
||||
"header": "It's a Bird... It's a Plane... It's <username>!",
|
||||
"comment": "Let's push it to the grindstone."
|
||||
},
|
||||
{
|
||||
"author": "yaladre",
|
||||
"header": "What's shaking, <username>?",
|
||||
"comment": "Ready to start your session?"
|
||||
},
|
||||
{
|
||||
"author": "GlItChEdV0iDz",
|
||||
"header": "Now who dat is? Why... it's <username>!",
|
||||
"comment": "Why's it always the same old thing?"
|
||||
},
|
||||
{
|
||||
"author": "Error",
|
||||
"header": "Error: Couldn't load <username>'s profile.",
|
||||
"comment": "Purging data. Please log in again."
|
||||
},
|
||||
{
|
||||
"author": "caldenza",
|
||||
"header": "Please don't actually eat glass, <username>.",
|
||||
"comment": "\"I can't believe I have to write that.\""
|
||||
},
|
||||
{
|
||||
"author": "SQWERLY!",
|
||||
"header": "Welcome to PhaseII, <username>.",
|
||||
"comment": "\"Where you can actually still play older versions of DDR!\""
|
||||
},
|
||||
{
|
||||
"author": "manamaster",
|
||||
"header": "Go for Kaiden, <username>.",
|
||||
"comment": "You can do it!"
|
||||
},
|
||||
{
|
||||
"author": "manamaster",
|
||||
"header": "Steal from your local Round1, <username>.",
|
||||
"comment": "The DDR cab is free if you believe hard enough."
|
||||
},
|
||||
{
|
||||
"author": "manamaster",
|
||||
"header": "You should play Bone Eater, <username>!",
|
||||
"comment": "\"It's really good, I swear!\""
|
||||
},
|
||||
{
|
||||
"author": "manamaster",
|
||||
"header": "No I cannot sell the DDR Gold cab to you for $500, <username>.",
|
||||
"comment": "Please stop asking."
|
||||
},
|
||||
{
|
||||
"author": "topet",
|
||||
"header": "Hello, <username>!",
|
||||
"comment": "If more than one is many, how many is few?"
|
||||
},
|
||||
{
|
||||
"author": "barru",
|
||||
"header": "What's good, <username>?",
|
||||
"comment": "As long as you're around, everything's great 😄"
|
||||
}
|
||||
]
|
||||
463
src/constants/index.js
Normal file
463
src/constants/index.js
Normal file
|
|
@ -0,0 +1,463 @@
|
|||
import Greetings from "@/constants/greetings.json";
|
||||
|
||||
export class GameConstants {
|
||||
static BEATSTREAM = "bst";
|
||||
static BISHI_BASHI = "bishi";
|
||||
static BISHI_BASHI_NEW = "newbishi";
|
||||
static DANCE_EVOLUTION = "danevo";
|
||||
static DANCE_RUSH = "dancerush";
|
||||
static DDR = "ddr";
|
||||
static DDRCLASS = "ddrclass";
|
||||
static DDROMNI = "ddromni";
|
||||
static DRUMMANIA = "dm";
|
||||
static EEMALL = "eemall";
|
||||
static FUTURETOMTOM = "ftt";
|
||||
static GITADORA_DM = "gitadora_dm";
|
||||
static GITADORA_GF = "gitadora_gf";
|
||||
static GUITARFREAKS = "gf";
|
||||
static IIDX = "iidx";
|
||||
static IIDXCLASS = "iidxclass";
|
||||
static JUBEAT = "jubeat";
|
||||
static LOVEPLUS = "loveplus";
|
||||
static MGA = "metalgear";
|
||||
static MUSECA = "museca";
|
||||
static NOSTALGIA = "nost";
|
||||
static OTOMEDIUS = "oto";
|
||||
static OTOCA = "otoca";
|
||||
static POPN_HELLO = "hpm";
|
||||
static POPN_MUSIC = "pnm";
|
||||
static QMA = "qma";
|
||||
static REFLEC_BEAT = "reflec";
|
||||
static ROAD_FIGHTERS = "roadfighters";
|
||||
static SDVX = "sdvx";
|
||||
static SILENT_HILL = "sha";
|
||||
static SILENT_SCOPE = "scope";
|
||||
static TSUMTSUM = "tsum";
|
||||
static WINNING_ELEVEN = "weac";
|
||||
}
|
||||
|
||||
export class VersionConstants {
|
||||
static BEATSTREAM = 1;
|
||||
static BEATSTREAM_2 = 2;
|
||||
|
||||
static THE_STAR_BISHI_BASHI = 1;
|
||||
static BISHI_BASHI_CHANNEL = 1;
|
||||
|
||||
static DANCE_EVOLUTION = 1;
|
||||
|
||||
static DANCE_RUSH_STARDOM = 1;
|
||||
|
||||
static DDR_CS_SOLO = 200;
|
||||
static DDR_1ST_MIX = 1;
|
||||
static DDR_2ND_MIX = 2;
|
||||
static DDR_3RD_MIX = 3;
|
||||
static DDR_4TH_MIX = 4;
|
||||
static DDR_5TH_MIX = 5;
|
||||
static DDR_MAX = 6;
|
||||
static DDR_MAX2 = 7;
|
||||
static DDR_EXTREME = 8;
|
||||
static DDR_SUPERNOVA = 9;
|
||||
static DDR_SUPERNOVA_2 = 10;
|
||||
static DDR_X = 11;
|
||||
static DDR_X2 = 12;
|
||||
static DDR_X3_VS_2ND_MIX = 13;
|
||||
static DDR_2013 = 14;
|
||||
static DDR_2014 = 15;
|
||||
static DDR_ACE = 16;
|
||||
static DDR_A20 = 17;
|
||||
static DDR_A20_PLUS = 18;
|
||||
static DDR_A3 = 19;
|
||||
|
||||
static DRUMMANIA_1ST = 1;
|
||||
static DRUMMANIA_2ND = 2;
|
||||
static DRUMMANIA_3RD = 3;
|
||||
static DRUMMANIA_4TH = 4;
|
||||
static DRUMMANIA_5TH = 5;
|
||||
static DRUMMANIA_6TH = 6;
|
||||
static DRUMMANIA_7TH = 7;
|
||||
static DRUMMANIA_8TH = 8;
|
||||
static DRUMMANIA_9TH = 9;
|
||||
static DRUMMANIA_10TH = 10;
|
||||
static DRUMMANIA_V = 11;
|
||||
static DRUMMANIA_V2 = 12;
|
||||
static DRUMMANIA_V3 = 13;
|
||||
static DRUMMANIA_V4 = 14;
|
||||
static DRUMMANIA_V5 = 15;
|
||||
static DRUMMANIA_V6 = 16;
|
||||
static DRUMMANIA_V7 = 17;
|
||||
static DRUMMANIA_V8 = 18;
|
||||
|
||||
static EEMALL = 1;
|
||||
static EEMALL_2ND = 2;
|
||||
|
||||
static FUTURETOMTOM = 1;
|
||||
static FUTURETOMTOM_VER2 = 2;
|
||||
|
||||
static GITADORA = 1;
|
||||
static GITADORA_OVERDRIVE = 2;
|
||||
static GITADORA_TRIBOOST = 3;
|
||||
static GITADORA_TRIBOOST_RE_EVOLVE = 4;
|
||||
static GITADORA_MATIXX = 5;
|
||||
static GITADORA_EXCHAIN = 6;
|
||||
static GITADORA_NEXTAGE = 7;
|
||||
static GITADORA_HIGH_VOLTAGE = 8;
|
||||
static GITADORA_FUZZUP = 9;
|
||||
|
||||
static GUITARFREAKS_1ST = 0;
|
||||
static GUITARFREAKS_2ND = 1;
|
||||
static GUITARFREAKS_3RD = 2;
|
||||
static GUITARFREAKS_4TH = 3;
|
||||
static GUITARFREAKS_5TH = 4;
|
||||
static GUITARFREAKS_6TH = 5;
|
||||
static GUITARFREAKS_7TH = 6;
|
||||
static GUITARFREAKS_8TH = 7;
|
||||
static GUITARFREAKS_9TH = 8;
|
||||
static GUITARFREAKS_10TH = 9;
|
||||
static GUITARFREAKS_11TH = 10;
|
||||
static GUITARFREAKS_V = 11;
|
||||
static GUITARFREAKS_V2 = 12;
|
||||
static GUITARFREAKS_V3 = 13;
|
||||
static GUITARFREAKS_V4 = 14;
|
||||
static GUITARFREAKS_V5 = 15;
|
||||
static GUITARFREAKS_V6 = 16;
|
||||
static GUITARFREAKS_V7 = 17;
|
||||
static GUITARFREAKS_V8 = 18;
|
||||
|
||||
static IIDX = 1;
|
||||
static IIDX_2ND_STYLE = 2;
|
||||
static IIDX_3RD_STYLE = 3;
|
||||
static IIDX_4TH_STYLE = 4;
|
||||
static IIDX_5TH_STYLE = 5;
|
||||
static IIDX_6TH_STYLE = 6;
|
||||
static IIDX_7TH_STYLE = 7;
|
||||
static IIDX_8TH_STYLE = 8;
|
||||
static IIDX_9TH_STYLE = 9;
|
||||
static IIDX_10TH_STYLE = 10;
|
||||
static IIDX_RED = 11;
|
||||
static IIDX_HAPPY_SKY = 12;
|
||||
static IIDX_DISTORTED = 13;
|
||||
static IIDX_GOLD = 14;
|
||||
static IIDX_DJ_TROOPERS = 15;
|
||||
static IIDX_EMPRESS = 16;
|
||||
static IIDX_SIRIUS = 17;
|
||||
static IIDX_RESORT_ANTHEM = 18;
|
||||
static IIDX_LINCLE = 19;
|
||||
static IIDX_TRICORO = 20;
|
||||
static IIDX_SPADA = 21;
|
||||
static IIDX_PENDUAL = 22;
|
||||
static IIDX_COPULA = 23;
|
||||
static IIDX_SINOBUZ = 24;
|
||||
static IIDX_CANNON_BALLERS = 25;
|
||||
static IIDX_ROOTAGE = 26;
|
||||
static IIDX_HEROIC_VERSE = 27;
|
||||
static IIDX_BISTROVER = 28;
|
||||
static IIDX_CASTHOUR = 29;
|
||||
static IIDX_RESIDENT = 30;
|
||||
|
||||
static JUBEAT = 1;
|
||||
static JUBEAT_RIPPLES = 2;
|
||||
static JUBEAT_RIPPLES_APPEND = 3;
|
||||
static JUBEAT_KNIT = 4;
|
||||
static JUBEAT_KNIT_APPEND = 5;
|
||||
static JUBEAT_COPIOUS = 6;
|
||||
static JUBEAT_COPIOUS_APPEND = 7;
|
||||
static JUBEAT_SAUCER = 8;
|
||||
static JUBEAT_SAUCER_FULFILL = 9;
|
||||
static JUBEAT_PROP = 10;
|
||||
static JUBEAT_QUBELL = 11;
|
||||
static JUBEAT_CLAN = 12;
|
||||
static JUBEAT_FESTO = 13;
|
||||
static JUBEAT_AVE = 14;
|
||||
|
||||
static LOVEPLUS_ARCADE = 1;
|
||||
static LOVEPLUS_CC = 2;
|
||||
|
||||
static METALGEAR_ARCADE = 1;
|
||||
|
||||
static MUSECA = 1;
|
||||
static MUSECA_1_PLUS = 2;
|
||||
|
||||
static NOSTALGIA = 1;
|
||||
static NOSTALGIA_FORTE = 2;
|
||||
static NOSTALGIA_OP_2 = 3;
|
||||
static NOSTALGIA_OP_3 = 4;
|
||||
|
||||
static OTOMEDIUS = 1;
|
||||
|
||||
static OTOCA_DOLL = 1;
|
||||
|
||||
static HELLO_POPN_MUSIC = 1;
|
||||
|
||||
static POPN_MUSIC = 1;
|
||||
static POPN_MUSIC_2 = 2;
|
||||
static POPN_MUSIC_3 = 3;
|
||||
static POPN_MUSIC_4 = 4;
|
||||
static POPN_MUSIC_5 = 5;
|
||||
static POPN_MUSIC_6 = 6;
|
||||
static POPN_MUSIC_7 = 7;
|
||||
static POPN_MUSIC_8 = 8;
|
||||
static POPN_MUSIC_9 = 9;
|
||||
static POPN_MUSIC_10 = 10;
|
||||
static POPN_MUSIC_11 = 11;
|
||||
static POPN_MUSIC_IROHA = 12;
|
||||
static POPN_MUSIC_CARNIVAL = 13;
|
||||
static POPN_MUSIC_FEVER = 14;
|
||||
static POPN_MUSIC_ADVENTURE = 15;
|
||||
static POPN_MUSIC_PARTY = 16;
|
||||
static POPN_MUSIC_THE_MOVIE = 17;
|
||||
static POPN_MUSIC_SENGOKU_RETSUDEN = 18;
|
||||
static POPN_MUSIC_TUNE_STREET = 19;
|
||||
static POPN_MUSIC_FANTASIA = 20;
|
||||
static POPN_MUSIC_SUNNY_PARK = 21;
|
||||
static POPN_MUSIC_LAPISTORIA = 22;
|
||||
static POPN_MUSIC_ECLALE = 23;
|
||||
static POPN_MUSIC_USANEKO = 24;
|
||||
static POPN_MUSIC_PEACE = 25;
|
||||
static POPN_MUSIC_KAIMEI_RIDDLES = 26;
|
||||
|
||||
static QMA = 1;
|
||||
static QMA_II = 2;
|
||||
static QMA_III = 3;
|
||||
static QMA_IV = 4;
|
||||
static QMA_V = 5;
|
||||
static QMA_VI = 6;
|
||||
static QMA_VII = 7;
|
||||
static QMA_VIII = 8;
|
||||
static QMA_GATE = 9;
|
||||
static QMA_CAMPUS = 10;
|
||||
static QMA_DAWN = 11;
|
||||
static QMA_TOKYO = 12;
|
||||
static QMA_EVOLVE = 13;
|
||||
static QMA_MAXIVCORD = 14;
|
||||
static QMA_XROSS_VOYAGE = 15;
|
||||
static QMA_KIBOU = 16;
|
||||
static QMA_MUGEN = 17;
|
||||
|
||||
static REFLEC_BEAT = 1;
|
||||
static REFLEC_BEAT_LIMELIGHT = 2;
|
||||
static REFLEC_BEAT_COLETTE = 3;
|
||||
static REFLEC_BEAT_GROOVIN = 4;
|
||||
static REFLEC_BEAT_VOLZZA = 5;
|
||||
static REFLEC_BEAT_VOLZZA_2 = 6;
|
||||
static REFLEC_BEAT_REFLESIA = 7;
|
||||
|
||||
static ROAD_FIGHTERS = 1;
|
||||
|
||||
static SDVX_BOOTH = 1;
|
||||
static SDVX_INFINITE_INFECTION = 2;
|
||||
static SDVX_GRAVITY_WARS = 3;
|
||||
static SDVX_HEAVENLY_HAVEN = 4;
|
||||
static SDVX_VIVID_WAVE = 5;
|
||||
static SDVX_EXCEED_GEAR = 6;
|
||||
|
||||
static SILENT_HILL_ARCADE = 1;
|
||||
|
||||
static SILENT_SCOPE_BONE_EATER = 1;
|
||||
|
||||
static DISNEY_TSUM_TSUM = 1;
|
||||
|
||||
static WINNING_ELEVEN_2008 = 1;
|
||||
static WINNING_ELEVEN_2010 = 2;
|
||||
static WINNING_ELEVEN_2012 = 3;
|
||||
static WINNING_ELEVEN_2014 = 4;
|
||||
}
|
||||
|
||||
export function GetRandomMessage() {
|
||||
const key = Math.floor(Math.random() * Greetings.length);
|
||||
const selected = Greetings[key];
|
||||
selected.header = selected.header.split("<username>");
|
||||
return selected;
|
||||
}
|
||||
|
||||
const gameData = [
|
||||
{
|
||||
id: GameConstants.BEATSTREAM,
|
||||
name: "BeatStream",
|
||||
icon: null,
|
||||
cardBG: null,
|
||||
},
|
||||
{
|
||||
id: GameConstants.BISHI_BASHI,
|
||||
name: "BishiBashi",
|
||||
icon: null,
|
||||
cardBG: null,
|
||||
},
|
||||
{
|
||||
id: GameConstants.BISHI_BASHI_NEW,
|
||||
name: "BishiBashi Channel",
|
||||
icon: null,
|
||||
cardBG: null,
|
||||
},
|
||||
{
|
||||
id: GameConstants.DANCE_EVOLUTION,
|
||||
name: "DanceEvolution",
|
||||
icon: null,
|
||||
cardBG: null,
|
||||
},
|
||||
{
|
||||
id: GameConstants.DANCE_RUSH,
|
||||
name: "DanceRush",
|
||||
icon: null,
|
||||
cardBG: null,
|
||||
},
|
||||
{
|
||||
id: GameConstants.DDR,
|
||||
name: "DanceDance Revolution",
|
||||
icon: null,
|
||||
cardBG: null,
|
||||
},
|
||||
{
|
||||
id: GameConstants.DDRCLASS,
|
||||
name: "Classic DDR",
|
||||
icon: "/assets/icon/ddr.png",
|
||||
cardBG: "/assets/card/ddr.png",
|
||||
},
|
||||
{
|
||||
id: GameConstants.DDROMNI,
|
||||
name: "DDR OmniMIX",
|
||||
icon: "/assets/icon/ddr.png",
|
||||
cardBG: "/assets/card/ddr.png",
|
||||
},
|
||||
{
|
||||
id: GameConstants.DRUMMANIA,
|
||||
name: "DRUMMANIA",
|
||||
icon: null,
|
||||
cardBG: null,
|
||||
},
|
||||
{
|
||||
id: GameConstants.EEMALL,
|
||||
name: "eeMall",
|
||||
icon: null,
|
||||
cardBG: null,
|
||||
},
|
||||
{
|
||||
id: GameConstants.FUTURETOMTOM,
|
||||
name: "Future Tom Tom",
|
||||
icon: null,
|
||||
cardBG: null,
|
||||
},
|
||||
{
|
||||
id: GameConstants.GITADORA_DM,
|
||||
name: "GITADORA (Drums)",
|
||||
icon: null,
|
||||
cardBG: null,
|
||||
},
|
||||
{
|
||||
id: GameConstants.GITADORA_GF,
|
||||
name: "GITADORA (Guitar)",
|
||||
icon: null,
|
||||
cardBG: null,
|
||||
},
|
||||
{
|
||||
id: GameConstants.GUITARFREAKS,
|
||||
name: "GUITAR FREAKS",
|
||||
icon: null,
|
||||
cardBG: null,
|
||||
},
|
||||
{
|
||||
id: GameConstants.IIDX,
|
||||
name: "beatmaniaIIDX",
|
||||
icon: "/assets/icon/iidx.png",
|
||||
cardBG: "/assets/card/iidx.png",
|
||||
},
|
||||
{
|
||||
id: GameConstants.IIDXCLASS,
|
||||
name: "Classic IIDX",
|
||||
icon: "/assets/icon/iidx.png",
|
||||
cardBG: "/assets/card/iidx.png",
|
||||
},
|
||||
{
|
||||
id: GameConstants.JUBEAT,
|
||||
name: "JUBEAT",
|
||||
icon: null,
|
||||
cardBG: null,
|
||||
},
|
||||
{
|
||||
id: GameConstants.LOVEPLUS,
|
||||
name: "LovePlus",
|
||||
icon: null,
|
||||
cardBG: null,
|
||||
},
|
||||
{
|
||||
id: GameConstants.MGA,
|
||||
name: "Metal Gear Arcade",
|
||||
icon: null,
|
||||
cardBG: null,
|
||||
},
|
||||
{
|
||||
id: GameConstants.MUSECA,
|
||||
name: "Museca",
|
||||
icon: null,
|
||||
cardBG: null,
|
||||
},
|
||||
{
|
||||
id: GameConstants.NOSTALGIA,
|
||||
name: "Nostalgia",
|
||||
icon: null,
|
||||
cardBG: null,
|
||||
},
|
||||
{
|
||||
id: GameConstants.OTOMEDIUS,
|
||||
name: "Otomedius",
|
||||
icon: null,
|
||||
cardBG: null,
|
||||
},
|
||||
{
|
||||
id: GameConstants.OTOCA,
|
||||
name: "Otoca d' Or",
|
||||
icon: null,
|
||||
cardBG: null,
|
||||
},
|
||||
{
|
||||
id: GameConstants.POPN_HELLO,
|
||||
name: "Hello! Pop'n Music",
|
||||
icon: "/assets/icon/popn.png",
|
||||
cardBG: "/assets/card/popn.png",
|
||||
},
|
||||
{
|
||||
id: GameConstants.POPN_MUSIC,
|
||||
name: "pop'n music",
|
||||
icon: "/assets/icon/popn.png",
|
||||
cardBG: "/assets/card/popn.png",
|
||||
},
|
||||
{
|
||||
id: GameConstants.QMA,
|
||||
name: "Quiz Magic Academy",
|
||||
icon: null,
|
||||
cardBG: null,
|
||||
},
|
||||
{
|
||||
id: GameConstants.REFLEC_BEAT,
|
||||
name: "ReflecBeat",
|
||||
icon: null,
|
||||
cardBG: null,
|
||||
},
|
||||
{
|
||||
id: GameConstants.ROAD_FIGHTERS,
|
||||
name: "Road Fighters",
|
||||
icon: null,
|
||||
cardBG: null,
|
||||
},
|
||||
{
|
||||
id: GameConstants.SDVX,
|
||||
name: "SOUND VOLTEX",
|
||||
icon: null,
|
||||
cardBG: null,
|
||||
},
|
||||
];
|
||||
|
||||
export function getGameInfo(game) {
|
||||
var requestedData = gameData.find((item) => item.id === game);
|
||||
|
||||
if (!requestedData) {
|
||||
return null;
|
||||
}
|
||||
|
||||
if (!requestedData.icon) {
|
||||
requestedData.icon = `/assets/icon/${game}.png`;
|
||||
}
|
||||
if (!requestedData.cardBG) {
|
||||
requestedData.cardBG = `/assets/card/${game}.png`;
|
||||
}
|
||||
return requestedData;
|
||||
}
|
||||
|
|
@ -6,3 +6,14 @@
|
|||
@import "_progress.css";
|
||||
@import "_scrollbars.css";
|
||||
@import "_table.css";
|
||||
|
||||
.scale-enter-active,
|
||||
.scale-leave-active {
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.scale-enter-from,
|
||||
.scale-leave-to {
|
||||
opacity: 0;
|
||||
transform: scale(0.9);
|
||||
}
|
||||
|
|
@ -7,17 +7,16 @@ import menuNavBar from "@/menuNavBar.js";
|
|||
import { useMainStore } from "@/stores/main.js";
|
||||
import { useStyleStore } from "@/stores/style.js";
|
||||
import BaseIcon from "@/components/BaseIcon.vue";
|
||||
import FormControl from "@/components/FormControl.vue";
|
||||
import NavBar from "@/components/NavBar.vue";
|
||||
import NavBarItemPlain from "@/components/NavBarItemPlain.vue";
|
||||
import AsideMenu from "@/components/AsideMenu.vue";
|
||||
import FooterBar from "@/components/FooterBar.vue";
|
||||
|
||||
useMainStore().setUser({
|
||||
name: "John Doe",
|
||||
email: "john@example.com",
|
||||
name: "Trmazi",
|
||||
email: "sex@sex.com",
|
||||
avatar:
|
||||
"https://avatars.dicebear.com/api/avataaars/example.svg?options[top][]=shortHair&options[accessoriesChance]=93",
|
||||
"https://cdn.discordapp.com/avatars/372530806628941824/a2d1b66d0e2100a571305b8281c26f8b",
|
||||
});
|
||||
|
||||
const layoutAsidePadding = "xl:pl-60";
|
||||
|
|
@ -35,10 +34,6 @@ router.beforeEach(() => {
|
|||
});
|
||||
|
||||
const menuClick = (event, item) => {
|
||||
if (item.isToggleLightDark) {
|
||||
styleStore.setDarkMode();
|
||||
}
|
||||
|
||||
if (item.isLogout) {
|
||||
//
|
||||
}
|
||||
|
|
@ -79,14 +74,7 @@ const menuClick = (event, item) => {
|
|||
>
|
||||
<BaseIcon :path="mdiMenu" size="24" />
|
||||
</NavBarItemPlain>
|
||||
<NavBarItemPlain use-margin>
|
||||
<FormControl
|
||||
placeholder="Search (ctrl+k)"
|
||||
ctrl-k-focus
|
||||
transparent
|
||||
borderless
|
||||
/>
|
||||
</NavBarItemPlain>
|
||||
<NavBarItemPlain use-margin> </NavBarItemPlain>
|
||||
</NavBar>
|
||||
<AsideMenu
|
||||
:is-aside-mobile-expanded="isAsideMobileExpanded"
|
||||
|
|
@ -96,15 +84,7 @@ const menuClick = (event, item) => {
|
|||
@aside-lg-close-click="isAsideLgActive = false"
|
||||
/>
|
||||
<slot />
|
||||
<FooterBar>
|
||||
Get more with
|
||||
<a
|
||||
href="https://tailwind-vue.justboil.me/"
|
||||
target="_blank"
|
||||
class="text-blue-600"
|
||||
>Premium version</a
|
||||
>
|
||||
</FooterBar>
|
||||
<FooterBar />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
14
src/main.js
14
src/main.js
|
|
@ -5,7 +5,7 @@ import App from "./App.vue";
|
|||
import router from "./router";
|
||||
import { useMainStore } from "@/stores/main.js";
|
||||
import { useStyleStore } from "@/stores/style.js";
|
||||
import { darkModeKey, styleKey } from "@/config.js";
|
||||
import { styleKey } from "@/config.js";
|
||||
|
||||
import "./css/main.css";
|
||||
|
||||
|
|
@ -27,16 +27,12 @@ mainStore.fetch("history");
|
|||
styleStore.setStyle(localStorage[styleKey] ?? "basic");
|
||||
|
||||
/* Dark mode */
|
||||
if (
|
||||
(!localStorage[darkModeKey] &&
|
||||
window.matchMedia("(prefers-color-scheme: dark)").matches) ||
|
||||
localStorage[darkModeKey] === "1"
|
||||
) {
|
||||
styleStore.setDarkMode(true);
|
||||
}
|
||||
styleStore.setDarkMode(
|
||||
window.matchMedia("(prefers-color-scheme: dark)").matches
|
||||
);
|
||||
|
||||
/* Default title tag */
|
||||
const defaultDocumentTitle = "Admin One Vue 3 Tailwind";
|
||||
const defaultDocumentTitle = "PhaseII eAmusement Network";
|
||||
|
||||
/* Set document title from route meta */
|
||||
router.afterEach((to) => {
|
||||
|
|
|
|||
|
|
@ -1,21 +1,14 @@
|
|||
import {
|
||||
mdiAccountCircle,
|
||||
mdiMonitor,
|
||||
mdiGithub,
|
||||
mdiLock,
|
||||
mdiAlertCircle,
|
||||
mdiSquareEditOutline,
|
||||
mdiTable,
|
||||
mdiViewList,
|
||||
mdiTelevisionGuide,
|
||||
mdiResponsive,
|
||||
mdiPalette,
|
||||
mdiReact,
|
||||
} from "@mdi/js";
|
||||
|
||||
export default [
|
||||
{
|
||||
to: "/dashboard",
|
||||
to: "/",
|
||||
icon: mdiMonitor,
|
||||
label: "Dashboard",
|
||||
},
|
||||
|
|
@ -34,53 +27,21 @@ export default [
|
|||
label: "UI",
|
||||
icon: mdiTelevisionGuide,
|
||||
},
|
||||
{
|
||||
to: "/responsive",
|
||||
label: "Responsive",
|
||||
icon: mdiResponsive,
|
||||
},
|
||||
{
|
||||
to: "/",
|
||||
label: "Styles",
|
||||
icon: mdiPalette,
|
||||
},
|
||||
{
|
||||
to: "/profile",
|
||||
label: "Profile",
|
||||
icon: mdiAccountCircle,
|
||||
},
|
||||
{
|
||||
to: "/login",
|
||||
label: "Login",
|
||||
icon: mdiLock,
|
||||
},
|
||||
{
|
||||
to: "/error",
|
||||
label: "Error",
|
||||
icon: mdiAlertCircle,
|
||||
},
|
||||
{
|
||||
label: "Dropdown",
|
||||
icon: mdiViewList,
|
||||
menu: [
|
||||
{
|
||||
label: "Item One",
|
||||
menu: [
|
||||
{
|
||||
label: "balls",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "Item Two",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
href: "https://github.com/justboil/admin-one-vue-tailwind",
|
||||
label: "GitHub",
|
||||
icon: mdiGithub,
|
||||
target: "_blank",
|
||||
},
|
||||
{
|
||||
href: "https://github.com/justboil/admin-one-react-tailwind",
|
||||
label: "React version",
|
||||
icon: mdiReact,
|
||||
target: "_blank",
|
||||
},
|
||||
];
|
||||
|
|
|
|||
|
|
@ -1,89 +1,37 @@
|
|||
import {
|
||||
mdiMenu,
|
||||
mdiClockOutline,
|
||||
mdiCloud,
|
||||
mdiCrop,
|
||||
mdiCogs,
|
||||
mdiAccount,
|
||||
mdiCogOutline,
|
||||
mdiEmail,
|
||||
mdiLogout,
|
||||
mdiThemeLightDark,
|
||||
mdiGithub,
|
||||
mdiReact,
|
||||
mdiServerNetwork,
|
||||
} from "@mdi/js";
|
||||
|
||||
export default [
|
||||
{
|
||||
icon: mdiMenu,
|
||||
label: "Sample menu",
|
||||
menu: [
|
||||
{
|
||||
icon: mdiClockOutline,
|
||||
label: "Item One",
|
||||
},
|
||||
{
|
||||
icon: mdiCloud,
|
||||
label: "Item Two",
|
||||
},
|
||||
{
|
||||
isDivider: true,
|
||||
},
|
||||
{
|
||||
icon: mdiCrop,
|
||||
label: "Item Last",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
isCurrentUser: true,
|
||||
menu: [
|
||||
{
|
||||
icon: mdiAccount,
|
||||
label: "My Profile",
|
||||
label: "Profile",
|
||||
to: "/profile",
|
||||
},
|
||||
{
|
||||
icon: mdiCogOutline,
|
||||
label: "Settings",
|
||||
icon: mdiServerNetwork,
|
||||
label: "Integrations",
|
||||
},
|
||||
{
|
||||
icon: mdiEmail,
|
||||
label: "Messages",
|
||||
},
|
||||
{
|
||||
isDivider: true,
|
||||
},
|
||||
{
|
||||
icon: mdiLogout,
|
||||
label: "Log Out",
|
||||
isLogout: true,
|
||||
label: "Notifications",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
icon: mdiThemeLightDark,
|
||||
label: "Light/Dark",
|
||||
isDesktopNoLabel: true,
|
||||
isToggleLightDark: true,
|
||||
},
|
||||
{
|
||||
icon: mdiGithub,
|
||||
label: "GitHub",
|
||||
isDesktopNoLabel: true,
|
||||
href: "https://github.com/justboil/admin-one-vue-tailwind",
|
||||
target: "_blank",
|
||||
},
|
||||
{
|
||||
icon: mdiReact,
|
||||
label: "React version",
|
||||
isDesktopNoLabel: true,
|
||||
href: "https://github.com/justboil/admin-one-react-tailwind",
|
||||
target: "_blank",
|
||||
icon: mdiCogs,
|
||||
label: "Edit Dashboard",
|
||||
},
|
||||
{
|
||||
icon: mdiLogout,
|
||||
label: "Log out",
|
||||
isDesktopNoLabel: true,
|
||||
isLogout: true,
|
||||
},
|
||||
];
|
||||
|
|
|
|||
|
|
@ -1,23 +1,12 @@
|
|||
import { createRouter, createWebHashHistory } from "vue-router";
|
||||
import Style from "@/views/StyleView.vue";
|
||||
import Home from "@/views/HomeView.vue";
|
||||
|
||||
const routes = [
|
||||
{
|
||||
meta: {
|
||||
title: "Select style",
|
||||
},
|
||||
path: "/",
|
||||
name: "style",
|
||||
component: Style,
|
||||
},
|
||||
{
|
||||
// Document title tag
|
||||
// We combine it with defaultDocumentTitle set in `src/main.js` on router.afterEach hook
|
||||
meta: {
|
||||
title: "Dashboard",
|
||||
},
|
||||
path: "/dashboard",
|
||||
path: "/",
|
||||
name: "dashboard",
|
||||
component: Home,
|
||||
},
|
||||
|
|
|
|||
|
|
@ -3,26 +3,26 @@ import { computed, ref, onMounted } from "vue";
|
|||
import { useMainStore } from "@/stores/main";
|
||||
import {
|
||||
mdiAccountMultiple,
|
||||
mdiCartOutline,
|
||||
mdiChartTimelineVariant,
|
||||
mdiMonitorCellphone,
|
||||
mdiReload,
|
||||
mdiGithub,
|
||||
mdiChartPie,
|
||||
mdiGamepad,
|
||||
mdiAccountMultipleOutline,
|
||||
} 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 TableSampleClients from "@/components/TableSampleClients.vue";
|
||||
import NotificationBar from "@/components/NotificationBar.vue";
|
||||
import BaseButton from "@/components/BaseButton.vue";
|
||||
import CardBoxTransaction from "@/components/CardBoxTransaction.vue";
|
||||
import CardBoxGameStat from "@/components/CardBoxGameStat.vue";
|
||||
import CardBoxClient from "@/components/CardBoxClient.vue";
|
||||
import LayoutAuthenticated from "@/layouts/LayoutAuthenticated.vue";
|
||||
import SectionTitleLineWithButton from "@/components/SectionTitleLineWithButton.vue";
|
||||
import SectionBannerStarOnGitHub from "@/components/SectionBannerStarOnGitHub.vue";
|
||||
import SectionTitleLine from "@/components/SectionTitleLine.vue";
|
||||
import { GameConstants } from "@/constants";
|
||||
|
||||
const chartData = ref(null);
|
||||
|
||||
|
|
@ -37,84 +37,85 @@ onMounted(() => {
|
|||
const mainStore = useMainStore();
|
||||
|
||||
const clientBarItems = computed(() => mainStore.clients.slice(0, 4));
|
||||
|
||||
const transactionBarItems = computed(() => mainStore.history);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<LayoutAuthenticated>
|
||||
<SectionMain>
|
||||
<SectionTitleLineWithButton
|
||||
<h2 class="pb-4 text-4xl lg:text-5xl">Welcome to <samp>PhaseII</samp></h2>
|
||||
<UserCard class="mb-6" />
|
||||
|
||||
<SectionTitleLine
|
||||
:icon="mdiChartTimelineVariant"
|
||||
title="Overview"
|
||||
title="Quick Stats"
|
||||
main
|
||||
>
|
||||
<BaseButton
|
||||
href="https://github.com/justboil/admin-one-vue-tailwind"
|
||||
target="_blank"
|
||||
:icon="mdiGithub"
|
||||
label="Star on GitHub"
|
||||
color="contrast"
|
||||
rounded-full
|
||||
small
|
||||
/>
|
||||
</SectionTitleLineWithButton>
|
||||
/>
|
||||
|
||||
<div class="grid grid-cols-1 gap-6 lg:grid-cols-3 mb-6">
|
||||
<CardBoxWidget
|
||||
trend="12%"
|
||||
trend="12% (from last week)"
|
||||
trend-type="up"
|
||||
color="text-emerald-500"
|
||||
:icon="mdiAccountMultiple"
|
||||
:number="512"
|
||||
label="Clients"
|
||||
:number="37"
|
||||
label="Scores (This week)"
|
||||
/>
|
||||
<CardBoxWidget
|
||||
trend="12%"
|
||||
trend-type="down"
|
||||
color="text-blue-500"
|
||||
:icon="mdiCartOutline"
|
||||
:number="7770"
|
||||
prefix="$"
|
||||
label="Sales"
|
||||
:number="770"
|
||||
:prefix="'¢'"
|
||||
label="PhaseCoin"
|
||||
/>
|
||||
<CardBoxWidget
|
||||
trend="Overflow"
|
||||
trend="None Completed"
|
||||
trend-type="alert"
|
||||
color="text-red-500"
|
||||
:icon="mdiChartTimelineVariant"
|
||||
:number="256"
|
||||
suffix="%"
|
||||
label="Performance"
|
||||
:number="2"
|
||||
label="Active Goals"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
|
||||
<div class="flex flex-col justify-between">
|
||||
<CardBoxTransaction
|
||||
v-for="(transaction, index) in transactionBarItems"
|
||||
:key="index"
|
||||
:amount="transaction.amount"
|
||||
:date="transaction.date"
|
||||
:business="transaction.business"
|
||||
:type="transaction.type"
|
||||
:name="transaction.name"
|
||||
:account="transaction.account"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex flex-col justify-between">
|
||||
<CardBoxClient
|
||||
v-for="client in clientBarItems"
|
||||
:key="client.id"
|
||||
:name="client.name"
|
||||
:login="client.login"
|
||||
:date="client.created"
|
||||
:progress="client.progress"
|
||||
/>
|
||||
</div>
|
||||
<SectionTitleLine :icon="mdiGamepad" title="Game Stats" main />
|
||||
<div
|
||||
class="grid grid-flow-row auto-rows-auto grid-cols-1 md:grid-cols-2 gap-5 mb-5"
|
||||
>
|
||||
<CardBoxGameStat
|
||||
:game="GameConstants.GUITARFREAKS"
|
||||
value="#10 out of 132"
|
||||
profile-name="DJ. TRMAZI"
|
||||
type="ranking"
|
||||
/>
|
||||
<CardBoxGameStat
|
||||
:game="GameConstants.DRUMMANIA"
|
||||
:value="300"
|
||||
profile-name="TRMAZI"
|
||||
type="plays"
|
||||
/>
|
||||
<CardBoxGameStat
|
||||
:game="GameConstants.GITADORA_GF"
|
||||
:value="392"
|
||||
profile-name="TRMAZI"
|
||||
type="scores"
|
||||
/>
|
||||
<CardBoxGameStat
|
||||
:game="GameConstants.GITADORA_DM"
|
||||
value="#15 out of 200"
|
||||
profile-name="TRMAZI"
|
||||
type="ranking"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<SectionBannerStarOnGitHub class="mt-6 mb-6" />
|
||||
<SectionTitleLine :icon="mdiAccountMultipleOutline" title="Rivals" main />
|
||||
<div
|
||||
class="grid grid-flow-row auto-rows-auto grid-cols-1 md:grid-cols-2 gap-5 mb-5"
|
||||
>
|
||||
<CardBoxClient
|
||||
v-for="client in clientBarItems"
|
||||
:key="client.id"
|
||||
:name="client.name"
|
||||
:login="client.login"
|
||||
:date="client.created"
|
||||
:progress="client.progress"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<SectionTitleLineWithButton :icon="mdiChartPie" title="Trends overview">
|
||||
<BaseButton
|
||||
|
|
@ -132,10 +133,6 @@ const transactionBarItems = computed(() => mainStore.history);
|
|||
|
||||
<SectionTitleLineWithButton :icon="mdiAccountMultiple" title="Clients" />
|
||||
|
||||
<NotificationBar color="info" :icon="mdiMonitorCellphone">
|
||||
<b>Responsive table.</b> Collapses on mobile
|
||||
</NotificationBar>
|
||||
|
||||
<CardBox has-table>
|
||||
<TableSampleClients />
|
||||
</CardBox>
|
||||
|
|
|
|||
|
|
@ -6,7 +6,6 @@ import {
|
|||
mdiMail,
|
||||
mdiAsterisk,
|
||||
mdiFormTextboxPassword,
|
||||
mdiGithub,
|
||||
} from "@mdi/js";
|
||||
import SectionMain from "@/components/SectionMain.vue";
|
||||
import CardBox from "@/components/CardBox.vue";
|
||||
|
|
@ -46,15 +45,6 @@ const submitPass = () => {
|
|||
<LayoutAuthenticated>
|
||||
<SectionMain>
|
||||
<SectionTitleLineWithButton :icon="mdiAccount" title="Profile" main>
|
||||
<BaseButton
|
||||
href="https://github.com/justboil/admin-one-vue-tailwind"
|
||||
target="_blank"
|
||||
:icon="mdiGithub"
|
||||
label="Star on GitHub"
|
||||
color="contrast"
|
||||
rounded-full
|
||||
small
|
||||
/>
|
||||
</SectionTitleLineWithButton>
|
||||
|
||||
<UserCard class="mb-6" />
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ import vue from "@vitejs/plugin-vue";
|
|||
|
||||
// https://vitejs.dev/config/
|
||||
export default defineConfig({
|
||||
base: "/admin-one-vue-tailwind/",
|
||||
base: "/",
|
||||
plugins: [vue()],
|
||||
resolve: {
|
||||
alias: {
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user