Leahnaya/splatoon3.ink
1
0
Fork 0
mirror of https://github.com/misenhower/splatoon3.ink.git synced 2026-04-25 23:37:43 -05:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Tweak challenge box layout to show past times

Browse Source
This commit is contained in:
Matt Isenhower 2023-06-03 11:06:43 -07:00
parent 5adb22f80e
commit 54f895e30b
17 changed files with 82 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/assets/i18n/de-DE.json
View File

@ -62,7 +62,9 @@
"events": {
"title": "Event-Kämpfe",
"available": "Als Nächstes",
"not_available": "Momentan sind keine Event-Kämpfe geplant."
"not_available": "Momentan sind keine Event-Kämpfe geplant.",
"now": "Aktuell",
"now_open": "Läuft!"
},
"about": {
"title": "Über!",

4
src/assets/i18n/en-GB.json
View File

@ -55,7 +55,9 @@
"events": {
"title": "Challenges",
"available": "Next",
"not_available": "No Challenges currently scheduled."
"not_available": "No Challenges currently scheduled.",
"now": "Now",
"now_open": "Now Open!"
},
"gear": {
"title": "Gear",

4
src/assets/i18n/en-US.json
View File

@ -60,7 +60,9 @@
"events": {
"title": "Challenges",
"available": "Next",
"not_available": "No Challenges currently scheduled."
"not_available": "No Challenges currently scheduled.",
"now": "Now",
"now_open": "Now Open!"
},
"gear": {
"title": "Gear",

4
src/assets/i18n/es-ES.json
View File

@ -60,6 +60,8 @@
"events": {
"title": "Combate evento",
"available": "Próximamente",
"not_available": "Calendario sin determinar"
"not_available": "Calendario sin determinar",
"now": "Actualmente",
"now_open": "¡En curso!"
}
}

4
src/assets/i18n/es-MX.json
View File

@ -60,6 +60,8 @@
"events": {
"title": "Combate especial",
"available": "Siguiente",
"not_available": "Calendario sin determinar"
"not_available": "Calendario sin determinar",
"now": "Actual",
"now_open": "¡En curso!"
}
}

4
src/assets/i18n/fr-CA.json
View File

@ -61,6 +61,8 @@
"events": {
"title": "Match épreuve",
"available": "Tout à l'heure",
"not_available": "Aucun match épreuve prévu pour le moment."
"not_available": "Aucun match épreuve prévu pour le moment.",
"now": "Actuellement",
"now_open": "En cours!"
}
}

4
src/assets/i18n/fr-FR.json
View File

@ -84,6 +84,8 @@
"events": {
"title": "Match Challenge",
"available": "Créneau suivant",
"not_available": "Aucun match Challenge prévu pour le moment."
"not_available": "Aucun match Challenge prévu pour le moment.",
"now": "Actuellement",
"now_open": "En cours !"
}
}

4
src/assets/i18n/it-IT.json
View File

@ -60,6 +60,8 @@
"events": {
"title": "Partita evento",
"available": "A seguire",
"not_available": "Non ci sono partite evento in programma."
"not_available": "Non ci sono partite evento in programma.",
"now": "Attuale",
"now_open": "In corso!"
}
}

4
src/assets/i18n/ja-JP.json
View File

@ -60,6 +60,8 @@
"events": {
"title": "イベントマッチ",
"available": "つぎ",
"not_available": "スケジュールが未定です"
"not_available": "スケジュールが未定です",
"now": "いま",
"now_open": "開催中！"
}
}

4
src/assets/i18n/ko-KR.json
View File

@ -60,6 +60,8 @@
"events": {
"title": "이벤트 매치",
"available": "다음",
"not_available": "스케줄이 미정입니다"
"not_available": "스케줄이 미정입니다",
"now": "지금",
"now_open": "개최 중!"
}
}

4
src/assets/i18n/nl-NL.json
View File

@ -60,6 +60,8 @@
"events": {
"title": "Eventgevecht",
"available": "Volgende",
"not_available": "Er zijn momenteel geen eventgevechten gepland."
"not_available": "Er zijn momenteel geen eventgevechten gepland.",
"now": "Nu",
"now_open": "Nu bezig!"
}
}

4
src/assets/i18n/ru-RU.json
View File

@ -60,6 +60,8 @@
"events": {
"title": "Бой-событие",
"available": "Следующий",
"not_available": "Бои-события в настоящий момент не запланированы."
"not_available": "Бои-события в настоящий момент не запланированы.",
"now": "Сейчас",
"now_open": "Идет!"
}
}

4
src/assets/i18n/zh-CN.json
View File

@ -61,6 +61,8 @@
"events": {
"title": "活动比赛",
"available": "下一场",
"not_available": "日程未定"
"not_available": "日程未定",
"now": "现在",
"now_open": "举行中！"
}
}

4
src/assets/i18n/zh-TW.json
View File

@ -60,6 +60,8 @@
"events": {
"title": "活動比賽",
"available": "下一場",
"not_available": "時間表未定"
"not_available": "時間表未定",
"now": "現在",
"now_open": "舉行中！！"
}
}

