mirror of
https://github.com/PhaseII-eAmusement-Network/PhaseWeb3-Vue.git
synced 2026-09-11 18:55:18 -05:00
TONS of progress
This commit is contained in:
Trenton Zimmer
BIN
public/assets/passes/generic.png
Normal file
BIN
public/assets/passes/generic.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 113 KiB |
@@ -1,11 +1,13 @@
|
||||
<script setup>
|
||||
import { computed } from "vue";
|
||||
import { useRouter } from "vue-router";
|
||||
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 router = useRouter();
|
||||
const props = defineProps({
|
||||
game: {
|
||||
type: String,
|
||||
@@ -45,6 +47,10 @@ const tag = computed(() => {
|
||||
};
|
||||
});
|
||||
|
||||
function loadGamePage() {
|
||||
router.push(`/games/${props.game}`);
|
||||
}
|
||||
|
||||
const selectedGame = getGameInfo(props.game);
|
||||
const cardStyle = `
|
||||
background-image: linear-gradient(to left, transparent, rgba(0, 0, 0, 1)),
|
||||
@@ -55,7 +61,11 @@ const cardStyle = `
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex rounded-2xl" :style="cardStyle">
|
||||
<button
|
||||
class="flex rounded-2xl hover:outline outline-blue-500/50 hover:bg-slate-500 hover:dark:bg-slate-950 transition-all duration-50"
|
||||
:style="cardStyle"
|
||||
@click="loadGamePage()"
|
||||
>
|
||||
<div
|
||||
class="relative w-full h-full bg-white dark:bg-slate-900/70 rounded-2xl"
|
||||
>
|
||||
@@ -79,5 +89,5 @@ const cardStyle = `
|
||||
</BaseLevel>
|
||||
</CardBoxComponentBody>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
</template>
|
||||
|
||||
@@ -39,7 +39,7 @@ function getCardStyle(cover) {
|
||||
}
|
||||
|
||||
function openNewsView() {
|
||||
router.push(`/news/${props.id}`); // Navigate to the dedicated news view with the news title as the route parameter
|
||||
router.push(`/news/${props.id}`);
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
@@ -1,55 +1,42 @@
|
||||
<script setup>
|
||||
import { mdiCog } from "@mdi/js";
|
||||
import CardBoxWidget from "@/components/CardBoxWidget.vue";
|
||||
import { dashCode } from "@/constants/userData";
|
||||
import BaseButton from "@/components/BaseButton.vue";
|
||||
|
||||
defineProps({
|
||||
useQpro: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
avatar: {
|
||||
game: {
|
||||
type: String,
|
||||
default: null,
|
||||
},
|
||||
profile: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
useSmall: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
});
|
||||
|
||||
var last = {
|
||||
arcade: "Ho-House",
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex content-center justify-center items-center">
|
||||
<img v-if="avatar" class="h-40" :src="avatar" />
|
||||
<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="text-3xl md:text-4xl font-bold">TRMAZI</h1>
|
||||
<p class="text-xl ordinal slashed-zero">1234-5678</p>
|
||||
<h1 class="text-3xl md:text-4xl font-bold">{{ profile.name }}</h1>
|
||||
<p class="text-xl font-mono">{{ dashCode(profile.extid) }}</p>
|
||||
<p class="text-md md:text-lg">
|
||||
Last played at <b>{{ last.arcade }}</b> on <b>10/22/2022</b>
|
||||
Last played at <b>{{ profile.last.arcade }}</b> on
|
||||
<b>{{ profile.last.date }}</b>
|
||||
</p>
|
||||
<BaseButton
|
||||
v-if="!useSmall"
|
||||
v-if="!useSmall && game"
|
||||
:icon="mdiCog"
|
||||
href="/#/games/ddr/profiles/1"
|
||||
:href="`/#/games/${game}/profiles/${profile.id}`"
|
||||
color="info"
|
||||
label="Edit Profile"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="!useSmall" 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>
|
||||
<slot />
|
||||
</template>
|
||||
|
||||
@@ -43,15 +43,17 @@ const pagesList = computed(() => {
|
||||
<tr>
|
||||
<th>User</th>
|
||||
<th>Value</th>
|
||||
<th>Game</th>
|
||||
<th>Machine</th>
|
||||
<th>Reason</th>
|
||||
<th>Timestamp</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="transaction of itemsPaginated" :key="transaction.id">
|
||||
<td data-label="User">{{ transaction.userId }}</td>
|
||||
<td data-label="User">{{ transaction.user }}</td>
|
||||
<td data-label="Value">{{ transaction.value }}</td>
|
||||
<td data-label="Game">{{ transaction.game }}</td>
|
||||
<td data-label="Machine">{{ transaction.machine }}</td>
|
||||
<td data-label="Reason">{{ transaction.reason }}</td>
|
||||
<td data-label="Timestamp">{{ transaction.timestamp }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
|
||||
73
src/components/Tables/TableRivals.vue
Normal file
73
src/components/Tables/TableRivals.vue
Normal file
@@ -0,0 +1,73 @@
|
||||
<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>Player</th>
|
||||
<th>Rival ID</th>
|
||||
<th />
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="client in itemsPaginated" :key="client.id">
|
||||
<td data-label="Player">TRMAZI</td>
|
||||
<td data-label="Rival ID">1234-5678</td>
|
||||
<td>
|
||||
<BaseButton label="Remove Rival" color="danger" />
|
||||
</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>
|
||||
@@ -88,5 +88,50 @@
|
||||
"author": "barru",
|
||||
"header": "What's good, <username>?",
|
||||
"comment": "As long as you're around, everything's great 😄"
|
||||
},
|
||||
{
|
||||
"author": "yaladre",
|
||||
"header": "Ready to kick it up a notch, <username>?",
|
||||
"comment": "Get pumped up!"
|
||||
},
|
||||
{
|
||||
"author": "caldenza",
|
||||
"header": "Alone in the night again, <username>?",
|
||||
"comment": "Honestly, just go play Minecraft tbh"
|
||||
},
|
||||
{
|
||||
"author": "caldenza",
|
||||
"header": "Did you make sure to restart the Mango, <username>?",
|
||||
"comment": "It's not the mango. It's always the mango. God damnit."
|
||||
},
|
||||
{
|
||||
"author": "azui.573",
|
||||
"header": "Welcome home, <username>.",
|
||||
"comment": "Ready to crush those rankings?"
|
||||
},
|
||||
{
|
||||
"author": "azui.573",
|
||||
"header": "Introducing... <username>!",
|
||||
"comment": "Live from the RESIDENT PARTY!"
|
||||
},
|
||||
{
|
||||
"author": "Shilofax",
|
||||
"header": "Make it make money, <username>",
|
||||
"comment": "GOOOOOOOOOOOOOLD"
|
||||
},
|
||||
{
|
||||
"author": "daydensteve",
|
||||
"header": "Welcome, <username>.",
|
||||
"comment": "PhaseII, here for all your net needs!"
|
||||
},
|
||||
{
|
||||
"author": "sierrathebluejay",
|
||||
"header": "Welcome to the party, <username>.",
|
||||
"comment": "We've been waiting for you!"
|
||||
},
|
||||
{
|
||||
"author": "sierrathebluejay",
|
||||
"header": "Wild <username> appeared!",
|
||||
"comment": "They're super effective!"
|
||||
}
|
||||
]
|
||||
@@ -326,6 +326,7 @@ export const gameData = [
|
||||
name: "BeatStream",
|
||||
icon: null,
|
||||
cardBG: null,
|
||||
noRivals: true,
|
||||
versions: [
|
||||
{
|
||||
id: VersionConstants.BEATSTREAM,
|
||||
@@ -342,6 +343,9 @@ export const gameData = [
|
||||
name: "The ⭐ Bishi Bashi",
|
||||
icon: null,
|
||||
cardBG: null,
|
||||
noRivals: true,
|
||||
noScores: true,
|
||||
noRecords: true,
|
||||
},
|
||||
{
|
||||
id: GameConstants.BISHI_BASHI_NEW,
|
||||
@@ -349,18 +353,25 @@ export const gameData = [
|
||||
icon: null,
|
||||
cardBG: null,
|
||||
skip: true,
|
||||
noRivals: true,
|
||||
noScores: true,
|
||||
noRecords: true,
|
||||
},
|
||||
{
|
||||
id: GameConstants.DANCE_EVOLUTION,
|
||||
name: "DanceEvolution",
|
||||
icon: null,
|
||||
cardBG: null,
|
||||
noRivals: true,
|
||||
noScores: true,
|
||||
noRecords: true,
|
||||
},
|
||||
{
|
||||
id: GameConstants.DANCE_RUSH,
|
||||
name: "DanceRush",
|
||||
icon: null,
|
||||
cardBG: null,
|
||||
noRivals: true,
|
||||
versions: [
|
||||
{
|
||||
id: VersionConstants.DANCE_RUSH_STARDOM,
|
||||
@@ -458,6 +469,9 @@ export const gameData = [
|
||||
name: "Classic DDR",
|
||||
icon: "/assets/icon/ddr.png",
|
||||
cardBG: "/assets/card/ddr.png",
|
||||
noRivals: true,
|
||||
noScores: true,
|
||||
noRecords: true,
|
||||
versions: [
|
||||
{
|
||||
id: VersionConstants.DDR_1ST_MIX,
|
||||
@@ -641,15 +655,15 @@ export const gameData = [
|
||||
},
|
||||
{
|
||||
id: VersionConstants.DRUMMANIA_V4,
|
||||
label: "V4",
|
||||
label: "V4: ROCKxROCK",
|
||||
},
|
||||
{
|
||||
id: VersionConstants.DRUMMANIA_V5,
|
||||
label: "V5",
|
||||
label: "V5: ROCK TO INFINITY!",
|
||||
},
|
||||
{
|
||||
id: VersionConstants.DRUMMANIA_V6,
|
||||
label: "V6",
|
||||
label: "V6: BLAZING!!!!",
|
||||
},
|
||||
{
|
||||
id: VersionConstants.DRUMMANIA_V7,
|
||||
@@ -667,6 +681,9 @@ export const gameData = [
|
||||
icon: null,
|
||||
cardBG: null,
|
||||
skip: true,
|
||||
noRivals: true,
|
||||
noScores: true,
|
||||
noRecords: true,
|
||||
versions: [
|
||||
{
|
||||
id: VersionConstants.EEMALL,
|
||||
@@ -683,6 +700,9 @@ export const gameData = [
|
||||
name: "Future Tom Tom",
|
||||
icon: null,
|
||||
cardBG: null,
|
||||
noRivals: true,
|
||||
noScores: true,
|
||||
noRecords: true,
|
||||
versions: [
|
||||
{
|
||||
id: VersionConstants.FUTURETOMTOM,
|
||||
@@ -699,6 +719,7 @@ export const gameData = [
|
||||
name: "GITADORA (Drums)",
|
||||
icon: null,
|
||||
cardBG: null,
|
||||
noRivals: true,
|
||||
versions: GITADORA_VERSION_DATA,
|
||||
},
|
||||
{
|
||||
@@ -706,6 +727,7 @@ export const gameData = [
|
||||
name: "GITADORA (Guitar)",
|
||||
icon: null,
|
||||
cardBG: null,
|
||||
noRivals: true,
|
||||
versions: GITADORA_VERSION_DATA,
|
||||
},
|
||||
{
|
||||
@@ -772,15 +794,15 @@ export const gameData = [
|
||||
},
|
||||
{
|
||||
id: VersionConstants.GUITARFREAKS_V4,
|
||||
label: "V4",
|
||||
label: "V4: ROCKxROCK",
|
||||
},
|
||||
{
|
||||
id: VersionConstants.GUITARFREAKS_V5,
|
||||
label: "V5",
|
||||
label: "V5: ROCK TO INFINITY!",
|
||||
},
|
||||
{
|
||||
id: VersionConstants.GUITARFREAKS_V6,
|
||||
label: "V6",
|
||||
label: "V6: BLAZING!!!!",
|
||||
},
|
||||
{
|
||||
id: VersionConstants.GUITARFREAKS_V7,
|
||||
@@ -926,6 +948,9 @@ export const gameData = [
|
||||
name: "Classic IIDX",
|
||||
icon: "/assets/icon/iidx.png",
|
||||
cardBG: "/assets/card/iidx.png",
|
||||
noRivals: true,
|
||||
noScores: true,
|
||||
noRecords: true,
|
||||
versions: [
|
||||
{
|
||||
id: VersionConstants.IIDX,
|
||||
@@ -1074,7 +1099,9 @@ export const gameData = [
|
||||
name: "LovePlus",
|
||||
icon: null,
|
||||
cardBG: null,
|
||||
skip: true,
|
||||
noRivals: true,
|
||||
noScores: true,
|
||||
noRecords: true,
|
||||
versions: [
|
||||
{
|
||||
id: VersionConstants.LOVEPLUS_ARCADE,
|
||||
@@ -1092,6 +1119,9 @@ export const gameData = [
|
||||
icon: null,
|
||||
cardBG: null,
|
||||
skip: true,
|
||||
noRivals: true,
|
||||
noScores: true,
|
||||
noRecords: true,
|
||||
},
|
||||
{
|
||||
id: GameConstants.MUSECA,
|
||||
@@ -1139,6 +1169,9 @@ export const gameData = [
|
||||
icon: null,
|
||||
cardBG: null,
|
||||
skip: true,
|
||||
noRivals: true,
|
||||
noScores: true,
|
||||
noRecords: true,
|
||||
},
|
||||
{
|
||||
id: GameConstants.OTOCA,
|
||||
@@ -1146,6 +1179,9 @@ export const gameData = [
|
||||
icon: null,
|
||||
cardBG: null,
|
||||
skip: true,
|
||||
noRivals: true,
|
||||
noScores: true,
|
||||
noRecords: true,
|
||||
},
|
||||
{
|
||||
id: GameConstants.POPN_HELLO,
|
||||
@@ -1153,6 +1189,9 @@ export const gameData = [
|
||||
icon: "/assets/icon/popn.png",
|
||||
cardBG: "/assets/card/popn.png",
|
||||
skip: true,
|
||||
noRivals: true,
|
||||
noScores: true,
|
||||
noRecords: true,
|
||||
},
|
||||
{
|
||||
id: GameConstants.POPN_MUSIC,
|
||||
@@ -1273,6 +1312,9 @@ export const gameData = [
|
||||
icon: null,
|
||||
cardBG: null,
|
||||
skip: true,
|
||||
noRivals: true,
|
||||
noScores: true,
|
||||
noRecords: true,
|
||||
},
|
||||
{
|
||||
id: GameConstants.REFLEC_BEAT,
|
||||
@@ -1312,6 +1354,9 @@ export const gameData = [
|
||||
icon: null,
|
||||
cardBG: null,
|
||||
skip: true,
|
||||
noRivals: true,
|
||||
noScores: true,
|
||||
noRecords: true,
|
||||
},
|
||||
{
|
||||
id: GameConstants.SDVX,
|
||||
@@ -1353,11 +1398,10 @@ export const arcadeList = [
|
||||
id: 0,
|
||||
name: "Speakeasy Smashcade",
|
||||
area: "US-IL",
|
||||
image:
|
||||
"https://scontent-ord5-2.xx.fbcdn.net/v/t39.30808-6/345607186_2854756104656166_4038613677498709113_n.png?stp=dst-jpg&_nc_cat=103&ccb=1-7&_nc_sid=8631f5&_nc_ohc=ps88GQTw7pYAX_kG-ZY&_nc_ht=scontent-ord5-2.xx&oh=00_AfCeXwmodvTitMUxzk9EDGb-Rl2lGN9PdLFYQPPjD-iphw&oe=6492362F",
|
||||
image: "https://i.imgur.com/HApAZgW.gif",
|
||||
address: null,
|
||||
show_address: false,
|
||||
public: false,
|
||||
public: true,
|
||||
beta: true,
|
||||
paseli: true,
|
||||
infinite_paseli: true,
|
||||
@@ -1394,6 +1438,19 @@ export const arcadeList = [
|
||||
maintenance: false,
|
||||
admins: ["blade"],
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: "GhettoCade",
|
||||
area: "US-IN",
|
||||
image: "https://ik.imagekit.io/suedbykonami/arcade/card/IMG_7096.jpg",
|
||||
show_address: false,
|
||||
public: true,
|
||||
beta: true,
|
||||
paseli: true,
|
||||
infinite_paseli: true,
|
||||
maintenance: false,
|
||||
admins: ["Trmazi"],
|
||||
},
|
||||
];
|
||||
|
||||
export function getGameInfo(game) {
|
||||
|
||||
4
src/constants/userData.js
Normal file
4
src/constants/userData.js
Normal file
@@ -0,0 +1,4 @@
|
||||
export function dashCode(code) {
|
||||
code = code.toString();
|
||||
return code.replace(/(.{4})(?!$)/g, "$1-");
|
||||
}
|
||||
@@ -16,4 +16,14 @@
|
||||
.scale-leave-to {
|
||||
opacity: 0;
|
||||
transform: scale(0.9);
|
||||
}
|
||||
|
||||
img {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
body {
|
||||
-webkit-user-select: none; /* Safari */
|
||||
-ms-user-select: none; /* IE 10 and IE 11 */
|
||||
user-select: none; /* Standard syntax */
|
||||
}
|
||||
@@ -11,15 +11,47 @@ import { gameData, arcadeList } from "./constants";
|
||||
var sortedMenu = [];
|
||||
for (const game of gameData) {
|
||||
if (!game.skip) {
|
||||
const menuItems = [
|
||||
"overview",
|
||||
"rivals",
|
||||
"net_records",
|
||||
"net_scores",
|
||||
"my_records",
|
||||
"my_scores",
|
||||
];
|
||||
var menu = [];
|
||||
|
||||
for (const item of menuItems) {
|
||||
if (item === "overview") {
|
||||
menu.push({ label: "Overview", to: `/games/${game.id}` });
|
||||
} else if (item == "rivals" && !game.noRivals) {
|
||||
menu.push({ label: "Rivals", to: `/games/${game.id}/rivals` });
|
||||
} else if (item == "net_records" && !game.noRecords) {
|
||||
menu.push({
|
||||
label: "Network Records",
|
||||
to: `/games/${game.id}/records/all`,
|
||||
});
|
||||
} else if (item == "net_scores" && !game.noScores) {
|
||||
menu.push({
|
||||
label: "Network Scores",
|
||||
to: `/games/${game.id}/scores/all`,
|
||||
});
|
||||
} else if (item == "my_records" && !game.noRecords) {
|
||||
menu.push({
|
||||
label: "Personal Records",
|
||||
to: `/games/${game.id}/records/personal`,
|
||||
});
|
||||
} else if (item == "my_scores" && !game.noScores) {
|
||||
menu.push({
|
||||
label: "Personal Scores",
|
||||
to: `/games/${game.id}/scores/personal`,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
sortedMenu.push({
|
||||
label: game.shortName ? game.shortName : game.name,
|
||||
menu: [
|
||||
{ label: "Overview", to: `/games/${game.id}` },
|
||||
{ label: "Network Records", to: `/games/${game.id}/records/all` },
|
||||
{ label: "Network Scores", to: `/games/${game.id}/scores/all` },
|
||||
{ label: "Personal Records", to: `/games/${game.id}/records/personal` },
|
||||
{ label: "Personal Scores", to: `/games/${game.id}/scores/personal` },
|
||||
],
|
||||
menu: menu,
|
||||
});
|
||||
}
|
||||
}
|
||||
@@ -33,7 +65,7 @@ for (const arcade of arcadeList) {
|
||||
{ label: "Overview", to: `/arcade/${arcade.id}` },
|
||||
{ label: "Event Settings", to: `/arcade/${arcade.id}/events` },
|
||||
{ label: "Machine List", to: `/arcade/${arcade.id}/machines` },
|
||||
{ label: "PASELI Transactions", to: `/arcade/${arcade.id}/paseli` },
|
||||
{ label: "PASELI", to: `/arcade/${arcade.id}/paseli` },
|
||||
],
|
||||
});
|
||||
}
|
||||
|
||||
@@ -5,6 +5,7 @@ import {
|
||||
mdiServerNetwork,
|
||||
mdiBrushOutline,
|
||||
mdiFlagCheckered,
|
||||
mdiCardAccountDetailsOutline,
|
||||
} from "@mdi/js";
|
||||
|
||||
export default [
|
||||
@@ -26,6 +27,11 @@ export default [
|
||||
label: "Integrations",
|
||||
to: "/profile/integrate",
|
||||
},
|
||||
{
|
||||
icon: mdiCardAccountDetailsOutline,
|
||||
label: "Login Cards",
|
||||
to: "/profile/cards",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
|
||||
@@ -74,6 +74,14 @@ const routes = [
|
||||
name: "profile_integrations",
|
||||
component: () => import("@/views/Profile/IntegrationView.vue"),
|
||||
},
|
||||
{
|
||||
meta: {
|
||||
title: "Login Cards",
|
||||
},
|
||||
path: "/profile/cards",
|
||||
name: "profile_cards",
|
||||
component: () => import("@/views/Profile/CardsView.vue"),
|
||||
},
|
||||
{
|
||||
meta: {
|
||||
title: "Goals",
|
||||
@@ -164,6 +172,17 @@ const routes = [
|
||||
hotReload: true, // disables Hot Reload
|
||||
},
|
||||
},
|
||||
{
|
||||
meta: {
|
||||
title: "Rivals",
|
||||
},
|
||||
path: "/games/:game/rivals",
|
||||
name: "game_rivals",
|
||||
component: () => import("@/views/Game/RivalsView.vue"),
|
||||
options: {
|
||||
hotReload: true, // disables Hot Reload
|
||||
},
|
||||
},
|
||||
{
|
||||
meta: {
|
||||
title: "Error",
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<script setup>
|
||||
import { useRoute } from "vue-router";
|
||||
import { mdiCashRegister } from "@mdi/js";
|
||||
import { mdiCashRegister, mdiAccountCash } from "@mdi/js";
|
||||
import SectionMain from "@/components/SectionMain.vue";
|
||||
import TablePaseli from "@/components/Tables/TablePaseli.vue";
|
||||
import CardBox from "@/components/CardBox.vue";
|
||||
@@ -17,11 +17,12 @@ const thisArcade = arcadeList.find((x) => x.id === arcadeID);
|
||||
|
||||
var transactions = [
|
||||
{
|
||||
id: 5040,
|
||||
id: 0,
|
||||
value: -300,
|
||||
timestamp: 3888294,
|
||||
game: "iidx",
|
||||
userId: 3,
|
||||
timestamp: "7/13/2023 1:27 PM",
|
||||
machine: "SDVX",
|
||||
reason: "/eacoin/nstart",
|
||||
user: "Trmazi",
|
||||
},
|
||||
];
|
||||
</script>
|
||||
@@ -30,12 +31,21 @@ var transactions = [
|
||||
<LayoutAuthenticated>
|
||||
<SectionMain>
|
||||
<ArcadeCard class="mb-6" :arcade-data="thisArcade" />
|
||||
<SectionTitleLine
|
||||
:icon="mdiAccountCash"
|
||||
title="Player PASELI Balances"
|
||||
main
|
||||
/>
|
||||
<CardBox class="mb-6" has-table>
|
||||
<TablePaseli v-if="transactions.length" :transactions="transactions" />
|
||||
<CardBoxComponentEmpty v-if="!transactions.length" />
|
||||
</CardBox>
|
||||
|
||||
<SectionTitleLine
|
||||
:icon="mdiCashRegister"
|
||||
title="PASELI Transaction History"
|
||||
main
|
||||
/>
|
||||
|
||||
<CardBox class="mb-6" has-table>
|
||||
<TablePaseli v-if="transactions.length" :transactions="transactions" />
|
||||
<CardBoxComponentEmpty v-if="!transactions.length" />
|
||||
|
||||
@@ -17,7 +17,7 @@ import LayoutGuest from "@/layouts/LayoutGuest.vue";
|
||||
<img src="/favicon.png" class="rounded-full shadow-lg mb-2" />
|
||||
<h1 class="text-xl"><samp>PhaseII</samp></h1>
|
||||
<p class="text-sm text-gray-700 dark:text-white/75">
|
||||
Spinnin' since 2021
|
||||
Broken since 2021
|
||||
</p>
|
||||
<hr class="border-t border-1 my-1 w-full" />
|
||||
<p class="text-lg relative bottom-0">404 - File not found</p>
|
||||
|
||||
@@ -7,6 +7,7 @@ import SectionTitleLine from "@/components/SectionTitleLine.vue";
|
||||
import GameTitleLine from "@/components/GameTitleLine.vue";
|
||||
import LayoutAuthenticated from "@/layouts/LayoutAuthenticated.vue";
|
||||
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";
|
||||
@@ -21,9 +22,25 @@ const versionForm = reactive({
|
||||
currentVersion: null,
|
||||
});
|
||||
|
||||
const profile = {
|
||||
id: 1,
|
||||
name: "Trmazi",
|
||||
extid: 12345678,
|
||||
avatar:
|
||||
"https://static.wikia.nocookie.net/dancedancerevolutionddr/images/3/3b/Yuni_img1.gif/",
|
||||
last: {
|
||||
arcade: "GhettoCade",
|
||||
date: "7/16/2023",
|
||||
},
|
||||
};
|
||||
|
||||
gameID = $route.params.id;
|
||||
thisGame = getGameInfo(gameID);
|
||||
|
||||
if (!thisGame.versions) {
|
||||
versionForm.currentVersion = 1;
|
||||
}
|
||||
|
||||
if (!thisGame) {
|
||||
$router.push({
|
||||
name: "ErrorPage",
|
||||
@@ -74,9 +91,18 @@ function getCardStyle() {
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full">
|
||||
<ProfileCard
|
||||
avatar="https://static.wikia.nocookie.net/dancedancerevolutionddr/images/3/3b/Yuni_img1.gif/"
|
||||
/>
|
||||
<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
|
||||
></ProfileCard>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -69,6 +69,18 @@ const settings = [
|
||||
},
|
||||
];
|
||||
|
||||
const profile = {
|
||||
id: 1,
|
||||
name: "Trmazi",
|
||||
extid: 12345678,
|
||||
avatar:
|
||||
"https://static.wikia.nocookie.net/dancedancerevolutionddr/images/3/3b/Yuni_img1.gif/",
|
||||
last: {
|
||||
arcade: "GhettoCade",
|
||||
date: "7/16/2023",
|
||||
},
|
||||
};
|
||||
|
||||
const userSettings = reactive({
|
||||
username: "TRMAZI",
|
||||
fastSlow: true,
|
||||
@@ -92,6 +104,10 @@ if (!thisGame) {
|
||||
});
|
||||
}
|
||||
|
||||
if (!thisGame.versions) {
|
||||
versionForm.currentVersion = 1;
|
||||
}
|
||||
|
||||
function getSources() {
|
||||
var sources = null;
|
||||
if (!versionForm.currentVersion) {
|
||||
@@ -117,21 +133,17 @@ function getCardStyle() {
|
||||
<div
|
||||
class="md:flex pb-6 md:px-5 md:space-x-10 md:justify-between md:items-center"
|
||||
>
|
||||
<div>
|
||||
<SectionTitleLine
|
||||
:icon="mdiAccountOutline"
|
||||
title="View Profile"
|
||||
main
|
||||
/>
|
||||
<BaseButton
|
||||
:icon="mdiBackburger"
|
||||
:href="'/#/games/' + gameID"
|
||||
class="w-full md:w-auto"
|
||||
color="info"
|
||||
label="Go Back"
|
||||
/>
|
||||
</div>
|
||||
<div class="mt-2 md:mt-0 md:w-1/3 md:text-right">
|
||||
<BaseButton
|
||||
:icon="mdiBackburger"
|
||||
:href="`/#/games/${gameID}`"
|
||||
class="w-full md:w-auto"
|
||||
color="info"
|
||||
label="Go Back"
|
||||
/>
|
||||
<div
|
||||
v-if="thisGame.versions"
|
||||
class="mt-2 md:mt-0 md:w-1/3 md:text-right"
|
||||
>
|
||||
<h2 class="text-md sm:text-lg md:text-xl font-bold p-2">
|
||||
Select Version
|
||||
</h2>
|
||||
@@ -148,13 +160,11 @@ function getCardStyle() {
|
||||
>
|
||||
<div class="bg-white dark:bg-slate-900/90 rounded-2xl pt-6 p-3">
|
||||
<div class="w-full">
|
||||
<ProfileCard
|
||||
use-small
|
||||
avatar="https://static.wikia.nocookie.net/dancedancerevolutionddr/images/3/3b/Yuni_img1.gif/"
|
||||
/>
|
||||
<ProfileCard use-small :profile="profile" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<SectionTitleLine :icon="mdiAccountOutline" title="View Profile" main />
|
||||
<SectionTitleLine
|
||||
v-if="versionForm.currentVersion"
|
||||
:icon="mdiAccountTieHat"
|
||||
|
||||
183
src/views/Game/RivalsView.vue
Normal file
183
src/views/Game/RivalsView.vue
Normal file
@@ -0,0 +1,183 @@
|
||||
<script setup>
|
||||
import { reactive } from "vue";
|
||||
import { useRoute, useRouter } from "vue-router";
|
||||
import { mdiSwordCross, mdiPlus, mdiBackburger } from "@mdi/js";
|
||||
import SectionMain from "@/components/SectionMain.vue";
|
||||
import CardBox from "@/components/CardBox.vue";
|
||||
import BaseButton from "@/components/BaseButton.vue";
|
||||
import ProfileCard from "@/components/Cards/ProfileCard.vue";
|
||||
import LayoutAuthenticated from "@/layouts/LayoutAuthenticated.vue";
|
||||
import SectionTitleLine from "@/components/SectionTitleLine.vue";
|
||||
import FormField from "@/components/FormField.vue";
|
||||
import FormControl from "@/components/FormControl.vue";
|
||||
import TableRivals from "@/components/Tables/TableRivals.vue";
|
||||
import { getGameInfo } from "@/constants";
|
||||
|
||||
const $route = useRoute();
|
||||
const $router = useRouter();
|
||||
var gameID = null;
|
||||
var thisGame = null;
|
||||
|
||||
const profile = {
|
||||
id: 1,
|
||||
name: "Trmazi",
|
||||
extid: 12345678,
|
||||
avatar:
|
||||
"https://static.wikia.nocookie.net/dancedancerevolutionddr/images/3/3b/Yuni_img1.gif/",
|
||||
last: {
|
||||
arcade: "GhettoCade",
|
||||
date: "7/16/2023",
|
||||
},
|
||||
};
|
||||
|
||||
const rivals = [
|
||||
{
|
||||
id: 1,
|
||||
name: "TRMAZI",
|
||||
rivalID: "1234-5678",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: "BLADE",
|
||||
rivalID: "1454-5687",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: "HO!",
|
||||
rivalID: "5364-5568",
|
||||
},
|
||||
];
|
||||
|
||||
const versionForm = reactive({
|
||||
currentVersion: null,
|
||||
});
|
||||
|
||||
const filterForm = reactive({
|
||||
filter: null,
|
||||
});
|
||||
|
||||
gameID = $route.params.game;
|
||||
thisGame = getGameInfo(gameID);
|
||||
|
||||
if (!thisGame.versions) {
|
||||
versionForm.currentVersion = 1;
|
||||
}
|
||||
|
||||
if (!thisGame) {
|
||||
$router.push({
|
||||
name: "ErrorPage",
|
||||
params: {
|
||||
catchAll: "404",
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
function filterUsers() {
|
||||
if (filterForm.filter) {
|
||||
return rivals.filter(
|
||||
(rival) =>
|
||||
rival.name.toLowerCase().includes(filterForm.filter.toLowerCase()) ||
|
||||
rival.rivalID.toLowerCase().includes(filterForm.filter.toLowerCase())
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
function getSources() {
|
||||
var sources = null;
|
||||
if (!versionForm.currentVersion) {
|
||||
sources = thisGame.cardBG;
|
||||
} else {
|
||||
sources = `/assets/games/${thisGame.id}/card/${versionForm.currentVersion}.png`;
|
||||
}
|
||||
return sources;
|
||||
}
|
||||
|
||||
function getCardStyle() {
|
||||
return `
|
||||
background-image: url('${getSources()}');
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
`;
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<LayoutAuthenticated>
|
||||
<SectionMain>
|
||||
<div
|
||||
class="md:flex pb-6 md:px-5 md:space-x-10 md:justify-between md:items-center"
|
||||
>
|
||||
<div>
|
||||
<BaseButton
|
||||
:icon="mdiBackburger"
|
||||
:href="'/#/games/' + gameID"
|
||||
class="w-full md:w-auto"
|
||||
color="info"
|
||||
label="Go Back"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
v-if="thisGame.versions"
|
||||
class="mt-2 md:mt-0 md:w-1/3 md:text-right"
|
||||
>
|
||||
<h2 class="text-md sm:text-lg md:text-xl font-bold p-2">
|
||||
Select Version
|
||||
</h2>
|
||||
<FormControl
|
||||
v-model="versionForm.currentVersion"
|
||||
:options="thisGame.versions"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-if="versionForm.currentVersion"
|
||||
:style="getCardStyle()"
|
||||
class="rounded-2xl mb-6"
|
||||
>
|
||||
<div class="bg-white dark:bg-slate-900/90 rounded-2xl pt-6 p-3">
|
||||
<div class="w-full">
|
||||
<ProfileCard use-small :profile="profile" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<SectionTitleLine :icon="mdiPlus" title="Add a Rival" main />
|
||||
<CardBox v-if="versionForm.currentVersion" class="mb-6">
|
||||
<FormField
|
||||
label="Search"
|
||||
help="Search by username or Rival ID to add a rival."
|
||||
class="w-full md:w-1/3"
|
||||
>
|
||||
<FormControl
|
||||
v-model="filterForm.filter"
|
||||
:model-value="filterForm.filter"
|
||||
placeholder="1234-5678"
|
||||
/>
|
||||
</FormField>
|
||||
|
||||
<div class="grid gap-3">
|
||||
<CardBox v-for="rival of filterUsers()" :key="rival.id">
|
||||
<div class="flex justify-between items-center">
|
||||
<div class="flex">
|
||||
<img
|
||||
class="w-10 mr-3"
|
||||
src="https://static.wikia.nocookie.net/dancedancerevolutionddr/images/3/3b/Yuni_img1.gif/"
|
||||
/>
|
||||
<div class="grid">
|
||||
<h1 class="text-lg">{{ rival.name }}</h1>
|
||||
<h2 class="text-md font-mono">{{ rival.rivalID }}</h2>
|
||||
</div>
|
||||
</div>
|
||||
<BaseButton label="Add Rival" color="success" />
|
||||
</div>
|
||||
</CardBox>
|
||||
</div>
|
||||
</CardBox>
|
||||
|
||||
<SectionTitleLine :icon="mdiSwordCross" title="Rivals" main />
|
||||
<CardBox v-if="versionForm.currentVersion" has-table class="mb-6">
|
||||
<TableRivals />
|
||||
</CardBox>
|
||||
</SectionMain>
|
||||
</LayoutAuthenticated>
|
||||
</template>
|
||||
@@ -51,6 +51,33 @@ const setGoals = [
|
||||
deadline: "1 Week",
|
||||
},
|
||||
];
|
||||
|
||||
const gameStats = [
|
||||
{
|
||||
id: GameConstants.IIDX,
|
||||
username: "DJ. TRMAZI",
|
||||
type: "ranking",
|
||||
value: "#22 of 330",
|
||||
},
|
||||
{
|
||||
id: GameConstants.DDR,
|
||||
username: "TRMAZI",
|
||||
type: "scores",
|
||||
value: 233,
|
||||
},
|
||||
{
|
||||
id: GameConstants.POPN_MUSIC,
|
||||
username: "TRMAZI",
|
||||
type: "plays",
|
||||
value: 69,
|
||||
},
|
||||
{
|
||||
id: GameConstants.SDVX,
|
||||
username: "TRMAZI",
|
||||
type: "scores",
|
||||
value: 420,
|
||||
},
|
||||
];
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -101,28 +128,12 @@ const setGoals = [
|
||||
class="grid grid-flow-row auto-rows-auto grid-cols-1 md:grid-cols-2 gap-5 mb-5"
|
||||
>
|
||||
<CardBoxGameStat
|
||||
:game="GameConstants.DDR"
|
||||
value="#10 out of 132"
|
||||
profile-name="DJ. TRMAZI"
|
||||
type="ranking"
|
||||
/>
|
||||
<CardBoxGameStat
|
||||
:game="GameConstants.POPN_MUSIC"
|
||||
:value="300"
|
||||
profile-name="TRMAZI"
|
||||
type="plays"
|
||||
/>
|
||||
<CardBoxGameStat
|
||||
:game="GameConstants.JUBEAT"
|
||||
:value="392"
|
||||
profile-name="TRMAZI"
|
||||
type="scores"
|
||||
/>
|
||||
<CardBoxGameStat
|
||||
:game="GameConstants.SDVX"
|
||||
value="#15 out of 200"
|
||||
profile-name="TRMAZI"
|
||||
type="ranking"
|
||||
v-for="stat of gameStats"
|
||||
:key="stat.id"
|
||||
:game="stat.id"
|
||||
:value="stat.value"
|
||||
:profile-name="stat.username"
|
||||
:type="stat.type"
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
||||
50
src/views/Profile/CardsView.vue
Normal file
50
src/views/Profile/CardsView.vue
Normal file
@@ -0,0 +1,50 @@
|
||||
<script setup>
|
||||
import { mdiCardAccountDetailsOutline } from "@mdi/js";
|
||||
import { dashCode } from "@/constants/userData.js";
|
||||
import SectionMain from "@/components/SectionMain.vue";
|
||||
import CardBox from "@/components/CardBox.vue";
|
||||
import BaseButton from "@/components/BaseButton.vue";
|
||||
import UserCard from "@/components/UserCard.vue";
|
||||
import LayoutAuthenticated from "@/layouts/LayoutAuthenticated.vue";
|
||||
import SectionTitleLine from "@/components/SectionTitleLine.vue";
|
||||
|
||||
const myCards = [
|
||||
"YRZ2FGHW24JJTU2E",
|
||||
"Z1Y0WWAMXGRMZY26",
|
||||
"1RJKZLBFKSK2AB2F",
|
||||
"R1Y4H1J7GSUZSR2P",
|
||||
"7JNC815MHXU33222",
|
||||
];
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<LayoutAuthenticated>
|
||||
<SectionMain>
|
||||
<UserCard class="mb-6" use-small even-smaller />
|
||||
<SectionTitleLine
|
||||
:icon="mdiCardAccountDetailsOutline"
|
||||
title="Login Cards"
|
||||
main
|
||||
/>
|
||||
<div class="text-xl mb-4">
|
||||
<h4>AC = Web Access Code</h4>
|
||||
<h4>NFC-ID = Internal ID for card0.txt</h4>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<CardBox v-for="card of myCards" :key="card">
|
||||
<img src="/assets/passes/generic.png" class="rounded-3xl mb-4" />
|
||||
<h1 class="text-xl text-center font-mono">{{ dashCode(card) }}</h1>
|
||||
|
||||
<template #footer>
|
||||
<div class="grid grid-cols-2 gap-3">
|
||||
<BaseButton type="submit" color="info" label="Copy AC" />
|
||||
<BaseButton type="submit" color="info" label="Copy NFC-ID" />
|
||||
<BaseButton type="submit" color="danger" label="Delete" />
|
||||
</div>
|
||||
</template>
|
||||
</CardBox>
|
||||
</div>
|
||||
</SectionMain>
|
||||
</LayoutAuthenticated>
|
||||
</template>
|
||||
Reference in New Issue
Block a user