From f47f39a53a7468a20d1b14f14fd590052f0499c8 Mon Sep 17 00:00:00 2001
From: Robert Kossessa <github@kosro.de>
Date: Wed, 7 Feb 2024 21:23:38 +0100
Subject: [PATCH] ADD: Zero/One skin select

---
 .../icons/{bin_emblem.svg => binarisEmblem.svg}  |   0
 ...one_t_bg.png => renderNanoOneTransparent.png} | Bin
 ...ro_t_bg.png => renderNanoZeroTransparent.png} | Bin
 src/assets/images/{splash@2.png => splashBG.png} | Bin
 src/assets/{icons => old}/xl-bg-ico.svg          |   0
 src/components/device/DevicePreview.vue          |  15 ++++++++++++---
 src/components/navbar/Navbar.vue                 |   9 +++++++++
 src/components/old/DevicePreviewOld.vue          |   4 ++--
 src/store.js                                     |   4 ++++
 9 files changed, 27 insertions(+), 5 deletions(-)
 rename src/assets/icons/{bin_emblem.svg => binarisEmblem.svg} (100%)
 rename src/assets/images/{one_t_bg.png => renderNanoOneTransparent.png} (100%)
 rename src/assets/images/{zero_t_bg.png => renderNanoZeroTransparent.png} (100%)
 rename src/assets/images/{splash@2.png => splashBG.png} (100%)
 rename src/assets/{icons => old}/xl-bg-ico.svg (100%)

diff --git a/src/assets/icons/bin_emblem.svg b/src/assets/icons/binarisEmblem.svg
similarity index 100%
rename from src/assets/icons/bin_emblem.svg
rename to src/assets/icons/binarisEmblem.svg
diff --git a/src/assets/images/one_t_bg.png b/src/assets/images/renderNanoOneTransparent.png
similarity index 100%
rename from src/assets/images/one_t_bg.png
rename to src/assets/images/renderNanoOneTransparent.png
diff --git a/src/assets/images/zero_t_bg.png b/src/assets/images/renderNanoZeroTransparent.png
similarity index 100%
rename from src/assets/images/zero_t_bg.png
rename to src/assets/images/renderNanoZeroTransparent.png
diff --git a/src/assets/images/splash@2.png b/src/assets/images/splashBG.png
similarity index 100%
rename from src/assets/images/splash@2.png
rename to src/assets/images/splashBG.png
diff --git a/src/assets/icons/xl-bg-ico.svg b/src/assets/old/xl-bg-ico.svg
similarity index 100%
rename from src/assets/icons/xl-bg-ico.svg
rename to src/assets/old/xl-bg-ico.svg
diff --git a/src/components/device/DevicePreview.vue b/src/components/device/DevicePreview.vue
index 50dfb03..46e8b69 100644
--- a/src/components/device/DevicePreview.vue
+++ b/src/components/device/DevicePreview.vue
@@ -2,7 +2,8 @@
   <div class="aspect-[800/1100]">
     <div
       class="bg-contain bg-top bg-no-repeat h-full w-full relative"
-      :style="{backgroundImage: `linear-gradient(to bottom, black, rgba(0,0,0,0.2) 12%, rgba(0,0,0,0.3) 95%, black), url(${RenderNano})`}">
+      :style="{backgroundImage: `linear-gradient(to bottom, black, rgba(0,0,0,0.25) 12%, rgba(0,0,0,0.35) 95%, black), url(${previewDeviceImage})`,
+      backgroundBlendMode: 'multiply'}">
       <Transition name="fade">
         <div v-if="store.connected" class="px-10 h-12 flex justify-between items-center">
           <h2>
@@ -56,7 +57,7 @@
       <Transition name="fade-delayed">
         <DeviceKeys
           v-if="store.connected"
-          class="absolute w-[72.7%] top-[77.2%] gap-[2.8%] left-0 right-0 mx-auto"
+          class="absolute w-[72.7%] top-[77.5%] gap-[2.2%] left-0 right-0 mx-auto"
           :selected="store.selectedFeature === 'key' ? store.selectedKey : ''"
           @select="store.selectKey" />
       </Transition>
