valere/evilspins
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

FEAT: evilspins v3 :: tracks info in player

Browse Source
This commit is contained in:
valere
2024-10-22 23:36:04 +02:00
parent bf7c68fa35
commit e1ed518ce4
22 changed files with 381 additions and 236 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
components/compilationObject.vue Normal file
View File

@@ -0,0 +1,23 @@
<template>
<NuxtLink :to="'/compilations/' + props.data.id" class="compilation mx-auto p-4 inline-flex">
<atropos-component ref="atropos" class="my-atropos" active-offset="80" shadow-scale="1.05">
<img :src="props.data.id + '/bkg.jpg'" data-atropos-offset="-8" />
<img :src="props.data.id + '/object.png'" data-atropos-offset="-3" class="absolute inset-0 object-cover" />
<img :src="props.data.id + '/name.png'" data-atropos-offset="0" class="absolute inset-0 object-cover" />
<img src="/logo.svg" data-atropos-offset="0" width="70%" class="logo absolute inset-0" />
</atropos-component>
</NuxtLink>
</template>
<script setup>
const props = defineProps(['data', 'template'])
const atropos = ref(null)
</script>
<style scoped>
.logo {
filter: drop-shadow(4px 4px 0 rgb(0 0 0 / 0.5));
left: 14%;
top: 10%;
}
</style>

11
components/compilations-list.vue Normal file
View File

@@ -0,0 +1,11 @@
<template>
<section>
<div v-for="compilation in store.getAllCompilations" class="text-white">
<compilationObject :data="compilation" template="full" />
</div>
</section>
</template>
<script setup lang="ts">
const store = useDataStore()
</script>

28
components/zero-a.vue
View File

@@ -1,28 +0,0 @@
<template>
<div class="compilation mx-auto p-4 inline-flex">
<atropos-component ref="atropos" class="my-atropos" active-offset="80" shadow-scale="1.05">
<img src="/zero/sky-a.jpg" data-atropos-offset="-8" />
<img src="/zero/propeller-a.png" data-atropos-offset="-3" class="absolute inset-0 object-cover" />
<img src="/zero/zero-a.png" data-atropos-offset="0" class="absolute inset-0 object-cover" />
<img src="/logo.svg" data-atropos-offset="0" width="70%" class="logo absolute inset-0" />
</atropos-component>
</div>
</template>
<script setup>
import { onMounted, ref } from 'vue'
const atropos = ref(null)
onMounted(() => {
})
</script>
<style scoped>
.logo {
filter: drop-shadow(4px 4px 0 rgb(0 0 0 / 0.5));
left: 14%;
top: 10%;
}
</style>