creation of text component to display when win

HE-Arc · Dec 19, 2023 · 808d25a · 808d25a
1 parent 0ac8184
commit 808d25a
Show file tree

Hide file tree

Showing 6 changed files with 75 additions and 5 deletions.
diff --git a/frontend-vue/package-lock.json b/frontend-vue/package-lock.json
diff --git 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
@@ -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
@@ -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
@@ -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>
diff --git 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;
   },