Fix effect clicking

All effects except inputs can now be clicked

components/BaseEffect.vue

@@ -1,9 +1,24 @@
 <template>
-  <div class="box" v-on:click.self="$emit('inspect')">
+  <div class="box" ref="box" v-on:click="inspect">
     <slot></slot>
   </div>
 </template>
 
+<script>
+export default {
+  props: ["type"],
+  methods: {
+    inspect(e) {
+      const self = this.$refs.box === e.target;
+      // don't accept clicks on an input
+      if (this.type === "input" && !self) return;
+      this.$emit("inspect");
+    }
+  }
+};
+</script>
+
+
 <style lang="scss" scoped>
 .box {
   display: flex;

components/EffectGrid.vue

@@ -3,11 +3,12 @@
     <Controls v-on:shuffle="shuffle" v-on:reset="reset" v-on:filter="filter"/>
     <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)"
+        v-for="effect in Object.entries(this.effects)"
+        v-bind:key="effect[0]"
+        v-on:inspect="$emit('inspect', effect[0])"
+        v-bind:type="effect[1].type"
       >
-        <component v-bind:is="effectName"></component>
+        <component v-bind:is="effect[0]"></component>
       </BaseEffect>
     </transition-group>
   </div>