Add share functionality to BuildRecap component; implement copyShareMessage method for sharing build details via clipboard; enhance localization files with share messages and notifications in English, French, and 'laranguiva' for improved user experience.

Author: drkaine

frontend/src/components/composants/BuildRecap.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { useRoute, useRouter } from 'vue-router'
 import { ref, computed } from 'vue'
+import { useI18n } from 'vue-i18n'
 import SheetBuild from '@/components/composants/SheetBuild.vue'
 import type { BuildData } from '@/types/build'
 import { useBuildStore } from '@/stores/buildStore'
@@ -14,6 +15,7 @@ import { useItemStore } from '@/stores/itemStore'
 import { useRoleStore } from '@/stores/roleStore'
 import StatistiquesBuild from '@/components/composants/StatistiquesBuild.vue'
 
+const { t } = useI18n()
 const connexionStore = useConnexionStore()
 const route = useRoute()
 const router = useRouter()
@@ -29,6 +31,9 @@ const isAdmin = computed(
   () => connexionStore.userName === import.meta.env.VITE_NAME,
 )
 
+const showNotification = ref(false)
+const notificationMessage = ref('')
+
 const championStore = useChampionStore()
 const runeStore = useRuneStore()
 const summonerStore = useSummonerStore()
@@ -161,12 +166,64 @@ const editBuild = () => {
 
   router.push('/build')
 }
+
+async function copyShareMessage() {
+  try {
+    if (!buildData.value) return
+
+    const currentUrl = window.location.href
+    const championName = buildData.value.sheet.champion.name
+    const description = buildData.value.description || ''
+    const version = buildData.value.version || t('build-recap.no-version')
+    const certified = buildData.value.certified || false
+    const author = buildData.value.author || t('build-recap.no-author')
+    const roles = buildData.value.roles.join(', ') || t('build-recap.all-roles')
+
+    let messageTemplate = ''
+
+    if (type === 'lelariva') {
+      messageTemplate = t('build-recap.share-message-lelariva')
+    } else if (certified) {
+      messageTemplate = t('build-recap.share-message-user-certified')
+    } else {
+      messageTemplate = t('build-recap.share-message-user')
+    }
+
+    const message = messageTemplate
+      .replace('{champion}', championName)
+      .replace('{author}', author)
+      .replace('{description}', description)
+      .replace('{version}', version)
+      .replace('{url}', currentUrl)
+      .replace('{roles}', roles)
+
+    await navigator.clipboard.writeText(message)
+    notificationMessage.value = t('build-recap.share-copied')
+
+    showNotification.value = true
+
+    setTimeout(() => {
+      showNotification.value = false
+    }, 3000)
+  } catch (error) {
+    console.error('Erreur lors de la copie du message:', error)
+    notificationMessage.value = 'Erreur lors de la copie'
+    showNotification.value = true
+    setTimeout(() => {
+      showNotification.value = false
+    }, 3000)
+  }
+}
 </script>
 
 <template>
   <main class="build-recap" role="main">
     <h1 class="page-title">Build</h1>
 
+    <div v-if="showNotification" class="notification-toast">
+      {{ notificationMessage }}
+    </div>
+
     <div class="build-content">
       <div class="left-column">
         <div class="actions-panel">
