UPD: OFFLINE State

src/App.vue

@@ -13,13 +13,15 @@ store.fetchProfiles()
 <template>
   <main class="select-none w-screen h-screen flex flex-col">
     <Navbar class="flex-none" />
-    <div class="flex-1 min-h-0 flex flex-row">
+    <div class="flex-1 min-h-0 flex flex-row justify-center">
       <ProfileManager
+        :class="{'invisible': !store.connected }"
         class="basis-1/3 min-w-60 flex-1 flex flex-col border-solid border-0 border-r bg-zinc-900 bg-opacity-50" />
       <DevicePreview
-        class="basis-1/3 flex-col flex-1 flex border-solid border-0 border-r" />
+        class="basis-1/3 flex-col flex" />
       <ConfigPane
-        class="flex-1 basis-2/5 flex flex-col border-solid border-0 border-r bg-zinc-900 bg-opacity-50" />
+        :class="{'invisible': !store.connected }"
+        class="flex-1 basis-2/5 flex flex-col border-solid border-0 border-l bg-zinc-900 bg-opacity-50" />
     </div>
   </main>
 </template>

src/components/Navbar.vue

@@ -56,7 +56,11 @@
       </div>
       <div class="grow" />
       <MenubarMenu>
-        <MenubarTrigger class="app-titlebar-button text-muted-foreground border-2">Disconnect</MenubarTrigger>
+        <MenubarTrigger
+          class="app-titlebar-button text-muted-foreground border-2"
+          @click="store.setConnected(!store.connected)">
+          {{ store.connected ? 'Disconnect' : 'Connect' }}
+        </MenubarTrigger>
       </MenubarMenu>
       <div class="flex h-full">
         <button
@@ -90,9 +94,11 @@ import {
 } from '@/components/ui/menubar/index.js'
 import ScrambleText from '@/components/common/ScrambleText.vue'
 import { X, Square, Minus } from 'lucide-vue-next'
-import { Button } from '@/components/ui/button'
 import { ref } from 'vue'
 import { Separator } from '@/components/ui/separator'
+import { useStore } from '@/store'
+
+const store = useStore()
 
 const resizeable = ref(false)
 

src/components/common/ScrambleText.vue

@@ -77,6 +77,8 @@ function replaceContent(text = props.text, replaceInterval = props.replaceInterv
     setTimeout(() => {
       replaceContent(text, replaceInterval, steps + 1)
     }, replaceInterval * (1 + Math.random()))
+  } else {
+    emit('finish')
   }
 }
 
@@ -113,6 +115,8 @@ function scramble(scrambleAmount = props.scrambleAmount, replaceInterval = props
 
 defineExpose({ scramble })
 
+const emit = defineEmits(['finish'])
+
 onMounted(() => {
   if (props.scrambleOnMount) {
     setTimeout(() => {
@@ -124,7 +128,11 @@ onMounted(() => {
 })
 
 watch(() => props.text, () => {
-  replaceContent()
+  if (content.value === '') {
+    scramble()
+  } else {
+    replaceContent()
+  }
 })
 </script>
 

src/components/device/DevicePreview.vue

@@ -3,35 +3,48 @@
     <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})`}">
-      <div class="px-10 h-12 flex justify-between items-center">
+      <div v-if="store.connected" class="px-10 h-12 flex justify-between items-center">
         <h2>Nano_D++</h2>
-        <!-- TODO: Remove later if not needed -->
+        <div class="font-mono text-sm">
-        <div v-if="store.selectedProfile" class="font-mono text-sm">
           <span class="text-muted-foreground">Firmware: </span>
           <ScrambleText text="v1.3.2a" />
         </div>
       </div>
-      <DeviceLEDRing :value="barValue" class="absolute h-[66%] top-[12.5%] left-0 right-0 mx-auto" />
+      <DeviceLEDRing
+        v-if="store.connected" :value="barValue"
+        class="absolute h-[66%] top-[12.5%] left-0 right-0 mx-auto" />
       <div
         class="rounded-full aspect-square absolute h-[30%] top-[30.5%] left-0 right-0 mx-auto flex flex-col justify-center items-center overflow-hidden"
         style="background: linear-gradient(45deg, black 30%, #252525 50%, #232323 60%, black)">
-        <div class="flex flex-col items-center text-center pb-2 mix-blend-screen">
+        <div
+          v-if="store.connected"
+          class="flex flex-col items-center text-center pb-2 mix-blend-screen">
           <img :src="LogoMidi" alt="midi-logo" class="opacity-50 h-4">
           <h2 class="font-pixellg text-5xl">{{ parseInt(value) }}</h2>
           <div class="font-pixelsm text-md">HIGH PASS</div>
           <DeviceBar v-model="barValue" :count="30" :width="120" />
-          <span
+          <span class="w-36 font-pixelsm text-[7pt] text-muted-foreground uppercase">
-            class="w-36 font-pixelsm text-[7pt] text-muted-foreground">
             KORG MINILOGUE HIGH PASS FILTER 0-127
-        </span>
+          </span>
+        </div>
+        <div v-else class="flex flex-col items-center text-center mix-blend-screen">
+          <ScrambleText
+            :text="offlineText"
+            scramble-on-mount
+            :fill-interval="50"
+            :replace-interval="50"
+            class="uppercase font-pixelsm text-[7pt] text-muted-foreground"
+            @finish="nextOfflineText" />
         </div>
       </div>
       <button
+        v-if="store.connected"
         class="rounded-full outline-2 absolute h-[41.5%] top-[24.5%] aspect-square left-0 right-0 mx-auto transition-all"
         :class="{'outline outline-white': store.selectedFeature==='knob',
         'hover:outline outline-zinc-400': store.selectedFeature!=='knob'}"
         @click="store.selectConfigFeature('knob')" />
       <DeviceKeys
+        v-if="store.connected"
         class="absolute w-[72.7%] top-[77.2%] gap-[2.8%] left-0 right-0 mx-auto"
         :selected="store.selectedFeature === 'key' && store.selectedKey"
         @select="store.selectKey" />
@@ -62,6 +75,35 @@ const animateValue = () => {
   setTimeout(animateValue, 1500 + Math.random() * 2000)
 }
 
+const offlineText = ref('NO DEVICE CONNECTED')
+const offlineTexts = [
+  'AWAITING CONNECTION',
+  'ARE YOU STILL THERE?',
+  'DEVICE OFFLINE',
+  'AWAITING CONNECTION',
+  'I MISS YOU',
+  'AWAITING CONNECTION',
+  'NO DEVICE CONNECTED',
+  'IS ANYONE THERE?',
+  'AWAITING CONNECTION',
+  'DEVICE OFFLINE',
+  'NAP TIME',
+  'NO DEVICE CONNECTED',
+]
+
+let offlineTextIndex = 0
+const nextOfflineText = () => {
+  console.log(offlineText.value)
+  if (offlineText.value === '') {
+    offlineText.value = offlineTexts[offlineTextIndex]
+    offlineTextIndex = (offlineTextIndex + 1) % offlineTexts.length
+  } else {
+    setTimeout(() => {
+      offlineText.value = ''
+    }, 2000)
+  }
+}
+
 onMounted(() => {
   animateValue()
 })

src/store.js

@@ -149,6 +149,9 @@ export const useStore = defineStore('main', {
     setCurrentConfigPage(page) {
       this.currentConfigPage = page
     },
+    setConnected(connected) {
+      this.connected = connected
+    },
   },
 })