feat: lang switch

src/components/NavBar.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-  import { ref } from 'vue'
+  import { computed, ref } from 'vue'
   import { useRouter } from 'vue-router'
   import { useAuthStore } from '@/stores/auth'
   import Menubar from 'primevue/menubar'
@@ -9,11 +9,12 @@
   import { useDialog } from 'primevue/usedialog'
   import DynamicDialog from 'primevue/dynamicdialog'
   import ProfileEdition from './ProfileEdition.vue'
+  import { uppercaseFirstLetter } from '@/utils/string'
 
   const { HOME, LOGIN, MY_BETS, FAQ, CREATE, MATCHS } = APP_ROUTES
   const router = useRouter()
   const auth = useAuthStore()
-  const { t } = useI18n()
+  const { t, locale, availableLocales } = useI18n({ useScope: 'global' })
 
   const dialog = useDialog()
 
@@ -30,6 +31,20 @@
       to: MATCHS,
     },
     { label: t('FAQView.titleShort'), to: FAQ },
+    {
+      icon: 'pi pi-language',
+      items: (availableLocales as string[]).map((code) => {
+        const language = new Intl.DisplayNames([code], { type: 'language' }).of(code) ?? ''
+
+        return {
+          label: uppercaseFirstLetter(language),
+          class: () => (locale.value === code ? 'navbar__lang--active' : ''),
+          command: () => {
+            locale.value = code
+          },
+        }
+      }),
+    },
     { class: 'spacer', separator: true },
     {
       label: t('LoginView.title'),
@@ -80,7 +95,6 @@
   <div class="navbar-container">
     <Menubar :model="items" class="navbar" />
     <BeatLoader :loading="isLoading" color="var(--primary-color)" size="0.5rem" />
-
     <DynamicDialog />
   </div>
 </template>
@@ -113,7 +127,8 @@
     background: rgba(255, 255, 255, 0.03) !important;
   }
 
