add manual trigger for fireworks

laurensV · Feb 4, 2021 · adf4fcb · adf4fcb
1 parent 5edf576
commit adf4fcb
Show file tree

Hide file tree

Showing 5 changed files with 78 additions and 41 deletions.
diff --git a/assets/img/icons/fireworks.svg b/assets/img/icons/fireworks.svg
diff --git a/assets/scss/global.scss b/assets/scss/global.scss
@@ -0,0 +1,40 @@
+img {
+  max-width: 100%;
+}
+
+h1 {
+  font-size: 80px;
+}
+h2 {
+  font-size: 45px;
+}
+
+.icon {
+  width: 32px;
+  height: auto;
+  &.icon-16 {
+    width: 16px;
+  }
+  &.icon-32 {
+    width: 32px;
+  }
+  &.icon-64 {
+    width: 64px;
+  }
+  &.icon-128 {
+    width: 128px;
+  }
+}
+#content {
+  color: $primary-boy;
+  padding: 50px 5px;
+  animation: fadein 1s;
+  text-align: center;
+}
+
+@keyframes fadein {
+  from { opacity: 0; }
+  to   { opacity: 1; }
+}
+
+
diff --git a/components/Fireworks.vue b/components/Fireworks.vue
@@ -144,6 +144,8 @@
     }
   }
 
+let requestId = null;
+
 export default {
   data () {
     return {
@@ -163,7 +165,7 @@ export default {
     document.ontouchstart = evt => birthday.onClick(evt)
 
     ;(function loop(){
-      requestAnimationFrame(loop)
+      requestId = requestAnimationFrame(loop)
 
       let now = timestamp()
       let delta = now - then
@@ -174,6 +176,10 @@ export default {
   },
 
   beforeDestroy () {
+    if (requestId) {
+      window.cancelAnimationFrame(requestId);
+      requestId = undefined;
+    }
   },
 }
 </script>

diff --git a/pages/girl.vue b/pages/girl.vue
@@ -1,11 +1,11 @@
 <template>
   <div>
-    <dots :theme="'girl'" />
-    <fireworks v-if="birthday" />
+    <fireworks v-if="birthday || fireworks" />
+    <dots v-else :theme="'girl'" />
     <div class="container" id="content">
-      <img :src="require('@/assets/img/flamingo.png')" class="main-picture" />
+      <img :src="require('@/assets/img/flamingo.png')" width="150px" />
       <h1 class="name">{{name}}</h1>
-      <div class="congrats" v-if="birthday">Congratulations!</div>
+      <div class="congrats" v-if="birthday || fireworks">Congratulations!</div>
       <div class="age" v-if="age">
         <h2 class="years" v-if="age.years > 0">{{age.years}}&nbsp; year<span v-if="age.years > 1">s</span></h2>
         <div>
@@ -18,6 +18,7 @@
           {{age.hours}}h:{{age.minutes}}m:{{age.seconds}}s
         </small>
       </div>
+      <img class="icon trigger-fireworks" @click="fireworks = !fireworks" src="~/assets/img/icons/fireworks.svg" />
       <nuxt-link to="/" class="sibling">Boy Version</nuxt-link>
     </div>
   </div>
@@ -48,7 +49,8 @@ export default {
     return {
       name: name,
       dateOfBirth: this.$moment(dateOfBirth),
-      timer: null
+      timer: null,
+      fireworks: false
     }
   },
   computed: {
@@ -93,14 +95,6 @@ export default {
 <style lang="scss" scoped>
   #content {
     color: $primary-girl;
-    padding: 50px 5px;
-    animation: fadein 1s;
-    text-align: center;
-  }
-
-  .main-picture {
-    width: 150px;
-    max-width: 100%;
   }
 
   .sibling {
@@ -114,19 +108,21 @@ export default {
 
   .name {
     margin-top: 5px;
-    font-size: 80px;
   }
   .age {
     font-size: 30px;
   }
+  .trigger-fireworks {
+    position: fixed;
+    bottom:5px;
+    left:5px;
+    padding: 3px;
+    cursor: pointer;
+  }
   .congrats {
     font-size: 50px;
     margin: 0;
     padding: 0;
-    color: #de4e4e;
-  }
-  @keyframes fadein {
-    from { opacity: 0; }
-    to   { opacity: 1; }
+    color: red;
   }
 </style>
diff --git a/pages/index.vue b/pages/index.vue
@@ -1,11 +1,11 @@
 <template>
   <div>
-    <dots />
-    <fireworks v-if="birthday" />
+    <fireworks v-if="birthday || fireworks" />
+    <dots v-else :theme="'boy'" />
     <div class="container" id="content">
-      <img :src="require('@/assets/img/elephant.png')" class="main-picture" />
+      <img :src="require('@/assets/img/elephant.png')" width="250px" />
       <h1 class="name">{{name}}</h1>
-      <div class="congrats" v-if="birthday">Congratulations!</div>
+      <div class="congrats" v-if="birthday || fireworks">Congratulations!</div>
       <div class="age" v-if="age">
         <h2 class="years" v-if="age.years > 0">{{age.years}}&nbsp; year<span v-if="age.years > 1">s</span></h2>
         <div>
@@ -18,6 +18,7 @@
           {{age.hours}}h:{{age.minutes}}m:{{age.seconds}}s
         </small>
       </div>
+      <img class="icon trigger-fireworks" @click="fireworks = !fireworks" src="~/assets/img/icons/fireworks.svg" />
       <nuxt-link to="/girl" class="sibling">Girl Version</nuxt-link>
     </div>
   </div>
@@ -48,7 +49,8 @@ export default {
     return {
       name: name,
       dateOfBirth: this.$moment(dateOfBirth),
-      timer: null
+      timer: null,
+      fireworks: false
     }
   },
   computed: {
@@ -93,14 +95,6 @@ export default {
 <style lang="scss" scoped>
   #content {
     color: $primary-boy;
-    padding: 50px 5px;
-    animation: fadein 1s;
-    text-align: center;
-  }
-
-  .main-picture {
-    width: 250px;
-    max-width: 100%;
   }
 
   .sibling {
@@ -112,20 +106,20 @@ export default {
     padding: 3px;
   }
 
-  .name {
-    font-size: 80px;
-  }
   .age {
     font-size: 30px;
   }
+  .trigger-fireworks {
+    position: fixed;
+    bottom:5px;
+    left:5px;
+    padding: 3px;
+    cursor: pointer;
+  }
   .congrats {
     font-size: 50px;
     margin: 0;
     padding: 0;
-    color: #de4e4e;
-  }
-  @keyframes fadein {
-    from { opacity: 0; }
-    to   { opacity: 1; }
+    color: red;
   }
 </style>