mirror of
https://github.com/misenhower/splatoon3.ink.git
synced 2026-03-21 17:54:13 -05:00
29482689f4
- Replace JS config (tailwind.config.js) with CSS @theme block in base.css - Switch from PostCSS to @tailwindcss/vite plugin - Convert all bg-opacity-*/border-opacity-* to slash syntax (e.g. bg-zinc-900/70) - Add @custom-variant for mobile and ss variants - Add @reference to Vue scoped styles using @apply - Rename v3 utilities: rounded→rounded-sm, backdrop-blur-sm→backdrop-blur-xs, drop-shadow→drop-shadow-sm, rotate-[25deg]→rotate-25 - Delete obsolete tailwind.config.js and postcss.config.js - Rename vite.config.js to .mjs for ESM compatibility Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
94 lines
3.1 KiB
Vue
94 lines
3.1 KiB
Vue
<template>
|
|
<ProductContainer :bg="type.bg" class="w-full pt-10 pb-4">
|
|
<div class="space-y-2">
|
|
<div class="flex items-center space-x-2 mx-2">
|
|
<img :src="type.img" />
|
|
<div class="font-splatoon1 lg:text-2xl xl:text-3xl text-shadow">
|
|
{{ $t(type.name) }}
|
|
</div>
|
|
<div v-if="type.badge" class="font-splatoon2 text-xs lg:text-sm xl:text-base bg-splatoon-blue rounded-sm px-1 drop-shadow-sm">
|
|
{{ $t(type.badge) }}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-zinc-900/70 backdrop-blur-xs pt-2 pb-6 px-2 mx-1 rounded-lg space-y-2">
|
|
<div class="flex items-center justify-between font-splatoon2">
|
|
<div class="flex items-center space-x-2 text-sm lg:text-lg">
|
|
<div>
|
|
<TricolorIcon
|
|
class="h-6 w-6"
|
|
:a="tricolor?.teams[0]?.color"
|
|
:b="tricolor?.teams[1]?.color"
|
|
:c="tricolor?.teams[2]?.color"
|
|
/>
|
|
</div>
|
|
<div class="text-shadow">
|
|
{{ $t("splatnet.rules.TRI_COLOR.name", "Tricolor Turf War") }}
|
|
</div>
|
|
</div>
|
|
|
|
<div v-if="tricolor.startTime && tricolor.endTime" class="justify-end text-xs lg:text-sm bg-zinc-100/80 rounded-sm text-black px-2">
|
|
{{ $d(tricolor.startTime, 'dateTimeShort') }}
|
|
–
|
|
{{ $d(tricolor.endTime, 'dateTimeShort') }}
|
|
</div>
|
|
</div>
|
|
|
|
<div v-if="tricolor?.tricolorStage" class="flex space-x-1">
|
|
<div class="flex-1 relative">
|
|
<StageImage
|
|
img-class="rounded-xl"
|
|
:stage="tricolor?.tricolorStage"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-if="tricolor?.tricolorStages">
|
|
<div v-if="tricolor?.tricolorStages.length === 1" class="flex space-x-1">
|
|
<StageImage
|
|
img-class="rounded-xl"
|
|
:stage="tricolor?.tricolorStages?.[0]"
|
|
/>
|
|
</div>
|
|
|
|
<div v-else class="flex space-x-1">
|
|
<StageImage
|
|
img-class="rounded-l-xl"
|
|
:stage="tricolor?.tricolorStages?.[0]"
|
|
/>
|
|
<StageImage
|
|
img-class="rounded-r-xl"
|
|
:stage="tricolor?.tricolorStages?.[1]"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</ProductContainer>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { computed } from 'vue';
|
|
import ProductContainer from './ProductContainer.vue';
|
|
import StageImage from './StageImage.vue';
|
|
import { useScheduleTypes } from './concerns/scheduleTypes.mjs';
|
|
import TricolorIcon from './TricolorIcon.vue';
|
|
import { useUSSplatfestsStore } from '@/stores/splatfests';
|
|
|
|
|
|
const { types } = useScheduleTypes();
|
|
|
|
const type = computed(() => types['splatfestTricolor']);
|
|
const tricolor = computed(() => useUSSplatfestsStore().tricolor);
|
|
|
|
|
|
</script>
|
|
|
|
<style scoped>
|
|
:deep(.bg-tapes) {
|
|
background-image: url('@/assets/img/tapes-transparent.png'),
|
|
linear-gradient(180deg, rgba(2, 0, 36, 0.10) 0%, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, 0.25) 100%);
|
|
background-size: contain;
|
|
}
|
|
</style>
|