-  ::v-deep(.p-menuitem-link:focus :is(.p-menuitem-text, .p-menuitem-icon)) {
+  ::v-deep(.p-menuitem-link:focus :is(.p-menuitem-text, .p-menuitem-icon)),
+  ::v-deep(.navbar__lang--active) :is(.p-menuitem-text, .p-menuitem-icon) {
     color: var(--primary-color) !important;
   }
 

src/components/UsernameLine.vue

@@ -57,7 +57,7 @@
     }
     &__tooltip {
       display: inline-block;
-      min-width: 6rem;
+      min-width: 8.2rem;
       padding-right: 0;
       height: max-content;
       .p-tooltip-text {

src/components/leaderboard/LeaderBoard.vue

@@ -12,9 +12,10 @@
 <template>
   <div class="leaderboard">
     <h3>{{ $t('Leaderboard.title') }}</h3>
+    <p v-if="leaderboardStore.leaderboard?.length === 0">{{ $t('Leaderboard.noResults') }}</p>
     <ol>
       <li v-for="line of leaderboardStore.leaderboard" :key="line.user_id">
-        <mark><UsernameLine :username="line.username" :old-usernames="line.old_usernames" /></mark>
+        <UsernameLine :username="line.username" :old-usernames="line.old_usernames" class="leaderboard__username" />
         <small>{{ line.score }}</small>
       </li>
     </ol>
@@ -34,20 +35,19 @@
       counter-reset: leaderboard;
 
       li {
-        list-style-type: none;
         position: relative;
-        z-index: 1;
+        list-style-type: none;
         font-size: 0.875rem;
         counter-increment: leaderboard;
-        padding: 1.5rem 0.625rem 1.125rem 3.125rem;
+        padding: 1.5rem 0.625rem 1.125rem 2.25rem;
         backface-visibility: hidden;
         transform: translateZ(0) scale(1, 1);
+        display: inline-flex;
+        width: 100%;
 
         &::before {
           content: counter(leaderboard);
           position: absolute;
-          z-index: 2;
-          top: 0.9375rem;
           left: 0.9375rem;
           width: 1.25rem;
           height: 1.25rem;
@@ -59,61 +59,19 @@
           text-align: center;
         }
 
-        mark {
-          position: absolute;
-          z-index: 2;
-          top: 0;
-          left: 0;
+        .leaderboard__username {
           width: 100%;
-          height: 100%;
-          padding: 1.125rem 0.625rem 1.125rem 1.2rem;
-          margin: 0;
-          background: none;
-          color: var(--text-color);
-
-          &::before,
-          &::after {
-            content: '';
-            position: absolute;
-            z-index: 1;
-            bottom: -0.6875rem;
-            left: -0.5625rem;
-            border-left: 0.625rem solid transparent;
-            transition: all 0.1s ease-in-out;
-            opacity: 0;
-          }
-
-          &::after {
-            left: auto;
-            right: -0.5625rem;
-            border-left: none;
-            border-right: 0.625rem solid transparent;
-          }
         }
 
         small {
-          position: relative;
-          z-index: 2;
+          right: 1rem;
+          bottom: calc(50% - 0.85rem);
           display: block;
           text-align: right;
           font-size: 0.85rem;
           font-weight: 500;
         }
 
-        &::after {
-          content: '';
-          position: absolute;
-          z-index: 1;
-          top: 0;
-          left: 0;
-          width: 100%;
-          height: 100%;
-          background: var(--surface-e);
-          box-shadow: 0 0.1875rem 0 rgba(0, 0, 0, 0.08);
-          transition: all 0.3s ease-in-out;
-          opacity: 0;
-        }
-
         background: var(--surface-e);
 
         &:nth-child(1) {
@@ -155,6 +113,7 @@
       }
       // hover
       li:hover {
+        z-index: 3;
         opacity: 1;
         transform: scale(1.01);
 

src/lang/index.ts

@@ -1,17 +1,30 @@
+import { uppercaseFirstLetter } from '@/utils/string'
 import { createI18n } from 'vue-i18n'
-import en from './locales/en.json'
-import fr from './locales/fr.json'
+
+function loadTranslations() {
+  if (process.env.NODE_ENV === 'test') return {}
+  const context = import.meta.glob('./locales/*.json', { eager: true })
+
+  return Object.keys(context)
+    .map((key) => ({ key, name: key.match(/\/([a-z_]+)\.json$/i)?.[1] }))
+    .reduce(
+      (modules, { key, name }) => ({
+        ...modules,
+        [name ?? '']: context[key],
+      }),
+      {},
+    )
+}
+
+const translations = loadTranslations()
 
 const i18n = createI18n({
-  locale: navigator.language,
+  locale: navigator.language.split('-')[0],
   fallbackLocale: 'en',
   fallbackWarn: false,
   missingWarn: false,
   legacy: false,
-  messages: {
-    en,
-    fr,
-  },
+  messages: translations,
   datetimeFormats: {
     en: {
       long: {

src/lang/locales/en.json

@@ -288,6 +288,10 @@
     "bet": "Bet"
   },
   "Leaderboard": {
-    "title": "Leaderboard"
+    "title": "Leaderboard",
+    "noResults": "You haven't bet yet."
+  },
+  "EventResultsItemUsername": {
+    "oldUsernames": "Old nicknames : "
   }
 }

src/views/EventView.vue

@@ -238,11 +238,17 @@
     }
 
     &__stats-content {
-      display: grid;
-      align-items: center;
+      display: flex;
+      align-items: stretch;
       justify-items: center;
-      justify-content: space-between;
-      grid-template-columns: repeat(2, 1fr);
+      justify-content: center;
+      gap: 2rem;
+
+      flex-direction: column;
+      @include sm {
+        flex-direction: row;
+        grid-template-columns: repeat(2, 1fr);
+      }
       & > * {
         margin: auto;
         width: 75%;

src/views/FAQView.vue

@@ -256,12 +256,12 @@
           :collapsed="true"
           class="faq__example">
           <p>
-            {{ $t('FAQView.Question2.dispatchParagraph.exemple.0') }}
+            {{ $t('FAQView.Question2.dispatchParagraph.example.0') }}
             <br />
-            {{ $t('FAQView.Question2.dispatchParagraph.exemple.1') }}
+            {{ $t('FAQView.Question2.dispatchParagraph.example.1') }}
             <br />
             <br />
-            {{ $t('FAQView.Question2.dispatchParagraph.exemple.2') }}
+            {{ $t('FAQView.Question2.dispatchParagraph.example.2') }}
             <br />
             <br />
           </p>

supabase/migrations/20231029115759_fixLeaderboardAuthor.sql

@@ -0,0 +1,44 @@
+
+
+CREATE OR REPLACE FUNCTION get_leaderboard(userid uuid, _unit event_units, datestart timestamp DEFAULT '2020-01-01 00:00:00+00', dateend timestamp with time zone  DEFAULT NOW())
+  RETURNS TABLE (
+    user_id uuid,
+    username character varying,
+    old_usernames character varying[],
+    win real,
+    lost real,
+    score real
+  ) 
+  LANGUAGE plpgsql AS
+$func$
+BEGIN
+return query
+  SELECT p.*, COALESCE(SUM(rW.number) ,0) as win,  COALESCE(SUM(rL.number),0) as lost,  COALESCE(SUM(rW.number),0) - COALESCE(SUM(rL.number) ,0) as score
+  FROM  profiles p
+  right JOIN  events_users_participation eup1 ON  eup1.user_id = p.user_id
+  LEFT JOIN results rW ON rW.to_id = p.user_id
+  LEFT JOIN results rL ON rL.from_id = p.user_id
+  WHERE 
+    p.user_id != userid AND
+    ( -- participant
+      eup1.event_code IN (
+        select eup.event_code
+        from  events_users_participation eup, events e
+        WHERE eup.user_id = userid
+        AND e.invite_code = eup.event_code
+        AND e.date_finish BETWEEN dateStart AND dateEnd
+        AND e.unit = _unit
+      )
+      OR -- author
+      eup1.event_code IN ( 
+        select e.invite_code
+        from   events e
+        where e.author = userid
+        AND e.date_finish BETWEEN dateStart AND dateEnd
+        AND e.unit = _unit
+      )
+    )
+      group by p.user_id
+  order by score DESC;
+END
+$func$;

supabase/seed.sql

@@ -27,7 +27,7 @@ UPDATE profiles SET old_usernames = '{"Michel", "Cédric", "Thomas"}' WHERE user
 
 
 INSERT INTO public.events VALUES 
-  (1, TO_TIMESTAMP('2022-11-01 11:30:28', 'YYYY-MM-DD HH:MI:SS'),TO_TIMESTAMP('2023-11-25 11:31:44', 'YYYY-MM-DD HH:MI:SS'),'Le Grand champion','Une bataille incontournable','Le parie se fait sur la forme d un pot commun','Nantes','d65e1ec1-ac6a-4d97-b4c2-469f43da5d91','{"Jean", "Ervin"}', 'https://xszsqmzqzrgkpqzwuhpi.supabase.co/storage/v1/object/public/bucket-public/versus1.jpg', NULL, false, 'niji.fr', '46b5883c-9c93-4d48-9af3-49a835454633', 'private', NULL ),
+  (1, TO_TIMESTAMP('2022-11-01 11:30:28', 'YYYY-MM-DD HH:MI:SS'),TO_TIMESTAMP('2023-11-25 11:31:44', 'YYYY-MM-DD HH:MI:SS'),'Le Grand champion','Une bataille incontournable','Le parie se fait sur la forme d un pot commun','Nantes','d65e1ec1-ac6a-4d97-b4c2-469f43da5d91','{"Jean", "Ervin"}', 'https://xszsqmzqzrgkpqzwuhpi.supabase.co/storage/v1/object/public/bucket-public/versus1.jpg', NULL, false, NULL, '46b5883c-9c93-4d48-9af3-49a835454633', 'private', NULL ),
   (2, TO_TIMESTAMP('2022-11-01 11:30:28', 'YYYY-MM-DD HH:MI:SS'),TO_TIMESTAMP('2022-11-25 11:31:44', 'YYYY-MM-DD HH:MI:SS'),'Event 2 (not for test3)','Une bataille incontournable','Le parie se fait sur la forme d un pot commun','Nantes','d65e1ec1-ac6a-4d97-b4c2-469f43da5d91','{"Jean", "Ervin"}', 'https://xszsqmzqzrgkpqzwuhpi.supabase.co/storage/v1/object/public/bucket-public/versus2.jpg', 'Jean', true, NULL, 'b2037202-c155-4ea5-99c0-6c37fe4717bf', 'private', TO_TIMESTAMP('2022-11-26 11:30:28', 'YYYY-MM-DD HH:MI:SS') );
 
 SELECT setval('events_id_seq', 2);

templates/chouquette/src/lang/locales/en.json

@@ -288,6 +288,10 @@
       "bet": "Bet"
     },
     "Leaderboard": {
-      "title": "Leaderboard"
+      "title": "Leaderboard",
+      "noResults": "You haven't bet yet."
+    },
+    "EventResultsItemUsername": {
+      "oldUsernames": "Old nicknames : "
     }
   }