store raffles, wheel of fortune
parent
1645b3be50
commit
fd3ac2c9fc
@ -1,6 +1,111 @@
|
||||
<script setup lang="ts">
|
||||
import { onMounted } from 'vue'
|
||||
import { useHead } from '@vueuse/head'
|
||||
useHead({
|
||||
title: 'Lets go!',
|
||||
import { useStorage } from '@vueuse/core'
|
||||
import { useRoute } from 'vue-router'
|
||||
|
||||
const route = useRoute()
|
||||
const raffleId = route.params.id as string
|
||||
|
||||
const raffleStore = useStorage<Raffle[]>('', [])
|
||||
const raffle = raffleStore.value.find(r => r.id === raffleId)
|
||||
|
||||
const participants = $computed(() => {
|
||||
return raffle ? raffle.participants : []
|
||||
})
|
||||
|
||||
const amount = $computed(() => participants.length)
|
||||
let aligned = $ref(false) // used for animation
|
||||
|
||||
function degrees(index: number) {
|
||||
if (!aligned) return 0
|
||||
return (360 / amount) * index
|
||||
}
|
||||
|
||||
useHead({ title: raffle ? raffle.title : 'Lets Go' })
|
||||
|
||||
onMounted(() => {
|
||||
setTimeout(() => {
|
||||
aligned = true
|
||||
}, 100)
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="relative w-screen h-screen overflow-hidden flex justify-end items-center">
|
||||
<ol class="absolute top-0 -left-1/2 w-screen h-screen transition-transform duration-500 ease-in" :class="aligned ? 'aligned' : 'shifted'">
|
||||
<li v-for="(participant, i) in participants"
|
||||
class="slice"
|
||||
:style="`
|
||||
transform: rotate(${degrees(i)}deg);
|
||||
`"
|
||||
>
|
||||
<div>
|
||||
{{ participant }}bcdef ghijklmn
|
||||
</div>
|
||||
</li>
|
||||
<div class="absolute top-1/2 left-1/2 w-32 h-32 -ml-16 -mt-16 rounded-full bg-black"></div>
|
||||
</ol>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.shifted {
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
.aligned {
|
||||
transform: translateX(0);
|
||||
}
|
||||
.slice {
|
||||
--w: 50vw;
|
||||
--h: calc(6.283185307179586 * var(--w) / v-bind(amount));
|
||||
position: absolute;
|
||||
width: var(--w);
|
||||
height: var(--h);
|
||||
left: 50%;
|
||||
top: 28%;
|
||||
padding: 0;
|
||||
text-align: right;
|
||||
transform-origin: left center;
|
||||
transition: transform 1s ease-out .4s;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
font-size: 2em;
|
||||
}
|
||||
.slice:nth-child(even) {
|
||||
color: black;
|
||||
}
|
||||
.slice::before, .slice::after {
|
||||
content: '';
|
||||
display: block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
}
|
||||
.slice::before {
|
||||
margin-bottom: -1px;
|
||||
border-width: 0 0 calc(var(--h) / 2) calc(var(--w) * .97);
|
||||
border-color: transparent transparent #0074D9 transparent;
|
||||
}
|
||||
.slice:nth-child(even)::before {
|
||||
border-color: transparent transparent #2ECC40 transparent;
|
||||
}
|
||||
.slice::after {
|
||||
border-width: 0 calc(var(--w) * .97) calc(var(--h) / 2) 0;
|
||||
border-color: transparent #0074D9 transparent transparent;
|
||||
}
|
||||
.slice:nth-child(even)::after {
|
||||
border-color: transparent #2ECC40 transparent transparent;
|
||||
}
|
||||
|
||||
.slice > div {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
width: 85%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
Loading…
Reference in New Issue