From 4398cd249232d56a9ffef1eae2ba5c62b7641e79 Mon Sep 17 00:00:00 2001
From: Robert Kossessa <github@kosro.de>
Date: Sat, 3 Feb 2024 23:15:53 +0100
Subject: [PATCH] ADD: Device element selection

---
 src/components/device/DeviceKeys.vue    | 39 +++++++++++++++++--------
 src/components/device/DeviceLEDRing.vue |  2 +-
 src/components/device/DevicePreview.vue | 13 +++++++--
 3 files changed, 39 insertions(+), 15 deletions(-)

diff --git a/src/components/device/DeviceKeys.vue b/src/components/device/DeviceKeys.vue
index 5395f17..26ee387 100644
--- a/src/components/device/DeviceKeys.vue
+++ b/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>
\ No newline at end of file
diff --git a/src/components/device/DeviceLEDRing.vue b/src/components/device/DeviceLEDRing.vue
index b576d11..8983c21 100644
--- a/src/components/device/DeviceLEDRing.vue
+++ b/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)
diff --git a/src/components/device/DevicePreview.vue b/src/components/device/DevicePreview.vue
index 3e94a7c..28b3ac9 100644
--- a/src/components/device/DevicePreview.vue
+++ b/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)