ceiba-scores/src/components/ScoresList.vue

<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(
      (translation) => translation[translationKey] == store.language
    ) &&
    score.results.length &&
    score.questions.length
  );
});
function getTranslation(translations, key) {
  return translations.find((translation) => translation[key] == store.language);
}
</script>

<template>
  <header>
    <ul>
      <li
        v-if="store.theme == ''"
        @click="store.switchTheme"
        title="Thème de votre système"
      >
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36">
          <path
            fill="#FFD983"
            d="M18 0v36c9.941 0 18-8.059 18-18S27.941 0 18 0z"
          />
          <path
            fill="#66757F"
            d="M0 18c0 9.941 8.059 18 18 18V0C8.059 0 0 8.059 0 18z"
          />
          <circle fill="#FFCC4D" cx="25.5" cy="8.5" r="3.5" />
          <circle fill="#5B6876" cx="12" cy="16" r="3" />
          <circle fill="#5B6876" cx="13.5" cy="27.5" r="3.5" />
          <circle fill="#5B6876" cx="15" cy="6" r="2" />
          <circle fill="#FFCC4D" cx="33" cy="18" r="1" />
          <circle fill="#5B6876" cx="6" cy="9" r="1" />
          <circle fill="#FFCC4D" cx="21" cy="31" r="1" />
          <circle fill="#5B6876" cx="4" cy="19" r="2" />
          <circle fill="#FFCC4D" cx="26" cy="23" r="2" />
        </svg>
      </li>
      <li
        v-if="store.theme == 'dark'"
        @click="store.switchTheme"
        title="Thème sombre"
      >
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36">
          <circle fill="#66757F" cx="18" cy="18" r="18" />
          <g fill="#5B6876">
            <circle cx="10.5" cy="8.5" r="3.5" />
            <circle cx="20" cy="16" r="3" />
            <circle cx="21.5" cy="27.5" r="3.5" />
            <circle cx="21" cy="6" r="2" />
            <circle cx="3" cy="18" r="1" />
            <circle cx="30" cy="9" r="1" />
            <circle cx="15" cy="31" r="1" />
            <circle cx="32" cy="19" r="2" />
            <circle cx="10" cy="23" r="2" />
          </g>
        </svg>
      </li>
      <li
        v-if="store.theme == 'light'"
        @click="store.switchTheme"
        title="Thème clair"
      >
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36">
          <circle fill="#FFD983" cx="18" cy="18" r="18" />
          <g fill="#FFCC4D">
            <circle cx="10.5" cy="8.5" r="3.5" />
            <circle cx="20" cy="17" r="3" />
            <circle cx="24.5" cy="28.5" r="3.5" />
            <circle cx="22" cy="5" r="2" />
            <circle cx="3" cy="18" r="1" />
            <circle cx="30" cy="9" r="1" />
            <circle cx="15" cy="31" r="1" />
            <circle cx="32" cy="19" r="2" />
            <circle cx="10" cy="23" r="2" />
          </g>
        </svg>
      </li>
    </ul>
    <h1>Scores Ceiba</h1>
    <ul>
      <li v-if="store.language == 'fr-FR'" @click="store.switchLanguage">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36">
          <path
            fill="#ED2939"
            d="M36 27c0 2.209-1.791 4-4 4h-8V5h8c2.209 0 4 1.791 4 4v18z"
          />
          <path
            fill="#002495"
            d="M4 5C1.791 5 0 6.791 0 9v18c0 2.209 1.791 4 4 4h8V5H4z"
          />
          <path fill="#EEE" d="M12 5h12v26H12z" />
        </svg>
      </li>
      <li v-if="store.language == 'en-US'" @click="store.switchLanguage">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36">
          <path
            fill="#B22334"
            d="M35.445 7C34.752 5.809 33.477 5 32 5H18v2h17.445zM0 25h36v2H0zm18-8h18v2H18zm0-4h18v2H18zM0 21h36v2H0zm4 10h28c1.477 0 2.752-.809 3.445-2H.555c.693 1.191 1.968 2 3.445 2zM18 9h18v2H18z"
          />
          <path
            fill="#EEE"
            d="M.068 27.679c.017.093.036.186.059.277.026.101.058.198.092.296.089.259.197.509.333.743L.555 29h34.89l.002-.004c.135-.233.243-.483.332-.741.034-.099.067-.198.093-.301.023-.09.042-.182.059-.275.041-.22.069-.446.069-.679H0c0 .233.028.458.068.679zM0 23h36v2H0zm0-4v2h36v-2H18zm18-4h18v2H18zm0-4h18v2H18zM0 9c0-.233.03-.457.068-.679C.028 8.542 0 8.767 0 9zm.555-2l-.003.005L.555 7zM.128 8.044c.025-.102.06-.199.092-.297-.034.098-.066.196-.092.297zM18 9h18c0-.233-.028-.459-.069-.68-.017-.092-.035-.184-.059-.274-.027-.103-.059-.203-.094-.302-.089-.258-.197-.507-.332-.74.001-.001 0-.003-.001-.004H18v2z"
          />
          <path fill="#3C3B6E" d="M18 5H4C1.791 5 0 6.791 0 9v10h18V5z" />
          <path
            fill="#FFF"
            d="M2.001 7.726l.618.449-.236.725L3 8.452l.618.448-.236-.725L4 7.726h-.764L3 7l-.235.726zm2 2l.618.449-.236.725.617-.448.618.448-.236-.725L6 9.726h-.764L5 9l-.235.726zm4 0l.618.449-.236.725.617-.448.618.448-.236-.725.618-.449h-.764L9 9l-.235.726zm4 0l.618.449-.236.725.617-.448.618.448-.236-.725.618-.449h-.764L13 9l-.235.726zm-8 4l.618.449-.236.725.617-.448.618.448-.236-.725.618-.449h-.764L5 13l-.235.726zm4 0l.618.449-.236.725.617-.448.618.448-.236-.725.618-.449h-.764L9 13l-.235.726zm4 0l.618.449-.236.725.617-.448.618.448-.236-.725.618-.449h-.764L13 13l-.235.726zm-6-6l.618.449-.236.725L7 8.452l.618.448-.236-.725L8 7.726h-.764L7 7l-.235.726zm4 0l.618.449-.236.725.617-.448.618.448-.236-.725.618-.449h-.764L11 7l-.235.726zm4 0l.618.449-.236.725.617-.448.618.448-.236-.725.618-.449h-.764L15 7l-.235.726zm-12 4l.618.449-.236.725.617-.448.618.448-.236-.725.618-.449h-.764L3 11l-.235.726zM6.383 12.9L7 12.452l.618.448-.236-.725.618-.449h-.764L7 11l-.235.726h-.764l.618.449zm3.618-1.174l.618.449-.236.725.617-.448.618.448-.236-.725.618-.449h-.764L11 11l-.235.726zm4 0l.618.449-.236.725.617-.448.618.448-.236-.725.618-.449h-.764L15 11l-.235.726zm-12 4l.618.449-.236.725.617-.448.618.448-.236-.725.618-.449h-.764L3 15l-.235.726zM6.383 16.9L7 16.452l.618.448-.236-.725.618-.449h-.764L7 15l-.235.726h-.764l.618.449zm3.618-1.174l.618.449-.236.725.617-.448.618.448-.236-.725.618-.449h-.764L11 15l-.235.726zm4 0l.618.449-.236.725.617-.448.618.448-.236-.725.618-.449h-.764L15 15l-.235.726z"
          />
        </svg>
      </li>
    </ul>
  </header>
  <main>
    <img src="/homepage.webp" class="homeImage" />
    <div class="container" v-if="scores">
      <ul>
        <template v-for="(score, index) in scores" :key="score.id">
          <li v-if="index % 2 === 0">
            <img height="200" :src="`/answers/${score.image}.webp`" />
          </li>
          <li>
            <router-link :to="{ name: 'score', params: { id: score.id } }">{{
              getTranslation(score.translations, "languages_id").title
            }}</router-link>
          </li>
          <li v-if="index % 2 !== 0">
            <img height="200" :src="`/answers/${score.image}.webp`" />
          </li>
        </template>
      </ul>
    </div>
  </main>
