From f4b7dafcee852f544e6bc779c43ced9d41b6a4a9 Mon Sep 17 00:00:00 2001
From: Mason Payne <mason@masonitestudios.com>
Date: Fri, 28 May 2021 14:06:28 -0600
Subject: [PATCH] add brush hair

---
 package.json         |   2 +
 public/svgs/comb.svg | 108 +++++++++++++++++++++++++++++++++++++++++++
 src/App.vue          |  41 ++++++++++++++--
 yarn.lock            |  10 ++++
 4 files changed, 157 insertions(+), 4 deletions(-)
 create mode 100644 public/svgs/comb.svg

diff --git a/package.json b/package.json
index e415050..cd20016 100644
--- a/package.json
+++ b/package.json
@@ -8,6 +8,8 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "@types/canvas-confetti": "^1.4.0",
+    "canvas-confetti": "^1.4.0",
     "core-js": "^3.6.5",
     "register-service-worker": "^1.7.1",
     "vue": "^2.6.11",
diff --git a/public/svgs/comb.svg b/public/svgs/comb.svg
new file mode 100644
index 0000000..c562d87
--- /dev/null
+++ b/public/svgs/comb.svg
@@ -0,0 +1,108 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 434.117 434.117" style="enable-background:new 0 0 434.117 434.117;" xml:space="preserve">
+<g>
+	<g>
+		<path stroke="white" fill="white" d="M373.448,72.636l-10.102,9.185c17.22,18.942-3.024,66.58-44.209,104.025c-20.89,18.985-44.061,32.785-65.246,38.861
+			c-19.261,5.524-34.756,3.797-42.513-4.739l-10.105,9.182c7.482,8.235,18.517,12.428,32.108,12.428
+			c7.39,0,15.536-1.241,24.274-3.746c23.159-6.642,48.256-21.516,70.666-41.882C376.592,152.061,396.413,97.896,373.448,72.636z"/>
+	</g>
+</g>
+<g>
+	<g>
+		<path stroke="white" fill="white" d="M196.028,275.258c-25.366,22.74-45.573,49.186-65.114,74.762c-10.194,13.339-19.821,25.941-29.904,37.707
+			c-16.42,18.79-31.753,28.387-45.568,28.523c-10.115,0.068-19.951-5.026-29.232-15.235c-9.281-10.209-13.448-20.487-12.389-30.546
+			c1.447-13.742,12.46-28.093,32.678-42.619c12.72-8.953,26.175-17.338,40.421-26.214c27.32-17.024,55.569-34.627,80.623-57.719
+			l-9.254-10.039c-24.11,22.222-51.806,39.48-78.59,56.17c-14.413,8.981-28.025,17.464-41.112,26.675
+			c-23.569,16.934-36.47,34.534-38.344,52.314c-1.485,14.099,3.852,27.947,15.865,41.161c11.889,13.078,25.018,19.707,39.03,19.707
+			c0.145,0,0.292-0.002,0.437-0.002c17.877-0.176,36.623-11.343,55.758-33.242c10.377-12.105,20.117-24.854,30.43-38.352
+			c19.159-25.074,38.97-51.002,63.379-72.885L196.028,275.258z"/>
+	</g>
+</g>
+<g>
+	<g>
+		<path stroke="white" fill="white" d="M211.311,219.87l-60.105-66.113c-2.536-2.789-6.854-2.993-9.643-0.457c-2.789,2.538-2.993,6.854-0.457,9.644
+			l60.104,66.111c1.347,1.481,3.197,2.234,5.053,2.234c1.638,0,3.282-0.585,4.589-1.775
+			C213.641,226.978,213.847,222.661,211.311,219.87z"/>
+	</g>
+</g>
+<g>
+	<g>
+		<path stroke="white" fill="white" d="M265.175,224.855l-99.685-109.66c-2.534-2.79-6.852-2.997-9.643-0.461c-2.79,2.534-2.997,6.852-0.461,9.643
+			l99.685,109.662c1.347,1.481,3.197,2.234,5.053,2.234c1.638,0,3.282-0.585,4.591-1.775
+			C267.507,231.962,267.711,227.646,265.175,224.855z"/>
+	</g>
+</g>
+<g>
+	<g>
+		<path stroke="white" fill="white" d="M299.15,207.961L185.537,82.978c-2.536-2.789-6.852-2.995-9.643-0.459c-2.789,2.534-2.995,6.852-0.459,9.643
+			l113.613,124.983c1.347,1.481,3.197,2.234,5.053,2.234c1.637,0,3.282-0.585,4.589-1.773
+			C301.48,215.069,301.686,210.751,299.15,207.961z"/>
+	</g>
+</g>
+<g>
+	<g>
+		<path stroke="white" fill="white" d="M326.16,183.411L210.62,56.314c-2.536-2.79-6.852-2.995-9.643-0.459c-2.79,2.538-2.995,6.854-0.459,9.644l115.538,127.095
+			c1.347,1.483,3.197,2.236,5.053,2.236c1.637,0,3.282-0.585,4.591-1.777C328.489,190.517,328.696,186.201,326.16,183.411z"/>
+	</g>
+</g>
+<g>
+	<g>
+		<path stroke="white" fill="white" d="M353.159,158.865L240.191,34.591c-2.536-2.79-6.852-2.995-9.643-0.459c-2.79,2.536-2.995,6.852-0.459,9.643
+			l112.966,124.273c1.347,1.483,3.197,2.236,5.053,2.236c1.638,0,3.282-0.587,4.589-1.775
+			C355.489,165.974,355.695,161.656,353.159,158.865z"/>
+	</g>
+</g>
+<g>
+	<g>
+		<path stroke="white" fill="white" d="M372.48,125.841L274.724,18.303c-2.534-2.79-6.852-2.997-9.643-0.461c-2.79,2.534-2.997,6.852-0.461,9.643l97.758,107.54
+			c1.347,1.481,3.197,2.234,5.053,2.234c1.638,0,3.282-0.587,4.589-1.775C374.812,132.948,375.016,128.632,372.48,125.841z"/>
+	</g>
+</g>
+<g>
+	<g>
+		<path stroke="white" fill="white" d="M373.357,72.566l-60.104-66.12c-2.534-2.79-6.852-2.997-9.643-0.461c-2.789,2.536-2.995,6.854-0.459,9.644l60.104,66.12
+			c1.347,1.481,3.197,2.234,5.053,2.234c1.638,0,3.284-0.585,4.589-1.773C375.687,79.674,375.894,75.357,373.357,72.566z"/>
+	</g>
+</g>
+<g>
+	<g>
+		<path stroke="white" fill="white" d="M416.465,46.258c-19.111-21.021-50.575-27.808-88.596-19.111l3.045,13.31c33.005-7.549,59.8-2.227,75.45,14.986
+			c15.193,16.708,18.219,43.025,8.523,74.103c-10.09,32.343-32.596,65.56-63.37,93.534c-62.57,56.88-139.773,74.226-172.097,38.67
+			c-15.942-17.545-18.403-46.488-6.753-79.413l-12.872-4.553c-13.38,37.813-9.911,71.765,9.521,93.15
+			c13.817,15.201,34.246,22.47,57.962,22.468c40.456-0.003,90.464-21.166,133.422-60.22c32.544-29.582,56.417-64.944,67.22-99.57
+			C439.117,97.719,435.048,66.697,416.465,46.258z"/>
+	</g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>
diff --git a/src/App.vue b/src/App.vue
index 4eb5b93..49dc894 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -4,25 +4,26 @@
       <span v-show="checklist.items.every(item => item.done)">
         <span class="checklist-winner fa fa-star"></span>
         <span class="checklist-winner fa fa-star"></span>
