From 808d25a8bcb02b3fe2aecdb9acc6ca6f70dd7f1c Mon Sep 17 00:00:00 2001
From: mathias <mathias.salmon@he-arc.ch>
Date: Tue, 19 Dec 2023 01:57:46 +0100
Subject: [PATCH] creation of text component to display when win

---
 frontend-vue/package-lock.json              |  6 +++
 frontend-vue/package.json                   |  1 +
 frontend-vue/src/App.vue                    | 16 ++++++--
 frontend-vue/src/components/SearchInput.vue |  5 ++-
 frontend-vue/src/components/WinText.vue     | 43 +++++++++++++++++++++
 frontend-vue/src/services/CityService.js    |  9 +++++
 6 files changed, 75 insertions(+), 5 deletions(-)
 create mode 100644 frontend-vue/src/components/WinText.vue

diff --git a/frontend-vue/package-lock.json b/frontend-vue/package-lock.json
index 636fd13..2ee60dc 100644
--- a/frontend-vue/package-lock.json
+++ b/frontend-vue/package-lock.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"
@@ -6645,6 +6646,11 @@
       "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
       "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ=="
     },
+    "node_modules/gsap": {
+      "version": "3.12.4",
+      "resolved": "https://registry.npmjs.org/gsap/-/gsap-3.12.4.tgz",
+      "integrity": "sha512-1ByAq8dD0W4aBZ/JArgaQvc0gyUfkGkP8mgAQa0qZGdpOKlSOhOf+WNXjoLimKaKG3Z4Iu6DKZtnyszqQeyqWQ=="
+    },
     "node_modules/gzip-size": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/gzip-size/-/gzip-size-6.0.0.tgz",
diff --git a/frontend-vue/package.json b/frontend-vue/package.json
index b4c1a55..27e0bdc 100644
--- a/frontend-vue/package.json
+++ b/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"
diff --git a/frontend-vue/src/App.vue b/frontend-vue/src/App.vue
index bebe303..c1b2017 100644
--- a/frontend-vue/src/App.vue
+++ b/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>
diff --git a/frontend-vue/src/components/SearchInput.vue b/frontend-vue/src/components/SearchInput.vue
index cbbf1d2..1a93654 100644
--- a/frontend-vue/src/components/SearchInput.vue
+++ b/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);
diff --git a/frontend-vue/src/components/WinText.vue b/frontend-vue/src/components/WinText.vue
new file mode 100644
index 0000000..ccbb5a9
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/frontend-vue/src/services/CityService.js b/frontend-vue/src/services/CityService.js
index 49b5899..8a83f8a 100644
--- a/frontend-vue/src/services/CityService.js
+++ b/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;
   },