Merge pull request #15 from ChouquetteCorp/develop

Release 1.1.0

.github/ISSUE_TEMPLATE/bug_report.md

@@ -0,0 +1,38 @@
+---
+name: Bug report
+about: Create a report to help us improve
+title: "[BUG] "
+labels: bug
+assignees: ''
+
+---
+
+**Describe the bug**
+A clear and concise description of what the bug is.
+
+**To Reproduce**
+Steps to reproduce the behavior:
+1. Go to '...'
+2. Click on '....'
+3. Scroll down to '....'
+4. See error
+
+**Expected behavior**
+A clear and concise description of what you expected to happen.
+
+**Screenshots**
+If applicable, add screenshots to help explain your problem.
+
+**Desktop (please complete the following information):**
+ - OS: [e.g. iOS]
+ - Browser [e.g. chrome, safari]
+ - Version [e.g. 22]
+
+**Smartphone (please complete the following information):**
+ - Device: [e.g. iPhone6]
+ - OS: [e.g. iOS8.1]
+ - Browser [e.g. stock browser, safari]
+ - Version [e.g. 22]
+
+**Additional context**
+Add any other context about the problem here.

.github/ISSUE_TEMPLATE/feature_request.md

@@ -0,0 +1,20 @@
+---
+name: Feature request
+about: Suggest an idea for this project
+title: "[FEAT] "
+labels: enhancement
+assignees: ''
+
+---
+
+**Is your feature request related to a problem? Please describe.**
+A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
+
+**Describe the solution you'd like**
+A clear and concise description of what you want to happen.
+
+**Describe alternatives you've considered**
+A clear and concise description of any alternative solutions or features you've considered.
+
+**Additional context**
+Add any other context or screenshots about the feature request here.

README.md

@@ -4,9 +4,9 @@ BeerBet 🍻
 > Vue 3, Vite, TS, PrimeVue, Supabase 💚
 
 Experience a whole new way to enjoy your favorite matches with our sports betting site centered around fun and beers, without any money wagered.
-https://beerbet.chouquettebet.fr/
+https://beer.chouquettebet.fr/
 
