From 1df3eb3d5e1f73bf55de965b8d84eaec69bd69eb Mon Sep 17 00:00:00 2001
From: spekulaas <ryan@aterve.nl>
Date: Fri, 7 Jan 2022 15:06:31 +0100
Subject: [PATCH] added value pop animation

---
 .../src/app/valuesAlign/valuesAlign.page.html | 30 +++++++++++++++----
 .../src/app/valuesAlign/valuesAlign.page.scss | 24 +++++++++++++++
 2 files changed, 49 insertions(+), 5 deletions(-)

diff --git a/AuthentesApp/src/app/valuesAlign/valuesAlign.page.html b/AuthentesApp/src/app/valuesAlign/valuesAlign.page.html
index 798a354..6633696 100644
--- a/AuthentesApp/src/app/valuesAlign/valuesAlign.page.html
+++ b/AuthentesApp/src/app/valuesAlign/valuesAlign.page.html
@@ -17,7 +17,27 @@
 
     <ion-item *ngFor="let card of this.game.cardset;">
       <ion-avatar slot="start">
-        <img src="./avatar-finn.png" />
+        <div class="card-value">
+          <!-- add and remove class in ts for the svg images -->
+          
+          <div #heart >
+            <svg class="draw-value" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+              <svg:path
+                d="M349.6 64c-36.4 0-70.7 16.7-93.6 43.9C233.1 80.7 198.8 64 162.4 64 97.9 64 48 114.2 48 179.1c0 79.5 70.7 143.3 177.8 241.7L256 448l30.2-27.2C393.3 322.4 464 258.6 464 179.1 464 114.2 414.1 64 349.6 64zm-80.8 329.3l-4.2 3.9-8.6 7.8-8.6-7.8-4.2-3.9c-50.4-46.3-94-86.3-122.7-122-28-34.7-40.4-63.1-40.4-92.2 0-22.9 8.4-43.9 23.7-59.3 15.2-15.4 36-23.8 58.6-23.8 26.1 0 52 12.2 69.1 32.5l24.5 29.1 24.5-29.1c17.1-20.4 43-32.5 69.1-32.5 22.6 0 43.4 8.4 58.7 23.8 15.3 15.4 23.7 36.5 23.7 59.3 0 29-12.5 57.5-40.4 92.2-28.8 35.7-72.3 75.7-122.8 122z"
+                fill="var(--ion-color-primary)" />
+            </svg>
+          </div>
+
+          <div #cross >
+            <svg class="draw-value" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+              <svg:path
+                d="M405 136.798L375.202 107 256 226.202 136.798 107 107 136.798 226.202 256 107 375.202 136.798 405 256 285.798 375.202 405 405 375.202 285.798 256z"
+                fill="#CDD6DD" />
+            </svg>
+          </div>
+  
+
+        </div>
       </ion-avatar>
       <ion-label>
         <h2>{{ card.title }}</h2>
@@ -25,16 +45,16 @@
 
       <div class="values-buttons">
 
-        <button (click)="userClickedButton($event, false)">
-          <svg width="30px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+        <button (click)="userClickedButton($event, card.id, false)">
+          <svg width="28px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
             <svg:path
               d="M405 136.798L375.202 107 256 226.202 136.798 107 107 136.798 226.202 256 107 375.202 136.798 405 256 285.798 375.202 405 405 375.202 285.798 256z"
               fill="#CDD6DD" />
           </svg>
         </button>
 
-        <button (click)="userClickedButton($event, true)">
-          <svg width="30px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+        <button (click)='userClickedButton($event, card, true)'>
+          <svg width="28px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
             <svg:path
               d="M349.6 64c-36.4 0-70.7 16.7-93.6 43.9C233.1 80.7 198.8 64 162.4 64 97.9 64 48 114.2 48 179.1c0 79.5 70.7 143.3 177.8 241.7L256 448l30.2-27.2C393.3 322.4 464 258.6 464 179.1 464 114.2 414.1 64 349.6 64zm-80.8 329.3l-4.2 3.9-8.6 7.8-8.6-7.8-4.2-3.9c-50.4-46.3-94-86.3-122.7-122-28-34.7-40.4-63.1-40.4-92.2 0-22.9 8.4-43.9 23.7-59.3 15.2-15.4 36-23.8 58.6-23.8 26.1 0 52 12.2 69.1 32.5l24.5 29.1 24.5-29.1c17.1-20.4 43-32.5 69.1-32.5 22.6 0 43.4 8.4 58.7 23.8 15.3 15.4 23.7 36.5 23.7 59.3 0 29-12.5 57.5-40.4 92.2-28.8 35.7-72.3 75.7-122.8 122z"
               fill="var(--ion-color-primary)" />
diff --git a/AuthentesApp/src/app/valuesAlign/valuesAlign.page.scss b/AuthentesApp/src/app/valuesAlign/valuesAlign.page.scss
index 98860e6..910f6e6 100644
--- a/AuthentesApp/src/app/valuesAlign/valuesAlign.page.scss
+++ b/AuthentesApp/src/app/valuesAlign/valuesAlign.page.scss
@@ -7,6 +7,30 @@
   transform: translateY(-50%);
 }
 
+.card-value {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  border: 1px solid black;
+  display: inline-block;
+  padding: 6px 5px;
+}
+
+.draw-value {
+  width: 28px;
+  animation: a 1s ease-in-out;
+}
+
+@keyframes a {
+  50% {
+    width: 40px;
+    margin: -5px;
+  }
+}
+.values-buttons button:active {
+  background: rgb(199, 199, 199);
+}
+
 .values-buttons button {
   border-radius: 50%;
   // line-height: 50px;