@@ -64,7 +65,8 @@
   </div>
 </template>
 <script setup>
-import RenderNano from '@/assets/images/renderNano.png'
+import RenderNanoOne from '@/assets/images/renderNanoOneTransparent.png'
+import RenderNanoZero from '@/assets/images/renderNanoZeroTransparent.png'
 import LogoMidi from '@/assets/logos/logoMidi.svg'
 import DeviceBar from '@/components/device/DeviceBar.vue'
 import { useStore } from '@/store'
@@ -80,6 +82,13 @@ const barValue = computed(() => value.value / 127 * 100)
 
 const store = useStore()
 
+const previewDeviceImages = {
+  nanoOne: RenderNanoOne,
+  nanoZero: RenderNanoZero,
+}
+
+const previewDeviceImage = computed(() => previewDeviceImages[store.previewDeviceModel || 'nanoOne'])
+
 const targetValue = ref(69)
 const animateValue = () => {
   targetValue.value = Math.floor(Math.random() * 127)
diff --git a/src/components/navbar/Navbar.vue b/src/components/navbar/Navbar.vue
index 095a2cc..9181fbe 100644
--- a/src/components/navbar/Navbar.vue
+++ b/src/components/navbar/Navbar.vue
@@ -43,6 +43,10 @@
               <MenubarShortcut>⌘N</MenubarShortcut>
             </MenubarItem>
             <MenubarSeparator />
+            <MenubarItem @click="store.switchPreviewDeviceModel">
+              Skin: {{ previewDeviceNames[store.previewDeviceModel || 'nanoOne'] }}
+            </MenubarItem>
+            <MenubarSeparator />
             <MenubarItem>{{ $t('navbar.device.preferences') }}
               <MenubarShortcut>⌘,</MenubarShortcut>
             </MenubarItem>
@@ -136,6 +140,11 @@ const { electron } = window
 const isMacOS = electron?.platform === 'darwin'
 const zoomFactor = ref(1)
 
+const previewDeviceNames = ref({
+  nanoOne: 'One',
+  nanoZero: 'Zero',
+})
+
 onMounted(() => {
   window.addEventListener('resize', () => {
     zoomFactor.value = window.outerWidth / window.innerWidth
diff --git a/src/components/old/DevicePreviewOld.vue b/src/components/old/DevicePreviewOld.vue
index f7e81ea..95784a3 100644
--- a/src/components/old/DevicePreviewOld.vue
+++ b/src/components/old/DevicePreviewOld.vue
@@ -8,7 +8,7 @@
     <div class="flex justify-center">
       <div
         class="flex bg-cover mb-6 w-72 aspect-square"
-        style="background-image: url(../../assets/icons/xl-bg-ico.svg)">
+        style="background-image: url(../../assets/old/xl-bg-ico.svg)">
         <div class="flex flex-col w-full justify-center m-9 rounded-full overflow-hidden">
           <div class="self-center w-8 mb-1 opacity-50">
             <img src="../../assets/logos/logoMidi.svg" alt="midi-logo">
@@ -27,5 +27,5 @@
 </template>
 <script setup>
 import DeviceBar from '@/components/device/DeviceBar.vue'
-import DeviceBackground from '@/assets/icons/xl-bg-ico.svg'
+import DeviceBackground from '@/assets/old/xl-bg-ico.svg'
 </script>
\ No newline at end of file
diff --git a/src/store.js b/src/store.js
index aa32b4b..a79e938 100644
--- a/src/store.js
+++ b/src/store.js
@@ -39,6 +39,7 @@ export const useStore = defineStore('main', {
           },
         },
       },
+      previewDeviceModel: 'nanoOne',
     }
   }, getters: {
     profiles: (state) => state.profileCategories.flatMap(c => c.profiles),
@@ -153,6 +154,9 @@ export const useStore = defineStore('main', {
     setConnected(connected) {
       this.connected = connected
     },
+    switchPreviewDeviceModel() {
+      this.previewDeviceModel = this.previewDeviceModel === 'nanoOne' ? 'nanoZero' : 'nanoOne'
+    },
   },
 })