36
src/components/challenge/ChallengeScheduleBox.vue
View File

@ -28,8 +28,10 @@
</template>
</div>
<div v-if="event.activeTimePeriod" class="justify-end text-xs lg:text-sm bg-zinc-100 bg-opacity-80 rounded text-black px-2">
{{ $t('time.remaining', { time: formatDurationFromNow(event.activeTimePeriod.endTime) }) }}
<div v-if="event.activeTimePeriod">
<SquidTape class="font-splatoon2 text-sm drop-shadow rotate-6">
<div class="px-2">{{ $t('events.now_open') }}</div>
</SquidTape>
</div>
</div>
@ -46,16 +48,28 @@
/>
</div>
<div class="mx-2 space-y-2 ss:hidden" v-if="event.upcomingTimePeriods?.length">
<SquidTape class="font-splatoon2 text-sm drop-shadow -rotate-6 -mx-2 mt-4">
<div class="px-2">{{ $t('events.available') }}</div>
</SquidTape>
<div class="divide-y-2 divide-dashed divide-zinc-400 font-splatoon">
<div v-for="timePeriod in event.upcomingTimePeriods" :key="timePeriod.startTime" class="flex flex-row justify-center">
<ChallengeScheduleRow :event="event" :timePeriod="timePeriod" class="my-2"/>
<div class="mx-2 space-y-2 ss:hidden">
<!-- Past time periods -->
<template v-if="event.pastTimePeriods?.length">
<div class="divide-y-2 divide-dashed divide-zinc-600 font-splatoon">
<div v-for="timePeriod in event.pastTimePeriods" :key="timePeriod.startTime" class="flex flex-row justify-center">
<ChallengeScheduleRow :event="event" :timePeriod="timePeriod" class="my-2"/>
</div>
</div>
</div>
</template>
<!-- Current/future time periods -->
<template v-if="event.currentTimePeriods?.length">
<SquidTape class="font-splatoon2 text-sm drop-shadow -rotate-6 -mx-2 mt-4">
<div class="px-2">{{ event.activeTimePeriod ? $t('events.now') : $t('events.available') }}</div>
</SquidTape>
<div class="divide-y-2 divide-dashed divide-zinc-400 font-splatoon">
<div v-for="timePeriod in event.currentTimePeriods" :key="timePeriod.startTime" class="flex flex-row justify-center">
<ChallengeScheduleRow :event="event" :timePeriod="timePeriod" class="my-2"/>
</div>
</div>
</template>
</div>
</div>

17
src/components/challenge/ChallengeScheduleRow.vue
View File

@ -1,6 +1,6 @@
<template>
<template v-if="event && timePeriod">
<div class="flex items-center w-full font-splatoon2">
<div class="flex items-center w-full font-splatoon2" :class="isCurrent ? 'text-zinc-100' : 'text-zinc-300 opacity-60'">
<RuleIcon :rule="event.settings.vsRule" class="h-5 lg:h-6" />
<div class="px-2 text-shadow whitespace-pre">
{{ $d(timePeriod.startTime, 'dateTimeShortWeekday') }}
@ -8,9 +8,14 @@
{{ $d(timePeriod.endTime, 'dateTimeShort') }}
</div>
<div class="flex justify-end w-full">
<div class="flex justify-end w-full" v-if="isCurrent">
<div class="hidden sm:block text-xs bg-zinc-100 bg-opacity-80 rounded text-black px-2">
<template v-if="isActive">
{{ $t('time.remaining', { time: formatDurationFromNow(event.activeTimePeriod.endTime) }) }}
</template>
<template v-else>
{{ $t('time.in', { time: formatDurationFromNow(timePeriod.startTime, true) }) }}
</template>
</div>
</div>
</div>
@ -18,10 +23,12 @@
</template>
<script setup>
import { computed } from 'vue';
import RuleIcon from '../RuleIcon.vue';
import { formatDurationFromNow } from '@/common/time';
import { useTimeStore } from '../../stores/time.mjs';
defineProps({
const props = defineProps({
event: {
type: Object,
required: true,
@ -31,4 +38,8 @@ defineProps({
required: true,
},
});
const time = useTimeStore();
const isCurrent = computed(() => time.isCurrent(props.timePeriod.endTime));
const isActive = computed(() => time.isActive(props.timePeriod.startTime, props.timePeriod.endTime));
</script>

1
src/stores/schedules.mjs
View File

@ -84,6 +84,7 @@ export const useEventSchedulesStore = defineScheduleStore('event', {
currentTimePeriods: node.timePeriods.filter(s => time.isCurrent(s.endTime)),
activeTimePeriod: node.timePeriods.find(s => time.isActive(s.startTime, s.endTime)),
upcomingTimePeriods: node.timePeriods.filter(s => time.isUpcoming(s.startTime)),
pastTimePeriods: node.timePeriods.filter(s => !time.isCurrent(s.endTime)),
...node,
};