ccccf038d9
minor: - change background for category list for dark theme compatibility - try to 'fix' video playback errors in console
112 lines
2.9 KiB
Vue
112 lines
2.9 KiB
Vue
<script setup lang="ts">
|
|
import CountryFlag from 'vue-country-flag-next';
|
|
import categories from '~/categories';
|
|
|
|
onMounted(() => {
|
|
useHead({
|
|
title: $t('mainTitle'),
|
|
});
|
|
});
|
|
|
|
const { setLocale } = useI18n();
|
|
|
|
const loading = ref(false);
|
|
|
|
const examStore = useExamStore();
|
|
await callOnce(() => examStore.resetExam(), { mode: 'navigation' });
|
|
|
|
const localePath = useLocalePath();
|
|
|
|
function setAndGo(category: string) {
|
|
loading.value = true;
|
|
examStore.setCategory(category);
|
|
while (true) {
|
|
if (examStore.category === category) {
|
|
return navigateTo(localePath('exam'));
|
|
}
|
|
}
|
|
}
|
|
|
|
const langSelect = ref(examStore.lang);
|
|
|
|
function changeLanguage() {
|
|
examStore.setLang(langSelect.value);
|
|
setLocale(langSelect.value as 'pl' | 'en' | 'de' | 'ua');
|
|
}
|
|
|
|
const dark = ref(false);
|
|
|
|
function getTheme() {
|
|
if (
|
|
window.matchMedia &&
|
|
window.matchMedia('(prefers-color-scheme: dark)').matches
|
|
) {
|
|
dark.value = true;
|
|
} else {
|
|
dark.value = false;
|
|
}
|
|
}
|
|
|
|
watchEffect(getTheme);
|
|
|
|
const themeStore = useThemeStore();
|
|
|
|
function themeAuto() {
|
|
themeStore.set('');
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<div v-if="!loading" class="text-3xl m-2 flex flex-col gap-2">
|
|
<span>{{ $t('mainTitle') }}</span>
|
|
<div class="flex gap-2">
|
|
<CountryFlag
|
|
class="block border border-1 border-black"
|
|
:country="langSelect != 'en' ? langSelect : 'gb'"
|
|
size="big"
|
|
/>
|
|
<select v-model="langSelect" class="select" @change="changeLanguage">
|
|
<option value="pl">Polish (Polski)</option>
|
|
<option value="en">English</option>
|
|
<option value="de">German (Deutsch)</option>
|
|
<option value="ua">Ukrainian (Українська)</option>
|
|
</select>
|
|
</div>
|
|
<div class="flex gap-2">
|
|
<label class="flex cursor-pointer gap-2 text-lg items-center">
|
|
{{ $t('theme') }}: {{ $t('light') }}
|
|
<input
|
|
v-model="dark"
|
|
type="checkbox"
|
|
value="dark"
|
|
class="toggle theme-controller"
|
|
@change="themeStore.set(dark ? 'dark' : 'light')"
|
|
/>
|
|
{{ $t('dark') }}
|
|
</label>
|
|
<div class="btn btn-soft btn-sm" @click="themeAuto()">
|
|
{{ $t('auto') }}
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="flex flex-col flex-wrap gap-2 items-start p-4 bg-base-300 border-1 border-slate-500 rounded-xl w-fit"
|
|
>
|
|
<div
|
|
v-for="category in categories"
|
|
:key="`btn-${category}`"
|
|
class="flex flex-row gap-3 items-center"
|
|
>
|
|
<button class="btn btn-xl btn-secondary" @click="setAndGo(category)">
|
|
{{ category }}
|
|
</button>
|
|
<div class="flex flex-col text-sm">
|
|
<div>{{ $t(`category.description.${category}`) }}</div>
|
|
<div>{{ $t(`category.age.${category}`) }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<LoadingScreen v-else />
|
|
</div>
|
|
</template>
|