Leahnaya/splatoon3.ink
1
0
Fork 0
mirror of https://github.com/misenhower/splatoon3.ink.git synced 2026-03-21 17:54:13 -05:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Hide splatfest results behind spoiler

Browse Source
This commit is contained in:
kitt 2023-08-15 00:18:39 -04:00
parent 65292e5c90
commit 20ead44130
No known key found for this signature in database
1 changed files with 15 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/components/SplatfestResultsBox.vue
View File

@ -1,5 +1,15 @@
<template>
<ProductContainer class="pt-10 pb-4" bg="bg-camo-purple" :bg-style="`background-color: ${toRgba(winner.color)};`">
<ProductContainer class="pt-10 pb-4" :bg="`bg-camo-purple ${!showSpoiler ? 'bg-zinc-500' : ''}`" :bg-style="showSpoiler ? `background-color: ${toRgba(winner.color)};` : ''">
<div v-if="!showSpoiler" class="absolute inset-0 w-full h-full flex flex-col gap-4 items-center justify-center z-10 backdrop-blur-lg rounded-2xl">
<div class="font-splatoon1 text-3xl lg:text-4xl text-shadow">
Splatfest Results
</div>
<button class="px-4 py-1 rounded-full bg-zinc-300/20 font-splatoon2" @click="showSpoiler = true">
Reveal Results
</button>
</div>
<div class="space-y-2">
<div class="font-splatoon1 text-2xl lg:text-3xl text-shadow mx-2">
{{ $t('festival.results.title') }}
@ -23,7 +33,7 @@
<div class="flex bg-zinc-700 bg-opacity-70 rounded-full py-1">
<div v-for="(result, i) in row.results" :key="i" class="w-16 lg:w-20 sm:mx-2">
<div :class="result.isTop ? 'text-splatoon-yellow' : 'text-zinc-300'">
<div :class="result.isTop && showSpoiler ? 'text-splatoon-yellow' : 'text-zinc-300'">
{{ (result.ratio * 100).toFixed(2) }}%
</div>
</div>
@ -40,9 +50,11 @@
</template>
<script setup>
import { computed } from 'vue';
import { computed, ref } from 'vue';
import ProductContainer from './ProductContainer.vue';
const showSpoiler = ref(false);
const props = defineProps({
festival: Object,
});