Add shuffle and reset controls

WidgetA · Apr 27, 2019 · 3940658 · 3940658
1 parent 62b8788
commit 3940658
Show file tree

Hide file tree

Showing 2 changed files with 103 additions and 14 deletions.
diff --git a/components/Controls.vue b/components/Controls.vue
@@ -0,0 +1,69 @@
+<template>
+  <div>
+    <button class="shuffle" v-on:click="$emit('shuffle')">
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+        <path
+          d="M405.9 288.1c-2.6-2.6-6.2-4.1-9.9-4.1s-7.2 1.4-9.9 4.1c-2.7 2.6-4.1 6.2-4.1 9.9s1.5 7.2 4.1 9.9l16.3 16.2h-75.5l-124-155-.1-.1c-2.6-3.1-6.7-5-10.8-5H78c-7.7 0-14 6.3-14 14s6.3 14 14 14h107.4l52.5 66-52.5 66H78c-7.7 0-14 6.3-14 14s6.3 14 14 14h114c4.1 0 8-1.8 10.7-5l.1-.1 53.2-66.8 53.2 66.8.1.1c2.7 3.2 6.6 5 10.7 5h84.4l-16.3 16.2c-2.7 2.6-4.1 6.1-4.1 9.9 0 3.7 1.5 7.2 4.1 9.9 2.6 2.6 6.2 4.1 9.9 4.1s7.2-1.4 9.9-4.1l33.6-33.4c4.2-4.1 6.5-9.6 6.5-15.5s-2.3-11.4-6.5-15.5l-35.6-35.5z"
+        ></path>
+        <path
+          d="M279.4 235.4c1.1 1.4 2.8 2.1 4.6 2.1h.1c1.8 0 3.5-.8 4.6-2.2l37.9-47.3h75.8l-16.3 16.2c-2.7 2.6-4.1 6.1-4.1 9.9 0 3.7 1.5 7.2 4.1 9.9 2.6 2.6 6.2 4.1 9.9 4.1s7.2-1.4 9.9-4.1l35.6-35.4c4.2-4.1 6.5-9.7 6.5-15.5 0-5.9-2.3-11.4-6.5-15.5l-33.6-33.4c-2.6-2.6-6.2-4.1-9.9-4.1s-7.2 1.4-9.9 4.1c-2.7 2.6-4.1 6.2-4.1 9.9s1.5 7.2 4.1 9.9l16.3 16.2H320c-4.1 0-8 1.8-10.7 5l-.1.1-40.3 50.2c-1.8 2.2-1.8 5.4.1 7.6l10.4 12.3z"
+        ></path>
+      </svg>
+      Shuffle
+    </button>
+
+    <button class="reset" v-on:click="$emit('reset')">
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+        <path
+          d="M433 288.8c-7.7 0-14.3 5.9-14.9 13.6-6.9 83.1-76.8 147.9-161.8 147.9-89.5 0-162.4-72.4-162.4-161.4 0-87.6 70.6-159.2 158.2-161.4 2.3-.1 4.1 1.7 4.1 4v50.3c0 12.6 13.9 20.2 24.6 13.5L377 128c10-6.3 10-20.8 0-27.1l-96.1-66.4c-10.7-6.7-24.6.9-24.6 13.5v45.7c0 2.2-1.7 4-3.9 4C148 99.8 64 184.6 64 288.9 64 394.5 150.1 480 256.3 480c100.8 0 183.4-76.7 191.6-175.1.8-8.7-6.2-16.1-14.9-16.1z"
+        ></path>
+      </svg>
+      Reset
+    </button>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+div {
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: center;
+  justify-content: center;
+  margin: 1em 0;
+}
+
+button {
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: center;
+  background: none;
+  outline: none;
+  border: none;
+  color: hsla(0, 0%, 100%, 0.7);
+  font-size: 0.9em;
+  font-family: inherit;
+  padding: 0.5em 1em;
+  transition: color 0.25s ease-in-out;
+
+  svg {
+    display: inline-block;
+    width: 1.5em;
+    fill: hsla(0, 0%, 100%, 0.7);
+    margin-right: 0.5em;
+    transition: fill 0.3s ease-in-out;
+  }
+
+  &:hover {
+    cursor: pointer;
+    color: white;
+
+    svg {
+      fill: white;
+    }
+  }
+}
+
+.reset {
+  margin-left: 2em;
+}
+</style>
diff --git a/components/EffectGrid.vue b/components/EffectGrid.vue
@@ -1,44 +1,64 @@
 <template>
-  <div class="grid">
-    <BaseEffect
-      v-for="effectName in Object.keys(this.effects)"
-      v-bind:key="effectName"
-      v-on:inspect="$emit('inspect', effectName)"
-    >
-      <component v-bind:is="effectName"></component>
-    </BaseEffect>
+  <div class="container">
+    <Controls v-on:shuffle="shuffle" v-on:reset="reset"/>
+    <transition-group class="grid" name="shuffle" tag="div">
+      <BaseEffect
+        v-for="effectName in Object.keys(this.effects)"
+        v-bind:key="effectName"
+        v-on:inspect="$emit('inspect', effectName)"
+      >
+        <component v-bind:is="effectName"></component>
+      </BaseEffect>
+    </transition-group>
   </div>
 </template>
 
 <script>
 import BaseEffect from "~/components/BaseEffect";
-import { effects, components } from "~/assets/effects.js";
+import Controls from "~/components/Controls";
+import { effects, components, shuffleEffects } from "~/assets/effects.js";
 
 export default {
-  components: { BaseEffect, ...components },
+  components: { BaseEffect, Controls, ...components },
   data() {
     return {
       effects
     };
+  },
+  methods: {
+    shuffle() {
+      this.effects = shuffleEffects();
+    },
+    reset() {
+      this.effects = effects;
+    }
   }
 };
 </script>
 
 <style lang="scss" scoped>
+.container {
+  padding-bottom: 5em;
+}
+
 .grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   grid-column-gap: 1em;
   grid-row-gap: 2em;
   grid-auto-rows: 6em;
   margin: 0 auto;
-  padding: 2em 1em 5em 1em;
+  padding: 0 1em 0 1em;
+}
+
+.shuffle-move {
+  transition: transform 0.75s ease-out;
 }
 
 @media (min-width: "640px") {
   .grid {
     max-width: 640px;
-    padding: 2em 1.5em 5em 1.5em;
+    padding: 0 1.5em 0 1.5em;
     grid-template-columns: repeat(3, 1fr);
     grid-auto-rows: 8em;
     grid-column-gap: 1.5em;
@@ -56,15 +76,15 @@ export default {
 @media (min-width: "1024px") {
   .grid {
     max-width: 1024px;
-    padding: 2em 2em 5em 2em;
+    padding: 0 2em 0 2em;
     grid-template-columns: repeat(5, 1fr);
   }
 }
 
 @media (min-width: "1280px") {
   .grid {
     max-width: 1280px;
-    padding: 2em 3em 5em 3em;
+    padding: 0 3em 0 3em;
     grid-template-columns: repeat(6, 1fr);
   }
 }