Leahnaya/PhaseWeb3-Vue
1
0
Fork 0
mirror of https://github.com/PhaseII-eAmusement-Network/PhaseWeb3-Vue.git synced 2026-08-27 03:24:20 -05:00
Code Issues Actions Packages Projects Releases Wiki Activity

Add in video card backgrounds

Browse Source
This commit is contained in:
Trenton Zimmer
2024-07-26 01:04:07 -04:00
parent f601c0edbe
commit 3ae5ff9aed
6 changed files with 156 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@@ -4,7 +4,7 @@
"scripts": {
"dev": "vite --host",
"build": "vite build",
"preview": "vite preview --port 3069",
"preview": "vite preview --port 3069 --host",
"lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore"
},
"dependencies": {

37
src/constants/index.js
View File

@@ -444,6 +444,12 @@ export const gameData = [
shortName: "DDR",
icon: null,
cardBG: null,
videoTable: [
VersionConstants.DDR_ACE,
VersionConstants.DDR_A20,
VersionConstants.DDR_A20_PLUS,
VersionConstants.DDR_A3,
],
scoreHeaders: [
{ text: "Combos", value: "data.combo" },
{ text: "Halo", value: "data.halo" },
@@ -624,6 +630,7 @@ export const gameData = [
name: "DDR OmniMIX",
icon: "/assets/icon/ddr.webp",
cardBG: "/assets/card/ddr.webp",
videoTable: [VersionConstants.DDR_A20_PLUS],
scoreHeaders: [
{ text: "Combos", value: "data.combo" },
{ text: "Halo", value: "data.halo" },
@@ -904,6 +911,17 @@ export const gameData = [
name: "GITADORA (Drums)",
icon: null,
cardBG: null,
videoTable: [
VersionConstants.GITADORA,
VersionConstants.GITADORA_OVERDRIVE,
VersionConstants.GITADORA_TRIBOOST,
VersionConstants.GITADORA_TRIBOOST_RE_EVOLVE,
VersionConstants.GITADORA_MATIXX,
VersionConstants.GITADORA_EXCHAIN,
VersionConstants.GITADORA_NEXTAGE,
VersionConstants.GITADORA_HIGH_VOLTAGE,
VersionConstants.GITADORA_FUZZUP,
],
noRivals: true,
playerHeaders: [
{
@@ -942,6 +960,17 @@ export const gameData = [
name: "GITADORA (Guitar)",
icon: null,
cardBG: null,
videoTable: [
VersionConstants.GITADORA,
VersionConstants.GITADORA_OVERDRIVE,
VersionConstants.GITADORA_TRIBOOST,
VersionConstants.GITADORA_TRIBOOST_RE_EVOLVE,
VersionConstants.GITADORA_MATIXX,
VersionConstants.GITADORA_EXCHAIN,
VersionConstants.GITADORA_NEXTAGE,
VersionConstants.GITADORA_HIGH_VOLTAGE,
VersionConstants.GITADORA_FUZZUP,
],
noRivals: true,
playerHeaders: [
{
@@ -1109,6 +1138,14 @@ export const gameData = [
shortName: "IIDX",
icon: "/assets/icon/iidx.webp",
cardBG: "/assets/card/iidx.webp",
videoTable: [
VersionConstants.IIDX_CANNON_BALLERS,
VersionConstants.IIDX_ROOTAGE,
VersionConstants.IIDX_HEROIC_VERSE,
VersionConstants.IIDX_BISTROVER,
VersionConstants.IIDX_CASTHOUR,
VersionConstants.IIDX_RESIDENT,
],
scoreHeaders: [
{ text: "Misses", value: "data.misses" },
{ text: "Clear Status", value: "data.medal" },

23
src/css/main.css
View File

@@ -17,6 +17,29 @@
transform: scale(0.9);
}
.card-container {
position: relative;
overflow: hidden;
}
.background-video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: -1; /* Ensure the video is behind other content */
border-radius: 16px; /* Match the rounded corners of the card */
}
.card-content {
position: relative;
z-index: 1; /* Ensure content inside the card is above the video */
padding: 20px; /* Add padding if needed */
border-radius: 16px; /* Match the rounded corners of the card */
}
img {
pointer-events: none;
}

39
src/views/Game/EditView.vue
View File

@@ -66,21 +66,34 @@ var settings = [
];
function getSources() {
var sources = null;
if (!versionForm.currentVersion) {
sources = thisGame.cardBG;
return thisGame.cardBG;
} else {
sources = `/assets/games/${thisGame.id}/card/${versionForm.currentVersion}.webp`;
return `/assets/games/${thisGame.id}/card/${versionForm.currentVersion}.webp`;
}
}
function getVideoSource() {
if (
versionForm.currentVersion &&
thisGame.videoTable?.includes(versionForm.currentVersion)
) {
return `https://web3.phaseii.network/gameassets/video/${thisGame.id}/${versionForm.currentVersion}.mp4`;
} else {
return null;
}
return sources;
}
function getCardStyle() {
return `
if (thisGame.videoTable?.includes(versionForm.currentVersion)) {
return null;
} else {
return `
background-image: url('${getSources()}');
background-size: cover;
background-repeat: no-repeat;
`;
}
}
function filterVersions(haveVersions) {
@@ -142,11 +155,21 @@ async function loadProfile() {
main
/>
<div
v-if="versionForm.currentVersion"
v-if="versionForm.currentVersion && myProfile"
:style="getCardStyle()"
class="rounded-2xl mb-6"
class="rounded-2xl mb-6 card-container"
>
<div class="bg-white dark:bg-slate-900/90 rounded-2xl pt-6 p-3">
<video
autoplay
muted
loop
playsinline
:src="getVideoSource()"
class="background-video"
></video>
<div
class="bg-white dark:bg-slate-900/90 rounded-2xl pt-6 p-3 card-content"
>
<div class="w-full">
<ProfileCard
v-if="myProfile"

41
src/views/Game/GameView.vue
View File

@@ -86,21 +86,34 @@ async function loadProfile() {
}
function getSources() {
var sources = null;
if (!versionForm.currentVersion) {
sources = thisGame.cardBG;
return thisGame.cardBG;
} else {
sources = `/assets/games/${thisGame.id}/card/${versionForm.currentVersion}.webp`;
return `/assets/games/${thisGame.id}/card/${versionForm.currentVersion}.webp`;
}
}
function getVideoSource() {
if (
versionForm.currentVersion &&
thisGame.videoTable?.includes(versionForm.currentVersion)
) {
return `https://web3.phaseii.network/gameassets/video/${thisGame.id}/${versionForm.currentVersion}.mp4`;
} else {
return null;
}
return sources;
}
function getCardStyle() {
return `
if (thisGame.videoTable?.includes(versionForm.currentVersion)) {
return null;
} else {
return `
background-image: url('${getSources()}');
background-size: cover;
background-repeat: no-repeat;
`;
}
}
const headers = [];
@@ -180,8 +193,22 @@ const navigateToProfile = (item) => {
<template>
<LayoutAuthenticated>
<SectionMain>
<div :style="getCardStyle()" class="rounded-2xl mb-6">
<div class="bg-white dark:bg-slate-900/90 rounded-2xl p-3">
<div
v-if="versionForm.currentVersion && myProfile"
:style="getCardStyle()"
class="rounded-2xl mb-6 card-container"
>
<video
autoplay
muted
loop
playsinline
:src="getVideoSource()"
class="background-video"
></video>
<div
class="bg-white dark:bg-slate-900/90 rounded-2xl pt-6 p-3 card-content"
>
<div class="w-full">
<div
class="md:flex md:px-5 md:space-x-10 md:justify-between md:items-center"

37
src/views/Game/PlayerView.vue
View File

@@ -141,21 +141,34 @@ var loadStats = [
];
function getSources() {
var sources = null;
if (!versionForm.currentVersion) {
sources = thisGame.cardBG;
return thisGame.cardBG;
} else {
sources = `/assets/games/${thisGame.id}/card/${versionForm.currentVersion}.webp`;
return `/assets/games/${thisGame.id}/card/${versionForm.currentVersion}.webp`;
}
}
function getVideoSource() {
if (
versionForm.currentVersion &&
thisGame.videoTable?.includes(versionForm.currentVersion)
) {
return `https://web3.phaseii.network/gameassets/video/${thisGame.id}/${versionForm.currentVersion}.mp4`;
} else {
return null;
}
return sources;
}
function getCardStyle() {
return `
if (thisGame.videoTable?.includes(versionForm.currentVersion)) {
return null;
} else {
return `
background-image: url('${getSources()}');
background-size: cover;
background-repeat: no-repeat;
`;
}
}
function colorText(stat, profile) {
@@ -283,9 +296,19 @@ function formatCounts(profile) {
<div
v-if="versionForm.currentVersion && myProfile"
:style="getCardStyle()"
class="rounded-2xl mb-6"
class="rounded-2xl mb-6 card-container"
>
<div class="bg-white dark:bg-slate-900/90 rounded-2xl pt-6 p-3">
<video
autoplay
muted
loop
playsinline
:src="getVideoSource()"
class="background-video"
></video>
<div
class="bg-white dark:bg-slate-900/90 rounded-2xl pt-6 p-3 card-content"
>
<div class="w-full">
<ProfileCard
use-small