From d412ff7ab653aedffed157511004758a670834e6 Mon Sep 17 00:00:00 2001
From: berke <bugdayberke@gmail.com>
Date: Sun, 16 Jan 2022 22:03:58 +0300
Subject: [PATCH] Fixes #7

---
 components/Element.vue | 55 ++++++++++++++++++++++++++++++++----------
 components/Slider.vue  | 32 ++++++++++++++++++------
 store/mutations.js     |  3 +++
 store/state.js         |  1 +
 4 files changed, 70 insertions(+), 21 deletions(-)

diff --git a/components/Element.vue b/components/Element.vue
index f0b925b..9d9b1df 100644
--- a/components/Element.vue
+++ b/components/Element.vue
@@ -77,7 +77,8 @@ export default {
       const selectedTemperatureType = this.$store.state.selectedTemperatureType
       const temperature = this.$store.state.temperature
 
-      if (isTemperatureTriggered && this.element.number) {
+      let currentPhaseOfElement
+      if ((isTemperatureTriggered && this.element.number) || this.selectedPhaseOfElement) {
         let ref
         if (selectedTemperatureType === 'c') {
           ref = temperature + 273.15
@@ -88,22 +89,50 @@ export default {
         }
 
         if (this.element.boil_use === '' && this.element.melt_use === '') {
-          return 'element-searched orange'
-        }
-        if (this.element.boil_use === '') {
-          return ref >= this.element.melt_use ? 'element-searched orange' : 'element-searched purple'
-        }
-        if (this.element.melt_use === '') {
-          return ref >= this.element.boil_use ? 'element-searched teal' : 'element-searched orange'
-        }
-        if (ref >= this.element.boil_use) {
-          return 'element-searched teal'
+          currentPhaseOfElement = 'unknown'
+        } else if (this.element.boil_use === '') {
+          currentPhaseOfElement = ref >= this.element.melt_use ? 'unknown' : 'solid'
+        } else if (this.element.melt_use === '') {
+          currentPhaseOfElement = ref >= this.element.boil_use ? 'gas' : 'unknown'
+        } else if (ref >= this.element.boil_use) {
+          currentPhaseOfElement = 'gas'
         } else if (ref >= this.element.melt_use) {
-          return 'element-searched blue'
+          currentPhaseOfElement = 'liquid'
         } else {
-          return 'element-searched purple'
+          currentPhaseOfElement = 'solid'
         }
       }
+
+      const selectedPhaseOfElement = this.$store.state.selectedPhaseOfMatter
+      if (selectedPhaseOfElement) {
+        if (selectedPhaseOfElement === currentPhaseOfElement) {
+          switch (currentPhaseOfElement) {
+            case 'solid':
+              return 'element-searched purple'
+            case 'liquid':
+              return 'element-searched blue'
+            case 'gas':
+              return 'element-searched teal'
+            case 'unknown':
+              return 'element-searched orange'
+          }
+        }
+        return null
+      }
+
+      if (isTemperatureTriggered && this.element.number) {
+        switch (currentPhaseOfElement) {
+          case 'solid':
+            return 'element-searched purple'
+          case 'liquid':
+            return 'element-searched blue'
+          case 'gas':
+            return 'element-searched teal'
+          case 'unknown':
+            return 'element-searched orange'
+        }
+      }
+
       if (this.isFoundOnSearch || this.element.block === this.selectedBlock || this.selectedCategory === this.element.type || this.$store.getters.probableElements.includes(this.element.symbol)) {
         return `element-searched ${this.element.searchClass}`
       } else if (this.isFoundOnSearch === false) {
diff --git a/components/Slider.vue b/components/Slider.vue
index 335c153..986e9c9 100644
--- a/components/Slider.vue
+++ b/components/Slider.vue
@@ -14,26 +14,26 @@
       </div>
     </client-only>
     <div class="slider-box-wrapper">
-      <div>
-        <div class="slider-box purple">
+      <div @click="phaseFilter('solid')">
+        <div class="slider-box purple" name="solid" :class="{ gray: filterPhase('solid') }">
           <img width="18" height="16" src="~/assets/icons/solid.svg" />
         </div>
         <div class="title">Katı</div>
       </div>
-      <div style="margin-left: 30px">
-        <div class="slider-box blue">
+      <div style="margin-left: 30px" @click="phaseFilter('liquid')">
+        <div class="slider-box blue" name="liquid" :class="{ gray: filterPhase('liquid') }">
           <img width="20" height="19" src="~/assets/icons/liquid.svg" />
         </div>
         <div class="title">Sıvı</div>
       </div>
-      <div style="margin-left: 30px">
-        <div class="slider-box teal">
+      <div style="margin-left: 30px" @click="phaseFilter('gas')">
+        <div class="slider-box teal" name="gas" :class="{ gray: filterPhase('gas') }">
           <img width="20" height="16" src="~/assets/icons/gas.svg" />
         </div>
         <div class="title">Gaz</div>
       </div>
-      <div style="margin-left: 30px">
-        <div class="slider-box orange">
+      <div style="margin-left: 30px" @click="phaseFilter('unknown')">
+        <div class="slider-box orange" name="unkown" :class="{ gray: filterPhase('unknown') }">
           <img width="13" height="20" src="~/assets/icons/undefined.svg" />
         </div>
         <div class="title">Belirsiz</div>
@@ -71,6 +71,11 @@ export default {
         return -459
       }
     },
+    filterPhase() {
+      return (state) => {
+        return this.$store.state.selectedPhaseOfMatter !== state && this.$store.state.selectedPhaseOfMatter !== null
+      }
+    },
   },
   watch: {
     temperature() {
@@ -121,6 +126,12 @@ export default {
     triggerTimer() {
       this.$store.commit('DEACTIVATE_TEMPERATURE')
     },
+    phaseFilter(type) {
+      if (type === this.$store.state.selectedPhaseOfMatter) {
+        type = null
+      }
+      this.$store.commit('SET_PHASE_OF_MATTER', type)
+    },
   },
 }
 </script>
@@ -174,6 +185,7 @@ export default {
   margin-top: 23px;
   text-align: center;
   .slider-box {
+    cursor: pointer;
     width: 2.3vw;
     height: 2.3vw;
     border-radius: 4px;
@@ -199,6 +211,10 @@ export default {
     box-shadow: 0 2px 40px 0 rgba(255, 175, 128, 0.4);
     background-image: linear-gradient(135deg, #ffaf80, #ed954b 100%);
   }
+  .gray {
+    box-shadow: 0 2px 40px 0 rgba(55, 55, 55, 0.4) !important;
+    background-image: linear-gradient(135deg, #3a3a3a, #38322d 100%) !important;
+  }
   .title {
     font-size: 10px;
     color: $gray;
diff --git a/store/mutations.js b/store/mutations.js
index d157477..75bb426 100644
--- a/store/mutations.js
+++ b/store/mutations.js
@@ -42,4 +42,7 @@ export default {
   SET_IS_ORIENTED(state, isOriented) {
     state.isOriented = isOriented
   },
+  SET_PHASE_OF_MATTER(state, phaseOfMatter) {
+    state.selectedPhaseOfMatter = phaseOfMatter
+  },
 }
diff --git a/store/state.js b/store/state.js
index 9c3251a..1171e6b 100644
--- a/store/state.js
+++ b/store/state.js
@@ -14,4 +14,5 @@ export default () => ({
   searchText: null,
   isMobile: false,
   isOriented: false,
+  selectedPhaseOfMatter: null,
 })