2022-03-29 23:30:23 +02:00
|
|
|
<script setup>
|
|
|
|
import data from "@/data.json";
|
|
|
|
import { useStore } from "@/stores";
|
|
|
|
|
|
|
|
const store = useStore();
|
|
|
|
|
|
|
|
const translationKey = "languages_id";
|
|
|
|
const scores = data.filter((score) => {
|
|
|
|
return (
|
|
|
|
!!score.translations.find(
|
2023-01-17 16:46:50 +01:00
|
|
|
(translation) => translation[translationKey] == store.language
|
2022-03-29 23:30:23 +02:00
|
|
|
) &&
|
|
|
|
score.results.length &&
|
|
|
|
score.questions.length
|
|
|
|
);
|
|
|
|
});
|
|
|
|
function getTranslation(translations, key) {
|
2023-01-17 16:46:50 +01:00
|
|
|
return translations.find((translation) => translation[key] == store.language);
|
|
|
|
}
|
2022-03-29 23:30:23 +02:00
|
|
|
</script>
|
|
|
|
|
|
|
|
<template>
|
2022-04-04 16:44:10 +02:00
|
|
|
<header>
|
2023-03-07 11:14:59 +01:00
|
|
|
<ul>
|
|
|
|
<li
|
|
|
|
v-if="store.theme == ''"
|
|
|
|
@click="store.switchTheme"
|
|
|
|
title="Thème de votre système"
|
|
|
|
>
|
|
|
|
🌓
|
|
|
|
</li>
|
|
|
|
<li
|
|
|
|
v-if="store.theme == 'dark'"
|
|
|
|
@click="store.switchTheme"
|
|
|
|
title="Thème sombre"
|
|
|
|
>
|
|
|
|
🌑
|
|
|
|
</li>
|
|
|
|
<li
|
|
|
|
v-if="store.theme == 'light'"
|
|
|
|
@click="store.switchTheme"
|
|
|
|
title="Thème clair"
|
|
|
|
>
|
|
|
|
🌞
|
|
|
|
</li>
|
|
|
|
</ul>
|
2022-04-04 16:44:10 +02:00
|
|
|
<h1>Ceiba Scores App</h1>
|
2023-01-17 16:46:50 +01:00
|
|
|
<ul>
|
2023-03-07 11:14:59 +01:00
|
|
|
<li v-if="store.language == 'fr-FR'" @click="store.switchLanguage">🇫🇷</li>
|
|
|
|
<li v-if="store.language == 'en-US'" @click="store.switchLanguage">🇺🇸</li>
|
2023-01-17 16:46:50 +01:00
|
|
|
</ul>
|
2022-04-04 16:44:10 +02:00
|
|
|
</header>
|
|
|
|
<main>
|
2022-04-06 12:22:53 +02:00
|
|
|
<div class="container" v-if="scores">
|
2022-04-04 16:44:10 +02:00
|
|
|
<ul>
|
|
|
|
<li v-for="score in scores" :key="score.id" :id="`score_${score.id}`">
|
|
|
|
<router-link :to="{ name: 'score', params: { id: score.id } }">{{
|
2023-01-17 16:46:50 +01:00
|
|
|
getTranslation(score.translations, "languages_id").title
|
2022-04-04 16:44:10 +02:00
|
|
|
}}</router-link>
|
|
|
|
</li>
|
|
|
|
</ul>
|
2022-04-06 12:22:53 +02:00
|
|
|
</div>
|
2022-04-04 16:44:10 +02:00
|
|
|
</main>
|
2022-03-29 23:30:23 +02:00
|
|
|
</template>
|
|
|
|
|
|
|
|
<style lang="sass" scoped>
|
2022-04-04 16:44:10 +02:00
|
|
|
header
|
|
|
|
height: var(--header-size)
|
|
|
|
overflow: hidden
|
|
|
|
display: flex
|
2023-01-17 16:46:50 +01:00
|
|
|
justify-content: space-around
|
2022-04-04 16:44:10 +02:00
|
|
|
align-items: center
|
2023-01-17 12:48:20 +01:00
|
|
|
border-bottom: 2px solid var(--color-text)
|
2022-04-04 16:44:10 +02:00
|
|
|
background: var(--color-green)
|
|
|
|
|
|
|
|
h1
|
|
|
|
text-align: center
|
|
|
|
|
2023-01-17 16:46:50 +01:00
|
|
|
ul
|
|
|
|
margin: 0
|
|
|
|
padding: 0
|
|
|
|
list-style: none
|
|
|
|
text-align: center
|
|
|
|
font-size: 1.5rem
|
|
|
|
|
|
|
|
a
|
|
|
|
text-decoration: none
|
|
|
|
|
|
|
|
.hidden
|
|
|
|
display: none
|
|
|
|
|
|
|
|
|
2022-04-04 16:44:10 +02:00
|
|
|
main
|
|
|
|
width: 100%
|
|
|
|
height: calc(100% - var(--header-size))
|
|
|
|
padding: 1rem
|
|
|
|
display: flex
|
|
|
|
justify-content: center
|
|
|
|
align-items: center
|
|
|
|
overflow: hidden
|
|
|
|
background-color: var(--color-highlight)
|
|
|
|
|
2022-04-06 12:22:53 +02:00
|
|
|
.container
|
|
|
|
position: relative
|
|
|
|
width: 100%
|
|
|
|
max-width: 440px
|
|
|
|
max-height: 100%
|
|
|
|
padding-top: calc(100% / (724 / 1136))
|
|
|
|
|
|
|
|
@media only screen and (min-width: 472px)
|
|
|
|
padding-top: 0
|
|
|
|
width: 440px
|
|
|
|
height: calc(440px * 1136 / 724)
|
|
|
|
|
2023-01-17 16:46:50 +01:00
|
|
|
ul
|
|
|
|
margin: 0
|
|
|
|
padding: 0
|
|
|
|
list-style: none
|
2022-04-04 16:44:10 +02:00
|
|
|
|
2023-01-17 16:46:50 +01:00
|
|
|
position: absolute
|
|
|
|
top: 0
|
|
|
|
left: 0
|
|
|
|
bottom: 0
|
|
|
|
right: 0
|
2022-04-04 16:44:10 +02:00
|
|
|
|
2023-01-17 16:46:50 +01:00
|
|
|
background-image: url(/arbre.webp)
|
|
|
|
background-position: center
|
|
|
|
background-repeat: no-repeat
|
|
|
|
background-size: contain
|
2022-04-04 16:44:10 +02:00
|
|
|
|
|
|
|
border-radius: 10px
|
|
|
|
|
2023-01-17 16:46:50 +01:00
|
|
|
li
|
|
|
|
display: none
|
|
|
|
|
|
|
|
background: rgba(0, 0, 0, .5)
|
|
|
|
border-radius: 10px
|
|
|
|
position: absolute
|
|
|
|
border: 2px solid var(--color-text)
|
|
|
|
|
|
|
|
&#score_1
|
|
|
|
display: flex
|
|
|
|
top: 40%
|
|
|
|
bottom: 35%
|
|
|
|
left: 20%
|
|
|
|
right: 20%
|
|
|
|
|
|
|
|
&#score_6
|
|
|
|
display: flex
|
|
|
|
top: 72%
|
|
|
|
bottom: 5%
|
|
|
|
left: 6%
|
|
|
|
right: 6%
|
|
|
|
|
|
|
|
a
|
|
|
|
color: var(--color-text)
|
|
|
|
display: block
|
|
|
|
width: 100%
|
|
|
|
height: 100%
|
2022-04-04 16:44:10 +02:00
|
|
|
display: flex
|
2023-01-17 16:46:50 +01:00
|
|
|
align-items: center
|
|
|
|
justify-content: center
|
|
|
|
text-align: center
|
2022-03-29 23:30:23 +02:00
|
|
|
</style>
|