ADD: Device element selection

src/components/device/DeviceKeys.vue

@@ -1,23 +1,38 @@
 <template>
   <div class="flex">
     <div
-      v-for="(key, index) in keys" :key="key" class="aspect-square flex-1 rounded-[2px] flex items-center justify-center"
-      :style="`box-shadow: 0 0 20px 0 hsl(${-hue + index * 20},100%,50%)`">
-      <div class="font-heading text-2xl text-black opacity-30">{{ key}}</div>
+      v-for="(color, key) in keys"
+      :key="key" :class="{'outline outline-white ' : key === selected,
+      'hover:outline outline-zinc-400' : key !== selected}"
+      class="aspect-square flex-1 rounded-[2px] flex items-center justify-center"
+      :style="`box-shadow: 0 0 20px 0 ${color.hex()}`"
+      @click="$emit('select', key)">
+      <div
+        class="font-heading text-2xl"
+        :class="{'opacity-30 text-black': key!==selected}">{{ key }}
+      </div>
     </div>
   </div>
 </template>
 
 <script setup>
+import Color from 'color'
 
-import { onMounted, ref } from 'vue'
-import gsap from 'gsap'
-
-const keys = ref(['a', 'b', 'c', 'd'])
-
-const hue = ref(0)
-
-onMounted(() => {
-  gsap.to(hue, { duration: 10, value: 360, repeat: -1, ease: 'none' })
+defineProps({
+  keys: {
+    type: Object,
+    default: () => ({
+      a: Color.hsl(265, 100, 50),
+      b: Color.hsl(280, 100, 50),
+      c: Color.hsl(300, 100, 50),
+      d: Color.hsl(330, 100, 50),
+    }),
+  },
+  selected: {
+    type: String,
+    default: 'a',
+  },
 })
+
+defineEmits(['select'])
 </script>

src/components/device/DeviceLEDRing.vue

@@ -28,7 +28,7 @@ const props = defineProps({
   },
 })
 
-const leds = ref(new Array(60).fill(Color()))
+const leds = ref(Array(60).fill(Color()))
 
 const radius = ref(100)
 const ledRadius = ref(3)

src/components/device/DevicePreview.vue

@@ -24,7 +24,14 @@
         </span>
         </div>
       </div>
-      <DeviceKeys class="absolute w-[72.7%] top-[77.2%] gap-[2.8%] left-0 right-0 mx-auto" />
+      <div
+        class="rounded-full outline-2 absolute h-[41.5%] top-[24.5%] aspect-square left-0 right-0 mx-auto"
+        :class="{'outline outline-white': selected==='ring',
+        'hover:outline outline-zinc-400': selected!=='ring'}"
+        @click="selected='ring'" />
+      <DeviceKeys
+        :selected="selected" class="absolute w-[72.7%] top-[77.2%] gap-[2.8%] left-0 right-0 mx-auto"
+        @select="args => selected=args" />
     </div>
   </div>
 </template>
@@ -34,11 +41,13 @@ import LogoMidi from '@/assets/logos/logoMidi.svg'
 import DeviceBar from '@/components/device/DeviceBar.vue'
 import { useStore } from '@/store'
 import ScrambleText from '@/components/effects/ScrambleText.vue'
-import { computed, onMounted, onUnmounted, ref } from 'vue'
+import { computed, onMounted, ref } from 'vue'
 import DeviceLEDRing from '@/components/device/DeviceLEDRing.vue'
 import gsap from 'gsap'
 import DeviceKeys from '@/components/device/DeviceKeys.vue'
 
+const selected = ref('a')
+
 const value = ref(69)
 
 const barValue = computed(() => value.value / 127 * 100)