-        <span class="checklist-winner fa fa-star"></span>
       </span>
       <span class="checklist-name">{{checklist.name}}</span>
       <span v-show="checklist.items.every(item => item.done)">
         <span class="checklist-winner fa fa-star"></span>
         <span class="checklist-winner fa fa-star"></span>
-        <span class="checklist-winner fa fa-star"></span>
       </span>
-      <div v-for="item in checklist.items" :key="item.name" class="item-container" :class="{'item-done': item.done}" @click="item.done = !item.done">
+      <div v-for="item in checklist.items" :key="item.name" class="item-container" :class="{'item-done': item.done}" @click="item.done = !item.done; completeATask()">
 <!--        <span>{{item.done}}</span>-->
-        <span class="item-icon" :class="'fa fa-' + item.icon"></span>
+        <span v-if="!item.isSVG"><span class="item-icon" :class="'fa fa-' + item.icon"></span></span>
+        <span v-if="item.isSVG"><span class="item-icon svg-size"><img :src="svgs[item.icon]"/></span></span>
         <span class="item-grow">{{item.name}}</span>
       </div>
     </div>
+    <div class="attribution">Icons made by <a href="https://www.flaticon.com/authors/darius-dan" title="Darius Dan">Darius Dan</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a></div>
   </div>
 </template>
 
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator';
+import * as confetti from 'canvas-confetti';
 
 @Component({
   components: {
@@ -39,6 +40,12 @@ export default class App extends Vue {
           done: false,
           icon: "tooth"
         },
+        {
+          name: "Brush Hair",
+          done: false,
+          icon: "brush",
+          isSVG: true
+        },
         {
           name: "Floride",
           done: false,
@@ -64,6 +71,12 @@ export default class App extends Vue {
           done: false,
           icon: "tooth"
         },
+        {
+          name: "Brush Hair",
+          done: false,
+          icon: "brush",
+          isSVG: true
+        },
         {
           name: "Pajamas",
           done: false,
@@ -82,6 +95,14 @@ export default class App extends Vue {
       ]
     }
   ];
+
+  private svgs: {[key:string]: string} = {
+    'brush': '/svgs/comb.svg'
+  };
+
+  private completeATask() {
+    confetti.default()
+  }
 }
 
 interface Checklist {
@@ -93,6 +114,7 @@ interface ToDoItem {
   name: string;
   done: boolean;
   icon: string;
+  isSVG?: boolean;
 }
 </script>
 
@@ -155,6 +177,13 @@ interface ToDoItem {
 
   .item-icon {
     font-size: 48px;
+
+   &.svg-size {
+       img {
+          height: 48px;
+          width: 48px;
+       }
+     }
   }
 
   .item-grow {
@@ -162,4 +191,8 @@ interface ToDoItem {
   }
 }
 
+.attribution {
+  display: none;
+}
+
 </style>
diff --git a/yarn.lock b/yarn.lock
index 7b999fc..59ef2ed 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -969,6 +969,11 @@
     "@types/connect" "*"
     "@types/node" "*"
 
+"@types/canvas-confetti@^1.4.0":
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/@types/canvas-confetti/-/canvas-confetti-1.4.0.tgz#22127a1a9ed9d456e626d6e2b9a4d3b0a240e18b"
+  integrity sha512-Neq4mvVecrHmTdyo98EY5bnKCjkZGQ6Ma7VyOrxIcMHEZPmt4kfquccqfBMrpNrdryMHgk3oGQi7XtpZacltnw==
+
 "@types/connect-history-api-fallback@*":
   version "1.3.4"
   resolved "https://registry.yarnpkg.com/@types/connect-history-api-fallback/-/connect-history-api-fallback-1.3.4.tgz#8c0f0e6e5d8252b699f5a662f51bdf82fd9d8bb8"
@@ -2464,6 +2469,11 @@ caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001109, caniuse-lite@^1.0.30001181:
   resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001205.tgz#d79bf6a6fb13196b4bb46e5143a22ca0242e0ef8"
   integrity sha512-TL1GrS5V6LElbitPazidkBMD9sa448bQDDLrumDqaggmKFcuU2JW1wTOHJPukAcOMtEmLcmDJEzfRrf+GjM0Og==
 
+canvas-confetti@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/canvas-confetti/-/canvas-confetti-1.4.0.tgz#840f6db4a566f8f32abe28c00dcd82acf39c92bd"
+  integrity sha512-S18o4Y9PqI/uabdlT/jI3MY7XBJjNxnfapFIkjkMwpz6qNxLFZOm2b22OMf4ZYDL9lpNWI+Ih4fEMVPwO1KHFQ==
+
 case-sensitive-paths-webpack-plugin@^2.3.0:
   version "2.4.0"
   resolved "https://registry.yarnpkg.com/case-sensitive-paths-webpack-plugin/-/case-sensitive-paths-webpack-plugin-2.4.0.tgz#db64066c6422eed2e08cc14b986ca43796dbc6d4"