</template>

<style lang="sass" scoped>
header
  height: var(--header-size)
  overflow: hidden
  display: flex
  justify-content: space-around
  align-items: center
  border-bottom: 2px solid var(--color-header-text)
  color: var(--color-header-text)
  background: var(--color-header-background)

  h1
    text-align: center
    text-transform: uppercase

  ul
    margin: 0
    padding: 0
    list-style: none
    text-align: center
    font-size: 1.5rem
    width: 1.5rem
    height: 2rem

    a
      text-decoration: none

    .hidden
      display: none


main
  width: 100%
  height: calc(100% - var(--header-size))
  background-color: var(--color-background)
  overflow-x: hidden
  overflow-y: auto
  text-align: center

  .homeImage
    height: 30vh
    width: 100%
    max-width: 600px
    object-fit: contain
    margin: 0 auto

.container
  display: flex
  justify-content: center
  align-items: center
  overflow: hidden
  padding: 1rem

  ul
    margin: 0
    padding: 0
    list-style: none
    display: flex
    flex-wrap: wrap
    justify-content: center
    max-width: 404px
    border: 1px solid var(--color-green)

    li
      height: 202px
      width: 202px
      max-width: 50%
      border: 1px solid var(--color-green)

    img
      border: 2px solid var(--color-background)
      max-width: 100%

    a
      font-size: 2rem
      line-height: 2rem
      color: var(--color-green)
      display: block
      width: 100%
      height: 100%
      display: flex
      align-items: center
      justify-content: center
      text-align: center
      padding: 1rem
      text-decoration: none
</style>