@@ -235,6 +292,23 @@ const editBuild = () => {
               </svg>
               <span>{{ $t('build-recap.image') }}</span>
             </button>
+            <button class="btn" @click="copyShareMessage">
+              <svg
+                width="24"
+                height="24"
+                viewBox="0 0 24 24"
+                stroke-width="2"
+                stroke="currentColor"
+                fill="none"
+              >
+                <path d="M6 12m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0"></path>
+                <path d="M18 6m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0"></path>
+                <path d="M18 18m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0"></path>
+                <path d="M8.7 10.7l6.6 -3.4"></path>
+                <path d="M8.7 13.3l6.6 3.4"></path>
+              </svg>
+              <span>{{ $t('build-recap.share') }}</span>
+            </button>
           </div>
 
           <div
@@ -518,6 +592,13 @@ main[role='main'] {
     justify-content: center;
     margin-top: 1rem;
   }
+
+  .notification-toast {
+    top: 10px;
+    right: 10px;
+    left: 10px;
+    text-align: center;
+  }
 }
 
 @media (min-width: 1024px) {
@@ -602,4 +683,29 @@ main[role='main'] {
   max-width: 800px;
   margin: 0 auto;
 }
+
+.notification-toast {
+  position: fixed;
+  top: 20px;
+  right: 20px;
+  background-color: var(--color-gold-300);
+  color: var(--color-grey-800);
+  padding: 1rem 1.5rem;
+  border-radius: 8px;
+  font-weight: bold;
+  z-index: 1000;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+  animation: slideInFromRight 0.3s ease-out;
+}
+
+@keyframes slideInFromRight {
+  from {
+    transform: translateX(100%);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
 </style>

frontend/src/i18n/locales/en.json

@@ -59,6 +59,9 @@
     "gold": "Gold"
   },
   "build-recap": {
+    "no-version": "Unknown version",
+    "no-author": "Anonymous",
+    "all-roles": "All roles",
     "json": "JSON",
     "image": "Image",
     "delete": "Delete",
@@ -69,7 +72,14 @@
     "total": "Total",
     "certify": "Certify",
     "uncertify": "Uncertify",
-    "statistic": "Statistic"
+    "statistic": "Statistic",
+    "share": "Share",
+    "share-message-user": "✨ Check out {author}'s build  for {champion} {roles}\n\n🎯 {description}\n\n📱 Version {version}\n\n🔗 {url}",
+    "share-message-user-certified": "✨ Check out {author}'s build recognized by Lelariva  for {champion} {roles}\n\n🎯 {description}\n\n📱 Version {version}\n\n🔗 {url}",
+    "share-message-lelariva": "✨ Check out this {champion} build by Lelariva  for {champion} {roles}\n\n🎯 {description}\n\n📱 Version {version}\n\n🔗 {url}",
+    "share-copied": "Link copied to clipboard!",
+    "share-text": "Copy text",
+    "share-image": "Copy image"
   },
   "contact": {
     "title": "Contact",

frontend/src/i18n/locales/fr.json

@@ -59,6 +59,9 @@
     "gold": "Or"
   },
   "build-recap": {
+    "no-version": "Inconnue",
+    "no-author": "Anonyme",
+    "all-roles": "tous les rôles",
     "json": "JSON",
     "image": "Image",
     "delete": "Supprimer",
@@ -69,7 +72,14 @@
     "total": "Total",
     "certify": "Certifier",
     "uncertify": "Décertifier",
-    "statistic": "Statistique"
+    "statistic": "Statistique",
+    "share": "Partager",
+    "share-message-user": "✨ Découvrez le build de {author} pour {champion} {roles}\n\n🎯 {description}\n\n📱 Version {version}\n\n🔗 {url}",
+    "share-message-user-certified": "✨ Découvrez le build de {author} reconnu par Lelariva pour {champion} {roles}\n\n🎯 {description}\n\n📱 Version {version}\n\n🔗 {url}",
+    "share-message-lelariva": "✨ Découvrez le build de {champion} proposé par Lelariva pour {champion} {roles}\n\n🎯 {description}\n\n📱 Version {version}\n\n🔗 {url}",
+    "share-copied": "Lien copié dans le presse-papier !",
+    "share-text": "Copier le texte",
+    "share-image": "Copier l'image"
   },
   "contact": {
     "title": "Contact",

frontend/src/i18n/locales/laranguiva.json

@@ -59,6 +59,9 @@
     "gold": "Or"
   },
   "build-recap": {
+    "no-version": "Inconnue",
+    "no-author": "Anonyme",
+    "all-roles": "tous les rôles",
     "json": "JSON",
     "image": "Image",
     "delete": "Supprimer",
@@ -68,7 +71,14 @@
     "total": "Total",
     "certify": "Certifiva",
     "uncertify": "Décertifiva",
-    "statistic": "Statistique"
+    "statistic": "Statistique",
+    "share": "Partagiva",
+    "share-message-user": "✨ Découvrez le buildriva de {author} pour {champion} {roles}\n\n🎯 {description}\n\n📱 Versionriva {version}\n\n🔗 {url}",
+    "share-message-user-certified": "✨ Découvrez le buildriva de {author} reconnu par Lelariva pour {champion} {roles}\n\n🎯 {description}\n\n📱 Versionriva {version}\n\n🔗 {url}",
+    "share-message-lelariva": "✨ Découvrez le buildriva de {champion} proposé par Lelariva pour {champion} {roles}\n\n🎯 {description}\n\n📱 Versionriva {version}\n\n🔗 {url}",
+    "share-copied": "Lienriva copié dans le presse-papieriva !",
+    "share-text": "Copier le texteriva",
+    "share-image": "Copier l'imageriva"
   },
   "contact": {
     "title": "Contact",