-> This project win an award as runner up Most fun category in [Supabase Launch Week 8 Hackathon](https://supabase.com/blog/launch-week-8-hackathon-winners).
+> This project won an award in the "Most fun" category of [Supabase Launch Week 8 Hackathon](https://supabase.com/blog/launch-week-8-hackathon-winners).
 
 
 ![social](https://github.com/ChouquetteCorp/beerbet/assets/20130405/767813f2-2dd1-4f75-81df-80b717f7b3f1)
@@ -44,11 +44,11 @@ npm run lint
 
 ## Transform to XXX
 
-All template are defined under `templates`. You can use `npm run cb-cli` to transform or save template.
+All templates are defined under `templates`. You can use `npm run cb-cli` to transform or save templates.
 
 ```sh
 npm run cb-cli
-# Commands :
+# Commands:
 #  npm run cb-cli -- transform <template>  Transform repo with defined template
 #  npm run cb-cli -- save <template>       Save current repo as template
 
@@ -68,14 +68,14 @@ npx api-sport-cli get-matchs -c .github/configApiSport/default.json -u api_id
 ```
 You need to define env `SPORT_API_KEY`.
 
-It will create `matchs.sql` file, which contains all matchs from API.
+It will create a `matchs.sql` file, which contains all matchs from API.
 You can import it in your database.
 
 
 ## End-to-end tests
 
 For E2E tests, we use [cypress](https://www.cypress.io/).
-Cypress allow to tests on several browsers (edge, chrome, firefox).
+Cypress allows to test on several browsers (edge, chrome, firefox).
 
 
 ### Open Cypress
@@ -88,11 +88,11 @@ npm run dev:emulator
 # Open cypress
 npm run cypress:open
 ```
-The command will open cypress app :
+The command will open the cypress app:
 	- click on "E2E testing"
 	- choose the browser.
 
-The selected browser will be open. You can select E2E specs to run it.
+The selected browser will open. You can select E2E specs to run it.
 
 ```sh
 # OR RUN
@@ -104,7 +104,7 @@ npm run cypress:run
 You can write tests in `tests/e2e/specs/` folder. Use `*.cy.ts` extension.
 
 
-Quick introduction to Cypress syntax, is available here: [https://docs.cypress.io/guides/end-to-end-testing/writing-your-first-end-to-end-test#What-you-ll-learn](https://docs.cypress.io/guides/end-to-end-testing/writing-your-first-end-to-end-test#What-you-ll-learn/).
+Quick introduction to Cypress syntax is available here: [https://docs.cypress.io/guides/end-to-end-testing/writing-your-first-end-to-end-test#What-you-ll-learn](https://docs.cypress.io/guides/end-to-end-testing/writing-your-first-end-to-end-test#What-you-ll-learn/).
 
 
 #### Custom command

crowdin.yml

@@ -0,0 +1,5 @@
+files:
+  - source: /src/lang/locales/en.json
+    translation: /src/lang/locales/%two_letters_code%.json
+  - source: /templates/**/src/lang/locales/en.json
+    translation: /templates/**/src/lang/locales/%two_letters_code%.json

package.json

@@ -28,6 +28,8 @@
     "@onesignal/onesignal-vue3": "^1.0.2",
     "@supabase/supabase-js": "^2.21.0",
     "browser-image-compression": "^2.0.2",
+    "chart.js": "^4.4.0",
+    "colord": "^2.9.3",
     "pinia": "^2.0.35",
     "primeicons": "^6.0.1",
     "primevue": "^3.29.0",

src/components/BetCounter.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+  import chouquette from '@/assets/images/chouquette.png'
+
+  defineProps<{
+    nbBet: number
+  }>()
+</script>
+
+<template>
+  <div class="bet-counter">
+    <div class="bet-counter__number">
+      <p>{{ nbBet }}</p>
+      <img :src="chouquette" alt="unit" />
+    </div>
+    <p>{{ $t('EventView.betToast.success.detail', nbBet) }}</p>
+  </div>
+</template>
+
+<style lang="scss">
+  .bet-counter {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    &__number {
+      display: flex;
+      justify-content: flex-end;
+      align-items: baseline;
+      column-gap: 1rem;
+      height: 8.5rem;
+
+      p {
+        vertical-align: text-bottom;
+        font-size: 7rem;
+        font-weight: 500;
+      }
+      img {
+        height: 3.75rem;
+      }
+    }
+  }
+</style>

src/components/EventResultsItem.vue

@@ -2,7 +2,7 @@
   import { useAuthStore } from '@/stores/auth'
   import type { Result } from '@/types/interfaces'
   import { useI18n } from 'vue-i18n'
-  import EventResultsItemUsername from './EventResultsItemUsername.vue'
+  import UsernameLine from './UsernameLine.vue'
 
   const auth = useAuthStore()
   const { t } = useI18n()
@@ -22,16 +22,10 @@
           count: props.result.number + ' ' + t('unit', Math.trunc(props.result.number)),
         })
       }}
-      <EventResultsItemUsername
-        v-if="result.to"
-        :username="result.to.username"
-        :old-usernames="result.to.old_usernames" />
+      <UsernameLine v-if="result.to" :username="result.to.username" :old-usernames="result.to.old_usernames" />
     </template>
     <template v-else>
-      <EventResultsItemUsername
-        v-if="result.from"
-        :username="result.from.username"
-        :old-usernames="result.from.old_usernames" />
+      <UsernameLine v-if="result.from" :username="result.from.username" :old-usernames="result.from.old_usernames" />
       {{
         t('EventResultsItem.getMessage', {
           count: props.result.number + ' ' + t('unit', Math.trunc(props.result.number)),

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,15 +9,16 @@
   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()
 
-  const items = ref([
+  const items = computed(() => [
     { icon: 'pi pi-home', class: 'navbar__home', to: HOME },
     { label: t('MyBetsView.title'), to: MY_BETS, visible: () => auth.isConnected && !isLoading.value },
     {
@@ -30,6 +31,21 @@
       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
+            localStorage.setItem('locale', code)
+          },
+        }
+      }),
+    },
     { class: 'spacer', separator: true },
     {
       label: t('LoginView.title'),
@@ -80,7 +96,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 +128,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;
   }