Merge branch 'dev'

.github/workflows/deploy.yml

@@ -26,4 +26,4 @@ jobs:
         chmod 600 ~/.ssh/pkey
         eval "$(ssh-agent -s)"
         ssh-add ~/.ssh/pkey
-        ssh ${{ secrets.SECRET_USER }}@${{ secrets.SECRET_HOST }} -p ${{ secrets.SECRET_PORT }} "cd ./project/Swissdle && git pull origin main && cd backend-laravel && php artisan db:wipe --force && php artisan migrate --force && php artisan db:seed --force && composer install && php artisan vendor:publish --provider "L5Swagger\L5SwaggerServiceProvider" && php artisan l5-swagger:generate && cd ../frontend-vue && npm install && npm run build && (crontab -l && crontab -r) || echo '*/5 * * * * cd /home/laravel/project/Swissdle/backend-laravel && /usr/local/bin/php artisan schedule:run >> /home/laravel/project/Swissdle/cron.log' | crontab"
+        ssh ${{ secrets.SECRET_USER }}@${{ secrets.SECRET_HOST }} -p ${{ secrets.SECRET_PORT }} "cd ./project/Swissdle && git checkout . && git pull origin main && cd backend-laravel && php artisan db:wipe --force && php artisan migrate --force && php artisan db:seed --force && composer install && php artisan vendor:publish --provider "L5Swagger\L5SwaggerServiceProvider" && php artisan l5-swagger:generate && cd ../frontend-vue && npm install && npm run build && (crontab -l && crontab -r) || echo '*/5 * * * * cd /home/laravel/project/Swissdle/backend-laravel && /usr/local/bin/php artisan schedule:run >> /home/laravel/project/Swissdle/cron.log' | crontab"

frontend-vue/package.json

@@ -11,6 +11,7 @@
     "axios": "^1.6.0",
     "bootstrap": "^5.3.2",
     "core-js": "^3.8.3",
+    "gsap": "^3.12.4",
     "vue": "^3.2.13",
     "vue-autocomplete": "^0.0.2",
     "vuetify": "^3.4.7"

frontend-vue/src/App.vue

@@ -3,8 +3,9 @@
     <h1 class="montserrat">Swissdle</h1>
     <p class="lato guess-text">Guess the City!</p>
     <DailyCity />
-    <SearchInput />
-    <HintsDisplay/>
+    <SearchInput v-show="!win" />
+    <WinText v-show="win" />
+    <HintsDisplay />
   </div>
 </template>
 
@@ -15,6 +16,7 @@ import CityService from "./services/CityService";
 import DailyCity from './components/DailyCity.vue'
 import SearchInput from './components/SearchInput.vue';
 import HintsDisplay from './components/HintsDisplay.vue';
+import WinText from './components/WinText.vue';
 
 export default {
   name: 'App',
@@ -28,7 +30,8 @@ export default {
   components: {
     DailyCity,
     SearchInput,
-    HintsDisplay
+    HintsDisplay,
+    WinText
   },
   methods: {
     setDailyCity() {
@@ -52,7 +55,13 @@ export default {
       }
     }
   },
+  computed: {
+    win() {
+      return CityService.getWin() ? CityService.getWin() : false;
+    },
+  },
   mounted() {
+    CityService.setWin(false);
     this.setDailyCity();
     this.setCities();
   }
@@ -78,5 +87,4 @@ h1 {
 .guess-text {
   font-style: italic;
 }
-
 </style>

frontend-vue/src/components/DirectionalArrow.vue

@@ -9,7 +9,7 @@
             </svg>
         </template>
         <template v-else>
-            <svg :style="{ transform: `rotate(${populationDiff == -1 ? -90 : 90}deg)`, transformOrigin: 'center' }"
+            <svg :style="{ transform: `rotate(${populationDiff == -1 ? 90 : -90}deg)`, transformOrigin: 'center' }"
                 width="28" height="18" viewBox="0 0 14 9" fill="none" xmlns="http://www.w3.org/2000/svg">
                 <path
                     d="M13.256 4.91108C13.4512 4.71582 13.4512 4.39923 13.256 4.20397L10.074 1.02199C9.87872 0.82673 9.56213 0.82673 9.36687 1.02199C9.17161 1.21725 9.17161 1.53384 9.36687 1.7291L12.1953 4.55753L9.36687 7.38595C9.17161 7.58121 9.17161 7.8978 9.36687 8.09306C9.56213 8.28832 9.87872 8.28832 10.074 8.09306L13.256 4.91108ZM0.902405 5.05753L12.9024 5.05753V4.05753L0.902405 4.05753V5.05753Z"

frontend-vue/src/components/SearchInput.vue

@@ -40,7 +40,10 @@ export default {
 
             try {
                 axios.get(this.apiBaseUrl + this.apiGetGuess + cityId).then((response) => {
-                    (CityService.addGuesses(response.data))
+                    (
+                        CityService.addGuesses(response.data),
+                        CityService.getDailyCity().id == response.data.city.id ? CityService.setWin(true) : "" 
+                    )
                 })
             } catch (err) {
                 alert(err);

frontend-vue/src/components/WinText.vue

@@ -0,0 +1,43 @@
+<template>
+    <div id="win-text-container">
+        <p class="montserrat" ref="winText">Good guess ! Well Done !</p>
+    </div>
+</template>
+<script>
+import { TweenMax, Power1 } from "gsap";
+
+export default {
+    name: "WinText",
+    data() {
+        return {
+            winText: null,
+        };
+    },
+    methods: {
+        animateText() {
+            TweenMax.to(this.winText, 1, {
+                y: 10,
+                ease: Power1.easeInOut,
+                yoyo: true,
+                repeat: -1,
+            });
+        },
+    },
+    mounted() {
+        this.winText = this.$refs.winText;
+        this.animateText();
+    }
+}
+
+</script>
+<style scoped>
+#win-text-container {
+    padding-top: 20px;
+}
+
+p {
+    margin: 0;
+    font-size: 24px;
+    color: #83D881;
+}
+</style>

frontend-vue/src/services/CityService.js

@@ -5,11 +5,16 @@ const CityService = {
   dailyCity: ref(null),
   cities: ref(null),
   guesses: ref([]),
+  win: ref(Boolean),
 
   setDailyCity(city) {
     this.dailyCity.value = city;
   },
 
+  setWin(win) {
+    this.win.value = win;
+  },
+
   setCities(cities) {
     this.cities.value = cities;
   },
@@ -33,6 +38,10 @@ const CityService = {
     return this.dailyCity.value;
   },
 
+  getWin() {
+    return this.win.value;
+  },
+
   getCities() {
     return this.cities.value;
   },