Add controls with shuffle and reset buttons

components/Controls.vue

@@ -0,0 +1,120 @@
+<template>
+  <div class="wrapper" :class="{ open }">
+    <div class="tab" :class="{ open }" @click="toggle">
+      <svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
+        <path
+          d="M256 217.9L383 345c9.4 9.4 24.6 9.4 33.9 0 9.4-9.4 9.3-24.6 0-34L273 167c-9.1-9.1-23.7-9.3-33.1-.7L95 310.9c-4.7 4.7-7 10.9-7 17s2.3 12.3 7 17c9.4 9.4 24.6 9.4 33.9 0l127.1-127z"
+        ></path>
+      </svg>
+    </div>
+
+    <div class="controls">
+      <div class="order">
+        <svg
+          class="shuffle"
+          @click="$emit('shuffle')"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 512 512"
+        >
+          <path
+            d="M222.2 188.1L97.8 64 64 97.8l124.1 124.1 34.1-33.8zM316 64l49 49L64 414.2 97.8 448 399 147l49 49V64H316zm7.9 225.8l-33.8 33.8 75.1 75.1L316 448h132V316l-49 49-75.1-75.2z"
+          ></path>
+        </svg>
+
+        <svg
+          class="reset"
+          @click="$emit('reset')"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 512 512"
+        >
+          <path
+            d="M256 388c-72.597 0-132-59.405-132-132 0-72.601 59.403-132 132-132 36.3 0 69.299 15.4 92.406 39.601L278 234h154V80l-51.698 51.702C348.406 99.798 304.406 80 256 80c-96.797 0-176 79.203-176 176s78.094 176 176 176c81.045 0 148.287-54.134 169.401-128H378.85c-18.745 49.561-67.138 84-122.85 84z"
+          ></path>
+        </svg>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return { open: false };
+  },
+  methods: {
+    toggle() {
+      this.open = !this.open;
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.wrapper {
+  z-index: 99;
+  position: fixed;
+  bottom: 0.75em;
+  left: 50%;
+  transform: translate(-50%, 4.5em);
+  display: flex;
+  flex-flow: column nowrap;
+  align-items: center;
+  transition: transform 0.25s ease-in-out;
+
+  &.open {
+    transform: translate(-50%, 0);
+  }
+}
+
+.tab {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 1em;
+  background-color: hsl(237, 37%, 24%);
+  border-top-left-radius: 10px;
+  border-top-right-radius: 10px;
+
+  &:hover {
+    cursor: pointer;
+  }
+
+  &.open svg {
+    transform: rotate(180deg);
+  }
+
+  svg {
+    transition: transform 0.25s ease-in-out;
+    fill: hsla(0, 0%, 100%, 0.5);
+    width: 2em;
+  }
+}
+
+.controls {
+  display: flex;
+  flex-flow: row wrap;
+  align-items: center;
+  padding: 1em 1.5em;
+  background-color: hsl(237, 37%, 24%);
+  border-radius: 10px;
+
+  svg {
+    fill: hsla(0, 0%, 100%, 0.5);
+    width: 1.75em;
+
+    &:hover {
+      cursor: pointer;
+    }
+  }
+}
+
+.order {
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: center;
+
+  .reset {
+    margin-left: 0.5em;
+  }
+}
+</style>

pages/index.vue

@@ -6,6 +6,7 @@
     <CarbonAd/>
     <Effects :effects="effects" @inspect="inspect"/>
     <Inspect v-if="inspecting" :src="inspectSrc" @close="closeInspect"/>
+    <Controls @shuffle="shuffle" @reset="reset"/>
   </div>
 </template>
 
@@ -15,10 +16,12 @@ import Header from "~/components/Header";
 import CarbonAd from "~/components/CarbonAd";
 import Effects from "~/components/Effects";
 import Inspect from "~/components/Inspect";
+import Controls from "~/components/Controls";
 import { effects } from "~/assets/effects.js";
+import { shuffleEffects } from "~/assets/utils.js";
 
 export default {
-  components: { Navbar, Header, CarbonAd, Effects, Inspect },
+  components: { Navbar, Header, CarbonAd, Effects, Inspect, Controls },
   data() {
     return { effects, inspecting: false, inspectSrc: {} };
   },
@@ -31,6 +34,12 @@ export default {
     closeInspect() {
       this.inspecting = false;
       this.inspectSrc = {};
+    },
+    shuffle() {
+      this.effects = shuffleEffects(this.effects);
+    },
+    reset() {
+      this.effects = effects;
     }
   }
 };